/* Actually Indian: the site. The model's live console on top, a dense sheet of live tiles, the outputs reel. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
body.pre [data-live-only] { display: none !important; }
:root { --pad: clamp(14px, 2.2vw, 40px); --gap: clamp(10px, 0.9vw, 16px); }

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px var(--pad); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-name { font: 800 14px/1 var(--font); font-stretch: 125%; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.onair { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--ink); color: var(--paper); font: 700 10.5px/1 var(--font); font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase; }
.onair i { width: 7px; height: 7px; border-radius: 50%; background: var(--bindi); box-shadow: 0 0 0 3px oklch(0.54 0.205 28 / 0.35); }
.onair.off { background: var(--sand); color: var(--ink-3); }
.onair.off i { background: var(--ink-3); box-shadow: none; }
.top-right { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 20px); }
.ca { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 5px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper-2); font: 600 13px/1 var(--font); color: var(--ink); white-space: nowrap; }
.ca-k { display: grid; place-items: center; height: 28px; padding: 0 8px; border-radius: 7px; background: var(--sand); font: 800 10.5px/1 var(--font); font-stretch: 118%; letter-spacing: 0.1em; color: var(--ink-2); }
.ca-v { font-variant-numeric: tabular-nums; }
body.pre .ca-v { color: var(--ink-3); font-weight: 500; }
.ca-copy { width: 15px; color: var(--ink-3); }
.stats { display: flex; gap: 18px; margin: 0; }
.stats div { display: grid; gap: 4px; }
.stats dt { font: 700 9.5px/1 var(--font); font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.stats dd { margin: 0; font: 800 15px/1 var(--font); font-variant-numeric: tabular-nums; }
.buy { display: inline-grid; place-items: center; height: 40px; padding: 0 20px; border-radius: 11px; background: var(--saffron); color: var(--ink); font: 800 14.5px/1 var(--font); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35), 0 2px 0 var(--saffron-deep), 0 10px 22px -12px oklch(0.55 0.18 40 / 0.8); transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.buy:hover { transform: translateY(-1px); }
.buy:active { transform: translateY(1px); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35), 0 1px 0 var(--saffron-deep); }

/* ---------- console: the answer as it is made, his face, one chat ---------- */
.console { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 420px); gap: var(--gap); padding: 2px var(--pad) var(--gap); height: clamp(560px, calc(100svh - 64px), 880px); }
.response { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.resp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.resp-state { display: inline-flex; align-items: center; gap: 8px; font: 800 11px/1 var(--font); font-stretch: 118%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.resp-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.response[data-act="writing"] .resp-state, .response[data-act="drawing"] .resp-state, .response[data-act="image"] .resp-state, .response[data-act="done"] .resp-state { color: var(--ink); }
.response[data-act="writing"] .resp-state i, .response[data-act="drawing"] .resp-state i, .response[data-act="image"] .resp-state i { background: var(--saffron); box-shadow: 0 0 0 3px oklch(0.69 0.2 44 / 0.2); }
.response[data-act="thinking"] .resp-state i { background: var(--saffron); animation: think 1.1s ease-in-out infinite; }
.response[data-act="done"] .resp-state i { background: var(--badge); }
@keyframes think { 50% { transform: scale(0.55); opacity: 0.45; } }
.resp-timer { font: 700 12.5px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.resp-ask { padding: 16px 22px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ask-text { margin: 0; font: 800 clamp(19px, 1.55vw, 27px)/1.15 var(--font); font-stretch: 92%; letter-spacing: -0.005em; overflow-wrap: anywhere; text-wrap: balance; }
.ask-who { margin: 6px 0 0; font: 600 12.5px/1.3 var(--font); color: var(--ink-3); }
.ask-who .src { margin: 0 4px; }
.resp-body { position: relative; flex: 1; min-height: 0; }
.output, .resp-idle, .resp-refused { position: absolute; inset: 0; }
.output .ov-text, .output .ov-draw, .output .ov-image { position: absolute; inset: 0; display: none; }
.output[data-kind="text"] .ov-text { display: block; }
.output[data-kind="draw"] .ov-draw, .output[data-kind="image"] .ov-image { display: grid; place-items: center; padding: 14px; container-type: size; }
.ov-scroll { height: 100%; overflow-y: auto; padding: 20px 24px 40px; scrollbar-width: thin; }
.ov-words { margin: 0; max-width: 68ch; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 clamp(16px, 1.08vw, 19px)/1.62 var(--font); }
.ov-caret { display: inline-block; width: 0.5em; height: 1.05em; margin-left: 3px; vertical-align: -0.16em; border-radius: 2px; background: var(--saffron); animation: caret 1.05s steps(1) infinite; }
.response[data-act="done"] .ov-caret { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.ov-draw canvas { display: block; width: min(100cqw, 150cqh); height: auto; aspect-ratio: 3 / 2; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.ov-image img { display: block; max-width: 100cqw; max-height: 100cqh; object-fit: contain; border-radius: 12px; box-shadow: 0 16px 34px -22px oklch(0.3 0.04 70 / 0.55); }
.ov-gen { margin: 0; font: 800 clamp(18px, 1.6vw, 26px)/1.1 var(--font); font-stretch: 90%; color: var(--ink-3); animation: think 1.4s ease-in-out infinite; }
.resp-idle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: clamp(20px, 3vw, 48px); text-align: center; overflow-y: auto; }
.idle-k { margin: 0; font: 800 11px/1 var(--font); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--saffron-deep); }
.idle-t { margin: 0; max-width: 16ch; font: 900 clamp(30px, 2.8vw, 50px)/0.98 var(--font); font-stretch: 80%; letter-spacing: -0.015em; text-wrap: balance; }
.idle-s { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: clamp(13.5px, 0.95vw, 15px); }
.idle-s:empty { display: none; }
.idle-s .tag-ai { font-size: 0.9em; }
.idle-next { list-style: none; display: grid; gap: 6px; width: min(100%, 560px); margin: 4px 0 0; padding: 0; counter-reset: q; text-align: left; }
.idle-next:empty { display: none; }
.idle-next li { counter-increment: q; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--paper); font: 600 13.5px/1.25 var(--font); }
.idle-next li::before { content: counter(q); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--paper); font: 800 12px/1 var(--font); }
.idle-next li small { display: block; margin-top: 2px; font-weight: 500; font-size: 11.5px; color: var(--ink-3); }
.suggest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 600px); margin-top: 8px; }
.suggest button { display: grid; gap: 3px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--paper); text-align: left; transition: background 0.15s, transform 0.15s var(--ease-out), border-color 0.15s; }
.suggest button:hover { background: var(--saffron-soft); border-color: oklch(0.69 0.2 44 / 0.45); transform: translateY(-1px); }
.suggest button:active { transform: translateY(0); }
.suggest b { font: 800 13.5px/1.2 var(--font); }
.suggest span { font: 500 13px/1.3 var(--font); color: var(--ink-2); }
.resp-refused { display: grid; place-items: center; padding: 24px; background: oklch(0.984 0.005 90 / 0.94); animation: fade 0.3s var(--ease-out); }
.resp-refused p { margin: 0; max-width: 18ch; text-align: center; font: 800 clamp(22px, 2vw, 34px)/1.12 var(--font); font-stretch: 90%; }
@keyframes fade { from { opacity: 0; } }
.resp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 7px 10px 7px 18px; border-top: 1px solid var(--line); background: var(--paper); }
.resp-meta { font: 600 12px/1.3 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* votes, drawn rather than emoji */
.rate { display: inline-flex; gap: 6px; }
.rate button, .vote button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper-2); font: 700 12.5px/1 var(--font); font-variant-numeric: tabular-nums; transition: transform 0.15s var(--ease-out), background 0.15s; }
.rate button:active, .vote button:active { transform: scale(0.95); }
.rate button[aria-pressed="true"], .vote button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.thumb { display: inline-block; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--thumb) center / contain no-repeat; mask: var(--thumb) center / contain no-repeat;
  --thumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v11H2zM8 21V10l5.2-7.4c.6-.8 1.9-.6 2.2.4.2.6.1 1.2-.1 1.8L14 9h6.3c1.2 0 2 1.1 1.7 2.2l-2.1 8.2c-.3 1-1.2 1.6-2.2 1.6z'/%3E%3C/svg%3E"); }
