:root {
  --bg: #07100e;
  --panel: rgba(13, 27, 24, 0.78);
  --panel-strong: #10231f;
  --ink: #f2fff9;
  --muted: #a1bbb2;
  --faint: #6c8d82;
  --line: rgba(208, 255, 238, 0.14);
  --accent: #6fffc1;
  --accent-2: #b4ff5e;
  --accent-ink: #032318;
  --warm: #ffd06f;
  --danger: #ff8b8b;
  --display: "Manrope", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --radius: 22px;
  --shadow: 0 30px 90px -42px rgba(0, 0, 0, 0.9);
}

body[data-theme="future"] { --bg:#130d0a; --panel:#241713; --panel-strong:#2c1b15; --accent:#ffb56b; --accent-2:#ffe66f; --accent-ink:#2a1303; --line:rgba(255,226,196,.16); --muted:#c8aea0; --faint:#8e7265; }
body[data-theme="mistake"] { --bg:#13090c; --panel:#251116; --panel-strong:#32151d; --accent:#ff7f73; --accent-2:#ffc05c; --accent-ink:#300704; --line:rgba(255,208,196,.16); --muted:#cbb0b4; --faint:#917177; }
body[data-theme="agent"] { --bg:#090b18; --panel:#11162d; --panel-strong:#171e3c; --accent:#8ca8ff; --accent-2:#d69cff; --accent-ink:#0c1232; --line:rgba(210,219,255,.15); --muted:#adb7d7; --faint:#737fa8; }
body[data-theme="workflow"] { --bg:#071016; --panel:#0c2029; --panel-strong:#102b35; --accent:#5ce5ff; --accent-2:#d6ff6c; --accent-ink:#00272f; --line:rgba(200,241,255,.15); --muted:#9fbcc7; --faint:#668895; }
body[data-theme="surprise"] { --bg:#120a18; --panel:#23102d; --panel-strong:#321440; --accent:#ff8ed8; --accent-2:#d8ff67; --accent-ink:#2b071f; --line:rgba(255,215,246,.16); --muted:#c7aacb; --faint:#8f7197; }

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(75% 70% at 8% -12%, rgba(67, 229, 171, 0.19), transparent 68%),
    radial-gradient(55% 70% at 104% 92%, rgba(180, 255, 94, 0.1), transparent 72%),
    var(--bg);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .28; box-shadow: 0 0 16px var(--accent); }
.ambient i:nth-child(1) { left: 12%; top: 24%; }
.ambient i:nth-child(2) { right: 16%; top: 14%; width: 2px; height: 2px; }
.ambient i:nth-child(3) { right: 9%; bottom: 18%; width: 3px; height: 3px; }

.micro-shell { position: relative; z-index: 1; width: min(100% - 32px, 760px); margin: 0 auto; padding: 20px 0 64px; }
.micro-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.micro-brand { color: var(--ink); text-decoration: none; font: 800 20px/1 var(--display); letter-spacing: -.045em; }
.micro-brand span { color: var(--accent); }
.time-chip { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; background: rgba(255,255,255,.025); }
.time-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.progress-track { width: 100%; height: 3px; margin: 18px 0 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s cubic-bezier(.2,.8,.2,1); }

.micro-stage { min-height: min(680px, calc(100vh - 110px)); display: grid; align-items: center; }
.micro-screen { display: none; width: 100%; padding: clamp(30px, 6vw, 58px); border: 1px solid var(--line); border-radius: clamp(24px, 4vw, 34px); background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.micro-screen.is-active { display: block; animation: screen-in .48s cubic-bezier(.2,.8,.2,1) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }

.intro-screen { text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font: 700 12px/1 var(--display); text-transform: uppercase; letter-spacing: .16em; }
h1, h2 { font-family: var(--display); text-wrap: balance; }
h1 { max-width: 620px; margin: 0 auto 18px; font-size: clamp(34px, 7vw, 62px); line-height: .99; letter-spacing: -.055em; }
h1 em { color: var(--accent); font-style: normal; }
.lede { max-width: 570px; margin: 0 auto 28px; color: var(--muted); font-size: clamp(16px, 2.5vw, 19px); line-height: 1.58; text-wrap: balance; }

.signal-orbit { position: relative; width: 108px; height: 108px; margin: 0 auto 26px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(111,255,193,.16), transparent 66%); }
.signal-orbit::before, .signal-orbit::after { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.signal-orbit::before { inset: 13px; }
.signal-orbit::after { inset: 34px; border-color: rgba(111,255,193,.45); box-shadow: 0 0 30px rgba(111,255,193,.18); }
.orbit-core { position: relative; z-index: 2; font: 800 18px/1 var(--display); color: var(--accent); }
.signal-orbit i { position: absolute; width: 8px; height: 8px; border: 2px solid var(--bg); border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px rgba(180,255,94,.6); }
.signal-orbit i:nth-of-type(1) { top: 10px; left: 50%; }
.signal-orbit i:nth-of-type(2) { right: 5px; top: 47%; }
.signal-orbit i:nth-of-type(3) { bottom: 14px; left: 21%; }
.signal-orbit i:nth-of-type(4) { left: 7px; top: 28%; width: 5px; height: 5px; }

.future-mark, .pattern-mark, .workflow-mark, .mystery-mark, .error-lens { position: relative; width: 112px; height: 112px; margin: 0 auto 26px; }
.future-mark { display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; }
.future-mark span, .future-mark i, .future-mark b { position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; font:700 10px/1 var(--display); letter-spacing:.08em; }
.future-mark span { left:-5px; bottom:2px; color:var(--ink); background:var(--panel-strong); border:1px solid var(--line); }
.future-mark i { right:-5px; top:4px; color:var(--accent-ink); background:var(--accent); font-style:normal; }
.future-mark b { left:32px; top:31px; color:var(--accent); background:var(--bg); border:1px solid var(--accent); z-index:2; }
.error-lens { display:grid; place-items:center; border:2px solid var(--accent); border-radius:50%; box-shadow:0 0 0 14px rgba(255,127,115,.06), inset 0 0 30px rgba(255,127,115,.1); }
.error-lens::after { content:""; position:absolute; width:42px; height:8px; right:-30px; bottom:5px; border-radius:99px; background:var(--accent); transform:rotate(45deg); }
.error-lens span { font:800 42px/1 var(--display); color:var(--accent); }
.pattern-mark { width:auto; height:auto; display:flex; justify-content:center; align-items:center; gap:8px; }
.pattern-mark span { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--line); border-radius:15px; color:var(--accent); background:var(--panel-strong); font:800 18px/1 var(--display); }
.pattern-mark i { color:var(--faint); font-style:normal; }
.workflow-mark { display:grid; grid-template-columns:repeat(4,1fr); align-items:center; width:150px; }
.workflow-mark::before { content:""; position:absolute; left:12px; right:12px; height:2px; background:var(--line); }
.workflow-mark i, .workflow-mark span { position:relative; display:grid; place-items:center; width:25px; height:25px; justify-self:center; border:2px solid var(--accent); border-radius:50%; background:var(--bg); }
.workflow-mark i::after { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.workflow-mark span { color:var(--accent-ink); background:var(--accent-2); border-color:var(--accent-2); font-weight:800; }
.mystery-mark { display:grid; place-items:center; }
.mystery-mark::before, .mystery-mark::after { content:""; position:absolute; inset:8px; border:1px solid var(--line); border-radius:27px; transform:rotate(12deg); }
.mystery-mark::after { transform:rotate(-12deg); }
.mystery-mark span { position:relative; z-index:2; font:800 46px/1 var(--display); color:var(--accent); text-shadow:0 0 28px rgba(255,142,216,.45); }
.mystery-mark i { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 12px var(--accent-2); }
.mystery-mark i:first-of-type { top:5px; right:8px; }
.mystery-mark i:last-of-type { left:6px; bottom:12px; }

.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 0 24px; border: 0; border-radius: 14px; color: var(--accent-ink); background: linear-gradient(110deg, var(--accent), var(--accent-2)); box-shadow: 0 14px 36px -18px rgba(111,255,193,.75); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -16px rgba(111,255,193,.9); }
.primary-action:focus-visible, .answer-option:focus-visible, .feedback-box button:focus-visible { outline: 3px solid rgba(111,255,193,.35); outline-offset: 3px; }
.primary-action span { font-size: 20px; transition: transform .18s ease; }
.primary-action:hover span { transform: translateX(3px); }
.trust-row { display: flex; justify-content: center; gap: 0; margin-top: 22px; color: var(--faint); font-size: 13px; }
.trust-row span + span::before { content: "·"; padding: 0 10px; color: var(--line); }

.question-screen h2 { margin: 12px 0 10px; font-size: clamp(27px, 5vw, 40px); line-height: 1.1; letter-spacing: -.035em; }
.question-meta { display: flex; justify-content: space-between; gap: 20px; color: var(--accent); font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.question-meta span:last-child { color: var(--faint); }
.question-context { margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.answer-list { display: grid; gap: 10px; }
.answer-option { width: 100%; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: rgba(255,255,255,.025); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.answer-option:hover { transform: translateX(3px); border-color: rgba(111,255,193,.48); background: rgba(111,255,193,.06); }
.answer-option[disabled] { cursor:default; opacity:.62; transform:none; }
.answer-option.is-correct { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); opacity:1; }
.answer-option.is-wrong { border-color:var(--danger); background:rgba(255,90,90,.07); opacity:1; }
.answer-key { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--faint); border: 1px solid var(--line); font: 700 12px/1 var(--display); }
.answer-text { padding-top: 2px; line-height: 1.45; }
.keyboard-hint { margin: 17px 0 0; color: var(--faint); font-size: 12px; text-align: center; }
.ai-output { margin:14px 0 22px; padding:18px; border:1px solid var(--line); border-radius:16px; color:var(--muted); background:rgba(0,0,0,.16); font-size:15px; line-height:1.58; white-space:pre-line; }
.ai-output::before { content:"AI OUTPUT"; display:block; margin-bottom:9px; color:var(--accent); font:700 10px/1 var(--display); letter-spacing:.13em; }
.answer-reveal { margin-top:14px; padding:17px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.17); }
.answer-reveal strong { color:var(--accent); font-family:var(--display); }
.answer-reveal p { color:var(--muted); line-height:1.5; }
.primary-action.compact { min-height:43px; padding:0 17px; font-size:14px; }
.lesson-screen h2 { margin:0 0 22px; font-size:clamp(29px,5vw,42px); line-height:1.08; letter-spacing:-.04em; }
.lesson-stack { display:grid; gap:10px; margin-bottom:22px; }
.lesson-stack article { display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.lesson-stack article > b { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:var(--accent); background:color-mix(in srgb, var(--accent) 11%, transparent); }
.lesson-stack strong { font:700 15px/1 var(--display); }
.lesson-stack p { margin:4px 0 0; color:var(--muted); font-size:13px; }

.result-screen { text-align: center; }
.result-badge { display: inline-flex; margin: 0 auto 14px; padding: 7px 11px; border: 1px solid rgba(111,255,193,.35); border-radius: 999px; color: var(--accent); background: rgba(111,255,193,.07); font-size: 13px; font-weight: 700; }
.result-screen h2 { margin: 0 auto 12px; max-width: 620px; font-size: clamp(30px, 6vw, 48px); line-height: 1.04; letter-spacing: -.045em; }
.result-summary { max-width: 570px; margin: 0 auto 26px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.signal-card { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.14); text-align: left; }
.signal-row { display: grid; grid-template-columns: 84px 1fr 38px; gap: 12px; align-items: center; color: var(--muted); font-size: 13px; }
.signal-row > i { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.signal-row > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .8s .18s cubic-bezier(.2,.8,.2,1); }
.signal-row strong { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.takeaway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; text-align: left; }
.takeaway-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.takeaway-grid span, .tiny-action span { display: block; margin-bottom: 5px; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.takeaway-grid strong { font-size: 14px; line-height: 1.4; }
.tiny-action { margin: 12px 0 22px; padding: 16px; border-left: 3px solid var(--accent); border-radius: 4px 14px 14px 4px; background: rgba(111,255,193,.055); text-align: left; }
.tiny-action p { margin: 0; color: var(--muted); line-height: 1.5; }
.feedback-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin-bottom: 16px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 13px; text-align: left; }
.feedback-box div { display: flex; gap: 6px; }
.feedback-box button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: rgba(255,255,255,.04); cursor: pointer; }
.feedback-box button:hover { border-color: var(--accent); }
.feedback-box small { color: var(--accent); }
.next-action { width: 100%; }
.quiet-link { display: inline-block; margin-top: 15px; color: var(--muted); font-size: 13px; text-decoration: none; }
.quiet-link:hover { color: var(--ink); }
.method-note { max-width: 520px; margin: 24px auto 0; color: var(--faint); font-size: 11px; line-height: 1.45; }
.pressure-map { display:grid; gap:10px; margin:0 0 18px; text-align:left; }
.pressure-row { display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(0,0,0,.14); }
.pressure-row span { color:var(--accent); font:700 11px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; }
.pressure-row p { margin:0; color:var(--muted); line-height:1.45; font-size:14px; }
.case-score { display:flex; justify-content:center; gap:10px; margin:24px 0; }
.case-score i { display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--line); border-radius:17px; color:var(--faint); background:rgba(255,255,255,.025); font:800 20px/1 var(--display); font-style:normal; }
.case-score i.on { color:var(--accent-ink); border-color:var(--accent); background:var(--accent); box-shadow:0 10px 24px -15px var(--accent); }
.pattern-card { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin:22px 0; padding:18px; border:1px solid var(--line); border-radius:17px; background:rgba(0,0,0,.14); }
.pattern-card span { padding:9px 11px; border:1px solid var(--line); border-radius:10px; color:var(--accent); font:700 11px/1 var(--display); letter-spacing:.08em; }
.pattern-card i { color:var(--faint); font-style:normal; }
.blueprint-card { display:grid; gap:1px; overflow:hidden; margin:20px 0 10px; border:1px solid var(--line); border-radius:17px; background:var(--line); text-align:left; }
.blueprint-card div { display:grid; grid-template-columns:84px 1fr; gap:12px; padding:13px 15px; background:var(--panel-strong); }
.blueprint-card span { color:var(--accent); font:700 10px/1.5 var(--display); letter-spacing:.09em; }
.blueprint-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.45; }
.copy-action { padding:9px 13px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:rgba(255,255,255,.04); cursor:pointer; }
.copy-action:hover { border-color:var(--accent); }
.copy-status { display:block; min-height:20px; margin:5px 0 12px; color:var(--accent); }
.surprise-card { margin:22px 0; padding:20px; border:1px solid var(--line); border-radius:18px; color:var(--muted); background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 7%,transparent), rgba(0,0,0,.15)); text-align:left; line-height:1.58; }
.surprise-card strong { display:block; margin-bottom:7px; color:var(--ink); font:700 16px/1.3 var(--display); }

