:root {
  --bg: #eef0f5; --bg-2: #e3e6ee; --surface: rgba(255,255,255,.72); --surface-solid: #ffffff;
  --glass: rgba(255,255,255,.55); --glass-2: rgba(255,255,255,.8); --edge: rgba(12,16,30,.10); --edge-2: rgba(12,16,30,.18);
  --hi: rgba(255,255,255,.9);
  --text: #0a0d18; --muted: #555d73; --faint: #8b92a6; --ink: #0a0d18; --on-ink: #ffffff;
  --good: #0d9a68; --bad: #d23a30; --warn: #b07400;
  --code-bg: #0a0c14; --code-text: #e6e8f2;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 20px 60px -30px rgba(20,24,60,.35);
  --glow: 0 0 0 transparent;
  --spectrum: linear-gradient(90deg, #ff4d5e, #ff9a3d, #ffd23f, #7be06a, #2fd6c8, #4f86ff, #8a6bff, #ff5cb8);
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ui: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r-sm: 8px; --r: 12px; --r-lg: 20px; --r-xl: 28px;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #030409; --bg-2: #0a0c15; --surface: rgba(14,16,28,.62); --surface-solid: #0b0d17;
    --glass: rgba(255,255,255,.035); --glass-2: rgba(255,255,255,.06); --edge: rgba(255,255,255,.08); --edge-2: rgba(255,255,255,.16);
    --hi: rgba(255,255,255,.14);
    --text: #eef0f8; --muted: #9aa1b8; --faint: #5f6680; --ink: #f2f3fa; --on-ink: #05060b;
    --good: #3ddc97; --bad: #ff6b5f; --warn: #ffc24d; --code-bg: rgba(6,7,13,.85); --code-text: #e6e8f2;
    --shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(0,0,0,.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #030409; --bg-2: #0a0c15; --surface: rgba(14,16,28,.62); --surface-solid: #0b0d17;
  --glass: rgba(255,255,255,.035); --glass-2: rgba(255,255,255,.06); --edge: rgba(255,255,255,.08); --edge-2: rgba(255,255,255,.16);
  --hi: rgba(255,255,255,.14);
  --text: #eef0f8; --muted: #9aa1b8; --faint: #5f6680; --ink: #f2f3fa; --on-ink: #05060b;
  --good: #3ddc97; --bad: #ff6b5f; --warn: #ffc24d; --code-bg: rgba(6,7,13,.85); --code-text: #e6e8f2;
  --shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(0,0,0,.9);
  color-scheme: dark;
}
/* colour themes: each sets every variable the system dark mode sets, so they win over it */
:root[data-theme="forest"] {
  --bg: #04100b; --bg-2: #0a1a12; --surface: rgba(10,30,20,.62); --surface-solid: #0a1912;
  --glass: rgba(200,255,220,.04); --glass-2: rgba(200,255,220,.07); --edge: rgba(190,255,215,.09); --edge-2: rgba(190,255,215,.18);
  --hi: rgba(220,255,230,.14);
  --text: #e8f3ec; --muted: #96b3a2; --faint: #5d7d6a; --ink: #eaf6ee; --on-ink: #04100b;
  --good: #4ee39f; --bad: #ff6b5f; --warn: #ffc24d; --code-bg: rgba(3,11,7,.85); --code-text: #e3f0e8;
  --shadow: 0 1px 0 rgba(220,255,230,.06) inset, 0 30px 80px -30px rgba(0,0,0,.9);
  --nb1: rgba(61,220,151,.14); --nb2: rgba(47,196,170,.10); --nb3: rgba(180,230,90,.07);
  color-scheme: dark;
}
:root[data-theme="cocoa"] {
  --bg: #140c08; --bg-2: #1e140e; --surface: rgba(38,25,17,.62); --surface-solid: #1d130d;
  --glass: rgba(255,230,210,.04); --glass-2: rgba(255,230,210,.07); --edge: rgba(255,225,200,.09); --edge-2: rgba(255,225,200,.18);
  --hi: rgba(255,235,215,.14);
  --text: #f5ece4; --muted: #bba494; --faint: #806858; --ink: #f7eee6; --on-ink: #140c08;
  --good: #6fdc9a; --bad: #ff7a66; --warn: #ffc24d; --code-bg: rgba(12,7,4,.85); --code-text: #f0e6dc;
  --shadow: 0 1px 0 rgba(255,235,215,.06) inset, 0 30px 80px -30px rgba(0,0,0,.9);
  --nb1: rgba(224,164,106,.15); --nb2: rgba(196,110,70,.10); --nb3: rgba(255,200,140,.07);
  color-scheme: dark;
}
:root[data-theme="lilac"] {
  --bg: #f1ecfa; --bg-2: #e6ddf5; --surface: rgba(255,252,255,.72); --surface-solid: #fdfaff;
  --glass: rgba(255,255,255,.55); --glass-2: rgba(255,255,255,.8); --edge: rgba(45,20,90,.11); --edge-2: rgba(45,20,90,.2);
  --hi: rgba(255,255,255,.9);
  --text: #1b112b; --muted: #5f5377; --faint: #958aab; --ink: #1b112b; --on-ink: #ffffff;
  --good: #0d9a68; --bad: #d23a30; --warn: #b07400; --code-bg: #150e24; --code-text: #ece6f7;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 20px 60px -30px rgba(70,30,130,.35);
  --nb1: rgba(167,123,240,.26); --nb2: rgba(220,140,230,.16); --nb3: rgba(120,140,255,.12);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 96px); -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: transparent; color: var(--text); font: 15px/1.55 var(--ui); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #8a6bff; outline-offset: 2px; border-radius: 6px; }
::selection { background: #8a6bff; color: #fff; }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }

/* ---------- cosmic backdrop on every page ---------- */
#cosmos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.nebula { position: fixed; inset: -20%; z-index: -3; pointer-events: none;
  background:
    radial-gradient(40% 35% at 78% 22%, rgba(138,107,255,.16), transparent 70%),
    radial-gradient(35% 30% at 12% 85%, rgba(47,196,240,.10), transparent 70%),
    radial-gradient(30% 30% at 60% 95%, rgba(255,92,184,.08), transparent 70%),
    var(--bg);
}
/* the colour themes tint the glow with their own three colours (--nb1…3) */
:root[data-theme="forest"] .nebula, :root[data-theme="cocoa"] .nebula, :root[data-theme="lilac"] .nebula {
  background:
    radial-gradient(40% 35% at 78% 22%, var(--nb1), transparent 70%),
    radial-gradient(35% 30% at 12% 85%, var(--nb2), transparent 70%),
    radial-gradient(30% 30% at 60% 95%, var(--nb3), transparent 70%),
    var(--bg);
}
.grain { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- glass primitives ---------- */
.glass {
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-lg);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--shadow); position: relative;
}
.glass::before { /* top highlight */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(180deg, var(--hi), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.spot { --mx: 50%; --my: 50%; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(138,107,255,.12), transparent 45%);
}
.spot:hover::after { opacity: 1; }
.hud-label { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.spectral { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shimmer 8s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: pulse 2s infinite; display: inline-block; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* model gem */
.orb {
  --c1: #8a6bff; --c2: #2fc4f0; width: var(--s, 22px); height: var(--s, 22px); border-radius: 50%; flex: none; display: inline-block; position: relative;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,.35) 14%, transparent 34%),
    conic-gradient(from var(--a, 40deg), var(--c1), var(--c2), color-mix(in srgb, var(--c1) 50%, #000), var(--c1));
  box-shadow: 0 0 calc(var(--s, 22px) * .55) color-mix(in srgb, var(--c1) 55%, transparent), inset -2px -3px 6px rgba(0,0,0,.45);
}
/* with a model-family mark: the spectrum becomes a ring around a dark glass lens */
.orb.lens {
  --ring: max(2px, calc(var(--s, 22px) * .09)); --core: #0a0c16;
  display: inline-grid; place-items: center; color: #fff;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.28), transparent 38%),
    radial-gradient(circle closest-side, color-mix(in srgb, var(--c1) 26%, var(--core)) 0, var(--core) calc(100% - var(--ring)), transparent calc(100% - var(--ring) + 1px)),
    conic-gradient(from var(--a, 40deg), var(--c1), var(--c2), color-mix(in srgb, var(--c1) 50%, #000), var(--c1));
}
.orb.lens .logo { width: 54%; height: 54%; filter: drop-shadow(0 0 calc(var(--s, 22px) * .08) color-mix(in srgb, var(--c1) 80%, transparent)); }
.orb.big { --s: 104px; animation: spin 18s linear infinite; }
.orb.big.lens .logo { animation: spin 18s linear infinite reverse; }
.chip-logo { width: 13px; height: 13px; flex: none; color: color-mix(in srgb, var(--c, var(--faint)) 70%, var(--text)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c, transparent) 60%, transparent)); }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- nav ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(14px, 3vw, 32px); pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(var(--bg) 45%, transparent); }
.bar.scrolled::before { opacity: .92; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 650 20px/1 var(--display); letter-spacing: -.02em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--glass-2); border: 1px solid var(--edge); position: relative; overflow: hidden; }
.brand-mark svg { width: 18px; height: 18px; }
.brand-mark::after { content: ""; position: absolute; inset: auto -40% -50% -40%; height: 60%; background: var(--spectrum); filter: blur(10px); opacity: .55; }
.dock { display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; position: absolute; left: 50%; transform: translateX(-50%); }
.dock a { position: relative; text-decoration: none; color: var(--muted); font-size: 14px; padding: 8px 15px; border-radius: 999px; transition: color .2s; z-index: 1; }
.dock a:hover { color: var(--text); }
.dock a[aria-current="page"] { color: var(--text); }
.dock .ind { position: absolute; top: 5px; bottom: 5px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--edge-2); transition: left .35s cubic-bezier(.3,1.3,.5,1), width .35s cubic-bezier(.3,1.3,.5,1), opacity .2s; z-index: 0; }
.dock .ind::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -6px; height: 2px; border-radius: 2px; background: var(--spectrum); filter: blur(.3px); }
.bar-right { display: flex; align-items: center; gap: 8px; }
.credit-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 0 14px; height: 38px; border-radius: 999px; text-decoration: none; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer; color: var(--muted); transition: color .2s, border-color .2s; }
.icon-btn:hover { color: var(--text); border-color: var(--edge-2); }
.icon-btn svg { width: 16px; height: 16px; }
.menu-btn { display: none; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--edge-2); background: var(--glass); color: var(--text); cursor: pointer; text-decoration: none;
  font-weight: 500; font-size: 14px; white-space: nowrap; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: border-color .2s, background .2s, transform .15s, box-shadow .3s;
}
.btn:hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); background: var(--glass-2); }
.btn:active { transform: scale(.98); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn.primary { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.btn.primary:hover { box-shadow: 0 0 30px -4px rgba(138,107,255,.6), 0 0 60px -10px rgba(47,196,240,.4); }
.btn.prism { isolation: isolate; border: 0; background: var(--ink); color: var(--on-ink); }
.btn.prism::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -2; background: conic-gradient(from var(--ang, 0deg), #ff4d5e, #ffd23f, #7be06a, #2fc4f0, #8a6bff, #ff5cb8, #ff4d5e); animation: rot 4s linear infinite; }
.btn.prism::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--ink); }
.btn.prism:hover { box-shadow: 0 0 40px -6px rgba(138,107,255,.7); }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes rot { to { --ang: 360deg; } }
.btn.small { height: 34px; padding: 0 14px; font-size: 13px; }
.btn.lg { height: 52px; padding: 0 26px; font-size: 15px; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.input, .select, .textarea { width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(12px); transition: border-color .2s, box-shadow .2s; }
.textarea { height: auto; padding: 12px 14px; resize: none; }
.input:focus, .textarea:focus { outline: none; border-color: rgba(138,107,255,.6); box-shadow: 0 0 0 4px rgba(138,107,255,.12); }
label.field { display: grid; gap: 7px; font-size: 13px; color: var(--muted); }

/* ---------- layout ---------- */
main { min-height: calc(100vh - 76px); margin-top: -76px; }
.wrap { width: min(1240px, 100% - clamp(28px, 6vw, 72px)); margin-inline: auto; }
.page { padding: 132px 0 110px; }
.page-head { margin-bottom: 40px; display: grid; gap: 14px; }
.page-head h1 { font: 650 clamp(40px, 5.6vw, 72px)/1 var(--display); letter-spacing: -.035em; margin: 0; }
.page-head p { color: var(--muted); font-size: 17px; margin: 0; max-width: 62ch; }
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.sec-head h2 { font: 650 clamp(34px, 4.6vw, 60px)/1.02 var(--display); letter-spacing: -.035em; margin: 0; }
.sec-head p { color: var(--muted); font-size: 17px; margin: 0; max-width: 58ch; }
.band { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* page transition: a spectral sweep */
.sweep { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.sweep i { position: absolute; top: 0; bottom: 0; width: 40vw; left: -45vw; background: linear-gradient(90deg, transparent, rgba(255,77,94,.0) 10%, rgba(255,210,63,.18), rgba(47,196,240,.22), rgba(138,107,255,.18), transparent); filter: blur(30px); animation: sweep .6s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes sweep { to { left: 110vw; } }
.view { animation: viewIn .5s cubic-bezier(.2,.7,.2,1); }

/* warp: dive into the prism (see warp() in app.js) */
.warp { position: fixed; inset: 0; z-index: 160; }
.warp canvas { display: block; width: 100%; height: 100%; }
body.warping main { transform: perspective(1100px) rotateX(26deg) scale(.3); opacity: 0; filter: blur(6px); transition: transform .8s cubic-bezier(.5,0,.7,.45), opacity .45s .4s, filter .7s; }
body.warping .bar, body.warping footer { opacity: 0; transition: opacity .35s; }
.view.warp-in { animation: warpIn 1s cubic-bezier(.16,1,.3,1); }
@keyframes warpIn { from { transform: scale(1.14); filter: blur(10px); } to { transform: none; filter: none; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- HERO ---------- */
.hero { position: relative; height: 100vh; min-height: 720px; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 220px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-copy { position: absolute; left: clamp(20px, 5.5vw, 88px); bottom: clamp(110px, 15vh, 170px); z-index: 3; }
.hero-copy .sub { max-width: 48ch; }
.hero h1 { font: 700 clamp(54px, 8.2vw, 126px)/.92 var(--display); letter-spacing: -.045em; margin: 0 0 26px; font-variation-settings: "wdth" 88; }
.hero h1 .ln { display: block; white-space: nowrap; width: max-content; }
.hero h1 .ch { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.25em); transition: opacity .7s, filter .9s, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 28ms); }
.hero.ready h1 .ch { opacity: 1; filter: none; transform: none; }
.hero h1 .ln.spectral .ch { color: inherit; }
.hero .sub, .hero .hero-cta { opacity: 0; transform: translateY(12px); transition: opacity .8s .5s, transform .8s .5s cubic-bezier(.2,.7,.2,1); }
.hero .hero-cta { transition-delay: .65s; }
.hero.ready .sub, .hero.ready .hero-cta { opacity: 1; transform: none; }
.hero .sub { font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); max-width: 48ch; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hud { position: absolute; z-index: 3; opacity: 0; transition: opacity .9s .8s, transform .9s .8s cubic-bezier(.2,.7,.2,1); }
.hero.ready .hud { opacity: 1; transform: none !important; }
.hero-stats { display: flex; gap: clamp(20px, 3vw, 40px); margin: 34px 0 0; opacity: 0; transition: opacity .8s .8s; }
.hero.ready .hero-stats { opacity: 1; }
.hero-stats div { display: grid; gap: 4px; }
.hero-stats dt { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.hero-stats dd { margin: 0; font: 600 20px/1.1 var(--display); letter-spacing: -.01em; }
.hero-stats small { font: 12px var(--mono); color: var(--faint); margin-left: 3px; letter-spacing: 0; }
.hud-model { right: clamp(20px, 4vw, 56px); bottom: clamp(110px, 15vh, 170px); transform: translateY(10px); width: 300px; padding: 18px; border-radius: var(--r-lg); }
.hud-model .head { display: flex; gap: 12px; align-items: center; margin: 12px 0 14px; }
.hud-model .head b { display: block; font: 600 17px/1.2 var(--display); }
.hud-model .head small { color: var(--muted); }
.hud-model .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--edge); border-radius: var(--r); overflow: hidden; }
.hud-model .grid div { background: var(--surface-solid); padding: 10px 12px; }
.hud-model .grid span { display: block; font-size: 11.5px; color: var(--faint); }
.hud-model .grid b { font: 500 14px var(--mono); }
.hud-model .hint { font-size: 12.5px; color: var(--faint); margin-top: 12px; }
.skip { position: absolute; right: 24px; top: 92px; z-index: 4; font: 500 12px var(--mono); color: var(--faint); background: none; border: 0; cursor: pointer; padding: 8px; letter-spacing: .06em; }
.skip:hover { color: var(--text); }
.ray-tip { position: absolute; z-index: 5; pointer-events: none; padding: 10px 12px; border-radius: var(--r); font-size: 13px; min-width: 200px; opacity: 0; transition: opacity .12s; transform: translate(16px, -50%); display: flex; gap: 10px; align-items: center; }
.ray-tip.show { opacity: 1; }
.ray-tip b { display: block; font-weight: 600; }
.ray-tip span { color: var(--muted); font-size: 12.5px; }
/* the home page's Refract for Windows download */
.desk-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-xl); }
.desk-cta h2 { font: 650 clamp(26px, 3vw, 38px)/1.05 var(--display); letter-spacing: -.03em; margin: 10px 0 8px; }
.desk-cta p { color: var(--muted); margin: 0; max-width: 56ch; }
.desk-dl { display: grid; gap: 10px; justify-items: end; text-align: right; }
.desk-dl .btn { gap: 10px; }
.desk-dl small { color: var(--faint); font-size: 12.5px; max-width: 300px; }
.desk-dl small a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.win-logo { width: 17px; height: 17px; flex: none; }
@media (max-width: 760px) { .desk-cta { grid-template-columns: 1fr; } .desk-dl { justify-items: stretch; text-align: left; } .desk-dl .btn { justify-content: center; } }

/* ticker */
.ticker { position: relative; z-index: 2; border-block: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tick 80s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker a { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; text-decoration: none; font-size: 14px; border-right: 1px solid var(--edge); white-space: nowrap; }
.ticker a span.p { font: 12.5px var(--mono); color: var(--faint); }
.ticker a:hover { background: var(--glass-2); }

/* ---------- compare console ---------- */
.console { border-radius: var(--r-xl); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--edge); }
.lights { display: flex; gap: 6px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--edge-2); }
.console-bar .hud-label { margin-left: 8px; }
.console-bar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.compare-top { display: flex; gap: 10px; padding: 16px; border-bottom: 1px solid var(--edge); flex-wrap: wrap; }
.compare-top .input { flex: 1 1 320px; height: 52px; font-size: 15.5px; border-radius: 999px; padding: 0 22px; }
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); }
.lane { border-right: 1px solid var(--edge); min-height: 320px; display: flex; flex-direction: column; min-width: 0; position: relative; }
.lane:last-child { border-right: 0; }
.lane::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .8; }
.lane-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--edge); }
.lane-body { padding: 18px; font-size: 14.5px; flex: 1; overflow-wrap: anywhere; }
.lane-body pre { white-space: pre-wrap; background: var(--code-bg); border-radius: var(--r); padding: 12px 14px; font-size: 12.5px; }
.lane-body.empty { color: var(--faint); display: grid; place-items: center; text-align: center; font-size: 13.5px; }
.lane-foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--edge); }
.lane-foot div { padding: 10px 14px; border-right: 1px solid var(--edge); }
.lane-foot div:last-child { border-right: 0; }
.lane-foot span { display: block; font-size: 11px; color: var(--faint); font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.lane-foot b { font: 500 13.5px var(--mono); }
.speed { height: 2px; background: var(--edge); }
.speed i { display: block; height: 100%; width: 0; background: var(--c); box-shadow: 0 0 10px var(--c); transition: width .3s; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { padding: 26px; border-radius: var(--r-xl); min-height: 300px; display: flex; flex-direction: column; overflow: hidden; }
.tile h3 { font: 600 22px/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 8px; }
.tile p { color: var(--muted); margin: 0; font-size: 14.5px; max-width: 42ch; }
.tile .vis { flex: 1; margin-top: 22px; position: relative; min-height: 150px; }
.t-a { grid-column: span 4; } .t-b { grid-column: span 2; } .t-c { grid-column: span 2; } .t-d { grid-column: span 2; } .t-e { grid-column: span 2; }
.term { font: 13px/1.75 var(--mono); background: var(--code-bg); color: var(--code-text); border-radius: var(--r); padding: 16px 18px; border: 1px solid var(--edge); height: 100%; overflow: hidden; }
.term .ok { color: #7ef0b6; } .term .k { color: #9aa6ff; } .term .s { color: #f4d58d; } .term .c { color: #6b7385; }
.term .caret { display: inline-block; width: 8px; height: 15px; background: #e6e8f2; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
.gauge { width: 100%; height: 100%; max-height: 180px; }
.bars { display: flex; align-items: end; gap: 5px; height: 100%; }
.bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, color-mix(in srgb, var(--c) 30%, transparent), var(--c)); opacity: .9; transform-origin: bottom; transform: scaleY(0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.in .bars i { transform: scaleY(1); }
.keys-vis { display: grid; gap: 8px; }
.keys-vis div { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--glass); font: 12.5px var(--mono); }
.keys-vis em { font-style: normal; color: var(--good); }
.route-vis { width: 100%; height: 100%; }

/* code split */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid var(--edge); counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 13px/1 var(--mono); color: var(--faint); padding-top: 5px; }
.steps h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.steps p { margin: 0; color: var(--muted); }
.code { background: var(--code-bg); color: var(--code-text); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--edge); box-shadow: var(--shadow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.code-tabs { display: flex; gap: 2px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.07); align-items: center; }
.code-tabs .lights { margin-right: 10px; }
.code-tabs .lights i { background: rgba(255,255,255,.14); }
.code-tabs button { border: 0; background: transparent; color: #8d93a3; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.code-tabs button[aria-selected="true"] { background: rgba(255,255,255,.08); color: #fff; }
.code-tabs .copy { margin-left: auto; }
pre { margin: 0; overflow-x: auto; padding: 20px 22px; font: 13.5px/1.75 var(--mono); }
pre .del { color: #ff8f86; display: block; background: rgba(255,90,80,.09); margin: 0 -22px; padding: 0 22px; box-shadow: inset 2px 0 #ff6b5f; }
pre .add { color: #7ef0b6; display: block; background: rgba(60,220,150,.09); margin: 0 -22px; padding: 0 22px; box-shadow: inset 2px 0 #3ddc97; }
pre .cm { color: #6b7385; } pre .st { color: #f4d58d; }

/* CTA */
.cta { border-radius: var(--r-xl); padding: clamp(40px, 7vw, 90px); text-align: center; overflow: hidden; }
.cta canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.cta > *:not(canvas) { position: relative; z-index: 1; }
.cta h2 { font: 700 clamp(38px, 5.4vw, 76px)/.98 var(--display); letter-spacing: -.04em; margin: 0 0 18px; }
.cta p { color: var(--muted); font-size: 17px; margin: 0 auto 30px; max-width: 52ch; }
.cta .hero-cta { justify-content: center; }

footer { padding: 70px 0 50px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--edge); position: relative; }
footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
footer h4 { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
footer a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; }
footer a:hover { color: var(--text); }

/* ---------- models ---------- */
.models-top { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin-bottom: 26px; }
.stat-row { display: flex; gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--edge); border: 1px solid var(--edge); }
.stat-row div { padding: 14px 20px; background: var(--surface-solid); min-width: 130px; }
.stat-row b { display: block; font: 600 24px/1.1 var(--display); letter-spacing: -.02em; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.toolbar .input { flex: 1 1 280px; max-width: 460px; border-radius: 999px; padding-left: 18px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass); cursor: pointer; font-size: 13px; color: var(--muted); backdrop-filter: blur(12px); transition: .2s; }
.chip:hover { color: var(--text); border-color: var(--edge-2); }
.chip[aria-pressed="true"] { color: var(--text); border-color: var(--edge-2); background: var(--glass-2); box-shadow: inset 0 -2px 0 -0px color-mix(in srgb, var(--c, #8a6bff) 80%, transparent); }
.chips:not(.all) .chip.extra:not([aria-pressed="true"]) { display: none; }
.more-chip { border-style: dashed; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); flex: none; box-shadow: 0 0 8px var(--c, transparent); }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 500 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 14px 18px; border-bottom: 1px solid var(--edge); white-space: nowrap; }
th button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
th button[data-dir]::after { content: attr(data-dir); margin-left: 4px; color: var(--text); }
td { padding: 14px 18px; border-bottom: 1px solid var(--edge); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; transition: background .15s; }
tbody tr:hover { background: var(--glass-2); }
td.r, th.r { text-align: right; }
td.num, td .num { font-family: var(--mono); font-size: 13px; }
.mname { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.mname b { font-weight: 500; }
.mname small { color: var(--faint); display: block; font: 12px var(--mono); }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--edge); color: var(--muted); margin-left: 6px; white-space: nowrap; font-family: var(--mono); }
.tag.free, .tag.save-tag { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.tag.down-tag { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
/* Auto pick, pictures, savings */
.orb.auto { background: conic-gradient(#ff4d5e, #ff9a3d, #ffd23f, #7be06a, #2fd6c8, #4f86ff, #8a6bff, #ff5cb8, #ff4d5e) !important; position: relative; animation: orb-hue 6s linear infinite; }
.orb.auto::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--surface-solid); }
@keyframes orb-hue { to { filter: hue-rotate(360deg); } }
.auto-row span { display: flex; flex-direction: column; line-height: 1.25; }
.auto-sub { font-size: 11px; color: var(--faint); font-weight: 400; }
.msg-meta .saved, .saved { color: var(--good); }
.msg-meta .via { color: var(--muted); }
.saved-note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.saved-note b { color: var(--good); }
.attach-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.thumb { position: relative; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; display: grid; place-items: center; cursor: pointer; }
.thumb button svg { width: 11px; height: 11px; }
.msg.user .msg-pic { display: block; max-width: 220px; max-height: 160px; border-radius: 10px; margin-bottom: 6px; object-fit: cover; }
.pricebar { display: inline-block; width: 60px; height: 4px; border-radius: 2px; background: var(--edge); margin-left: 10px; vertical-align: middle; overflow: hidden; }
.pricebar i { display: block; height: 100%; background: var(--c); }
.empty-state { padding: 48px 24px; text-align: center; color: var(--muted); }
.more-row { text-align: center; padding: 18px; }

/* drawer */
/* (cursor: iOS Safari only sends taps on a plain div as clicks when it looks clickable) */
.scrim { cursor: pointer; position: fixed; inset: 0; background: rgba(2,3,8,.55); backdrop-filter: blur(4px); z-index: 80; opacity: 0; transition: opacity .25s; }
.scrim.show { opacity: 1; }
.drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(540px, calc(100% - 20px)); z-index: 81; transform: translateX(calc(100% + 20px)); transition: transform .4s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--surface-solid); }
.drawer.show { transform: none; }
.drawer-hero { flex: none; position: relative; padding: 30px 28px 22px; overflow: hidden; border-bottom: 1px solid var(--edge); }
.drawer-hero::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 35%, transparent), transparent 65%); }
.drawer-hero .icon-btn { position: absolute; right: 18px; top: 18px; }
.drawer-hero h2 { font: 650 32px/1.05 var(--display); letter-spacing: -.03em; margin: 18px 0 6px; position: relative; }
.drawer-hero .prov { color: var(--muted); position: relative; display: flex; align-items: center; gap: 8px; }
.drawer-body { padding: 22px 28px 28px; overflow-y: auto; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--r-lg); overflow: hidden; margin: 18px 0 20px; }
.specs div { padding: 16px; background: var(--surface-solid); }
.specs span { display: block; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.specs b { font: 500 18px var(--mono); }
.vs-official { border: 1px solid color-mix(in srgb, var(--good) 35%, var(--edge)); border-radius: var(--r-lg); padding: 16px 18px; margin: -4px 0 20px; background: color-mix(in srgb, var(--good) 6%, transparent); }
.vs-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.vs-head b { font: 650 22px/1 var(--display); color: var(--good); letter-spacing: -.02em; }
.vs-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 8px; }
.vs-row i { height: 6px; border-radius: 3px; background: var(--edge); overflow: hidden; }
.vs-row u { display: block; height: 100%; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.vs-row u.ours { background: linear-gradient(90deg, var(--c1), var(--good)); }
.vs-row b { font: 500 13px var(--mono); color: var(--text); }
.vs-row s { color: var(--faint); }
.vs-official p { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.desc { color: var(--muted); font-size: 14.5px; }
.idline { display: flex; align-items: center; gap: 8px; font: 13px var(--mono); color: var(--muted); padding: 10px 14px; border-radius: var(--r); background: var(--glass-2); border: 1px solid var(--edge); }
.idline span { flex: 1; }
.idline button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 4px; }

/* ---------- chat ---------- */
body[data-page="chat"] footer { display: none; }
body[data-page="chat"] main { margin-top: 0; }
/* fills the screen under the 76px top bar; pure CSS, so no scroll position or animation can squash it */
.chat { display: grid; grid-template-columns: 280px 1fr; gap: 12px; padding: 0 12px 12px; height: calc(100dvh - 76px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 460px; }
.threads { display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-xl); }
.threads-head { padding: 14px; display: grid; gap: 10px; }
.threads-head .btn { width: 100%; }
.thread-list { overflow-y: auto; padding: 0 8px 12px; flex: 1; }
.thread-list button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-list button:hover { background: var(--glass-2); color: var(--text); }
.thread-list button[aria-current="true"] { background: var(--glass-2); color: var(--text); box-shadow: inset 2px 0 #8a6bff; }
.thread-list .grp { padding: 14px 12px 6px; }
.trial-note { margin: 12px; padding: 14px; border-radius: var(--r-lg); font-size: 13px; color: var(--muted); border: 1px solid var(--edge); background: var(--glass); }
.trial-note b { color: var(--text); font-weight: 600; }
.meter { height: 4px; border-radius: 2px; background: var(--edge); margin: 10px 0; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--spectrum); }

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--r-xl); overflow: hidden; }
.chat-cols { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: 0; position: relative; }
.col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--edge); position: relative; }
.col:last-child { border-right: 0; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--edge); min-height: 60px; }
.picker-btn { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--edge); background: var(--glass-2); border-radius: 999px; padding: 6px 12px 6px 7px; cursor: pointer; max-width: 100%; min-width: 0; font-size: 14px; transition: border-color .2s; }
.picker-btn:hover { border-color: var(--edge-2); }
.picker-btn span:not(.orb) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-btn svg { width: 12px; height: 12px; flex: none; color: var(--muted); }
.col-head .price { margin-left: auto; color: var(--faint); font: 12px var(--mono); white-space: nowrap; }
.col-head .icon-btn { width: 30px; height: 30px; flex: none; }
.msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 26px clamp(16px, 4vw, 48px); }
.msgs-inner { max-width: 780px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.msg.user { justify-self: end; background: linear-gradient(135deg, rgba(138,107,255,.22), rgba(47,196,240,.14)); border: 1px solid var(--edge); padding: 11px 16px; border-radius: 18px 18px 4px 18px; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.ai { overflow-wrap: anywhere; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.msg.ai .orb { margin-top: 2px; }
.msg.ai .body p { margin: 0 0 12px; }
.msg.ai .body p:last-child { margin-bottom: 0; }
.msg.ai pre { background: var(--code-bg); color: var(--code-text); border-radius: var(--r); margin: 10px 0; font-size: 13px; padding: 14px 16px; border: 1px solid var(--edge); }
.msg.ai code { font: 13px var(--mono); background: var(--glass-2); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--edge); }
.msg.ai pre code { background: none; padding: 0; border: 0; }
.msg.ai ul, .msg.ai ol { margin: 0 0 12px; padding-left: 22px; }
.msg.ai h3 { margin: 16px 0 8px; font-size: 16px; }
.msg-meta { display: flex; gap: 14px; font: 11.5px var(--mono); color: var(--faint); margin-top: 10px; }
.msg.err { color: var(--bad); font-size: 14px; border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent); padding: 12px 16px; border-radius: var(--r); }
.msg.err a { color: inherit; font-weight: 600; }
.cursor::after { content: ""; display: inline-block; width: 7px; height: 15px; background: var(--text); margin-left: 3px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.chat-cols .chat-empty { position: absolute; inset: 60px 0 0 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; overflow-y: auto; background: var(--surface-solid); }
.chat-empty .inner { width: min(760px, 100%); }
.chat-empty h2 { font: 650 clamp(32px, 4vw, 52px)/1.02 var(--display); letter-spacing: -.035em; margin: 0 0 12px; }
.chat-empty > .inner > p { color: var(--muted); margin: 0 0 26px; max-width: 52ch; }
.start-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.start-card { text-align: left; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--edge); background: var(--glass); cursor: pointer; display: grid; gap: 10px; transition: border-color .2s, transform .2s; position: relative; overflow: hidden; }
.start-card:hover { border-color: var(--edge-2); transform: translateY(-2px); }
.start-card .hud-label { color: var(--faint); }
.start-card b { font: 600 16px var(--display); }
.start-card small { color: var(--muted); font: 12px var(--mono); }
.start-card[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c1) 70%, transparent); box-shadow: 0 0 30px -12px var(--c1); }
.starters { display: flex; flex-wrap: wrap; gap: 8px; }

