/* yozhik shared styles: home page (butter.html) and every page built by tools/build_pages.py */
  :root {
    --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
    --font-label: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

    --ink: #0f0f0f;
    --ink-1e: #1e1e1e;
    --ink-50: rgba(15,15,15,.5);
    --ink-40: rgba(15,15,15,.4);
    --ink-30: rgba(15,15,15,.3);
    --paper: #fafafa;
    --card: #ededed;
    --dark: #0f0f0f;
    --dark-2: #1c1c1c;
    --dark-3: #262626;
    --on-dark-40: #9a9a9a;

    --gutter: clamp(16px, 4.6vw, 66px);
    --section: clamp(80px, 10vw, 150px);
    --radius: 32px;
    --radius-md: 24px;

    /* type scale measured at 1440px */
    --t-hero: clamp(46px, 7.47vw, 128px);
    --t-h2:   clamp(34px, 4.19vw, 64px);
    --t-h3:   clamp(28px, 3.16vw, 48px);
    --t-lead: clamp(18px, 1.7vw, 26px);
    --t-body: clamp(17px, 1.44vw, 22px);
    --t-small: 16px;
    --t-label: 13.5px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
    background: var(--paper);
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; letter-spacing: inherit; text-align: inherit; }
  img, video { display: block; max-width: 100%; }
  video { object-fit: cover; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

  .wrap { padding-inline: var(--gutter); }
  .section { padding-block: var(--section); }
  .skip { position: absolute; left: -9999px; }
  .skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }

  /* ---------- type ---------- */
  .h1 { font-size: var(--t-hero); line-height: .99; letter-spacing: -.035em; font-weight: 500; }
  .h2 { font-size: var(--t-h2); line-height: 1; letter-spacing: -.025em; font-weight: 500; }
  .h3 { font-size: var(--t-h3); line-height: 1.02; letter-spacing: -.022em; font-weight: 500; }
  .lead { font-size: var(--t-lead); line-height: 1.15; }
  .body { font-size: var(--t-body); line-height: 1.18; }
  .small { font-size: var(--t-small); line-height: 1.31; }
  .muted { color: var(--ink-40); }
  .soft { color: var(--ink-30); }
  .eyebrow {
    display: block;
    font-family: var(--font-label);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .005em;
    color: var(--ink-40);
    margin-bottom: 18px;
  }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 42px; padding: 0 20px; border-radius: 12px;
    font-size: var(--t-small); line-height: 1; white-space: nowrap;
    transition: background-color .2s, color .2s, opacity .2s;
  }
  .btn:active { opacity: .82; }
  .btn-dark { background: var(--dark); color: #ebebeb; }
  .btn-dark:hover { background: #2e2e30; }
  .btn-light { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.07); }
  .btn-light:hover { background: #f1f1f2; }
  .btn svg { width: 14px; height: 14px; opacity: .55; }
  .icon-btn {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: inline-grid; place-items: center;
    background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); color: var(--ink); cursor: pointer;
    transition: background-color .2s, color .2s;
  }
  .icon-btn:hover { background: #f0f0f2; color: var(--ink-50); }
  .icon-btn svg { width: 16px; height: 16px; }


  /* ---------- full-screen menu (Cash App style) ---------- */
  :root { --accent: #2f6bff; }
  /* sits under the nav (z 50) so the header stays live on top, like cash.app; fades in with a short stagger (site.js) */
  .menu { position: fixed; inset: 0; z-index: 45; background: #050505; color: #fff; overflow-y: auto; overscroll-behavior: contain; }
  .menu[hidden] { display: none; }
  .menu-inner { min-height: 100%; padding: 116px var(--gutter) 48px; }
  .menu-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 34%); gap: clamp(28px, 4vw, 72px); padding-top: 8px; }
  .menu-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 22px); }
  .m-card { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: clamp(20px, 2vw, 30px); background: #1b1b1d; padding: clamp(18px, 2.2vw, 32px); transition: background-color .25s; }
  .m-card:hover { background: #242427; }
  .m-title { position: relative; z-index: 1; display: block; max-width: 9.5em; font-size: clamp(19px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -.022em; }
  .m-art { position: absolute; left: clamp(18px, 2.2vw, 32px); right: clamp(18px, 2.2vw, 32px); bottom: clamp(16px, 2vw, 28px); height: 56%; }
  .m-art img { display: block; object-fit: cover; }
  .m-card .m-art > *, .m-card .m-art img { transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .4s; }
  .tl { display: inline-flex; gap: 4px; margin-right: 8px; } .tl i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); }

  /* your logo, in 3D: flat tile → 3D render */
  .art-flat { display: flex; align-items: center; gap: 4%; }
  .flat-tile, .flat-3d { flex: 1; aspect-ratio: 1; border-radius: 18px; overflow: hidden; }
  .flat-tile { display: grid; place-items: center; background: #f4f4f4; }
  .flat-tile img { width: 62%; }
  .flat-3d img { width: 100%; height: 100%; }
  .flat-arrow { flex: none; color: #8d8d93; font-size: 18px; }
  .m-card:hover .flat-3d { transform: translateY(-6px) rotate(-3deg) scale(1.04); }

  /* 12 finishes: a strip of real renders gliding past */
  .art-strip { left: 0; right: 0; overflow: hidden; display: flex; align-items: flex-end; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .strip-track { display: flex; gap: 10px; width: max-content; animation: strip 26s linear infinite; animation-play-state: paused; }
  .menu-open .strip-track { animation-play-state: running; }
  .m-card:hover .strip-track { animation-duration: 14s; }
  @keyframes strip { to { transform: translateX(-50%); } }
  .fin { display: grid; gap: 7px; width: clamp(64px, 6.4vw, 96px); }
  .fin img { width: 100%; aspect-ratio: 1; border-radius: 14px; }
  .fin i { font-style: normal; font-size: 12px; color: #8d8d93; }

  /* export every format: three aspect ratios under the format chips */
  .fmt-chips { position: absolute; left: 0; top: 0; display: flex; gap: 6px; }
  .fmt-chips b { font-weight: 500; font-size: 11.5px; padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.1); color: #d6d6da; }
  .fmt { position: absolute; bottom: 0; border-radius: 12px; overflow: hidden; background: #0d0d0f; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
  .fmt img { width: 100%; height: 100%; }
  .fmt i { position: absolute; left: 8px; bottom: 7px; font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }
  .f-story { left: 0; height: 74%; aspect-ratio: 9 / 16; z-index: 3; }
  .f-post { left: 24%; height: 60%; aspect-ratio: 1; z-index: 2; }
  .f-web { left: 46%; height: 44%; aspect-ratio: 16 / 9; z-index: 1; }
  .f-web i { left: auto; right: 8px; }
  .m-card:hover .f-post { transform: translateX(8%); } .m-card:hover .f-web { transform: translateX(14%); }

  /* brand library: a small app window */
  .art-window { display: flex; align-items: flex-end; }
  .win { position: relative; width: 100%; border-radius: 14px 14px 10px 10px; background: #111113; box-shadow: 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
  .win-bar, .ed-bar { display: flex; align-items: center; height: 28px; padding: 0 10px; font-size: 11.5px; color: #8d8d93; border-bottom: 1px solid rgba(255,255,255,.06); }
  .win-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
  .win-grid img { width: 100%; aspect-ratio: 1; border-radius: 8px; }
  .win-pin { position: absolute; right: 10px; top: 36px; font-size: 11px; padding: 3px 7px; border-radius: 6px; background: #fff; color: #0f0f0f; }
  .m-card:hover .win-grid img:nth-child(2) { transform: scale(1.08); }

  /* embed: a code editor with a live render beside it */
  .art-editor { display: flex; align-items: flex-end; }
  .ed { width: 84%; border-radius: 14px; background: #111113; box-shadow: 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
  .ed code { display: block; padding: 10px 12px 14px; font: 500 clamp(11px, .95vw, 14px)/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: #d6d6da; }
  .caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: #d6d6da; animation: caret 1s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  .ed-live { position: absolute; right: 0; top: 4%; width: 34%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 16px 30px -12px rgba(0,0,0,.8); }
  .ed-live img { width: 100%; height: 100%; }
  .ed-live i { position: absolute; left: 7px; top: 7px; font-style: normal; font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: #fff; color: #0f0f0f; }
  .m-card:hover .ed-live { transform: translateY(-6px) rotate(3deg); }

  /* keychains, icons and more: a fan of objects */
  .art-objects img { position: absolute; bottom: 0; width: 42%; aspect-ratio: 3 / 4; border-radius: 16px; box-shadow: 0 18px 36px -16px rgba(0,0,0,.8); }
  .art-objects .o1 { left: 2%; transform: rotate(-8deg); z-index: 1; }
  .art-objects .o2 { left: 29%; transform: translateY(-6%); z-index: 3; }
  .art-objects .o3 { left: 56%; transform: rotate(8deg); z-index: 2; }
  .m-card:hover .art-objects .o1 { transform: rotate(-14deg) translateX(-6%); }
  .m-card:hover .art-objects .o3 { transform: rotate(14deg) translateX(6%); }
  .m-card:hover .art-objects .o2 { transform: translateY(-12%); }
  @media (prefers-reduced-motion: reduce) { .strip-track, .caret { animation: none; } }
  .menu-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); gap: 32px; align-content: start; padding-top: 6px; }
  .m-features { list-style: none; display: grid; gap: 6px; }
  .m-features a { display: flex; align-items: center; gap: 22px; padding: 14px 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.25; transition: opacity .2s; }
  .m-features a:hover, .m-links a:hover, .m-social a:hover { opacity: .6; }
  .m-features .ic { width: 30px; height: 30px; stroke-width: 1.5; color: #d9d9de; }
  .m-links h5 { font-weight: 400; font-size: clamp(17px, 1.3vw, 20px); color: #85858c; margin-bottom: 14px; }
  .m-links h5.m-gap { margin-top: 44px; }
  .m-links > a { display: block; padding: 9px 0; font-size: clamp(17px, 1.3vw, 20px); transition: opacity .2s; }
  .m-social { display: grid; grid-template-columns: repeat(2, 40px); gap: 18px 24px; }
  .m-social a { display: grid; place-items: center; width: 40px; height: 40px; transition: opacity .2s; }
  .m-social .ic { width: 30px; height: 30px; }
  @media (max-width: 1180px) {
    .menu-body { grid-template-columns: 1fr; }
    .menu-side { grid-template-columns: 1fr 1fr; padding-top: 12px; }
  }
  @media (max-width: 760px) {
    .menu-cards { grid-template-columns: 1fr 1fr; }
    .m-card { aspect-ratio: .82; }
    .menu-inner { padding-top: 84px; }
    .ed code { font-size: 10px; padding: 8px 9px 10px; } .fmt-chips b { font-size: 10px; padding: 3px 6px; }
    .menu-side { grid-template-columns: 1fr; gap: 20px; }
    .m-links h5.m-gap { margin-top: 28px; }
  }

  /* ---------- info sheets (apple.com-style) ---------- */
  .sheet { border: 0; padding: 0; margin: auto; background: transparent; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: visible; }
  .sheet::backdrop { background: rgba(15,15,15,.34); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
  .sheet[open]::backdrop { animation: sheet-fade .4s ease both; }
  .sheet.closing::backdrop { animation: sheet-fade .3s ease reverse both; }
  @keyframes sheet-fade { from { opacity: 0; } }
  .sheet-card { position: relative; display: flex; flex-direction: column; min-height: min(680px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; background: #fff; color: var(--ink);
    border-radius: 34px; padding: clamp(44px, 6vw, 64px) clamp(26px, 5vw, 52px) clamp(28px, 4vw, 44px); box-shadow: 0 50px 140px -40px rgba(0,0,0,.5); }
  .sheet-card:focus { outline: none; }
  .sheet-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #efeff2; color: var(--ink); cursor: pointer; transition: background .2s; }
  .sheet-close:hover { background: #e2e2e7; }
  .sheet-close svg { width: 15px; height: 15px; }
  .sheet-eyebrow { display: block; font-size: 15px; color: var(--ink-40); margin-bottom: 14px; }
  .sheet-title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.028em; font-weight: 600; margin-bottom: 22px; }
  .sheet-text { font-size: 17px; line-height: 1.5; color: #3b3b40; }
  .sheet-text + .sheet-text { margin-top: 14px; }
  .sheet-figure { margin-top: auto; padding: 26px 20px 18px; border-radius: 22px; background: #f5f5f7; }
  .sheet-text:last-of-type { margin-bottom: 34px; }
  .sheet-diagram { display: block; width: 100%; height: auto; }

  /* ---------- nav ---------- */
  .nav {
    position: fixed; top: 24px; left: var(--gutter); right: var(--gutter); z-index: 50;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    pointer-events: none;
  }
  .nav > * { pointer-events: auto; }
  .nav-pill {
    display: flex; align-items: center;
    height: 64px; padding: 0 16px 0 22px; border-radius: 16px;
    background: rgba(232,232,232,.78);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .nav-logo { display: block; color: var(--ink); }
  .nav-logo svg { height: 30px; width: auto; display: block; }
  .nav-links {
    display: flex; gap: 26px; font-size: var(--t-small); color: var(--ink-1e);
    margin-left: 34px; overflow: hidden; max-width: 420px;
    transition: max-width .5s cubic-bezier(.65,0,.35,1), opacity .3s, margin .5s cubic-bezier(.65,0,.35,1);
  }
  .nav-links a { position: relative; }
  .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s; }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
  .nav.compact .nav-links { max-width: 0; opacity: 0; margin-left: 0; }
  .nav-left { position: relative; }
  .nav-cta {
    display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 11px 0 12px; border-radius: 16px;
    background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .nav-cta .login { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; font-size: var(--t-small); }

  /* burger → X, measured from cash.app: two 2px lines ±3px from centre, rotate to ±45° (0.45s), circle flips colour (0.3s) */
  .burger { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #0f0f0f; color: #fff; cursor: pointer;
    transition: background-color .3s ease-in-out, color .3s ease-in-out; }
  .burger span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: currentColor;
    transition: transform .45s cubic-bezier(0, .45, .25, 1); }
  .burger span:first-child { transform: translateY(-3px); }
  .burger span:last-child { transform: translateY(3px); }
  .burger:hover { background: #2a2a2d; }

  /* open state: header turns dark-mode over the black menu */
  .nav-pill, .nav-cta, .nav-logo, .nav-cta .login, .nav-cta .btn { transition: background-color .3s ease-in-out, color .3s ease-in-out, opacity .3s; }
  .menu-open .nav-pill, .menu-open .nav-cta { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-open .nav-logo { color: #fff; }
  .menu-open .nav-links { opacity: 0; pointer-events: none; }
  .menu-open .nav-cta .login { background: #fff; color: #0f0f0f; }
  .menu-open .nav-cta .btn-dark { background: var(--accent); color: #fff; }
  .menu-open .burger { background: #fff; color: #0f0f0f; }
  .menu-open .burger span:first-child { transform: rotate(45deg); }
  .menu-open .burger span:last-child { transform: rotate(-45deg); }

  /* ---------- 1. hero ---------- */
  .hero {
    position: relative; height: 100vh; min-height: 640px; overflow: hidden;
    background: linear-gradient(#d6d6d6 0%, #fafafa 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    text-align: center; padding-bottom: 11vh;
  }
  /* 3D hero: three.js keys (or a Spline scene if data-scene is set), keychain still as fallback */
  .hero-3d { position: absolute; left: 0; right: 0; top: 0; height: 72vh; min-height: 460px; }
  .hero-spline, .hero-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
  .hero-canvas { cursor: grab; touch-action: pan-y; }
  .hero-canvas.grabbing { cursor: grabbing; }
  .hero-3d.has-scene .hero-keys { animation: none; }
  .hero-keys {
    position: absolute; top: 0; left: 50%; width: min(620px, 78vw);
    transform-origin: 50% 0; translate: -50% 0;
    animation: swing 6s ease-in-out infinite;
    filter: drop-shadow(0 30px 30px rgba(0,0,0,.12));
  }
  .hero-keys img { width: 100%; height: auto; }
  .hero-keys .hero-mark { display: block; width: min(420px, 62vw); height: auto; margin: 14vh auto 0; color: var(--ink); }
  @keyframes swing { 0%,100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
  .hero-copy { position: relative; z-index: 1; }
  .hero .lead { margin-top: 26px; }
  .hero .btn { margin-top: 30px; }

  /* ---------- 2. logos ---------- */
  .logos { padding-block: 50px 30px; text-align: center; }
  .logos .body { margin-bottom: 44px; }
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-track .finish { flex: none; margin-right: 56px; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -.025em; color: var(--ink-1e); white-space: nowrap; }
  .marquee-track .finish::after { content: "✦"; display: inline-block; margin-left: 56px; font-size: .5em; vertical-align: .35em; color: var(--ink-30); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- 3. statement ---------- */
  .statement { position: relative; padding-top: 18vh; padding-bottom: var(--section); overflow-x: clip; }
  .statement-title { text-align: center; max-width: 1080px; margin-inline: auto; }
  .slot { display: inline-block; vertical-align: -.08em; width: .86em; height: .86em; margin: 0 .14em; border-radius: .2em; }
  /* timeline.png is the whole dark panel (shadow baked in, 1576x783); the tiles sit on its lower track */
  /* studio panel: header bar + a shelf of finish tiles the statement chips fly into */
  .tl-panel {
    position: relative; margin-top: 42vh; aspect-ratio: 1308 / 389; border-radius: 28px;
    background: linear-gradient(#161618, #0d0d0e); color: #9a9aa2;
    box-shadow: 0 50px 90px -40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
    font-size: clamp(9px, 1vw, 14px);
  }
  .tl-bar { position: absolute; left: 1.4%; right: 1.4%; top: 4.5%; height: 14%; display: flex; align-items: center; gap: 1.1em; }
  .tl-dots { display: inline-flex; gap: .45em; }
  .tl-dots i { width: .8em; height: .8em; border-radius: 50%; background: #2c2c30; }
  .tl-file, .tl-export, .tl-tabs b { display: inline-flex; align-items: center; gap: .45em; padding: .45em .8em; border-radius: .6em; white-space: nowrap; font-weight: 500; }
  .tl-file { background: #1d1d20; color: #e9e9ec; }
  .tl-tabs { display: flex; gap: .2em; margin-left: auto; }
  .tl-tabs b.on { background: #2a2a2f; color: #fff; }
  .tl-export { background: #fafafa; color: #0f0f0f; }
  .ic { width: 1.15em; height: 1.15em; flex: none; }
  .tl-tiles { position: absolute; left: 1.1%; right: 1.1%; bottom: 3.6%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6%; }
  .tl-tile { aspect-ratio: 1; border-radius: 22px; background: #1b1b1e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
  .flyer { position: absolute; left: 0; top: 0; overflow: hidden; z-index: 2; will-change: transform; background: var(--dark-2); }
  .flyer img, .flyer video { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- split layouts ---------- */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.6vw, 66px); align-items: center; }
  .split.end { align-items: end; }
  .copy { max-width: 560px; }

  /* blocks word: plain text, inflates on hover */
  .blocks-word { position: relative; display: inline-block; cursor: default; }
  .blocks-word .txt { transition: opacity .2s; }
  .blocks-word .glow { position: absolute; left: 50%; top: 50%; width: 130%; max-width: none; height: auto; translate: -50% -50%; opacity: 0; transition: opacity .35s; pointer-events: none; }
  .blocks-word .letters { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; pointer-events: none; }
  .blocks-word .letters img { height: .98em; width: auto; margin-right: -.08em; transform: scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
  .blocks-word .letters img:nth-child(2) { transition-delay: .04s; } .blocks-word .letters img:nth-child(3) { transition-delay: .08s; }
  .blocks-word .letters img:nth-child(4) { transition-delay: .12s; } .blocks-word .letters img:nth-child(5) { transition-delay: .16s; }
  .blocks-word .letters img:nth-child(6) { transition-delay: .2s; }
  .blocks-word:hover .txt { opacity: 0; }
  .blocks-word:hover .glow { opacity: 1; }
  .blocks-word:hover .letters img { transform: scale(1); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* library panel */
  .library { background: var(--dark); border-radius: var(--radius); padding: 16px; color: var(--on-dark-40); max-width: 640px; justify-self: end; width: 100%; }
  .library-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .chip { font-family: var(--font-label); font-size: 13px; line-height: 13px; padding: 8px 11px; border-radius: 9px; background: var(--dark-2); }
  .chip-x { width: 30px; height: 30px; border-radius: 9px; background: var(--dark-2); display: grid; place-items: center; }
  .library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dark-3); border-radius: 18px; overflow: hidden; }
  .library-cell { background: var(--dark); padding: 34px 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: pointer; }
  .library-cell video { width: 72%; aspect-ratio: 1; object-fit: cover; border-radius: 28px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .library-cell:hover video { transform: scale(1.05) rotate(-2deg); }
  .library-cell span { font-family: var(--font-label); font-size: var(--t-label); }

  /* inline gif chips */
  /* 3D liquid-glass icons (rendered by tools/studio.html → renderIcons()) */
  /* flat iOS 26-style liquid-glass icons (inline SVG) */
  .gif-chip { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; margin: 0 .1em; }
  .gif-chip svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .06em .1em rgba(30,40,90,.22)); }

  .media-card { border-radius: var(--radius); overflow: hidden; background: var(--dark); }
  .media-card video, .media-card img { width: 100%; height: 100%; object-fit: cover; }

  /* toolkit (sticky slide-over) */
  .toolkit { position: relative; height: 200vh; }
  .toolkit-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
  .toolkit-copy { position: relative; z-index: 1; max-width: 560px; }
  .toolkit-media {
    position: absolute; top: 50%; left: 0; z-index: 2;
    width: min(1308px, 90vw); aspect-ratio: 1308 / 736;
    border-radius: var(--radius); overflow: hidden; background: var(--dark);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.35);
    translate: 0 -50%; will-change: transform;
  }
  .toolkit-media video { width: 100%; height: 100%; }

  /* ---------- features ---------- */
  .row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
  .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .feature .media-card { aspect-ratio: 308 / 401; margin-bottom: 22px; border-radius: var(--radius-md); background: var(--card); }
  .feature h3 { font-size: var(--t-body); line-height: 1.16; margin-bottom: 8px; font-weight: 500; letter-spacing: -.01em; }
  .feature p { max-width: 290px; }
  .mobile-only { display: none; }

  /* ---------- accordion lists (create in 3 ways / get the look) ---------- */
  .stack-media { position: relative; aspect-ratio: 641 / 706; border-radius: var(--radius); overflow: hidden; background: var(--card); }
  .stack-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
  .stack-media > .on { opacity: 1; }
  .stack-media > div > video { width: 100%; height: 100%; object-fit: cover; }

  /* overlays on rendered media */
  .media-card { position: relative; }  /* .stack-media children are already absolutely positioned */
  .fx-pill { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px;
    background: rgba(255,255,255,.86); color: var(--ink); font-size: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -12px rgba(0,0,0,.35); }
  .fx-pill.dark { background: rgba(18,18,20,.72); color: #f1f1f3; }
  .fx-row { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
  .fx-row b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; padding: 7px 10px; border-radius: 10px;
    background: rgba(18,18,20,.66); color: #e9e9ec; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .fx-row b.on { background: #fafafa; color: var(--ink); }
  .fx-row.light b { background: rgba(255,255,255,.8); color: var(--ink); }
  .fx-row.light b.on { background: var(--ink); color: #fafafa; }

  /* slider panel (customizable + edit card) */
  @property --v { syntax: '<number>'; inherits: false; initial-value: .5; }
  .sliders { position: absolute; right: 16px; top: 16px; width: min(44%, 250px); padding: 14px; border-radius: 16px; display: grid; gap: 12px;
    background: rgba(20,20,22,.74); color: #d9d9de; font-size: 13px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
  .sliders .head { display: flex; align-items: center; gap: 8px; color: #fff; }
  .sliders .head span { margin-left: auto; color: #9a9aa2; }
  .sliders label { display: grid; gap: 7px; }
  .sliders i { position: relative; height: 4px; border-radius: 4px; background: #34343a; }
  .sliders i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #fafafa; }
  .sliders i::after { content: ""; position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 14px; height: 14px; border-radius: 50%; background: #fff; translate: -50% -50%; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
  .sliders i { animation: slide 5s ease-in-out infinite alternate; }
  .sliders label:nth-of-type(2) i { animation-duration: 6.5s; animation-delay: -2s; }
  .sliders label:nth-of-type(3) i { animation-duration: 4.2s; animation-delay: -1s; }
  @keyframes slide { from { --v: var(--a, .25); } to { --v: var(--b, .85); } }
  .swatches { display: flex; gap: 6px; }
  .swatches b { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
  .swatches b.on { outline: 2px solid #fff; outline-offset: 2px; }
  .sliders.compact { left: 14px; right: 14px; top: auto; bottom: 14px; width: auto; }

  /* prompt bar (describe) */
  .prompt { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px;
    background: rgba(255,255,255,.9); color: var(--ink); font-size: 15px; box-shadow: 0 16px 40px -18px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .prompt span { flex: 1; overflow: hidden; white-space: nowrap; }
  .prompt span::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--ink); animation: caret 1s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }
  .prompt b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; }

  /* brand library dashboard (toolkit) */
  .dash { position: absolute; inset: 0; display: grid; grid-template-columns: 19% 1fr; background: #0e0e10; color: #a4a4ab; font-size: clamp(8px, .95vw, 14px); }
  .dash-side { background: #141416; padding: 1.6em 1.1em; display: flex; flex-direction: column; gap: .35em; box-shadow: inset -1px 0 0 rgba(255,255,255,.05); }
  .dash-logo { display: flex; align-items: center; gap: .55em; color: #f3f3f5; font-weight: 600; font-size: 1.15em; margin-bottom: 1.2em; }
  .dash-mark { width: 1.7em; height: auto; }
  .dash-side a { display: flex; align-items: center; gap: .7em; padding: .6em .7em; border-radius: .6em; }
  .dash-side a.on { background: #222226; color: #fff; }
  .dash-plan { margin-top: auto; padding: .9em; border-radius: .8em; background: #1c1c20; color: #d4d4d9; line-height: 1.35; }
  .dash-plan b { display: block; color: #fff; font-weight: 600; margin-bottom: .2em; }
  .dash-main { padding: 1.6em 1.8em; display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
  .dash-top { display: flex; align-items: center; gap: .8em; }
  .dash-top h4 { font-size: 1.5em; font-weight: 500; color: #fff; letter-spacing: -.02em; margin-right: auto; }
  .dash-search, .dash-new { display: inline-flex; align-items: center; gap: .5em; padding: .6em .9em; border-radius: .7em; }
  .dash-search { background: #1b1b1e; min-width: 13em; }
  .dash-new { background: #fafafa; color: #0f0f0f; font-weight: 500; }
  .dash-tabs { display: flex; gap: .3em; }
  .dash-tabs b { font-weight: 500; padding: .45em .8em; border-radius: .6em; }
  .dash-tabs b.on { background: #222226; color: #fff; }
  .dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; min-height: 0; }
  .dash-grid figure { margin: 0; }
  .dash-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .8em; display: block; background: #1b1b1e; }
  .dash-grid figcaption { display: flex; justify-content: space-between; padding-top: .5em; color: #e9e9ec; }
  .dash-grid figcaption span { color: #7c7c84; }

  /* one logo, every format */
  /* embed code card */
  .code-card { width: 100%; height: 100%; border-radius: 18px; background: #0f0f11; color: #c9c9cf; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); font-size: clamp(11px, 1.05vw, 15px); }
  .code-top { display: flex; align-items: center; gap: 1em; padding: .9em 1.1em; color: #8a8a92; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); }
  .code-top .fps { margin-left: auto; color: #6ee7a8; display: inline-flex; align-items: center; gap: .4em; }
  .code-top .fps::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
  .code-card pre { margin: 0; padding: 1.2em 1.3em; font: 500 1em/1.75 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; overflow: hidden; }
  .c-tag { color: #ff7ab8; } .c-attr { color: #7cc4ff; } .c-str { color: #b7f08a; } .c-dim { color: #5c5c64; }
  .acc-item + .acc-item { margin-top: 8px; }
  .acc-trigger { display: block; width: 100%; color: var(--ink-30); transition: color .3s; }
  .acc-trigger:hover { color: var(--ink-50); }
  .acc-item.open .acc-trigger { color: var(--ink-1e); }
  .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.65,0,.35,1); }
  .acc-panel > div { overflow: hidden; }
  .acc-item.open .acc-panel { grid-template-rows: 1fr; }
  .acc-panel p { padding: 16px 0 22px; max-width: 360px; }

  .look .acc-trigger { font-size: clamp(26px, 2.9vw, 42px); line-height: 1.04; }
  .look .acc-trigger em { white-space: nowrap; }
  .look .acc-trigger em { font-style: normal; color: var(--ink-40); }
  .look .acc-item.open .acc-trigger em { color: var(--ink-40); }
  .look .acc-trigger { color: var(--ink-1e); }
  .look-thumbs { display: flex; gap: 10px; align-items: center; padding: 18px 0 14px; }
  .look-thumb { width: 70px; height: 70px; border-radius: 16px; overflow: hidden; background: var(--dark); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
  .look-thumb.on { outline-color: var(--ink); }
  .look-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .look-thumbs .icon-btn { width: 36px; height: 36px; margin-left: 6px; }
  .look .after { margin-top: 36px; }

  /* ---------- templates ---------- */
  .center-head { text-align: center; max-width: 900px; margin: 0 auto clamp(40px, 5vw, 72px); }
  .tray { background: var(--card); border-radius: var(--radius); padding: clamp(36px, 4vw, 60px) 0 clamp(32px, 3.4vw, 48px); overflow: hidden; }
  .tray-track { display: flex; align-items: center; gap: 28px; width: max-content; will-change: transform; }
  .tpl { flex: 0 0 auto; width: clamp(170px, 15vw, 216px); display: block; padding: 10px; border-radius: 22px; transition: background-color .35s ease; }
  .tpl .vid { width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #dcdcdc; }
  .tpl video { width: 100%; height: 100%; }
  .tpl .meta { padding: 12px 2px 0; }
  .tpl .name { font-size: var(--t-small); line-height: 1.25; }
  .tpl .cat { font-size: 14px; color: var(--ink-40); }
  .tpl.active { background: #fafafa; }
  .tray-foot { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }

  /* ---------- accelerate + double block ---------- */
  .accel-media { aspect-ratio: 1; background: var(--card); }
  .double { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .dcard { background: var(--card); border-radius: var(--radius); padding: clamp(28px, 3.5vw, 50px); display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
  .dcard-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
  .dcard-media { position: relative; aspect-ratio: 641 / 439; display: grid; place-items: center; }
  .dcard-media img, .dcard-media video { width: 100%; height: 100%; object-fit: contain; }
  .dcard-media > video { object-fit: cover; border-radius: 18px; }
  .dcard-media .layer { position: absolute; inset: 0; }
  .dcard p { max-width: 460px; }

  /* ---------- footer ---------- */
  .footer { background: var(--card); border-radius: var(--radius) var(--radius) 0 0; padding-top: clamp(56px, 6vw, 90px); margin-top: var(--section); }
  .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)) 1fr; gap: 32px; }
  .footer-cols h4 { font-family: var(--font-label); font-weight: 500; font-size: 14px; color: var(--ink-50); margin-bottom: 18px; }
  .footer-cols ul { list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: var(--t-small); color: var(--ink-1e); }
  .footer-cols a:hover { color: var(--ink-50); }
  .footer-cols .legal { justify-self: end; min-width: 160px; }
  .wordmark { display: block; margin-top: clamp(48px, 6vw, 96px); width: 100%; height: auto; color: var(--ink); }
  .footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 30px; font-size: 14px; color: var(--ink-40); }
  .footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }

  /* ---------- liquid glass dock: progressive blur + a gentle refraction along the bottom edge ---------- */
  .glass-dock { position: fixed; left: 0; right: 0; bottom: 0; height: clamp(96px, 15vh, 160px); z-index: 40; pointer-events: none; transition: opacity .5s ease; }
  .glass-dock.hide { opacity: 0; }
  .glass-dock > * { position: absolute; inset: 0; }
  /* refraction first, so the blur layers above soften the warped image like thick glass */
  .gd-b1, .gd-b2, .gd-b3, .gd-b4 { -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); -webkit-mask-image: var(--m); mask-image: var(--m); }
  .gd-b1 { --b: 1px;  --m: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%); }
  .gd-b2 { --b: 3px;  --m: linear-gradient(to bottom, transparent 25%, #000 50%, #000 100%); }
  .gd-b3 { --b: 7px;  --m: linear-gradient(to bottom, transparent 50%, #000 75%, #000 100%); }
  .gd-b4 { --b: 14px; --m: linear-gradient(to bottom, transparent 75%, #000 100%); }
  /* a whisper of milky tint and a soft specular sheen keep it reading as glass, not fog */
  .gd-tint { background: linear-gradient(to bottom, rgba(250,250,250,0) 0%, rgba(250,250,250,.16) 70%, rgba(250,250,250,.32) 100%); }
  /* no mix-blend-mode here: in Chromium it isolates the dock and the blur layers would see an empty backdrop */
  .gd-sheen { background: radial-gradient(120% 140% at 50% 125%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%); }
  @media (prefers-reduced-transparency: reduce) { .glass-dock { display: none; } }

  /* ---------- smooth scroll (lenis.css) ---------- */
  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

  /* ---------- motion: split text + reveals (states are driven from JS) ---------- */
  .st-wrap .word, .st-wrap .unit { display: inline-block; }
  .st-wrap .line { display: block; }
  .js-anim :is(.h1, .h2, .h3, .look .acc-trigger, .eyebrow, .lead, main p.body, main p.small, .feature h3):not(.is-split):not(.no-split):not(.acc-panel *):not(.tpl *) { visibility: hidden; }
  .js-anim .rv, .js-anim [data-hero] .btn { opacity: 0; }

  /* ---------- responsive ---------- */
  @media (max-width: 1000px) {
    .nav-links { display: none; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-cols { grid-template-columns: repeat(3, 1fr); }
    .footer-cols .legal { justify-self: start; }
  }
  @media (max-width: 760px) {
    .nav { top: 12px; }
    .nav-pill, .nav-cta { height: 54px; }
    .nav-cta .login { display: none; }
    .hero { padding-bottom: 12vh; }
    .split, .double { grid-template-columns: 1fr; }
    .split .first-mobile { order: -1; }
    .library { justify-self: stretch; }
    .row-head { flex-direction: column; align-items: flex-start; }
    .row-head .btn { display: none; }
    .mobile-only { display: flex; margin-top: 32px; }
    .feature-grid { grid-template-columns: 1fr; }
    .tl-tiles { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .tl-tile { border-radius: 8px; }
    .tl-panel { margin-top: 28vh; border-radius: 14px; }
    .tl-tabs, .tl-dots { display: none; }
    .tl-export { margin-left: auto; }
    .toolkit { height: auto; padding-block: var(--section); }
    .toolkit-sticky { position: static; height: auto; flex-direction: column; align-items: stretch; gap: 40px; overflow: visible; }
    .toolkit-media { position: relative; top: auto; translate: none; width: 100%; transform: none !important; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; gap: 6px; }
    .dash { grid-template-columns: 1fr; font-size: 10px; }
    .dash-side, .dash-search, .dash-tabs b:nth-child(n+3), .dash-grid figcaption span { display: none; }
    .dash-main { padding: 1.4em; }
    .dash-grid { grid-template-columns: repeat(3, 1fr); }
    .sliders { width: 52%; font-size: 12px; padding: 12px; gap: 9px; }
    .fx-row b { font-size: 12px; padding: 6px 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .rv { opacity: 1; transform: none; }
  }

  /* ---------- feature pages (tools/build_pages.py) ---------- */
  .page-hero { max-width: 1080px; margin: 0 auto; padding: clamp(150px, 22vh, 230px) var(--gutter) clamp(30px, 5vw, 70px); text-align: center; }
  .page-title { font-size: clamp(46px, 6.4vw, 104px); }
  .page-hero .lead { margin: 24px auto 0; max-width: 640px; color: #3b3b40; }
  .page-hero .btn { margin-top: 32px; }
  .page-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 110px); max-width: 1320px; margin: 0 auto; padding: clamp(40px, 6vw, 90px) var(--gutter); }
  .page-row.flip .page-media { order: -1; }
  .page-copy { max-width: 500px; }
  .page-row:not(.flip) .page-copy { justify-self: end; }
  .page-copy .body { margin-top: 20px; color: #3b3b40; }
  .page-copy ul { margin-top: 22px; list-style: none; display: grid; gap: 10px; font-size: var(--t-small); color: #3b3b40; }
  .page-copy li { display: flex; gap: 10px; align-items: baseline; }
  .page-copy li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
  .page-media { position: relative; overflow: hidden; aspect-ratio: 1 / 1.05; border-radius: var(--radius); background: var(--card); }
  .page-media video, .page-media img { width: 100%; height: 100%; object-fit: cover; }
  .page-media .code-card { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
  .page-cta { text-align: center; padding: clamp(90px, 11vw, 160px) var(--gutter) 0; }
  .page-cta .h3 { max-width: 760px; margin: 0 auto; }
  .page-cta .row { display: flex; justify-content: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
  @media (max-width: 760px) {
    .page-row { grid-template-columns: 1fr; gap: 28px; }
    .page-row .page-media { order: -1; }
    .page-row:not(.flip) .page-copy { justify-self: start; }
  }

  /* ---------- per-section text moments (home) ---------- */
  .library-cell { border: 0; color: inherit; font: inherit; text-align: center; transition: background-color .3s; }
  .library-cell span { transition: color .3s; }
  .library-cell.on { background: #18181b; }
  .library-cell.on span { color: #fff; }
  .kw-finish .ch { display: inline-block; transform-origin: 50% 70%; }
  /* balloon: glossy, inflated letters */
  .fx-balloon .kw-finish .ch { background: linear-gradient(170deg, #ff9cc5 0%, #ff2f86 42%, #c4105f 78%, #8f0844 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 .06em .05em rgba(143,8,68,.35)); }
  /* neon: the finish list lights up */
  .fx-neon .kw-list .word { color: #ff2fa8; text-shadow: 0 0 1px #fff, 0 0 .12em #ff2fa8, 0 0 .32em rgba(255,47,168,.75), 0 0 .7em rgba(255,47,168,.45); animation: neon-flicker 3s steps(1) infinite; }
  .fx-neon .kw-list .word:nth-child(3n) { animation-delay: -1.1s; }
  @keyframes neon-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .55; } 9% { opacity: 1; } 47% { opacity: .8; } 48% { opacity: 1; } }
  /* holographic: shimmering foil type */
  .fx-holo .kw-list .word, .fx-holo .kw-finish .ch { background: linear-gradient(100deg, #7a5cff, #2fd2ff, #3dffb0, #ffd23d, #ff5fa2, #7a5cff); background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo-shift 3s linear infinite; }
  @keyframes holo-shift { to { background-position: 300% 0; } }
  /* make it yours: depth extrudes, shine sweeps (driven by scroll in the home script) */
  .kw-depth, .kw-lift, .kw-flat { display: inline-block; }
  .kw-shine .word { background-image: linear-gradient(100deg, var(--ink) 0 36%, #9fb4ff 45%, #fff 50%, #9fb4ff 55%, var(--ink) 64% 100%);
    background-size: 320% 100%; background-position: calc(100% - var(--p, 0) * 100%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
  .js-anim .kw-flat { transform: scaleY(.16); transform-origin: 50% 82%; }
  @media (prefers-reduced-motion: reduce) { .fx-neon .kw-list .word, .fx-holo .kw-list .word { animation: none; } }

  /* ---------- pricing ---------- */
  .billing { display: flex; width: max-content; margin: 0 auto clamp(32px, 4vw, 52px); padding: 4px; gap: 4px; border-radius: 999px; background: var(--card); }
  .billing button { height: 40px; padding: 0 18px; border-radius: 999px; font-size: 15px; color: var(--ink-50); display: inline-flex; align-items: center; gap: 8px; transition: background-color .25s, color .25s, box-shadow .25s; }
  .billing button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
  .billing .save { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: #dff6e6; color: #146c34; }
  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .plan { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 30px 28px 32px; border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
  .plan h3 { font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
  .plan-tag { font-size: 15px; color: var(--ink-40); margin-top: 6px; }
  .price { display: flex; align-items: baseline; gap: 8px; min-height: 64px; flex-wrap: wrap; }
  .price .amt { font-size: clamp(44px, 4.2vw, 60px); letter-spacing: -.04em; line-height: 1; display: inline-block; font-variant-numeric: tabular-nums; }
  .price .per { font-size: 15px; color: var(--ink-40); }
  .price .billed { flex-basis: 100%; font-size: 13.5px; color: var(--ink-40); min-height: 18px; }
  .plan .btn { justify-content: center; height: 48px; border-radius: 14px; }
  .plan-feats { list-style: none; display: grid; gap: 12px; font-size: 15.5px; line-height: 1.35; }
  .plan-feats li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
  .plan-feats li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #0f0f0f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/12px no-repeat; }
  .plan-feats .lead-in { font-size: 13.5px; color: var(--ink-40); grid-template-columns: 1fr; }
  .plan-feats .lead-in::before { display: none; }
  /* Pro: dark card with a slow light sweep around its edge */
  @property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .plan-pro { background: #0b0b0c; color: #f2f2f2; box-shadow: none; isolation: isolate; }
  .plan-pro::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: calc(var(--radius) + 1.5px);
    background: conic-gradient(from var(--spin), #2a2a2e 0 55%, #9fb4ff 70%, #ffd1f0 78%, #fff3c4 84%, #2a2a2e 95%); animation: plan-spin 7s linear infinite; }
  .plan-pro::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius); background: #0b0b0c; }
  @keyframes plan-spin { to { --spin: 360deg; } }
  .plan-pro .plan-tag, .plan-pro .price .per, .plan-pro .price .billed, .plan-pro .plan-feats .lead-in { color: #8d8d93; }
  .plan-pro .plan-feats li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E"); }
  .plan-pro .btn-light { background: #fff; }
  .plan-badge { position: absolute; top: 26px; right: 24px; font-size: 12.5px; padding: 5px 10px; border-radius: 999px;
    background: #fff; color: #0f0f0f; }
  .early-note { max-width: 640px; margin: calc(-1 * clamp(12px, 2vw, 26px)) auto clamp(28px, 3.5vw, 44px); padding: 14px 18px; border-radius: 16px;
    background: var(--card); font-size: 15px; line-height: 1.45; color: rgba(15,15,15,.62); text-align: center; }
  .early-note b { color: var(--ink); font-weight: 500; }
  .soon-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; line-height: 18px; vertical-align: 1px;
    background: var(--card); color: var(--ink-50); }
  .plan-pro .soon-tag { background: #232327; color: #a6a6ad; }
  .plan .btn-soon { cursor: default; opacity: .55; pointer-events: none; }
  .plans-note { text-align: center; margin-top: 28px; font-size: 15px; color: var(--ink-40); }
  .plans-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 1000px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
  @media (prefers-reduced-motion: reduce) { .plan-pro::before { animation: none; } }

  /* pricing page: comparison + FAQ */
  .compare-wrap { overflow-x: auto; border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
  .compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; }
  .compare th, .compare td { padding: 16px 22px; text-align: left; border-bottom: 1px solid rgba(0,0,0,.06); }
  .compare thead th { font-weight: 500; font-size: 17px; padding-top: 24px; }
  .compare tbody th { font-weight: 400; color: var(--ink-50); }
  .compare tr:last-child > * { border-bottom: 0; }
  .compare td:last-child, .compare th:last-child { background: #f7f7fb; }
  .compare .no { color: var(--ink-30); }
  .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
  .faq details { border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; font-size: 18px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--ink-40); transition: transform .5s cubic-bezier(.16,1,.3,1), color .2s; }
  .faq summary:hover::after { color: var(--ink); }
  .faq details[open]:not(.closing) summary::after { transform: rotate(45deg); }
  .faq .faq-a { overflow: hidden; }
  .faq details p { padding: 0 26px 24px; font-size: 16px; line-height: 1.5; color: #3b3b40; max-width: 680px; }

  /* ---------- yozhik AI ---------- */
  .ai { background: #000; color: #f2f2f2; border-radius: calc(var(--radius) + 8px); padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 80px); overflow: hidden; position: relative; }
  .ai .center-head { position: relative; }
  .ai .eyebrow { color: #8d8d93; }
  .ai .h2 { color: #f2f2f2; }
  .ai-sub { font-size: var(--t-body); color: #a5a5ab; margin-top: 18px; }
  .soon { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; line-height: 1.4; vertical-align: 1px; background: #fff; color: #0f0f0f; }
  .ai-prompt { position: relative; display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; padding: 8px 8px 8px 22px; border-radius: 22px;
    background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .ai-prompt:focus-within { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
  .ai-prompt svg.spark { width: 20px; height: 20px; flex: none; color: #c9d6ff; }
  .ai-prompt input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: #fff; font: inherit; font-size: 17px; outline: none; }
  .ai-prompt input::placeholder { color: #8d8d93; }
  .ai-prompt .btn { height: 48px; border-radius: 15px; background: #fff; color: var(--ink); }
  .ai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: 760px; }
  .ai-chips button { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: #c8c8cd; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background-color .2s, color .2s; }
  .ai-chips button:hover { background: rgba(255,255,255,.12); color: #fff; }
  .ai-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(36px, 4vw, 56px); position: relative; }
  .ai-tile { border-radius: 22px; overflow: hidden; background: #18181a; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
  .ai-tile video { width: 100%; aspect-ratio: 1; }
  .ai-tile p { padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.3; color: #a5a5ab; }
  .ai-results.is-picking .ai-tile { opacity: .45; }
  .ai-results.is-picking .ai-tile.is-on { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
  .ai-free { text-align: center; margin-top: 26px; font-size: 14px; color: #8d8d93; }
  .ai-free b { color: #f2f2f2; font-weight: 500; }
  @media (max-width: 760px) {
    .ai-results { grid-template-columns: 1fr 1fr; }
    .ai-prompt { padding-left: 16px; }
    .ai-prompt .btn span { display: none; }
  }

  /* ---------- sign up / log in ---------- */
  .auth { border: 0; padding: 0; margin: auto; background: transparent; width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: visible; }
  .auth::backdrop { background: rgba(15,15,15,.4); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
  .auth[open]::backdrop { animation: sheet-fade .4s ease both; }
  .auth.closing::backdrop { animation: sheet-fade .3s ease reverse both; }
  .auth-card { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; min-height: min(640px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); border-radius: 36px; overflow: hidden; background: #fff; }
  .auth-art { position: relative; background: #050505; color: #fff; overflow: hidden; }
  .auth-art { background: #0b0b0b; }
  .auth-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .auth-art-top { position: absolute; left: 28px; right: 28px; top: 26px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .auth-art-top svg { height: 24px; width: auto; }
  .auth-plan { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .auth-plan[hidden] { display: none; }
  .auth-main { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 56px clamp(24px, 4.5vw, 64px) 36px; overflow-y: auto; }
  .auth-close { position: absolute; top: 18px; right: 18px; z-index: 2; }
  .auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 240px; padding: 4px; border-radius: 999px; background: #f1f1f3; }
  .auth-tabs button { position: relative; z-index: 1; height: 36px; text-align: center; border-radius: 999px; font-size: 14.5px; color: var(--ink-50); transition: color .3s; }
  .auth-tabs button[aria-selected="true"] { color: var(--ink); }
  .auth-tabs .pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
  .auth[data-mode="login"] .auth-tabs .pill { transform: translateX(100%); }
  .auth-title { font-size: clamp(30px, 3vw, 40px); line-height: 1.02; letter-spacing: -.03em; font-weight: 500; }
  .auth-sub { font-size: 16px; color: var(--ink-40); margin-top: -8px; }
  .auth-flow { display: contents; }
  .auth[data-mode="account"] .auth-flow { display: none; }
  .auth[data-mode="reset"] :is(.auth-tabs, .auth-social, .auth-or, [data-field="email"], .auth-terms, .auth-switch) { display: none; }
  .auth[data-mode="reset"] [data-only="reset"] { display: revert; }
  .auth-social { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .auth-provider { height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: background-color .2s; }
  .auth-provider:hover { background: #f6f6f8; }
  .auth-provider svg { width: 18px; height: 18px; }
  .auth-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; font-size: 13.5px; color: var(--ink-40); }
  .auth-or::before, .auth-or::after { content: ""; height: 1px; background: rgba(0,0,0,.1); }
  .auth-form { display: grid; gap: 12px; }
  .field { display: grid; gap: 6px; font-size: 14px; color: var(--ink-50); }
  .field input { height: 52px; width: 100%; padding: 0 16px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; color: var(--ink); background: #f4f4f6; box-shadow: inset 0 0 0 1px transparent; outline: none; transition: box-shadow .2s, background-color .2s; }
  .field input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
  .field.invalid input { box-shadow: inset 0 0 0 1.5px #d6322a; }
  .field-error { font-size: 13px; color: #b4281f; min-height: 0; }
  .pw { position: relative; }
  .pw input { padding-right: 52px; }
  .pw-toggle { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-50); }
  .pw-toggle:hover { color: var(--ink); background: rgba(0,0,0,.05); }
  .pw-toggle svg { width: 18px; height: 18px; }
  .auth-forgot { justify-self: end; font-size: 14px; color: var(--ink-50); margin-top: -4px; }
  .auth-forgot:hover { color: var(--ink); }
  .auth-submit { justify-content: center; height: 52px; border-radius: 14px; font-size: 16px; margin-top: 4px; }
  .auth-msg { font-size: 14px; line-height: 1.4; padding: 12px 14px; border-radius: 14px; background: #f1f4ff; color: #263b8a; }
  .auth-msg:empty { display: none; }
  .auth-msg.is-error { background: #fdecea; color: #9b1c13; }
  .auth-msg.is-ok { background: #e8f6ee; color: #14532d; }
  .auth-provider[aria-busy="true"], .auth-submit[aria-busy="true"] { opacity: .6; pointer-events: none; }
  .auth[data-mode="account"] [data-only="account"] { display: grid; gap: 18px; justify-items: start; }
  .auth-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 26px; font-weight: 500; color: #fff; background: var(--ink); }
  .auth-avatar img, .nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .auth-email { font-weight: 500; color: var(--ink); word-break: break-all; }
  .auth-account-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .auth-account-actions .btn { height: 48px; border-radius: 14px; padding: 0 24px; }
  .nav .login.is-signed-in { display: inline-flex; align-items: center; gap: 8px; }
  .nav .login .nav-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 12.5px;
    background: var(--ink); color: #fff; }
  .auth-terms, .auth-switch { font-size: 13.5px; color: var(--ink-40); line-height: 1.4; }
  .auth-terms a, .auth-switch button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .auth [data-only] { display: none; }
  .auth[data-mode="signup"] [data-only="signup"], .auth[data-mode="login"] [data-only="login"] { display: revert; }
  @media (max-width: 820px) {
    .auth { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; }
    .auth-card { grid-template-columns: 1fr; grid-template-rows: 150px 1fr; border-radius: 30px 30px 0 0; min-height: 0; max-height: calc(100dvh - 24px); }
    .auth-art-top { top: 14px; left: 16px; right: auto; }
    .auth-art-top svg { display: none; }
    .auth-art video { object-position: 50% 38%; }
    .auth-main { justify-content: flex-start; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); }
    .auth-close { top: 14px; right: 14px; background: rgba(255,255,255,.85); }
  }

  /* ---------- cookie notice ---------- */
  .cookie { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: min(400px, calc(100vw - 24px)); padding: 22px; border-radius: 28px;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 18px 50px rgba(0,0,0,.12); color: var(--ink); }
  .cookie[hidden] { display: none; }
  .cookie-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .cookie-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #f3efe6; flex: none; }
  .cookie-icon svg { width: 22px; height: 22px; }
  .cookie h2 { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
  .cookie p { font-size: 14.5px; line-height: 1.45; color: #4a4a50; }
  .cookie p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .cookie-prefs { display: grid; gap: 4px; margin-top: 14px; }
  .cookie-prefs[hidden] { display: none; }
  .cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 16px; background: #f5f5f7; cursor: pointer; }
  .cookie-row b { display: block; font-size: 14.5px; font-weight: 500; }
  .cookie-row small { display: block; font-size: 13px; color: var(--ink-40); margin-top: 2px; line-height: 1.3; }
  .switch { position: relative; flex: none; }
  .switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .switch span { display: block; width: 42px; height: 26px; border-radius: 999px; background: rgba(0,0,0,.15); transition: background-color .25s; }
  .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .switch input:checked + span { background: var(--ink); }
  .switch input:checked + span::after { transform: translateX(16px); }
  .switch input:disabled + span { opacity: .45; }
  .switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .cookie-actions .btn { justify-content: center; height: 44px; border-radius: 14px; font-size: 15px; }
  .cookie-actions .wide { grid-column: 1 / -1; }
  .cookie-actions [hidden] { display: none; }
  .cookie-actions .btn-light { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
  @media (max-width: 760px) { .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; } }

  /* ---------- legal pages ---------- */
  .legal-date { margin-top: 14px; font-size: 14px; color: var(--ink-40); }
  .legal { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(32px, 6vw, 96px); justify-content: center; padding-bottom: var(--section); }
  .legal-toc { position: sticky; top: 110px; align-self: start; font-size: 14.5px; }
  .legal-toc p { color: var(--ink-40); margin-bottom: 12px; }
  .legal-toc ol { list-style: none; display: grid; gap: 9px; }
  .legal-toc a { color: var(--ink-50); transition: color .2s; }
  .legal-toc a:hover { color: var(--ink); }
  .legal-body section { padding: 36px 0; border-top: 1px solid rgba(0,0,0,.07); scroll-margin-top: 100px; }
  .legal-body section:first-child { border-top: 0; padding-top: 0; }
  .legal-body h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.015em; margin-bottom: 16px; }
  .legal-body p, .legal-body li { font-size: 16.5px; line-height: 1.6; color: #34343a; }
  .legal-body p + p, .legal-body ul + p, .legal-body p + ul { margin-top: 14px; }
  .legal-body ul { padding-left: 20px; display: grid; gap: 10px; }
  .legal-body b { font-weight: 500; color: var(--ink); }
  .legal-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .legal-other { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(0,0,0,.07); }
  @media (max-width: 900px) { .legal { grid-template-columns: 1fr; } .legal-toc { position: static; } }

  /* ---------- every page fades in on load (opacity only: a transform here would unpin the fixed nav and dock) ---------- */
  @keyframes page-in { from { opacity: 0; } }
  body { animation: page-in .7s cubic-bezier(.4, 0, .2, 1) both; }
  @media (prefers-reduced-motion: reduce) { body { animation: none; } }