/* =============================================================================
   How I made that — teaching app
   Light "lab-notebook" aesthetic; dark artifacts = "screens pinned to paper".
   Desktop-first, responsive. Buildless.
   ========================================================================== */
:root{
  --paper:#f7f2e7; --paper-2:#efe8d8; --line:#d9cfb8;
  --ink:#2c2723; --ink-2:#6b6253; --ink-faint:#a99f8c;
  --accent:#00a68f;            /* techwatch turquoise — ties to the infographic */
  --marker:#e8553e;            /* red felt-tip for emphasis */
  --screen:#0c1117; --screen-2:#0f1620; --screen-ink:#e9edf2;
  --screen-ink-2:rgba(233,237,242,.62); --claude:#d97757; /* claude accent */
  --gut:230px;                 /* annotation gutter width (desktop) */
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:Inter,system-ui,sans-serif; font-size:17px; line-height:1.6;
  background-image:
    radial-gradient(var(--line) 1px, transparent 1.4px);
  background-size:26px 26px; background-position:-13px -13px;
}
.hand{font-family:Caveat,"Comic Sans MS",cursive}
a{color:var(--accent)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---- section scaffolding ---- */
section{padding:84px 0; position:relative}
section + section{border-top:2px dashed var(--line)}
.kicker{font-family:Caveat,cursive; font-size:1.5rem; color:var(--marker);
  transform:rotate(-2deg); display:inline-block; margin-bottom:.2em}
h1,h2{line-height:1.08; letter-spacing:-.02em; margin:.1em 0 .35em}
h1{font-size:clamp(2.4rem,6vw,4.4rem); font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem); font-weight:800}
.lead{font-size:1.22rem; color:var(--ink-2); max-width:60ch}
.scribble{color:var(--accent)}
.step-no{font-family:Caveat,cursive; color:var(--ink-faint); font-size:2rem;
  display:block; transform:rotate(-3deg)}

/* ---- hero ---- */
.hero{padding-top:70px}
.hero h1 .scribble{position:relative; white-space:nowrap}
.tape{position:relative}
.badges{display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; font-size:.95rem}
.badge{background:#fff; border:1.5px solid var(--ink); border-radius:3px;
  padding:7px 13px; box-shadow:2px 2px 0 var(--ink);
  transform:rotate(-1deg)}
.badge:nth-child(2){transform:rotate(1.2deg)}
.badge:nth-child(3){transform:rotate(-.6deg)}
.badge b{color:var(--marker)}
.scroll-hint{margin-top:46px; color:var(--ink-faint); font-family:Caveat,cursive;
  font-size:1.4rem}

/* ---- the "screen pinned to paper" frame ---- */
.screen-pin{position:relative; margin:30px auto; width:max-content; max-width:100%}
.screen-pin::before,.screen-pin::after{ /* washi tape corners */
  content:""; position:absolute; width:96px; height:26px;
  background:rgba(0,166,143,.30); border:1px solid rgba(0,166,143,.5);
  top:-12px; z-index:5; box-shadow:0 1px 3px rgba(0,0,0,.15)}
.screen-pin::before{left:-14px; transform:rotate(-24deg)}
.screen-pin::after{right:-14px; transform:rotate(24deg)}
.screen{background:var(--screen); border-radius:11px; overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.25);
  color:var(--screen-ink); border:1px solid #0a0d12}
