@font-face {
        font-family: "Golos Text";
        font-style: normal;
        font-weight: 600 800;
        font-display: swap;
        src: url('/assets/fonts/golos-text-cyrillic.woff2') format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
      }
      @font-face {
        font-family: "Golos Text";
        font-style: normal;
        font-weight: 600 800;
        font-display: swap;
        src: url('/assets/fonts/golos-text-latin.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      :root {
        color-scheme: dark;
        --bg: #070708;
        --glass: rgba(15, 16, 18, .52);
        --glass-strong: rgba(18, 19, 22, .68);
        --glass-soft: rgba(255, 255, 255, .065);
        --text: #f7f7f8;
        --muted: #b7b7bc;
        --line: rgba(255,255,255,.16);
        --line-strong: rgba(255,255,255,.30);
        --accent: #ffffff;
        --accent-2: #e8e8ec;
        --danger: #ff7a7a;
        --shadow: 0 22px 70px rgba(0,0,0,.42);
      }
      * { box-sizing: border-box; }
      [hidden] { display: none !important; }
      html {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
        overscroll-behavior-x: none;
        background: var(--bg);
        color: var(--text);
        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        font-weight: 450;
      }
      @supports (overflow: clip) {
        html,
        body { overflow-x: clip; }
      }
      body:before {
        content: "";
        position: fixed;
        inset: -36px;
        z-index: -3;
        background: #070708 url('/assets/liquid-glass.jpg') center / cover no-repeat;
        filter: blur(10px) saturate(92%) brightness(.72);
        transform: scale(1.04);
      }
      body:after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.22) 48%, rgba(0,0,0,.52)),
          linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.68));
      }
      a { color: inherit; }
      .shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
      header {
        position: sticky;
        top: 14px;
        z-index: 5;
        width: min(1160px, calc(100% - 40px));
        margin: 14px auto 0;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: rgba(13, 15, 18, .48);
        backdrop-filter: blur(24px) saturate(150%);
        box-shadow: 0 14px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
      }
      header .shell { width: 100%; }
      .nav {
        display: grid;
        grid-template-columns: auto minmax(180px, 1fr) auto;
        align-items: center;
        gap: 20px;
        min-height: 68px;
        width: 100%;
        padding: 0 24px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        font-size: 19px;
        font-weight: 720;
        letter-spacing: .01em;
        white-space: nowrap;
      }
      .brandLogo {
        width: 30px;
        height: 30px;
        display: block;
        object-fit: contain;
      }
      .navConsole {
        min-width: 0;
        height: 40px;
        margin: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        color: rgba(255,255,255,.72);
        font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        font-size: 13px;
        letter-spacing: .015em;
        white-space: nowrap;
      }
      .navConsole:before {
        content: ">";
        flex: 0 0 auto;
        margin-right: 9px;
        color: rgba(255,255,255,.36);
      }
      .navConsoleText {
        position: relative;
        max-width: 100%;
        overflow: hidden;
        text-overflow: clip;
        padding-right: 8px;
      }
      .navConsoleText:after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 1px;
        height: 1.25em;
        background: rgba(255,255,255,.82);
        transform: translateY(-50%);
        animation: consoleCursor .82s step-end infinite;
      }
      @keyframes consoleCursor { 50% { opacity: 0; } }
      .links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
      .links a, .links button, .button {
        border: 1px solid var(--line);
        border-radius: 999px;
        background:
          radial-gradient(circle at 82% 18%, rgba(94,122,160,.10), transparent 44%),
          linear-gradient(138deg, rgba(0,0,0,.74), rgba(9,10,12,.58));
        color: var(--text);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font: inherit;
        font-size: 15px;
        font-weight: 650;
        min-height: 42px;
        padding: 0 18px;
        text-decoration: none;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 10px 26px rgba(0,0,0,.18);
        backdrop-filter: blur(16px) saturate(145%);
        transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
      }
      .links a:hover, .links button:hover, .button:hover {
        background: rgba(255,255,255,.12);
        border-color: var(--line-strong);
        transform: translateY(-1px);
      }
      .navIcon {
        width: 17px;
        height: 17px;
        color: currentColor;
        flex: 0 0 auto;
      }
      .button.primary {
        background: rgba(255,255,255,.93);
        border-color: rgba(255,255,255,.78);
        color: #111214;
        box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(0,0,0,.26);
      }
      .button.primary:hover {
        background: #fff;
        transform: translateY(-1px);
      }
      .button.ghost {
        background: rgba(255,255,255,.075);
        border-color: var(--line);
      }
      .button.danger {
        background: rgba(255, 80, 80, .16);
        border-color: rgba(255, 115, 115, .38);
        color: #ffd4d4;
      }
      .button.danger:hover {
        background: rgba(255, 80, 80, .24);
        border-color: rgba(255, 150, 150, .54);
      }
      main { padding: 74px 0 86px; }
      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
        gap: 46px;
        align-items: center;
        min-height: calc(100vh - 190px);
      }
      .eyebrow {
        color: rgba(255,255,255,.72);
        font-size: 12px;
        font-weight: 680;
        letter-spacing: .16em;
        margin-bottom: 16px;
        text-transform: uppercase;
      }
      h1 {
        font-size: clamp(44px, 6.5vw, 84px);
        font-weight: 700;
        line-height: .98;
        letter-spacing: -.038em;
        margin: 0 0 22px;
        text-shadow: 0 10px 42px rgba(0,0,0,.38);
      }
      .heroTitle {
        font-family: "Golos Text", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        font-weight: 700;
      }
      h2 {
        font-size: clamp(30px, 4.5vw, 58px);
        font-weight: 700;
        letter-spacing: -.03em;
        line-height: 1.02;
        margin: 0 0 18px;
      }
      h3 { font-weight: 720; letter-spacing: -.018em; margin: 0 0 10px; }
      p { color: var(--muted); line-height: 1.65; margin: 0 0 16px; text-shadow: 0 6px 26px rgba(0,0,0,.38); }
      .lead { font-size: 19px; max-width: 680px; }
      .stack { display: flex; flex-direction: column; gap: 16px; }
      .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
      .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
      .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .card, .panel, .formBox {
        background:
          linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
          var(--glass);
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.1);
        backdrop-filter: blur(26px) saturate(155%);
      }
      .card { padding: 22px; }
      .panel { padding: 28px; }
      .showcase {
        min-height: 460px;
        padding: 30px;
        overflow: hidden;
        position: relative;
        background:
          linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)),
          rgba(15, 16, 18, .48);
      }
      .showcase:before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 18% 12%, rgba(255,255,255,.20), transparent 10%),
          linear-gradient(112deg, transparent 18%, rgba(255,255,255,.10) 38%, transparent 54%);
        opacity: .72;
        pointer-events: none;
      }
      .showcase:after {
        content: "";
        position: absolute;
        inset: 18px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 18px;
        pointer-events: none;
      }
      .showcaseInner {
        position: relative;
        z-index: 1;
        min-height: 420px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .portraitShowcase { padding: 0; }
      .portraitShowcase img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 24%;
        filter: saturate(.82) contrast(1.04) brightness(.88);
      }
      .portraitShowcase:before {
        z-index: 1;
        background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.34));
      }
      .portraitShowcase:after { z-index: 2; }
      .portraitShowcase.transparentImage {
        align-self: stretch;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
        margin-left: -54px;
        min-height: min(66vh, 640px);
        overflow: visible;
      }
      .portraitShowcase.transparentImage:before,
      .portraitShowcase.transparentImage:after {
        display: none;
      }
      .portraitShowcase.transparentImage img {
        object-fit: contain;
        object-position: center bottom;
        filter: none;
        transform: translateX(-5%) scale(1.24);
        transform-origin: center bottom;
      }
      .productTag {
        align-self: flex-start;
        border: 1px solid color-mix(in srgb, var(--tag-color, #ffffff) 52%, rgba(255,255,255,.18));
        border-radius: 999px;
        background: color-mix(in srgb, var(--tag-color, #ffffff) 18%, rgba(255,255,255,.08));
        color: var(--text);
        padding: 7px 12px;
        font-size: 13px;
        font-weight: 760;
        backdrop-filter: blur(16px) saturate(135%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
      }
      .tagRow {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 7px;
      }
      .miniList { display: grid; gap: 10px; }
      .miniLine {
        align-items: center;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        padding: 14px 0 0;
      }
      .miniLine span { color: var(--muted); }
      .catalog { margin-top: 116px; scroll-margin-top: 112px; }
      .productCard {
        display: flex;
        flex-direction: column;
        min-height: 314px;
        padding: 0;
        overflow: hidden;
        text-decoration: none;
        border-color: rgba(255,255,255,.18);
        background:
          radial-gradient(circle at 84% 16%, rgba(94,122,160,.10), transparent 42%),
          linear-gradient(138deg, rgba(0,0,0,.84), rgba(7,8,10,.66));
        box-shadow: 0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10);
        backdrop-filter: blur(24px) saturate(128%);
        -webkit-backdrop-filter: blur(24px) saturate(128%);
        transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
      }
      .productCard:hover {
        background:
          radial-gradient(circle at 84% 16%, rgba(112,146,190,.14), transparent 42%),
          linear-gradient(138deg, rgba(0,0,0,.80), rgba(10,11,14,.62));
        border-color: rgba(255,255,255,.27);
        transform: translateY(-7px) scale(1.014);
        box-shadow: 0 32px 82px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.13);
      }
      .cover {
        background: rgba(255,255,255,.055);
        border-bottom: 1px solid rgba(255,255,255,.16);
        color: rgba(255,255,255,.86);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 46px;
        font-weight: 760;
        letter-spacing: 0;
        height: 124px;
        margin-bottom: 0;
        padding: 0;
        overflow: hidden;
        position: relative;
        text-shadow: 0 10px 22px rgba(0,0,0,.42);
      }
      .cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform .28s ease;
      }
      .productCard:hover .cover img { transform: scale(1.035); }
      .coverPlaceholder {
        color: rgba(255,255,255,.62);
        font-size: 56px;
        font-weight: 760;
      }
      .showcaseImage {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: saturate(.88) brightness(.62);
      }
      .showcase.hasImage:before {
        z-index: 1;
        background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42));
      }
      .showcase.hasImage:after { z-index: 2; }
      .showcase.hasImage .showcaseInner { z-index: 3; }
      .productShowcase {
        align-self: center;
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
        padding: 0;
      }
      .productShowcase .showcaseInner {
        min-height: 0;
      }
      .productShowcase .showcaseImage {
        filter: saturate(.96) contrast(1.02) brightness(.94);
      }
      .productShowcase.hasImage:before {
        background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.12));
        opacity: .2;
      }
      .productShowcase:after { display: none; }
      .productHero {
        align-items: start;
        column-gap: 34px;
        row-gap: 18px;
      }
      .productHeroCopy { grid-column: 1; grid-row: 1; }
      .productHero .productShowcase { grid-column: 2; grid-row: 1; }
      .productPurchaseDesktop {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        gap: 14px;
        margin-top: 28px;
      }
      .productPurchaseDesktop .productPurchaseAction { grid-column: 1; grid-row: 1; }
      .productPurchaseDesktop .productPriceMeta { grid-column: 2; grid-row: 1; margin-bottom: 0; }
      .productPurchaseDesktop .purchaseLegal { grid-column: 1 / -1; }
      .productPurchaseMobile { display: none; }
      .productPurchase { width: fit-content; max-width: 100%; }
      .productPriceMeta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
        width: 100%;
      }
      .productPurchaseAction { justify-content: flex-start; }
      .productPurchaseAction .button { min-width: 220px; }
      .productPurchaseAction form { margin: 0; }
      .productPurchaseBottom {
        display: grid;
        width: min(100%, 440px);
        margin: 46px auto 0;
      }
      .productPurchaseBottom .productPurchaseAction {
        justify-content: center;
        width: 100%;
      }
      .productPurchaseBottom .productPurchaseAction form,
      .productPurchaseBottom .productPurchaseAction .button {
        width: 100%;
      }
      .productPurchaseBottom .purchaseLegal {
        text-align: center;
      }
      .productCard h3,
      .productCard p,
      .productCard .row {
        margin-left: 22px;
        margin-right: 22px;
      }
      .productCard h3 { margin-top: 22px; }
      .productCard p { margin-bottom: 18px; }
      .cardMeta {
        align-items: center;
        border-top: 1px solid rgba(255,255,255,.10);
        justify-content: space-between;
        margin-top: auto;
        padding: 15px 0 18px;
      }
      .price { color: var(--text); font-size: 22px; font-weight: 620; }
      .priceBlock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
      .oldPrice { color: rgba(255,255,255,.48); font-size: 14px; text-decoration: line-through; }
      .discountBadge {
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        color: var(--text);
        font-size: 12px;
        font-weight: 750;
        padding: 5px 8px;
      }
      .proofStrip {
        margin: 92px 0 20px;
        display: grid;
        grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
        gap: 20px;
        align-items: stretch;
      }
      .proofIntro {
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0;
        transform: translateY(22px) scale(.965);
        filter: blur(8px);
        transition:
          opacity .62s cubic-bezier(.2,.8,.2,1),
          transform .62s cubic-bezier(.2,.8,.2,1),
          filter .62s cubic-bezier(.2,.8,.2,1);
        will-change: opacity, transform, filter;
        background:
          radial-gradient(circle at 82% 18%, rgba(94,122,160,.11), transparent 42%),
          linear-gradient(138deg, rgba(0,0,0,.82), rgba(7,8,10,.64));
        border-color: rgba(255,255,255,.18);
        box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.11);
      }
      .proofIntro.isVisible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
      .proofIntro h2 { font-size: clamp(30px, 4.2vw, 50px); margin-bottom: 12px; }
      .statsGrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }
      .statCard {
        border: 1px solid var(--line);
        border-radius: 22px;
        background:
          radial-gradient(circle at 84% 18%, rgba(94,122,160,.10), transparent 44%),
          linear-gradient(138deg, rgba(0,0,0,.84), rgba(7,8,10,.65));
        padding: 28px 26px;
        min-height: 190px;
        display: grid;
        grid-template-rows: auto auto;
        align-content: center;
        gap: 14px;
        box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
        backdrop-filter: blur(24px) saturate(128%);
        -webkit-backdrop-filter: blur(24px) saturate(128%);
        opacity: 0;
        transform: translateY(22px) scale(.965);
        filter: blur(8px);
        transition:
          opacity .62s cubic-bezier(.2,.8,.2,1),
          transform .62s cubic-bezier(.2,.8,.2,1),
          filter .62s cubic-bezier(.2,.8,.2,1),
          border-color .22s ease,
          background .22s ease;
        transition-delay: calc(var(--stat-index, 0) * 90ms);
        will-change: opacity, transform, filter;
      }
      .statCard.isVisible {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
      .statCard.isVisible:hover {
        border-color: rgba(255,255,255,.24);
        background:
          radial-gradient(circle at 84% 18%, rgba(112,146,190,.13), transparent 44%),
          linear-gradient(138deg, rgba(0,0,0,.80), rgba(10,11,14,.62));
      }
      .statValue {
        color: var(--text);
        font-size: clamp(44px, 4.65vw, 64px);
        font-weight: 760;
        letter-spacing: 0;
        line-height: .92;
        white-space: nowrap;
      }
      .statLabel {
        color: var(--muted);
        font-size: 14px;
        font-weight: 680;
        line-height: 1.22;
        max-width: 180px;
      }
      .socialLinks {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
      }
      .socialButton {
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255,255,255,.075);
        color: var(--text);
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 42px;
        padding: 0 16px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 750;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
      }
      .socialButton:hover {
        border-color: var(--line-strong);
        background: rgba(255,255,255,.10);
      }
      .socialButton svg {
        width: 18px;
        height: 18px;
        color: #fff;
        flex: 0 0 auto;
      }
      .proofIntro .socialLinks {
        flex-wrap: nowrap;
        gap: 6px;
      }
      .proofIntro .socialButton {
        padding: 0 10px;
        font-size: 12.5px;
      }
      .aboutSocialButton {
        background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
      }
      .aboutHero {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
        gap: 58px;
        align-items: center;
        min-height: 480px;
        padding: 42px 0 24px;
        isolation: isolate;
      }
      .aboutHero:before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -52px;
        top: 50%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(130,157,255,.15), rgba(255,255,255,.04) 44%, transparent 72%);
        filter: blur(12px);
        transform: translateY(-50%);
        pointer-events: none;
      }
      .aboutHeroCopy { position: relative; z-index: 1; }
      .aboutHero h1 {
        max-width: 720px;
        margin-bottom: 22px;
      }
      .aboutHero h1 span {
        color: var(--text);
      }
      .aboutRole {
        max-width: 650px;
        color: var(--text);
        font-size: clamp(21px, 2.55vw, 34px);
        font-weight: 650;
        line-height: 1.22;
        letter-spacing: -.018em;
      }
      .aboutPortrait {
        position: relative;
        z-index: 2;
        display: grid;
        place-items: center;
      }
      .aboutPortraitRing {
        position: relative;
        width: min(100%, 420px);
        aspect-ratio: 1;
        padding: 10px;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 50%;
        background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.035));
        box-shadow: 0 42px 100px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.14);
        backdrop-filter: blur(22px) saturate(140%);
      }
      .aboutPortraitRing:after {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 50%;
        pointer-events: none;
      }
      .aboutPortrait img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        object-position: center 38%;
        filter: saturate(.82) contrast(1.04) brightness(.9);
      }
      .aboutStory {
        display: block;
        position: relative;
        margin: 14px 0 64px;
      }
      .aboutStoryMain {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: 780px;
      }
      .aboutStoryMain p {
        max-width: 760px;
        font-size: 18px;
        line-height: 1.64;
        margin-bottom: 24px;
      }
      .aboutStoryMain p:last-child,
      .aboutSelfify p:last-of-type { margin-bottom: 0; }
      .aboutIntro {
        color: rgba(255,255,255,.86);
        font-size: clamp(20px, 1.75vw, 25px) !important;
        line-height: 1.44 !important;
        margin-bottom: 12px !important;
      }
      .aboutStory strong { color: var(--text); }
      .aboutLiquid {
        display: block;
        pointer-events: none;
        user-select: none;
        filter: drop-shadow(0 28px 45px rgba(0,0,0,.38));
      }
      .aboutLiquidTransition {
        position: relative;
        z-index: 0;
        width: calc(100% + 280px);
        height: 250px;
        margin: 20px -140px 46px;
        overflow: hidden;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 78%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 78%, transparent 100%);
      }
      .aboutLiquidTransition:before,
      .aboutLiquidTransition:after {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        width: 18%;
        pointer-events: none;
      }
      .aboutLiquidTransition:before {
        left: 0;
        background: linear-gradient(90deg, #070708, transparent);
      }
      .aboutLiquidTransition:after {
        right: 0;
        background: linear-gradient(-90deg, #070708, transparent);
      }
      .aboutLiquidTransition img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: .84;
        filter: contrast(1.08) drop-shadow(0 34px 58px rgba(0,0,0,.46));
      }
      .aboutSelfify {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr);
        align-items: center;
        gap: 42px;
        max-width: none;
        min-height: 430px;
        margin-top: 0;
        padding: 58px 58px;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 38px;
        background:
          radial-gradient(circle at 84% 22%, rgba(99,133,180,.12), transparent 38%),
          linear-gradient(138deg, rgba(0,0,0,.82), rgba(0,0,0,.62));
        box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
        backdrop-filter: blur(24px) saturate(128%);
        -webkit-backdrop-filter: blur(24px) saturate(128%);
      }
      .aboutSelfify:before {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: -1;
        border-radius: 37px;
        background: linear-gradient(115deg, rgba(255,255,255,.045), transparent 34%, rgba(255,255,255,.025));
        pointer-events: none;
      }
      .aboutSelfifyCopy { position: relative; z-index: 2; }
      .aboutSelfify h2 { font-size: clamp(34px, 4vw, 52px); }
      .aboutSelfify p { max-width: 650px; font-size: 18px; line-height: 1.64; }
      .aboutSelfify .button {
        align-self: flex-start;
        margin-top: 20px;
      }
      .aboutLiquidTornado {
        position: relative;
        z-index: 1;
        width: min(34vw, 360px);
        justify-self: center;
        opacity: .9;
        transform: rotate(-5deg) scale(1.08);
      }
      .aboutFloatingBack {
        position: fixed;
        z-index: 6;
        left: max(22px, env(safe-area-inset-left));
        bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 999px;
        background: rgba(4,5,7,.64);
        color: rgba(255,255,255,.9);
        font-size: 14px;
        font-weight: 720;
        text-decoration: none;
        box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.1);
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        transition: transform .18s ease, border-color .18s ease, background .18s ease;
      }
      .aboutFloatingBack:hover {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.34);
        background: rgba(12,13,16,.78);
      }
      .aiRoadmap {
        position: relative;
        margin: 72px 0 20px;
        padding: 8px 0 4px;
      }
      .aiRoadmapInner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
        gap: 42px;
        align-items: center;
      }
      .aiRoadmap h2 {
        font-size: clamp(30px, 4vw, 52px);
        margin-bottom: 12px;
      }
      .switchTitle {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .22em;
        line-height: 1;
        overflow: visible;
      }
      .switchWord {
        position: relative;
        display: inline-block;
        height: 1.18em;
        min-width: 3.25em;
        overflow: hidden;
        vertical-align: top;
      }
      .switchWord span {
        position: absolute;
        left: 0;
        top: .02em;
        opacity: 0;
        transform: translateY(-100%);
        animation: switchRoadmapWord 6s cubic-bezier(.2,.8,.2,1) infinite;
        will-change: opacity, transform;
      }
      .switchWord span:nth-child(2) { animation-delay: 2s; }
      .switchWord span:nth-child(3) { animation-delay: 4s; }
      @keyframes switchRoadmapWord {
        0% {
          opacity: 0;
          transform: translateY(-100%);
        }
        8%, 28% {
          opacity: 1;
          transform: translateY(0);
        }
        36%, 100% {
          opacity: 0;
          transform: translateY(100%);
        }
      }
      .aiRoadmap p {
        max-width: 470px;
        margin-bottom: 0;
      }
      .roadmapFlow {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
        align-items: stretch;
      }
      .roadmapStep {
        position: relative;
        z-index: 1;
        min-height: 154px;
        padding: 0 0 18px;
      }
      .roadmapIcon {
        position: relative;
        display: grid;
        place-items: center;
        width: clamp(56px, 5vw, 72px);
        height: clamp(56px, 5vw, 72px);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 22px;
        background: rgba(255,255,255,.055);
        color: rgba(255,255,255,.92);
        margin-bottom: 18px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 46px rgba(0,0,0,.28);
      }
      .roadmapIcon svg {
        width: 58%;
        height: 58%;
        display: block;
      }
      .roadmapStep strong {
        display: block;
        color: var(--text);
        font-size: 18px;
        line-height: 1.18;
        margin-bottom: 9px;
      }
      .roadmapStep span:not(.roadmapIcon) {
        display: block;
        color: var(--muted);
        font-size: 14px;
        font-weight: 620;
        line-height: 1.35;
      }
      .purchaseRow {
        align-items: center;
        margin-top: 26px;
      }
      .purchaseRow form { display: flex; margin: 0; }
      .purchaseRow .button { min-width: 210px; }
      .accountTabs { margin-top: 30px; }
      .accountTabControls {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        overflow-x: auto;
        padding: 4px;
      }
      .accountTabControls a {
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        flex: 0 0 auto;
        min-height: 42px;
        padding: 10px 17px;
        text-decoration: none;
      }
      .accountTabControls a:hover,
      .accountTabControls a.active {
        background: rgba(255,255,255,.11);
        border-color: var(--line-strong);
        color: var(--text);
      }
      .accountPanel { display: none; }
      .accountPanel.active {
        display: block;
        border-color: rgba(255,255,255,.18);
        background:
          radial-gradient(circle at 86% 14%, rgba(94,122,160,.10), transparent 42%),
          linear-gradient(138deg, rgba(0,0,0,.84), rgba(7,8,10,.66));
        box-shadow: 0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10);
        backdrop-filter: blur(24px) saturate(128%);
        -webkit-backdrop-filter: blur(24px) saturate(128%);
      }
      .accountPanel .formBox { max-width: 620px; }
      .accountProfilePanel {
        width: min(100%, 820px);
        padding-top: 22px;
        padding-bottom: 22px;
      }
      .accountProfileGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
      }
      .accountProfileItem {
        min-width: 0;
        padding: 2px 28px;
        border-left: 1px solid var(--line);
      }
      .accountProfileItem:first-child {
        padding-left: 0;
        border-left: 0;
      }
      .accountProfileLabel {
        display: block;
        margin-bottom: 8px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 620;
      }
      .accountProfileValue {
        display: block;
        color: var(--text);
        font-size: clamp(16px, 1.7vw, 19px);
        line-height: 1.35;
        overflow-wrap: anywhere;
      }
      .accountEmptyPurchases {
        width: min(100%, 680px);
        padding: 26px;
        background:
          radial-gradient(circle at 90% 12%, rgba(94,122,160,.08), transparent 42%),
          rgba(14,15,17,.86);
        box-shadow: 0 22px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .accountEmptyPurchases h3 {
        margin-bottom: 7px;
        font-size: clamp(21px, 2.5vw, 26px);
      }
      .accountEmptyPurchases p {
        margin-bottom: 20px;
      }
      .achievementsCompact {
        margin-top: 28px;
      }
      .achievementsHeader {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 12px;
      }
      .achievementsHeader h2 {
        font-size: clamp(24px, 3.4vw, 36px);
        margin: 0;
      }
      .accountPurchases > h2 {
        font-size: clamp(24px, 3.4vw, 36px);
        margin: 0 0 18px;
      }
      .achievementGrid {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .achievementBadge {
        position: relative;
        border: 1px solid rgba(230, 190, 96, .68);
        border-radius: 999px;
        background: rgba(230, 190, 96, .10);
        color: rgba(255,255,255,.92);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 14px 0 11px;
        font-size: 13px;
        font-weight: 760;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
      }
      .achievementBadge.locked {
        border-color: rgba(255,255,255,.16);
        background: rgba(255,255,255,.045);
        color: rgba(255,255,255,.40);
        filter: grayscale(1);
        opacity: .62;
      }
      .achievementIcon {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(230, 190, 96, .18);
        font-size: 13px;
      }
      .achievementIconSvg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .achievementBadge.locked .achievementIcon {
        background: rgba(255,255,255,.10);
      }
      .achievementTip {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 10px);
        z-index: 8;
        width: max-content;
        max-width: min(280px, calc(100vw - 40px));
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: rgba(18,19,22,.94);
        color: var(--text);
        box-shadow: 0 18px 48px rgba(0,0,0,.48);
        opacity: 0;
        padding: 10px 12px;
        pointer-events: none;
        transform: translate(-50%, 6px);
        transition: opacity .16s ease, transform .16s ease;
      }
      .achievementBadge:hover .achievementTip,
      .achievementBadge:focus-within .achievementTip {
        opacity: 1;
        transform: translate(-50%, 0);
      }
      .achievementTip strong {
        display: block;
        font-size: 13px;
        margin-bottom: 4px;
      }
      .achievementTip span {
        color: var(--muted);
        display: block;
        font-size: 12px;
        line-height: 1.35;
      }
      .statusMessage {
        border: 1px solid rgba(154, 230, 177, .26);
        border-radius: 16px;
        background: rgba(77, 154, 99, .12);
        color: #c9f4d5;
        margin-bottom: 18px;
        padding: 13px 15px;
      }
      .statusMessageError {
        border-color: rgba(255, 139, 139, .28);
        background: rgba(166, 62, 62, .14);
        color: #ffd0d0;
      }
      dialog {
        width: min(520px, calc(100% - 28px));
        border: 1px solid var(--line-strong);
        border-radius: 24px;
        background: rgba(18,19,22,.88);
        color: var(--text);
        padding: 0;
        box-shadow: 0 36px 110px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
        backdrop-filter: blur(30px) saturate(130%);
      }
      dialog::backdrop { background: rgba(0,0,0,.64); backdrop-filter: blur(10px); }
      .supportDialog, .purchaseDialog { padding: 28px; }
      .dialogClose {
        position: absolute;
        right: 18px;
        top: 18px;
        width: 38px;
        min-height: 38px;
        padding: 0;
      }
      .supportEmail { color: var(--text); overflow-wrap: anywhere; }
      .purchaseDialog > .eyebrow { margin-bottom: 20px; padding-right: 48px; }
      .purchaseDetails { border-top: 1px solid var(--line); }
      .purchaseDialog form > .purchaseDetails:first-child { border-top: 0; }
      .purchaseDetail {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 16px;
        align-items: baseline;
        border-bottom: 1px solid var(--line);
        padding: 17px 0;
      }
      .purchaseDetail span { color: var(--muted); font-size: 13px; }
      .purchaseDetail strong { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
      .purchaseTotalValue {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        min-width: 0;
      }
      .promocodeTextButton {
        appearance: none;
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        color: rgba(255,255,255,.52);
        font: inherit;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.35;
        min-height: 28px;
        margin: -4px 0;
        padding: 4px 0;
        cursor: pointer;
        text-decoration: underline;
        text-decoration-color: rgba(255,255,255,.22);
        text-underline-offset: 3px;
        transition: color .18s ease, text-decoration-color .18s ease;
      }
      .promocodeTextButton:hover,
      .promocodeTextButton:focus-visible {
        color: rgba(255,255,255,.9);
        text-decoration-color: rgba(255,255,255,.62);
      }
      .purchaseTotal strong { font-size: 25px; }
      .purchaseLegal { font-size: 12px; line-height: 1.5; margin: 18px 0 12px; }
      .purchaseLegal a { color: var(--text); }
      .freeMaterialLegal { max-width: 520px; margin-top: 12px; }
      .activePaymentNote { color: var(--muted); max-width: 620px; }
      .purchaseTotals {
        border-top: 0;
        margin: 18px 0;
      }
      .promocodePopup {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: grid;
        place-items: center;
        padding: 22px;
        background: rgba(0,0,0,.68);
        backdrop-filter: blur(10px);
      }
      .promocodePopupCard {
        position: relative;
        width: min(100%, 620px);
        border: 1px solid var(--line-strong);
        border-radius: 26px;
        background: rgba(17,18,21,.98);
        padding: 28px;
        box-shadow: 0 30px 100px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.09);
      }
      .promocodePopupCard h3 {
        max-width: calc(100% - 52px);
        font-size: 24px;
        margin: 0 0 20px;
      }
      .button.promocodePopupClose {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 50%;
        font-size: 24px;
        line-height: 1;
      }
      .promocodeControls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
      }
      .promocodeControls .button { min-width: 124px; }
      .promocodeMessage {
        font-size: 12px;
        line-height: 1.45;
        margin: 7px 0 0;
      }
      .promocodeMessage:empty { display: none; }
      .promocodeMessage.success { color: #c9f4d5; }
      .promocodeMessage.error { color: #ffb5b5; }
      .purchaseSubmit { width: 100%; }
      .button[disabled] { cursor: not-allowed; opacity: .48; transform: none; }
      .muted { color: var(--muted); }
      .narrow { max-width: 640px; margin: 0 auto; }
      .formBox { padding: 28px; }
      .legalDoc { max-width: 860px; }
      .legalDoc h1 { font-size: clamp(38px, 6.4vw, 72px); overflow-wrap: anywhere; }
      .legalDoc h2 {
        font-size: clamp(24px, 3vw, 34px);
        letter-spacing: -.018em;
        margin: 30px 0 12px;
      }
      .legalDoc h3 {
        font-size: 20px;
        margin-top: 22px;
      }
      .legalDoc ul,
      .legalDoc ol {
        color: var(--muted);
        line-height: 1.65;
        margin: 0 0 18px;
        padding-left: 22px;
      }
      .legalDoc li { margin: 7px 0; }
      .authTitle {
        font-size: clamp(34px, 7vw, 64px);
        letter-spacing: -.035em;
        white-space: nowrap;
      }
      .supportTitle {
        font-size: clamp(30px, 5vw, 46px);
        white-space: nowrap;
      }
      label { display: block; color: var(--muted); font-size: 14px; font-weight: 750; margin: 0 0 8px; }
      input, textarea, select {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(255,255,255,.075);
        color: var(--text);
        font: inherit;
        min-height: 50px;
        padding: 12px 14px;
        outline: none;
      }
      input:focus, textarea:focus, select:focus { border-color: rgba(255,255,255,.42); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
      textarea { min-height: 120px; resize: vertical; }
      .field { margin-bottom: 15px; }
      .passwordInputWrap {
        position: relative;
      }
      .passwordInputWrap input {
        padding-right: 54px;
      }
      .passwordToggle {
        position: absolute;
        top: 50%;
        right: 3px;
        z-index: 1;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: rgba(255,255,255,.58);
        cursor: pointer;
        transform: translateY(-50%);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        transition: color .16s ease, background .16s ease;
      }
      .passwordToggle:hover {
        background: rgba(255,255,255,.08);
        color: var(--text);
      }
      .passwordToggle:focus-visible {
        outline: 2px solid rgba(150,200,255,.9);
        outline-offset: 1px;
      }
      .passwordToggle svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .field small {
        display: block;
        margin-top: 7px;
        color: rgba(255,255,255,.48);
        font-size: 12px;
        line-height: 1.45;
      }
      .check {
        display: grid;
        grid-template-columns: 20px 1fr;
        gap: 10px;
        align-items: start;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.45;
        cursor: pointer;
      }
      .check input {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        width: 20px;
        height: 20px;
        min-height: 20px;
        margin: 1px 0 0;
        padding: 0;
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        background: rgba(255,255,255,.075);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
        cursor: pointer;
        transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
      }
      .check input:checked {
        border-color: #96c8ff;
        background: #96c8ff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 3px rgba(150,200,255,.10);
      }
      .check input:checked::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid #17191c;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
      .check input:focus-visible {
        outline: 2px solid rgba(150,200,255,.9);
        outline-offset: 3px;
      }
      .registrationTerms {
        margin: -1px 0 15px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }
      .error { color: var(--danger); font-weight: 750; }
      .isHidden { display: none !important; }
      .paymentPage {
        min-height: min(620px, calc(100vh - 250px));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
      }
      .paymentPage h1 { font-size: clamp(42px, 7vw, 72px); }
      .paymentMark {
        width: 74px;
        height: 74px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: rgba(255,255,255,.07);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 20px 50px rgba(0,0,0,.3);
        margin-bottom: 28px;
      }
      .paymentMarkLoading span {
        width: 28px;
        height: 28px;
        border: 3px solid rgba(255,255,255,.24);
        border-top-color: rgba(255,255,255,.94);
        border-radius: 50%;
        animation: paymentSpin .8s linear infinite;
      }
      .paymentMarkSuccess {
        border-color: rgba(154,230,177,.34);
        background: rgba(77,154,99,.14);
      }
      .paymentMarkSuccess span {
        width: 28px;
        height: 15px;
        border-left: 4px solid #c9f4d5;
        border-bottom: 4px solid #c9f4d5;
        transform: translateY(-3px) rotate(-45deg);
      }
      .paymentMarkFailed {
        border-color: rgba(255,115,115,.3);
        background: rgba(255,80,80,.1);
      }
      .paymentMarkFailed span {
        width: 28px;
        height: 3px;
        border-radius: 3px;
        background: #ffd4d4;
      }
      .paymentSummary {
        width: min(100%, 440px);
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 18px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        margin: 12px 0 24px;
        padding: 18px 0;
      }
      .paymentSummary span { color: var(--muted); }
      .paymentSummary strong { font-size: 25px; }
      .paymentActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
      .paymentHint { font-size: 13px; margin-top: 12px; }
      @keyframes paymentSpin { to { transform: rotate(360deg); } }
      .section { margin-top: 22px; }
      .contentHeading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 18px;
      }
      .contentHeading h2 { margin: 0; }
      .contentSummary {
        max-width: 58%;
        margin: 0 0 4px;
        color: rgba(255,255,255,.54);
        font-size: 14px;
        line-height: 1.45;
        text-align: right;
      }
      .item {
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 16px;
        padding: 18px 0;
      }
      .modulePreviewHeader {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
      }
      .modulePreview {
        background:
          radial-gradient(circle at 92% 8%, rgba(110,135,176,.08), transparent 36%),
          rgba(14,15,17,.86);
        box-shadow: 0 22px 70px rgba(0,0,0,.42);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: none;
        transform: none;
      }
      .modulePreview:hover {
        background: #151619;
        border-color: var(--line);
        box-shadow: 0 22px 70px rgba(0,0,0,.42);
        transform: none;
      }
      .modulePreviewNumber {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,.34);
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        color: rgba(255,255,255,.88);
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        font-variant-numeric: tabular-nums;
      }
      .modulePreviewCopy { min-width: 0; }
      .modulePreviewHeader h3 { margin-bottom: 8px; }
      .modulePreviewHeader p { margin: 0; }
      .modulePreviewHeader .button { flex: 0 0 auto; }
      .modulePreviewItems {
        display: grid;
        gap: 10px;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid rgba(255,255,255,.12);
      }
      .modulePreviewItem {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: baseline;
        gap: 14px;
        color: rgba(255,255,255,.76);
        font-size: 14px;
        line-height: 1.45;
      }
      .modulePreviewItemType {
        color: rgba(255,255,255,.42);
        font-size: 11px;
        font-weight: 650;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      .productPageTitle {
        max-width: 100%;
        font-size: clamp(42px, 4.7vw, 68px);
        line-height: 1;
        text-wrap: balance;
        overflow-wrap: normal;
      }
      .productContentSection { margin-top: 82px; }
      .moduleCrumbs {
        margin-bottom: 40px;
        font-size: 15px;
      }
      .moduleCrumbs > span:last-child { color: var(--muted); }
      .modulePageHeader { max-width: 880px; }
      .moduleContentList {
        display: grid;
        gap: 18px;
        margin-top: 52px;
      }
      .moduleContentItem {
        grid-template-columns: minmax(0, 1fr);
        padding: clamp(22px, 3vw, 34px);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 18px;
        background:
          radial-gradient(circle at 92% 8%, rgba(110,135,176,.08), transparent 36%),
          rgba(14,15,17,.86);
        box-shadow: 0 18px 54px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.045);
      }
      .moduleContentBody { min-width: 0; }
      .moduleContentBody > h3 { margin-bottom: 10px; }
      .moduleContentBody > p { max-width: 780px; }
      .itemType {
        margin-bottom: 8px;
        color: rgba(255,255,255,.48);
        font-size: 13px;
        font-weight: 650;
        line-height: 1.2;
      }
      .moduleEnd {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 30px;
        margin-top: 64px;
        padding: 30px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 8px;
        background: rgba(17,18,20,.84);
        color: var(--text);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 58px rgba(0,0,0,.32);
        backdrop-filter: blur(20px) saturate(120%);
      }
      .moduleEndMeta {
        color: rgba(255,255,255,.58);
        font-size: 13px;
        font-weight: 720;
        letter-spacing: 0;
        text-transform: uppercase;
      }
      .moduleEndNext .moduleEndMeta { margin-bottom: 12px; }
      .moduleEndComplete .moduleEndMeta { margin-bottom: 12px; }
      .moduleEndAction {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 10px;
      }
      .moduleEndPosition {
        color: rgba(255,255,255,.46);
        font-size: 13px;
        font-weight: 650;
        white-space: nowrap;
      }
      .moduleEndTitle {
        max-width: 760px;
        margin: 0;
        color: var(--text);
        font-size: 30px;
        line-height: 1.12;
        letter-spacing: 0;
        text-shadow: none;
      }
      .moduleEnd p {
        max-width: 720px;
        margin: 14px 0 0;
        color: var(--muted);
      }
      .moduleEndButton {
        flex: 0 0 auto;
        border-color: rgba(255,255,255,.78);
        background: rgba(255,255,255,.94);
        color: #111214;
        white-space: nowrap;
      }
      .moduleEndButton:hover {
        border-color: #fff;
        background: #fff;
        color: #111214;
      }
      .moduleEndArrow {
        display: inline-block;
        margin-left: 5px;
        transition: transform .18s ease;
      }
      .moduleEndButton:hover .moduleEndArrow { transform: translateX(4px); }
      .moduleEndComplete { align-items: end; }
      .moduleEndCompleteText { min-width: 0; }
      .materialVideo {
        width: min(100%, 920px);
        aspect-ratio: 16 / 9;
        overflow: hidden;
        margin-top: 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #000;
        box-shadow: 0 18px 46px rgba(0,0,0,.34);
      }
      .materialVideoPreview {
        display: grid;
        place-items: center;
      }
      .videoPlayerShell {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
      }
      .materialVideo video {
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
        object-fit: contain;
      }
      .materialVideo.isPortraitVideo video { object-fit: contain; }
      .button.videoStartButton {
        width: 70px;
        min-width: 70px;
        height: 70px;
        min-height: 70px;
        padding: 0;
        border-radius: 50%;
        box-shadow: 0 14px 38px rgba(0,0,0,.42);
      }
      .videoStartIcon {
        width: 0;
        height: 0;
        margin-left: 4px;
        border-top: 9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left: 15px solid currentColor;
      }
      .videoControls {
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: auto minmax(90px, 1fr) auto auto auto;
        align-items: center;
        gap: 10px;
        min-height: 64px;
        padding: 18px 16px 12px;
        background: linear-gradient(180deg, transparent, rgba(0,0,0,.88));
      }
      .videoControl {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 50%;
        background: rgba(10,10,10,.58);
        color: #fff;
        font: inherit;
        cursor: pointer;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .videoControl:hover,
      .videoControl:focus-visible {
        border-color: rgba(255,255,255,.65);
        background: rgba(255,255,255,.16);
      }
      .videoToggleIcon {
        width: 0;
        height: 0;
        margin-left: 2px;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 10px solid currentColor;
      }
      .videoToggle.isPlaying .videoToggleIcon {
        width: 10px;
        height: 12px;
        margin-left: 0;
        border: 0;
        border-right: 3px solid currentColor;
        border-left: 3px solid currentColor;
      }
      .videoProgress {
        width: 100%;
        min-width: 0;
        height: 18px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
      }
      .videoProgress:focus {
        border-color: transparent;
        box-shadow: none;
      }
      .videoProgress::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(90deg, #fff var(--video-progress, 0%), rgba(255,255,255,.30) var(--video-progress, 0%));
      }
      .videoProgress::-moz-range-track {
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,.30);
      }
      .videoProgress::-moz-range-progress {
        height: 4px;
        border-radius: 999px;
        background: #fff;
      }
      .videoProgress::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
        margin-top: -5px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,.38);
        appearance: none;
        -webkit-appearance: none;
      }
      .videoProgress::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border: 0;
        border-radius: 50%;
        background: #fff;
      }
      .videoTime {
        min-width: 82px;
        color: rgba(255,255,255,.82);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        text-align: center;
        white-space: nowrap;
      }
      .videoVolume {
        position: relative;
        display: grid;
        place-items: center;
      }
      .videoVolumePopover {
        position: absolute;
        bottom: 46px;
        left: 50%;
        z-index: 3;
        width: 42px;
        height: 116px;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 22px;
        background: rgba(10,10,10,.86);
        box-shadow: 0 14px 32px rgba(0,0,0,.38);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }
      .videoVolume:hover .videoVolumePopover,
      .videoVolume:focus-within .videoVolumePopover {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
      }
      .videoVolumeSlider {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 82px;
        height: 18px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transform: translate(-50%, -50%) rotate(-90deg);
      }
      .videoVolumeSlider:focus {
        border-color: transparent;
        box-shadow: none;
      }
      .videoVolumeSlider::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(90deg, #fff var(--video-volume, 100%), rgba(255,255,255,.28) var(--video-volume, 100%));
      }
      .videoVolumeSlider::-moz-range-track {
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,.28);
      }
      .videoVolumeSlider::-moz-range-progress {
        height: 4px;
        border-radius: 999px;
        background: #fff;
      }
      .videoVolumeSlider::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
        margin-top: -5px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,.42);
        appearance: none;
        -webkit-appearance: none;
      }
      .videoVolumeSlider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border: 0;
        border-radius: 50%;
        background: #fff;
      }
      .videoSoundIcon {
        position: relative;
        display: block;
        width: 19px;
        height: 18px;
      }
      .videoSoundIcon:before {
        content: "";
        position: absolute;
        inset: 2px 6px 2px 0;
        background: currentColor;
        clip-path: polygon(0 34%, 30% 34%, 76% 0, 76% 100%, 30% 66%, 0 66%);
      }
      .videoSoundIcon:after {
        content: "";
        position: absolute;
        top: 3px;
        right: 0;
        width: 7px;
        height: 12px;
        border-right: 2px solid currentColor;
        border-radius: 0 50% 50% 0;
      }
      .videoSound.isQuiet .videoSoundIcon:after {
        top: 5px;
        right: 2px;
        width: 4px;
        height: 8px;
      }
      .videoSound.isMuted .videoSoundIcon:after {
        top: 8px;
        right: 0;
        width: 18px;
        height: 2px;
        border: 0;
        border-radius: 2px;
        background: currentColor;
        transform: rotate(-45deg);
      }
      .videoFullscreen { font-size: 21px; line-height: 1; }
      .videoPlayerShell:fullscreen {
        display: grid;
        place-items: center;
        background: #000;
      }
      .videoPlayerShell:fullscreen video {
        width: 100vw;
        height: 100vh;
        object-fit: contain;
      }
      .materialResourceCard {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
        width: min(100%, 920px);
        margin-top: 20px;
        padding: 16px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 14px;
        background: rgba(255,255,255,.045);
      }
      .materialResourceIcon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 13px;
        background: rgba(255,255,255,.07);
        color: rgba(255,255,255,.86);
        font-size: 21px;
        font-weight: 760;
        line-height: 1;
        text-decoration: none;
      }
      .materialDocumentIcon {
        position: relative;
        width: 18px;
        height: 21px;
        border: 3px solid currentColor;
        border-right-color: transparent;
        border-radius: 5px;
      }
      .materialDocumentIcon:after {
        content: "";
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 6px;
        height: 10px;
        border-right: 3px solid currentColor;
        border-bottom: 3px solid currentColor;
        border-radius: 0 0 5px;
      }
      .materialResourceCopy {
        display: grid;
        gap: 4px;
        min-width: 0;
      }
      .materialResourceCopy strong {
        color: var(--text);
        font-size: 16px;
        line-height: 1.25;
      }
      .materialResourceCopy span {
        overflow: hidden;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .materialResourceAction { min-width: 132px; }
      .materialResourceAction[aria-busy="true"] {
        pointer-events: none;
        opacity: .64;
      }
      .homeworkText {
        width: min(100%, 920px);
        margin-top: 18px;
        padding: 20px;
        border-left: 3px solid rgba(255,255,255,.46);
        border-radius: 0 12px 12px 0;
        background: rgba(255,255,255,.05);
        color: rgba(255,255,255,.88);
        font-size: 16px;
        line-height: 1.65;
        white-space: pre-wrap;
      }
      .badge {
        align-self: start;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        color: var(--accent-2);
        font-size: 12px;
        font-weight: 650;
        padding: 7px 10px;
        text-align: center;
        text-transform: uppercase;
      }
      .accessBadge {
        border-color: rgba(142, 230, 168, .36);
        background: rgba(142, 230, 168, .14);
        color: #c9f4d5;
      }
      .locked {
        position: relative;
      }
      .locked .item { opacity: .68; }
      .locked .item h3,
      .locked .item p { color: rgba(245,245,245,.78); }
      .studioStack { display: grid; gap: 18px; }
      .studioCard { display: grid; gap: 14px; }
      .studioActions { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
      .studioActions form { display: flex; gap: 10px; flex: 1 1 260px; margin: 0; }
      .studioSmallGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
      .studioWide { grid-column: 1 / -1; }
      .studioMetrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
      .promoAdminList { display: grid; gap: 14px; }
      .promoAdminCard { padding: 0; overflow: hidden; }
      .promoAdminCard > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        cursor: pointer;
        list-style: none;
        padding: 22px 26px;
      }
      .promoAdminCard > summary::-webkit-details-marker { display: none; }
      .promoAdminCard > summary span:first-child { display: flex; align-items: baseline; gap: 12px; }
      .promoAdminCard > summary strong { font-size: 22px; }
      .promoAdminCard > summary small { color: var(--muted); font-size: 14px; }
      .promoAdminCard[open] > summary { border-bottom: 1px solid var(--line); }
      .promoAdminCard > form,
      .promoAdminCard > p,
      .promoAdminCard > .promoMetrics { margin-left: 26px; margin-right: 26px; }
      .promoAdminCard > form { margin-bottom: 26px; }
      .promoAdminCard > p { margin-top: 0; }
      .promoStatus {
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 760;
        padding: 7px 11px;
      }
      .promoStatus.active {
        border-color: rgba(154, 230, 177, .30);
        background: rgba(77, 154, 99, .12);
        color: #c9f4d5;
      }
      .promoMetrics { margin-top: 22px; }
      .promoEditorGrid { margin-bottom: 16px; }
      .promoChecks {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin: 0 0 20px;
      }
      .checkLabel {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 0;
        min-height: 66px;
        margin: 0;
        padding: 13px 14px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: rgba(255,255,255,.045);
        color: var(--muted);
        font-size: 13px;
        line-height: 1.4;
        cursor: pointer;
      }
      .checkLabel input {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        min-height: 20px;
        margin: 0;
        padding: 0;
        accent-color: #96c8ff;
      }
      .promoDeleteForm {
        padding-top: 18px;
        border-top: 1px solid var(--line);
      }
      .studioMetric {
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255,255,255,.06);
        padding: 20px;
      }
      .studioMetric strong {
        display: block;
        color: var(--text);
        font-size: 30px;
        line-height: 1;
        margin-bottom: 8px;
      }
      .studioMetric span { color: var(--muted); font-size: 13px; font-weight: 700; }
      .studioHeader {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 18px;
        margin-bottom: 22px;
      }
      .studioHeaderActions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
      }
      .studioHeaderActions [hidden] { display: none !important; }
      .studioNav {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 0 0 24px;
      }
      .studioNav a {
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255,255,255,.055);
        color: var(--muted);
        min-height: 42px;
        padding: 10px 17px;
        text-decoration: none;
      }
      .studioNav a.active {
        background: rgba(255,255,255,.14);
        border-color: var(--line-strong);
        color: var(--text);
      }
      .studioList {
        display: grid;
        gap: 12px;
      }
      .studioListItem {
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255,255,255,.055);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
        text-decoration: none;
      }
      .studioListItem:hover {
        border-color: var(--line-strong);
      }
      .studioPriorityContent {
        color: inherit;
        min-width: 0;
        text-decoration: none;
      }
      .priorityControls {
        display: none;
        align-items: center;
        gap: 6px;
      }
      .priorityMove {
        width: 42px;
        height: 42px;
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        background: rgba(255,255,255,.075);
        color: var(--text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
      }
      .priorityMove:hover:not(:disabled) {
        border-color: rgba(255,255,255,.52);
        background: rgba(255,255,255,.14);
      }
      .priorityMove:disabled {
        color: rgba(255,255,255,.22);
        border-color: rgba(255,255,255,.1);
        background: rgba(255,255,255,.025);
        cursor: default;
      }
      .priorityMove:focus-visible {
        outline: 2px solid rgba(255,255,255,.72);
        outline-offset: 3px;
      }
      .studioPriorityForm.isOrdering .studioListItem {
        grid-template-columns: auto minmax(0, 1fr);
        border-color: rgba(255,255,255,.18);
      }
      .studioPriorityForm.isOrdering .priorityControls { display: flex; }
      .studioPriorityForm.isOrdering .priorityOpen { display: none; }
      .studioPriorityForm.isOrdering .studioPriorityContent { pointer-events: none; }
      .studioMeta {
        color: var(--muted);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        font-size: 13px;
      }
      .accountListItem {
        display: block;
      }
      .accountListItem details { display: block; }
      .accountListItem summary {
        cursor: pointer;
        display: block;
        list-style: none;
        margin: -18px -20px;
        padding: 18px 20px;
        border-radius: 22px;
      }
      .accountListItem summary:hover {
        background: rgba(255,255,255,.045);
      }
      .accountListItem details[open] summary {
        border-bottom: 1px solid var(--line);
        border-radius: 22px 22px 0 0;
        margin-bottom: 16px;
      }
      .accountListItem summary::-webkit-details-marker { display: none; }
      .accountDetails {
        border-top: 1px solid var(--line);
        display: grid;
        gap: 14px;
        grid-column: 1 / -1;
        margin-top: 4px;
        padding-top: 16px;
      }
      .purchaseAdminRow {
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 16px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        padding: 13px 14px;
      }
      .purchaseAdminRow form { margin: 0; }
      .purchaseAdminList { display: grid; gap: 10px; }
      .plusButton {
        width: 48px;
        min-height: 48px;
        border-radius: 50%;
        padding: 0;
        font-size: 28px;
        line-height: 1;
      }
      .crumbs {
        color: var(--muted);
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 14px;
      }
      .crumbs a { color: var(--text); text-decoration-color: rgba(255,255,255,.28); }
      .coverPreview {
        aspect-ratio: 16 / 9;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255,255,255,.055);
        display: grid;
        place-items: center;
        color: rgba(255,255,255,.56);
        font-size: 54px;
        font-weight: 760;
        margin-bottom: 14px;
        overflow: hidden;
      }
      .coverPreview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .heroPositionPreview {
        position: relative;
        aspect-ratio: 4 / 5;
        min-height: 260px;
        background:
          radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), transparent 34%),
          rgba(0,0,0,.48);
      }
      .heroPositionPreview img {
        object-fit: contain;
        object-position: center bottom;
        transform: translateY(var(--hero-position-offset, 0px)) scale(1.04);
        transition: transform .12s ease-out;
      }
      .heroPositionPreviewBlock {
        position: absolute;
        left: 8%;
        right: 8%;
        bottom: 10px;
        z-index: 1;
        display: grid;
        min-height: 44px;
        place-items: center;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 14px;
        background: rgba(18,19,22,.88);
        color: var(--text);
        font-size: 12px;
        font-weight: 750;
        backdrop-filter: blur(12px);
      }
      .heroPositionForm {
        display: grid;
        gap: 10px;
        margin-top: 16px;
      }
      .heroPositionLabel {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
      }
      .heroPositionLabel label { margin: 0; }
      .heroPositionLabel output {
        color: var(--text);
        font-size: 13px;
        font-weight: 750;
        white-space: nowrap;
      }
      .heroPositionForm input[type="range"] {
        width: 100%;
        min-height: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        accent-color: #96c8ff;
        box-shadow: none;
      }
      .heroPositionHint { font-size: 12px; line-height: 1.45; margin: 0; }
      .tagEditorRow {
        display: grid;
        grid-template-columns: minmax(160px, 1fr) 90px auto;
        gap: 10px;
        align-items: end;
        margin-top: 10px;
      }
      .tagEditorRow input[type="color"] {
        min-height: 50px;
        padding: 6px;
      }
      .logoutModal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: none;
        place-items: center;
        padding: 22px;
        background: rgba(0,0,0,.58);
        backdrop-filter: blur(10px);
      }
      .logoutModal.active { display: grid; }
      .logoutBox {
        width: min(460px, 100%);
        border: 1px solid var(--line-strong);
        border-radius: 24px;
        background: rgba(18,19,22,.92);
        box-shadow: 0 36px 110px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.1);
        padding: 26px;
      }
      .logoutBox h3 {
        font-size: 24px;
        line-height: 1.18;
        margin: 0 0 20px;
      }
      .logoutActions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      footer {
        color: var(--muted);
        padding: 18px 0 30px;
      }
      footer .shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        justify-content: space-between;
        gap: 30px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: rgba(14,15,17,.48);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 54px rgba(0,0,0,.24);
        padding: 18px 22px;
        backdrop-filter: blur(22px) saturate(130%);
      }
      .footerBrand {
        color: var(--text);
        display: block;
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .footerDetails {
        display: grid;
        gap: 5px;
        font-size: 13px;
        line-height: 1.45;
      }
      .footerDetails a {
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text);
        text-decoration: underline;
        text-decoration-color: rgba(255,255,255,.28);
        text-underline-offset: 3px;
      }
      .footerPlaceholder {
        color: rgba(255,255,255,.42);
        font-size: 11px;
        margin-top: 4px;
        text-transform: uppercase;
        letter-spacing: .08em;
      }
      .footerLinks {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
      }
      footer a {
        color: var(--text);
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        margin: 0;
        padding: 0 16px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255,255,255,.055);
        text-decoration: none;
        font-size: 14px;
        backdrop-filter: blur(14px);
      }
      @media (max-width: 860px) {
        .hero, .grid, .grid.two, .item, .proofStrip, .statsGrid, .aiRoadmapInner, .roadmapFlow, .studioSmallGrid, .studioMetrics, .studioListItem, .purchaseAdminRow, .tagEditorRow { grid-template-columns: 1fr; }
        .promoChecks { grid-template-columns: 1fr; }
        .studioHeader { align-items: stretch; flex-direction: column; }
        .studioHeaderActions { justify-content: stretch; }
        .studioHeaderActions .button:not(.plusButton) { flex: 1 1 auto; }
        .studioPriorityForm.isOrdering .studioListItem { grid-template-columns: auto minmax(0, 1fr); }
        .shell, header { width: min(100% - 28px, 720px); }
        header { top: 10px; margin-top: 10px; border-radius: 20px; }
        .nav {
          display: grid;
          grid-template-columns: auto minmax(0, 1fr);
          grid-template-areas: "brand links";
          align-items: center;
          gap: 10px;
          min-height: 60px;
          padding: 8px 12px;
        }
        .brand { grid-area: brand; font-size: 17px; gap: 8px; }
        .brandLogo { width: 27px; height: 27px; }
        .navConsole {
          display: none;
          grid-area: console;
          width: 100%;
          height: 34px;
          margin: 0;
          border-top: 1px solid rgba(255,255,255,.10);
          border-bottom: 1px solid rgba(255,255,255,.10);
          font-size: 12px;
        }
        .homePage .nav {
          grid-template-areas:
            "brand links"
            "console console";
          padding-bottom: 12px;
        }
        .homePage .navConsole { display: flex; }
        .links { grid-area: links; justify-content: flex-end; width: auto; flex-wrap: nowrap; }
        .links a, .links button, .button { min-height: 40px; padding: 0 13px; font-size: 14px; }
        .links .accountNavLink {
          width: 40px;
          min-width: 40px;
          min-height: 40px;
          flex: 0 0 40px;
          padding: 0;
          border-radius: 50%;
        }
        .accountNavLabel { display: none; }
        .accountTabs,
        .accountPanel,
        .achievementsCompact { min-width: 0; }
        .accountProfileGrid { grid-template-columns: 1fr; margin-top: 14px; }
        .accountProfileItem,
        .accountProfileItem:first-child {
          padding: 15px 0;
          border-left: 0;
          border-top: 1px solid var(--line);
        }
        .accountProfileItem:first-child { border-top: 0; }
        .accountTabControls {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6px;
          overflow-x: visible;
          padding: 0;
        }
        .accountTabControls a {
          min-width: 0;
          padding: 10px 5px;
          font-size: 12px;
          text-align: center;
        }
        .achievementBadge { position: static; }
        .achievementBadge.locked { filter: none; }
        .achievementTip {
          left: 0;
          right: 0;
          bottom: calc(100% + 10px);
          width: auto;
          max-width: none;
          transform: translateY(6px);
        }
        .achievementBadge:hover .achievementTip,
        .achievementBadge:focus-within .achievementTip {
          transform: translateY(0);
        }
        main { padding-top: 42px; padding-bottom: 58px; }
        .hero { gap: 26px; min-height: auto; }
        h1 { font-size: clamp(44px, 14vw, 66px); letter-spacing: -.04em; }
        h2 { font-size: clamp(32px, 10vw, 48px); }
        .lead { font-size: 17px; }
        .aboutHero {
          grid-template-columns: 1fr;
          gap: 22px;
          min-height: 0;
          padding: 30px 0 24px;
        }
        .aboutHeroCopy { text-align: center; }
        .aboutHero h1 { margin-left: auto; margin-right: auto; }
        .aboutRole { margin-left: auto; margin-right: auto; }
        .aboutPortrait { grid-row: 1; }
        .aboutPortraitRing { width: min(72vw, 350px); }
        .aboutStory { margin-top: 20px; }
        .aboutStoryMain p { font-size: 17px; }
        .aboutLiquidTransition {
          width: calc(100% + 120px);
          height: 190px;
          margin: 10px -60px 34px;
        }
        .aboutSelfify {
          grid-template-columns: 1fr;
          min-height: 420px;
          margin-top: 0;
          padding: 42px 38px;
          border-radius: 30px;
        }
        .aboutSelfifyCopy { max-width: 540px; }
        .aboutLiquidTornado {
          position: absolute;
          right: -82px;
          bottom: -74px;
          width: 340px;
          opacity: .34;
        }
        .aboutSelfify .button { width: 100%; }
        .panel, .card, .formBox { border-radius: 22px; }
        .showcase { min-height: 340px; padding: 22px; }
        .productShowcase {
          min-height: 0;
          padding: 0;
        }
        .productShowcase .showcaseInner {
          min-height: 0;
        }
        .productShowcase .productTag {
          padding: 5px 8px;
          font-size: 10.5px;
          line-height: 1.15;
        }
        .productShowcase .tagRow {
          gap: 6px;
        }
        .portraitShowcase.transparentImage {
          margin-left: 0;
          min-height: 420px;
          overflow: hidden;
        }
        .homePage .portraitShowcase.transparentImage.isPortraitHero {
          z-index: 0;
          margin-bottom: -100px;
          overflow: visible;
        }
        .homePage .portraitShowcase.transparentImage.isPortraitHero img {
          transform: scale(1.1) translateY(calc(14px + var(--hero-image-offset-y, 0px)));
        }
        .homePage .proofStrip {
        position: relative;
          z-index: 2;
        }
        .portraitShowcase.transparentImage img {
          transform: scale(1.1);
        }
        .showcaseInner { min-height: 300px; }
        .productCard { min-height: 310px; }
        .catalog { margin-top: 86px; }
        .productHero { gap: 28px; }
        .productHeroCopy { grid-column: 1; grid-row: 1; }
        .productHero .productShowcase { grid-column: 1; grid-row: 2; }
        .productPurchaseDesktop { display: none; }
        .productPurchaseMobile { display: block; grid-column: 1; grid-row: 3; width: 100%; }
        .productPurchaseAction,
        .productPurchaseAction form,
        .productPurchaseAction .button { width: 100%; }
        .productPurchaseBottom { margin-top: 36px; }
        .productContentSection { margin-top: 62px; }
        .proofStrip { margin-top: 82px; margin-bottom: 18px; }
        .aiRoadmap { margin-top: 56px; margin-bottom: 18px; padding: 0; }
        .aiRoadmapInner { align-items: start; gap: 26px; }
        .roadmapFlow { gap: 18px; }
        .roadmapStep {
          min-height: 0;
          display: grid;
          grid-template-columns: 64px 1fr;
          column-gap: 6px;
          padding: 0 0 12px;
        }
        .roadmapIcon {
          margin: 0;
          grid-row: 1 / span 2;
        }
        .row .button { flex: 1 1 auto; }
        footer .shell { align-items: start; grid-template-columns: 1fr; }
        .footerLinks { justify-content: flex-start; }
      }
      @media (max-width: 860px) and (orientation: landscape) and (min-width: 620px) {
        .shell, header { width: min(calc(100% - 28px), 760px); }
        header { top: 8px; margin-top: 8px; border-radius: 22px; }
        .nav {
          display: grid;
          grid-template-columns: auto minmax(0, 1fr);
          grid-template-areas: "brand links";
          align-items: center;
          gap: 14px;
          min-height: 60px;
          padding: 8px 16px;
        }
        .brand { font-size: 17px; gap: 8px; }
        .brandLogo { width: 26px; height: 26px; }
        .navConsole {
          display: none;
        }
        .homePage .nav {
          grid-template-areas: "brand links";
          padding-bottom: 8px;
        }
        .homePage .navConsole { display: none; }
        .homePage .hero {
          grid-template-columns: minmax(0, 1fr) minmax(250px, .82fr);
          align-items: center;
        }
        .aboutHero {
          grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
          gap: 34px;
          padding: 30px 0;
        }
        .aboutHeroCopy { text-align: left; }
        .aboutHero h1,
        .aboutRole { margin-left: 0; margin-right: 0; }
        .aboutPortrait { grid-column: 2; grid-row: 1; }
        .aboutPortraitRing { width: min(34vw, 300px); }
        .aboutStory { margin-top: 34px; }
        .aboutStoryMain { max-width: 760px; }
        .aboutStoryMain p { font-size: 16px; line-height: 1.58; }
        .aboutIntro { font-size: 18px !important; }
        .aboutLiquidTransition { height: 160px; margin-bottom: 28px; }
        .aboutSelfify { max-width: 760px; min-height: 330px; margin-top: 0; padding: 34px; }
        .aboutSelfify h2 { font-size: 34px; }
        .aboutSelfify p { font-size: 16px; line-height: 1.58; }
        .aboutSelfify .button { width: auto; }
        .aboutLiquidTornado { width: 270px; right: -66px; bottom: -78px; }
        .homePage .portraitShowcase.transparentImage.isPortraitHero {
          margin-bottom: 0;
          overflow: hidden;
          z-index: auto;
        }
        .homePage .portraitShowcase.transparentImage.isPortraitHero img {
          transform: scale(1.04);
        }
        .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .productHeroCopy { grid-column: 1; grid-row: 1; }
        .productHero .productShowcase { grid-column: 2; grid-row: 1; }
        .productPurchaseDesktop { display: grid; }
        .productPurchaseMobile { display: none; }
        .proofStrip { grid-template-columns: 1fr; }
        .statsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .roadmapFlow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .row .button,
        .purchaseRow .button { flex: 0 1 auto; width: auto; }
        .authTitle { white-space: normal; font-size: clamp(36px, 6vw, 56px); }
        .narrow { max-width: 560px; }
        .narrow > .formBox { padding: 20px; }
        .narrow > .formBox .field { margin-bottom: 10px; }
        .narrow > .formBox input,
        .narrow > .formBox select,
        .narrow > .formBox textarea { min-height: 44px; padding: 9px 12px; }
        .narrow > .formBox input { font-size: 16px; }
        .narrow > .formBox .passwordInputWrap input { padding-right: 50px; }
        .narrow > .formBox .check { font-size: 12px; line-height: 1.3; }
        footer { padding: 12px 0 20px; }
        footer .shell {
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: center;
          gap: 16px;
          padding: 12px 16px;
        }
        .footerDetails { gap: 3px; font-size: 11px; line-height: 1.3; }
        .footerLinks { justify-content: flex-end; max-width: 280px; gap: 6px; }
        footer a { min-height: 32px; padding: 0 10px; font-size: 11px; }
        .links {
          justify-content: flex-end;
          width: auto;
          flex-wrap: nowrap;
        }
        .links a, .links button {
          flex: 0 0 auto;
          min-height: 38px;
          padding: 0 13px;
          font-size: 14px;
        }
      }
      @media (max-width: 480px) {
        body:before { filter: blur(8px) saturate(88%) brightness(.68); }
        .shell, header { width: calc(100% - 22px); }
        .links a, .links button { flex: 0 0 auto; }
        .links .accountNavLink { flex-basis: 40px; }
        .button { width: 100%; }
        .socialLinks,
        .proofIntro .socialLinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .socialButton { justify-content: center; min-width: 0; padding: 0 12px; }
        .socialButton:last-child:nth-child(odd) { grid-column: 1 / -1; }
        .aboutHero { padding-top: 18px; }
        .aboutPortraitRing { width: min(76vw, 310px); padding: 8px; }
        .aboutPortraitRing:after { inset: 8px; }
        .aboutHero h1 { font-size: clamp(48px, 15vw, 66px); }
        .aboutRole { font-size: 20px; }
        .aboutIntro { font-size: 20px !important; }
        .aboutStoryMain p,
        .aboutSelfify p { font-size: 16px; }
        .aboutLiquidTransition {
          width: calc(100% + 22px);
          height: 138px;
          margin-left: -11px;
          margin-right: -11px;
          margin-bottom: 28px;
        }
        .aboutSelfify {
          min-height: 440px;
          padding: 32px 22px;
          border-radius: 26px;
        }
        .aboutSelfify:before { border-radius: 25px; }
        .aboutLiquidTornado {
          width: 270px;
          right: -92px;
          bottom: -62px;
          opacity: .3;
        }
        .aboutFloatingBack {
          left: 14px;
          bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
          min-height: 44px;
          padding: 0 16px;
          font-size: 13px;
        }
        .promocodePopup { padding: 12px; }
        .promocodePopupCard { padding: 24px 18px 18px; border-radius: 22px; }
        .promocodePopupCard h3 { font-size: 22px; margin-bottom: 18px; }
        .promocodePopup .promocodeControls { grid-template-columns: 1fr; }
        .button.promocodePopupClose { width: 40px; min-height: 40px; }
        .dialogClose { width: 38px; }
        .achievementsHeader .button { width: auto; }
        .achievementsHeader { align-items: flex-start; flex-direction: column; }
        .navConsole { font-size: 11px; }
        .purchaseRow { align-items: stretch; flex-direction: column; }
        .purchaseRow form, .purchaseRow .button { width: 100%; }
        .portraitShowcase.transparentImage { min-height: 360px; }
        .portraitShowcase.transparentImage img { transform: scale(1.04); }
        .homePage .portraitShowcase.transparentImage.isPortraitHero {
          margin-bottom: -86px;
        }
        .homePage .portraitShowcase.transparentImage.isPortraitHero img {
          transform: scale(1.04) translateY(calc(12px + var(--hero-image-offset-y, 0px)));
        }
        .productShowcase {
          padding: 0;
        }
        .productShowcase .productTag {
          padding: 4px 7px;
          font-size: 10px;
        }
        .productCard h3, .productCard p, .productCard .row { margin-left: 18px; margin-right: 18px; }
        .item { gap: 10px; }
        .moduleContentItem {
          padding: 20px 16px;
          border-radius: 16px;
        }
        .materialVideo { border-radius: 12px; }
        .button.videoStartButton {
          width: 62px;
          min-width: 62px;
          height: 62px;
          min-height: 62px;
        }
        .videoControls {
          grid-template-columns: auto minmax(60px, 1fr) auto auto;
          gap: 7px;
          min-height: 56px;
          padding: 14px 10px 8px;
        }
        .videoControl {
          width: 36px;
          min-width: 36px;
          height: 36px;
        }
        .videoVolumePopover { display: none; }
        .videoTime { display: none; }
        .materialResourceCard {
          grid-template-columns: 46px minmax(0, 1fr);
          gap: 12px;
          padding: 13px;
        }
        .materialResourceIcon {
          width: 46px;
          height: 46px;
        }
        .materialResourceAction {
          grid-column: 1 / -1;
          width: 100%;
        }
        .materialResourceCopy span { white-space: normal; }
        .homeworkText { padding: 17px; font-size: 15px; }
        .contentHeading { align-items: flex-start; flex-direction: column; gap: 8px; }
        .contentSummary { max-width: none; margin: 0; text-align: left; }
        .modulePreviewHeader {
          grid-template-columns: 40px minmax(0, 1fr);
          align-items: start;
          gap: 14px;
        }
        .modulePreviewNumber { width: 40px; height: 40px; }
        .modulePreviewHeader .button { grid-column: 1 / -1; width: 100%; }
        .modulePreviewItem { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
        .moduleCrumbs { margin-bottom: 30px; }
        .moduleContentList { margin-top: 38px; }
        .moduleEnd {
          grid-template-columns: 1fr;
          align-items: stretch;
          gap: 22px;
          margin-top: 46px;
          padding: 24px;
        }
        .moduleEndTitle { font-size: 24px; }
        .moduleEndAction { align-items: stretch; }
        .moduleEndPosition { text-align: center; }
        .moduleEndButton { width: 100%; white-space: normal; }
        .badge { justify-self: start; }
        .statCard { min-height: 120px; }
        .roadmapStep { grid-template-columns: 58px 1fr; }
        .roadmapIcon {
          width: 48px;
          height: 48px;
          border-radius: 16px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .navConsoleText:after { animation: none; opacity: 1; }
      }