/* Learn AI · yauhenm.com/learn
   Dark site chrome (yauhenm tokens) + warm paper reading surface (Notion-style calm column)
   + one dark scoreboard panel and hard type contrast (Nike-style). Square corners, like the site nav. */
:root{
  --bg:#070707;--bg-soft:#16130F;--bone:#F0EDE6;--bone-mute:#A89F92;--gold:#C8A84E;--gold-bright:#E5C987;--rust:#C7593C;
  --rule:rgba(242,237,227,.10);--rule-strong:rgba(242,237,227,.22);
  --paper:#0B0A09;--card:#15130F;--card-2:#1D1A15;--ink:#ECE6D9;--ink-2:#BDB4A6;--ink-3:#AFA597;--rule-p:rgba(240,237,230,.11);--rule-p2:rgba(240,237,230,.22);
  --ex:#1A1712;--ex-line:#C8A84E;--focus:#E5C987;
  --ok:#86CF9D;--ok-bg:#13241A;--no:#EE9A85;--no-bg:#2A1712;
  --display:'Anton',Impact,sans-serif;--serif:'Fraunces',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{background:var(--bg);color:var(--bone);font:400 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
code{font:500 max(16px,.86em)/1.4 var(--mono);background:rgba(240,237,230,.09);padding:.1em .35em;white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.paper :focus-visible{outline-color:var(--focus)}
.btn,.opt,.tab,.linkbtn{font-family:var(--sans)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- top bar (matches site nav) ---------- */
.bar{max-width:1104px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.bar-home{font:400 20px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--bone);text-decoration:none;display:flex;align-items:center;gap:10px}
.bar-mark{width:32px;height:32px;flex:none;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMykiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0M4QTg0RSIgc3Ryb2tlLXdpZHRoPSIyMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48cGF0aCBkPSJNNDgsMzggQzQ4LDEyOCAxNTIsMTI4IDE1MiwzOCIvPjxwYXRoIGQ9Ik0xMDAsMTA1IEwxMDAsMTU2Ii8+PHBhdGggZD0iTTc0LDE2OCBMMTI2LDE2OCIvPjwvZz48Y2lyY2xlIGN4PSIxMDAiIGN5PSI3MSIgcj0iMjEiIGZpbGw9IiNGMEVERTYiLz48L2c+PC9zdmc+") center/contain no-repeat}
.bar-back{font:500 16px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone);text-decoration:none;border:1px solid var(--rule-strong);padding:12px 14px;min-height:44px;display:inline-flex;align-items:center;transition:background .2s,color .2s}
.bar-back:hover{background:var(--bone);color:var(--bg)}
.bar-back::before{content:"\2190";margin-right:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:1px solid var(--rule-p2);background:transparent;color:var(--ink);font:600 16px/1.3 var(--sans);text-decoration:none;cursor:pointer;border-radius:4px;transition:background .15s,border-color .15s,color .15s}
.btn:hover:not(:disabled){border-color:var(--ink)}
.btn:disabled{opacity:.35;cursor:default}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#17130c}
.btn.primary:hover:not(:disabled){background:var(--gold-bright);border-color:var(--gold-bright)}
.btn.danger{background:var(--no);border-color:var(--no);color:#fff}
.btn.small{min-height:36px;padding:6px 12px;font-size:16px}
.linkbtn{background:none;border:0;color:var(--ink-2);font:500 16px/1 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;padding:0 2px}
.linkbtn:hover{color:var(--ink)}

/* =================== INDEX (/learn) =================== */
.ix{max-width:1104px;margin:0 auto;padding:0 24px 96px}
.ix-hero{padding:64px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px;align-items:end;border-bottom:1px solid var(--rule-strong)}
.ix-hero h1{font:400 clamp(64px,10vw,128px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--bone)}
.ix-hero h1 em{font-style:normal;color:var(--gold)}
.ix-sub{font:400 20px/1.5 var(--sans);color:var(--bone);max-width:480px}
.ix-sub+.ix-sub{color:var(--bone-mute);font-size:17px;margin-top:14px}
.ix-label{font:500 16px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute);margin:48px 0 0;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.course{display:grid;grid-template-columns:56px minmax(0,1fr) 280px;gap:24px;align-items:start;padding:36px 0;border-bottom:1px solid var(--rule-strong);text-decoration:none;color:var(--bone)}
.course-n{font:400 44px/1 var(--display);color:var(--gold)}
.course h2{font:500 clamp(26px,3.2vw,36px)/1.15 var(--serif);letter-spacing:-.01em}
.course h2 code{font:500 max(16px,.9em) var(--mono);background:none;padding:0;color:var(--gold-bright)}
.course-d{color:var(--bone-mute);margin-top:10px;max-width:560px;font-size:17px}
.course-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font:500 16px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bone-mute)}
.course-meta .live{color:var(--bone)}
.course-meta .live::before{content:"";display:inline-block;width:7px;height:7px;background:var(--gold);margin-right:8px;vertical-align:1px}
.course-side{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.course .btn.primary{width:100%}
.course:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.lessons{list-style:none;margin-top:18px;border-top:1px solid var(--rule)}
.lessons li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px;color:var(--bone)}
.lessons li span{font:500 16px/1.9 var(--mono);color:var(--bone-mute)}
.later{margin-top:48px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px}
.later h3{grid-column:2;font:500 16px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute)}
.later ul{grid-column:2;list-style:none}
.later li{padding:12px 0;border-bottom:1px solid var(--rule);color:var(--bone-mute);font-size:16px}
.later li b{color:var(--bone);font-weight:600}
.why-me{margin-top:72px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px}
.why-me p{grid-column:2;max-width:620px;font:400 21px/1.55 var(--serif);color:var(--bone)}
.why-me p+p{font:400 16px/1.5 var(--sans);color:var(--bone-mute);margin-top:14px}
.why-me a{color:var(--gold)}
.ix-foot{margin-top:64px;padding-top:20px;border-top:1px solid var(--rule);font:500 16px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-mute)}
.ix-foot a{color:var(--bone)}

/* =================== LESSON =================== */
.paper{background:var(--paper);color:var(--ink)}
.layout{max-width:1040px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:184px minmax(0,680px);gap:56px;justify-content:center}
.rail-in{position:sticky;top:0;padding:64px 0 32px}
.rail-h{font:500 16px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.pips{list-style:none;border-top:1px solid var(--rule-p)}
.pip a{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule-p);font-size:16px;line-height:1.35;color:var(--ink-3);text-decoration:none}
.pip i{font:500 16px/1.9 var(--mono);font-style:normal;color:var(--ink-3);width:18px;flex:none}
.pip.done a{color:var(--ink)}
.pip.done i::after{content:"\2713";color:var(--ok);margin-left:2px}
.pip.done i{font-size:0}.pip.done i::after{font-size:16px}
.pip.now a{color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--gold);padding-left:10px}
.score{margin-top:22px;background:var(--bg);color:var(--bone);padding:14px 14px 12px;display:flex;flex-direction:column;gap:2px}
.score-l{font:500 16px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute)}
.score-n{font:700 30px/1.1 var(--mono);color:var(--bone-mute)}
.score-n b{color:var(--gold-bright)}
.tick{display:inline-block;animation:tick .12s ease-out}
@keyframes tick{from{opacity:.2}to{opacity:1}}
.saved{font:400 16px/1.4 var(--sans);color:var(--ink-3);margin-top:10px}
.now-m{display:none}