.composer-wrap { padding: 14px clamp(14px, 3vw, 28px) 18px; border-top: 1px solid var(--edge); }
.composer { max-width: 820px; margin: 0 auto; border: 1px solid var(--edge); border-radius: var(--r-xl); background: var(--glass-2); transition: border-color .2s, box-shadow .3s; position: relative; }
.composer:focus-within { border-color: rgba(138,107,255,.5); box-shadow: 0 0 0 4px rgba(138,107,255,.1), 0 0 50px -20px rgba(138,107,255,.6); }
.composer textarea { border: 0; background: transparent; width: 100%; resize: none; padding: 16px 18px 6px; max-height: 220px; min-height: 56px; display: block; font-size: 15px; }
.composer textarea:focus { outline: none; }
.composer-foot { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px 14px; font: 12px var(--mono); color: var(--faint); }
.composer-foot #send { margin-left: auto; }

/* picker */
.pop { position: fixed; z-index: 90; width: min(440px, calc(100vw - 24px)); max-height: min(500px, 70vh); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface-solid); }
.pop .input { border: 0; border-bottom: 1px solid var(--edge); border-radius: var(--r-lg) var(--r-lg) 0 0; height: 52px; background: transparent; box-shadow: none; }
.pop-list { overflow-y: auto; padding: 6px; }
.pop-list button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; font-size: 14px; }
.pop-list button:hover, .pop-list button.active { background: var(--glass-2); }
.pop-list button span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-list small { color: var(--faint); font: 12px var(--mono); white-space: nowrap; }
.pop-list .locked { opacity: .45; }
/* effort: a four-bar meter on the button and in its menu */
/* (not .gauge: that's the spending-cap dial on the home page) */
.ef-meter { width: 15px; height: 15px; flex: none; }
.ef-meter rect { fill: color-mix(in srgb, var(--muted) 35%, transparent); }
.ef-meter rect.on { fill: var(--accent, #8a6bff); }
.effort-btn { padding: 6px 10px; font-size: 13px; }
.effort-btn.locked { color: var(--faint); }
.effort-btn .lock { width: 12px; height: 12px; flex: none; opacity: .8; }
.effort-pop { width: min(300px, calc(100vw - 24px)); }
.effort-pop .pop-list button { align-items: flex-start; }
.effort-pop .pop-list button .ef-meter { margin-top: 2px; }
.effort-pop .pop-list button span:nth-child(2) { white-space: normal; }
.effort-pop b { display: block; font-weight: 600; }
.effort-pop .pop-list small { display: block; font: 12.5px var(--ui, inherit); white-space: normal; margin-top: 2px; }
.effort-pop .pop-list button > svg:last-child { width: 14px; height: 14px; margin-left: auto; color: var(--accent, #8a6bff); flex: none; }
.theme-pop { width: 220px; }
.theme-pop svg { width: 16px; height: 16px; flex: none; color: var(--good); }
.theme-pop .swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid var(--edge-2);
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-ac) 50%); }

/* ---------- pricing ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-xl); overflow: hidden; }
.calc-in { padding: 32px; display: grid; gap: 22px; border-right: 1px solid var(--edge); }
.calc-out { padding: 32px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.calc-out::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(138,107,255,.3), transparent 65%); }
.calc-out > * { position: relative; }
.calc-out .big { font: 700 clamp(56px, 7vw, 96px)/1 var(--display); letter-spacing: -.05em; margin: 10px 0; }
.calc-out p { color: var(--muted); margin: 0; }
input[type="range"] { width: 100%; accent-color: #8a6bff; }
.range-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.range-row b { color: var(--text); font: 500 13.5px var(--mono); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 56px; }
.tier { padding: 26px; border-radius: var(--r-xl); }
.tier .hud-label { display: block; margin-bottom: 14px; }
.tier b { display: block; font: 650 40px/1 var(--display); letter-spacing: -.04em; margin-bottom: 8px; }
.tier p { color: var(--muted); margin: 0; font-size: 14.5px; }
.savings th span { font-size: 10px; opacity: .7; }
.savings td s { color: var(--faint); text-decoration-color: color-mix(in srgb, var(--bad, #ff6b5f) 70%, transparent); }
.savings .mname { min-width: 0; }
.savings .sl { font-style: normal; }
.save { display: inline-flex; align-items: center; gap: 10px; }
.savings tbody tr { cursor: default; }
.save i { display: block; width: 70px; height: 6px; border-radius: 3px; background: var(--edge); overflow: hidden; }
.save u { display: block; height: 100%; background: linear-gradient(90deg, var(--c), var(--good)); }
.save b { font: 650 17px/1 var(--display); color: var(--good); min-width: 44px; text-align: right; }
#boot-note { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--surface-solid, #0e101c); border: 1px solid var(--edge, rgba(255,255,255,.12)); color: var(--muted, #9aa1b8); font: 14px system-ui, sans-serif; }

/* ---------- status ---------- */
.st-group { border-radius: var(--r-xl); padding: 8px 0; margin-bottom: 16px; }
.st-ghead { display: flex; align-items: center; gap: 10px; padding: 14px 22px 10px; }
.st-ghead h2 { font: 600 18px var(--display); margin: 0; flex: 1; }
.st-ghead .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.st-row { display: grid; grid-template-columns: 14px minmax(0, 1.4fr) minmax(0, 1.6fr) 90px 100px 100px; gap: 16px; align-items: center; padding: 12px 22px; border-top: 1px solid var(--edge); }
.st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
.st-row.down .st-dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.st-row.down .st-name b { color: var(--muted); }
.st-name b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-name small { display: block; color: var(--faint); font: 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-hist { display: flex; gap: 2px; height: 22px; }
.st-hist i { flex: 1; border-radius: 2px; background: var(--edge); }
.st-hist i.ok { background: color-mix(in srgb, var(--good) 75%, transparent); }
.st-hist i.bad { background: var(--bad); }
.st-num { text-align: right; }
.st-num .hud-label { display: block; font-size: 10px; margin-bottom: 2px; }
.st-num b { font-size: 14px; }
.fine { color: var(--faint); font-size: 13px; margin: 14px 0 0; }
.fine a { color: var(--muted); }
.faq { margin-top: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 48px; }
.faq div { padding: 24px 0; border-top: 1px solid var(--edge); }
.faq h3 { margin: 0 0 6px; font-size: 16.5px; }
.faq p { margin: 0; color: var(--muted); }

/* ---------- docs ---------- */
.docs { display: grid; grid-template-columns: 220px 1fr; gap: 48px; }
.docs nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); align-self: start; display: grid; gap: 2px; padding: 10px; border-radius: var(--r-lg); }
.docs nav a { text-decoration: none; color: var(--muted); font-size: 14px; padding: 8px 12px; border-radius: 8px; }
.docs nav a:hover { color: var(--text); background: var(--glass-2); }
.docs article { min-width: 0; max-width: 800px; }
.docs h2 { font: 650 30px/1.1 var(--display); letter-spacing: -.03em; margin: 56px 0 12px; }
.docs h2:first-child { margin-top: 0; }
.docs p, .docs li { color: var(--muted); }
.docs p code, .docs td code { font: 13px var(--mono); background: var(--glass-2); border: 1px solid var(--edge); padding: 1px 6px; border-radius: 5px; color: var(--text); }
.docs .code, .docs .table-wrap { margin: 18px 0; }