.thumb.down { transform: rotate(180deg); }

/* ---------- the stream: pump.fun's whole frame, nothing cut off ---------- */
.side { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.face { position: relative; flex: none; margin: 0; aspect-ratio: 16 / 9; max-height: 46%; border-radius: 18px; overflow: hidden; background: oklch(0.12 0.006 75); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.face.on video { visibility: visible; }
.face.on .tv { visibility: hidden; }

/* no picture: the screen stays dark and says why */
.tv { position: absolute; inset: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55em; overflow: hidden; text-align: center;
  background: radial-gradient(95% 85% at 50% 46%, oklch(0.25 0.012 75), oklch(0.14 0.008 75) 66%, oklch(0.1 0.006 75)); }
.tv::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 50% at 18% 12%, oklch(0.98 0.01 85 / 0.08), transparent 70%), repeating-linear-gradient(to bottom, oklch(0.98 0.01 85 / 0.04) 0 1px, transparent 1px 3px); }
.tv-t { position: relative; margin: 0; font: 800 clamp(14px, 5.2cqi, 22px)/1 var(--font); font-stretch: 118%; letter-spacing: 0.07em; text-transform: uppercase; color: oklch(0.95 0.012 85); text-shadow: 0 0 0.7em oklch(0.95 0.03 85 / 0.3); }
.tv-s { position: relative; margin: 0; min-height: 1.3em; font: 600 clamp(11.5px, 3.2cqi, 14px)/1.3 var(--font); color: oklch(0.74 0.016 80); }
/* pump.fun says live and the picture is on its way: a slow roll down the glass */
.face:not(.sleep):not(.on) .tv::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 32%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, oklch(0.98 0.01 85 / 0.08), transparent); animation: tv-roll 2.6s linear infinite; }
@keyframes tv-roll { from { transform: translateY(-100%); } to { transform: translateY(320%); } }
.face-bar { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.watch { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 8px; background: oklch(0.225 0.012 75 / 0.88); color: var(--paper); font: 700 11.5px/1 var(--font); font-variant-numeric: tabular-nums; }
.watch i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.face.on .watch i { background: var(--bindi); }
.ctl { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--paper); color: var(--ink); font: 700 11.5px/1 var(--font); box-shadow: 0 6px 16px -8px oklch(0.2 0.02 70 / 0.5); }
.ctl svg { width: 14px; }

