@layer pages {
    /* SHMOT landing — scrollytelling «одна карта-флип» (Scan → Try-On → Flat Lay →
       Wardrobe → Outfits → Plan → AI Stylist). Подключается ТОЛЬКО на index.html.
       Классы не пересекаются со style.css (проверено). Недостающие переменные ниже;
       --accent/--text уже есть в style.css и совпадают. */
    :root{
      --pink:#bd5e8f;
      --teal:#52b8eb;
      --text-2:rgba(26,26,46,.6);
      --text-3:rgba(26,26,46,.4);
      --glass:rgba(255,255,255,.55);
      --glass-line:rgba(255,255,255,.8);
      --r:24px;
      --head:'Space Grotesk','Inter',sans-serif;
    }

    /* ── scrollytelling ── */
    .land-flow{padding:22vh 24px 28vh}
    .inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
    .sticky{position:sticky;top:18vh;display:flex;justify-content:center}

    /* карта-флип: .stage — контейнер с перспективой, .face — реальные стороны карты.
       front = Style Scan, back = Try-On. JS крутит .flip-inner по rotateY. */
    .stage{position:relative;width:100%;max-width:400px;aspect-ratio:3/4;perspective:1200px}
    .flip-inner{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
    .face{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;
      background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 18px 50px rgba(26,26,46,.14);
      backface-visibility:hidden;-webkit-backface-visibility:hidden}
    .face.back{transform:rotateY(180deg)}
    /* только плейсхолдер-портрет скрыт по умолчанию (JS ставит display:block) */
    #portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
    .face .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
      color:var(--text-3);font-size:14px;line-height:1.5;padding:24px;
      background:radial-gradient(120% 90% at 50% 25%, rgba(108,92,231,.08), transparent 60%)}

    /* слой 2: два прохода скана + поле точек анализа + сетка лица */
    .scanline,.scanline2{position:absolute;left:0;right:0;height:4px;top:0;opacity:0;
      background-image:radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1.6px);
      background-size:11px 4px;background-repeat:repeat-x;
      filter:drop-shadow(0 0 5px rgba(255,255,255,.85))}
    .dots{position:absolute;inset:0;opacity:0;
      background-image:radial-gradient(circle, rgba(255,255,255,.6) .8px, transparent 1.5px);
      background-size:17px 17px;
      filter:drop-shadow(0 0 1px rgba(70,50,140,.35))}
    .mesh{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
      filter:drop-shadow(0 0 1px rgba(70,50,140,.4))}
    .mesh path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.14}
    .mesh circle{fill:rgba(255,255,255,.9);r:.42}

    /* слой 3: результат скана — статус-чип, факты типом на фото (справа снизу),
       стеклянная подпись (сезон + подтон) и палитра. Значения — маркетинговый мок
       (не живой скан), поэтому захардкожены в разметке. Прототип: prototypes/tmp/landing-scan-card.html */
    .ss-chip{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
      border-radius:999px;background:rgba(255,255,255,.5);border:1px solid var(--glass-line);
      backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
      font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--text);
      opacity:0;transition:opacity .4s ease}
    .ss-dot{width:6px;height:6px;border-radius:50%;background:#4ec98a;box-shadow:0 0 0 3px rgba(78,201,138,.22)}

    .ss-facts{position:absolute;right:16px;bottom:96px;color:#fff;text-align:right}
    .ss-frow{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding:5px 0;
      opacity:0;transform:translateY(-7px);
      transition:opacity .48s cubic-bezier(.2,.8,.2,1),transform .48s cubic-bezier(.2,.8,.2,1)}
    .ss-k{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
      color:rgba(255,255,255,.6);text-shadow:0 1px 6px rgba(0,0,0,.35)}
    .ss-v{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;
      text-shadow:0 1px 8px rgba(0,0,0,.4)}
    .ss-sw{display:inline-block;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}

    .ss-bar{position:absolute;left:12px;right:12px;bottom:12px;padding:13px 15px 12px;border-radius:16px;
      background:rgba(255,255,255,.52);border:1px solid var(--glass-line);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(26,26,46,.12);
      opacity:0;transform:translateY(6px);
      transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
    .ss-brow{display:flex;align-items:center;gap:10px}
    .ss-title{font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:-.01em;
      opacity:0;transform:translateY(5px);
      transition:opacity .48s cubic-bezier(.2,.8,.2,1),transform .48s cubic-bezier(.2,.8,.2,1)}
    .ss-und{margin-left:auto;padding:4px 9px;border-radius:8px;font-size:10.5px;font-weight:600;color:#fff;
      background:linear-gradient(135deg,var(--accent),var(--teal));
      opacity:0;transform:translateY(5px);
      transition:opacity .48s cubic-bezier(.2,.8,.2,1),transform .48s cubic-bezier(.2,.8,.2,1)}
    .ss-pal{display:flex;gap:5px;margin-top:11px}
    .ss-pal span{flex:1;height:13px;border-radius:5px;background-color:rgba(255,255,255,.22);
      background-image:linear-gradient(var(--c),var(--c));background-repeat:no-repeat;
      background-position:left center;background-size:0% 100%;
      transition:background-size .42s cubic-bezier(.2,.8,.2,1)}

    /* состояния по шагам. Сам скан двигает JS-scrub по позиции скролла; тут — видимость.
       Ревил результата — чистый CSS на .is-3 (transition-delay даёт каскад; при уходе
       со сцены is-3 снимается и всё сбрасывается без задержек, каскад проигрывается заново). */
    .stage.is-2 .dots{opacity:1}
    .stage.is-2 .mesh{opacity:.45}
    .stage.is-3 .mesh{opacity:0}
    /* весь результат (чип, факты, панель, палитра) появляется только на беате 3 —
       ничего не висит поверх скана на беатах 1–2 */
    .stage.is-3 .ss-chip{opacity:1}
    /* факты — каскад сверху вниз */
    .stage.is-3 .ss-frow{opacity:1;transform:none}
    .stage.is-3 .ss-frow:nth-child(1){transition-delay:.06s}
    .stage.is-3 .ss-frow:nth-child(2){transition-delay:.24s}
    .stage.is-3 .ss-frow:nth-child(3){transition-delay:.42s}
    .stage.is-3 .ss-frow:nth-child(4){transition-delay:.60s}
    .stage.is-3 .ss-frow:nth-child(5){transition-delay:.78s}
    /* панель + сезон + подтон + палитра — вплывают уже наполненными, после каскада фактов */
    .stage.is-3 .ss-bar{opacity:1;transform:none;transition-delay:1.30s}
    .stage.is-3 .ss-title{opacity:1;transform:none;transition-delay:1.41s}
    .stage.is-3 .ss-und{opacity:1;transform:none;transition-delay:1.50s}
    .stage.is-3 .ss-pal span{background-size:100% 100%}
    .stage.is-3 .ss-pal span:nth-child(1){transition-delay:1.41s}
    .stage.is-3 .ss-pal span:nth-child(2){transition-delay:1.52s}
    .stage.is-3 .ss-pal span:nth-child(3){transition-delay:1.63s}
    .stage.is-3 .ss-pal span:nth-child(4){transition-delay:1.74s}
    .stage.is-3 .ss-pal span:nth-child(5){transition-delay:1.85s}
    .stage.is-3 .ss-pal span:nth-child(6){transition-delay:1.96s}

    /* текст справа: плавный параллакс (landing.js) — контент шага едет на половине
       скорости скролла, без остановок; яркость — пирамида от центра карты.
       База — 100vh на шаг; расстояние текст N→N+1 ≈ половина высоты шага N,
       поэтому шагам с тяжёлой анимацией даём индивидуальный запас ниже. */
    .steps{display:flex;flex-direction:column}
    .step{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;opacity:.3}
    /* скан = два прохода линии + сетка на одном беате — больше места до 03,
       чтобы анимация комфортно пролистывалась */
    .step[data-step="2"]{min-height:150vh}
    /* 03→04: в этом промежутке карта делает полный флип — даём ему развернуться
       (высота растит и длину поворота: окно флипа = весь путь от ухода 03 до пика 04) */
    .step[data-step="3"]{min-height:165vh}
    /* 05→06: смена сцены на офис + каскад атрибутов + score — пусть доиграет до флэт-лея */
    .step[data-step="5"]{min-height:150vh}
    /* 06: выноски флэт-лея дорисованы к 70% беата (landing.js) — запас высоты держит
       полную картинку со всеми подписями (туфли успевают пожить) до перехода */
    .step[data-step="6"]{min-height:130vh}
    /* сдвиг контента шага: SDA-анимация (transform) или --ty из JS-фолбэка; сам
       .step не трансформируем — его rect = источник правды для беатов/прогресса */
    .step>*{transform:translateY(var(--ty,0px))}
    .step:last-child{min-height:40vh}
    .step.is-current{opacity:1}
    .num{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:14px}
    .step h2{font-family:var(--head);font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin:0 0 14px;line-height:1.1}
    .step p{font-size:18px;line-height:1.6;color:var(--text-2);max-width:32ch;margin:0}
    .step-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:24px;
      font-size:15px;font-weight:600;color:var(--accent);text-decoration:none}
    .step-cta svg{width:18px;height:18px;transition:transform .25s ease}
    .step-cta:hover svg{transform:translateX(4px)}

    /* ── Try-On: смена сцены/образа по линии (scene-wipe) ── */
    .to-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .to-scene[data-scene="2"]{clip-path:inset(0 0 100% 0)}
    .to-line{position:absolute;left:0;right:0;height:4px;top:0;opacity:0;
      background-image:radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 1.6px);
      background-size:11px 4px;background-repeat:repeat-x;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
    /* карточка try-on: статус-чип + атрибуты справа + Shmot Score снизу (язык карточки цветотипа) */
    .to-chip{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
      border-radius:999px;background:rgba(255,255,255,.5);border:1px solid var(--glass-line);backdrop-filter:blur(14px);
      font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--text);opacity:0}
    .to-cdot{width:6px;height:6px;border-radius:50%;background:#4ec98a;box-shadow:0 0 0 3px rgba(78,201,138,.22)}
    .to-facts{position:absolute;right:16px;bottom:98px;color:#fff;text-align:right}
    .to-frow{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding:5px 0;opacity:0;transform:translateY(-7px)}
    .to-k{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);text-shadow:0 1px 6px rgba(0,0,0,.35)}
    .to-v{font-size:13px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.4)}
    .to-scorebar{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 15px;border-radius:16px;
      background:rgba(255,255,255,.55);border:1px solid var(--glass-line);backdrop-filter:blur(16px);
      box-shadow:0 8px 24px rgba(26,26,46,.12);opacity:0;transform:translateY(6px)}
    .to-stop{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
    .to-stop b{font-family:var(--head);font-size:24px;font-weight:800;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
    .to-stop span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(26,26,46,.55)}
    .to-pb{height:6px;border-radius:999px;background:rgba(17,21,34,.08);overflow:hidden}
    .to-pb>i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent)}

    /* ── Шаг 6 Flat Lay: выноски по вещам (линия от вещи к слову + подчёркивание) ── */
    .callouts{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
      filter:drop-shadow(0 1px 2px rgba(20,15,40,.55))}
    .callouts path{fill:none;stroke:rgba(255,255,255,.92);stroke-width:.32;stroke-linecap:round;stroke-linejoin:round;
      stroke-dasharray:1;stroke-dashoffset:1}
    .callouts circle{fill:#fff;opacity:0}
    .callouts text{fill:#fff;font:600 3.1px/1 system-ui,sans-serif;letter-spacing:.35px;dominant-baseline:middle;opacity:0}
    /* ── Шаг 7 Outfits: 4 плашки сливаются в ОДНУ картинку ── */
    .to-flat{position:absolute;inset:0;overflow:hidden;opacity:0}
    .to-flat-img{display:block;width:100%;height:100%;object-fit:cover}

    /* ── Outfits: вещи собираются в готовый образ ── */
    .outfit{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:16px;padding:28px;pointer-events:none}
    .outfit-scrim{position:absolute;inset:0;opacity:0;
      background:rgba(244,242,248,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
    .outfit-cap{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap;
      font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.02em;opacity:0;
      background:linear-gradient(135deg,var(--accent),var(--pink));padding:6px 14px;border-radius:999px;
      box-shadow:0 4px 12px rgba(108,92,231,.35)}
    /* ширина 86% — предел: два ряда плиток 3:4 + gap ещё влезают в карту 3:4 с паддингом 28px */
    .outfit-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:86%}
    .outfit-grid .o{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:16px;display:flex;align-items:flex-end;justify-content:center;
      padding:9px;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);
      box-shadow:0 10px 24px rgba(26,26,46,.22);opacity:0}
    .outfit-grid .o > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .outfit-grid .o::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
      background:linear-gradient(transparent,rgba(22,17,32,.5))}
    .outfit-grid .o > span{position:relative;z-index:1}
    .o.o0{background:linear-gradient(160deg,#2c2730,#4a4350)}
    .o.o1{background:linear-gradient(160deg,#3a3540,#565060)}
    .o.o2{background:linear-gradient(160deg,#494150,#6a5f72)}
    .o.o3{background:linear-gradient(160deg,#433c54,#625978)}

    /* ── Plan: мета лука + погода двумя чипами сверху (язык карточки — EN) ── */
    .plan-chip{position:absolute;top:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
      border-radius:999px;background:rgba(255,255,255,.6);border:1px solid var(--glass-line);
      backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
      font-size:11px;font-weight:600;color:var(--text);opacity:0;transform:translateY(-6px)}
    .plan-meta{left:14px}
    .plan-wx{right:14px}
    .pw-ic{font-size:13px;line-height:1}

    /* ── Plan: аккуратная полоска-датапикер, выкатывается снизу ── */
    .plan-cal{position:absolute;left:14px;right:14px;bottom:16px;
      background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
      border-radius:18px;box-shadow:0 12px 30px rgba(26,26,46,.2);
      padding:8px 7px;display:flex;align-items:center;gap:3px;
      opacity:0;transform:translateY(72px)}
    .plan-ico{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
      background:rgba(108,92,231,.1);color:var(--accent)}
    .plan-ico svg{width:17px;height:17px}
    .plan-week{display:flex;flex:1;min-width:0}
    .plan-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0;position:relative}
    .plan-day .d{font-size:9px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.02em}
    .plan-day .nm{font-size:14px;font-weight:700;color:var(--text)}
    .plan-day .chk{position:absolute;top:3px;right:4px;color:#1ba968;font-size:11px;font-weight:900;line-height:1;
      opacity:0;transform:scale(.5)}
    .plan-arrow{flex:0 0 auto;width:24px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
    .plan-arrow svg{width:15px;height:15px}

    /* ── AI Stylist (финал): коллаж пройденного + AI-ядро ── */
    .ai{position:absolute;inset:0}
    .ai-scrim{position:absolute;inset:0;opacity:0;
      background:radial-gradient(120% 95% at 50% 28%, #eef0ff 0%, #f4eefb 55%, #e7e1f0 100%)}
    /* коллаж пройденного: три мини-копии карточек веером.
       Внутри .ai-mini-inner лежит клон карточки в её натуральную величину (330×452),
       а landing.js ужимает его под фактическую ширину превью — пропорции и типографика родные. */
    /* белая окантовка — кольцом тени, а не border: border съедал бы 4px контентной области,
       и клон (он масштабируется по ширине контента) не попадал бы в рамку — низ плашек срезало */
    .ai-mini{position:absolute;width:41%;aspect-ratio:3/4;overflow:hidden;border-radius:14px;
      background:#fff;box-shadow:0 0 0 2px #fff, 0 8px 20px rgba(26,26,46,.22);opacity:0}
    /* высота строго 4/3 от ширины — как у самой карточки, иначе клон не совпадает с рамкой превью */
    .ai-mini-inner{width:330px;height:440px;position:relative;overflow:hidden;transform-origin:top left}
    /* клон кадра: id со снимка снят, поэтому раскладку задаём здесь; клип своего бита снимаем */
    .ai-mini-inner > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
    .ai-mini .to-scene[data-scene="2"]{clip-path:none}
    .m-scan{left:22%;top:9%;z-index:1}
    .m-plan{left:78%;top:9%;z-index:2}
    .m-try {left:50%;top:5%;z-index:3}
    /* клоны показываем сразу в финальном виде: покадровые анимации своих беатов к ним не применяются */
    .ai-mini .ss-chip,.ai-mini .ss-frow,.ai-mini .ss-bar,.ai-mini .ss-title,.ai-mini .ss-und,
    .ai-mini .to-chip,.ai-mini .to-frow,.ai-mini .to-scorebar,.ai-mini .plan-chip,.ai-mini .plan-cal{
      opacity:1;transform:none;transition:none}
    .ai-mini .ss-pal span{background-size:100% 100%;transition:none}
    .ai-mini .plan-day:nth-child(-n+5) .chk{opacity:1;transform:none}
    .ai-core{position:absolute;left:50%;top:66%;width:60px;height:60px;border-radius:50%;opacity:0;
      transform:translate(-50%,-50%) scale(.4);display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,var(--accent),var(--pink));
      box-shadow:0 0 0 5px #fff, 0 12px 28px rgba(108,92,231,.45)}
    .ai-core svg{width:28px;height:28px}
    .ai-cap{position:absolute;left:16px;right:16px;top:79%;text-align:center;opacity:0}
    .ai-cap b{display:block;font-family:var(--head);font-size:19px;font-weight:700;letter-spacing:-.01em;
      color:var(--text);line-height:1.2}
    .ai-cap i{display:block;font-style:normal;font-size:11.5px;color:var(--text-2);margin-top:6px}

    /* мобильная карусель текста беатов (на десктопе её нет) */
    .m-flow{display:none}

    /* ── Мобилка: карта 3:4 залипает сверху, текст беатов — каруселью слева снизу
       (десктоп не трогаем). Шаги — невидимые спейсеры (высота скролла + триггеры беатов),
       текст уезжает вверх и выцветает, активный беат в фокусе. ── */
    @media (max-width:760px){
      .land-flow{padding:8px 16px 24vh}
      .inner{display:block}
      .sticky{position:sticky;top:6vh;z-index:5;justify-content:center}   /* карта ещё ниже */
      .stage{width:76vw;max-width:310px}
      .steps{margin-top:0}
      /* Высота шага = сколько скролла приходится на один беат анимации, т.е. её
         «скорость» при свайпе. 60vh пролетался одним инерционным свайпом — сцены
         мелькали; 84vh замедляет каждую фазу ~в 1.4×. Текст-карусель (.m-flow)
         подстраивается сама: SLOT в landing.js меряет реальную высоту шага. */
      .step{min-height:84vh}
      .step[data-step="2"]{min-height:140vh}
      .step:last-child{min-height:64vh}
      .step .num,.step h2,.step p{display:none}   /* текст шага скрыт — рендерим в .m-flow */
      /* CTA на мобилке прячем и в спейсере, и в клоне карусели (она pointer-events:none) */
      .step .step-cta,.m-blk .step-cta{display:none}

      /* карусель: ширина = ширине карты, по центру; зона от низа карты до низа экрана */
      .m-flow{display:block;position:fixed;left:50%;transform:translateX(-50%);width:min(76vw,310px);
        top:calc(6vh + min(76vw,310px) * 1.3333 + 12px);bottom:18px;z-index:8;
        overflow:hidden;text-align:left;opacity:0;transition:opacity .4s;pointer-events:none;
        /* края ленты растворяются градиентом (вариант «маска+строки» из прототипа) */
        -webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);
        mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
      .m-flow.show{opacity:1}
      .m-track{position:absolute;left:0;right:0;top:0;will-change:transform}
      /* блоки позиционируются JS (top = i*SLOT), центрируются по своей середине */
      .m-blk{position:absolute;left:0;right:0;transform:translateY(-50%);will-change:opacity,top}
      /* строки беата (num/h2/p) зажигаются каскадом от позиции скролла — стили ставит landing.js */
      .m-blk .ln{will-change:opacity,transform}
      .m-blk .num{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent);margin-bottom:9px}
      .m-blk h2{font-family:var(--head);font-size:24px;line-height:1.14;letter-spacing:-.02em;margin:0 0 9px;color:var(--text)}
      .m-blk p{font-size:14px;line-height:1.45;margin:0;color:var(--text-2)}
    }
}
