:root {
      color-scheme: dark;
      font-family: "Onest", sans-serif;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      --night: #070713;
      --night-2: #0d0a20;
      --obsidian: #151023;
      --plum: #1d1232;
      --violet: #8d5cff;
      --lilac: #c5a7ff;
      --gold: #e8b95d;
      --gold-light: #ffe8a5;
      --star: #f8f3ff;
      --muted: #b8adc9;
      --line: rgba(229, 214, 255, .12);
      --green: #8dd9ad;
      --live: #ff9aaa;
      --safe-top: max(18px, env(safe-area-inset-top));
      --safe-bottom: max(22px, env(safe-area-inset-bottom));
    }

    * { box-sizing: border-box; }
    html { min-width: 280px; overflow-x: hidden; background: #04030a; scroll-behavior: smooth; }
    body {
      min-width: 280px;
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 12% 18%, rgba(110, 56, 210, .28), transparent 26rem),
        radial-gradient(circle at 90% 72%, rgba(232, 185, 93, .14), transparent 24rem),
        #04030a;
      color: var(--star);
      font-size: 18px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    button, textarea { font: inherit; }
    button, a { touch-action: manipulation; }
    button { color: inherit; -webkit-tap-highlight-color: rgba(255, 232, 165, .12); }
    p, h1, h2, h3, strong, small, span, button, label, li { overflow-wrap: break-word; }
    button:focus-visible, textarea:focus-visible, summary:focus-visible {
      outline: 3px solid var(--gold-light);
      outline-offset: 3px;
    }
    [hidden] { display: none !important; }

    .skip-link {
      position: fixed;
      z-index: 300;
      top: 8px;
      left: 8px;
      padding: 10px 14px;
      border-radius: 12px;
      background: var(--gold-light);
      color: #271700;
      font-size: 14px;
      font-weight: 750;
      transform: translateY(-160%);
      transition: transform 160ms ease;
    }
    .skip-link:focus { transform: translateY(0); }

    .devbar {
      position: sticky;
      z-index: 100;
      top: 0;
      width: 100%;
      padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
      border-bottom: 1px solid rgba(255, 232, 165, .2);
      background: rgba(5, 4, 12, .96);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
      backdrop-filter: blur(14px);
    }
    .devbar__inner {
      display: flex;
      width: min(100%, 920px);
      margin: 0 auto;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .devbar__inner::-webkit-scrollbar { display: none; }
    .devbar__label {
      flex: 0 0 auto;
      padding: 6px 8px;
      border: 1px solid rgba(255, 232, 165, .34);
      border-radius: 8px;
      color: var(--gold-light);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
    }
    .devbar button {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 7px 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(29, 18, 50, .72);
      color: #d8cee6;
      font-size: 12px;
      font-weight: 650;
      cursor: pointer;
    }
    .devbar button.is-active {
      border-color: rgba(255, 232, 165, .58);
      background: rgba(232, 185, 93, .15);
      color: var(--gold-light);
    }

    .app {
      position: relative;
      width: min(100%, 480px);
      min-height: 100svh;
      margin: 0 auto;
      overflow: hidden;
      background:
        radial-gradient(circle at 88% 1%, rgba(141, 92, 255, .2), transparent 19rem),
        radial-gradient(circle at 0 48%, rgba(232, 185, 93, .065), transparent 24rem),
        var(--night);
      box-shadow: 0 0 90px rgba(112, 72, 198, .18);
      isolation: isolate;
    }

    .brand-header {
      position: relative;
      min-height: 238px;
      padding: calc(var(--safe-top) + 18px) 22px 30px;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
    }
    .brand-header__eyebrow {
      position: relative;
      z-index: 1;
      margin: 0 0 14px;
      color: var(--gold-light);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .brand-header h1 {
      position: relative;
      z-index: 1;
      max-width: 360px;
      margin: 0;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(48px, 13vw, 61px);
      font-weight: 600;
      letter-spacing: -.045em;
      line-height: .88;
      text-wrap: balance;
    }
    .brand-header__schedule {
      position: relative;
      z-index: 1;
      display: inline-flex;
      min-height: 38px;
      margin: 22px 0 0;
      padding: 8px 12px;
      border: 1px solid rgba(255, 232, 165, .22);
      border-radius: 999px;
      align-items: center;
      color: #f4ddb0;
      background: rgba(232, 185, 93, .07);
      font-size: 14px;
      font-weight: 600;
    }

    .home { padding: 22px 16px calc(var(--safe-bottom) + 34px); }

    .current-card {
      position: relative;
      padding: 25px 22px 28px;
      overflow: hidden;
      border: 1px solid rgba(232, 185, 93, .3);
      border-radius: 32px 32px 76px 32px;
      background: linear-gradient(155deg, #24143e 0%, #100a20 62%, #090817 100%);
      box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 26px 68px rgba(0, 0, 0, .34), 0 0 44px rgba(111, 64, 190, .1);
    }
    .current-card::after {
      position: absolute;
      right: -70px;
      bottom: -104px;
      width: 220px;
      height: 220px;
      border: 1px solid rgba(255, 232, 165, .12);
      border-radius: 50%;
      box-shadow: inset 0 0 54px rgba(141, 92, 255, .08);
      content: "";
      pointer-events: none;
    }
    .current-card.is-live { border-color: rgba(255, 154, 170, .34); }
    .current-card.is-complete { border-color: rgba(141, 217, 173, .28); }
    .current-kicker {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 14px;
      color: var(--gold-light);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .current-kicker i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 14px currentColor;
    }
    .is-live .current-kicker { color: var(--live); }
    .is-complete .current-kicker { color: var(--green); }
    .current-card h2 {
      position: relative;
      z-index: 1;
      max-width: 370px;
      margin: 0;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(36px, 9.6vw, 44px);
      font-weight: 600;
      letter-spacing: -.03em;
      line-height: .98;
      text-wrap: balance;
    }
    .current-card__date {
      position: relative;
      z-index: 1;
      margin: 11px 0 0;
      color: #f2dcaa;
      font-size: 15px;
      font-weight: 650;
    }
    .current-card__text {
      position: relative;
      z-index: 1;
      margin: 10px 0 0;
      color: #d5ccdf;
      font-size: 16px;
      line-height: 1.48;
    }

    .countdown {
      position: relative;
      z-index: 1;
      display: grid;
      margin-top: 20px;
      gap: 7px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .countdown div {
      min-width: 0;
      padding: 10px 4px 9px;
      border-top: 1px solid rgba(255, 232, 165, .25);
      text-align: center;
    }
    .countdown strong {
      display: block;
      color: #fff5d8;
      font-size: clamp(22px, 6.5vw, 30px);
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      line-height: 1;
    }
    .countdown span {
      display: block;
      margin-top: 5px;
      color: #a99db8;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .primary {
      position: relative;
      z-index: 2;
      display: flex;
      width: 100%;
      min-height: 60px;
      margin-top: 22px;
      padding: 15px 18px;
      border: 1px solid rgba(255, 239, 194, .85);
      border-radius: 19px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: linear-gradient(135deg, #ffe7a3 0%, #eabb60 48%, #b97922 100%);
      box-shadow: inset 0 1px rgba(255, 255, 255, .68), 0 14px 34px rgba(214, 158, 55, .25), 0 0 26px rgba(232, 185, 93, .12);
      color: #291902;
      font-size: 18px;
      font-weight: 750;
      line-height: 1.2;
      cursor: pointer;
      transition: transform 180ms ease, filter 180ms ease;
    }
    .primary:active { filter: brightness(1.04); transform: scale(.98); }
    .primary:disabled { opacity: .45; cursor: default; filter: saturate(.4); }
    .primary svg { flex: 0 0 auto; }

    .progress {
      margin: 18px 4px 24px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .progress__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px 16px;
      flex-wrap: wrap;
    }
    .progress__head h2 { margin: 0; color: #f2edf7; font-size: 16px; font-weight: 650; }
    .progress__head strong { color: var(--gold-light); font-size: 14px; font-weight: 650; text-align: right; }
    .progress__segments {
      display: grid;
      margin-top: 12px;
      gap: 4px;
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    .progress__segments i { height: 8px; border-radius: 999px; background: rgba(240, 229, 255, .1); }
    .progress__segments i.is-complete { background: linear-gradient(90deg, #d79b36, #f3d57d); box-shadow: 0 0 12px rgba(232, 185, 93, .34); }
    .progress__segments i.is-open { background: rgba(141, 92, 255, .34); box-shadow: inset 0 0 0 1px rgba(197, 167, 255, .22); }

    .program { margin-top: 32px; }
    .program__head { margin: 0 4px; }
    .program__head h2 {
      margin: 0;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 33px;
      font-weight: 600;
      line-height: 1;
    }
    .program__head p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
    .day-list { position: relative; display: grid; gap: 10px; }
    .day-list::before {
      position: absolute;
      z-index: 0;
      top: 44px;
      bottom: 44px;
      left: 34px;
      width: 1px;
      background: linear-gradient(180deg, rgba(232, 185, 93, .26), rgba(141, 92, 255, .19), rgba(229, 214, 255, .06));
      content: "";
    }
    .day-row {
      position: relative;
      z-index: 1;
      display: grid;
      width: 100%;
      min-height: 102px;
      padding: 14px 14px 14px 12px;
      border: 1px solid var(--line);
      border-radius: 25px;
      grid-template-columns: 54px minmax(0, 1fr) 22px;
      align-items: center;
      gap: 12px;
      background: linear-gradient(145deg, rgba(31, 23, 48, .98), rgba(12, 9, 21, .98));
      box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 12px 28px rgba(0, 0, 0, .14);
      text-align: left;
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease;
    }
    .day-row:not(:disabled):active { transform: scale(.985); }
    .day-row:disabled { cursor: default; opacity: .82; }
    .day-row.is-available { border-color: rgba(232, 185, 93, .42); background: linear-gradient(145deg, rgba(51, 35, 37, .98), rgba(20, 13, 26, .98)); }
    .day-row.is-current { border-color: rgba(197, 167, 255, .27); }
    .day-node {
      display: grid;
      width: 54px;
      height: 54px;
      border: 1px solid rgba(229, 214, 255, .14);
      border-radius: 50%;
      place-items: center;
      background: #171126;
      color: #aea3ba;
      box-shadow: 0 0 0 6px var(--night);
    }
    .day-node svg { width: 23px; height: 23px; }
    .day-node.is-complete { border-color: rgba(141, 217, 173, .28); background: rgba(44, 103, 70, .26); color: var(--green); }
    .day-node.is-open { border-color: rgba(197, 167, 255, .25); background: rgba(108, 69, 174, .25); color: #d9c4ff; }
    .day-node.is-available { border-color: rgba(255, 232, 165, .44); background: rgba(111, 77, 19, .32); color: var(--gold-light); }
    .day-copy { display: flex; min-width: 0; flex-direction: column; }
    .day-copy small { margin-bottom: 3px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .day-copy strong {
      display: block;
      color: #fff;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.25;
    }
    .day-copy span { margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.28; }
    .day-row:disabled .day-copy small { color: #94899f; }
    .day-row:disabled .day-copy strong { color: #d4ccdc; }
    .day-arrow { color: var(--lilac); font-size: 27px; line-height: 1; }

    .screen-layer {
      position: fixed;
      z-index: 120;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow-y: auto;
      background: var(--night);
      overscroll-behavior: contain;
    }
    .screen {
      position: relative;
      width: min(100%, 480px);
      min-height: 100svh;
      margin: 0 auto;
      background:
        radial-gradient(circle at 90% 0%, rgba(115, 64, 204, .18), transparent 25rem),
        var(--night);
      box-shadow: 0 0 80px rgba(0, 0, 0, .55);
    }
    .screen-hero {
      position: relative;
      min-height: 310px;
      padding: calc(var(--safe-top) + 84px) 21px 30px;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .screen-hero::before {
      position: absolute;
      top: -72px;
      right: -92px;
      width: 270px;
      height: 270px;
      border: 1px solid rgba(197, 167, 255, .14);
      border-radius: 50%;
      box-shadow: inset 0 0 74px rgba(141, 92, 255, .08), 0 0 70px rgba(141, 92, 255, .06);
      content: "";
    }
    .screen-hero__number {
      position: absolute;
      top: 42px;
      right: 18px;
      color: rgba(255, 255, 255, .045);
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 172px;
      font-weight: 600;
      line-height: .8;
      pointer-events: none;
    }
    .screen-hero__eyebrow { position: relative; margin: 0 0 8px; color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
    .screen-hero h1 { position: relative; max-width: 420px; margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(39px, 10.5vw, 50px); font-weight: 600; letter-spacing: -.035em; line-height: .95; text-wrap: balance; }
    .screen-hero__date { position: relative; margin: 13px 0 0; color: #eddaa8; font-size: 15px; font-weight: 650; }
    .screen-content { padding: 22px 16px calc(var(--safe-bottom) + 38px); }

    .state-box {
      padding: 20px;
      border: 1px solid rgba(255, 232, 165, .22);
      border-radius: 27px;
      background: linear-gradient(145deg, rgba(36, 21, 60, .92), rgba(18, 12, 31, .95));
    }
    .state-box__label { margin: 0 0 5px; color: var(--gold-light); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .state-box h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; font-weight: 600; line-height: 1; }
    .state-box > p:last-of-type { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
    .state-box .countdown { margin-top: 17px; }

    .content-section { padding: 28px 4px 0; }
    .content-section + .content-section { margin-top: 28px; border-top: 1px solid var(--line); }
    .section-kicker { margin: 0 0 7px; color: var(--gold); font-size: 12px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
    .content-section h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 33px; font-weight: 600; line-height: 1; }
    .content-section > p:not(.section-kicker) { margin: 12px 0 0; color: #d2c8dd; font-size: 16px; }
    .topic-list, .task-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
    .topic-list li, .task-list li {
      position: relative;
      min-height: 48px;
      padding: 12px 12px 12px 42px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(29, 18, 50, .52);
      color: #ede8f4;
      font-size: 15px;
    }
    .topic-list li::before, .task-list li::before {
      position: absolute;
      top: 13px;
      left: 13px;
      display: grid;
      width: 22px;
      height: 22px;
      border: 1px solid rgba(255, 232, 165, .28);
      border-radius: 50%;
      place-items: center;
      color: var(--gold-light);
      content: "·";
      font-weight: 800;
    }
    .task-list { counter-reset: tasks; }
    .task-list li { counter-increment: tasks; }
    .task-list li::before { content: counter(tasks); font-size: 11px; }
    .practice-card { margin-top: 17px; padding: 18px; border-left: 2px solid var(--violet); border-radius: 8px 22px 22px 8px; background: rgba(141, 92, 255, .08); }
    .practice-card strong { display: block; color: #f1e9ff; font-size: 17px; }
    .practice-card p { margin: 7px 0 0; color: var(--muted); font-size: 15px; }

    .player {
      position: relative;
      display: grid;
      min-height: 330px;
      place-content: center;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(circle at 50% 44%, rgba(141, 92, 255, .3), transparent 27%),
        radial-gradient(circle at 54% 46%, transparent 0 30%, rgba(255, 232, 165, .12) 30.4% 30.8%, transparent 31.2%),
        #080612;
    }
    .player button {
      position: relative;
      z-index: 2;
      display: grid;
      width: 82px;
      height: 82px;
      padding: 0;
      border: 1px solid rgba(255, 239, 194, .7);
      border-radius: 50%;
      place-items: center;
      background: linear-gradient(135deg, #ffe7a3, #d99c38);
      box-shadow: 0 0 55px rgba(232, 185, 93, .28);
      color: #2a1904;
      cursor: pointer;
    }
    .player button svg { width: 31px; height: 31px; margin-left: 4px; }
    .player.is-playing button { opacity: .72; transform: scale(.9); }
    .player__label { position: absolute; right: 20px; bottom: 25px; left: 20px; display: flex; flex-direction: column; }
    .player__label small { color: var(--gold-light); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
    .player__label strong { margin-top: 4px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 27px; font-weight: 600; line-height: 1; }

    .practice-form label { display: block; margin: 24px 0 8px; color: #f0e9f6; font-size: 15px; font-weight: 650; }
    .practice-form textarea { width: 100%; min-height: 180px; padding: 15px 16px; border: 1px solid rgba(229, 214, 255, .2); border-radius: 18px; background: var(--plum); color: #fff; font-size: 17px; line-height: 1.5; resize: vertical; }
    .practice-form textarea::placeholder { color: #968ba4; }

    .screen-nav {
      position: sticky;
      z-index: 12;
      top: 0;
      display: flex;
      min-height: 72px;
      padding: max(12px, env(safe-area-inset-top)) 16px 10px;
      align-items: center;
      background: linear-gradient(180deg, rgba(7, 7, 19, .99) 0%, rgba(7, 7, 19, .93) 72%, transparent 100%);
    }
    .screen-back {
      display: inline-flex;
      min-width: 116px;
      min-height: 48px;
      padding: 0 15px;
      border: 1px solid rgba(229, 214, 255, .2);
      border-radius: 999px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(25, 17, 42, .96);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
      color: #f7f2fb;
      font-size: 15px;
      font-weight: 650;
      cursor: pointer;
    }
    .screen-back svg { width: 18px; height: 18px; }

    .route-shell { padding: 4px 16px calc(var(--safe-bottom) + 36px); }
    .route-heading {
      max-width: 430px;
      margin: 0 auto;
      padding: 20px 4px 24px;
      text-align: center;
    }
    .route-heading__eyebrow {
      margin: 0 0 8px;
      color: var(--gold-light);
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .route-heading h1 {
      margin: 0;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(39px, 10.2vw, 50px);
      font-weight: 600;
      letter-spacing: -.035em;
      line-height: .96;
      text-wrap: balance;
    }
    .route-heading__date { margin: 12px 0 0; color: #decfa8; font-size: 15px; font-weight: 600; }

    .status-pill {
      display: inline-flex;
      min-height: 38px;
      margin-top: 18px;
      padding: 8px 13px;
      border: 1px solid rgba(197, 167, 255, .18);
      border-radius: 999px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(141, 92, 255, .11);
      color: #d9c7ff;
      font-size: 14px;
      font-weight: 650;
    }
    .status-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
    .status-pill.is-live { border-color: rgba(255, 154, 170, .22); background: rgba(255, 90, 118, .09); color: #ff9aaa; }
    .status-pill.is-complete { border-color: rgba(141, 217, 173, .22); background: rgba(55, 151, 96, .1); color: var(--green); }

    .session-card {
      padding: 20px;
      border: 1px solid rgba(232, 185, 93, .24);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(35, 22, 57, .96), rgba(13, 10, 23, .98));
      box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 22px 54px rgba(0, 0, 0, .28);
    }
    .session-card .primary { margin-top: 0; min-height: 68px; font-size: 20px; }
    .session-help { margin: 17px 3px 0; color: var(--muted); font-size: 16px; line-height: 1.5; text-align: center; }
    .platform-list { display: grid; gap: 9px; margin-top: 16px; }
    .platform-row {
      display: grid;
      width: 100%;
      min-height: 66px;
      padding: 10px 13px;
      border: 1px solid var(--line);
      border-radius: 20px;
      grid-template-columns: 42px minmax(0, 1fr) 22px;
      align-items: center;
      gap: 12px;
      background: rgba(29, 18, 50, .72);
      color: #f5effa;
      text-align: left;
      cursor: pointer;
      transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
    }
    .platform-row:active { transform: scale(.985); }
    .platform-icon {
      display: grid;
      width: 42px;
      height: 42px;
      border-radius: 13px;
      place-items: center;
      background: #171d2d;
      color: #fff;
      font-size: 13px;
      font-weight: 800;
    }
    .platform-icon.is-youtube { background: #d93647; }
    .platform-icon.is-vk { background: #2879da; }
    .platform-row strong { min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
    .platform-row > span:last-child { color: var(--lilac); font-size: 25px; }

    .video-card {
      position: relative;
      min-height: 248px;
      overflow: hidden;
      border: 1px solid rgba(197, 167, 255, .18);
      border-radius: 28px;
      background:
        radial-gradient(circle at 50% 44%, rgba(141, 92, 255, .34), transparent 27%),
        radial-gradient(circle at 50% 46%, transparent 0 30%, rgba(255, 232, 165, .12) 30.4% 30.8%, transparent 31.2%),
        linear-gradient(145deg, #17102b, #070713);
      box-shadow: 0 20px 52px rgba(0, 0, 0, .3);
    }
    .video-card__play {
      position: absolute;
      top: 50%;
      left: 50%;
      display: grid;
      width: 78px;
      height: 78px;
      padding: 0;
      border: 1px solid rgba(255, 239, 194, .76);
      border-radius: 50%;
      place-items: center;
      background: linear-gradient(135deg, #ffe7a3, #d99c38);
      box-shadow: 0 0 55px rgba(232, 185, 93, .28);
      color: #2a1904;
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: transform 160ms ease, opacity 160ms ease;
    }
    .video-card__play svg { width: 31px; height: 31px; margin-left: 4px; }
    .video-card.is-playing .video-card__play { opacity: .68; transform: translate(-50%, -50%) scale(.9); }
    .video-card__meta { position: absolute; right: 17px; bottom: 17px; left: 17px; display: flex; flex-direction: column; }
    .video-card__meta small { color: var(--gold-light); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
    .video-card__meta strong { margin-top: 4px; font-size: 17px; font-weight: 600; line-height: 1.3; }
    .video-progress { position: absolute; right: 17px; bottom: 8px; left: 17px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .14); }
    .video-progress i { display: block; width: 22%; height: 100%; border-radius: inherit; background: var(--gold); }

    .secondary {
      display: flex;
      width: 100%;
      min-height: 56px;
      margin-top: 12px;
      padding: 13px 16px;
      border: 1px solid rgba(197, 167, 255, .22);
      border-radius: 18px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: rgba(141, 92, 255, .09);
      color: #eee6fa;
      font-size: 16px;
      font-weight: 650;
      cursor: pointer;
    }

    .current-card .current-card__replay {
      position: relative;
      z-index: 2;
      margin-top: 22px;
    }
    .current-card .current-card__replay svg { width: 20px; height: 20px; }
    .current-card .current-card__replay + .primary { margin-top: 12px; }
    .hub-shell > .video-card { margin-top: 2px; }
    .hub-task-action { margin-top: 16px; }
    .hub-list--after-video { margin-top: 20px; }

    .task-shell { padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 34px); }
    .task-topline { display: flex; margin: 10px 2px 18px; align-items: center; justify-content: space-between; gap: 12px; }
    .task-topline span { color: var(--gold-light); font-size: 14px; font-weight: 700; }
    .task-progress { display: flex; flex: 1; max-width: 152px; gap: 5px; }
    .task-progress i { flex: 1; height: 6px; border-radius: 999px; background: rgba(229, 214, 255, .12); }
    .task-progress i.is-done { background: linear-gradient(90deg, #d79b36, #f3d57d); }
    .task-card {
      padding: 23px 20px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(31, 23, 48, .98), rgba(12, 9, 21, .98));
      box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 20px 50px rgba(0, 0, 0, .22);
    }
    .task-card__eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .task-card h1, .task-card h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1; text-wrap: balance; }
    .task-card__lead { margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
    .quiz-options { display: grid; gap: 10px; margin-top: 20px; }
    .quiz-option {
      display: grid;
      width: 100%;
      min-height: 68px;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 19px;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      background: rgba(29, 18, 50, .7);
      color: #f2edf7;
      font-size: 17px;
      line-height: 1.35;
      text-align: left;
      cursor: pointer;
      transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
    }
    .quiz-option:active { transform: scale(.985); }
    .quiz-option i { display: grid; width: 30px; height: 30px; border: 1px solid rgba(197, 167, 255, .26); border-radius: 50%; place-items: center; color: var(--lilac); font-style: normal; font-size: 13px; font-weight: 700; }
    .quiz-option.is-selected { border-color: rgba(255, 232, 165, .55); background: rgba(232, 185, 93, .1); }
    .quiz-option.is-selected i { border-color: var(--gold-light); background: var(--gold-light); color: #2a1904; }
    .quiz-submit {
      position: static;
      width: 100%;
      margin-top: 20px;
    }
    .quiz-submit:disabled {
      opacity: 1;
      border-color: rgba(229, 214, 255, .18);
      background: #3a3440;
      box-shadow: inset 0 1px rgba(255, 255, 255, .06);
      color: #aaa2ae;
    }
    .quiz-submit:active { transform: scale(.98); }
    .answer-note { margin-top: 16px; padding: 14px 15px; border: 1px solid rgba(141, 217, 173, .24); border-radius: 17px; background: rgba(53, 130, 85, .1); color: #d6f4e2; font-size: 16px; }
    .answer-note.is-wrong { border-color: rgba(255, 154, 170, .24); background: rgba(188, 61, 84, .1); color: #ffdce2; }

    .result-card h1 {
      max-width: 13ch;
      font-size: clamp(32px, 9vw, 38px);
      line-height: 1.02;
      overflow-wrap: anywhere;
    }
    .result-summary {
      display: grid;
      margin-top: 20px;
      padding: 17px;
      border: 1px solid rgba(255, 232, 165, .2);
      border-radius: 22px;
      grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
      align-items: center;
      gap: 15px;
      background: rgba(232, 185, 93, .07);
    }
    .result-summary__score {
      display: flex;
      min-width: 0;
      align-items: baseline;
      gap: 6px;
      white-space: nowrap;
    }
    .result-summary__score strong {
      color: #fff3cf;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 52px;
      font-weight: 600;
      letter-spacing: -.04em;
      line-height: .8;
    }
    .result-summary__score span { color: var(--gold-light); font-size: 16px; font-weight: 700; }
    .result-summary__copy { min-width: 0; }
    .result-summary__copy > strong {
      display: block;
      color: #f2edf7;
      font-size: 15px;
      font-weight: 650;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }
    .result-meter { display: grid; margin-top: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .result-meter i { height: 6px; border-radius: 999px; background: rgba(229, 214, 255, .12); }
    .result-meter i.is-done { background: #eabb60; }
    .result-card .task-card__lead { margin-top: 16px; }

    @media (max-width: 360px) {
      .result-card h1 { font-size: 31px; }
      .result-summary { padding: 15px; grid-template-columns: minmax(74px, auto) minmax(0, 1fr); gap: 11px; }
      .result-summary__score strong { font-size: 46px; }
      .result-summary__score span { font-size: 15px; }
      .result-summary__copy > strong { font-size: 14px; }
    }

    .homework-brief { margin-top: 18px; padding: 17px; border-left: 2px solid var(--violet); border-radius: 8px 20px 20px 8px; background: rgba(141, 92, 255, .08); }
    .homework-brief strong { display: block; font-size: 17px; }
    .homework-brief p { margin: 7px 0 0; color: var(--muted); font-size: 16px; }
    .homework-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(29, 18, 50, .55); }
    .homework-details summary { min-height: 54px; padding: 14px 16px; color: #f2ebf8; font-size: 17px; font-weight: 650; cursor: pointer; }
    .homework-details .task-list { margin: 0; padding: 0 12px 14px; }
    .homework-details .task-list li { background: rgba(7, 7, 19, .34); }
    .practice-form label { margin-top: 20px; }
    .form-note { margin: 8px 2px 0; color: #aaa0b4; font-size: 15px; }

    .waiting-mark { position: relative; width: 106px; height: 106px; margin: 24px auto; }
    .waiting-mark::before, .waiting-mark::after { position: absolute; inset: 0; border: 1px solid rgba(255, 232, 165, .38); border-radius: 50%; content: ""; animation: breathe 1800ms ease-in-out infinite; }
    .waiting-mark::after { inset: 18px; border-color: rgba(197, 167, 255, .38); animation-delay: -900ms; }
    .waiting-mark span { position: absolute; inset: 34px; display: grid; border-radius: 50%; place-items: center; background: var(--gold-light); color: #291902; font-family: "Cormorant Garamond", Georgia, serif; font-size: 23px; font-weight: 600; }
    @keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: 1; transform: scale(1); } }

    .feedback-letter { margin-top: 20px; padding: 20px; border: 1px solid rgba(255, 232, 165, .2); border-radius: 8px 28px 28px 28px; background: linear-gradient(145deg, rgba(58, 38, 53, .74), rgba(28, 18, 39, .92)); }
    .feedback-letter p { margin: 0; color: #eee6f0; font-size: 17px; line-height: 1.58; }
    .feedback-letter p + p { margin-top: 13px; }
    .feedback-letter span { display: block; margin-top: 17px; color: var(--gold-light); font-size: 15px; font-weight: 700; }

    .hub-shell { padding: 4px 16px calc(var(--safe-bottom) + 36px); }
    .hub-summary { padding: 20px; border: 1px solid rgba(141, 217, 173, .22); border-radius: 27px; background: rgba(38, 94, 62, .1); }
    .hub-summary p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
    .hub-list { display: grid; gap: 10px; margin-top: 16px; }
    .hub-row {
      display: grid;
      width: 100%;
      min-height: 74px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 20px;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      background: rgba(29, 18, 50, .64);
      text-align: left;
      cursor: pointer;
    }
    .hub-row__icon { display: grid; width: 42px; height: 42px; border: 1px solid rgba(197, 167, 255, .2); border-radius: 14px; place-items: center; background: rgba(141, 92, 255, .1); color: var(--lilac); }
    .hub-row__icon svg { width: 21px; height: 21px; }
    .hub-row__copy { display: flex; min-width: 0; flex-direction: column; }
    .hub-row__copy strong { font-size: 17px; font-weight: 650; line-height: 1.25; }
    .hub-row__copy span { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 15px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
    .hub-row__action { color: var(--gold-light); font-size: 15px; font-weight: 700; }

    .detail-layer {
      position: fixed;
      z-index: 180;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      padding: 18px 12px max(12px, env(safe-area-inset-bottom));
      align-items: flex-end;
      justify-content: center;
      background: rgba(2, 2, 7, .78);
      overscroll-behavior: contain;
    }
    .detail-sheet {
      width: min(100%, 456px);
      max-height: min(78vh, 680px);
      padding: 10px 18px 22px;
      overflow-y: auto;
      border: 1px solid rgba(229, 214, 255, .17);
      border-radius: 30px 30px 22px 22px;
      background: linear-gradient(165deg, #201631, #0d0a17 76%);
      box-shadow: 0 -28px 70px rgba(0, 0, 0, .5);
      overscroll-behavior: contain;
    }
    .detail-sheet__handle { width: 44px; height: 5px; margin: 0 auto 15px; border-radius: 999px; background: rgba(229, 214, 255, .22); }
    .detail-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .detail-sheet h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 31px; font-weight: 600; line-height: 1; }
    .detail-sheet__close { display: grid; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; place-items: center; background: rgba(29, 18, 50, .7); color: #fff; font-size: 23px; cursor: pointer; }
    .detail-sheet__body { margin-top: 17px; color: #ddd3e5; font-size: 17px; line-height: 1.58; }
    .detail-sheet__body p { margin: 0; }
    .detail-sheet__body p + p { margin-top: 12px; }
    .review-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .review-list li { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(29, 18, 50, .52); }
    .review-list strong { display: block; color: #f3edf6; font-size: 16px; }
    .review-list span { display: block; margin-top: 5px; color: var(--muted); font-size: 15px; }
    .review-list .is-correct { color: var(--green); }
    .review-list .is-wrong { color: var(--live); }

    @media (hover: hover) {
      .primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
      .primary.quiz-submit:hover { transform: translateY(-1px); }
      .day-row:not(:disabled):hover, .platform-row:hover, .quiz-option:hover, .hub-row:hover { border-color: rgba(255, 232, 165, .32); }
      .secondary:hover { border-color: rgba(255, 232, 165, .3); background: rgba(141, 92, 255, .14); }
    }

    .toast {
      position: fixed;
      z-index: 130;
      right: 16px;
      bottom: calc(var(--safe-bottom) + 14px);
      left: 16px;
      width: min(calc(100% - 32px), 440px);
      min-height: 56px;
      margin: 0 auto;
      padding: 15px 17px;
      border: 1px solid rgba(255, 232, 165, .3);
      border-radius: 18px;
      background: #241a30;
      color: #fff4d8;
      box-shadow: 0 20px 48px rgba(0, 0, 0, .42);
      font-size: 14px;
      font-weight: 650;
      text-align: center;
    }

    @media (max-width: 360px) {
      body { font-size: 17px; }
      .brand-header { min-height: 224px; padding-right: 17px; padding-left: 17px; }
      .home { padding-right: 12px; padding-left: 12px; }
      .current-card { padding-right: 19px; padding-left: 19px; border-radius: 29px 29px 62px 29px; }
      .progress { margin-right: 4px; margin-left: 4px; }
      .day-row { min-height: 98px; padding-right: 11px; grid-template-columns: 52px minmax(0, 1fr) 18px; gap: 10px; }
      .day-node { width: 52px; height: 52px; }
      .screen-content { padding-right: 13px; padding-left: 13px; }
      .route-shell, .task-shell, .hub-shell { padding-right: 12px; padding-left: 12px; }
      .route-heading { padding-right: 2px; padding-left: 2px; }
      .task-card { padding-right: 17px; padding-left: 17px; }
      .platform-row { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 10px; }
      .hub-row { grid-template-columns: 40px minmax(0, 1fr); }
      .hub-row__action { grid-column: 2; }
      .countdown span { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .primary, .day-row, .platform-row, .quiz-option, .video-card__play, .skip-link { transition: none; }
      .waiting-mark::before, .waiting-mark::after { animation: none; }
    }