button{touch-action:manipulation}
body{background:var(--paper)}
#app{font-family:"Inter",system-ui,sans-serif;color:var(--ink);max-width:680px;margin:0 auto;padding:20px 16px 40px;position:relative;z-index:1}
.hdr h1{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:clamp(26px,6vw,38px);line-height:1;letter-spacing:-.02em}
.hdr .sub{font-size:13px;color:var(--ink-2);margin-top:6px;margin-bottom:16px}
/* Section switcher */
.sections{display:flex;background:var(--white);border:1.5px solid var(--ink-3);border-radius:99px;padding:4px;margin-bottom:18px}
.sections button{
  flex:1;font-family:"Inter",sans-serif;font-size:13.5px;font-weight:600;
  padding:10px;border:none;background:none;color:var(--ink-2);cursor:pointer;border-radius:99px;
  transition:all .15s;
}
.sections button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.sections button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.stats{display:flex;gap:1px;background:var(--ink-3);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.stat{flex:1;background:var(--white);padding:11px 8px;text-align:center}
.stat .val{font-family:"Fraunces",serif;font-weight:800;font-size:24px;line-height:1}
.stat .lbl{font-size:10.5px;color:var(--ink-2);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.stat.green .val{color:var(--green)}
.stat.gold .val{color:var(--gold)}
.stat.red .val{color:var(--red)}
.stat.blue .val{color:var(--blue)}
.pbar{height:4px;background:var(--ink-3);border-radius:99px;margin-bottom:6px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .4s ease}
.pmeta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-2);margin-bottom:16px;font-family:"IBM Plex Mono",monospace}
/* Cards */
.stage{perspective:1200px;margin-bottom:14px}
.card{position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.25,.8,.25,1);min-height:260px;cursor:pointer}
.card.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;background:var(--white);border:1px solid var(--ink-3);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;display:flex;flex-direction:column;justify-content:center}
.face.back{transform:rotateY(180deg)}
.cat{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.cat .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.term-name{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(22px,5vw,32px);line-height:1.15}
.flip-hint{font-size:12px;color:var(--ink-3);margin-top:auto;padding-top:18px}
.defn{font-size:15px;line-height:1.6}
.example-box{margin-top:14px;padding:12px 14px;background:var(--paper-2);border-radius:var(--radius);border-left:3px solid var(--gold)}
.example-box .elbl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.example-box p{font-size:14px;line-height:1.5;font-style:italic}
.card-num{position:absolute;top:16px;right:20px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
.card-actions{display:flex;gap:8px}
.card-actions button{flex:1;font-size:13.5px;font-weight:500;padding:12px 10px;border:1.5px solid var(--ink-3);
  background:var(--white);color:var(--ink);cursor:pointer;border-radius:var(--radius);transition:all .15s;font-family:"Inter",sans-serif}
.card-actions button:hover{border-color:var(--ink)}
.card-actions button.know{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.card-actions button.know:hover{background:var(--green);color:var(--on-accent)}
.card-actions button.skip{border-color:var(--red);color:var(--red);background:var(--red-bg)}
.card-actions button.skip:hover{background:var(--red);color:var(--on-accent)}
.card-actions button.nav-btn{flex:0 0 44px;font-size:16px}
/* Quiz */
.q-card{background:var(--white);border:1px solid var(--ink-3);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:14px}
.q-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.q-text{font-family:"Fraunces",Georgia,serif;font-size:clamp(16px,3.5vw,20px);line-height:1.45}
.opts{display:grid;gap:8px;margin-bottom:14px}
.opt{text-align:left;font-size:14.5px;font-weight:500;padding:14px 16px;border:1.5px solid var(--ink-3);
  background:var(--white);color:var(--ink);cursor:pointer;border-radius:var(--radius);transition:all .12s;
  display:flex;align-items:center;gap:10px;font-family:"Inter",sans-serif}
.opt:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2)}
.opt .key{font-family:"IBM Plex Mono",monospace;font-size:11px;width:22px;height:22px;border-radius:4px;
  border:1px solid var(--ink-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink-2)}
.opt.right{background:var(--green);color:var(--on-accent);border-color:var(--green)}
.opt.wrong{background:var(--red);color:var(--on-accent);border-color:var(--red)}
.opt.right .key,.opt.wrong .key{border-color:currentColor;color:var(--on-accent)}
.opt:disabled{cursor:default}
.feedback{background:var(--white);border:1px solid var(--ink-3);border-radius:var(--radius);padding:16px 18px;font-size:14px;line-height:1.55}
.feedback .fb-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.feedback.correct{border-left:3px solid var(--green);background:var(--green-bg)}
.feedback.correct .fb-label{color:var(--green)}
.feedback.incorrect{border-left:3px solid var(--red);background:var(--red-bg)}
.feedback.incorrect .fb-label{color:var(--red)}
.nxt-row{margin-top:12px}
.nxt-btn{width:100%;font-size:14px;font-weight:600;padding:13px;border:none;background:var(--ink);
  color:var(--paper);cursor:pointer;border-radius:var(--radius);transition:background .15s;font-family:"Inter",sans-serif}
.nxt-btn:hover{background:var(--blue)}
/* Results */
.results{background:var(--white);border:1px solid var(--ink-3);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 24px;text-align:center}
.results h2{font-family:"Fraunces",serif;font-weight:800;font-size:32px;margin-bottom:4px}
.results .rsub{font-size:14px;color:var(--ink-2);margin-bottom:16px}
.score-ring{width:100px;height:100px;margin:0 auto 16px;position:relative}
.score-ring svg{transform:rotate(-90deg)}
.score-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Fraunces",serif;font-weight:800;font-size:28px}
.missed-label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:20px 0 8px}
.missed-list span{display:inline-block;background:var(--red-bg);color:var(--red);padding:2px 8px;border-radius:4px;margin:2px 3px;font-weight:500;font-size:13px}
/* Notes */
.note-block{background:var(--white);border:1px solid var(--ink-3);border-radius:var(--radius);padding:18px 20px;margin-bottom:10px}
.note-block h3{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.note-block h3 .ts{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);min-width:40px}
.note-block p{font-size:14px;line-height:1.6}
.note-block ul{font-size:14px;line-height:1.6;padding-left:18px;margin-top:6px}
.note-block li{margin-bottom:4px}
.note-block .formula{margin-top:10px;padding:10px 14px;background:var(--paper-2);border-radius:var(--radius);border-left:3px solid var(--blue);
  font-family:"IBM Plex Mono",monospace;font-size:14px;line-height:1.7}
