/* LP Simplex Lab · styles
   Layout: minimal, paper-like. No card boxes: sections separated by whitespace and one hairline. Ink + grey + one blue; red/amber only for leaving row & pivot. */
:root{
  --bg:#FFFFFF; --ink:#111214; --muted:#6B6F76; --faint:#A3A7AE; --line:#E6E7EA; --soft:#F6F6F7;
  --accent:#1F4FD1; --accent-soft:rgba(31,79,209,.07);
  --leave:#C23A4E; --leave-soft:rgba(194,58,78,.07); --pivot:#D99A00; --pivot-soft:rgba(217,154,0,.16);
  --good:#1D7A4E; --bad:#C23A4E; --warn:#9A6A00; --region:rgba(31,79,209,.10); --grid:#EFF0F2;
  --f-ui:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111214; --ink:#ECEDEF; --muted:#9A9EA6; --faint:#62666D; --line:#26282C; --soft:#1A1B1E;
  --accent:#86A5FF; --accent-soft:rgba(134,165,255,.10); --leave:#F08597; --leave-soft:rgba(240,133,151,.10);
  --pivot:#F2BE4A; --pivot-soft:rgba(242,190,74,.16); --good:#5CC892; --bad:#F08597; --warn:#E3B14F; --region:rgba(134,165,255,.13); --grid:#1E2023; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#111214; --ink:#ECEDEF; --muted:#9A9EA6; --faint:#62666D; --line:#26282C; --soft:#1A1B1E;
  --accent:#86A5FF; --accent-soft:rgba(134,165,255,.10); --leave:#F08597; --leave-soft:rgba(240,133,151,.10);
  --pivot:#F2BE4A; --pivot-soft:rgba(242,190,74,.16); --good:#5CC892; --bad:#F08597; --warn:#E3B14F; --region:rgba(134,165,255,.13); --grid:#1E2023; color-scheme:dark;}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.55}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;padding-block:22px 10px}
.brand h1{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
nav.tabs{display:flex;gap:22px;flex-wrap:wrap}
nav.tabs button{border:0;background:none;color:var(--muted);font:500 14.5px var(--f-ui);padding:2px 0;cursor:pointer;border-bottom:1.5px solid transparent}
nav.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--ink)}
main{padding-block:14px 80px}
.grid2{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:980px){.grid2{grid-template-columns:minmax(0,1fr);gap:24px}}
.stack{display:flex;flex-direction:column;gap:0;min-width:0}
.card{padding-block:22px;border-top:1px solid var(--line);min-width:0}
.stack>.card:first-child{border-top:0;padding-top:8px}
.card h2{margin:0 0 6px;font-size:15px;font-weight:600;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.card h2 .step{font:500 11px var(--f-num);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.card .sub{margin:0 0 14px;color:var(--muted);font-size:13.5px;max-width:68ch}
label.lbl,.lbl{display:block;font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:16px 0 6px}
select,input[type=text]{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:5px 7px}
select{width:100%}
input.num{width:3.4em;text-align:center;font-family:var(--f-num);font-size:13.5px;padding:4px 2px}
input.bad,input.num.bad{border-color:var(--bad)}
input.okc{border-color:var(--good)}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.seg{display:inline-flex;gap:14px}
.seg button{border:0;background:none;font:500 14px var(--f-ui);color:var(--faint);padding:0;cursor:pointer}
.seg button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.steppers{display:flex;gap:16px;flex-wrap:wrap}
.stepper{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}
.stepper button{width:24px;height:24px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 15px var(--f-ui);cursor:pointer;line-height:1}
.stepper b{font-family:var(--f-num);font-weight:500;color:var(--ink);min-width:1.3em;text-align:center}
.eqbox{overflow-x:auto;padding-bottom:4px;margin-top:12px}
.eqrow{display:flex;align-items:center;gap:4px;white-space:nowrap;margin:5px 0}
.eqrow .tag{font:400 12px var(--f-num);color:var(--faint);width:2.2em}
.eqrow select{width:auto;padding:3px 2px;font-family:var(--f-num)}
.v{font-family:var(--f-math);font-style:italic;font-size:1.07em}
.v sub{font-family:var(--f-ui);font-style:normal;font-size:.68em}
.signs{display:flex;flex-wrap:wrap;gap:6px 14px}
.signs label{display:flex;align-items:center;gap:6px;font-size:14px}
.signs select{width:auto;padding:2px 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 14px var(--f-ui);padding:7px 14px;border-radius:4px;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.small{padding:4px 10px;font-size:13px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.err{color:var(--bad);font-size:13.5px;margin:8px 0 0}
.hint{color:var(--muted);font-size:13px}
.pill{font:500 12px var(--f-ui);letter-spacing:.06em;text-transform:uppercase}
.pill.good{color:var(--good)} .pill.bad{color:var(--bad)} .pill.info{color:var(--accent)}
.answer{font-size:22px;font-weight:500;margin:6px 0 4px;display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline}
.answer .num{font-family:var(--f-num)}
table{border-collapse:collapse}
.checktbl td,.checktbl th{padding:4px 12px 4px 0;border-bottom:1px solid var(--line);font-size:13.5px;text-align:left;white-space:nowrap}
.checktbl th{color:var(--faint);font-weight:500;font-size:12px}
.checktbl .num{font-family:var(--f-num)}
.scroll{overflow-x:auto;max-width:100%}
details summary{cursor:pointer}
.rules{margin:0;padding:0;list-style:none}
.rules li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;font-size:14px;padding:6px 0}
.rules .rk{font:500 11px var(--f-num);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding-top:3px}
@media (max-width:560px){.rules li{grid-template-columns:minmax(0,1fr);gap:0}}
.system,.prob{font-family:var(--f-math);font-size:16px;border-left:2px solid var(--line);padding:4px 0 4px 16px;margin:12px 0;overflow-x:auto}
.system table td,.prob table td{padding:1px 6px;white-space:nowrap;vertical-align:baseline}
.system .lab,.prob .lab{font-family:var(--f-ui);font-size:11.5px;color:var(--faint)}
.system .fr,.prob .fr{font-family:var(--f-num);font-size:.84em}
.kind{font:500 9.5px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.kind.art{color:var(--bad)}
/* tableau */
.tab{font-family:var(--f-num);font-size:13.5px;margin-top:6px}
.tab th,.tab td{padding:5px 10px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.tab thead th{font-weight:400;color:var(--muted);vertical-align:bottom}
.tab thead th .v{color:var(--ink)}
.tab tr.cj th{color:var(--faint);font-size:12px;border-bottom:0}
.tab td.bv{font-family:var(--f-ui)}
.tab tr.zrow td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:500}
.tab .enter{background:var(--accent-soft)}
.tab tr.leave td{background:var(--leave-soft)}
.tab td.pivot{background:var(--pivot-soft)!important;box-shadow:inset 0 0 0 1.5px var(--pivot);font-weight:600}
.tab td.lam.pos{color:var(--good)}
.tab td.theta{color:var(--faint)}
.tab td.theta.min{color:var(--leave);font-weight:600}
.tab td.blank{color:var(--faint)}
.tab tr.currow td{background:var(--soft)}
.tab input{width:4.2em;text-align:center;font-family:var(--f-num);font-size:13px;padding:3px 2px}
.tab button.pick{font:inherit;font-weight:600;color:var(--good);background:none;border:1px dashed var(--good);border-radius:3px;padding:0 6px;cursor:pointer}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--faint);margin-top:8px}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;background:var(--c)}
.frames{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:4px 0 10px}
.frames button{font:500 13px var(--f-num);border:0;background:none;color:var(--faint);padding:2px 0;cursor:pointer;border-bottom:1.5px solid transparent}
.frames button[aria-current="true"]{color:var(--ink);border-color:var(--ink)}
.frames .sep{width:1px;height:14px;background:var(--line)}
.explain{display:grid;gap:16px;margin-top:16px}
.explain .box{font-size:14px;max-width:84ch;min-width:0}
.explain .box h4{margin:0 0 4px;font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.explain .box.stop h4{color:var(--bad)} .explain .box.done h4{color:var(--good)}
.explain ul{margin:0;padding-left:18px}
.explain li{margin:2px 0}
.warn{color:var(--warn)}
.tabgrid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:28px;align-items:start}
@media (max-width:760px){.tabgrid{grid-template-columns:minmax(0,1fr)}}
/* row-operation calculations */
.calc{display:grid;gap:14px;margin-top:6px}
.calc .op{font-size:13.5px;min-width:0}
.calc .op .t{margin-bottom:2px}
.calc table{font-family:var(--f-num);font-size:12.5px}
.calc td,.calc th{padding:2px 9px;text-align:center;white-space:nowrap}
.calc th{color:var(--faint);font-weight:400}
.calc td:first-child,.calc th:first-child{text-align:left;color:var(--muted);font-family:var(--f-ui);padding-left:0}
.calc tr.res td{border-top:1px solid var(--ink);font-weight:600}
.calc .pk{background:var(--accent-soft)}
/* graph */
.graphgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,220px);gap:28px;align-items:start}
@media (max-width:760px){.graphgrid{grid-template-columns:minmax(0,1fr)}}
svg.plot{width:100%;height:auto;display:block;font-family:var(--f-num);max-width:620px}
svg.plot text{fill:var(--faint);font-size:11px}
svg.plot .lbl{fill:var(--ink);font-size:11px;font-weight:500}
.slider{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.slider input{flex:1;min-width:160px;max-width:420px;accent-color:var(--ink)}
.slider output{font-family:var(--f-num);min-width:7em}
.vt td,.vt th{padding:3px 12px 3px 0;font-size:13px;text-align:right;font-family:var(--f-num);border-bottom:1px solid var(--line)}
.vt th{font-family:var(--f-ui);font-weight:500;color:var(--faint);font-size:12px}
.vt tr.best td{color:var(--good);font-weight:600}
/* practice / exam */
.chips{display:flex;flex-wrap:wrap;gap:6px 18px}
.chips button{border:0;background:none;color:var(--muted);font:500 14px var(--f-ui);padding:2px 0;cursor:pointer;border-bottom:1.5px solid transparent}
.chips button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.ansrow{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:10px 0}
.ansrow label{display:flex;align-items:center;gap:6px}
.ansrow input{width:5.5em;font-family:var(--f-num);text-align:center}
.choice{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.choice button{border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 14px var(--f-ui);padding:5px 12px;border-radius:4px;cursor:pointer}
.choice button[aria-pressed="true"]{border-color:var(--ink)}
.choice button.right{border-color:var(--good);color:var(--good)}
.choice button.wrong{border-color:var(--bad);color:var(--bad)}
.feedback{margin-top:12px;padding:2px 0 2px 14px;border-left:2px solid var(--line);font-size:14px;max-width:84ch}
.feedback.ok{border-color:var(--good)} .feedback.ok b.h{color:var(--good)}
.feedback.no{border-color:var(--bad)} .feedback.no b.h{color:var(--bad)}
.feedback ul{margin:4px 0 0;padding-left:18px}
.score{font:400 12.5px var(--f-num);color:var(--faint)}
#qgraph,#qgraph2{max-width:560px}
.prompt{margin-top:18px}
.prompt .q{font-weight:500;margin-bottom:6px}
.done-tab{opacity:.75}
.intro{padding-block:4px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px}
.intro p{margin:6px 0;max-width:90ch}
.intro ul{margin:6px 0;padding-left:20px;max-width:90ch}
.intro b{color:var(--ink);font-weight:600}
.glg{padding:2px 6px;margin:0 -6px;border-radius:3px;cursor:pointer;white-space:nowrap}
.glg:hover{background:var(--soft)} .glg.on{color:var(--leave);background:var(--leave-soft)}
.glg .lab{font-family:var(--f-ui);font-size:11.5px;color:var(--faint)} .glg .fr{font-family:var(--f-num);font-size:.86em}
.vt tr.sel td{background:var(--soft)}
.vt tr[data-k]:hover td{background:var(--soft)}
.stepper select{padding:3px 6px}
/* notes */
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:0 48px}
.notes .card{padding-top:20px}
.notes .card h3{margin:0 0 8px;font-size:14.5px;font-weight:600}
.notes .card p,.notes .card li{font-size:14px;max-width:68ch}
.notes .card ul,.notes .card ol{padding-left:20px;margin:6px 0}
.formula{font-family:var(--f-math);font-size:16px;padding:6px 0;margin:4px 0;overflow-x:auto;white-space:nowrap}
.key{font-weight:600}
@media (prefers-reduced-motion:no-preference){.fade{animation:fade .2s ease}@keyframes fade{from{opacity:.5}to{opacity:1}}}
.introbtn{border:0;background:none;padding:2px 0;font:600 13.5px var(--f-ui);color:var(--ink);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.introbtn .arrow{display:inline-block;width:1em;color:var(--muted)}
#introbody{margin-top:4px}
.pxl{display:flex;align-items:center;gap:6px}
.tab .p0{border-left:1.5px solid var(--line);font-weight:500}
.pxtop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:24px;align-items:start}
@media (max-width:760px){.pxtop{grid-template-columns:minmax(0,1fr)}}