:root {
  color-scheme: dark;
  --ink: #07111f;
  --panel: #0c1727;
  --panel-2: #111f32;
  --line: #294158;
  --white: #f5f7fb;
  --muted: #b4c2d7;
  --teal: #6edbd7;
  --violet: #ad8cff;
  --gold: #e6c984;
  --danger: #ff9a9f;
  --success: #83e8b4;
  --radius: 1.35rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #040a13; color: var(--white); }
body { min-height: 100vh; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button, input[type="range"], label { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
.course-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(circle at 82% 16%, rgba(84,73,173,.17), transparent 36%), var(--ink); }
.topbar { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; padding: .8rem clamp(1rem,3vw,3rem); border-bottom: 1px solid rgba(114,150,184,.18); position: relative; z-index: 10; }
.brand { display: inline-flex; gap: .8rem; align-items: center; color: var(--white); text-decoration: none; }
.brand-mark { width: 2.55rem; height: 2.55rem; display: grid; place-items: center; border: 1px solid rgba(110,219,215,.55); border-radius: .75rem; color: var(--teal); font: 700 1.3rem/1 Georgia,serif; box-shadow: 0 0 24px rgba(64,201,196,.12) inset; }
.brand strong,.brand small { display: block; }
.brand strong { font-size: 1rem; }
.brand small { margin-top: .18rem; color: var(--teal); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.lesson-meta { display: flex; gap: 1rem; color: var(--muted); font-size: .86rem; }
.lesson-meta span+span { color: var(--teal); font-variant-numeric: tabular-nums; }
.stage { position: relative; display: grid; min-height: min(69vw,calc(100vh - 12.5rem)); overflow: hidden; isolation: isolate; }
.intro-video { position:absolute; inset:0; z-index:6; width:100%; height:100%; object-fit:contain; background:#02060b; }
.media-status { position:absolute; top:1rem; left:50%; z-index:9; width:min(42rem,calc(100% - 2rem)); margin:0; transform:translateX(-50%); padding:.75rem 1rem; border:1px solid rgba(230,201,132,.45); border-radius:.7rem; background:rgba(33,29,22,.96); color:var(--gold); text-align:center; font-size:.9rem; }
.ambient { position: absolute; border-radius: 999px; filter: blur(70px); opacity: .15; z-index: -1; }
.ambient-a { width: 23rem; height: 23rem; right: 9%; top: 4%; background: var(--violet); }
.ambient-b { width: 19rem; height: 19rem; left: 2%; bottom: 0; background: var(--teal); }
.scene { grid-area: 1/1; width: 100%; max-width: 90rem; margin: 0 auto; padding: clamp(1.6rem,4vw,4.3rem) clamp(1rem,5vw,4.8rem); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.scene.is-active { opacity: 1; pointer-events: auto; transform: none; }
.eyebrow { margin: 0 0 .7rem; color: var(--teal); font-size: .76rem; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }
h1,h2,h3,p { text-wrap: pretty; }
h1 { margin: .8rem 0 1.25rem; max-width: 11ch; font-size: clamp(3.15rem,6.8vw,6.7rem); line-height: .91; letter-spacing: -.055em; }
h2 { margin: 0; max-width: 21ch; font-size: clamp(2rem,4.4vw,4.5rem); line-height: 1.02; letter-spacing: -.038em; }
h3 { margin: 0; }
.subhead,.summary { max-width: 49rem; color: var(--muted); font-size: clamp(1rem,1.45vw,1.25rem); line-height: 1.6; }
.scene-heading { margin-bottom: clamp(1.5rem,3vw,3rem); }
.scene-heading .subhead { margin: .9rem 0 0; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.cover-visual,.persona,.spec-shot,.team-visual { margin: 0; position: relative; }
.cover-visual::before,.team-visual::before { content:""; position:absolute; inset:-.85rem; border:1px solid rgba(110,219,215,.24); border-radius:calc(var(--radius) + .45rem); transform:rotate(1.1deg); }
.cover-visual img,.persona img,.spec-shot img,.team-visual img { display:block; width:100%; border-radius:var(--radius); box-shadow:0 2.2rem 5rem rgba(0,0,0,.42); }
.cover-visual img { aspect-ratio:16/9; object-fit:cover; }
figcaption { margin-top:.75rem; color:var(--muted); font-size:.88rem; }
.primary-btn { min-height:2.85rem; padding:0 1.1rem; border:0; border-radius:.72rem; background:var(--teal); color:#06131e; font-weight:850; cursor:pointer; }
.primary-btn:hover { background:#8ce7e3; }
.feedback { margin:0; font-size:.9rem; }
.feedback.is-error { color:var(--danger); }
.feedback.is-success { color:var(--success); }
.code-card { overflow:hidden; border:1px solid var(--line); border-radius:.85rem; background:#050c16; }
.code-top { display:flex; align-items:center; gap:.4rem; padding:.65rem .8rem; border-bottom:1px solid #1d3045; background:#101b2a; }
.code-top span { width:.65rem; height:.65rem; border-radius:50%; background:#6d7b8e; }
.code-top span:first-child { background:#ff7d82; }.code-top span:nth-child(2){background:#e9cc72}.code-top span:nth-child(3){background:#6bd89f}
.code-top b { margin-left:auto; color:var(--muted); font-size:.76rem; }
.code-card code { display:block; padding:1.2rem; color:#dfe9f5; font:500 .98rem/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; }
.code-card em { color:var(--teal); font-style:normal; }
.requirements { color:var(--muted); }
.caption-bar { position:absolute; left:50%; bottom:1rem; z-index:7; width:min(60rem,calc(100% - 2rem)); transform:translateX(-50%); padding:.72rem 1rem; border-radius:.65rem; background:rgba(2,7,13,.84); color:#f8fbff; text-align:center; font-size:.95rem; line-height:1.35; backdrop-filter:blur(10px); pointer-events:none; }
.interaction-pause { position:absolute; top:1rem; right:1rem; z-index:8; display:flex; gap:.65rem; align-items:center; padding:.65rem .85rem; border:1px solid rgba(230,201,132,.45); border-radius:.7rem; background:rgba(33,29,22,.94); font-size:.76rem; }
.interaction-pause span { color:var(--gold); text-transform:uppercase; letter-spacing:.1em; font-weight:900; }.interaction-pause b{font-weight:650}
.player { position:relative; z-index:12; padding:.7rem clamp(1rem,3vw,3rem) 1rem; border-top:1px solid rgba(114,150,184,.2); background:rgba(4,10,19,.94); backdrop-filter:blur(18px); }
.timeline-wrap { position:relative; display:grid; grid-template-columns:1fr auto; gap:.35rem 1rem; align-items:center; }
.timeline { grid-column:1/-1; width:100%; margin:0; accent-color:var(--teal); cursor:pointer; }
.chapter-ticks { position:absolute; left:.5rem; right:.5rem; top:.5rem; height:.6rem; pointer-events:none; }
.chapter-ticks i { position:absolute; top:0; width:2px; height:100%; background:#8395a8; opacity:.7; }
.timeline-labels { grid-column:1/-1; display:flex; justify-content:space-between; color:var(--muted); font-size:.72rem; font-variant-numeric:tabular-nums; }
.controls { display:flex; align-items:center; justify-content:center; gap:.65rem; margin-top:-.55rem; }
.icon-btn,.text-btn,.play-btn { min-height:2.75rem; border:1px solid var(--line); border-radius:.8rem; background:var(--panel); cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.icon-btn:hover,.text-btn:hover,.play-btn:hover { border-color:var(--teal); background:var(--panel-2); transform:translateY(-1px); }
.icon-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; }
.icon-btn { width:2.9rem; font-size:1.35rem; }.text-btn{padding:0 .9rem;color:var(--muted);font-size:.8rem;font-weight:750}.text-btn.is-on{color:var(--teal);border-color:rgba(110,219,215,.55)}
.play-btn { display:inline-flex; align-items:center; gap:.65rem; min-width:7.5rem; justify-content:center; padding:0 1.15rem; background:var(--teal); border-color:var(--teal); color:#06131e; font-weight:850; }.play-btn:hover{background:#8ce7e3;color:#06131e}
.transcript-panel { position:fixed; top:0; right:0; bottom:0; z-index:30; width:min(31rem,92vw); padding:1.5rem; overflow-y:auto; background:#091522; border-left:1px solid var(--line); transform:translateX(102%); transition:transform .35s ease; box-shadow:-2rem 0 5rem rgba(0,0,0,.4); }
.transcript-panel.is-open { transform:none; }
.transcript-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }.transcript-head h2{font-size:2rem}
.transcript-panel>p { color:var(--muted); line-height:1.7; }
.scene-nav { display:grid; gap:.45rem; margin:1.5rem 0; }
.scene-nav button { display:flex; gap:.8rem; align-items:center; padding:.7rem .8rem; border:1px solid transparent; border-radius:.65rem; background:transparent; color:var(--muted); text-align:left; cursor:pointer; }.scene-nav button:hover,.scene-nav button.is-current{border-color:var(--line);background:var(--panel);color:var(--white)}.scene-nav button span{color:var(--teal);font-size:.75rem;font-weight:900}
.source-note { display:grid; gap:.45rem; padding-top:1rem; border-top:1px solid var(--line); }.source-note strong{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}.source-note a{color:var(--teal)}
.panel-scrim { position:fixed; inset:0; z-index:29; background:rgba(0,0,0,.58); }
:focus-visible { outline:3px solid var(--violet); outline-offset:3px; }

.lead { margin: 0 0 1rem; max-width: 30ch; font-size: clamp(1.2rem,2.1vw,1.9rem); line-height: 1.3; }
.facts { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.facts span { padding: .62rem .78rem; border: 1px solid var(--line); border-radius: .55rem; background: rgba(14,29,47,.78); color: var(--teal); }
/* ---------- Week 1 additions ---------- */
:root { --host:#6edbd7; --atlas:#ad8cff; --forge:#e6c984; }
.stage { height: calc(100dvh - 5rem - 7.4rem); min-height: 30rem; }
.scene { height: 100%; overflow-y: auto; overflow-x: hidden; padding-top: clamp(4.4rem,6vw,5.2rem); padding-bottom: 6.5rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scene:not(.scene-exercise):not(.scene-cover) { display:flex; flex-direction:column; justify-content:safe center; }
h2 { font-size: clamp(1.9rem,3.6vw,3.6rem); max-width: 26ch; }
.muted { color: var(--muted); }
.kicker { margin:0 0 .6rem; color:var(--violet); font-weight:850; font-size:.9rem; }

/* speaker chip */
.speaker-chip { position:absolute; top:1rem; left:clamp(1rem,5vw,4.8rem); z-index:8; display:flex; align-items:center; gap:.7rem; padding:.4rem .9rem .4rem .4rem; border:1px solid var(--line); border-radius:999px; background:rgba(6,14,25,.86); backdrop-filter:blur(10px); opacity:0; transform:translateY(-6px); transition:opacity .3s, transform .3s, border-color .3s; }
.speaker-chip.is-on { opacity:1; transform:none; }
.speaker-chip b { display:block; font-size:.9rem; }
.speaker-chip small { display:block; color:var(--muted); font-size:.72rem; }
.speaker-chip .avatar { width:2.2rem; height:2.2rem; font-size:.95rem; }
.speaker-chip.host { border-color:rgba(110,219,215,.55); } .speaker-chip.atlas { border-color:rgba(173,140,255,.6); } .speaker-chip.forge { border-color:rgba(230,201,132,.6); }
.eq { display:flex; gap:2px; align-items:flex-end; height:1rem; margin-left:.2rem; }
.eq em { width:3px; height:30%; border-radius:2px; background:currentColor; opacity:.8; }
.speaker-chip.host .eq { color:var(--host); } .speaker-chip.atlas .eq { color:var(--atlas); } .speaker-chip.forge .eq { color:var(--forge); }
.speaker-chip.is-talking .eq em { animation: eq .9s ease-in-out infinite; }
.speaker-chip.is-talking .eq em:nth-child(2){ animation-delay:.15s } .speaker-chip.is-talking .eq em:nth-child(3){ animation-delay:.3s }
@keyframes eq { 0%,100%{height:25%} 50%{height:100%} }

.avatar { display:grid; place-items:center; flex:0 0 auto; width:3.2rem; height:3.2rem; border-radius:50%; font-weight:900; color:#06131e; overflow:hidden; }
.host .avatar, .avatar.host { background:var(--host); }
.atlas .avatar, .avatar.atlas { background:var(--atlas); }
.forge .avatar, .avatar.forge { background:var(--forge); }
.avatar img { width:100%; height:100%; object-fit:cover; }

/* cover */
.scene-cover { display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,.8fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.cast { display:grid; gap:.8rem; }
.cast-card { display:flex; gap:1rem; align-items:center; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:1rem; background:linear-gradient(135deg,rgba(18,34,54,.96),rgba(10,21,36,.93)); }
.cast-card b { font-size:1.15rem; } .cast-card small { display:block; margin-top:.2rem; color:var(--muted); line-height:1.4; }
.cast-card.host { border-left:3px solid var(--host); } .cast-card.atlas { border-left:3px solid var(--atlas); } .cast-card.forge { border-left:3px solid var(--forge); }
.cast-note { margin:.3rem 0 0; color:var(--muted); font-size:.8rem; }

/* plan */
.module-pair { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.module-card { position:relative; padding:1.4rem 1.4rem 1.3rem 5rem; border:1px solid var(--line); border-radius:1rem; background:linear-gradient(180deg,rgba(18,34,54,.96),rgba(10,21,36,.93)); }
.module-no { position:absolute; left:1.2rem; top:1.3rem; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--teal); color:#06131e; font-weight:900; }
.week-time { margin:0 0 .4rem; color:var(--violet); font-weight:800; }
.module-card h3 { font-size:1.4rem; margin-bottom:1rem; }
.module-card strong { display:block; margin-top:1.1rem; color:var(--teal); }
.plain-list { margin:0; padding:0; list-style:none; display:grid; gap:.7rem; }
.plain-list li { display:flex; gap:.7rem; align-items:baseline; line-height:1.45; }
.plain-list li::before { content:""; width:.45rem; height:.45rem; flex:0 0 auto; border-radius:99px; background:var(--teal); transform:translateY(-.1rem); }
.plain-list.small { font-size:1rem; color:#dbe4f0; }
.legend { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin-top:1.3rem; color:var(--muted); }
.legend-pill { display:inline-block; padding:.2rem .6rem; border-radius:99px; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle; }
.legend-pill.cp { background:rgba(173,140,255,.18); color:var(--violet); border:1px solid rgba(173,140,255,.5); }
.legend-pill.ex { background:rgba(230,201,132,.14); color:var(--gold); border:1px solid rgba(230,201,132,.5); }

/* vibe */
.timeline-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.t-card { padding:1.2rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.t-card h3 { margin:.4rem 0 .5rem; font-size:1.35rem; }
.t-card p { margin:0; color:var(--muted); line-height:1.5; }
.t-date { color:var(--teal); font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.t-card.stat { border-color:rgba(230,201,132,.45); }
.stat-row { display:flex; gap:1.5rem; margin:.7rem 0; }
.stat-row b { display:block; font-size:2.3rem; letter-spacing:-.03em; }
.stat-row b.up { color:var(--success); } .stat-row b.down { color:var(--danger); }
.stat-row small { color:var(--muted); }
.premise { margin:1.6rem 0 0; padding:1.1rem 1.4rem; border-left:3px solid var(--violet); background:linear-gradient(90deg,rgba(173,140,255,.1),transparent); font-size:clamp(1.15rem,2vw,1.7rem); line-height:1.35; }
.premise b { color:var(--violet); }

/* gap */
.gap-flow { display:grid; grid-template-columns:1.1fr .45fr 1fr auto 1fr auto 1fr; align-items:stretch; gap:.5rem; }
.gf-node { padding:.9rem; border:1px solid var(--line); border-radius:.9rem; background:var(--panel); }
.gf-node small { color:var(--teal); font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.gf-node b { display:block; margin:.3rem 0; } .gf-node span { color:var(--muted); font-size:.85rem; line-height:1.4; }
.gf-node.intent { border-color:rgba(173,140,255,.55); }
.gf-gap { display:grid; place-items:center; border:2px dashed rgba(255,154,159,.6); border-radius:.9rem; color:var(--danger); font-weight:850; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; background:repeating-linear-gradient(135deg,rgba(255,154,159,.06) 0 8px,transparent 8px 16px); }
.gf-arrow { display:grid; place-items:center; color:var(--muted); font-size:1.3rem; }
.demo { margin-top:1.3rem; padding:1.1rem 1.2rem; border:1px solid rgba(230,201,132,.35); border-radius:1rem; background:rgba(33,29,22,.35); }
.request-quote { margin:0 0 .9rem; font-size:clamp(1.1rem,1.8vw,1.5rem); font-weight:650; }
.decision-chips, .unwritten, .giveaways, .missing { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.chip { display:inline-block; padding:.45rem .75rem; border:1px solid rgba(230,201,132,.5); border-radius:.6rem; background:rgba(230,201,132,.1); color:var(--gold); font-size:.9rem; }
.chip.warn { border-color:rgba(255,154,159,.5); background:rgba(255,154,159,.08); color:var(--danger); }
.chip.strike { text-decoration:line-through; color:var(--muted); border-color:var(--line); background:transparent; }
.demo-verdict { margin:.9rem 0 0; color:var(--muted); } .demo-verdict b { color:var(--white); }
.unwritten, .giveaways, .missing { margin-top:1rem; } .unwritten .kicker, .giveaways .kicker, .missing .kicker { margin:0 .4rem 0 0; }

/* tree svg */
.tree { width:100%; max-height:52vh; }
.t-root { fill:rgba(173,140,255,.15); stroke:var(--violet); }
.t-root-t { fill:var(--white); font:700 21px Inter,system-ui,sans-serif; }
.branch path { fill:none; stroke:var(--line); stroke-width:2; }
.branch rect { fill:var(--panel); stroke:var(--line); }
.t-h { fill:var(--white); font:700 19px Inter,system-ui,sans-serif; } .t-s { fill:var(--gold); font:500 15px Inter,system-ui,sans-serif; }
svg .reveal { transform:none; }
.note-line { margin:1.1rem 0 0; color:var(--muted); font-size:1.05rem; line-height:1.5; } .note-line b { color:var(--white); }

/* checkpoints */
.checkpoint { margin-top:1.2rem; padding:1.3rem; border:1px solid rgba(173,140,255,.45); border-radius:1.15rem; background:linear-gradient(135deg,rgba(30,28,62,.93),rgba(12,25,42,.96)); }
.checkpoint h3 { font-size:clamp(1.15rem,1.7vw,1.5rem); margin-bottom:.9rem; }
.checkpoint-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem; margin-top:1rem; }
.checkpoint-actions .feedback { flex:1 1 16rem; }
.primary-btn:disabled { opacity:.4; cursor:not-allowed; }
.primary-btn.ghost { background:transparent; border:1px dashed var(--line); color:var(--teal); }
.primary-btn.ghost:hover { background:rgba(110,219,215,.08); border-color:var(--teal); }
.link-btn { background:none; border:0; color:var(--muted); text-decoration:underline; cursor:pointer; font-size:.85rem; }
.cp-rows { display:grid; gap:.55rem; }
.cp-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem 1rem; align-items:center; padding:.6rem .7rem; border:1px solid var(--line); border-radius:.75rem; background:rgba(7,17,31,.6); }
.cp-row p { margin:0; line-height:1.4; }
.cp-row.is-right { border-color:rgba(131,232,180,.6); } .cp-row.is-wrong { border-color:rgba(255,154,159,.7); }
.seg { display:inline-flex; flex-wrap:wrap; gap:.3rem; }
.seg button { min-height:2.3rem; padding:0 .8rem; border:1px solid var(--line); border-radius:.55rem; background:var(--panel); color:var(--muted); cursor:pointer; font-size:.85rem; font-weight:700; }
.seg button[aria-pressed="true"] { border-color:var(--teal); background:rgba(51,139,142,.25); color:var(--white); }
.cp-row select { min-height:2.3rem; padding:0 .6rem; border:1px solid var(--line); border-radius:.55rem; background:#081321; color:var(--white); }
.cp-row .why { grid-column:1/-1; margin:0; color:var(--muted); font-size:.85rem; }
.single { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.single button { text-align:left; padding:.9rem 1rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(7,17,31,.6); color:var(--white); cursor:pointer; line-height:1.4; }
.single button[aria-pressed="true"] { border-color:var(--teal); background:rgba(51,139,142,.2); }
.single button.is-right { border-color:var(--success); } .single button.is-wrong { border-color:var(--danger); }
.single small { display:block; margin-top:.4rem; color:var(--muted); }
.spot-sentence { font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.8; margin:.2rem 0 1rem; }
.spot-sentence button { font:inherit; padding:0 .25rem; border:0; border-bottom:2px dotted rgba(110,219,215,.6); border-radius:.3rem; background:transparent; color:var(--white); cursor:pointer; }
.spot-sentence button:hover { background:rgba(110,219,215,.1); }
.spot-sentence button.is-found { background:rgba(230,201,132,.18); border-bottom-color:var(--gold); color:var(--gold); }
.spot-sentence button.decoy { font-size:.6em; vertical-align:middle; margin-left:.4rem; opacity:.0; pointer-events:none; }
.spot-found { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.5rem; }
.spot-found div { padding:.65rem .8rem; border:1px solid rgba(230,201,132,.4); border-radius:.7rem; background:rgba(230,201,132,.07); font-size:.9rem; line-height:1.4; animation: pop .35s ease; }
.spot-found b { color:var(--gold); display:block; margin-bottom:.15rem; }
@keyframes pop { from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none} }

/* four questions */
.q-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.q-card { padding:1.2rem 1.3rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.q-card span { color:var(--violet); font-weight:900; font-size:.8rem; letter-spacing:.14em; }
.q-card h3 { margin:.4rem 0 .5rem; font-size:1.35rem; } .q-card p { margin:0; color:var(--muted); line-height:1.5; }

/* hour */
.hour-cols { display:grid; gap:1rem; }
.hour { display:grid; grid-template-columns:14rem 1fr; gap:1rem; align-items:center; }
.hour h3 { font-size:1rem; color:var(--muted); } .hour.good h3 { color:var(--teal); }
.bar { display:flex; height:3.2rem; border-radius:.7rem; overflow:hidden; border:1px solid var(--line); }
.bar i { flex:var(--m) 0 0; display:flex; align-items:center; padding:0 .5rem; overflow:hidden; white-space:nowrap; font-style:normal; font-size:.78rem; font-weight:750; color:#06131e; border-right:1px solid rgba(4,10,19,.5); }
.bar .u { background:#8aa0b8; } .bar .b { background:var(--teal); } .bar .v { background:var(--success); } .bar .s { background:var(--violet); }
.bar .r { background:var(--danger); } .bar .r2 { background:#d86a72; }
.bar .free { background:repeating-linear-gradient(135deg,rgba(110,219,215,.14) 0 8px,transparent 8px 16px); color:var(--teal); }

/* loop svg */
.loop { width:100%; max-height:50vh; }
.loop .ln rect { fill:var(--panel); stroke:var(--line); stroke-width:1.5; }
.loop .ln.hi rect { stroke:var(--teal); fill:rgba(110,219,215,.08); }
.loop text { fill:var(--white); font:700 18px Inter,system-ui,sans-serif; }
.loop .ar { stroke:var(--muted); stroke-width:2; }
.loop .fb { fill:none; stroke:var(--violet); stroke-width:2.2; stroke-dasharray:7 6; }
.loop .fb-t { fill:var(--violet); font:600 15px Inter,system-ui,sans-serif; }
.loop .own-h { fill:rgba(173,140,255,.1); stroke:rgba(173,140,255,.4); } .loop .own-d { fill:rgba(230,201,132,.1); stroke:rgba(230,201,132,.45); }
.loop .own-t { font:600 14px Inter,system-ui,sans-serif; fill:var(--muted); }

/* driven */
.driven-layout { display:grid; grid-template-columns:1.3fr 1fr; gap:1.2rem; align-items:start; }
.method-table { border:1px solid var(--line); border-radius:.9rem; overflow:hidden; font-size:.92rem; }
.method-table>div { display:grid; grid-template-columns:8.5rem 1fr; }
.method-table>div>* { padding:.5rem .8rem; }
.method-table>div+div { border-top:1px solid var(--line); }
.method-table .mt-head { background:var(--teal); color:#06131e; font-weight:850; }
.method-table b { color:var(--teal); }
.method-table .sdd { background:rgba(173,140,255,.14); } .method-table .sdd b { color:var(--violet); }
.levels { display:grid; gap:.5rem; }
.level { padding:.7rem .9rem; border:1px solid var(--line); border-radius:.75rem; background:var(--panel); }
.level b { display:block; } .level span { color:var(--muted); font-size:.88rem; }
.level.on { border-color:rgba(110,219,215,.55); }
.levels-note { margin:.2rem 0 0; color:var(--teal); font-size:.9rem; }

/* depth dial */
.dial { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:1rem; overflow:hidden; }
.dial-step { padding:1rem 1.1rem; background:var(--panel); border-right:1px solid var(--line); }
.dial-step:nth-child(2) { background:#10213a; } .dial-step.deep { background:#1a1f45; border-right:0; }
.dial-step b { display:block; font-size:1.2rem; margin-bottom:.3rem; } .dial-step span { display:block; line-height:1.4; } .dial-step small { display:block; margin-top:.4rem; color:var(--muted); }

/* builders */
.builder { margin-top:1rem; padding:1.2rem; border:1px solid rgba(230,201,132,.4); border-radius:1.1rem; background:linear-gradient(135deg,rgba(33,29,22,.45),rgba(12,25,42,.9)); }
.builder-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.6rem 1rem; margin-bottom:.9rem; }
.builder-head p { margin:0; } .builder-head b { color:var(--gold); font-size:1.2rem; }
.builder-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.audit-rows, .assume-rows { display:grid; gap:.5rem; margin-bottom:.8rem; }
.a-row { display:grid; grid-template-columns:1.6fr 10rem 1fr 2.4rem; gap:.5rem; }
.as-row { display:grid; grid-template-columns:1.6fr 1fr 1fr 9rem 2.4rem; gap:.5rem; }
.builder input, .builder textarea, .builder select { width:100%; padding:.65rem .8rem; border:1px solid var(--line); border-radius:.6rem; background:#081321; color:var(--white); font-size:.95rem; resize:vertical; }
.builder input::placeholder, .builder textarea::placeholder { color:#72849a; }
.row-del { border:1px solid var(--line); border-radius:.6rem; background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; }
.row-del:hover { color:var(--danger); border-color:var(--danger); }
.brief-form { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; }
.brief-form .builder-head, .brief-form .wide { grid-column:1/-1; }
.brief-form label { display:grid; gap:.35rem; color:var(--muted); font-weight:700; font-size:.88rem; }
.field-label { margin:0 0 .4rem; color:var(--muted); font-weight:700; font-size:.88rem; }
.meter { display:inline-block; width:7rem; height:.45rem; margin-left:.6rem; border-radius:9px; background:var(--line); vertical-align:middle; overflow:hidden; }
.meter i { display:block; height:100%; width:0; background:var(--gold); transition:width .3s; }

/* module 02 */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cmp { padding:1.2rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.cmp.bad { border-color:rgba(255,154,159,.45); } .cmp.good { border-color:rgba(131,232,180,.45); }
.cmp .big { margin:0 0 .6rem; font-size:1.3rem; font-weight:650; line-height:1.35; } .cmp small { display:block; margin-top:.7rem; color:var(--muted); }
.ladder { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.rung { position:relative; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.rung>span { color:var(--teal); font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.rung ul { margin:.6rem 0 0; padding-left:1.1rem; color:#dbe4f0; line-height:1.45; }
.rung.measure { border-color:rgba(230,201,132,.45); }
.rung table { width:100%; margin-top:.6rem; border-collapse:collapse; font-size:.85rem; }
.rung th { text-align:left; color:var(--muted); font-weight:700; padding:.2rem .3rem; } .rung td { padding:.35rem .3rem; border-top:1px solid var(--line); }
.rung td:nth-child(3) { color:var(--success); font-weight:800; }
.scope-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.scope { padding:1.2rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.scope.out { border-color:rgba(255,154,159,.45); } .scope.out .kicker { color:var(--danger); }
.scope.wall .kicker { color:var(--teal); } .scope.dep .kicker { color:var(--gold); }
.assume-card { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; border:1px solid rgba(230,201,132,.45); border-radius:1rem; overflow:hidden; }
.assume-card>div { padding:.9rem 1rem; background:var(--panel); border-right:1px solid var(--line); }
.assume-card>div:last-child { border-right:0; }
.assume-card small { display:block; color:var(--gold); font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.3rem; }
.assume-card b { font-weight:600; line-height:1.4; }
.slice-rules { display:flex; flex-wrap:wrap; gap:.5rem; }
.slice-rules span { padding:.5rem .8rem; border:1px solid rgba(110,219,215,.45); border-radius:.6rem; color:var(--teal); background:rgba(110,219,215,.07); }
.brief-doc { border:1px solid var(--line); border-radius:.9rem; overflow:hidden; background:#050c16; }
.doc-top { display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem; border-bottom:1px solid #1d3045; background:#101b2a; }
.doc-top span { width:.6rem; height:.6rem; border-radius:50%; background:#6d7b8e; }
.doc-top b { margin-left:auto; color:var(--muted); font-size:.76rem; font-family:ui-monospace,Consolas,monospace; }
.doc-body { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.doc-body section { padding:.9rem 1rem; border-right:1px solid #1d3045; border-bottom:1px solid #1d3045; }
.doc-body h4 { margin:0 0 .35rem; color:var(--teal); font:700 .82rem ui-monospace,Consolas,monospace; }
.doc-body h4::before { content:"## "; color:var(--muted); }
.doc-body p { margin:0; color:#dfe9f5; font-size:.9rem; line-height:1.5; }

/* wrap */
.recap { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.recap section { padding:1.1rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.recap span { color:var(--violet); font-weight:900; font-size:.8rem; } .recap p { margin:.4rem 0 0; line-height:1.5; } .recap b { color:var(--teal); }
.deliverables { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.del { display:grid; grid-template-columns:auto 1fr; column-gap:.8rem; align-items:center; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:rgba(7,17,31,.6); }
.del i { grid-row:1/3; display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line); font-style:normal; font-weight:900; color:var(--muted); }
.del.done i { background:var(--success); border-color:var(--success); color:#06131e; }
.del.done i::before { content:"✓"; }
.del small { color:var(--muted); } .del.next { border-color:rgba(173,140,255,.5); } .del.next i { color:var(--violet); border-color:var(--violet); }
.text-link { display:inline-block; margin-top:1.2rem; color:var(--teal); font-weight:800; }

/* captions + transcript */
.caption-bar b { margin-right:.4rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.caption-bar b.host { color:var(--host); } .caption-bar b.atlas { color:var(--atlas); } .caption-bar b.forge { color:var(--forge); }
.caption-bar:empty { display:none; }
.transcript-text p { margin:0 0 .8rem; color:var(--muted); line-height:1.6; }
.transcript-text p b { display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.transcript-text p.host b { color:var(--host); } .transcript-text p.atlas b { color:var(--atlas); } .transcript-text p.forge b { color:var(--forge); }
.transcript-text p.is-current { color:var(--white); }
.scene-nav .mod { margin:.8rem 0 .2rem; color:var(--violet); font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.scene-nav button.is-done span::after { content:" ✓"; color:var(--success); }
.voice-note { margin-top:1rem; color:#72849a; font-size:.78rem; }
.interaction-pause.hold span { color:var(--teal); } .interaction-pause.hold { border-color:rgba(110,219,215,.45); background:rgba(10,30,36,.94); }
.timeline-labels #chapterName { color:var(--teal); }
.controls { margin-top:.35rem; }

@media (max-width:1000px){
  .gap-flow { grid-template-columns:1fr 1fr; } .gf-arrow { display:none; } .gf-gap { min-height:3rem; }
  .ladder { grid-template-columns:1fr 1fr; } .driven-layout { grid-template-columns:1fr; }
  .doc-body { grid-template-columns:1fr 1fr; } .assume-card { grid-template-columns:1fr 1fr; }
  .hour { grid-template-columns:1fr; gap:.4rem; }
}
@media (max-width:800px){
  .stage { height:calc(100dvh - 4.5rem - 8.4rem); }
  .scene { padding-top:4.2rem; }
  .scene:not(.scene-exercise):not(.scene-cover) { justify-content:flex-start; }
  .scene-cover, .module-pair, .timeline-cards, .q-grid, .compare, .scope-grid, .recap, .deliverables, .dial, .single, .brief-form { grid-template-columns:1fr; }
  .dial-step { border-right:0; border-bottom:1px solid var(--line); }
  .ladder, .doc-body, .assume-card, .gap-flow { grid-template-columns:1fr; }
  .a-row { grid-template-columns:1fr 1fr 2.4rem; } .a-row input[data-f="note"] { grid-column:1/3; }
  .as-row { grid-template-columns:1fr 1fr 2.4rem; } .as-row input[data-f="a"] { grid-column:1/-1; }
  .cp-row { grid-template-columns:1fr; }
  .bar i { font-size:.65rem; padding:0 .25rem; }
  .tree, .loop { max-height:none; }
}
@media (max-width:520px){ .speaker-chip small { display:none; } .spot-sentence { font-size:1.2rem; } .module-card { padding-left:1.2rem; padding-top:4.2rem; } .controls { gap:.4rem; } #speedBtn { display:none; } }
.scene > * { flex-shrink: 0; }
.tree { height:auto; aspect-ratio:1000/380; max-height:none; max-width:min(100%, calc(52vh * 2.63)); }
.loop { height:auto; aspect-ratio:1000/330; max-height:none; max-width:min(100%, calc(50vh * 3.03)); }
.stage { grid-template-columns: minmax(0,1fr); }
.scene { min-width: 0; }
@media (max-width:800px){ .lesson-meta span:first-child{display:none} .brand small{display:none} .controls{flex-wrap:wrap;gap:.45rem} .method-table>div{grid-template-columns:6.5rem 1fr} }
@media (max-width:520px){ .scene{padding-left:1rem;padding-right:1rem} .topbar{padding-left:.8rem;padding-right:.8rem} .play-btn{min-width:6.5rem} .icon-btn{width:2.6rem} .caption-bar{font-size:.8rem;bottom:.4rem} .speaker-chip{left:1rem} h1{font-size:clamp(2.6rem,13vw,3.6rem)} }

/* ---------- Week 2 additions ---------- */
:root { --verity:#8fd9c2; --aegis:#e0a36b; --lumen:#b9e07a; --orbit:#c3a2ff; }
.speaker-chip.verity { border-color:rgba(143,217,194,.6); } .speaker-chip.verity .eq { color:var(--verity); }
.speaker-chip.aegis { border-color:rgba(224,163,107,.6); } .speaker-chip.aegis .eq { color:var(--aegis); }
.speaker-chip.lumen { border-color:rgba(185,224,122,.6); } .speaker-chip.lumen .eq { color:var(--lumen); }
.speaker-chip.orbit { border-color:rgba(195,162,255,.6); } .speaker-chip.orbit .eq { color:var(--orbit); }
.speaker-chip .avatar { background:var(--panel-2); }
.speaker-chip .avatar img { width:100%; height:100%; object-fit:cover; }
.speaker-chip.host .avatar { background:var(--host); }
.caption-bar b.verity { color:var(--verity); } .caption-bar b.aegis { color:var(--aegis); } .caption-bar b.lumen { color:var(--lumen); } .caption-bar b.orbit { color:var(--orbit); }
.transcript-text p.verity b { color:var(--verity); } .transcript-text p.aegis b { color:var(--aegis); } .transcript-text p.lumen b { color:var(--lumen); } .transcript-text p.orbit b { color:var(--orbit); }
.cast-grid { grid-template-columns:repeat(3,1fr); gap:.7rem; }
.p-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.p-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.p-card b { display:block; padding:.55rem .7rem 0; } .p-card small { display:block; padding:0 .7rem .6rem; color:var(--muted); font-size:.78rem; }
.cast-grid .cast-note { grid-column:1/-1; }
.split-2 { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:1.2rem; align-items:start; }
.code-card pre { margin:0; padding:1rem 1.1rem; overflow-x:auto; }
.code-card pre code { padding:0; font:500 .9rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; color:#dfe9f5; white-space:pre; }
.code-card pre b { color:var(--violet); } .code-card pre i { color:#72849a; font-style:normal; }
.card-foot { margin:0; padding:.6rem 1.1rem; border-top:1px solid #1d3045; color:var(--muted); font-size:.88rem; } .card-foot b { color:var(--teal); }
.layer-list { margin:0; padding:0; list-style:none; counter-reset:l; display:grid; gap:.4rem; }
.layer-list li { counter-increment:l; padding:.6rem .8rem; border:1px solid var(--line); border-radius:.6rem; background:var(--panel); }
.layer-list li::before { content:counter(l) "  "; color:var(--muted); font-weight:900; }
.layer-list li.hl { border-color:rgba(173,140,255,.6); background:rgba(173,140,255,.1); }
.ears { display:grid; gap:.45rem; }
.ears-row { display:grid; grid-template-columns:6.5rem 1fr; gap:.6rem; padding:.55rem .8rem; border:1px solid var(--line); border-radius:.6rem; background:var(--panel); }
.ears-row b { color:var(--teal); } .ears-row span { color:var(--muted); }
.ears-row.hot { border-color:rgba(255,154,159,.5); } .ears-row.hot b { color:var(--danger); }
.ears-ex { margin:.3rem 0 0; padding:.8rem 1rem; border-left:3px solid var(--danger); background:rgba(255,154,159,.06); line-height:1.5; }
.ears-ex b { color:var(--danger); }
.four-q { display:flex; flex-wrap:wrap; gap:.5rem; }
.four-q span { padding:.55rem .85rem; border:1px solid rgba(143,217,194,.5); border-radius:.6rem; color:var(--verity); background:rgba(143,217,194,.07); font-weight:700; }
.scenario { margin:1rem 0 0; padding:1rem 1.2rem; border:1px solid rgba(230,201,132,.4); border-radius:.9rem; background:rgba(33,29,22,.4); font-size:1.1rem; line-height:1.5; }
.scenario em { color:var(--gold); font-style:normal; font-weight:800; }
.split-b2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center; }
.b2-orig { margin:0; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:.9rem; background:var(--panel); font-size:1.08rem; line-height:1.5; }
.b2-orig mark { background:rgba(255,154,159,.25); color:var(--danger); padding:0 .2rem; border-radius:.2rem; }
.b2-parts { display:grid; gap:.5rem; } .b2-parts p { margin:0; padding:.7rem .9rem; border:1px solid rgba(131,232,180,.45); border-radius:.7rem; background:rgba(131,232,180,.06); }
.b2-orig b, .b2-parts b { color:var(--violet); margin-right:.3rem; }
.q-grid.three { grid-template-columns:repeat(3,1fr); }
.persona-card { position:relative; padding-top:1rem; }
.persona-card img { float:right; width:3rem; height:3rem; border-radius:50%; object-fit:cover; margin:0 0 .4rem .6rem; }
.triad { display:grid; gap:.6rem; }
.triad>div { padding:.9rem 1rem; border:1px solid var(--line); border-radius:.8rem; background:var(--panel); }
.triad b { display:block; color:var(--teal); font-size:1.1rem; } .triad span { color:var(--muted); }
.states-svg { width:100%; height:auto; aspect-ratio:1000/300; max-width:min(100%, calc(40vh * 3.33)); }
.states-svg .st rect { fill:var(--panel); stroke:var(--line); stroke-width:1.5; }
.states-svg .st.start rect { stroke:var(--teal); } .states-svg .st.ok rect { stroke:var(--success); } .states-svg .st.bad rect { stroke:var(--danger); } .states-svg .st.warn rect { stroke:var(--gold); }
.states-svg text { fill:var(--white); font:700 18px ui-monospace,Consolas,monospace; }
.states-svg .tl { fill:var(--muted); font:500 13px ui-monospace,Consolas,monospace; }
.states-svg .tr { fill:none; stroke:#6f86a0; stroke-width:1.8; } .states-svg .ah { fill:#6f86a0; }
.state-grid { margin-top:.8rem; border:1px solid var(--line); border-radius:.8rem; overflow:hidden; font:500 .85rem ui-monospace,Consolas,monospace; }
.state-grid>div { display:grid; grid-template-columns:1.3fr repeat(4,1fr); }
.state-grid>div>* { padding:.5rem .6rem; border-right:1px solid var(--line); } .state-grid>div>*:last-child { border-right:0; }
.state-grid>div+div { border-top:1px solid var(--line); }
.state-grid .sg-h { background:var(--teal); color:#06131e; font-weight:800; }
.state-grid b { color:var(--teal); } .state-grid .go { color:var(--success); }
.state-grid .q { color:var(--danger); font-weight:900; background:rgba(255,154,159,.07); text-align:center; }
.idem { margin-top:1rem; display:grid; gap:.4rem; padding:1rem; border:1px solid var(--line); border-radius:.9rem; background:#050c16; }
.idem-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; }
.idem-row code { color:var(--violet); font:500 .9rem ui-monospace,Consolas,monospace; } .idem-row span { color:var(--muted); } .idem-row b { color:var(--gold); }
.deadline { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; margin-top:1rem; font-size:.9rem; }
.deadline .ok { color:var(--success); font-weight:700; } .deadline .no { color:var(--danger); font-weight:700; }
.deadline .line { position:relative; height:2px; background:linear-gradient(90deg,var(--success),var(--danger)); } .deadline .line i { position:absolute; left:50%; top:-8px; width:2px; height:18px; background:var(--white); }
.parallel { display:grid; grid-template-columns:14rem 1fr; grid-template-rows:auto auto; gap:1rem 1.4rem; align-items:center; }
.orbit-fig { margin:0; grid-row:1/3; } .orbit-fig img { width:100%; border-radius:1rem; aspect-ratio:1; object-fit:cover; border:1px solid rgba(195,162,255,.5); }
.orbit-fig figcaption b { color:var(--orbit); display:block; }
.seam { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:stretch; }
.lane { padding:1rem; border:1px solid var(--line); border-radius:.9rem; background:var(--panel); }
.lane small { color:var(--teal); font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:.7rem; } .lane b { display:block; margin:.3rem 0; } .lane span { color:var(--muted); font:500 .82rem ui-monospace,Consolas,monospace; }
.contract-bar { display:grid; place-content:center; text-align:center; padding:1rem; min-width:11rem; border:2px solid var(--orbit); border-radius:.9rem; background:rgba(195,162,255,.1); }
.contract-bar b { color:var(--orbit); } .contract-bar span { color:var(--muted); font-size:.8rem; }
.rules { margin:0; padding-left:1.3rem; display:grid; gap:.4rem; line-height:1.4; } .rules li::marker { color:var(--orbit); font-weight:900; }
.adr-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; margin-bottom:.4rem; }
.adr-grid .wide { grid-column:1/-1; }
.builder label, .adr-grid label { display:grid; gap:.35rem; color:var(--muted); font-weight:700; font-size:.88rem; }
.builder label.stack { margin:.4rem 0 1rem; }
.builder .field-label { margin-top:.6rem; }
.f-row { display:grid; grid-template-columns:1fr 1fr 1.6fr 2.4rem; gap:.5rem; }
.s-row { display:grid; grid-template-columns:1fr 1fr 1.8fr 2.4rem; gap:.5rem; }
.ac-row { display:grid; grid-template-columns:5rem 5rem 1fr 2.4rem; gap:.5rem; }
.ac-row .lint { grid-column:3/4; display:flex; flex-wrap:wrap; gap:.3rem; margin-top:-.2rem; }
.ac-row .lint span { padding:.12rem .45rem; border-radius:.4rem; background:rgba(255,154,159,.12); color:var(--danger); font-size:.75rem; font-weight:700; }
.ac-row .lint.ok span { background:rgba(131,232,180,.12); color:var(--success); }
.nav-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
@media (max-width:1000px){ .split-2, .split-b2 { grid-template-columns:1fr; } .parallel { grid-template-columns:1fr; } .orbit-fig { grid-row:auto; max-width:12rem; } }
@media (max-width:800px){ .cast-grid { grid-template-columns:repeat(3,1fr); } .q-grid.three { grid-template-columns:1fr; } .seam { grid-template-columns:1fr; } .state-grid { overflow-x:auto; } .state-grid>div { min-width:38rem; }
  .f-row, .s-row { grid-template-columns:1fr 1fr 2.4rem; } .f-row input:nth-child(3), .s-row input:nth-child(3) { grid-column:1/3; }
  .ac-row { grid-template-columns:1fr 1fr 2.4rem; } .ac-row input[data-f="text"], .ac-row .lint { grid-column:1/-1; }
  .adr-grid { grid-template-columns:1fr; } .idem-row { grid-template-columns:1fr; gap:.1rem; } .deadline { grid-template-columns:1fr; } .deadline .line { display:none; } }
@media (max-width:520px){ .cast-grid { grid-template-columns:repeat(2,1fr); } }

/* ---------- Week 3 additions ---------- */
:root { --prism:#e7b5ff; --s1:#3987e5; --s2:#d95926; --s3:#199e70; --ok:#0ca30c; --warnc:#fab219; --bad:#d03b3b; --grid:#1f3247; --axis:#3a5068; }
.speaker-chip.prism { border-color:rgba(231,181,255,.6); } .speaker-chip.prism .eq { color:var(--prism); }
.caption-bar b.prism, .transcript-text p.prism b { color:var(--prism); }
.callout { margin-top:1.2rem; max-width:34rem; padding:.9rem 1.1rem; border:1px solid rgba(173,140,255,.5); border-radius:.9rem; background:rgba(173,140,255,.1); line-height:1.5; }
.callout b { color:var(--violet); }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; color:#cfd9ff; }
.h2code { font-size:.85em; color:var(--teal); }
.small { font-size:.85rem; }
/* stat tiles */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.tile { padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.tile-label { display:block; color:var(--muted); font-size:.92rem; }
.tile-value { display:block; margin:.25rem 0; font-size:clamp(2.6rem,5vw,3.6rem); font-weight:750; letter-spacing:-.03em; color:var(--white); }
.tile small { color:#8a9bb0; }
.tile.warn { border-color:rgba(250,178,25,.45); }
/* tables */
.table-wrap { overflow-x:auto; margin-top:1rem; border:1px solid var(--line); border-radius:.9rem; }
.data-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.table-wrap .data-table { margin:0; }
article > .data-table { margin-top:1rem; border:1px solid var(--line); border-radius:.9rem; overflow:hidden; }
.data-table caption { caption-side:top; text-align:left; padding:.6rem .8rem; color:var(--violet); font-weight:800; font-size:.88rem; }
.data-table th { text-align:left; padding:.55rem .8rem; background:#102338; color:var(--teal); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.data-table td { padding:.55rem .8rem; border-top:1px solid var(--line); color:#dbe4f0; vertical-align:top; line-height:1.45; }
.data-table.dense td, .data-table.dense th { padding:.42rem .7rem; font-size:.88rem; }
.data-table tr.gate-row td:first-child { box-shadow:inset 3px 0 0 var(--gold); }
.data-table td.y { color:var(--success); } .data-table td.n { color:var(--danger); } .data-table td.h { color:var(--gold); font-weight:700; text-align:center; }
.data-table td.empty { color:var(--danger); font-style:italic; background:rgba(208,59,59,.1); }
.stat.good { color:var(--ok); } .stat.bad { color:var(--bad); }
tr.reveal { transform:none; }
.st-b { display:inline-block; padding:.12rem .5rem; border-radius:.4rem; font-weight:800; font-size:.8rem; white-space:nowrap; }
.st-b.ok { color:#9ff09f; background:rgba(12,163,12,.18); } .st-b.warn { color:#ffd77a; background:rgba(250,178,25,.16); } .st-b.bad { color:#ff9a9a; background:rgba(208,59,59,.2); }
/* pipeline */
.pipe { width:100%; height:auto; aspect-ratio:1000/250; }
.pipe .pn rect { fill:var(--panel); stroke:var(--line); stroke-width:1.5; }
.pipe .pn.core rect { stroke:var(--teal); } .pipe .pn.gate rect { stroke:var(--gold); fill:rgba(230,201,132,.1); } .pipe .pn.opt rect { stroke:var(--violet); stroke-dasharray:0; }
.pipe text { fill:var(--white); font:700 14px ui-monospace,Consolas,monospace; } .pipe .ps { fill:var(--muted); font:500 11px Inter,system-ui,sans-serif; }
.pipe .pl { stroke:#6f86a0; stroke-width:1.6; fill:none; } .pa { fill:#6f86a0; }
.pipe .fb { fill:none; stroke:var(--violet); stroke-width:2; stroke-dasharray:6 5; } .pipe .fbt { fill:var(--violet); font:600 13px Inter,system-ui,sans-serif; }
.pipe .band { fill:rgba(230,201,132,.1); stroke:rgba(230,201,132,.45); } .pipe .bt { fill:var(--gold); font:700 13px Inter,system-ui,sans-serif; }
.pipe .key text { fill:var(--muted); font:500 12px Inter,system-ui,sans-serif; } .k-core { fill:none; stroke:var(--teal); stroke-width:2; } .k-gate { fill:rgba(230,201,132,.2); stroke:var(--gold); stroke-width:2; } .k-opt { fill:none; stroke:var(--violet); stroke-width:2; }
/* task pack */
.pack { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.pack-core { grid-row:1/3; display:grid; align-content:center; justify-items:center; gap:.3rem; padding:1rem; border:2px solid var(--orbit); border-radius:1rem; background:rgba(195,162,255,.08); text-align:center; }
.pack-core img { width:5rem; height:5rem; border-radius:50%; object-fit:cover; } .pack-core b { font-size:1.3rem; } .pack-core span { color:var(--muted); font-family:ui-monospace,Consolas,monospace; font-size:.85rem; }
.pack-part { padding:1rem; border:1px solid var(--line); border-radius:.9rem; background:var(--panel); }
.pack-part span { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--orbit); color:#140b24; font-weight:900; font-size:.85rem; }
.pack-part h3 { display:inline; margin-left:.4rem; font-size:1.1rem; } .pack-part p { margin:.55rem 0 0; color:var(--muted); line-height:1.45; }
.pack-part.hot { border-color:rgba(224,163,107,.6); }
.pack > .pack-part:nth-child(6) { grid-column:2/4; }
/* charts */
.chart-card { margin:0; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:1rem; background:#0a1523; }
.chart-card.mini { margin-top:.8rem; }
.chart-card figcaption b { display:block; } .chart-card figcaption small { display:block; color:var(--muted); margin-top:.15rem; }
.chart { position:relative; margin-top:.6rem; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .grid { stroke:var(--grid); stroke-width:1; } .chart .axis { stroke:var(--axis); stroke-width:1; }
.chart .tick { fill:#8a9bb0; font:500 11px Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.chart .lab { fill:#dbe4f0; font:600 12px Inter,system-ui,sans-serif; } .chart .val { fill:var(--white); font:700 12px Inter,system-ui,sans-serif; }
.chart .line { fill:none; stroke:var(--s1); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart .area { fill:var(--s1); opacity:.1; }
.chart .dot { fill:var(--s1); stroke:#0a1523; stroke-width:2; }
.chart .ann { fill:#dbe4f0; font:500 11px Inter,system-ui,sans-serif; }
.chart .xh { stroke:#8a9bb0; stroke-width:1; }
.chart [data-tip] { cursor:default; }
.chart rect[data-tip]:hover, .chart rect[data-tip]:focus { filter:brightness(1.2); outline:none; }
.viz-tip { position:fixed; z-index:40; pointer-events:none; padding:.45rem .6rem; border:1px solid var(--line); border-radius:.5rem; background:#050c16; box-shadow:0 .6rem 1.4rem rgba(0,0,0,.4); font-size:.82rem; line-height:1.35; max-width:18rem; }
.viz-tip b { display:block; font-size:.95rem; }
.legend-row { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; color:#dbe4f0; font-size:.85rem; }
.sw { display:inline-block; width:.8rem; height:.8rem; border-radius:.2rem; margin-right:.35rem; vertical-align:-.05rem; }
.sw.ok { background:var(--ok); } .sw.warn { background:var(--warnc); } .sw.bad { background:var(--bad); }
.table-view { margin-top:.6rem; } .table-view summary { cursor:pointer; color:var(--teal); font-size:.85rem; font-weight:700; }
.split-2.even { grid-template-columns:1fr 1fr; }
.budget { margin:.9rem 0 .8rem; }
.budget-scale { display:flex; gap:2px; height:2.6rem; border-radius:.5rem; overflow:hidden; }
.budget-scale .z { display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; color:#06131e; }
.budget-scale .ok { background:var(--ok); } .budget-scale .mid { background:var(--warnc); } .budget-scale .bad { background:var(--bad); color:#fff; }
.budget-axis { display:flex; justify-content:space-between; color:#8a9bb0; font-size:.75rem; margin-top:.25rem; }
/* dag */
.dag { width:100%; height:auto; aspect-ratio:460/360; max-width:min(100%, calc(50vh * 1.28)); justify-self:center; }
.dag .dn rect { fill:var(--panel); stroke:var(--line); stroke-width:1.5; } .dag .dn.par rect { stroke:var(--s1); } .dag .dn.fnd rect { stroke:var(--gold); }
.dag text { fill:var(--white); font:600 13px ui-monospace,Consolas,monospace; } .dag .dl { fill:none; stroke:#6f86a0; stroke-width:1.5; }
.dag .cpk rect { fill:rgba(131,232,180,.1); stroke:var(--success); } .dag .cpk text { fill:var(--success); font:600 12px Inter,system-ui,sans-serif; }
.dag .lane-t { fill:var(--s1); font:600 12px Inter,system-ui,sans-serif; }
/* gates */
.gates-svg { width:100%; height:auto; aspect-ratio:1000/180; }
.gates-svg .tl-line { stroke:var(--axis); stroke-width:3; } .gates-svg .seg-lbl text { fill:var(--muted); font:500 13px Inter,system-ui,sans-serif; }
.gates-svg .gate-m circle { fill:var(--gold); stroke:#0c1727; stroke-width:3; } .gates-svg .gate-m text { fill:#1a1405; font:800 14px Inter,system-ui,sans-serif; } .gates-svg .gate-m .gl { fill:var(--gold); font:700 13px Inter,system-ui,sans-serif; }
.gates-svg .gnote { fill:var(--muted); font:500 12px Inter,system-ui,sans-serif; }
/* drift */
.drift-svg { width:100%; height:auto; aspect-ratio:1000/220; }
.drift-svg .sp-line { stroke:var(--teal); stroke-width:2.5; } .drift-svg .cd-line { fill:none; stroke:var(--s2); stroke-width:2.5; stroke-linejoin:round; }
.drift-svg .lbl { fill:var(--teal); font:700 14px Inter,system-ui,sans-serif; } .drift-svg .lbl2 { fill:var(--s2); font:700 14px Inter,system-ui,sans-serif; }
.drift-svg .ev circle { fill:var(--s2); stroke:#0c1727; stroke-width:2; } .drift-svg .ev text { fill:#dbe4f0; font:500 12px Inter,system-ui,sans-serif; }
.drift-svg .gap-arrow { stroke:var(--danger); stroke-width:2; stroke-dasharray:4 4; } .drift-svg .gap-t { fill:var(--danger); font:800 13px Inter,system-ui,sans-serif; }
/* builders */
.p-row { display:grid; grid-template-columns:1.6fr repeat(3,6.5rem) 2.4rem; gap:.5rem; align-items:center; }
.p-row label.tg { display:flex; align-items:center; gap:.3rem; font-size:.8rem; color:var(--muted); font-weight:700; }
.p-row label.tg input { width:auto; }
.fd-row { display:grid; grid-template-columns:1.8fr 5.5rem 9rem 2.4rem; gap:.5rem; }
.mx-row { display:grid; grid-template-columns:5rem 1.4fr 1fr 1fr 8.5rem 2.4rem; gap:.5rem; }
.review-block { margin-top:.4rem; }
@media (max-width:1000px){ .pack { grid-template-columns:1fr 1fr; } .pack-core { grid-row:auto; grid-column:1/-1; } .pack > .pack-part:nth-child(6) { grid-column:auto; } .split-2.even { grid-template-columns:1fr; } }
@media (max-width:800px){ .tiles { grid-template-columns:1fr; } .pack { grid-template-columns:1fr; }
  .p-row { grid-template-columns:1fr 1fr 1fr 2.4rem; } .p-row input[data-f="path"] { grid-column:1/-1; }
  .fd-row { grid-template-columns:1fr 1fr 2.4rem; } .fd-row input[data-f="text"] { grid-column:1/-1; }
  .mx-row { grid-template-columns:1fr 1fr 2.4rem; } .mx-row input[data-f="crit"], .mx-row input[data-f="test"], .mx-row input[data-f="ev"] { grid-column:1/-1; } }
.chart svg { max-width:620px; }
@media (max-width:520px){ .chart .tick, .chart .ann { font-size:14px; } .chart .lab, .chart .val { font-size:15px; } }

/* ---- from original intro ---- */
.scene-speckit { display:grid; grid-template-columns:minmax(0,.85fr) minmax(22rem,1.15fr); gap:4rem; align-items:center; }
.code-card { overflow:hidden; border:1px solid var(--line); border-radius:.85rem; background:#050c16; }
.code-top { display:flex; align-items:center; gap:.4rem; padding:.65rem .8rem; border-bottom:1px solid #1d3045; background:#101b2a; }
.code-top span { width:.65rem; height:.65rem; border-radius:50%; background:#6d7b8e; }
.code-top span:first-child { background:#ff7d82; }.code-top span:nth-child(2){background:#e9cc72}.code-top span:nth-child(3){background:#6bd89f}
.code-top b { margin-left:auto; color:var(--muted); font-size:.76rem; }
.code-card code { display:block; padding:1.2rem; color:#dfe9f5; font:500 .98rem/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; }
.code-card em { color:var(--teal); font-style:normal; }
.requirements { color:var(--muted); }
.spec-shot img { aspect-ratio:16/10; object-fit:cover; object-position:top; border:1px solid var(--line); }
.workflow { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.workflow-step { position:relative; min-height:10rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:linear-gradient(145deg,rgba(17,33,52,.98),rgba(9,20,34,.96)); }
.workflow-step span { display:block; margin-bottom:1.1rem; color:var(--teal); font-size:.75rem; font-weight:900; letter-spacing:.15em; }
.workflow-step code { display:block; color:var(--violet); font-size:clamp(.85rem,1.3vw,1.1rem); overflow-wrap:anywhere; }
.workflow-step p { margin:.75rem 0 0; color:var(--muted); line-height:1.4; }
.workflow-note { margin:1.15rem 0 0; color:var(--teal); font-size:1.02rem; }
.capstone-map { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.capstone-core { grid-column:1/-1; display:flex; align-items:baseline; gap:1rem; padding:1rem 1.2rem; border:1px solid rgba(110,219,215,.45); border-radius:.9rem; background:rgba(14,36,52,.72); }
.capstone-core span { color:var(--teal); font-size:.78rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.capstone-core strong { font-size:1.3rem; }.capstone-core small { color:var(--muted); }
.deliverable { display:grid; grid-template-columns:auto 1fr; column-gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:.9rem; background:var(--panel); }
.deliverable>span { grid-row:1/3; color:var(--violet); font-weight:900; }
.deliverable h3 { font-size:1.05rem; }.deliverable p { margin:.35rem 0 0; color:var(--muted); }
.exam-note { display:flex; gap:1.3rem; align-items:center; margin-top:1rem; padding:1rem 1.2rem; border-radius:.85rem; background:rgba(173,140,255,.1); }
.exam-note b { color:var(--violet); }.exam-note span { color:var(--muted); }
.scene-first-step { display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,.72fr); gap:4rem; align-items:center; }
.starter-form { display:grid; gap:1rem; max-width:43rem; }
.starter-form label { display:grid; gap:.42rem; color:var(--muted); font-weight:750; }
.starter-form input,.starter-form textarea { width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:.75rem; background:#081321; color:var(--white); resize:vertical; }
.starter-form input::placeholder,.starter-form textarea::placeholder { color:#72849a; }
.starter-form .primary-btn { justify-self:start; }
.team-visual img { aspect-ratio:4/3; object-fit:cover; }
.completion-card { grid-column:1/-1; max-width:52rem; margin:auto; padding:2.2rem; border:1px solid rgba(110,219,215,.5); border-radius:1.4rem; background:linear-gradient(145deg,rgba(18,47,57,.92),rgba(17,25,49,.96)); text-align:center; box-shadow:0 2rem 5rem rgba(0,0,0,.3); }
.completion-icon { display:grid; place-items:center; width:3.2rem; height:3.2rem; margin:0 auto 1rem; border-radius:50%; background:var(--teal); color:#06131e; font-size:1.7rem; font-weight:900; }
.completion-card h2 { margin:.3rem auto 1rem; }.completion-card p:not(.eyebrow){color:var(--muted);line-height:1.6}.completion-card a{display:inline-flex;margin-top:.5rem;color:var(--teal);font-weight:850}

/* ---------- Introduction v2 ---------- */
.scene-cold:not([hidden]) { display:grid !important; place-items:center; text-align:center; }
.cold { max-width:62rem; margin:auto; display:grid; justify-items:center; gap:1.4rem; }
.cold-request { margin:0; font-size:clamp(1.8rem,4.6vw,4rem); font-weight:750; letter-spacing:-.03em; line-height:1.1; min-height:1.2em; }
.caret { display:inline-block; width:.08em; height:.9em; margin-left:.08em; background:var(--teal); vertical-align:-.08em; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.builds { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.6rem; }
.build { display:flex; align-items:center; gap:.6rem; padding:.3rem .9rem .3rem .3rem; border:1px solid rgba(230,201,132,.5); border-radius:99px; background:rgba(33,29,22,.6); }
.build img { width:2.4rem; height:2.4rem; border-radius:50%; object-fit:cover; } .build span { color:var(--gold); font-weight:700; font-size:.9rem; }
.builds .chip { animation:shake .5s ease 1; }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translateX(-3px) rotate(-1deg)} 75%{transform:translateX(3px) rotate(1deg)} }
.readings { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.readings span { padding:.5rem .85rem; border:1px dashed rgba(173,140,255,.6); border-radius:.6rem; color:var(--violet); font-weight:700; background:rgba(173,140,255,.08); }
.hero-title { margin:.6rem 0 0; max-width:none; display:grid; font-size:clamp(3rem,8.4vw,7.6rem); line-height:.9; letter-spacing:-.055em; }
.hero-title span:first-child { background:linear-gradient(92deg,#f5f7fb 10%,var(--teal) 55%,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-title.is-visible { animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity:0; transform:translateY(28px) scale(.97); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
.promise { max-width:18ch; font-size:clamp(2.2rem,4.8vw,4.6rem); line-height:1; }
.promise em { font-style:normal; color:var(--teal); }
.facts.big span { padding:.7rem .95rem; font-size:1rem; color:var(--muted); } .facts.big b { color:var(--teal); font-size:1.3rem; margin-right:.25rem; }
.video-btn { display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem; padding:.75rem 1.1rem .75rem .75rem; border:1px solid rgba(110,219,215,.5); border-radius:99px; background:rgba(110,219,215,.08); color:var(--white); font-weight:750; cursor:pointer; }
.video-btn span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--teal); color:#06131e; font-size:.8rem; }
.video-btn:hover { background:rgba(110,219,215,.16); }
/* roster with spotlight */
.roster { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.r-card { position:relative; display:grid; grid-template-rows:auto 1fr; overflow:hidden; border:1px solid var(--line); border-radius:1rem; background:var(--panel); transition:transform .35s ease, border-color .35s, box-shadow .35s, opacity .6s; }
.r-card img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 25%; filter:saturate(.85); transition:filter .35s; }
.r-card > div { padding:.7rem .85rem .85rem; } .r-card b { font-size:1.1rem; } .r-card small { display:block; color:var(--teal); font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-top:.1rem; }
.r-card q { display:block; margin-top:.45rem; color:var(--muted); font-size:.9rem; line-height:1.4; }
.r-card.human { place-content:center; text-align:center; background:linear-gradient(145deg,rgba(18,47,57,.9),rgba(17,25,49,.95)); }
.r-card.human .avatar.big { width:4.5rem; height:4.5rem; margin:1rem auto .2rem; font-size:1.6rem; }
[data-speaker].is-speaking { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal), 0 1.2rem 3rem rgba(64,201,196,.18); transform:translateY(-4px); }
.r-card.is-speaking img { filter:saturate(1.1); }
.r-card.is-speaking q { color:var(--white); }
/* audience */
.aud-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.aud { padding:1.3rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel); }
.aud-ico { display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:.8rem; background:rgba(185,224,122,.12); color:var(--lumen); font-size:1.3rem; }
.aud h3 { margin:.8rem 0 .3rem; font-size:1.25rem; } .aud p { margin:0; color:var(--muted); }
.bring { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1.2rem; } .bring .kicker { margin:0 .4rem 0 0; }
.tiles.two { grid-template-columns:1fr; align-content:start; }
/* try */
.choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.6rem; }
.choice-grid button { text-align:left; min-height:4.2rem; padding:.75rem .9rem; border:1px solid var(--line); border-radius:.8rem; background:rgba(7,17,31,.6); color:var(--white); cursor:pointer; }
.choice-grid button b, .choice-grid button small { display:block; } .choice-grid button small { color:var(--muted); margin-top:.2rem; }
.choice-grid button[aria-pressed="true"] { border-color:var(--teal); background:rgba(51,139,142,.22); }
.choice-grid button.is-right { border-color:var(--success); } .choice-grid button.is-wrong { border-color:var(--danger); }
/* journey */
.journey { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-top:1.6rem; }
.j-track { position:absolute; left:2%; right:2%; top:.4rem; height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.j-track i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),var(--violet)); transition:width .8s ease; }
.j-week { position:relative; padding:3.6rem 1.1rem 1.1rem; min-height:17rem; border:1px solid var(--line); border-radius:1rem; background:linear-gradient(180deg,rgba(18,34,54,.96),rgba(10,21,36,.93)); }
.j-week img { position:absolute; top:-1.4rem; left:1rem; width:4rem; height:4rem; border-radius:50%; object-fit:cover; border:3px solid #0c1727; box-shadow:0 0 0 1px var(--line); }
.j-no { color:var(--violet); font-weight:800; } .j-week h3 { margin:.3rem 0 .6rem; font-size:1.2rem; }
.j-week p { color:var(--muted); line-height:1.5; margin:0; } .j-week strong { display:block; margin-top:1rem; color:var(--teal); font-size:.88rem; line-height:1.4; }
/* toolchain */
.flow-chips { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin-top:1rem; }
.flow-chips span { padding:.4rem .7rem; border:1px solid rgba(110,219,215,.5); border-radius:.5rem; font:600 .85rem ui-monospace,Consolas,monospace; color:var(--teal); } .flow-chips i { color:var(--muted); font-style:normal; }
.scene-speckit .callout { max-width:none; }
/* first step */
.start-btn { display:inline-flex; margin-top:1rem; padding:.8rem 1.2rem; border-radius:.8rem; background:var(--teal); color:#06131e !important; font-weight:850; text-decoration:none; }
.completion-card { grid-column:auto; }
/* video dialog */
.video-dialog { width:min(64rem,94vw); padding:0; border:1px solid var(--line); border-radius:1rem; background:#02060b; color:var(--white); }
.video-dialog::backdrop { background:rgba(0,0,0,.72); }
.video-dialog video { display:block; width:100%; max-height:80vh; background:#000; }
.video-dialog p { padding:1rem; }
.video-dialog #closeVideo { position:absolute; top:.6rem; right:.6rem; }
@media (max-width:1000px){ .roster { grid-template-columns:repeat(2,1fr); } .journey { grid-template-columns:repeat(2,1fr); row-gap:2rem; } .j-track { display:none; } }
@media (max-width:800px){ .aud-grid { grid-template-columns:1fr; } .journey { grid-template-columns:1fr; } .scene-speckit, .scene-first-step { grid-template-columns:1fr; } .capstone-map { grid-template-columns:1fr; } .capstone-core { grid-column:1; flex-direction:column; align-items:flex-start; gap:.3rem; } .exam-note { flex-direction:column; align-items:flex-start; } }
@media (max-width:520px){ .roster { grid-template-columns:1fr 1fr; gap:.5rem; } .r-card q { font-size:.8rem; } .hero-title { font-size:clamp(2.6rem,13vw,3.6rem); } }
.scene-speckit:not([hidden]), .scene-first-step:not([hidden]) { display:grid !important; align-content:center; }
.r-card img { aspect-ratio:16/8; }
.r-card > div { padding:.55rem .75rem .7rem; } .r-card q { font-size:.84rem; margin-top:.3rem; }
.promise { margin-bottom:1.1rem; }
.scene .loop { max-width:min(100%, calc(34vh * 4)); align-self:center; }
@media (max-width:800px){ .scene-first-step, .scene-speckit { align-content:start; } }
/* intro video scene */
.scene.scene-video:not([hidden]) { display:block !important; padding:0 !important; overflow:hidden; background:#02060b; }
.intro-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#02060b; }
.video-start { position:absolute; left:50%; bottom:12%; transform:translateX(-50%); display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; align-items:center; padding:.9rem 1.4rem .9rem .9rem; border:1px solid rgba(110,219,215,.6); border-radius:99px; background:rgba(4,10,19,.82); backdrop-filter:blur(10px); color:var(--white); text-align:left; cursor:pointer; box-shadow:0 1.5rem 3rem rgba(0,0,0,.45); animation:pulse 2.4s ease-in-out infinite; }
.video-start span { grid-row:1/3; display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:50%; background:var(--teal); color:#06131e; font-size:1.2rem; }
.video-start b { font-size:1.15rem; } .video-start small { color:var(--muted); }
.video-start:hover { background:rgba(10,30,36,.92); }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(110,219,215,.35), 0 1.5rem 3rem rgba(0,0,0,.45); } 50% { box-shadow:0 0 0 12px rgba(110,219,215,0), 0 1.5rem 3rem rgba(0,0,0,.45); } }
.video-start { z-index:7; } .intro-video { cursor:pointer; }