/* ---------- console (account) ---------- */
.auth-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; min-height: 560px; }
.auth-art { position: relative; overflow: hidden; border-right: 1px solid var(--edge); padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; }
.auth-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.auth-art > div { position: relative; }
.auth-art h2 { font: 700 clamp(34px, 3.6vw, 52px)/.98 var(--display); letter-spacing: -.04em; margin: 0 0 12px; }
.auth-art p { color: var(--muted); margin: 0; max-width: 40ch; }
.auth { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.auth h1 { font: 650 36px/1.05 var(--display); letter-spacing: -.035em; margin: 0 0 8px; }
.auth > p { color: var(--muted); margin: 0 0 28px; }
.auth form { display: grid; gap: 14px; }
.auth .btn { height: 48px; }
.wallet-list { display: grid; gap: 10px; }
.wallet-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--edge); background: var(--glass); color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.wallet-btn:hover:not(:disabled) { border-color: color-mix(in srgb, #8a6bff 60%, var(--edge)); background: var(--glass-2); transform: translateY(-1px); }
.wallet-btn:disabled { opacity: .4; cursor: default; }
.wallet-btn img, .wallet-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.wallet-ico { display: grid; place-items: center; background: var(--glass-2); color: var(--muted); }
.wallet-btn b { flex: 1; font-weight: 600; }
.wallet-btn.busy { border-color: transparent; background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, conic-gradient(from var(--spin, 0deg), #ff4d5e, #ffd23f, #7be06a, #2fc4f0, #8a6bff, #ff5cb8, #ff4d5e) border-box; animation: wallet-spin 1.6s linear infinite; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes wallet-spin { to { --spin: 360deg; } }
.wallet-empty { color: var(--muted); font-size: 14.5px; margin: 0 0 4px; }
.wallet-empty a { color: var(--text); }
.wallet-note { color: var(--faint); font-size: 13px; margin: 16px 0 0; min-height: 1.4em; }
/* signing in the installed app through a wallet app (app.js: pageLink, appLink) */
.link-match { display: grid; justify-items: center; gap: 4px; text-align: center; margin-top: 6px; padding: 16px; border-radius: 16px; border: 1px dashed var(--edge-2); }
.link-match b { font-size: 34px; font-weight: 600; letter-spacing: .18em; }
.link-match small { color: var(--muted); font-size: 13px; }
.linkish { border: 0; background: none; padding: 0; color: var(--text); font: inherit; text-decoration: underline; cursor: pointer; }
.link-banner { font-size: 14px; color: var(--muted); background: var(--glass-2); border: 1px solid var(--edge); border-radius: var(--r); padding: 12px 14px; margin: 0 0 22px; }
.link-banner b { color: var(--text); }
.link-card { max-width: 520px; margin: 0 auto; padding: 34px; border-radius: var(--r-xl); }
.link-card h1 { font: 650 32px/1.1 var(--display); letter-spacing: -.03em; margin: 12px 0 10px; }
.link-card p { color: var(--muted); }
.link-code { font-size: 54px; font-weight: 600; letter-spacing: .2em; text-align: center; padding: 18px; margin: 18px 0 6px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--edge); }
input.link-code { height: auto; font-size: 44px; }
.form-err { color: var(--bad); font-size: 14px; min-height: 1em; }
.perks { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.perks li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.perks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spectrum); flex: none; box-shadow: 0 0 8px #8a6bff; }

.cgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.panel { border-radius: var(--r-xl); padding: 22px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { font: 600 18px/1.2 var(--display); letter-spacing: -.01em; margin: 0; }
.p-bal { grid-column: span 5; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 240px; }
.p-bal::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(138,107,255,.35), transparent 65%); }
.p-bal > * { position: relative; }
.balance { font: 700 clamp(52px, 6vw, 84px)/1 var(--display); letter-spacing: -.05em; margin: 14px 0 6px; }
.p-sys { grid-column: span 3; }
.p-sys .row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--edge); font-size: 13.5px; }
.p-sys .row:first-of-type { border-top: 0; }
.p-sys .row span { color: var(--muted); }
.p-sys .row b { font: 500 13px var(--mono); }
.p-chart { grid-column: span 4; }
.p-keys { grid-column: span 12; }
.p-models { grid-column: span 5; }
.p-recent { grid-column: span 7; }
.keyrow td:first-child { font-weight: 500; }
.keyrow.revoked { opacity: .45; }
.keyrow code { font: 12.5px var(--mono); color: var(--muted); }
.chart { width: 100%; height: 150px; display: block; }
.chart-meta { display: flex; justify-content: space-between; color: var(--faint); font: 11.5px var(--mono); margin-top: 10px; }