@media (max-width: 620px) {
  .micro-shell { width: min(100% - 20px, 760px); padding-top: 10px; }
  .micro-stage { min-height: calc(100vh - 86px); align-items: stretch; }
  .micro-screen { padding: 28px 20px; border-radius: 24px; align-self: center; }
  .signal-orbit { width: 88px; height: 88px; margin-bottom: 22px; }
  .trust-row { flex-wrap: wrap; row-gap: 5px; }
  .takeaway-grid { grid-template-columns: 1fr; }
  .feedback-box { align-items: flex-start; flex-wrap: wrap; }
  .signal-row { grid-template-columns: 72px 1fr 34px; gap: 8px; }
  .pressure-row { grid-template-columns:1fr; gap:5px; }
  .blueprint-card div { grid-template-columns:1fr; gap:3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================================================================
   Round 2 — mechanics: confidence taps, rubric, slider, feed, prompt,
   before/after, handoff, daily dots, and the /try hub.
   =================================================================== */

/* a display: rule on a flex/grid container otherwise beats the UA [hidden] rule */
[hidden] { display: none !important; }

/* calibrate — true/false then confidence */
.tf-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.conf-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.tf-row button, .conf-row button { padding:16px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:rgba(255,255,255,.03); font-weight:600; cursor:pointer; transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.tf-row button:hover, .conf-row button:hover { border-color:var(--accent); background:rgba(111,255,193,.06); transform:translateY(-1px); }
.tf-row button:focus-visible, .conf-row button:focus-visible { outline:3px solid rgba(111,255,193,.35); outline-offset:3px; }
.cal-row { display:grid; grid-template-columns:96px 1fr 84px; gap:12px; align-items:center; color:var(--muted); font-size:13px; }
.cal-row > i { height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.cal-row > i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.cal-row strong { color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }

/* two-tries — textarea + rubric checklist */
.tt-label { display:block; margin:14px 0 7px; color:var(--faint); font:700 11px/1 var(--display); letter-spacing:.09em; text-transform:uppercase; }
.tt-input { width:100%; padding:14px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:rgba(0,0,0,.18); resize:vertical; line-height:1.5; }
.tt-input:focus-visible { outline:3px solid rgba(111,255,193,.35); outline-offset:2px; }
#tt-grade, #tt-next { margin-top:14px; }
.tt-check { margin-top:18px; }
.tt-checklist { list-style:none; margin:0 0 4px; padding:0; display:grid; gap:8px; }
.tt-checklist li { display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:center; padding:11px 13px; border:1px solid var(--line); border-radius:12px; color:var(--faint); font-size:14px; background:rgba(255,255,255,.02); }
.tt-checklist li span { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; border:1px solid var(--line); font-size:12px; }
.tt-checklist li.on { color:var(--ink); border-color:var(--accent); }
.tt-checklist li.on span { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.tt-lesson { margin:14px 0; padding:15px; border-left:3px solid var(--warm); border-radius:4px 14px 14px 4px; background:rgba(255,208,111,.06); }
.tt-lesson strong { color:var(--ink); font:700 14px/1.3 var(--display); }
.tt-lesson p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }

/* before / after (two-tries, prompt-clinic) */
.before-after { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 10px; text-align:left; }
.before-after .ba-col { padding:15px; border:1px solid var(--line); border-radius:15px; background:rgba(0,0,0,.16); }
.before-after .ba-col span { display:block; margin-bottom:7px; color:var(--accent); font:700 10px/1 var(--display); letter-spacing:.09em; text-transform:uppercase; }
.before-after .ba-col p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; white-space:pre-wrap; }

/* one-real-task — handoff card */
.hand-card { display:grid; gap:1px; overflow:hidden; margin:20px 0 10px; border:1px solid var(--line); border-radius:17px; background:var(--line); text-align:left; }
.hand-row { display:grid; grid-template-columns:120px 1fr; gap:12px; padding:14px 15px; background:var(--panel-strong); }
.hand-row span { color:var(--accent); font:700 10px/1.5 var(--display); letter-spacing:.08em; text-transform:uppercase; }
.hand-row p { margin:0; color:var(--muted); font-size:14px; line-height:1.45; }
.hand-row.bad span { color:var(--danger); }
.hand-row.bad { background:rgba(255,90,90,.06); }

/* draw-the-line — slider */
.slider-wrap { margin:8px 0 4px; }
#dl-slider { width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); outline-offset:6px; }
#dl-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%; background:var(--ink); border:3px solid var(--accent-ink); cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,.7); }
#dl-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--ink); border:3px solid var(--accent-ink); cursor:pointer; }
.slider-ticks { display:flex; justify-content:space-between; margin-top:10px; color:var(--faint); font-size:11px; }
.slider-ticks span { flex:1; text-align:center; }
.slider-ticks span:first-child { text-align:left; }
.slider-ticks span:last-child { text-align:right; }
.slider-readout { margin:10px 0 0; text-align:center; color:var(--accent); font:700 15px/1 var(--display); }
#dl-lock { margin-top:16px; }
.dl-card { display:grid; gap:8px; margin:20px 0 10px; text-align:left; }
.dl-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.14); font-size:13px; color:var(--muted); }
.dl-row b { font:700 12px/1 var(--display); color:var(--accent); white-space:nowrap; }
.dl-row b.p0 { color:var(--danger); }
.dl-row b.p2 { color:var(--accent-2); }

/* model-or-not — miss card */
.mn-card { margin:20px 0 10px; }
.mn-miss { padding:18px; border:1px solid var(--line); border-radius:17px; background:rgba(0,0,0,.15); text-align:left; }
.mn-miss span { display:block; color:var(--faint); font:700 10px/1.6 var(--display); letter-spacing:.09em; text-transform:uppercase; }
.mn-miss p { margin:4px 0; color:var(--ink); font-size:15px; line-height:1.45; }

/* prompt-clinic — live prompt */
.prompt-live { margin:0 0 18px; padding:16px; border:1px solid var(--accent); border-radius:14px; background:rgba(0,0,0,.22); color:var(--ink); font:500 14px/1.6 var(--body); white-space:pre-wrap; word-break:break-word; }
.prompt-live::before { content:"PROMPT"; display:block; margin-bottom:8px; color:var(--accent); font:700 10px/1 var(--display); letter-spacing:.13em; }

/* the-daily-rep — return dots */
.rep-dots { display:flex; justify-content:center; gap:9px; margin:18px 0 6px; }
.rep-dots i { width:16px; height:16px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.03); }
.rep-dots i.on { background:var(--accent); border-color:var(--accent); box-shadow:0 0 12px var(--accent); }
.rep-note { margin:0; text-align:center; color:var(--faint); font-size:12px; }