/* ---------- one chat ---------- */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line); }
.tabs { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sand); }
.tabs button { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; font: 700 12.5px/1 var(--font); color: var(--ink-2); }
.tabs button[aria-selected="true"] { background: var(--paper-2); color: var(--ink); box-shadow: 0 1px 2px oklch(0.3 0.02 70 / 0.2); }
.tabs b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 5px; background: var(--saffron); color: var(--ink); font-size: 11px; }
.chat-src { display: inline-flex; align-items: center; gap: 5px; padding-right: 4px; font: 600 11px/1 var(--font); color: var(--ink-3); white-space: nowrap; }
.chat-src i { width: 6px; height: 6px; border-radius: 50%; }
.d-pump { background: oklch(0.72 0.17 152); }
.d-site { background: var(--saffron); margin-left: 5px; }
.msgs, .queue { list-style: none; margin: 0; padding: 10px 12px; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; scrollbar-width: thin; }
.msgs > li:first-child { margin-top: auto; }
.msgs li { font: 400 13.5px/1.45 var(--font); overflow-wrap: anywhere; }
.msgs li .src { margin-right: 5px; }
.msgs li b { font-weight: 700; margin-right: 4px; }
.msgs li.req { padding: 7px 9px; border-radius: 10px; background: var(--saffron-soft); }
.msgs li.by-model { padding: 7px 9px; border-radius: 10px; background: var(--ink); color: var(--paper); }
.src.model { background: var(--saffron); color: var(--ink); }
.src.model::before { background: var(--ink); }
.msgs .empty, .queue .empty { margin: auto 0; text-align: center; color: var(--ink-3); font-size: 13px; }
.st { display: inline-block; margin-left: 4px; padding: 3px 5px; border-radius: 5px; background: oklch(1 0 0 / 0.7); font: 700 9.5px/1 var(--font); font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; color: var(--saffron-deep); vertical-align: 1px; white-space: nowrap; }
.st.run { background: var(--ink); color: var(--paper); }
.queue li:not(.empty) { display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.queue .n { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 800 12px/1 var(--font); }
.queue li.run { background: var(--saffron-soft); border-color: transparent; }
.queue li.run .n { background: var(--saffron); color: var(--ink); }
.queue b { font: 700 13.5px/1.25 var(--font); overflow-wrap: anywhere; }
.queue small { font: 500 11.5px/1.2 var(--font); color: var(--ink-3); }
.queue small em { font-style: normal; color: var(--saffron-deep); font-weight: 700; }
.compose { display: grid; gap: 7px; padding: 8px; border-top: 1px solid var(--line); background: var(--paper); }
.mode { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--sand); }
.mode button { height: 30px; border: 0; border-radius: 8px; background: transparent; font: 700 12.5px/1 var(--font); color: var(--ink-2); }
.mode button[aria-checked="true"] { background: var(--paper-2); color: var(--ink); box-shadow: 0 1px 2px oklch(0.3 0.02 70 / 0.2); }
.mode button[data-mode="ai"][aria-checked="true"] { background: var(--saffron); }
.who { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.who label { font: 700 12px/1 var(--font); color: var(--ink-2); }
.who input, .field input { min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper-2); font: 500 15px/1 var(--font); color: var(--ink); }
.who input::placeholder, .field input::placeholder { color: var(--ink-3); }
.who input:focus, .field input:focus { outline: 2px solid var(--saffron); outline-offset: 1px; }
.field { display: flex; gap: 6px; }
.field input { flex: 1; }
.send { height: 40px; padding: 0 15px; border-radius: 10px; border: 0; background: var(--ink); color: var(--paper); font: 800 13.5px/1 var(--font); }
.send.ai { background: var(--saffron); color: var(--ink); }
.send:disabled { opacity: 0.55; cursor: default; }
.hint { margin: 0; font: 500 11.5px/1.4 var(--font); color: var(--ink-3); }
.hint .tag-ai { font-size: 10.5px; }