.page{min-width:0;padding:64px 0 96px}
.intro{padding-bottom:40px;border-bottom:1px solid var(--rule-p2)}
.kicker,.num,.drill-h,.ex-tag{font:500 16px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.intro h1{font:500 44px/1.12 var(--serif);letter-spacing:-.015em;margin:14px 0 18px;overflow-wrap:anywhere}
.lead{font-size:20px;line-height:1.55;color:var(--ink)}
.greet{display:none;margin-top:22px;padding:10px 14px;border-left:3px solid var(--gold);background:var(--card);color:var(--ink-2);font-size:16px}
.greet.on{display:block}
.greet a{color:var(--focus);font-weight:600}
.words{margin-top:28px;border-top:1px solid var(--rule-p)}
.words div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--rule-p);font-size:16px;line-height:1.5}
.words dt{font:600 16px/1.6 var(--mono)}
.words dd{color:var(--ink-2)}

.beat{padding:56px 0;border-bottom:1px solid var(--rule-p)}
.beat h2{font:500 28px/1.2 var(--serif);letter-spacing:-.01em;margin:10px 0 18px}
.beat h2.big{font:600 clamp(28px,3.6vw,38px)/1.15 var(--serif);text-transform:none;letter-spacing:-.01em;margin:14px 0 22px}
.beat h3{font:600 19px/1.3 var(--sans);margin:44px 0 10px}
.beat p{margin-bottom:16px}
.beat.locked{display:none}
.reveal-in{animation:rise .45s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.aside{font-size:16px;color:var(--ink-3)}
.cmd{background:#000;color:var(--bone);padding:16px 18px;margin:6px 0 20px;overflow-x:auto;border-left:3px solid var(--gold)}
.cmd code{background:none;padding:0;color:var(--bone);font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}

/* options */
.opts{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px}
.opt{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;min-height:52px;padding:13px 16px;background:var(--card);border:1px solid var(--rule-p2);border-radius:4px;color:var(--ink);font:400 16px/1.45 var(--sans);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt-k{font:600 16px/1.9 var(--mono);color:var(--ink-3);flex:none}
.opt.picked{border-color:var(--ink-3);background:var(--card-2)}
.opt.picked::after{content:"Your pick";margin-left:auto;flex:none;font:500 16px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.opt.right{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.opt.right::before{content:"\2713";font-weight:700}
.opt.wrong{background:var(--no-bg);border-color:var(--no);color:var(--no)}
.opt.wrong::before{content:"\2717";font-weight:700}
.opt:disabled{cursor:default}
.opt:disabled:not(.right):not(.wrong){opacity:.55}
.fb{display:none;padding:14px 16px;font-size:16px;line-height:1.55;background:var(--ex)}
.fb.on{display:block}
.fb.ok{background:var(--ok-bg);color:#CFEBD8;border-left:3px solid var(--ok)}
.fb.no{background:var(--no-bg);color:#F6D4CB;border-left:3px solid var(--no)}
.fb .btn{margin-top:4px}
.prompt{font-weight:600;margin-bottom:6px}
.misses{font:500 16px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}

/* machine */
.machine{border:1px solid var(--rule-p2);background:var(--card);padding:20px;margin:20px 0 8px}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:n}
.node{position:relative;padding:12px;border:1px solid var(--rule-p);font-size:16px;line-height:1.35;color:var(--ink-3);transition:all .2s}
.node span{display:block;font:500 16px/1.4 var(--mono);margin-bottom:4px}
.node.on{background:var(--card-2);color:var(--bone);border-color:var(--gold)}
.node.on span{color:var(--gold)}
.verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;padding-top:10px;border-top:2px solid var(--rule-p2)}
.verdicts::before{content:"After step 3, one of three endings:";grid-column:1/-1;font:500 16px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.v{padding:9px 12px;font:500 16px/1.35 var(--sans);border:1px solid var(--rule-p);color:var(--ink-3);transition:all .2s}
.v.on.v-no{border:1px solid var(--rust);color:var(--no);background:var(--no-bg)}
.v.on.v-ok{border:1px solid var(--ok);color:var(--ok);background:var(--ok-bg)}
.v.on.v-x{border:1px solid var(--ink-2);color:var(--ink);background:var(--ex)}
.stepbox{min-height:96px;margin:18px 0 14px;font-size:17px;line-height:1.55}
.stepbox a{color:var(--focus)}
.stepctl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stepctl .count{font:500 16px/1.45 var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}

/* tabs + chat */
.tabs{display:flex;gap:0;margin-top:14px;border-bottom:1px solid var(--rule-p2)}
.tab{min-height:48px;padding:10px 16px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;color:var(--ink-3);font:600 16px/1.3 var(--sans);cursor:pointer}
.tab.active{color:var(--ink);border-bottom-color:var(--gold)}
.chat{background:#000;border:1px solid var(--rule-p);color:var(--bone);padding:16px 18px;font:400 16px/1.6 var(--mono);min-height:120px}
.chat p{margin:0 0 10px;overflow-wrap:anywhere}.chat p:last-child{margin:0}
.chat span{display:block;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute)}
.chat .cl span{color:var(--gold)}
.chat mark{background:none;color:var(--gold-bright);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.refsee{padding:14px 0 0;font-size:16px;line-height:1.55}
.tag{display:inline-block;font:600 16px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;margin-right:8px;vertical-align:2px}
.tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.no{background:var(--no-bg);color:var(--no)}

/* scoreboard panel */
.sb{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--card);border:1px solid var(--rule-p2);color:var(--bone);margin:26px 0 30px}
.sb-cell{padding:16px 18px;border-right:1px solid var(--rule-strong);display:flex;flex-direction:column;gap:6px}
.sb-cell:last-child{border-right:0}
.sb-l{font:500 16px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute)}
.sb-n{font:700 40px/1 var(--mono);color:var(--gold-bright)}
.sb-w{font:400 40px/1 var(--display);text-transform:uppercase;color:#7fc796}

/* life examples */
.life{display:flex;flex-direction:column;gap:10px;margin:8px 0 26px}
.ex{background:var(--ex);border-left:3px solid var(--ex-line);padding:16px 20px}
.ex p{margin:0;font-size:17px}
.ex p.ex-tag{margin-bottom:4px;color:var(--ex-line);font-size:16px}
.check{display:none;padding:14px 16px;font-size:16px;margin:0 0 8px}
.check.on{display:block}
.check.ok{background:var(--ok-bg);border-left:3px solid var(--ok)}
.check.no{background:var(--ex);border-left:3px solid var(--ink-2)}
.recipe{list-style:none;counter-reset:r;border-top:1px solid var(--rule-p2)}
.recipe li{counter-increment:r;display:grid;grid-template-columns:44px minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--rule-p)}
.recipe li::before{content:counter(r);font:400 30px/1 var(--display);color:var(--ex-line)}
.why{margin-top:22px;font-size:16px}
.why-q{font-weight:600;margin-bottom:4px!important}
.why p{color:var(--ink-2);margin-top:6px}
.why a,.beat a:not(.btn){color:var(--focus);text-underline-offset:3px}

/* drills */
.drill{margin-top:24px;padding:22px;border:1px solid var(--rule-p2);background:var(--card)}
.drill .drill-h{margin-bottom:14px;color:var(--ink)}
.drill.passed{border-color:var(--ok)}
.drill.passed .drill-h::after{content:"  \2713 passed";color:var(--ok)}
.vague{font:500 16px/1.5 var(--mono);background:#000;color:var(--bone);padding:12px 14px;margin-bottom:10px;border-left:3px solid var(--rust)}
textarea{width:100%;min-height:110px;padding:12px 14px;border:1px solid var(--rule-p2);border-radius:4px;background:#000;color:var(--ink);font:400 16px/1.5 var(--mono);resize:vertical}
textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.checks{list-style:none;margin:14px 0 10px}
.checks li{padding:8px 0;border-bottom:1px solid var(--rule-p);font-size:16px}
.checks li.ok{color:var(--ok)}.checks li.no{color:var(--no)}
.checks small{display:block;color:var(--ink-2);font-size:16px;margin-top:2px}

/* try it + next */
.try{background:var(--card);border:1px solid var(--rule-p2);padding:22px;margin:22px 0}
.try .drill-h{color:var(--ink);margin-bottom:12px}
.cheat{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:16px}
.cheat td{padding:10px 12px 10px 0;border-top:1px solid var(--rule-p);vertical-align:top}
.cheat td:first-child{white-space:nowrap;width:1%}
@media (max-width:600px){.cheat td:first-child{white-space:normal;max-width:9em}}
.ask{background:var(--card-2);border-left:3px solid var(--gold);color:var(--bone);padding:14px 16px}
.next{margin-top:36px;padding-top:22px;border-top:1px solid var(--rule-p2)}
.next ul{list-style:none;margin:10px 0 22px}
.next li{padding:10px 0;border-bottom:1px solid var(--rule-p);font-size:16px;color:var(--ink-2)}
.next li b{color:var(--ink)}
.foot{padding-top:40px;font-size:16px;color:var(--ink-3)}
.foot p{margin-top:12px;max-width:560px}
.confirm{margin-top:10px;padding:16px;background:var(--no-bg);border-left:3px solid var(--no);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.confirm p{width:100%;color:#F6D4CB;font-size:16px}
.confirm[hidden]{display:none}

/* =================== responsive =================== */
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0;max-width:720px}
  .rail{display:none}
  .page{padding-top:40px}
  /* phone: anchors and the step drawing land below the sticky progress bar */
  .beat,.machine,.drill{scroll-margin-top:72px}
}
@media (max-width:760px){
  .ix-hero{grid-template-columns:minmax(0,1fr);gap:24px;padding:40px 0 32px}
  .course{grid-template-columns:36px minmax(0,1fr);gap:14px}
  .course-n{font-size:32px}
  .course-side{grid-column:1/-1}
  .later,.why-me{grid-template-columns:minmax(0,1fr)}
  .later h3,.later ul,.why-me p{grid-column:1}
}
@media (max-width:560px){
  body{font-size:17px}
  .bar{padding:16px 20px}
  .bar-home{font-size:16px}
  .bar-mark{width:26px;height:26px}
  .bar-back{padding:10px 12px}
  .layout,.ix{padding-left:20px;padding-right:20px}
  .intro h1{font-size:34px;line-height:1.15}
  .lead{font-size:18px}
  .words div{grid-template-columns:minmax(0,1fr);gap:2px}
  .beat{padding:44px 0}
  .beat h2{font-size:25px}
  .flow,.verdicts{grid-template-columns:minmax(0,1fr)}
  .verdicts{grid-template-columns:minmax(0,1fr);margin:0 0 0 22px;padding:8px 0 0 12px;border-top:0;border-left:2px solid var(--rule-p2)}
  .machine,.drill,.try{padding:16px}
  .sb-cell{padding:12px}
  .sb-n,.sb-w{font-size:30px}
  .stepctl .btn{padding:12px 16px}
  .tab{padding:10px 10px;font-size:16px}
  .ix-hero h1{font-size:64px}
  .ix-sub{font-size:18px}
}
/* chips lesson: step pictures, "who" line, order drill */
.step-img{display:block;width:100%;max-width:320px;height:auto;margin:0 auto 12px;background:var(--card);border:1px solid var(--rule-p)}
.stepbox .who{margin-top:8px;padding-left:12px;border-left:3px solid var(--gold);font-size:16px;color:var(--ink-2)}
.order-done{list-style:none;counter-reset:o;display:flex;flex-direction:column;gap:6px;margin:12px 0}
.order-done:empty{display:none}
.order-done li{counter-increment:o;padding:10px 12px;background:var(--card-2);border:1px solid var(--rule-p2);color:var(--bone);font-size:16px}
.order-done li::before{content:counter(o) " · ";font:500 16px/1 var(--mono);color:var(--gold)}
.order-pool{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
@media (max-width:560px){.journey .flow{grid-template-columns:repeat(2,minmax(0,1fr))}.order-pool{grid-template-columns:minmax(0,1fr)}}
@media print{.bar,.rail,.foot{display:none}.beat.locked{display:block}body,.paper{background:#fff;color:#000}}

/* first visit: hide the lesson footer until the reader picks a guess */
body.fresh .foot{display:none}
/* council r-chips: calmer "Remember" headline in the chips lesson, finished state shows results, not tasks */
body.chips .beat h2.big{font:600 clamp(28px,3.6vw,38px)/1.15 var(--serif,'Fraunces',serif);text-transform:none}
.drill.passed .task{display:none}
body.finished.chips #predict-opts{display:none}
/* cover and header pictures (GPT Image via Codex) */
.course-img{display:block;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--rule-strong);background:var(--bg-soft)}
.course-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.course:hover .course-img img{transform:scale(1.03)}
.lesson-hero{margin:0 0 28px;aspect-ratio:12/5;overflow:hidden;border:1px solid var(--rule-p2);background:var(--card)}
.lesson-hero img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:560px){.lesson-hero{aspect-ratio:16/9;margin:0 -20px 24px;border-left:0;border-right:0}}
.stepctl .next-step:disabled{display:none}
.stepctl .count.end{color:var(--gold)}
/* council 5 Nov: one gold frame per section, not one per example */
.life{background:var(--ex);border-left:3px solid var(--ex-line);padding:4px 20px;gap:0}
.life .ex{background:none;border:0;padding:14px 0;border-top:1px solid var(--rule-p)}
.life .ex:first-child{border-top:0}
.ask{border-left:1px solid var(--rule-p2)}
/* 5 Nov: covers are gold line drawings, not photos */
.course-img,.lesson-hero{background:var(--card)}
.course-img img,.lesson-hero img{object-fit:contain;padding:6% 8%}
.course:hover .course-img img{transform:none}
.lesson-hero{aspect-ratio:2/1}
@media (max-width:560px){.lesson-hero{aspect-ratio:3/2}}
.course-img img,.lesson-hero img{padding:2% 3%}
.lesson-hero{aspect-ratio:5/2;max-height:300px}
@media (max-width:560px){.lesson-hero{aspect-ratio:2/1}}
/* 6 Nov: index as two calm lists (council: learn-index-sort) */
.ix2{max-width:800px}
.ix2 .ix-hero{display:block;padding:56px 0 24px}
.ix2 .ix-hero h1{font-size:clamp(52px,7vw,88px)}
.ix2 .ix-sub{margin-top:20px;max-width:none}
.grp{margin-top:80px}
.grp h2{font:600 clamp(28px,3.4vw,36px)/1.15 var(--serif);letter-spacing:-.01em;color:var(--bone)}
.grp-i{color:var(--bone-mute);margin-top:8px;max-width:600px;font-size:17px}
.rows{list-style:none;margin-top:24px;border-top:1px solid var(--rule)}
.rows li{border-bottom:1px solid var(--rule)}
.row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center;padding:16px 0;text-decoration:none;color:inherit}
.row img{width:120px;height:80px;display:block;background:var(--card);border:1px solid var(--rule)}
.row-t{display:block;font:500 22px/1.25 var(--serif);color:var(--bone);transition:color .15s}
.row-t code{font:500 max(16px,.85em) var(--mono);color:var(--gold-bright)}
.row-d{display:block;color:var(--bone-mute);font-size:16px;line-height:1.45;margin-top:4px}
.row:hover .row-t,.row:focus-visible .row-t{color:var(--gold-bright)}
.row:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.path{border-left:1px solid var(--gold);border-top:0;padding-left:20px}
.path li:first-child .row{padding-top:4px}
.ix2 .why-me{margin-top:96px;display:block}
@media (max-width:560px){
  .ix2 .ix-hero h1{font-size:52px}
  .grp{margin-top:56px}
  .row{grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start}
  .row img{width:72px;height:48px}
  .row-t{font-size:19px}
  .row-d{font-size:16px}
  .path{padding-left:14px}
}

/* get-skill block and skills list */
.getskill{margin:28px 0 20px;padding:20px;border:1px solid var(--rule-p2);border-radius:4px}
.getskill .ex-tag{margin-bottom:8px}
.getskill p{margin-bottom:14px}
.getskill code{white-space:normal;overflow-wrap:anywhere}
.skl{list-style:none;margin-top:24px;border-top:1px solid var(--rule)}
.skl li{border-bottom:1px solid var(--rule)}
.sk{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:16px 0;min-height:44px;text-decoration:none;color:var(--bone)}
.sk code{color:var(--gold);white-space:normal}
.sk-d{color:var(--bone)}
.sk-by{color:var(--bone-mute);font-size:16px}
.sk:hover .sk-d{text-decoration:underline}
@media (max-width:640px){.sk{grid-template-columns:1fr}.sk-by{font-size:16px}}

/* phone pass: tap targets */
.bar-home,.bar-back{display:inline-flex;align-items:center;min-height:44px}
/* phone pass: number boxes stack on phones; labels may wrap */
.sb-cell{min-width:0}
.sb-l{overflow-wrap:anywhere}
@media (max-width:560px){
  .sb{grid-template-columns:1fr}
  .sb-cell{border-right:0;border-bottom:1px solid var(--rule-strong);flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px}
  .sb-cell:last-child{border-bottom:0}
  .sb-l{letter-spacing:.04em}
}
.sb-n,.sb-w{white-space:nowrap}
@media (max-width:400px){
  .cheat,.cheat tbody,.cheat tr,.cheat td{display:block;width:auto}
  .cheat td:first-child{white-space:normal;width:auto;padding-bottom:0;font-weight:600}
}
/* engraved covers (6 Nov): the frame matches the picture's black, so no box inside a box */
.lesson-hero,.row-img,.course-img{background:#070707}
.lesson-hero img{padding:0;object-fit:contain}
/* site follow bar on /learn: no text under 16px (hide the label on phones, icons stay) */
body .follow-bar-label{font-size:16px}
@media (max-width:560px){body .follow-bar-label{display:none}}