.titlebar{display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:#11161d; border-bottom:1px solid #000}
.lights{display:flex; gap:7px}
.lights i{width:12px; height:12px; border-radius:50%; display:block}
.lights i:nth-child(1){background:#ff5f57}
.lights i:nth-child(2){background:#febc2e}
.lights i:nth-child(3){background:#28c840}
.titlebar .tt{font-size:.82rem; color:var(--screen-ink-2);
  font-family:ui-monospace,Menlo,monospace}
.titlebar .tt b{color:var(--claude)}

/* ---- watch-the-result phone embed ---- */
.result-row{display:flex; gap:48px; align-items:center; flex-wrap:wrap}
.phone{width:300px; aspect-ratio:9/16; border:10px solid #11161d; border-radius:30px;
  overflow:hidden; background:#000; box-shadow:0 24px 60px -22px rgba(0,0,0,.6)}
.phone iframe{width:1080px; height:1920px; border:0; transform:scale(.2667);
  transform-origin:top left}
.result-copy{flex:1; min-width:280px}
.result-copy ul{padding-left:1.1em} .result-copy li{margin:.3em 0}
.dl{display:inline-flex; gap:9px; align-items:center; margin-top:14px;
  background:var(--ink); color:var(--paper); text-decoration:none;
  padding:10px 16px; border-radius:5px; font-weight:600; box-shadow:3px 3px 0 var(--accent)}

/* =========================================================================
   THE REPLAY — centerpiece
   ========================================================================= */
#replay .screen{width:min(100%,1080px)}
.chapter-rail{display:flex; gap:4px; overflow-x:auto; padding:8px 10px;
  background:#0c1015; border-bottom:1px solid #000; scrollbar-width:thin}
.chip{flex:0 0 auto; font-size:.78rem; padding:7px 11px; border-radius:7px;
  color:var(--screen-ink-2); cursor:pointer; border:1px solid transparent;
  white-space:nowrap; display:flex; gap:7px; align-items:center; background:none}
.chip .nq{font-family:ui-monospace,monospace; opacity:.6}
.chip:hover{background:#161d26}
.chip.active{background:#162a27; color:#fff; border-color:var(--accent)}
.chip.stub{opacity:.5; cursor:default}
.chip.stub:hover{background:none}
.chip.stub::after{content:"soon"; font-size:.62rem; background:#222a33;
  padding:1px 5px; border-radius:4px; color:var(--ink-faint)}

.stage{display:grid; grid-template-columns:var(--gut) minmax(0,1fr) var(--gut)}
.transcript{position:relative; height:min(64vh,620px); overflow-y:auto;
  padding:26px 8px 40vh; scroll-behavior:smooth; grid-column:2}
.gutter{position:relative; grid-column:1; pointer-events:none}
.gutter.right{grid-column:3}
.transcript::-webkit-scrollbar{width:9px}
.transcript::-webkit-scrollbar-thumb{background:#222b35; border-radius:8px}

/* chapter intro line inside the screen */
.ch-intro{color:var(--screen-ink-2); font-size:.86rem; text-align:center;
  padding:4px 0 18px; font-family:ui-monospace,monospace}
.ch-intro b{color:var(--accent)}

/* messages */
.msg{margin:0 0 16px; opacity:0; transform:translateY(8px);
  transition:opacity .35s, transform .35s; max-width:88%}
.msg.show{opacity:1; transform:none}
.msg .who{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--screen-ink-2); margin-bottom:4px}
.msg.user{margin-left:auto}
.msg.user .who{text-align:right; color:var(--claude)}
.bubble{padding:11px 15px; border-radius:13px; font-size:.95rem; white-space:pre-wrap}
.msg.user .bubble{background:#1f2a36; border:1px solid #2b3a49; border-bottom-right-radius:3px}
.msg.assistant .bubble{background:#121922; border:1px solid #1d2733;
  border-bottom-left-radius:3px}
.bubble code{background:#0a0e13; padding:1px 5px; border-radius:4px;
  font-family:ui-monospace,monospace; font-size:.86em; color:#7fe7d6}

/* thinking */
.think{font-size:.82rem; color:var(--screen-ink-2); font-style:italic;
  display:flex; gap:8px; align-items:center; margin:2px 0 14px; opacity:.8}
.think::before{content:"…"; font-size:1.4em; letter-spacing:2px}
.think .note{font-style:normal; font-size:.68rem; color:var(--ink-faint);
  border:1px dashed #2b3744; padding:1px 6px; border-radius:5px}

/* tool cards */
.tool{margin:0 0 13px; border:1px solid #1d2733; border-radius:9px;
  background:#0e141c; overflow:hidden; max-width:92%}
.tool .head{display:flex; gap:10px; align-items:center; padding:9px 12px;
  cursor:pointer; font-size:.84rem}
.tool .ic{width:22px; height:22px; flex:0 0 auto; border-radius:5px; display:grid;
  place-items:center; font-size:.8rem; background:#172029}
.tool .ic.edit{background:#1d2a1f; color:#86e08a}
.tool .ic.bash{background:#2a2417; color:#f0cf72}
.tool .ic.browser{background:#1a2330; color:#6fb4f3}
.tool .ic.screenshot{background:#2a1f2a; color:#f08ad0}
.tool .ic.read{background:#202a2a; color:#7fd6e7}
.tool .lbl{font-family:ui-monospace,monospace; color:var(--screen-ink)}
.tool .ex{margin-left:auto; color:var(--ink-faint); font-size:.74rem;
  border:1px solid #2b3744; padding:1px 7px; border-radius:5px}
.tool .body{display:none; border-top:1px solid #1d2733; padding:10px 12px;
  font-family:ui-monospace,monospace; font-size:.76rem; color:var(--screen-ink-2);
  white-space:pre-wrap; max-height:280px; overflow:auto; background:#0a0e13}
.tool.open .body{display:block}
.tool .body .res{color:#7fe7d6; display:block; margin-top:8px;
  border-top:1px dashed #1d2733; padding-top:8px}
.tool.shot .head .lbl::after{content:" — image not retained"; color:var(--ink-faint)}

/* grill question card (for the grill chapter; renderer lives here now) */
.qcard{border:1px solid #2b3a49; border-radius:11px; background:#101620;
  padding:14px; margin:0 0 16px}
.qcard .qh{font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent); margin-bottom:5px}
.qcard .qq{font-size:.92rem; margin-bottom:11px}
.qopt{border:1px solid #233040; border-radius:8px; padding:9px 11px; margin:6px 0;
  font-size:.84rem; color:var(--screen-ink-2)}
.qopt.chosen{border-color:var(--accent); background:#10241f; color:#fff}
.qopt.chosen .ol::after{content:" ✓ picked"; color:var(--accent); font-weight:600}
.qopt .ol{font-weight:600; color:var(--screen-ink)}

/* ---- annotations (hand-drawn, in the gutters) ---- */
.anno{position:absolute; width:calc(var(--gut) - 26px); font-family:Caveat,cursive;
  font-size:1.32rem; line-height:1.24; font-weight:600; color:#f3795f; pointer-events:auto;
  opacity:0; transition:opacity .5s ease .15s; word-break:break-word}
.anno.accent .atxt{display:inline-block; padding:7px 9px}
.anno.show{opacity:1}
.gutter.left .anno{right:6px; text-align:right}
.gutter.right .anno{left:6px}
.anno.accent{color:#0b6f60}
.anno svg{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}

/* ---- controls ---- */
.controls{display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:#11161d; border-top:1px solid #000; flex-wrap:wrap}
.ctrl-btn{background:#1c2530; border:1px solid #2b3744; color:#fff; cursor:pointer;
  border-radius:7px; padding:8px 13px; font-size:.84rem; display:flex; gap:7px;
  align-items:center}
.ctrl-btn:hover{background:#26313e}
.ctrl-btn.primary{background:var(--accent); border-color:var(--accent); color:#04201b;
  font-weight:700}
.speed{display:flex; gap:0; border:1px solid #2b3744; border-radius:7px; overflow:hidden}
.speed button{background:#1c2530; border:0; color:var(--screen-ink-2); cursor:pointer;
  padding:8px 10px; font-size:.78rem; font-family:ui-monospace,monospace}
.speed button.on{background:var(--accent); color:#04201b; font-weight:700}
.scrub{flex:1; min-width:140px; accent-color:var(--accent)}
.clock{margin-left:auto; font-family:ui-monospace,monospace; text-align:right}
.clock .t{font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:.5px}
.clock .lbl{font-size:.62rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-faint)}
.clock .t .ms{color:var(--accent)}

/* =========================================================================
   THE FULL GRILL — all questions/options, light notebook style (not the screen)
   ========================================================================= */
.qa-tools{display:flex; align-items:center; gap:16px; margin:24px 0 16px}
.qa-toggle{background:#fff; border:1.5px solid var(--ink); border-radius:6px;
  padding:8px 15px; font-weight:600; cursor:pointer; box-shadow:2px 2px 0 var(--ink);
  font-family:Inter,sans-serif; font-size:.9rem; color:var(--ink)}
.qa-toggle:hover{background:var(--paper-2)}
.qa-toggle:active{box-shadow:1px 1px 0 var(--ink); transform:translate(1px,1px)}
.qa-count{font-size:1.3rem; color:var(--ink-faint)}
.qa-list{display:flex; flex-direction:column; gap:10px}
.qa{background:#fff; border:1.5px solid var(--ink); border-radius:8px;
  box-shadow:3px 3px 0 var(--ink)}
.qa[open]{box-shadow:4px 4px 0 var(--accent)}
.qa summary{display:flex; gap:13px; align-items:flex-start; padding:14px 16px;
  cursor:pointer; list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover .qa-q{color:var(--accent)}
.qa-n{font-family:ui-monospace,monospace; color:var(--ink-faint); font-size:.85rem;
  padding-top:2px; flex:0 0 auto}
.qa-head{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.qa-tag{font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent); font-weight:700}
.qa-q{font-weight:600; font-size:1rem; transition:color .15s}
.qa-pick{font-size:1.2rem; color:var(--marker); line-height:1.1}
.qa-chev{flex:0 0 auto; color:var(--ink-faint); transition:transform .2s; padding-top:2px}
.qa[open] .qa-chev{transform:rotate(180deg)}
.qa-opts{border-top:1.5px dashed var(--line); padding:10px 16px 14px;
  display:flex; flex-direction:column; gap:8px}
.qa-opt{border:1px solid var(--line); border-radius:7px; padding:9px 12px;
  background:var(--paper)}
.qa-opt.chosen{border-color:var(--accent); border-width:2px; background:#eafaf6;
  padding:8px 11px}
.qa-ol{font-weight:700; display:block; margin-bottom:2px}
.qa-opt.chosen .qa-ol::after{content:" ✓ my pick"; color:var(--accent);
  font-weight:700; font-size:.82em; letter-spacing:.02em}
.qa-od{color:var(--ink-2); font-size:.9rem}
.qa code{font-family:ui-monospace,monospace; font-size:.85em;
  background:var(--paper-2); padding:1px 5px; border-radius:4px}
/* a question I answered in my own words instead of picking a preset */
.qa.custom[open]{box-shadow:4px 4px 0 var(--marker)}
.qa.custom .qa-pick{font-size:1.1rem}
.qa-mine{background:#fff6f1; border:1.5px solid var(--marker); border-radius:7px;
  padding:10px 13px; font-family:Caveat,cursive; font-size:1.3rem; line-height:1.25;
  color:var(--ink)}
.qa-mine-lbl{display:block; font-family:Inter,sans-serif; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--marker); font-weight:700;
  margin-bottom:4px}
.qa-offered{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-faint); margin:4px 0 -2px}

/* ---- focus mode (clean for screen-recording / Part-2 clipping) ---- */
body.focus{overflow:hidden}
body.focus .notebook-chrome{display:none !important}
body.focus #replay{padding:0}
body.focus #replay .wrap{max-width:100%; padding:0}
body.focus .stage{grid-template-columns:0 minmax(0,1fr) 0}
body.focus .gutter{display:none}
body.focus #replay .screen{position:fixed; inset:0; width:100vw; border-radius:0;
  z-index:60; display:flex; flex-direction:column}
body.focus .stage{flex:1 1 auto; min-height:0; overflow:hidden}
body.focus .transcript{height:100%; padding-bottom:14vh}
body.focus .chapter-rail{display:none}
body.focus .controls{flex:0 0 auto}
body.focus .clock .t{font-size:2.1rem}
.exit-focus{display:none}
body.focus .exit-focus{display:flex; position:fixed; top:14px; right:16px; z-index:70}

/* ---- generic skeleton sections ---- */
.method-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px}
.method-card{background:#fff; border:1.5px solid var(--ink); border-radius:7px;
  padding:16px; box-shadow:3px 3px 0 var(--ink); position:relative}
.method-card:nth-child(odd){transform:rotate(-.7deg)}
.method-card:nth-child(even){transform:rotate(.7deg)}
.method-card h3{margin:.1em 0 .3em; font-size:1.1rem}
.method-card p{margin:0; font-size:.92rem; color:var(--ink-2)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; align-items:start}

/* mini reproduction of Claude Desktop's Skills upload UI (recognizable-not-forensic) */
.ui-mock{margin:16px 0 4px; border:1.5px solid var(--ink); border-radius:10px;
  overflow:hidden; background:#fff; box-shadow:4px 4px 0 var(--ink)}
.uim-bar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 11px; background:var(--paper-2); border-bottom:1px solid var(--line)}
.uim-crumb{font-size:.73rem; color:var(--ink-2); font-family:ui-monospace,monospace}
.uim-crumb i{color:var(--ink-faint); font-style:normal; padding:0 2px}
.uim-btn{font-size:.71rem; font-weight:700; color:#fff; background:var(--claude);
  border-radius:6px; padding:5px 9px; white-space:nowrap}
.uim-body{padding:13px}
.uim-drop{display:flex; align-items:center; gap:11px; border:2px dashed var(--ink-faint);
  border-radius:9px; padding:14px 13px; background:var(--paper); color:var(--ink-2)}
.uim-ic{font-size:1.3rem; color:var(--claude); line-height:1}
.uim-dt{font-size:.85rem}
.uim-file{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.84rem;
  border:1px solid var(--line); border-radius:7px; padding:8px 11px}
.uim-fname{font-family:ui-monospace,monospace; font-size:.8rem}
.uim-ok{margin-left:auto; color:var(--accent); font-weight:700; font-size:.78rem; white-space:nowrap}
.uim-cap{margin-top:9px; font-size:1.15rem; color:var(--marker)}
.panel{background:#fff; border:1.5px solid var(--ink); border-radius:8px; padding:20px;
  box-shadow:4px 4px 0 var(--ink)}
.panel h3{margin-top:0; display:flex; gap:9px; align-items:center}
.panel ol{padding-left:1.2em} .panel li{margin:.4em 0}
.panel code,.seed code{font-family:ui-monospace,monospace; font-size:.85em;
  background:var(--paper-2); padding:1px 5px; border-radius:4px}
.note-soft{font-family:Caveat,cursive; font-size:1.3rem; color:var(--marker);
  transform:rotate(-1deg); display:inline-block; margin-top:8px}
.seed{background:var(--ink); color:#e9e2cf; border-radius:8px; padding:18px;
  font-family:ui-monospace,monospace; font-size:.86rem; white-space:pre-wrap;
  position:relative; margin-top:14px}
.seed button{position:absolute; top:10px; right:10px; background:var(--accent);
  border:0; color:#04201b; font-weight:700; border-radius:5px; padding:6px 11px;
  cursor:pointer; font-family:Inter,sans-serif}
.cta-final{display:flex; gap:16px; flex-wrap:wrap; margin-top:22px}
.cta-final a{background:var(--ink); color:var(--paper); text-decoration:none;
  padding:12px 20px; border-radius:6px; font-weight:600; box-shadow:3px 3px 0 var(--accent)}

footer{padding:50px 0 80px; color:var(--ink-faint); font-size:.85rem; text-align:center}

/* ---- responsive ---- */
@media(max-width:920px){
  :root{--gut:0px}
  .gutter{display:none}
  .stage{grid-template-columns:0 1fr 0}
  /* on small screens, annotations fall back to inline notes */
  .method-steps{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .method-steps{grid-template-columns:1fr}
  .phone{width:240px}
}