/* ---------- the model sheet: a dense grid of live tiles ---------- */
.sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: var(--gap) var(--pad); }
.tile { position: relative; display: flex; flex-direction: column; min-height: 300px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.strip { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--paper); font: 700 10px/1.2 var(--font); font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.strip span:first-child { color: var(--ink-2); }
.t-intro, .t-how { grid-column: span 2; }

.intro-body { flex: 1; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); align-items: end; gap: 6px; background: var(--studio); }
.intro-fig { width: 100%; height: auto; align-self: end; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%); mask-image: linear-gradient(to right, transparent 0, #000 12%); }
.intro-copy { align-self: center; padding: 22px 24px 22px 6px; display: grid; gap: 10px; }
.intro-copy h1 { margin: 0; font: 900 clamp(32px, 2.6vw, 48px)/0.92 var(--font); font-stretch: 78%; letter-spacing: -0.015em; }
.intro-copy .lede { margin: 0; font: 800 clamp(16px, 1.15vw, 20px)/1.2 var(--font); font-stretch: 94%; }
.intro-copy p { margin: 0; color: var(--ink-2); font-size: 14px; }
.checks { list-style: none; display: grid; gap: 6px; margin: 4px 0 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font: 600 13.5px/1.35 var(--font); }
.checks li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; background: var(--saffron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231e1a14' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }

.spec { margin: 0; padding: 4px 14px 10px; flex: 1; display: grid; align-content: space-evenly; }
.spec div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.spec div:last-child { border-bottom: 0; }
.spec dt { color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
.spec dd { margin: 0; font-weight: 700; font-size: 13px; text-align: right; }

.bars { list-style: none; margin: 0; padding: 12px 14px 4px; flex: 1; display: grid; align-content: space-evenly; gap: 10px; }
.bars li { display: grid; gap: 4px; }
.bars b { font: 800 12.5px/1 var(--font); }
.bar { position: relative; display: flex; align-items: center; height: 14px; }
.bar i { height: 10px; width: calc(var(--v) * 0.8%); min-width: 3px; border-radius: 3px; background: var(--saffron); transform-origin: left; }
.bar.avg i { height: 6px; background: var(--line-2); }
.bar em { margin-left: 8px; font: 700 11px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bar.avg em { color: var(--ink-3); }
.legend { display: flex; gap: 14px; margin: 0; padding: 8px 14px 12px; font: 600 11px/1 var(--font); color: var(--ink-3); }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; background: var(--line-2); }
.legend .ours::before { background: var(--saffron); }

.steps { list-style: none; margin: 0; padding: 14px; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; display: flex; flex-direction: column; gap: 6px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 800 12px/1 var(--font); }
.steps li > b { font: 800 14.5px/1.2 var(--font); }
.steps li > b .tag-ai { font-size: 12.5px; }
.steps li > span { font-size: 12.5px; color: var(--ink-2); }
.viz { margin-top: auto; padding: 10px 11px; border-radius: 11px; background: var(--paper); border: 1px solid var(--line); font: 500 12.5px/1.35 var(--font); }
.viz .src { margin-right: 4px; }
.viz .tag-ai { font-size: 11px; }
.viz-ticket { display: grid; grid-template-columns: 30px 1fr; gap: 1px 9px; align-items: center; }
.viz-ticket span { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 12px; }
.viz-ticket b { font-size: 13px; }
.viz-ticket em { font-style: normal; font-size: 11.5px; color: var(--saffron-deep); font-weight: 700; }
.viz-rate { display: flex; gap: 8px; }
.viz-rate .thumb { width: 18px; height: 18px; }
.viz-rate span { flex: none; }
.viz-rate::before, .viz-rate::after { content: none; }

.roll { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.roll-track { list-style: none; margin: 0; padding: 6px 0; }
.roll.moving .roll-track { animation: roll var(--roll-s, 30s) linear infinite; }
.roll:hover .roll-track { animation-play-state: paused; }
@keyframes roll { to { transform: translateY(-50%); } }
.roll-track li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.roll-track li b { font: 700 13px/1.3 var(--font); overflow-wrap: anywhere; }
.roll-track li small { grid-column: 1; font: 500 11px/1.2 var(--font); color: var(--ink-3); }
.roll-track li .st { grid-row: span 2; align-self: center; margin: 0; }
.roll-track li.run { background: var(--saffron-soft); }
.roll-track .empty { display: grid; justify-items: center; gap: 12px; padding: 44px 18px; border: 0; text-align: center; color: var(--ink-3); font-size: 13px; }
.roll-track .empty button { height: 34px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--saffron); color: var(--ink); font: 800 12.5px/1 var(--font); }

.scale-body { flex: 1; display: grid; align-content: space-between; gap: 12px; padding: 14px; }
.fig { margin: 0; display: grid; gap: 4px; }
.fig b { font: 900 clamp(28px, 2.2vw, 38px)/1 var(--font); font-stretch: 82%; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fig span { font: 600 12px/1.2 var(--font); color: var(--ink-3); }
.next { display: grid; gap: 6px; font: 700 12.5px/1.25 var(--font); }
.next .track { height: 8px; border-radius: 4px; background: var(--sand); overflow: hidden; }
.next .track i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--bindi); transition: width 0.8s var(--ease-out); }
.ms { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ms li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font: 500 12px/1.3 var(--font); color: var(--ink-3); }
.ms li b { color: var(--ink-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.ms li.done { color: var(--ink); }
.ms li.done b { color: var(--ink); }
.ms li.done b::after { content: " ✓"; color: var(--badge); }
.ms li.next { color: var(--bindi); font-weight: 700; }
.ms li.next b { color: var(--bindi); }

/* ---------- outputs: two rows that never stop ---------- */
.outputs { padding: clamp(28px, 3.4vw, 56px) 0 clamp(34px, 4vw, 64px); }
.outputs-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 var(--pad); margin-bottom: 18px; }
.outputs-head h2 { margin: 0; font: 900 clamp(28px, 2.6vw, 46px)/0.95 var(--font); font-stretch: 78%; letter-spacing: -0.015em; }
.outputs-head p { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 14px; text-align: right; }
.reel { display: grid; gap: var(--gap); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.reel-row { display: flex; gap: var(--gap); width: max-content; animation: reel var(--reel-s, 80s) linear infinite; }
.reel-row.rev { animation-direction: reverse; }
.reel:hover .reel-row { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
.out { flex: none; width: 290px; display: flex; flex-direction: column; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.out .strip { padding: 8px 12px; }
.out .strip .ex { color: var(--saffron-deep); }
.out .q { margin: 0; padding: 12px 14px 0; font: 800 15px/1.25 var(--font); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.out .a { position: relative; height: 176px; margin: 10px 14px 0; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.out .a img, .out .a svg { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.out .a p { margin: 0; padding: 12px 14px; font: 500 13.5px/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); height: 100%; }
.out .a .big { display: grid; place-items: center; height: 100%; padding: 0; font: 900 76px/1 var(--font); font-stretch: 70%; color: var(--saffron); -webkit-mask-image: none; mask-image: none; }
.out .a .say { display: grid; place-items: center; height: 100%; padding: 0 12px; text-align: center; font: 900 40px/0.95 var(--font); font-stretch: 70%; -webkit-mask-image: none; mask-image: none; }
.out footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; font: 600 11.5px/1.3 var(--font); color: var(--ink-3); }
.out footer .vote { display: inline-flex; gap: 5px; }
.out footer .vote button { height: 28px; padding: 0 8px; font-size: 11.5px; }
.out footer .vote .thumb { width: 13px; height: 13px; }

/* ---------- footer ---------- */
.foot { padding: clamp(28px, 3.6vw, 56px) var(--pad) 28px; background: var(--ink); color: var(--paper); }
.foot-mark { margin: 0; font: 800 clamp(22px, 4.2vw, 72px)/0.9 var(--font); font-stretch: 125%; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid oklch(1 0 0 / 0.15); }
.ca--dark { background: oklch(1 0 0 / 0.06); border-color: oklch(1 0 0 / 0.16); color: var(--paper); }
.ca--dark .ca-k { background: oklch(1 0 0 / 0.1); color: var(--on-dark-2); }
.links { display: flex; gap: 22px; }
.links a { color: var(--paper); font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 1px solid oklch(1 0 0 / 0.3); }
.fine { margin: 18px 0 0; max-width: 70ch; font-size: 12.5px; color: var(--on-dark-2); }
.toast { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 11px 15px; border-radius: 11px; background: var(--ink); color: var(--paper); font: 600 13.5px/1.35 var(--font); box-shadow: 0 18px 40px -16px oklch(0.2 0.02 70 / 0.6); animation: fade 0.25s var(--ease-out); }

/* tiles land once, in order */
@media (prefers-reduced-motion: no-preference) {
  .sheet > .tile { animation: rise 0.6s var(--ease-out) both; }
  .sheet > .tile:nth-child(2) { animation-delay: 0.05s; } .sheet > .tile:nth-child(3) { animation-delay: 0.1s; }
  .sheet > .tile:nth-child(4) { animation-delay: 0.15s; } .sheet > .tile:nth-child(5) { animation-delay: 0.2s; } .sheet > .tile:nth-child(6) { animation-delay: 0.25s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .reel-row, .roll-track, .tv::after { animation: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .stats { display: none; }
  .console { grid-template-columns: 1fr; height: auto; }
  .response { min-height: 520px; }
  .side { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .face { max-height: none; }
  .chat { height: 100%; min-height: 460px; }
}
@media (max-width: 760px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .top-right { display: contents; }
  .buy { height: 38px; padding: 0 16px; font-size: 14px; }
  .ca { order: 3; width: 100%; justify-content: flex-start; }
  .ca-v { overflow: hidden; text-overflow: ellipsis; }
  .ca-copy { margin-left: auto; flex: none; }
  .console { display: flex; flex-direction: column; }
  .side { display: contents; }
  .face { order: -1; }
  .response { min-height: 440px; }
  .resp-idle { justify-content: flex-start; padding-top: 24px; }
  .suggest { gap: 6px; }
  .suggest button { padding: 10px 11px; }
  .chat { height: 500px; flex: none; }
  .sheet { grid-template-columns: 1fr; }
  .t-intro, .t-how { grid-column: auto; }
  .intro-body { grid-template-columns: 1fr; }
  .intro-fig { order: 2; width: 86%; justify-self: end; }
  .intro-copy { padding: 18px 16px 0; }
  .steps { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .roll { height: auto; max-height: 320px; flex: none; }
  .roll-track .empty { padding: 22px 14px; }
  .outputs-head { flex-direction: column; align-items: start; }
  .outputs-head p { text-align: left; }
  .out { width: 240px; }
  .out .a { height: 150px; }
}
@media (max-width: 480px) { .onair { display: none; } }

.response[data-act="idle"] .resp-foot { display: none; }