/* /try hub */
.hub-shell { width:min(100% - 32px, 1000px); }
.micro-topbar a.time-chip { text-decoration:none; }
.hub-hero { margin:26px 0 22px; }
.hub-hero h1 { max-width:none; margin:0 0 14px; text-align:left; font-size:clamp(32px,6vw,54px); }
.hub-hero .lede { max-width:640px; margin:0; text-align:left; }
.hub-hero .eyebrow { text-align:left; }
.hub-reco { display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between; margin:0 0 22px; padding:22px; border:1px solid var(--accent); border-radius:20px; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 10%,transparent), rgba(0,0,0,.16)); }
.hub-reco-tag { display:inline-block; margin-bottom:8px; color:var(--accent); font:700 11px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; }
.hub-reco h2 { margin:0 0 6px; font-size:clamp(22px,3.4vw,30px); letter-spacing:-.03em; }
.hub-reco p { margin:0; max-width:520px; color:var(--muted); font-size:15px; line-height:1.5; }
.hub-reco .primary-action { flex:0 0 auto; }
.hub-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.hub-filters button { padding:9px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.03); font-size:13px; cursor:pointer; transition:border-color .16s ease, color .16s ease; }
.hub-filters button:hover { color:var(--ink); border-color:var(--accent); }
.hub-filters button.is-on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:700; }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:14px; }
.hub-card { position:relative; display:flex; flex-direction:column; gap:9px; padding:18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); color:var(--ink); text-decoration:none; transition:border-color .16s ease, transform .16s ease; }
.hub-card:hover { border-color:var(--accent); transform:translateY(-3px); }
.hub-card:focus-visible { outline:3px solid rgba(111,255,193,.35); outline-offset:3px; }
.hub-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.hub-cat { color:var(--accent); font:700 10px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; }
.hub-mins { color:var(--faint); font-size:12px; }
.hub-card h3 { margin:0; font:700 18px/1.2 var(--display); letter-spacing:-.02em; }
.hub-promise { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.hub-outcome { margin:2px 0 0; color:var(--faint); font-size:12px; line-height:1.45; }
.hub-outcome span { text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.hub-outcome b { color:var(--muted); font-weight:500; }
.hub-card.is-done { opacity:.72; }
.hub-done { position:absolute; top:14px; right:14px; color:var(--accent); font:700 11px/1 var(--display); }
.hub-card.is-done .hub-card-top .hub-mins { visibility:hidden; }
.hub-note { text-align:left; margin-top:22px; }

@media (max-width: 620px) {
  .before-after { grid-template-columns:1fr; }
  .cal-row { grid-template-columns:80px 1fr 70px; gap:8px; }
  .hand-row { grid-template-columns:1fr; gap:3px; }
  .tf-row, .conf-row { grid-template-columns:1fr; }
  .hub-reco { flex-direction:column; align-items:flex-start; }
  .hub-grid { grid-template-columns:1fr; }
}

/* ===========================================================================
 * The second stage — the opt-in deepening and the one conversion moment.
 * Used by calibrate, two-tries and the-daily-rep. Everything here sits on a
 * result screen, below the result, so a visitor who is done can still be done.
 * =========================================================================== */

/* The offer. Deliberately quieter than .next-action: it is an invitation to
   spend more time, not the default path out of the page. */
.deep-offer { margin:0 0 18px; padding:20px; border:1px dashed var(--accent); border-radius:18px; background:linear-gradient(140deg, color-mix(in srgb,var(--accent) 9%,transparent), rgba(0,0,0,.12)); text-align:left; }
.deep-tag { display:inline-block; margin-bottom:9px; padding:4px 9px; border-radius:999px; color:var(--accent-ink); background:var(--accent); font:700 10px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; }
.deep-offer strong { display:block; margin-bottom:7px; color:var(--ink); font:700 18px/1.25 var(--display); letter-spacing:-.02em; }
.deep-offer p { margin:0 0 15px; color:var(--muted); font-size:14px; line-height:1.55; }
.deep-offer .primary-action { width:100%; }

/* The conversion rail. It appears once, after the deeper stage, and says what
   the visitor is holding before it says where to go. */
.convert-rail { margin:6px 0 18px; padding:22px; border:1px solid var(--accent); border-radius:20px; background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 12%,transparent), rgba(0,0,0,.2)); text-align:left; }
.convert-kept { margin-bottom:14px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.convert-kept span { display:block; margin-bottom:5px; color:var(--faint); font:700 10px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; }
.convert-kept b { color:var(--accent); font:600 14px/1.45 var(--body); }
.convert-rail strong { display:block; margin-bottom:8px; color:var(--ink); font:700 20px/1.2 var(--display); letter-spacing:-.03em; }
.convert-rail p { margin:0 0 17px; color:var(--muted); font-size:14px; line-height:1.6; }
.convert-rail .primary-action { width:100%; }
.convert-rail small { display:block; margin-top:11px; color:var(--faint); font-size:11px; line-height:1.45; text-align:center; }

/* calibrate — the reckoning belief card and the gap map */
.rk-belief { margin:0 0 18px; padding:16px; border-left:3px solid var(--warm); border-radius:4px 15px 15px 4px; background:rgba(255,208,111,.06); text-align:left; }
.rk-belief span { display:block; margin-bottom:6px; color:var(--warm); font:700 10px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; }
.rk-belief p { margin:0 0 6px; color:var(--ink); font-size:15px; line-height:1.45; }
.rk-belief em { color:var(--muted); font-size:13px; font-style:normal; line-height:1.5; }
.gap-card { display:grid; gap:9px; margin:20px 0 10px; text-align:left; }
.gap-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:13px 15px; border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.15); }
.gap-row b { color:var(--ink); font:700 14px/1.3 var(--display); }
.gap-row.ok { border-color:color-mix(in srgb,var(--accent) 55%,transparent); }
.gap-row.off { border-color:color-mix(in srgb,var(--danger) 45%,transparent); }
.gap-move { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gap-move i { color:var(--faint); font-style:normal; }
.gap-row em { color:var(--faint); font-size:11px; font-style:normal; white-space:nowrap; }
.gap-row.ok em { color:var(--accent); }

/* two-tries — the real-task pass and the five-part card */
.tt-line { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:rgba(0,0,0,.18); }
.tt-line:focus-visible { outline:3px solid rgba(111,255,193,.35); outline-offset:2px; }
.tt-hint { display:block; min-height:18px; margin-top:8px; color:var(--danger); font-size:12px; }
.tt-checklist li.is-new { border-color:var(--warm); }
.tt-checklist li i { margin-left:7px; padding:2px 6px; border-radius:999px; color:var(--accent-ink); background:var(--warm); font:700 9px/1.4 var(--display); letter-spacing:.08em; font-style:normal; text-transform:uppercase; }
.skel-card { display:grid; gap:1px; overflow:hidden; margin:20px 0 12px; border:1px solid var(--line); border-radius:17px; background:var(--line); text-align:left; }
.skel-row { display:grid; grid-template-columns:104px 1fr; gap:12px; padding:12px 15px; background:var(--panel-strong); }
.skel-row span { color:var(--accent); font:700 10px/1.6 var(--display); letter-spacing:.09em; }
.skel-row p { margin:0; color:var(--muted); font-size:14px; line-height:1.45; }
.skel-row.gap span { color:var(--warm); }
.skel-row.gap p { color:var(--warm); }
.skel-body { padding:15px; background:rgba(0,0,0,.28); }
.skel-body span { display:block; margin-bottom:7px; color:var(--faint); font:700 10px/1 var(--display); letter-spacing:.09em; }
.skel-body p { margin:0; color:var(--ink); font-size:14px; line-height:1.55; white-space:pre-wrap; }

/* the-daily-rep — the returning visitor block and the rep log */
.rep-return { margin:0 auto 22px; max-width:520px; padding:18px; border:1px solid var(--line); border-radius:18px; background:rgba(0,0,0,.16); text-align:left; }
.ret-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ret-streak { color:var(--accent); font:800 17px/1 var(--display); letter-spacing:-.02em; }
.ret-total { color:var(--faint); font-size:12px; }
.ret-last { margin-top:14px; padding-top:13px; border-top:1px solid var(--line); }
.ret-last span { display:block; margin-bottom:5px; color:var(--faint); font:700 10px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; }
.ret-last p { margin:0 0 12px; color:var(--ink); font-size:14px; line-height:1.5; }
.ret-ask { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ret-ask em { margin-right:2px; color:var(--muted); font-size:13px; font-style:normal; }
.ret-ask button { padding:7px 11px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:rgba(255,255,255,.04); font-size:13px; cursor:pointer; }
.ret-ask button:hover { border-color:var(--accent); }
.ret-ask button:disabled { opacity:.45; cursor:default; }
.ret-ask small { flex-basis:100%; color:var(--accent); font-size:12px; }
.rep-return .rep-dots { margin:16px 0 4px; justify-content:flex-start; }
.rep-return .rep-note { text-align:left; }
.rep-dots i[data-today] { outline:1px solid var(--accent); outline-offset:3px; }
.rep-log { display:grid; gap:8px; margin:20px 0 14px; text-align:left; }
.rep-log-row { display:grid; grid-template-columns:88px 1fr; gap:12px; padding:11px 14px; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.15); }
.rep-log-row span { color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.rep-log-row p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }

@media (max-width: 620px) {
  .gap-row { grid-template-columns:1fr; gap:5px; }
  .gap-row em, .gap-move { white-space:normal; }
  .skel-row { grid-template-columns:1fr; gap:3px; }
  .rep-log-row { grid-template-columns:1fr; gap:3px; }
  .convert-rail, .deep-offer { padding:18px; }
}

/* hub — the optional second stage, advertised on the card */
.hub-deeper { margin:4px 0 0; padding-top:9px; border-top:1px dashed var(--line); color:var(--accent); font-size:12px; line-height:1.4; }

/* ===========================================================================
 * The money pair — off-by-how-much and one-basket.
 * Same runtime and same shell as everything else; only the palette and two
 * input shapes are new. Ledger green over a near-black, deliberately unlike
 * the AI pages so the hub reads as two subjects rather than one.
 * =========================================================================== */
body[data-theme="money"] { --bg:#0a0f0c; --panel:#111b16; --panel-strong:#16241d; --accent:#8ce88a; --accent-2:#ffd76b; --accent-ink:#04180d; --line:rgba(214,255,224,.15); --muted:#a6bdae; --faint:#71907d; }

/* off-by-how-much — the estimate field and the reveal */
.ob-ask { margin:14px 0 4px; color:var(--ink); font:600 17px/1.4 var(--body); }
.ob-field { display:flex; align-items:center; gap:9px; margin:12px 0 0; padding:12px 15px; border:1px solid var(--line); border-radius:15px; background:rgba(0,0,0,.22); }
.ob-field:focus-within { border-color:var(--accent); }
.ob-unit, .ob-suffix { color:var(--accent); font:700 18px/1 var(--display); }
.ob-unit:empty, .ob-suffix:empty { display:none; }
#ob-input { flex:1; min-width:0; padding:0; border:0; background:none; color:var(--ink); font:700 22px/1.2 var(--display); font-variant-numeric:tabular-nums; outline:none; }
#ob-input::-webkit-outer-spin-button, #ob-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#ob-input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
.ob-hint { display:block; min-height:18px; margin:8px 0 14px; color:var(--faint); font-size:12px; }
.ob-nums { display:grid; gap:8px; margin:14px 0; }
.ob-num { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.2); }
.ob-num span { color:var(--muted); font-size:13px; line-height:1.4; }
.ob-num b { color:var(--ink); font:700 17px/1 var(--display); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ob-num.truth { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,rgba(0,0,0,.2)); }
.ob-num.truth b { color:var(--accent); }
.ob-num.naive b { color:var(--accent-2); }

/* one-basket — the four sliders and the running total */
.ob-sliders { display:grid; gap:16px; margin:18px 0 20px; text-align:left; }
.ob-slider { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; align-items:center; min-width:0; }
.ob-slider > span { grid-column:1 / -1; color:var(--muted); font-size:13px; line-height:1.4; }
.ob-slider b { color:var(--accent); font:700 15px/1 var(--display); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; min-width:74px; }
.ob-range { width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); outline-offset:6px; }
.ob-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--ink); border:3px solid var(--accent-ink); cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,.7); }
.ob-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--ink); border:3px solid var(--accent-ink); cursor:pointer; }
.ob-bar { height:14px; overflow:hidden; margin:4px 0 2px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.05); }
.ob-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .3s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 620px) {
  .ob-slider { grid-template-columns:1fr; }
  .ob-slider b { text-align:left; }
  .ob-num { grid-template-columns:1fr; gap:3px; }
}