.spice-scenario {
    --spice-scenario-text: #2f3539;
    --spice-scenario-muted: #747b81;
    --spice-scenario-line: #dfe3e6;
    --spice-scenario-soft: #f5f6f6;
    --spice-scenario-soft-2: #eef0f1;
    --spice-scenario-strong: #3b4146;
    box-sizing: border-box;
    width: 100%;
    color: var(--spice-scenario-text);
    background: #fff;
    border: 1px solid var(--spice-scenario-line);
    border-radius: 22px;
    overflow: hidden;
    font-family: inherit;
}
.spice-scenario *, .spice-scenario *::before, .spice-scenario *::after { box-sizing: border-box; }
.spice-scenario__header {
    padding: clamp(28px, 4vw, 54px);
    background: linear-gradient(180deg, #f8f9f9 0%, #f2f3f3 100%);
    border-bottom: 1px solid var(--spice-scenario-line);
}
.spice-scenario__eyebrow,
.spice-scenario__section-kicker {
    display: block;
    margin: 0 0 12px;
    color: #777f85;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.spice-scenario__title {
    max-width: 900px;
    margin: 0;
    color: #2e3438;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 720;
}
.spice-scenario__intro {
    max-width: 820px;
    margin-top: 20px;
    color: #5e666c;
    font-size: 17px;
    line-height: 1.7;
}
.spice-scenario__intro > :first-child,
.spice-scenario__section-text > :first-child,
.spice-scenario__fact-value > :first-child,
.spice-scenario__hint-text > :first-child { margin-top: 0; }
.spice-scenario__intro > :last-child,
.spice-scenario__section-text > :last-child,
.spice-scenario__fact-value > :last-child,
.spice-scenario__hint-text > :last-child { margin-bottom: 0; }
.spice-scenario__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
.spice-scenario__meta > span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid #d9dde0;
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    color: #626a70;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .035em;
}
.spice-scenario__meta > span:empty { display: none; }
.spice-scenario__body {
    padding: 0 clamp(24px, 4vw, 54px) clamp(28px, 4vw, 54px);
}
.spice-scenario__section {
    padding: clamp(28px, 4vw, 46px) 0;
    border-bottom: 1px solid var(--spice-scenario-line);
}
.spice-scenario__section:last-child { border-bottom: 0; padding-bottom: 0; }
.spice-scenario__section-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}
.spice-scenario__section-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #d9dde0;
    border-radius: 13px;
    background: #f8f9f9;
    color: #7a8288;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}
.spice-scenario__section-title {
    margin: 4px 0 0;
    color: #343a3f;
    font-size: clamp(20px, 2.3vw, 29px);
    line-height: 1.15;
    letter-spacing: -.02em;
}
.spice-scenario__section-text {
    max-width: 900px;
    margin-left: 62px;
    color: #5e666c;
    font-size: 16px;
    line-height: 1.75;
}
.spice-scenario__section--strong {
    margin: 22px -20px 0;
    padding: clamp(28px, 4vw, 44px) 20px;
    border: 1px solid #dce0e2;
    border-radius: 18px;
    background: linear-gradient(180deg, #f5f6f6 0%, #f0f2f2 100%);
}
.spice-scenario__section--strong + .spice-scenario__section { border-top: 0; }
.spice-scenario__section--strong .spice-scenario__section-number {
    background: #3d4449;
    border-color: #3d4449;
    color: #fff;
}
.spice-scenario__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-left: 62px;
}
.spice-scenario__fact {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid #e0e4e6;
    border-radius: 15px;
    background: #fafafa;
}
.spice-scenario__fact-label {
    display: block;
    margin-bottom: 7px;
    color: #8a9196;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.spice-scenario__fact-value {
    color: #3d4449;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.spice-scenario__hints {
    display: grid;
    gap: 10px;
    margin-left: 62px;
}
.spice-scenario__hint {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f7f8f8;
}
.spice-scenario__hint-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 8px;
    background: #e9ecee;
    color: #757d83;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}
.spice-scenario__hint-text {
    padding-top: 2px;
    color: #555e64;
    font-size: 14px;
    line-height: 1.6;
}
.spice-scenario__section--media > .spice-guide-gallery,
.spice-scenario__section--media > figure {
    margin-left: 62px;
}
.spice-scenario__gallery {
    margin-top: 8px;
}
.spice-scenario .spice-guide-gallery__viewport {
    position: relative;
    overflow: hidden;
    border: 1px solid #dfe3e6;
    border-radius: 16px;
    background: #f3f4f4;
}
.spice-scenario .spice-guide-gallery__track {
    display: flex;
    width: 100%;
    transition: transform .3s ease;
    will-change: transform;
}
.spice-scenario .spice-guide-gallery__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
}
.spice-scenario .spice-guide-gallery__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 680px;
    object-fit: contain;
    background: #eef0f1;
}
.spice-scenario .spice-guide-gallery__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: rgba(40,45,49,.78);
    color: #fff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}
.spice-scenario .spice-guide-gallery__arrow--prev { left: 14px; }
.spice-scenario .spice-guide-gallery__arrow--next { right: 14px; }
.spice-scenario .spice-guide-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 14px 0 2px;
}
.spice-scenario .spice-guide-gallery__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c9ced1;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.spice-scenario .spice-guide-gallery__dot.is-active {
    width: 24px;
    background: #555d63;
}
.spice-scenario__slide-caption,
.spice-scenario__media-caption {
    margin-top: 9px;
    color: #858c91;
    font-size: 12px;
    line-height: 1.5;
}
.spice-scenario__video-figure,
.spice-scenario__audio-figure {
    position: relative;
    margin-top: 22px;
}
.spice-scenario__video {
    display: block;
    width: 100%;
    max-height: 650px;
    border-radius: 15px;
    background: #25292c;
}
.spice-scenario__audio { width: 100%; min-height: 44px; }

@media (max-width: 900px) {
    .spice-scenario__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .spice-scenario { border-radius: 16px; }
    .spice-scenario__header { padding: 26px 22px; }
    .spice-scenario__body { padding: 0 22px 28px; }
    .spice-scenario__section-head { gap: 12px; }
    .spice-scenario__section-number { width: 38px; height: 38px; border-radius: 11px; }
    .spice-scenario__section-text,
    .spice-scenario__facts,
    .spice-scenario__hints,
    .spice-scenario__section--media > .spice-guide-gallery,
    .spice-scenario__section--media > figure { margin-left: 0; }
    .spice-scenario__facts { grid-template-columns: 1fr; }
    .spice-scenario__section--strong { margin-left: -8px; margin-right: -8px; padding-left: 14px; padding-right: 14px; }
}