/* Shared design system for Hongguo Downloader site — extracted from the homepage so /Browse and /whatsnew match it. */
  /* ============================ tokens — extended from the app's "red fruit" identity ============================ */
  :root{
    /* LIGHT (default) — the app's "warm paper" theme */
    --ground:#faf6f1; --ground-2:#f1e9df; --ground-3:#fffaf4;
    --surface:#ffffff; --surface-2:#f6efe8; --surface-3:#ece2d8;
    --ink:#241a13; --ink-2:#5c4d42; --muted:#93816f; --faint:#b6a89b;
    --line:#ece0d5; --line-2:#e4d8cb;
    --accent:#ef4d16; --accent-2:#ff9426; --on-accent:#ffffff;
    --teal:#0fae9f; --teal-2:#0fbccb;
    --good:#2ba459; --gold:#cf8f26;
    --glow:rgba(239,77,22,.18); --glow-2:rgba(255,148,38,.15); --glow-teal:rgba(15,174,159,.16);
    --ring:rgba(239,77,22,.5);
    --shadow:0 40px 80px -38px rgba(120,60,20,.30), 0 12px 30px -18px rgba(120,60,20,.16);
    --shadow-sm:0 14px 34px -20px rgba(120,60,20,.22);
    --font-display:"SF Pro Display","Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    --font-ui:"SF Pro Text","Segoe UI",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    --font-mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,monospace;
    --maxw:min(2760px, 96vw);   /* edge-to-edge: fills the window with minimal side margins, capped only for ultra-wide screens */
  }
  :root[data-theme="dark"]{
    /* DARK — the app's "warm dark" theme */
    --ground:#140f0b; --ground-2:#0e0a07; --ground-3:#1b130d;
    --surface:#211812; --surface-2:#2a1f17; --surface-3:#34251a;
    --ink:#f7efe7; --ink-2:#d6c6b6; --muted:#9c8a7b; --faint:#6f6155;
    --line:#33281e; --line-2:#45362651;
    --accent:#ff6a2b; --accent-2:#ffb14a; --on-accent:#1c0e06;
    --teal:#24ddcf; --teal-2:#22d6e6;
    --good:#43d98a; --gold:#e0ad45;
    --glow:rgba(255,106,43,.30); --glow-2:rgba(255,177,74,.18); --glow-teal:rgba(36,221,207,.20);
    --ring:rgba(255,130,70,.55);
    --shadow:0 40px 90px -34px rgba(0,0,0,.85), 0 10px 30px -18px rgba(0,0,0,.6);
    --shadow-sm:0 14px 34px -18px rgba(0,0,0,.7);
  }
  html{ color-scheme:light dark; }
  /* seamless theme switch */
  body, header.nav, section, .btn, .window .frame, .shot, .stripshot, .spec, .card, .plan, .faqi, .cmp {
    transition: background-color .35s ease, border-color .35s ease, color .25s ease, box-shadow .35s ease;
  }
  /* screenshots switch WITH the theme (light shot in light, dark shot in dark) */
  .shot-dark{ display:none; }
  :root[data-theme="dark"] .shot-light{ display:none; }
  :root[data-theme="dark"] .shot-dark{ display:block; }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font:400 16px/1.6 var(--font-ui);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  ::selection{ background:var(--accent); color:var(--on-accent); }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }

  .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,3.5vw,40px); }
  /* fluid layout stretches the visuals to the window, but keep running text readable */
  .hero p, .head p, .wn-foot, .rel-row p, .show .copy p{ max-width:74ch; }
  .head.center p{ margin-left:auto; margin-right:auto; }
  .eyebrow{ font:700 11.5px/1 var(--font-mono); letter-spacing:.26em; text-transform:uppercase; color:var(--accent-2); }
  .grad-text{ background:linear-gradient(105deg,var(--accent) 0%,var(--accent-2) 42%,var(--teal) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

  /* ============================ buttons ============================ */
  .btn{ display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer; text-decoration:none;
        font:700 15px/1 var(--font-ui); color:var(--ink); background:var(--surface-2);
        padding:15px 22px; border-radius:999px; white-space:nowrap; transition:transform .12s ease, filter .15s, border-color .15s, color .15s; }
  .btn:hover{ transform:translateY(-2px); }
  .btn:active{ transform:translateY(0); }
  .btn.primary{ color:var(--on-accent); background:linear-gradient(115deg,var(--accent),var(--accent-2));
                box-shadow:0 16px 34px -12px var(--glow); }
  .btn.primary:hover{ filter:brightness(1.05); }
  .btn.ghost{ background:transparent; border:1px solid var(--line-2); color:var(--ink-2); }
  .btn.ghost:hover{ border-color:var(--ring); color:var(--ink); }
  .btn.lg{ font-size:16.5px; padding:17px 30px; border-radius:999px; }
  .btn .ar{ font-size:13px; opacity:.8; }

  /* ============================ sticky nav ============================ */
  header.nav{ position:sticky; top:0; z-index:60; backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
              background:color-mix(in oklab, var(--ground) 74%, transparent); border-bottom:1px solid transparent; transition:border-color .2s; }
  header.nav.scrolled{ border-bottom-color:var(--line); }
  .nav .row{ display:flex; align-items:center; gap:16px; height:66px; }
  .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
  .brand .mark{ width:34px; height:34px; flex:none; filter:drop-shadow(0 4px 10px var(--glow)); }
  .brand .nm{ font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:-.01em; }
  .brand .nm .cn{ color:var(--accent-2); }
  .nav .spacer{ margin-left:auto; }
  .nav .links{ display:flex; gap:26px; align-items:center; }
  .nav .links a{ text-decoration:none; color:var(--ink-2); font-size:14.5px; font-weight:600; transition:color .15s; }
  .nav .links a:hover{ color:var(--ink); }
  @media (max-width:760px){ .nav .links{ display:none; } }
  .themetoggle{ width:40px; height:40px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
    font-size:17px; line-height:1; cursor:pointer; display:grid; place-items:center; flex:none;
    transition:border-color .15s, color .15s, background-color .3s, transform .1s; }
  .themetoggle:hover{ border-color:var(--ring); color:var(--accent); }
  .themetoggle:active{ transform:scale(.94); }

  /* ============================ hero ============================ */
  .hero{ position:relative; overflow:hidden; padding:76px 0 40px; }
  .aura{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .aura b{ position:absolute; border-radius:50%; filter:blur(80px); }
  .aura b:nth-child(1){ width:60vw; height:60vw; top:-24vw; right:-14vw; background:radial-gradient(circle at 42% 42%,var(--glow),transparent 66%); animation:drift1 28s ease-in-out infinite; }
  .aura b:nth-child(2){ width:48vw; height:48vw; bottom:-22vw; left:-16vw; background:radial-gradient(circle at 50% 50%,var(--glow-teal),transparent 64%); animation:drift2 34s ease-in-out infinite; }
  @keyframes drift1{ 50%{ transform:translate(-4vw,4vw) scale(1.08); } }
  @keyframes drift2{ 50%{ transform:translate(4vw,-3vw) scale(1.06); } }

  /* vertical short-drama poster marquee — the structural motif */
  .marquee{ position:absolute; inset:0; z-index:0; display:flex; gap:20px; justify-content:center; opacity:.4;
            -webkit-mask-image:radial-gradient(120% 90% at 50% 22%, #000 30%, transparent 78%);
                    mask-image:radial-gradient(120% 90% at 50% 22%, #000 30%, transparent 78%); pointer-events:none; }
  .mcol{ display:flex; flex-direction:column; gap:20px; width:150px; flex:none; animation:mup 44s linear infinite; }
  .mcol.down{ animation-name:mdown; }
  .mcol.s2{ animation-duration:60s; } .mcol.s3{ animation-duration:52s; } .mcol.s4{ animation-duration:68s; }
  .ptile{ width:150px; aspect-ratio:2/3; border-radius:14px; box-shadow:var(--shadow-sm); }
  @keyframes mup{ to{ transform:translateY(-50%); } }
  @keyframes mdown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
  .hero .scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
                background:linear-gradient(180deg, color-mix(in oklab,var(--ground) 40%,transparent) 0%, color-mix(in oklab,var(--ground) 78%,transparent) 55%, var(--ground) 100%); }

  .hero .inner{ position:relative; z-index:2; text-align:center; padding-top:18px; }
  .hero h1{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1.02;
            font-size:clamp(38px,6.6vw,74px); margin:20px auto 0; max-width:16ch; text-wrap:balance; }
  .hero p.sub{ color:var(--ink-2); font-size:clamp(16px,2.1vw,20px); line-height:1.55; max-width:60ch; margin:20px auto 0; }
  .cta{ display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:32px; }
  .cta .fineprint{ width:100%; color:var(--faint); font:500 13px/1.5 var(--font-mono); margin-top:4px; }
  .cta .fineprint b{ color:var(--muted); font-weight:600; }

  /* hero app window */
  .window{ position:relative; z-index:2; margin:52px auto 0; max-width:1000px; }
  .window .frame{ border-radius:20px; overflow:hidden; border:1px solid var(--line-2);
                  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.02) inset; background:var(--surface); }
  .window .frame img{ width:100%; height:auto; }
  .window .halo{ position:absolute; inset:-8% -4% -22% -4%; z-index:-1; border-radius:40px;
                 background:radial-gradient(60% 60% at 50% 25%, var(--glow), transparent 70%); filter:blur(24px); }

  /* edge-to-edge hero: two columns on wide screens — copy left, live app screenshot right */
  @media (min-width:1080px){
    .hero{ padding:104px 0 72px; }
    .hero .wrap{ display:grid; grid-template-columns:minmax(400px, 44%) 1fr; gap:clamp(36px,4.2vw,88px); align-items:center; }
    .hero .inner{ text-align:left; padding-top:0; }
    .hero h1{ margin:16px 0 0; max-width:20ch; }
    .hero p.sub{ margin:20px 0 0; max-width:54ch; }
    .hero .cta{ justify-content:flex-start; }
    .hero .cta .fineprint, .hero .cta .livestat{ text-align:left; }
    .hero .window{ margin:0; max-width:100%; }
    .hero .tour-tabs{ justify-content:flex-start; }
    .hero .tour-cap{ text-align:left; }
  }

  /* ============================ spec strip ============================ */
  .specs{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ground-2); }
  .specs .row{ display:flex; flex-wrap:wrap; gap:10px 34px; justify-content:center; align-items:center; padding:20px 0; }
  .spec{ display:inline-flex; align-items:center; gap:10px; color:var(--ink-2); font:600 14.5px/1 var(--font-ui); white-space:nowrap; }
  .spec svg{ width:19px; height:19px; color:var(--accent-2); flex:none; }

  /* ============================ section scaffolding ============================ */
  section{ position:relative; }
  .band{ padding:86px 0; }
  .head{ max-width:720px; }
  .head.center{ margin:0 auto; text-align:center; }
  .head h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; line-height:1.08;
            font-size:clamp(28px,3.9vw,44px); margin:12px 0 0; text-wrap:balance; }
  .head p{ color:var(--ink-2); font-size:17px; margin:16px 0 0; }

  /* alternating feature blocks */
  .feature{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .feature + .feature{ margin-top:96px; }
  .feature.flip .copy{ order:2; }
  .feature .copy h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; line-height:1.12; margin:14px 0 0; text-wrap:balance; }
  .feature .copy p{ color:var(--ink-2); font-size:16.5px; margin:16px 0 0; }
  .feature ul{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .feature ul li{ position:relative; padding-left:30px; color:var(--ink-2); font-size:15.5px; }
  .feature ul li::before{ content:""; position:absolute; left:0; top:2px; width:19px; height:19px; border-radius:50%;
    background:radial-gradient(circle at 50% 50%, var(--accent-2), var(--accent)); box-shadow:0 3px 10px var(--glow);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; }
  .feature ul li b{ color:var(--ink); font-weight:700; }

  .shot{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow); background:var(--surface); }
  .shot img{ width:100%; height:auto; }
  .shot::after{ content:""; position:absolute; inset:0; border-radius:18px; box-shadow:0 0 0 1px rgba(255,255,255,.03) inset; pointer-events:none; }
  .shot.glow::before{ content:""; position:absolute; inset:-16%; z-index:-1; background:radial-gradient(55% 55% at 50% 40%, var(--glow), transparent 72%); filter:blur(20px); }
  .cap{ margin-top:14px; font:500 13px/1.5 var(--font-mono); color:var(--faint); text-align:center; }
  @media (max-width:820px){
    .feature{ grid-template-columns:1fr; gap:28px; }
    .feature.flip .copy{ order:0; }
  }

  /* small controls strip below a feature */
  .stripshot{ margin-top:18px; border-radius:14px; overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--shadow-sm); }
  .stripshot img{ width:100%; height:auto; display:block; }

  /* ============================ how it works ============================ */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
  .step{ background:linear-gradient(180deg,var(--surface),var(--ground-3)); border:1px solid var(--line); border-radius:18px; padding:26px; }
  .step .n{ font:800 13px/1 var(--font-mono); letter-spacing:.1em; color:var(--accent); }
  .step h4{ font-family:var(--font-display); font-weight:800; font-size:19px; margin:14px 0 0; }
  .step p{ color:var(--ink-2); font-size:15px; margin:9px 0 0; }
  @media (max-width:760px){ .steps{ grid-template-columns:1fr; } }

  /* ============================ pricing ============================ */
  .plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; align-items:stretch; }
  .plan{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px 22px; display:flex; flex-direction:column; }
  .plan.pro{ border-color:transparent; background:linear-gradient(180deg,var(--surface-2),var(--surface));
             box-shadow:0 0 0 1.5px var(--accent) inset, 0 22px 44px -24px var(--glow); }
  .plan .tier{ font:700 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  .plan.pro .tier{ color:var(--accent-2); }
  .plan .term{ color:var(--faint); font:600 11px/1.3 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; margin-top:7px; }
  .plan .price{ font-family:var(--font-display); font-weight:800; font-size:29px; letter-spacing:-.02em; margin:16px 0 0; display:flex; align-items:baseline; gap:4px; }
  .plan .price .star{ color:var(--gold); font-size:22px; }
  .plan .price small{ font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0; }
  .plan .usd{ color:var(--ink-2); font:600 13.5px/1 var(--font-ui); margin-top:8px; }
  .plan .usd b{ color:var(--ink); font-weight:700; }
  .plan ul{ list-style:none; margin:18px 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
  .plan ul li{ position:relative; padding-left:25px; color:var(--ink-2); font-size:14px; }
  .plan ul li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--good); font-weight:800; }
  .plan ul li.no{ color:var(--faint); } .plan ul li.no::before{ content:"—"; color:var(--faint); }
  .plan .btn{ width:100%; justify-content:center; }
  .badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:linear-gradient(115deg,var(--accent),var(--accent-2)); color:var(--on-accent);
          font:800 10.5px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; padding:7px 11px; border-radius:20px; box-shadow:0 8px 20px -6px var(--glow); white-space:nowrap; }
  @media (max-width:920px){ .plans{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .plans{ grid-template-columns:1fr; } }

  /* ============================ FAQ ============================ */
  .faq{ max-width:820px; margin:40px auto 0; display:flex; flex-direction:column; gap:12px; }
  details.q{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:4px 20px; }
  details.q summary{ list-style:none; cursor:pointer; padding:18px 30px 18px 0; position:relative;
                     font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); }
  details.q summary::-webkit-details-marker{ display:none; }
  details.q summary::after{ content:"+"; position:absolute; right:0; top:16px; font:400 22px/1 var(--font-ui); color:var(--accent-2); transition:transform .2s; }
  details.q[open] summary::after{ transform:rotate(45deg); }
  details.q .a{ color:var(--ink-2); font-size:15.5px; padding:0 0 20px; margin:0; }
  details.q .a a{ color:var(--accent-2); text-decoration:none; border-bottom:1px solid color-mix(in oklab,var(--accent-2) 40%,transparent); }

  /* ============================ final CTA ============================ */
  .final{ position:relative; overflow:hidden; text-align:center; border-top:1px solid var(--line); }
  .final .glowbg{ position:absolute; inset:0; z-index:0; background:radial-gradient(60% 120% at 50% 0%, var(--glow), transparent 62%); pointer-events:none; }
  .final .inner{ position:relative; z-index:1; padding:96px 0; }
  .final h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; font-size:clamp(30px,4.6vw,52px); line-height:1.04; margin:0 auto; max-width:16ch; text-wrap:balance; }
  .final p{ color:var(--ink-2); font-size:17px; margin:18px auto 0; max-width:52ch; }

  /* ============================ footer ============================ */
  footer.foot{ border-top:1px solid var(--line); background:var(--ground-2); }
  footer.foot .row{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; padding:34px 0; }
  footer.foot .links{ display:flex; gap:22px; margin-left:auto; flex-wrap:wrap; }
  footer.foot a{ color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; transition:color .15s; }
  footer.foot a:hover{ color:var(--ink); }
  footer.foot .fine{ width:100%; color:var(--faint); font-size:12.5px; margin-top:6px; }

  /* ============================ comparison ============================ */
  .cmp-wrap{ margin-top:44px; overflow-x:auto; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); -webkit-overflow-scrolling:touch; }
  table.cmp{ width:100%; min-width:660px; border-collapse:collapse; font:500 14.5px/1.45 var(--font-ui); }
  table.cmp th, table.cmp td{ padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:middle; text-align:center; }
  table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td{ border-bottom:0; }
  table.cmp thead th{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink-2); background:var(--ground-3); }
  table.cmp thead th small{ display:block; font:500 11.5px/1.3 var(--font-mono); color:var(--faint); margin-top:3px; }
  table.cmp tbody th{ font-weight:600; color:var(--ink); text-align:left; }
  table.cmp td{ color:var(--ink-2); }
  table.cmp th:first-child{ text-align:left; background:transparent; }
  table.cmp th:nth-child(2), table.cmp td:nth-child(2){ background:color-mix(in oklab, var(--accent) 11%, transparent); color:var(--ink); }
  table.cmp thead th:nth-child(2){ color:var(--accent-2); background:color-mix(in oklab, var(--accent) 18%, transparent); }
  .cmp .yes{ color:var(--good); font-weight:800; font-size:16px; }
  .cmp .no{ color:var(--faint); font-weight:700; font-size:16px; }
  .cmp .mid{ color:var(--gold); font-weight:800; font-size:16px; }
  .cmp-note{ text-align:center; color:var(--muted); font:500 14.5px/1.65 var(--font-ui); margin:22px auto 0; max-width:64ch; }

  /* ============================ real app demo video ============================ */
  .demovid{ position:relative; width:100%; max-width:var(--maxw); margin:48px auto 0; }
  .demovid-halo{ position:absolute; inset:-6% -3% -12% -3%; z-index:0; border-radius:40px;
                 background:radial-gradient(60% 60% at 50% 30%, var(--glow), transparent 70%); filter:blur(28px); pointer-events:none; }
  .demovid video{ position:relative; z-index:1; width:100%; height:auto; aspect-ratio:1600/1080; display:block; border-radius:18px;
                  border:1px solid var(--line-2); box-shadow:var(--shadow); background:var(--surface); object-fit:contain; }
  .demovid figcaption{ margin-top:16px; text-align:center; font:500 14px/1.55 var(--font-mono); color:var(--faint); }
  .demovid figcaption b{ color:var(--accent-2); }
  .topdemo{ padding:26px 0 6px; }
  .topdemo-eye{ display:block; text-align:center; }
  .topdemo .demovid{ margin-top:16px; }
  @media (max-width:760px){ .topdemo{ padding:16px 0 4px; } }

  @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto; } }

  /* ==================== v1.0.0.31 redesign: bigger hero + big feature showcases ==================== */
  .window{ max-width:min(1720px, 84vw); margin-top:46px; }
  .window .frame{ border-radius:22px; }
  @media (max-width:640px){ .window{ margin-top:30px; max-width:100%; } }

  .showcases{ margin-top:60px; }
  .show{ margin-top:104px; }
  .show:first-child{ margin-top:0; }
  .show .copy{ max-width:820px; margin:0 auto; text-align:center; }
  .show .copy h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.6vw,40px); letter-spacing:-.02em; line-height:1.1; margin:16px 0 0; text-wrap:balance; }
  .show .copy p{ color:var(--ink-2); font-size:17px; margin:16px auto 0; max-width:62ch; }
  .show .bigshot{ position:relative; margin:44px auto 0; max-width:min(1900px, 88vw); border-radius:22px; overflow:hidden;
                  border:1px solid var(--line-2); box-shadow:var(--shadow); background:var(--surface); }
  .show .bigshot img{ width:100%; height:auto; }
  .show .bigshot::before{ content:""; position:absolute; inset:-10% -4% -20% -4%; z-index:-1;
                          background:radial-gradient(55% 55% at 50% 28%, var(--glow), transparent 72%); filter:blur(28px); }
  .show .pts{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:13px 34px;
              max-width:1020px; margin:36px auto 0; padding:0; text-align:left; }
  .show .pts li{ position:relative; padding-left:30px; color:var(--ink-2); font-size:15.5px; line-height:1.5; }
  .show .pts li::before{ content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%;
    background:radial-gradient(circle at 50% 50%, var(--accent-2), var(--accent)); box-shadow:0 3px 10px var(--glow);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; }
  .show .pts li b{ color:var(--ink); font-weight:700; }
  .newpill{ display:inline-flex; align-items:center; gap:7px; background:color-mix(in oklab,var(--accent) 12%,transparent);
            color:var(--accent-2); border:1px solid color-mix(in oklab,var(--accent) 32%,transparent);
            font:800 11px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; padding:8px 13px; border-radius:20px; }
  @media (max-width:860px){ .show .pts{ grid-template-columns:1fr; max-width:520px; } .show{ margin-top:76px; } }

  /* ==================== changelog / what's new ==================== */
  .rel-history{ max-width:800px; margin:64px auto 0; border-top:1px solid var(--line); }
  .rel-row{ display:flex; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); }
  .rel-row .rel-v{ flex:none; width:96px; font:800 13px/1.5 var(--font-mono); color:var(--accent-2); }
  .rel-row p{ margin:0; color:var(--ink-2); font-size:15px; line-height:1.65; }
  .rel-row p a{ color:var(--accent-2); text-decoration:none; border-bottom:1px solid color-mix(in oklab,var(--accent-2) 40%,transparent); }
  @media (max-width:600px){ .rel-row{ flex-direction:column; gap:6px; } .rel-row .rel-v{ width:auto; } }