.note-block .tip{margin-top:10px;padding:10px 14px;background:var(--gold-bg);border-radius:var(--radius);border-left:3px solid var(--gold);
  font-size:13px;line-height:1.5}
.foot{font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:24px;padding-top:14px;border-top:1px solid var(--ink-3)}
@media(prefers-reduced-motion:reduce){.card,.pbar i{transition:none}}
@media(max-width:500px){.face{padding:22px 18px}.stat .val{font-size:20px}}
@media(max-width:600px){
  .sections button{padding:12px 8px}
  .card-actions button{padding:14px 8px}
}
@media(min-width:1000px){
  #app,.topbar .in{max-width:860px}
  .stage,.card-actions,.q-card,.opts,.feedback,.nxt-row,.results{max-width:680px;margin-inline:auto}
}
/* Wide screens: notes flow into two columns to fill the page */
@media(min-width:1400px){
  :is(#app,main):has(#view>.note-block){max-width:1240px}
  #view:has(>.note-block){columns:2;column-gap:14px}
  #view>.note-block{break-inside:avoid}
}

/* Diagram kit — see the Wonton Study Diagrams design system */
.dg{--accent:var(--gold);--accent-bg:var(--gold-bg);width:100%;max-width:420px;height:auto;margin:14px auto 0;display:block;overflow:visible}
.dg text{font-family:"IBM Plex Mono",monospace;font-size:13px;fill:var(--ink);paint-order:stroke;stroke:var(--ground,var(--white));stroke-width:4px;stroke-linejoin:round}
.dg text.sm{font-size:12px;fill:var(--ink-2)}
.dg text.val{font-weight:500}
.dg text.var{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:16px}
.dg text.given{fill:var(--blue)}
.dg text.find{fill:var(--red)}
.dg .mid{text-anchor:middle}
.dg .end{text-anchor:end}
.dg .grid{fill:none;stroke:var(--ink-3);stroke-width:1}
.dg .guide{fill:none;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:4 3}
.dg .axis{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.dg .line{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dg .focus{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dg .s-given{stroke:var(--blue)}
.dg .s-find{stroke:var(--red)}
.dg .mark{fill:none;stroke:var(--ink);stroke-width:1}
.dg .wash{fill:var(--accent-bg);stroke:none}
.dg .mass{fill:var(--ink-3);stroke:none}
.dg .solid{fill:var(--accent);stroke:none}
.dg .pt{fill:var(--ink);stroke:var(--ground,var(--white));stroke-width:1.5}
.dg .pt-open{fill:var(--ground,var(--white));stroke:var(--ink);stroke-width:1.5}
.dg .head{stroke:none;fill:var(--ink-2)}
.dg .head.focus{fill:var(--accent)}
.dg .head.given{fill:var(--blue)}
.dg .head.find{fill:var(--red)}
.dg .band{stroke:var(--ink-3);stroke-width:1}
.dg .photon{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
.dg .band{stroke:var(--ink-3);stroke-width:1}
.dg .photon{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
/* Step-by-step examples, quick checks, harmonic lab */
.note-block ol.steps{font-size:14px;line-height:1.6;padding-left:22px;margin-top:6px}
.note-block ol.steps li{margin-bottom:4px}
.note-block ol.steps li::marker{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2)}
.step-row{display:flex;gap:4px;margin-top:10px;align-items:center}
.step-btn{font:500 13px "Inter",sans-serif;padding:8px 14px;border:1.5px solid var(--ink-3);border-radius:99px;background:none;color:var(--ink);cursor:pointer;transition:border-color .15s}
.step-btn:hover{border-color:var(--ink)}
.step-btn .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);margin-left:6px}
.step-all{font:500 12.5px "Inter",sans-serif;padding:8px 10px;border:none;background:none;color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.note-block:not(.done) .reveal,.note-block:not(.done) .dg .ans,.note-block.done .dg .pre{display:none}
.check{margin-top:12px}
.check summary{display:inline-block;list-style:none;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:6px 0}
.check summary::-webkit-details-marker{display:none}
.check summary::before{content:"+ ";color:var(--ink-3)}
.check[open] summary::before{content:"− "}
.check summary:hover{color:var(--ink)}
.check-q{font-size:14px;line-height:1.5;margin:2px 0 8px}
.check-opts{display:grid;gap:5px}
.check .opt{padding:8px 12px;font-size:13.5px;font-weight:400;border-width:1px}
.check-fb{margin-top:8px;font-size:13.5px;line-height:1.5;padding:8px 12px;border-radius:var(--radius)}
.check-fb.ok{background:var(--green-bg)}
.check-fb.no{background:var(--red-bg)}
.check-fb b{font-weight:600}
.check-fb.ok b{color:var(--green)}
.check-fb.no b{color:var(--red)}
.lab{margin-top:14px}
.lab-ctl{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px 16px;align-items:end}
.lab-ctl label{display:grid;gap:2px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.lab-ctl output{color:var(--ink);font-weight:500}
.lab-ctl input[type=range]{width:100%;accent-color:var(--gold);min-height:28px}
.seg{display:inline-flex;border:1.5px solid var(--ink-3);border-radius:99px;padding:3px}
.seg button{border:none;background:none;font:500 13px "IBM Plex Mono",monospace;color:var(--ink-2);padding:7px 14px;border-radius:99px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.lab-eq{margin-top:14px;font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;text-align:center}
.lab-read{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);text-align:center;margin-top:6px}
.lab .dg{margin-top:6px}
.step-btn:focus-visible,.step-all:focus-visible,.seg button:focus-visible,.check .opt:focus-visible,.check summary:focus-visible,.lab-ctl input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:520px){.lab-ctl{grid-template-columns:1fr 1fr}.lab-ctl .seg{grid-column:1/-1;justify-self:start}}
.opt.right{background:var(--green-bg);color:var(--ink);border-color:var(--green)}
.opt.wrong{background:var(--red-bg);color:var(--ink);border-color:var(--red)}
.opt.right .key{border-color:var(--green);color:var(--green)}
.opt.wrong .key{border-color:var(--red);color:var(--red)}
/* Refinements: eyebrow labels, reading width, calmer notes */
#app{background:var(--paper);box-shadow:0 0 48px 36px var(--paper);clip-path:inset(0 -120px)}  /* notes have no cards now: keep the clouds out from behind the text */
#view>.note-block{background:none;border:none;border-radius:0;box-shadow:none;padding:30px 0;margin:0;border-top:1px solid var(--ink-3)}
#view>.note-block:first-child{border-top:none;padding-top:10px}
#view>.note-block .dg{--ground:var(--paper)}
.note-block .formula{background:var(--white)}
.note-block h3{display:block;font-size:19px;line-height:1.3;margin-bottom:10px;text-wrap:balance}
.note-block h3 .ts{display:block;min-width:0;font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--ink-2);margin-bottom:6px}
.note-block p,.note-block ul,.note-block ol.steps{font-size:14.5px;line-height:1.65}
.note-block li{margin-bottom:6px}
.note-block.ex>p{font-family:"Fraunces",Georgia,serif;font-size:16.5px;line-height:1.55}
.note-block .formula{margin-top:14px}
.note-block .tip{margin-top:12px;border-left:none;padding:12px 14px}
.note-block .tip::before{content:"Tip";display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.check summary::before{color:var(--ink-2)}
#app:has(#view>.note-block) .pbar{display:none}
@media(min-width:1000px) and (max-width:1399px){#app:has(#view>.note-block){max-width:720px}}
@media(max-width:600px){#view>.note-block{padding:26px 0}}
/* Practice */
#app:has(.prac) .pbar{display:none}
.prac{padding:4px 0 8px}
.prac .q-label{color:var(--ink-2);font-size:10.5px;margin-bottom:10px}
.prac .prob{font-family:"Fraunces",Georgia,serif;font-size:18px;line-height:1.55;text-wrap:pretty}
.prac .dg{--ground:var(--paper)}
.prac .dg{margin-top:10px}
.prac .opts{margin:16px 0 0}
.ans-row{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.ans-row label,.ans-row .unit{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--ink-2)}
.ans-box{position:relative;display:inline-flex;align-items:center}
.ans-row input{font:500 16px "IBM Plex Mono",monospace;width:150px;padding:10px 12px;border:1.5px solid var(--ink-3);border-radius:var(--radius);background:var(--white);color:var(--ink)}
.ans-box .unit{position:absolute;right:12px;pointer-events:none}
.ans-row input:focus{outline:none;border-color:var(--ink)}
.ans-row input:disabled{opacity:.7}
.check-btn{font:600 14px "Inter",sans-serif;padding:11px 20px;border:none;border-radius:var(--radius);background:var(--ink);color:var(--paper);cursor:pointer;transition:background .15s}
.check-btn:hover:not(:disabled){background:var(--blue)}
.check-btn:disabled{opacity:.35;cursor:default}
.ans-hint{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);margin-top:6px}
.prac-fb{margin-top:14px;font-size:14.5px;line-height:1.5}
.prac-fb b{font-weight:600}
.prac-fb.ok b{color:var(--green)}
.prac-fb.no b{color:var(--red)}
.sol{margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-3)}
.sol-h{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sol ol.steps{font-size:14.5px;line-height:1.65;padding-left:22px;margin-top:8px}
.sol ol.steps li{margin-bottom:6px}
.prac-actions{display:flex;gap:10px;margin-top:18px;align-items:center;min-height:44px}
.prac-actions .nxt-btn{margin-left:auto;width:auto;padding:11px 20px;font-size:13.5px}
.linkbtn{font:500 13px "Inter",sans-serif;border:none;background:none;color:var(--ink-2);cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}
.check-btn:focus-visible,.linkbtn:focus-visible,.prac-actions .nxt-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* content width for the cloud layout in base.css */
@media(min-width:1000px){:root{--content-w:860px}}
@media(min-width:1000px) and (max-width:1399px){:root:has(#view>.note-block){--content-w:720px}}
@media(min-width:1400px){:root:has(#view>.note-block){--content-w:1240px}}