/* Sage page themes. The base look ("original") lives in index.html. A theme remaps the
   design tokens on <html data-theme="...">, then restyles the pieces that carry their own
   colors: the phone, the chaos scene, the trio visuals, the band. Theme assets (videos,
   room plates, the kawaii mascot) are swapped by assets/js/themes.js. */

/* ---------- style switcher (all themes) ---------- */
.theme-switch{position:fixed;left:16px;bottom:16px;z-index:400;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(15,42,32,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.theme-switch span{align-self:center;padding:0 8px 0 10px;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.theme-switch button{border:0;cursor:pointer;padding:8px 13px;border-radius:999px;background:transparent;color:#fff;font:600 13px/1 var(--sans);transition:background .2s,color .2s}
.theme-switch button:hover{background:rgba(255,255,255,.12)}
.theme-switch button[aria-pressed="true"]{background:#fff;color:#0f2a20}
.theme-switch .ts-toggle{display:none}
@media (max-width:720px){.theme-switch{left:auto;right:12px;bottom:12px}.theme-switch span{display:none}.theme-switch .ts-toggle{display:block}.theme-switch:not(.open) button[data-set-theme]{display:none}.theme-switch.open .ts-toggle{background:rgba(255,255,255,.14)}}

/* =====================================================================
   CYBERPUNK: night city, neon magenta and cyan, glass and grid
   ===================================================================== */
html[data-theme="cyber"]{
  --pearl:#07060d;--paper:#0e0c1a;--ink:#f4f1ff;--forest:#00e5ff;--forest-deep:#100a22;--jade:#ff3ec8;
  --mint:#130f26;--mint-2:#2b2452;--gold:#00e5ff;--gold-line:#ff3ec8;--gold-soft:#7df9ff;
  --body:#d4d0ec;--muted:#a29dc6;--line:rgba(125,249,255,.14);--line-strong:rgba(125,249,255,.3);
  --display:'Chakra Petch',sans-serif;--sans:'Space Grotesk',sans-serif;--serif:'Orbitron',sans-serif;
  --shadow:0 24px 60px -24px rgba(255,62,200,.35),0 0 0 1px rgba(125,249,255,.12);
  color-scheme:dark;
}
html[data-theme="cyber"] body{background:radial-gradient(ellipse 80% 50% at 80% 0%,rgba(255,62,200,.12),transparent 60%),radial-gradient(ellipse 60% 40% at 0% 60%,rgba(0,229,255,.08),transparent 60%),#07060d}
html[data-theme="cyber"] body::before{content:'';position:fixed;inset:0;z-index:299;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
html[data-theme="cyber"] h1,html[data-theme="cyber"] h2,html[data-theme="cyber"] h3{letter-spacing:-.01em;text-transform:none}
html[data-theme="cyber"] .h1{line-height:1;font-weight:700}
html[data-theme="cyber"] .jade{color:#ff3ec8;text-shadow:0 0 18px rgba(255,62,200,.65),0 0 2px rgba(255,62,200,.9);animation:neonFlicker 7s steps(1) infinite}
@keyframes neonFlicker{0%,92%,100%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
html[data-theme="cyber"] .label{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.16em;color:#00e5ff}
html[data-theme="cyber"] .label::before{content:'// ';color:#ff3ec8}
html[data-theme="cyber"] .wordmark{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:24px;color:#f4f1ff;text-shadow:0 0 12px rgba(0,229,255,.6)}
html[data-theme="cyber"] .nav{background:rgba(7,6,13,.8);border-bottom-color:rgba(0,229,255,.2)}
html[data-theme="cyber"] .btn-primary{background:linear-gradient(100deg,#00e5ff,#ff3ec8);color:#07060d;border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:none;filter:drop-shadow(0 0 14px rgba(255,62,200,.45))}
html[data-theme="cyber"] .btn-primary:hover{background:linear-gradient(100deg,#7df9ff,#ff7ad9);box-shadow:none}
html[data-theme="cyber"] .link{color:#f4f1ff;text-decoration-color:#ff3ec8}
html[data-theme="cyber"] .hero-shade{background:linear-gradient(90deg,rgba(7,6,13,.96) 0%,rgba(7,6,13,.86) 32%,rgba(7,6,13,.3) 56%,rgba(7,6,13,0) 70%),linear-gradient(to bottom,rgba(7,6,13,0) 80%,#07060d 100%)}
html[data-theme="cyber"] .tri,html[data-theme="cyber"] .fit-item,html[data-theme="cyber"] .hat,html[data-theme="cyber"] .tier,html[data-theme="cyber"] .anything,html[data-theme="cyber"] .chip,html[data-theme="cyber"] .window,html[data-theme="cyber"] .price-card{border-color:rgba(0,229,255,.24);box-shadow:inset 0 0 0 1px rgba(255,62,200,.06),0 0 30px -18px rgba(0,229,255,.5)}
html[data-theme="cyber"] .tri.dark{background:radial-gradient(ellipse 80% 70% at 85% 0%,rgba(255,62,200,.28),rgba(255,62,200,0) 60%),#140b2a}
html[data-theme="cyber"] .tri-bar i{background:linear-gradient(90deg,#00e5ff,#ff3ec8)}
html[data-theme="cyber"] .tri-ck,html[data-theme="cyber"] .cp-check,html[data-theme="cyber"] .fit-ck{background:#00e5ff;box-shadow:0 0 12px rgba(0,229,255,.7)}
html[data-theme="cyber"] .tri-ck path,html[data-theme="cyber"] .cp-check path,html[data-theme="cyber"] .fit-ck path{stroke:#07060d}
html[data-theme="cyber"] .tri-skel s{background:linear-gradient(90deg,#16122c 0%,#2a2450 50%,#16122c 100%);background-size:220% 100%}
html[data-theme="cyber"] .lg img,html[data-theme="cyber"] .chip img{filter:invert(1) brightness(1.1)}
html[data-theme="cyber"] .chip .mono{color:#07060d}
html[data-theme="cyber"] .pc-price .left{background:#07060d}
html[data-theme="cyber"] .flow-out{background:#0e0c1a;color:#f4f1ff;border:1px solid rgba(0,229,255,.35)}
/* the orb turns magenta and electric blue */
html[data-theme="cyber"] .flow-orb video,html[data-theme="cyber"] .final-orb video,html[data-theme="cyber"] .cp-orb-vid,html[data-theme="cyber"] .suck-sage video,html[data-theme="cyber"] img[data-slot="still"]{filter:hue-rotate(180deg) saturate(1.35)}
html[data-theme="cyber"] .final-orb{mix-blend-mode:normal}
html[data-theme="cyber"] .band-media video{filter:hue-rotate(180deg) saturate(1.5) brightness(.85)}
html[data-theme="cyber"] .band{background:#0b0718}
html[data-theme="cyber"] .band-shade{background:linear-gradient(90deg,rgba(11,7,24,.94) 0%,rgba(11,7,24,.6) 50%,rgba(11,7,24,.4) 100%)}
html[data-theme="cyber"] .steps .sn{background:linear-gradient(135deg,#00e5ff,#ff3ec8);color:#07060d}
/* trio visuals in dark */
html[data-theme="cyber"] .mt-ask{background:#0e0c1a;border-color:rgba(0,229,255,.3);color:#8a85ad}
html[data-theme="cyber"] .caret{background:#00e5ff}
html[data-theme="cyber"] .mt em{color:#a29dc6}
html[data-theme="cyber"] .ed{background:#0b0a16;border-color:rgba(0,229,255,.25)}
html[data-theme="cyber"] .ed-bar{background:#141128;border-bottom-color:rgba(0,229,255,.15)}
html[data-theme="cyber"] .ed-t{color:#8a85ad}
html[data-theme="cyber"] .br{background:#07060d;border-color:rgba(0,229,255,.25);color:#d4d0ec}
html[data-theme="cyber"] .r{color:#d4d0ec}
html[data-theme="cyber"] .r.on{background:rgba(255,62,200,.14)}
html[data-theme="cyber"] .r.on::before{background:#ff3ec8}
html[data-theme="cyber"] .cal{background:#0e0c1a;box-shadow:0 0 0 1px rgba(0,229,255,.25),0 14px 30px -16px rgba(255,62,200,.5)}
html[data-theme="cyber"] .cal-d{color:#f4f1ff}
html[data-theme="cyber"] .cal-d small{color:#00e5ff}
html[data-theme="cyber"] .cal-pill{background:#130f26;border-color:rgba(0,229,255,.3);color:#7df9ff}
html[data-theme="cyber"] .cal-ev{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(18.18% - 1px),rgba(125,249,255,.1) calc(18.18% - 1px),rgba(125,249,255,.1) 18.18%)}
html[data-theme="cyber"] .ev{color:#f4f1ff}
html[data-theme="cyber"] .ev span{color:#b9b4d6}
html[data-theme="cyber"] .ev.c1{background:rgba(0,229,255,.14);border-color:#00e5ff}
html[data-theme="cyber"] .ev.c2{background:rgba(255,214,0,.12);border-color:#ffd600}
html[data-theme="cyber"] .ev.c3{background:rgba(255,62,200,.15);border-color:#ff3ec8}
html[data-theme="cyber"] .ev.c4{background:rgba(160,110,255,.18);border-color:#a06eff}
/* chaos scene */
html[data-theme="cyber"] .cp-stage{background:#07060d}
html[data-theme="cyber"] .cp-stage::before{background:linear-gradient(to bottom,#07060d,rgba(7,6,13,0))}
html[data-theme="cyber"] .cp-stage::after{background:linear-gradient(to top,#07060d,rgba(7,6,13,0))}
html[data-theme="cyber"] .cp-glow{background:radial-gradient(circle,rgba(255,62,200,.55) 0%,rgba(0,229,255,.18) 36%,rgba(0,229,255,0) 64%)}
html[data-theme="cyber"] .cp-card{background:rgba(10,8,22,.82);border-color:rgba(0,229,255,.35);color:#f4f1ff;box-shadow:0 0 24px -8px rgba(0,229,255,.45)}
html[data-theme="cyber"] .cp-lines s{background:#2a2450}
html[data-theme="cyber"] .cp-lines.dots s::before{background:#00e5ff}
html[data-theme="cyber"] .cp-streams .base{stroke:#ff3ec8}
html[data-theme="cyber"] .cp-streams .pulse{stroke:#bdfcff;filter:drop-shadow(0 0 6px rgba(0,229,255,.95))}
/* phone: Telegram in dark mode */
html[data-theme="cyber"] .screen{background:#000;color:#fff}
html[data-theme="cyber"] .status svg [fill="#111"]{fill:#fff}
html[data-theme="cyber"] .status svg [stroke="#111"]{stroke:#fff}
html[data-theme="cyber"] .tg-head{background:rgba(28,28,30,.96);border-bottom-color:rgba(255,255,255,.12)}
html[data-theme="cyber"] .tg-chat{background:radial-gradient(rgba(255,62,200,.14) 1px,transparent 1.3px) 0 0/13px 13px,linear-gradient(160deg,#120a26 0%,#0b1430 55%,#1b0a24 100%)}
html[data-theme="cyber"] .bub{background:#1f1d2e;color:#f4f1ff;box-shadow:none}
html[data-theme="cyber"] .bub.tail::before{background:radial-gradient(circle at 0 0,rgba(31,29,46,0) 10px,#1f1d2e 10.5px)}
html[data-theme="cyber"] .bub .quote{background:rgba(0,229,255,.12);border-left-color:#00e5ff}
html[data-theme="cyber"] .bub .quote em{color:#7df9ff}
html[data-theme="cyber"] .tg-kb button,html[data-theme="cyber"] .tg-done{background:rgba(255,62,200,.28)}
html[data-theme="cyber"] .tg-input{background:rgba(28,28,30,.97);border-top-color:rgba(255,255,255,.1)}
html[data-theme="cyber"] .tg-field{background:#000;border-color:rgba(255,255,255,.14)}
html[data-theme="cyber"] .home{background:#fff}
html[data-theme="cyber"] .theme-switch{background:rgba(14,12,26,.9);box-shadow:0 0 0 1px rgba(0,229,255,.3),0 0 30px -10px rgba(255,62,200,.6)}
html[data-theme="cyber"] .theme-switch button[aria-pressed="true"]{background:linear-gradient(100deg,#00e5ff,#ff3ec8);color:#07060d}
@media (max-width:1000px){html[data-theme="cyber"] .hero-shade{background:linear-gradient(to bottom,rgba(7,6,13,0) 60%,#07060d 100%)}}

/* =====================================================================
   KAWAII: a cute Japanese game world, with Sage as a sprout mascot
   ===================================================================== */
html[data-theme="kawaii"]{
  --pearl:#fff6ee;--paper:#ffffff;--ink:#4a2f5c;--forest:#ff6f9f;--forest-deep:#5b3f8c;--jade:#21a88f;
  --mint:#e9f8f1;--mint-2:#c6ecdd;--gold:#e8862a;--gold-line:#ffc34d;--gold-soft:#ffe08a;
  --body:#5e4a6e;--muted:#8a7896;--line:rgba(74,47,92,.12);--line-strong:rgba(74,47,92,.22);
  --display:'Nunito',sans-serif;--sans:'Nunito',sans-serif;--serif:'Nunito',sans-serif;
  --shadow:0 10px 0 rgba(74,47,92,.08),0 24px 40px -24px rgba(74,47,92,.4);
}
html[data-theme="kawaii"] body{background:radial-gradient(rgba(255,143,177,.13) 2px,transparent 2.4px) 0 0/26px 26px,#fff6ee}
html[data-theme="kawaii"] h1,html[data-theme="kawaii"] h2,html[data-theme="kawaii"] h3{font-weight:900;letter-spacing:-.025em}
html[data-theme="kawaii"] .h1{line-height:1;font-size:clamp(42px,6vw,80px)}
html[data-theme="kawaii"] .h2{line-height:1.04}
html[data-theme="kawaii"] .jade{color:#21a88f;text-shadow:2px 2px 0 rgba(255,211,226,.9)}
html[data-theme="kawaii"] .label{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#fff;border:2px solid #ffd3e2;color:#e8628f;letter-spacing:.1em}
html[data-theme="kawaii"] .label::before{content:'\2605';color:#ffc34d}
html[data-theme="kawaii"] .wordmark{font-size:29px;font-weight:900;letter-spacing:-.03em;color:#4a2f5c}
html[data-theme="kawaii"] .wordmark::after{content:'\30BB\30FC\30B8';margin-left:9px;font-size:13px;color:#e8628f;vertical-align:middle}
html[data-theme="kawaii"] .nav{background:rgba(255,246,238,.88)}
html[data-theme="kawaii"] .btn-primary{background:#ff6f9f;color:#fff;border-radius:999px;box-shadow:0 5px 0 #d94d80;transition:transform .15s,box-shadow .15s,background .2s}
html[data-theme="kawaii"] .btn-primary:hover{background:#ff82ad;transform:translateY(-2px);box-shadow:0 7px 0 #d94d80}
html[data-theme="kawaii"] .btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #d94d80}
html[data-theme="kawaii"] .link{text-decoration-color:#ff9cbd}
html[data-theme="kawaii"] .hero-shade{background:linear-gradient(90deg,rgba(255,246,238,.95) 0%,rgba(255,246,238,.82) 30%,rgba(255,246,238,.15) 52%,rgba(255,246,238,0) 62%),linear-gradient(to bottom,rgba(255,246,238,0) 82%,#fff6ee 100%)}
html[data-theme="kawaii"] .tri,html[data-theme="kawaii"] .fit-item,html[data-theme="kawaii"] .hat,html[data-theme="kawaii"] .tier,html[data-theme="kawaii"] .anything,html[data-theme="kawaii"] .price-card,html[data-theme="kawaii"] .window{border-radius:28px;border:3px solid #fff;box-shadow:0 8px 0 rgba(74,47,92,.07),0 20px 34px -24px rgba(74,47,92,.35)}
html[data-theme="kawaii"] .chip{border:2px solid #fff;box-shadow:0 4px 0 rgba(74,47,92,.07)}
html[data-theme="kawaii"] .tri.dark{background:radial-gradient(ellipse 80% 70% at 85% 0%,rgba(255,195,77,.35),rgba(255,195,77,0) 60%),#7a5cc0;border-color:#fff}
html[data-theme="kawaii"] .tri-bar i{background:linear-gradient(90deg,#ff9cbd,#ffc34d)}
html[data-theme="kawaii"] .tri-ck,html[data-theme="kawaii"] .cp-check,html[data-theme="kawaii"] .fit-ck{background:#21a88f}
html[data-theme="kawaii"] .fit-item{background:#ffffff}
html[data-theme="kawaii"] .fit-item:nth-child(4n+1){background:#ffeef4}
html[data-theme="kawaii"] .fit-item:nth-child(4n+2){background:#e9f8f1}
html[data-theme="kawaii"] .fit-item:nth-child(4n+3){background:#fff4dc}
html[data-theme="kawaii"] .fit-item:nth-child(4n+4){background:#eef0ff}
html[data-theme="kawaii"] .chip .mono{background:#ff6f9f;border-radius:50%}
html[data-theme="kawaii"] .steps .sn{background:#ffe08a;color:#4a2f5c}
/* the band becomes a starry lavender night */
html[data-theme="kawaii"] .band{background:radial-gradient(rgba(255,255,255,.75) 1.2px,transparent 1.6px) 0 0/34px 34px,radial-gradient(rgba(255,224,138,.8) 1.6px,transparent 2px) 17px 9px/52px 52px,radial-gradient(ellipse 70% 60% at 80% 20%,#8c6fd6,transparent 60%),#5b3f8c}
html[data-theme="kawaii"] .band-media,html[data-theme="kawaii"] .band-shade{display:none}
html[data-theme="kawaii"] .steps > li{border-radius:24px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3)}
html[data-theme="kawaii"] .cat{border-radius:999px}
html[data-theme="kawaii"] .flow-out{border-radius:24px;box-shadow:0 6px 0 rgba(0,0,0,.12)}
/* Sage the sprout mascot takes the orb's places */
html[data-theme="kawaii"] .flow-orb,html[data-theme="kawaii"] .final-orb{mix-blend-mode:normal}
html[data-theme="kawaii"] .flow-orb video,html[data-theme="kawaii"] .flow-orb img{-webkit-mask-image:none;mask-image:none;object-fit:contain}
html[data-theme="kawaii"] .final-orb video{object-fit:contain}
html[data-theme="kawaii"] .flow-orb{animation:mascotHop 2.6s ease-in-out infinite}
@keyframes mascotHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}55%{transform:translateY(0) scaleY(.96)}}
/* trio visuals */
html[data-theme="kawaii"] .mt{border-radius:30%}
html[data-theme="kawaii"] .mt-ask{border-width:2px;border-color:#ffd3e2}
html[data-theme="kawaii"] .ed,html[data-theme="kawaii"] .cal{border-radius:18px;border:3px solid #fff}
html[data-theme="kawaii"] .ed-bar{background:#ffeef4}
/* chaos scene */
html[data-theme="kawaii"] .cp-stage{background:#fff6ee}
html[data-theme="kawaii"] .cp-stage::before{background:linear-gradient(to bottom,#fff6ee,rgba(255,246,238,0))}
html[data-theme="kawaii"] .cp-stage::after{background:linear-gradient(to top,#fff6ee,rgba(255,246,238,0))}
html[data-theme="kawaii"] .cp-glow{background:radial-gradient(circle,rgba(255,224,138,.7) 0%,rgba(255,156,189,.3) 36%,rgba(255,156,189,0) 64%)}
html[data-theme="kawaii"] .cp-card{border-radius:18px;border:2px solid #fff;color:#4a2f5c;font-family:'Nunito',sans-serif}
html[data-theme="kawaii"] .cp-orb-vid{object-fit:contain}
/* phone */
html[data-theme="kawaii"] .tg-chat{background:radial-gradient(rgba(255,143,177,.22) 1.4px,transparent 1.8px) 0 0/15px 15px,linear-gradient(160deg,#ffe4ee 0%,#fff1d8 50%,#e3f6ec 100%)}
html[data-theme="kawaii"] .tg-av span{background:#e9f8f1}
html[data-theme="kawaii"] .tg-kb button,html[data-theme="kawaii"] .tg-done{background:rgba(232,98,143,.75)}
html[data-theme="kawaii"] .theme-switch{background:rgba(74,47,92,.88)}
html[data-theme="kawaii"] .theme-switch button[aria-pressed="true"]{background:#ff6f9f;color:#fff}
@media (max-width:1000px){html[data-theme="kawaii"] .hero-shade{background:linear-gradient(to bottom,rgba(255,246,238,0) 62%,#fff6ee 100%)}}
@media (prefers-reduced-motion:reduce){html[data-theme] .jade,html[data-theme] .flow-orb{animation:none!important}}

/* stack scroll scene */
html[data-theme="cyber"] .suck-card{background:#0e0c1a;border-color:rgba(0,229,255,.35);box-shadow:0 0 26px -10px rgba(0,229,255,.55)}
html[data-theme="cyber"] .suck-glow{background:radial-gradient(circle,rgba(255,62,200,.6) 0%,rgba(0,229,255,.2) 36%,rgba(0,229,255,0) 66%)}
html[data-theme="cyber"] .suck-count{background:linear-gradient(100deg,#00e5ff,#ff3ec8);color:#07060d}
html[data-theme="cyber"] .sc-ck{background:#00e5ff;box-shadow:0 0 12px rgba(0,229,255,.7)}
html[data-theme="cyber"] .sc-ck path{stroke:#07060d}
html[data-theme="kawaii"] .suck-card{border-radius:22px;border:3px solid #fff;background:#fff;box-shadow:0 6px 0 rgba(74,47,92,.08),0 18px 30px -20px rgba(74,47,92,.4)}
html[data-theme="kawaii"] .sc-ic{border-radius:50%}
html[data-theme="kawaii"] .sc-ck{background:#21a88f}
html[data-theme="kawaii"] .suck-glow{background:radial-gradient(circle,rgba(255,224,138,.75) 0%,rgba(255,156,189,.3) 36%,rgba(255,156,189,0) 66%)}
html[data-theme="kawaii"] .suck-count{background:#ff6f9f;color:#fff;box-shadow:0 4px 0 #d94d80}
/* how it works step pictures */
html[data-theme="cyber"] .sv-win,html[data-theme="cyber"] .sv-list,html[data-theme="cyber"] .sv-ai,html[data-theme="cyber"] .sv-note{background:#0e0c1a;box-shadow:0 0 0 1px rgba(0,229,255,.28),0 14px 26px -16px rgba(255,62,200,.45)}
html[data-theme="cyber"] .sv-bar{background:#151230;border-bottom-color:rgba(0,229,255,.15)}
html[data-theme="cyber"] .sv-body b,html[data-theme="cyber"] .sv-list li,html[data-theme="cyber"] .sv-ai,html[data-theme="cyber"] .sv-nt b{color:#f4f1ff}
html[data-theme="cyber"] .sv-nt span,html[data-theme="cyber"] .sv-meta{color:#a29dc6}
html[data-theme="cyber"] .sv-prog{background:#221d44}
html[data-theme="cyber"] .sv-prog i{background:linear-gradient(90deg,#00e5ff,#ff3ec8)}
html[data-theme="cyber"] .sv-own{background:rgba(0,229,255,.14);color:#7df9ff}
html[data-theme="cyber"] .sv-me{background:rgba(255,62,200,.3);color:#fff}
html[data-theme="cyber"] .sv-ck{background:#00e5ff}
html[data-theme="cyber"] .sv-ck path{stroke:#07060d}
html[data-theme="cyber"] .steps.go .sv-tog{background:#ff3ec8}
html[data-theme="kawaii"] .sv-win,html[data-theme="kawaii"] .sv-list,html[data-theme="kawaii"] .sv-note,html[data-theme="kawaii"] .sv-ai{border-radius:18px}
html[data-theme="kawaii"] .sv-me{background:#ffd3e2;color:#4a2f5c}
html[data-theme="kawaii"] .sv-ck{background:#21a88f}
html[data-theme="kawaii"] .steps.go .sv-tog{background:#ff6f9f}

/* =====================================================================
   NOMI: a quiet force. Paper ivory, jade depths, warm light, and Nomi,
   the jade glass spirit, in place of the orb.
   ===================================================================== */
html[data-theme="nomi"]{
  --pearl:#f4efe6;--paper:#fbf8f2;--ink:#1d3a36;--forest:#24524b;--forest-deep:#163733;--jade:#3f7f73;
  --mint:#ebf0ea;--mint-2:#d8e3dc;--gold:#97733a;--gold-line:#d9b98a;--gold-soft:#ecd9b4;
  --body:#4b5754;--muted:#6f7b77;--line:rgba(29,58,54,.12);--line-strong:rgba(29,58,54,.2);
  --display:'Cormorant Garamond',serif;--sans:'Jost',sans-serif;--serif:'Jost',sans-serif;
  --shadow:0 24px 60px -30px rgba(29,58,54,.32),0 2px 6px rgba(29,58,54,.05);
}
html[data-theme="nomi"] body{background:radial-gradient(ellipse 70% 50% at 85% 0%,rgba(217,185,138,.16),rgba(217,185,138,0) 60%),#f4efe6}
html[data-theme="nomi"] h1,html[data-theme="nomi"] h2,html[data-theme="nomi"] h3{font-weight:500;letter-spacing:-.012em}
html[data-theme="nomi"] .h1{font-size:clamp(50px,6.8vw,96px);line-height:.96}
html[data-theme="nomi"] .h2{line-height:1.02;font-size:clamp(38px,5vw,64px)}
html[data-theme="nomi"] .jade{font-style:italic;color:#3f7f73}
html[data-theme="nomi"] .label{font-weight:500;letter-spacing:.34em;color:#97733a}
html[data-theme="nomi"] .wordmark{font-family:'Jost',sans-serif;font-weight:400;text-transform:lowercase;font-size:34px;letter-spacing:-.015em;color:#1d3a36}
html[data-theme="nomi"] .nav{background:rgba(244,239,230,.86)}
html[data-theme="nomi"] .btn{font-weight:500;letter-spacing:.02em}
html[data-theme="nomi"] .btn-primary{background:#24524b;border-radius:999px;box-shadow:0 10px 24px -14px rgba(22,55,51,.7)}
html[data-theme="nomi"] .btn-primary:hover{background:#163733}
html[data-theme="nomi"] .link{text-decoration-color:#d9b98a}
html[data-theme="nomi"] .hero-shade{background:linear-gradient(90deg,rgba(244,239,230,.96) 0%,rgba(244,239,230,.84) 32%,rgba(244,239,230,.2) 54%,rgba(244,239,230,0) 66%),linear-gradient(to bottom,rgba(244,239,230,0) 82%,#f4efe6 100%)}
html[data-theme="nomi"] .hero-sub,html[data-theme="nomi"] .hero-bold{font-size:19px}
html[data-theme="nomi"] .tri-text{font-size:clamp(23px,2.2vw,29px);font-weight:600;line-height:1.16}
html[data-theme="nomi"] .tri.dark{background:radial-gradient(ellipse 80% 70% at 85% 0%,rgba(217,185,138,.24),rgba(217,185,138,0) 60%),#163733}
html[data-theme="nomi"] .tri-bar i{background:linear-gradient(90deg,#ecd9b4,#d9b98a)}
html[data-theme="nomi"] .tri-ck,html[data-theme="nomi"] .cp-check,html[data-theme="nomi"] .fit-ck,html[data-theme="nomi"] .sc-ck,html[data-theme="nomi"] .sv-ck{background:#3f7f73}
html[data-theme="nomi"] .hat-title{font-weight:600}
html[data-theme="nomi"] .pc-price .amount{font-weight:600}
html[data-theme="nomi"] .steps .sn{background:#ecd9b4;color:#163733;font-family:'Jost',sans-serif;font-weight:500}
html[data-theme="nomi"] .steps h3{font-size:24px;font-weight:600}
html[data-theme="nomi"] .faq-row h3{font-family:'Jost',sans-serif;font-weight:500}
/* Nomi is a translucent glass creature: she lives on light surfaces */
html[data-theme="nomi"] .final-orb{mix-blend-mode:normal}
html[data-theme="nomi"] .final-orb video,html[data-theme="nomi"] .cp-orb-vid,html[data-theme="nomi"] .suck-sage video{object-fit:contain}
html[data-theme="nomi"] .tg-av span{background:#f4efe6}
html[data-theme="nomi"] .suck-glow{background:radial-gradient(circle,rgba(236,217,180,.75) 0%,rgba(236,217,180,.25) 38%,rgba(236,217,180,0) 66%)}
html[data-theme="nomi"] .suck-count{background:#24524b;color:#f4efe6}
html[data-theme="nomi"] .cp-card{font-family:'Jost',sans-serif}
html[data-theme="nomi"] .cp-card b{font-weight:500}
html[data-theme="nomi"] .tg-chat{background:radial-gradient(rgba(63,127,115,.12) 1px,transparent 1.3px) 0 0/13px 13px,linear-gradient(160deg,#eef2ea 0%,#f4efe6 55%,#f1e6d2 100%)}
html[data-theme="nomi"] .tg-kb button,html[data-theme="nomi"] .tg-done{background:rgba(36,82,75,.72)}
html[data-theme="nomi"] .bub .quote{border-left-color:#3f7f73;background:rgba(63,127,115,.1)}
html[data-theme="nomi"] .bub .quote em{color:#24524b}
html[data-theme="nomi"] .theme-switch{background:rgba(22,55,51,.9)}
html[data-theme="nomi"] .theme-switch button[aria-pressed="true"]{background:#f4efe6;color:#163733}
@media (max-width:1000px){html[data-theme="nomi"] .hero-shade{background:linear-gradient(to bottom,rgba(244,239,230,0) 62%,#f4efe6 100%)}}

/* Nomi chaos scene: her infinity pose is the plate; apps stream into her mouth and
   finished work flows out of her tail to the four cards */
html[data-theme="nomi"] .cp-stage{background:#f3ede3;--cp-scale:.72;--cp-density:.55}
html[data-theme="nomi"] .cp-plate{animation:none}
html[data-theme="nomi"] .cp-plate-vid{display:block}
html[data-theme="nomi"] .cp-orb{left:15%;top:28.6%;width:7%;animation:none}
html[data-theme="nomi"] .cp-orb-vid{display:none}
html[data-theme="nomi"] .cp-glow{inset:-70%;background:radial-gradient(circle,rgba(255,226,160,.55) 0%,rgba(255,226,160,.18) 34%,rgba(255,226,160,0) 62%);opacity:calc(.25 + var(--pulse,0) * .75)}
html[data-theme="nomi"] .cp-out{display:block;position:absolute;left:79%;top:28%;width:2px;height:2px}
@media (min-width:721px){
  html[data-theme="nomi"] .cp-c1{left:82.5%;top:11%;width:15.8%}
  html[data-theme="nomi"] .cp-c2{left:82.5%;top:28%;width:15.8%}
  html[data-theme="nomi"] .cp-c3{left:82.5%;top:42%;width:15.8%}
  html[data-theme="nomi"] .cp-c4{left:82.5%;top:56%;width:15.8%}
}
@media (max-width:720px){
  html[data-theme="nomi"] .cp-plate,html[data-theme="nomi"] .cp-plate-vid{object-fit:contain;object-position:50% 18%}
  html[data-theme="nomi"] .cp-orb{left:14.7%;top:22.6%;width:10%}
  html[data-theme="nomi"] .cp-out{left:79%;top:22%}
}

/* =====================================================================
   MOKI: soft pastel 3D. Lavender, pink and baby-blue light, white glass
   cards, a navy pill button, and Moki, a gummy pastel blob, in place of
   the orb. Choosing it renames the product Moki.
   ===================================================================== */
html[data-theme="moki"]{
  --pearl:#f6f3ff;--paper:#ffffff;--ink:#15173a;--forest:#15173a;--forest-deep:#1d1b4b;--jade:#8b5cf6;
  --mint:#f1ecff;--mint-2:#e3dafb;--gold:#6e6a94;--gold-line:#c4b5fd;--gold-soft:#ede7ff;
  --body:#46496c;--muted:#76789a;--line:rgba(21,23,58,.1);--line-strong:rgba(21,23,58,.18);
  --display:'Outfit',sans-serif;--sans:'Figtree',sans-serif;--serif:'Outfit',sans-serif;
  --shadow:0 22px 50px -28px rgba(86,66,180,.4),0 2px 6px rgba(21,23,58,.04);
}
html[data-theme="moki"] body{background:radial-gradient(ellipse 55% 40% at 88% 4%,rgba(255,196,232,.5),rgba(255,196,232,0) 62%),radial-gradient(ellipse 50% 38% at 6% 34%,rgba(196,214,255,.5),rgba(196,214,255,0) 62%),radial-gradient(ellipse 60% 40% at 70% 70%,rgba(221,208,255,.45),rgba(221,208,255,0) 64%),#f6f3ff}
html[data-theme="moki"] h1,html[data-theme="moki"] h2,html[data-theme="moki"] h3{font-weight:700;letter-spacing:-.035em}
html[data-theme="moki"] .h1{font-size:clamp(48px,6.6vw,92px);line-height:.98}
html[data-theme="moki"] .h2{line-height:1.04}
html[data-theme="moki"] .jade{background:linear-gradient(100deg,#7c4dff 0%,#a878ff 45%,#e48ad8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="moki"] .label{font-weight:600;letter-spacing:.24em;color:#6e6a94}
html[data-theme="moki"] .wordmark{font-family:'Outfit',sans-serif;font-weight:800;text-transform:lowercase;font-size:34px;letter-spacing:-.045em;color:#15173a}
html[data-theme="moki"] .nav{background:rgba(246,243,255,.82)}
html[data-theme="moki"] .btn{font-weight:600}
html[data-theme="moki"] .btn-primary{background:#15173a;color:#fff;border-radius:999px;box-shadow:0 14px 28px -14px rgba(21,23,58,.75)}
html[data-theme="moki"] .btn-primary:hover{background:#272b66}
html[data-theme="moki"] .link{text-decoration-color:#c4b5fd}
html[data-theme="moki"] .hero-shade{background:linear-gradient(90deg,rgba(246,243,255,.95) 0%,rgba(246,243,255,.84) 30%,rgba(246,243,255,.18) 52%,rgba(246,243,255,0) 64%),linear-gradient(to bottom,rgba(246,243,255,0) 82%,#f6f3ff 100%)}
html[data-theme="moki"] .tri,html[data-theme="moki"] .fit-item,html[data-theme="moki"] .hat,html[data-theme="moki"] .tier,html[data-theme="moki"] .anything,html[data-theme="moki"] .price-card,html[data-theme="moki"] .window{border-radius:24px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 44px -30px rgba(86,66,180,.45)}
html[data-theme="moki"] .tri.dark{background:radial-gradient(ellipse 80% 70% at 85% 0%,rgba(228,138,216,.35),rgba(228,138,216,0) 60%),radial-gradient(ellipse 70% 60% at 0% 100%,rgba(124,77,255,.35),rgba(124,77,255,0) 60%),#1d1b4b;border-color:rgba(255,255,255,.12)}
html[data-theme="moki"] .tri-bar i{background:linear-gradient(90deg,#a878ff,#e48ad8)}
html[data-theme="moki"] .tri-ck,html[data-theme="moki"] .cp-check,html[data-theme="moki"] .fit-ck,html[data-theme="moki"] .sc-ck,html[data-theme="moki"] .sv-ck{background:#8b5cf6}
html[data-theme="moki"] .fit-item:nth-child(4n+1){background:rgba(239,233,255,.9)}
html[data-theme="moki"] .fit-item:nth-child(4n+2){background:rgba(255,233,244,.9)}
html[data-theme="moki"] .fit-item:nth-child(4n+3){background:rgba(230,246,241,.9)}
html[data-theme="moki"] .fit-item:nth-child(4n+4){background:rgba(233,241,255,.9)}
html[data-theme="moki"] .hat-title{color:#8a87ad;text-decoration-color:#c4b5fd}
html[data-theme="moki"] .chip{background:rgba(255,255,255,.8);border-color:rgba(255,255,255,.95);box-shadow:0 6px 16px -10px rgba(86,66,180,.35)}
html[data-theme="moki"] .steps .sn{background:linear-gradient(135deg,#8b5cf6,#e48ad8);color:#fff}
/* the band turns light: soft lavender with white cards */
html[data-theme="moki"] .band{background:linear-gradient(160deg,#ece6ff 0%,#f7f1ff 48%,#e5efff 100%);color:var(--body)}
html[data-theme="moki"] .band-media,html[data-theme="moki"] .band-shade{display:none}
html[data-theme="moki"] .band .h2{color:#15173a}
html[data-theme="moki"] .band .lede p{color:var(--body)}
html[data-theme="moki"] .steps > li{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);border-radius:24px;box-shadow:0 20px 44px -30px rgba(86,66,180,.45)}
html[data-theme="moki"] .steps h3{color:#15173a}
html[data-theme="moki"] .steps p{color:var(--body)}
/* Moki takes the orb's places */
html[data-theme="moki"] .final-orb{mix-blend-mode:normal}
html[data-theme="moki"] .final-orb video,html[data-theme="moki"] .cp-orb-vid,html[data-theme="moki"] .suck-sage video{object-fit:contain}
html[data-theme="moki"] .final-orb video{animation:mokiFloat 3.6s ease-in-out infinite}
@keyframes mokiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
html[data-theme="moki"] .tg-av span{background:#f1ecff}
html[data-theme="moki"] .tg-chat{background:radial-gradient(rgba(139,92,246,.14) 1.2px,transparent 1.6px) 0 0/14px 14px,linear-gradient(160deg,#efe9ff 0%,#fbefff 50%,#e8f1ff 100%)}
html[data-theme="moki"] .tg-kb button,html[data-theme="moki"] .tg-done{background:rgba(124,77,255,.78)}
html[data-theme="moki"] .bub .quote{border-left-color:#8b5cf6;background:rgba(139,92,246,.1)}
html[data-theme="moki"] .bub .quote em{color:#6d3fd8}
/* chaos scene */
html[data-theme="moki"] .cp-stage{background:#efe9fb}
html[data-theme="moki"] .cp-stage::before{background:linear-gradient(to bottom,#f6f3ff,rgba(246,243,255,0))}
html[data-theme="moki"] .cp-stage::after{background:linear-gradient(to top,#f6f3ff,rgba(246,243,255,0))}
html[data-theme="moki"] .cp-glow{background:radial-gradient(circle,rgba(255,214,240,.85) 0%,rgba(196,181,253,.35) 36%,rgba(196,181,253,0) 64%)}
html[data-theme="moki"] .cp-card{border-radius:16px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.86);color:#15173a;font-family:'Figtree',sans-serif;box-shadow:0 1.2cqw 2.6cqw -1.4cqw rgba(86,66,180,.4)}
/* stack scroll scene and step pictures */
html[data-theme="moki"] .suck-card{border-radius:20px;border:1px solid rgba(255,255,255,.95);background:#fff;box-shadow:0 18px 36px -22px rgba(86,66,180,.5)}
html[data-theme="moki"] .suck-glow{background:radial-gradient(circle,rgba(255,214,240,.8) 0%,rgba(196,181,253,.3) 38%,rgba(196,181,253,0) 66%)}
html[data-theme="moki"] .suck-count{background:#15173a;color:#fff}
html[data-theme="moki"] .sv-win,html[data-theme="moki"] .sv-list,html[data-theme="moki"] .sv-note,html[data-theme="moki"] .sv-ai{border-radius:16px}
html[data-theme="moki"] .sv-me{background:#ede7ff;color:#15173a}
html[data-theme="moki"] .steps.go .sv-tog{background:#8b5cf6}
html[data-theme="moki"] .theme-switch{background:rgba(21,23,58,.88)}
html[data-theme="moki"] .theme-switch button[aria-pressed="true"]{background:linear-gradient(100deg,#8b5cf6,#d07de0);color:#fff}
@media (max-width:1000px){html[data-theme="moki"] .hero-shade{background:linear-gradient(to bottom,rgba(246,243,255,0) 62%,#f6f3ff 100%)}}

/* =====================================================================
   INK: sumi-e on washi paper. Black ink, one vermilion accent, Garamond
   type, hairline rules in place of cards, and Nomi as an ink-brush
   dragon. Choosing it renames the product Nomi, as the jade style does.
   ===================================================================== */
html[data-theme="ink"]{
  --pearl:#f2ece0;--paper:#f8f4ea;--ink:#1b1a17;--forest:#1b1a17;--forest-deep:#151412;--jade:#c23b25;
  --mint:#ece5d6;--mint-2:#ddd3bf;--gold:#6e675b;--gold-line:#c9bea8;--gold-soft:#e6dccb;
  --body:#3d3a33;--muted:#6e675b;--line:rgba(27,26,23,.14);--line-strong:rgba(27,26,23,.28);
  --display:'EB Garamond',serif;--sans:'EB Garamond',serif;--serif:'EB Garamond',serif;
  --shadow:none;
}
html[data-theme="ink"] body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px,#f2ece0}
html[data-theme="ink"] h1,html[data-theme="ink"] h2,html[data-theme="ink"] h3{font-weight:400;letter-spacing:-.012em}
html[data-theme="ink"] .h1{font-size:clamp(50px,6.6vw,94px);line-height:1}
html[data-theme="ink"] .h2{font-size:clamp(36px,4.6vw,60px);line-height:1.06}
html[data-theme="ink"] .jade{font-style:italic;color:#c23b25}
html[data-theme="ink"] .label{font-weight:500;font-size:12px;letter-spacing:.3em;color:#6e675b}
html[data-theme="ink"] .wordmark{font-weight:500;text-transform:lowercase;font-size:36px;letter-spacing:-.01em;color:#1b1a17}
html[data-theme="ink"] .wordmark::after{content:'.';color:#d4442a}
html[data-theme="ink"] .nav{background:rgba(242,236,224,.88)}
html[data-theme="ink"] .btn{font-weight:500;letter-spacing:.01em}
html[data-theme="ink"] .btn-primary{background:#cf4128;color:#fff;border-radius:3px;box-shadow:none}
html[data-theme="ink"] .btn-primary:hover{background:#b5351f;box-shadow:none}
html[data-theme="ink"] .link{text-decoration-color:#cf4128;text-decoration-thickness:1px}
html[data-theme="ink"] .hero-shade{background:linear-gradient(90deg,rgba(242,236,224,.96) 0%,rgba(242,236,224,.86) 32%,rgba(242,236,224,.2) 54%,rgba(242,236,224,0) 66%),linear-gradient(to bottom,rgba(242,236,224,0) 82%,#f2ece0 100%)}
html[data-theme="ink"] .hero-sub,html[data-theme="ink"] .hero-bold{font-size:20px}
/* paper and hairlines in place of cards */
html[data-theme="ink"] .tri,html[data-theme="ink"] .fit-item,html[data-theme="ink"] .tier,html[data-theme="ink"] .anything,html[data-theme="ink"] .window{border-radius:2px;background:rgba(248,244,234,.7);border:1px solid var(--line-strong);box-shadow:none}
html[data-theme="ink"] .tri.dark{background:#1b1a17;border-color:#1b1a17}
html[data-theme="ink"] .price-card{border-radius:0;background:transparent;border:1px solid #1b1a17}
html[data-theme="ink"] .pc-price{border-color:var(--line-strong)}
html[data-theme="ink"] .pc-price .amount{font-weight:400}
html[data-theme="ink"] .tri-bar i{background:#cf4128}
html[data-theme="ink"] .tri-ck,html[data-theme="ink"] .cp-check,html[data-theme="ink"] .fit-ck,html[data-theme="ink"] .sc-ck,html[data-theme="ink"] .sv-ck{background:#cf4128}
html[data-theme="ink"] .chip{border-radius:2px;background:rgba(248,244,234,.8);border-color:var(--line-strong)}
html[data-theme="ink"] .faq-row h3{font-weight:500}
/* the six hats as a ruled, numbered list with a red dot, like a printed page */
html[data-theme="ink"] .hats{gap:0;counter-reset:hat;border-top:1px solid var(--line-strong)}
html[data-theme="ink"] .hat{position:relative;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent;padding:22px 24px 24px 56px}
html[data-theme="ink"] .hat::before{counter-increment:hat;content:counter(hat,decimal-leading-zero);position:absolute;left:18px;top:25px;font-size:15px;color:#6e675b;font-variant-numeric:tabular-nums}
html[data-theme="ink"] .hat-title{font-weight:400;color:#1b1a17;text-decoration-color:rgba(27,26,23,.4);text-decoration-thickness:1.5px}
html[data-theme="ink"] .hat-title::after{content:'';display:inline-block;width:6px;height:6px;margin-left:9px;border-radius:50%;background:#cf4128;vertical-align:.22em}
html[data-theme="ink"] .hat p{font-size:17px}
@media (min-width:1001px){html[data-theme="ink"] .hat:not(:nth-child(3n+1)){border-left:1px solid var(--line)}}
/* the band becomes black sumi paper with Nomi in white ink */
html[data-theme="ink"] .band{background:#151412}
html[data-theme="ink"] .band-media video{opacity:1}
html[data-theme="ink"] .band-shade{background:linear-gradient(90deg,rgba(21,20,18,.96) 0%,rgba(21,20,18,.78) 45%,rgba(21,20,18,.25) 75%,rgba(21,20,18,.1) 100%)}
html[data-theme="ink"] .steps > li{border-radius:2px;background:rgba(14,13,12,.86);border:1px solid rgba(242,236,224,.16)}
html[data-theme="ink"] .steps .sn{background:transparent;border:1px solid rgba(242,236,224,.5);color:#f2ece0;font-weight:500}
html[data-theme="ink"] .steps h3{font-size:24px;font-weight:500}
/* Nomi in ink takes the orb's places, drawn live in Braille dither (assets/nomi/nomi-dragon.js):
   the hero and the closing play the conversation, the chaos orb works, the app wall follows the scroll */
.ink-dragon{display:none}
html[data-theme="ink"] .ink-dragon{display:block}
html[data-theme="ink"] .hero-media video,html[data-theme="ink"] .final-orb video,html[data-theme="ink"] .cp-orb-vid,html[data-theme="ink"] .suck-sage video,html[data-theme="ink"] .hero-shade{display:none}
html[data-theme="ink"] .hero-media{background:transparent}
/* hero: the ring's center sits on the phone's left edge, so the head shows beside it as in the
   painted hero; it shrinks with the gap between the copy and the phone, and drops out when there is none */
html[data-theme="ink"] .hero-dragon{position:absolute;right:332px;top:calc(100% - 365px);width:clamp(0px,min(108.7vw - 861px,217.4vw - 2122px),600px);transform:translate(47%,-54%)}
@media (min-width:1001px) and (max-width:1079px){html[data-theme="ink"] .hero-dragon{display:none}}
html[data-theme="ink"] .cp-orb .ink-dragon,html[data-theme="ink"] .suck-sage .ink-dragon{position:absolute;inset:0}
/* the chaos orb: the pearl sits at the drawing's center, so turning the whole dragon swims her round it, counterclockwise */
/* its own layer, so the turn is the compositor's job and the text redraws do not have to be re-rasterized rotated */
html[data-theme="ink"] .cp-orb .ink-dragon{animation:cpSwim 14s linear infinite;will-change:transform;backface-visibility:hidden}
@keyframes cpSwim{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){html[data-theme="ink"] .cp-orb .ink-dragon{animation:none}}
html[data-theme="ink"] .final-orb{width:min(420px,82vw);mix-blend-mode:normal;cursor:pointer}
@media (max-width:1000px){html[data-theme="ink"] .hero-dragon{left:50%;right:auto;top:43%;width:min(46vw,420px);transform:translate(-50%,-50%)}}
html[data-theme="ink"] .tg-av span{background:#f2ece0}
html[data-theme="ink"] .tg-chat{background:linear-gradient(160deg,#f4efe4 0%,#efe7d8 100%)}
html[data-theme="ink"] .tg-kb button,html[data-theme="ink"] .tg-done{background:rgba(207,65,40,.85)}
html[data-theme="ink"] .bub .quote{border-left-color:#cf4128;background:rgba(207,65,40,.08)}
html[data-theme="ink"] .bub .quote em{color:#a8321d}
/* chaos scene */
html[data-theme="ink"] .cp-stage{background:#f2ece0}
html[data-theme="ink"] .cp-stage::before{background:linear-gradient(to bottom,#f2ece0,rgba(242,236,224,0))}
html[data-theme="ink"] .cp-stage::after{background:linear-gradient(to top,#f2ece0,rgba(242,236,224,0))}
html[data-theme="ink"] .cp-glow{background:radial-gradient(circle,rgba(255,250,238,.9) 0%,rgba(255,250,238,.4) 38%,rgba(255,250,238,0) 64%)}
html[data-theme="ink"] .cp-card{border-radius:2px;background:rgba(248,244,234,.92);border:1px solid rgba(27,26,23,.2);box-shadow:none;color:#1b1a17;font-family:'EB Garamond',serif}
/* the whole scene printed in Nomi's Braille dither (assets/js/chaos-dither.js): the plate, tiles,
   sparks, streams and card frames become dots; the cards' words and checks stay as type */
html[data-theme="ink"] .cp-stage{--cp-dither:1}
/* at the foot of the page: Gato centered under the price button, and the seated figure and the four
   cards moved right to balance the app tiles on the left. The dither prints the plate with its transform. */
@media (min-width:641px){
  html[data-theme="ink"] .cp-orb{left:39.375%}
  html[data-theme="ink"] .cp-plate{animation-name:cpKenInk}
  @keyframes cpKenInk{from{transform:translateX(4%) scale(1.09)}to{transform:translateX(4%) scale(1.13) translate(-.6%,-.4%)}}
  html[data-theme="ink"] .cp-c1{left:68.5%}html[data-theme="ink"] .cp-c2{left:72.5%}html[data-theme="ink"] .cp-c3{left:69.5%}html[data-theme="ink"] .cp-c4{left:67.5%}
}
/* on a phone the dots are coarse next to a small tile, so the tiles come bigger and fewer and print as apps */
@media (max-width:640px){html[data-theme="ink"] .cp-stage{--cp-scale:1.45;--cp-density:.55}}
.cp-dither{display:none}
html .cp-stage.dither{background:transparent}
.cp-stage.dither .cp-dither{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.cp-stage.dither .cp-plate,.cp-stage.dither .cp-streams,.cp-stage.dither .cp-glow,.cp-stage.dither .cp-ic,.cp-stage.dither .cp-lines{visibility:hidden}
.cp-stage.dither .cp-fx,.cp-stage.dither .cp-sparks{opacity:0}
.cp-stage.dither .cp-card{background:transparent;border-color:transparent;box-shadow:none;animation:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* stack scroll scene: a red sun behind Nomi, and the step pictures */
html[data-theme="ink"] .suck-card{border-radius:2px;background:#f8f4ea;border:1px solid rgba(27,26,23,.2);box-shadow:0 14px 28px -22px rgba(27,26,23,.4)}
html[data-theme="ink"] .suck-glow{background:radial-gradient(circle,#d4442a 0,#d4442a 26%,rgba(212,68,42,0) 26.6%)}
html[data-theme="ink"] .suck-count{background:#1b1a17;color:#f2ece0;border-radius:2px}
html[data-theme="ink"] .sv-win,html[data-theme="ink"] .sv-list,html[data-theme="ink"] .sv-note,html[data-theme="ink"] .sv-ai{border-radius:2px}
html[data-theme="ink"] .sv-me{background:#ece5d6;color:#1b1a17}
html[data-theme="ink"] .steps.go .sv-tog{background:#cf4128}
html[data-theme="ink"] .theme-switch{background:rgba(27,26,23,.9)}
html[data-theme="ink"] .theme-switch button[aria-pressed="true"]{background:#f2ece0;color:#1b1a17}
@media (max-width:1000px){html[data-theme="ink"] .hero-shade{background:linear-gradient(to bottom,rgba(242,236,224,0) 62%,#f2ece0 100%)}}
@media (prefers-reduced-motion:reduce){html[data-theme="moki"] .final-orb video{animation:none}}
@media (max-width:720px){
  /* six styles: the open switcher wraps onto two rows instead of running off the left edge */
  .theme-switch.open{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 24px);border-radius:24px}
  /* phones crop the ink plate to its mountains, so the seated figure stays clear of Nomi */
  html[data-theme="ink"] .cp-plate{object-position:16% 50%}
}

/* Zode, the Cyberpunk mascot, takes the orb's places: no hue shift, a neon glow instead */
html[data-theme="cyber"] .flow-orb video,html[data-theme="cyber"] .final-orb video,html[data-theme="cyber"] .cp-orb-vid,html[data-theme="cyber"] .suck-sage video,html[data-theme="cyber"] img[data-slot="still"]{filter:drop-shadow(0 0 14px rgba(0,229,255,.35)) drop-shadow(0 0 30px rgba(255,62,200,.22))}
html[data-theme="cyber"] .tg-av img,html[data-theme="cyber"] .cal-pill img,html[data-theme="cyber"] .sv-note img{filter:none}
html[data-theme="cyber"] .final-orb video,html[data-theme="cyber"] .cp-orb-vid,html[data-theme="cyber"] .suck-sage video{object-fit:contain}
/* Kawaii's product is called Moki: the katakana after the wordmark follows */
html[data-theme="kawaii"] .wordmark::after{content:'\30E2\30AD'}