.modal-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(2,3,8,.6); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: viewIn .25s; }
.modal { border-radius: var(--r-xl); width: min(500px, 100%); padding: 30px; background: var(--surface-solid); }
.modal h2 { font: 650 26px/1.15 var(--display); margin: 0 0 8px; letter-spacing: -.03em; }
.modal p { color: var(--muted); margin: 0 0 18px; }
.modal .secret { display: flex; gap: 8px; align-items: center; background: var(--code-bg); color: #7ef0b6; border-radius: var(--r); padding: 12px 14px; font: 13px var(--mono); overflow-wrap: anywhere; border: 1px solid var(--edge); }
.modal .secret span { flex: 1; }
.modal.video-modal { width: min(1100px, 100%); padding: 0; overflow: hidden; position: relative; background: #000; }
.video-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-x { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; }
.watch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--muted); font: 500 14.5px var(--sans, inherit); cursor: pointer; padding: 6px 4px; transition: color .2s; }
.watch:hover { color: var(--text); }
.watch-play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text); padding-left: 2px;
  background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, conic-gradient(#ff4d5e, #ffd23f, #7be06a, #2fc4f0, #8a6bff, #ff5cb8, #ff4d5e) border-box; border: 1.5px solid transparent; transition: transform .2s; }
.watch:hover .watch-play { transform: scale(1.08); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.modal form { display: grid; gap: 14px; }

/* deposits */
.p-deps { grid-column: span 12; }
.modal.dep-modal { width: min(580px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; }
.dep-label { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.dep-amounts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dep-amounts .chip { height: 38px; padding: 0 16px; font-size: 14px; }
.dep-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.dep-custom .input { width: 110px; height: 38px; border-radius: 999px; }
.modal .secret { margin-bottom: 4px; color: var(--code-text); }
.dep-wallets { display: flex; gap: 8px; flex-wrap: wrap; }
.dep-wallets img { border-radius: 4px; }
.dep-none { font-size: 13.5px; color: var(--muted); }
.dep-status { font: 12.5px var(--mono); color: var(--muted); min-height: 1.2em; margin-top: 12px; }
.dep-manual { margin-top: 14px; font-size: 14px; color: var(--muted); }
.dep-manual summary { cursor: pointer; }
.dep-hash { display: flex; gap: 8px; margin-top: 10px; }
.dep-hash .input { font: 13px var(--mono); }
.dep-search { width: 100%; margin-bottom: 10px; }
.dep-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 236px; overflow-y: auto; padding: 2px; }
.dep-coin { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 11px; border-radius: var(--r); border: 1px solid var(--edge); background: var(--glass); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s, background .2s; min-width: 0; }
.dep-coin:hover { border-color: var(--edge-2); }
.dep-coin[aria-pressed="true"] { border-color: rgba(138,107,255,.7); background: var(--glass-2); box-shadow: 0 0 24px -10px #8a6bff; }
.dep-coin img { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.dep-coin span { min-width: 0; display: grid; }
.dep-coin b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-coin small { font: 11px var(--mono); color: var(--faint); }
.dep-warn { color: var(--warn); font-size: 13px; margin: 6px 0 0; }
.dep-fine { color: var(--faint); font-size: 12.5px; margin: 14px 0 0; }
.dep-meter { height: 6px; margin-top: 18px; }
.dep-meter.indeterminate i { width: 35%; animation: dep-slide 1.4s ease-in-out infinite; }
@keyframes dep-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.dep-hash .input { min-width: 0; flex: 1; }
.tag.dep-confirmed { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.tag.dep-pending { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.tag.dep-failed { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.tag.dep-expired { opacity: .6; }
.tag[class*="dep-"] { margin-left: 0; }

/* ---------- admin (#admin) ---------- */
.faint { color: var(--faint); }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adm-tabs .chip[aria-selected="true"] { color: var(--text); border-color: var(--edge-2); background: var(--glass-2); }
.adm-stats { flex-wrap: wrap; }
.adm-stats div { flex: 1; }
.adm-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
.adm-sec { margin-top: 16px; }
.adm-search { max-width: 280px; height: 38px; }
.adm-key { display: inline-flex; gap: 6px; align-items: center; }
.adm-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 6px; }
.adm-free { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; margin-bottom: 16px; font-size: 14px; }
.adm-free .meter { grid-column: 1 / -1; height: 6px; }
@media (max-width: 760px) { .adm-grid { grid-template-columns: 1fr; } .adm-search { max-width: none; } .panel-head:has(.adm-search) { flex-wrap: wrap; } }

/* ---------- install as an app ---------- */
.app-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cta .app-badges { justify-content: center; }
.app-badge { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px; border-radius: 12px; border: 1px solid var(--edge-2);
  background: var(--ink); color: var(--on-ink); font: inherit; cursor: pointer; text-align: left; transition: transform .15s, box-shadow .3s; }
.app-badge:hover { transform: translateY(-1px); box-shadow: 0 0 30px -6px rgba(138,107,255,.6); }
.app-badge svg { width: 24px; height: 24px; flex: none; }
.app-badge span { display: grid; line-height: 1.1; }
.app-badge small { font-size: 10.5px; opacity: .75; }
.app-badge b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.cta-app { margin: 26px 0 0; font-size: 14px; color: var(--muted); }
.install-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.install-head img { border-radius: 14px; flex: none; }
.install-head p { margin: 0; color: var(--muted); font-size: 14px; }
.install-away { font-size: 13.5px; color: var(--muted); background: var(--glass-2); border: 1px solid var(--edge); border-radius: var(--r); padding: 12px 14px; margin-bottom: 16px; }
.install-away .mono { color: var(--text); white-space: nowrap; }
.install-away .btn { margin-left: 6px; vertical-align: middle; }
.install-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: st; }
.install-steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; counter-increment: st; }
.step-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--glass-2); border: 1px solid var(--edge); position: relative; }
.step-ico::after { content: counter(st); position: absolute; top: -6px; left: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 600 11px/18px var(--mono); text-align: center; }
.step-ico svg { width: 20px; height: 20px; }
.install-steps li > span:last-child { padding-top: 9px; }
.install-now { width: 100%; justify-content: center; }
.install-or { text-align: center; font-size: 13px; color: var(--faint); margin: 18px 0 14px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 199; background: var(--ink); color: var(--on-ink); padding: 11px 18px; border-radius: 999px; font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; box-shadow: 0 10px 40px -10px rgba(138,107,255,.6); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.preview-note { position: relative; z-index: 51; font-size: 12.5px; color: var(--muted); text-align: center; padding: 7px 16px; border-bottom: 1px solid var(--edge); background: var(--bg-2); }
.preview-note b { color: var(--text); font-weight: 600; }
.preview-note ~ main { margin-top: -76px; }
.only-sm { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hud-model { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-a { grid-column: span 2; }
  .t-b, .t-c, .t-d, .t-e { grid-column: span 1; }
  .p-bal, .p-sys, .p-chart, .p-models, .p-recent { grid-column: span 12; }
}
@media (max-width: 960px) {
  .split, .calc, .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--edge); }
  .lanes { grid-template-columns: 1fr; }
  .lane { border-right: 0; border-bottom: 1px solid var(--edge); min-height: 200px; }
  .lane:last-child { border-bottom: 0; }
  .calc-in { border-right: 0; border-bottom: 1px solid var(--edge); }
  .docs { grid-template-columns: 1fr; }
  .docs nav { position: static; display: flex; flex-wrap: wrap; }
  .chat { grid-template-columns: minmax(0, 1fr); }
  .threads { display: none; }
  .chat.show-threads .threads { display: flex; position: fixed; inset: 76px 12px 12px; z-index: 70; background: var(--surface-solid); }
  .only-sm { display: inline-flex; }
  .tiers, .start-cards { grid-template-columns: 1fr; }
  .models-top { grid-template-columns: 1fr; }
  footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .dock { display: none; position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; transform: none; flex-direction: column; align-items: stretch; border-radius: var(--r-lg); padding: 8px; background: var(--surface-solid); }
  .dock.open { display: flex; }
  .dock a { padding: 13px 14px; font-size: 16px; }
  .dock .ind { display: none; }
  .dock a[aria-current="page"] { background: var(--glass-2); }
  .menu-btn { display: grid; }
  .credit-pill { display: none; }
  .hero { min-height: 680px; }
  .hero-copy { bottom: 70px; right: 20px; }
  .hero h1 { font-size: 13.2vw; }
  .hero-stats { margin-top: 26px; }
  .chat-cols { grid-auto-flow: row; grid-auto-rows: minmax(0, 1fr); }
  /* phones: two tidy rows instead of one squeezed one: the tools (Add model becomes just +) on top, the price
     estimate and Send underneath */
  .composer-wrap { padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .composer-foot { display: grid; grid-template-columns: repeat(4, auto) 1fr; justify-content: start; gap: 8px; padding: 4px 8px 8px 10px; }
  .composer-foot #send { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin: 0; }
  .composer-foot .icon-btn { width: 40px; height: 40px; }
  .composer-foot .icon-btn svg { width: 19px; height: 19px; }
  #add-col { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 999px; }
  #add-col svg { width: 18px; height: 18px; }
  #add-col .lbl { display: none; }
  .composer-foot .effort-btn { height: 40px; padding: 0 12px; font-size: 14px; }
  .composer-foot #send { height: 40px; padding: 0 18px; font-size: 15px; }
  .composer-foot #est { grid-column: 1 / -1; grid-row: 2; padding: 0 100px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .composer textarea { font-size: 16px; padding: 14px 14px 4px; min-height: 50px; }
  .col-head .icon-btn { width: 36px; height: 36px; }
  .msg-meta { flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
  .composer-foot .effort-btn { min-width: max-content; max-width: none; }
  .composer-foot .effort-btn span { overflow: visible; }
  .chat-cols .chat-empty { padding: 20px 18px; }
  .starters .btn { white-space: normal; text-align: left; height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
  .col { border-right: 0; border-bottom: 1px solid var(--edge); }
  .specs { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .t-a, .t-b, .t-c, .t-d, .t-e { grid-column: auto; }
  .hide-sm { display: none; }
  .st-row { grid-template-columns: 12px minmax(0, 1fr) 70px 80px; gap: 10px; padding: 12px 16px; }
  .st-ghead { padding: 12px 16px 8px; }
  /* phones: prices stack in two lines (input over output), no bar, no orb */
  .savings td, .savings th { padding: 12px 6px; }
  .savings th { font-size: 9.5px; letter-spacing: .04em; }
  .savings td:first-child, .savings th:first-child { padding-left: 14px; }
  .savings td:last-child, .savings th:last-child { padding-right: 14px; }
  .savings .orb, .savings .save i { display: none; }
  .savings .sl { display: block; height: 0; overflow: hidden; }
  .savings td.num { font-size: 12px; }
  .savings .mname b { font-size: 14px; }
  /* phones: the models table fits the screen: the name column shrinks (long IDs end in …), tighter cells */
  .models-table table { table-layout: fixed; }
  .models-table th:nth-child(2), .models-table th:nth-child(3) { width: 78px; }
  .models-table th:nth-child(3) { width: 88px; }
  .models-table th, .models-table td { padding: 12px 6px; }
  .models-table th:first-child, .models-table td:first-child { padding-left: 14px; }
  .models-table th:last-child, .models-table td:last-child { padding-right: 14px; }
  .models-table th { font-size: 10px; letter-spacing: .04em; }
  .models-table td.num { font-size: 12px; white-space: nowrap; }
  .models-table .mname { min-width: 0; gap: 10px; }
  .models-table .mname > div { min-width: 0; }
  .models-table .mname b { font-size: 14px; }
  .models-table .mname small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  .models-table .tag { margin-left: 4px; padding: 1px 6px; }
  .savings .save b { min-width: 0; font-size: 16px; }
  .stat-row div { min-width: 0; flex: 1; padding: 12px; }
  .skip { top: 84px; }
  /* phones: the model drawer rises from the bottom, clear of the notch and the home bar, leaving a strip of the
     dimmed page above it to tap to close; a bigger close button */
  .drawer { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 8px; right: 8px; width: auto; transform: translateY(calc(100% + 80px)); }
  .drawer-hero { padding: 24px 20px 18px; }
  .drawer-hero .icon-btn { width: 44px; height: 44px; right: 12px; top: 12px; z-index: 2; }
  .drawer-hero .icon-btn svg { width: 18px; height: 18px; }
  .drawer-body { padding: 18px 20px 24px; }
}
/* ---------- phones and tablets (touch, no mouse): lighter effects. Computers keep everything above. ----------
   Live blur behind see-through panels and the full-screen grain blend are the costliest things a phone's GPU
   redraws, so panels become near-solid glass instead (app.js also calms the starfield and prism: phoneFX). */
@media (hover: none) and (pointer: coarse) {
  .glass, .icon-btn, .btn, .input, .select, .textarea, .ticker, .code, .chip, .scrim, .modal-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass { background: color-mix(in srgb, var(--surface-solid) 90%, transparent); }
  /* small see-through controls relied on the blur to hide the page scrolling behind them */
  .icon-btn, .btn:not(.primary):not(.prism), .chip, .brand-mark { background: color-mix(in srgb, var(--surface-solid) 88%, transparent); }
  .ticker { background: color-mix(in srgb, var(--surface-solid) 80%, transparent); }
  .scrim { background: rgba(2,3,8,.72); }
  .modal-scrim { background: rgba(2,3,8,.78); }
  .grain { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero h1 .ch, .hero .sub, .hero .hero-cta, .hud { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* low balance: an amber pill, a banner on the console, a line in the chat sidebar */
.credit-pill.low { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.credit-pill.low .pulse, .low-banner .pulse { background: var(--warn); box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 60%, transparent); }
.low-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 0 0 18px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); color: var(--muted); font-size: 14.5px; }
.low-banner > div { flex: 1; min-width: 0; }
.low-banner b { color: var(--text); }
.low-banner > a { white-space: nowrap; font-weight: 600; }
.low-note { margin: 8px 0 6px; color: var(--warn); font-weight: 500; }
.low-note a { color: inherit; font-weight: 650; }
@media (max-width: 640px) { .low-banner { flex-wrap: wrap; } }

/* deposit receipts, printable on their own */
.receipt-modal { max-width: 460px; }
.receipt .r-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--edge); }
.receipt .r-brand { font: 700 22px var(--display); letter-spacing: -.02em; }
.receipt .r-total { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 10px; }
.receipt .r-total span { color: var(--muted); }
.receipt .r-total b { font: 650 34px var(--display); }
.receipt .r-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--edge); font-size: 14px; }
.receipt .r-row span { color: var(--muted); }
.receipt .r-row b { font-weight: 550; text-align: right; overflow-wrap: anywhere; }
.receipt .r-faint { color: var(--faint); font-weight: 400; }
.receipt .r-note { margin-top: 16px; font-size: 12.5px; color: var(--faint); }
@media print {
  body.printing-receipt > *:not(.modal-scrim) { display: none !important; }
  body.printing-receipt { background: #fff !important; }
  body.printing-receipt .modal-scrim { position: static; background: none; backdrop-filter: none; padding: 0; }
  body.printing-receipt .modal { box-shadow: none; border: 0; background: #fff; color: #111; max-width: none; }
  body.printing-receipt .receipt .r-row span, body.printing-receipt .receipt .r-total span, body.printing-receipt .receipt .r-note, body.printing-receipt .receipt .r-faint { color: #555; }
  body.printing-receipt .receipt .r-row, body.printing-receipt .receipt .r-head { border-color: #ddd; }
  body.printing-receipt .no-print { display: none !important; }
}

/* long code in replies: a card with the file name, a short preview, and Copy / Download / Preview */
.ccard { margin: 10px 0 12px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--code-bg); overflow: hidden; }
.ccard .cc-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--edge); background: color-mix(in srgb, var(--glass-2) 60%, transparent); }
.ccard .cc-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; font: 600 9.5px var(--mono); letter-spacing: .02em; color: #ffb48a; background: rgba(255,140,90,.12); border: 1px solid rgba(255,140,90,.28); }
.ccard .cc-t { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.ccard .cc-t b { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard .cc-t small { font: 11.5px var(--mono); color: var(--faint); }
.ccard .cc-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.msg.ai .ccard pre, .lane-body .ccard pre { margin: 0; border: 0; border-radius: 0; background: none; max-height: 9.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.msg.ai .ccard.open pre, .lane-body .ccard.open pre { max-height: 70vh; overflow: auto; -webkit-mask-image: none; mask-image: none; }
.ccard .cc-more { display: block; width: 100%; border: 0; border-top: 1px solid var(--edge); background: none; color: var(--muted); font-size: 13px; padding: 8px; cursor: pointer; }
.ccard .cc-more:hover { color: var(--text); background: var(--glass-2); }
.ccard .cc-more b { color: var(--text); font-weight: 600; }
.ccard.writing pre.cc-tail { max-height: none; -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
.ccard .cc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--acc, #8a6bff) 25%, transparent); border-top-color: var(--acc, #8a6bff); animation: spin .8s linear infinite; flex: none; margin-right: 4px; }
@media (max-width: 640px) { .ccard .cc-h { flex-wrap: wrap; } .ccard .cc-b { width: 100%; justify-content: flex-start; } }

/* the sandboxed preview of an HTML file */
.modal.preview-modal { width: min(1100px, 100%); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.preview-modal .pv-h { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--edge); }
.preview-modal .pv-h .icon-btn { margin-left: auto; width: 32px; height: 32px; }
.preview-modal .pv-frame { display: block; width: 100%; height: min(72vh, 760px); border: 0; background: #fff; }