/* ===== Delhi Hindi — app ===== */
:root{
  --bg:#faf9f7; --panel:#fff; --ink:#1f1d1a; --muted:#6b6560; --faint:#948d85;
  --rule:#e6e1da; --rule2:#f0ece6; --accent:#b45309; --accent2:#7c2d12; --accent-bg:#fdf6ee;
  --green:#14532d; --green-bg:#f2f7f3; --red:#7f1d1d; --red-bg:#fbf5f5;
  --blue:#1e3a8a; --blue-bg:#f3f6fc; --purple:#581c87; --purple-bg:#f8f5fb;
  --sidebar:#f4f1ec; --hit:#ffe9b8; --devsize:1.14em;
  /* status palette — fixed, never themed. Always shipped with an icon + word. */
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  /* sequential amber ramp, light→dark, lightness-monotonic (validated) */
  --seq0:#efece6; --seq1:#f7e3cb; --seq2:#f0c48d; --seq3:#e09244; --seq4:#b45309; --seq5:#7c2d12;
  --grid:#e1e0d9; --axis:#c3c2b7;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --deva:"Noto Serif Devanagari","Noto Sans Devanagari","Kohinoor Devanagari","Devanagari Sangam MN",Mangal,serif;
}
html[data-theme="dark"]{
  --bg:#17181a; --panel:#1e2023; --ink:#e9e6e1; --muted:#a29a91; --faint:#7d756c;
  --rule:#33363a; --rule2:#26292c; --accent:#e6a45c; --accent2:#f0b877; --accent-bg:#2a221a;
  --green:#7fc99a; --green-bg:#1a241d; --red:#e8908c; --red-bg:#271a1a;
  --blue:#8fadf0; --blue-bg:#1a1f2e; --purple:#c4a3e6; --purple-bg:#221a2a;
  --sidebar:#141517; --hit:#5c4a1e;
  --seq0:#2a2c2f; --seq1:#3d2410; --seq2:#6b4114; --seq3:#a1651c; --seq4:#cf8b2c; --seq5:#eeb463;
  --grid:#2c2c2a; --axis:#383835;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.62;-webkit-text-size-adjust:100%}
button{font-family:var(--sans)}
a{color:var(--accent)}

/* ---------------- auth gate ---------------- */
#gate{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;overflow-y:auto}
#gate.show{display:flex}
.gatebox{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:30px 28px;box-shadow:0 12px 40px rgba(0,0,0,.09)}
html[data-theme="dark"] .gatebox{box-shadow:none}
.gatebox .dv{font-family:var(--deva);font-size:34px;color:var(--accent);text-align:center;line-height:1.3}
.gatebox h1{font-family:var(--sans);font-size:21px;text-align:center;margin:6px 0 4px}
.gatebox .sub{text-align:center;color:var(--muted);font-size:14.5px;margin-bottom:20px}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.field input{width:100%;padding:11px 13px;border:1px solid var(--rule);border-radius:9px;background:var(--bg);color:var(--ink);font-size:16px;font-family:var(--sans)}
.field input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.btn{width:100%;padding:12px;border:none;border-radius:9px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--ink)}
.gateswap{text-align:center;margin-top:15px;font-size:14px;color:var(--muted)}
.gateswap a{cursor:pointer;text-decoration:underline}
.gateerr{background:var(--red-bg);border:1px solid var(--red);color:var(--red);padding:9px 12px;border-radius:8px;font-size:14px;margin-bottom:13px}
.gatenote{font-size:13px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

/* ---------------- shell ---------------- */
#app{display:none;height:100vh;overflow:hidden}
#app.show{display:flex}
#sidebar{width:300px;flex:0 0 300px;background:var(--sidebar);border-right:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden}
#main{flex:1;overflow-y:auto;overflow-x:hidden}
#content{max-width:860px;margin:0 auto;padding:32px 40px 130px}
#content.wide{max-width:1080px}

.brand{padding:15px 18px 11px;border-bottom:1px solid var(--rule);cursor:pointer;display:flex;align-items:center;gap:11px}
.brand .dv{font-family:var(--deva);font-size:25px;color:var(--accent);line-height:1}
.brand h1{margin:0;font-family:var(--sans);font-size:14.5px}
.brand .sub{font-family:var(--sans);font-size:10.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}

.tabs{display:flex;gap:4px;padding:9px 11px;border-bottom:1px solid var(--rule)}
.tab{flex:1;padding:8px 4px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:12.5px;cursor:pointer;text-align:center}
.tab:hover{background:rgba(180,83,9,.07);color:var(--ink)}
.tab.on{background:var(--accent);color:#fff;font-weight:600}

.searchwrap{padding:10px 12px;border-bottom:1px solid var(--rule);position:relative}
#q{width:100%;padding:9px 11px 9px 30px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink);font-family:var(--sans);font-size:14px}
#q:focus{outline:2px solid var(--accent);outline-offset:-1px}
.searchwrap svg{position:absolute;left:21px;top:50%;transform:translateY(-50%);opacity:.45;pointer-events:none}
.kbd{position:absolute;right:21px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:10px;color:var(--faint);border:1px solid var(--rule);border-radius:4px;padding:1px 4px;pointer-events:none}

#nav{flex:1;overflow-y:auto;padding:6px 0 20px}
.navbook{font-family:var(--sans);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);padding:14px 18px 4px;font-weight:700}
.navitem{display:flex;align-items:baseline;gap:6px;padding:5px 14px 5px 20px;font-family:var(--sans);font-size:13px;color:var(--muted);cursor:pointer;border-left:2.5px solid transparent;text-decoration:none;line-height:1.4}
.navitem:hover{color:var(--ink);background:rgba(180,83,9,.06)}
.navitem.active{color:var(--accent2);border-left-color:var(--accent);background:rgba(180,83,9,.09);font-weight:600}
.navitem .n{color:var(--faint);font-size:11px;flex:0 0 auto}
.navitem .tick{margin-left:auto;color:var(--good);font-size:12px;flex:0 0 auto}
.toolbar{border-top:1px solid var(--rule);padding:8px 11px;display:flex;gap:6px;flex-wrap:wrap}
.tbtn{font-family:var(--sans);font-size:11.5px;padding:5px 8px;border:1px solid var(--rule);border-radius:7px;background:var(--panel);color:var(--muted);cursor:pointer}
.tbtn:hover{border-color:var(--accent);color:var(--accent)}
.tbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}

#results{display:none;padding:5px 0}
#results.show{display:block}
.rescount{font-family:var(--sans);font-size:10.5px;color:var(--faint);padding:6px 18px;letter-spacing:.06em;text-transform:uppercase}
.res{display:block;padding:9px 18px;border-bottom:1px solid var(--rule2);cursor:pointer;text-decoration:none;color:inherit}
.res:hover{background:rgba(180,83,9,.07)}
.res .rt{font-family:var(--sans);font-size:11.5px;color:var(--accent);margin-bottom:2px}
.res .rs{font-size:12.5px;color:var(--muted);line-height:1.45}
mark{background:var(--hit);color:inherit;border-radius:2px;padding:0 1px}

/* ---------------- reader typography (shared with the books) ---------------- */
h1.chapter{font-family:var(--sans);font-size:30px;line-height:1.2;margin:0 0 20px;padding-bottom:12px;border-bottom:3px solid var(--accent);font-weight:700}
h1.chapter .chnum{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
h2{font-family:var(--sans);font-size:20.5px;color:var(--accent2);margin:32px 0 10px;font-weight:650}
h3{font-family:var(--sans);font-size:16px;margin:22px 0 6px;font-weight:650}
h4{font-family:var(--sans);font-size:14px;margin:16px 0 4px}
p{margin:0 0 13px}
hr{border:none;border-top:1px solid var(--rule);margin:24px 0}
.small{font-size:14px;color:var(--muted)}
.center{text-align:center}
.pagebreak{display:none}
.twocol{column-count:2;column-gap:28px}
@media(max-width:700px){.twocol{column-count:1}}
.dev{font-family:var(--deva);font-size:var(--devsize)}
.rom{font-style:italic}
.phon{font-family:var(--sans);font-size:.85em;color:var(--accent)}
.gender{font-size:.8em;color:var(--faint);font-style:normal}
.lit{color:var(--faint);font-size:.92em}
.letterbig{font-family:var(--deva);font-size:44px;line-height:1.15}
.ex{margin:15px 0;padding:11px 16px;border-left:3px solid var(--accent);background:var(--panel);border-radius:0 9px 9px 0}
.ex-dev{font-family:var(--deva);font-size:calc(var(--devsize)*1.42);line-height:1.6}
.ex-rp{margin-top:4px;font-size:15.5px}
.ex-en{margin-top:3px;color:var(--muted)}
.dlg{margin:18px 0}
.dlg .turn{margin:0 0 15px;padding-left:14px;border-left:2px solid var(--rule)}
.dlg .who{display:block;font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15.5px}
table.wtable th,table.gtable th,table.tracker th{font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.07em;text-align:left;color:var(--accent);border-bottom:2px solid var(--accent);padding:7px 10px 7px 0;font-weight:700}
table.wtable td,table.gtable td,table.tracker td{padding:7px 10px 7px 0;border-bottom:1px solid var(--rule2);vertical-align:top}
table.wtable tr:hover td{background:rgba(180,83,9,.045)}
table.gtable{border:1px solid var(--rule);border-radius:9px;overflow:hidden}
table.gtable td{padding-left:11px;border-right:1px solid var(--rule2)}
table.gtable td.hd{font-family:var(--sans);font-size:12.5px;color:var(--muted);background:var(--rule2);font-weight:600}
table td.dev{font-size:calc(var(--devsize)*1.1)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.box{border:1px solid var(--rule);border-left:4px solid var(--faint);padding:13px 16px 10px;margin:18px 0;border-radius:0 10px 10px 0;background:var(--panel)}
.box p{margin:0 0 7px}.box p:last-child{margin-bottom:0}
.box::before{display:block;font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.13em;margin-bottom:6px}
.box.note{border-left-color:var(--muted)}.box.note::before{content:"NOTE";color:var(--muted)}
.box.delhi{border-left-color:var(--accent);background:var(--accent-bg)}.box.delhi::before{content:"DELHI STREET NOTE";color:var(--accent)}
.box.mistake{border-left-color:var(--red);background:var(--red-bg)}.box.mistake::before{content:"WATCH OUT";color:var(--red)}
.box.culture{border-left-color:var(--green);background:var(--green-bg)}.box.culture::before{content:"CULTURE";color:var(--green)}
.box.partner{border-left-color:var(--blue);background:var(--blue-bg)}.box.partner::before{content:"WITH YOUR PARTNER";color:var(--blue)}
.box.mouth{border-left-color:var(--purple);background:var(--purple-bg)}.box.mouth::before{content:"IN YOUR MOUTH";color:var(--purple)}
.exercise{margin:24px 0;padding:16px 18px;border:1px solid var(--rule);border-radius:11px;background:var(--panel)}
.exercise h3{margin-top:0}
.exercise .instr{font-size:14px;color:var(--muted);font-style:italic;margin-bottom:10px}
ol.exq{margin:8px 0;padding-left:24px}ol.exq>li{margin-bottom:14px}
.writeline{display:block;width:100%;height:34px;margin-top:5px;border:none;border-bottom:1.5px solid var(--rule);background:transparent;color:var(--accent2);font-family:var(--serif);font-size:16px;padding:2px 4px}
.writeline:focus{outline:none;border-bottom-color:var(--accent);background:rgba(180,83,9,.05)}
.keyblock{margin:14px 0}
ol.key{margin:5px 0 14px;padding-left:24px;font-size:15.5px}ol.key>li{margin-bottom:5px}
body.hidekeys .keyblock ol.key{filter:blur(5px);opacity:.55;cursor:pointer;transition:.15s}
body.hidekeys .keyblock ol.key:hover,body.hidekeys .keyblock ol.key.reveal{filter:none;opacity:1}
table.writegrid{border-collapse:collapse;margin:14px 0;width:auto}
table.writegrid td{width:58px;height:64px;border:1px solid var(--rule);text-align:center;vertical-align:middle;font-family:var(--deva);font-size:29px}
table.writegrid td.trace{color:var(--faint);opacity:.55}
table.writegrid td.faint{color:var(--faint);opacity:.25}
.strokenote{font-size:14px;color:var(--muted);margin:4px 0 12px}
.checkbox{display:inline-block;width:15px;height:15px;border:1.5px solid var(--muted);border-radius:4px;margin-right:7px;vertical-align:-2px;cursor:pointer;position:relative}
.checkbox.done{background:var(--accent);border-color:var(--accent)}
.checkbox.done::after{content:"";position:absolute;left:4px;top:0;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
svg{max-width:100%;height:auto}
html[data-theme="dark"] .diagrow svg{filter:invert(.9) hue-rotate(180deg)}
.diagrow{margin:18px 0;overflow-x:auto}
.diagrow table{width:auto}
.diagrow td{padding-right:18px;vertical-align:top;border:none}
.diagcap{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:5px;max-width:240px}
.chapnav{display:flex;justify-content:space-between;gap:14px;margin:46px 0 0;padding-top:20px;border-top:1px solid var(--rule)}
.chapnav a{flex:1;padding:13px 16px;border:1px solid var(--rule);border-radius:10px;text-decoration:none;color:var(--ink);font-family:var(--sans);font-size:13.5px;background:var(--panel)}
.chapnav a:hover{border-color:var(--accent);color:var(--accent)}
.chapnav a.next{text-align:right}
.chapnav .lbl{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.chapnav a.empty{visibility:hidden}
.donebar{display:flex;align-items:center;gap:12px;margin:34px 0 0;padding:14px 16px;border:1px solid var(--rule);border-radius:11px;background:var(--panel)}
.donebar .t{flex:1;font-family:var(--sans);font-size:14px;color:var(--muted)}

/* ---------------- dashboard ---------------- */
.dash h1{font-family:var(--sans);font-size:27px;margin:0 0 4px}
.dash .lede{color:var(--muted);margin-bottom:24px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:13px;margin-bottom:22px}
.tile{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:15px 17px}
.tile .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.tile .v{font-family:var(--sans);font-size:31px;font-weight:700;line-height:1.05}
.tile .v small{font-size:15px;font-weight:500;color:var(--muted);margin-left:3px}
.tile .d{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:5px}
.tile.hero{background:linear-gradient(140deg,var(--accent-bg),var(--panel));border-color:var(--accent)}
.tile.hero .v{font-size:44px;color:var(--accent)}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:18px 20px;margin-bottom:18px}
.card h2{font-family:var(--sans);font-size:16px;color:var(--ink);margin:0 0 3px}
.card .sub{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-bottom:14px}

.ring{--p:0;width:78px;height:78px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--seq0) 0);
  display:grid;place-items:center;position:relative}
.ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel)}
.ring span{position:relative;z-index:1;font-family:var(--sans);font-weight:700;font-size:16px}
.goalrow{display:flex;align-items:center;gap:18px}
.goalrow .txt{flex:1}
.goalrow .txt b{font-family:var(--sans);font-size:17px}

/* heatmap */
.heat{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px}
.heatcol{display:flex;flex-direction:column;gap:3px}
.heatcell{width:13px;height:13px;border-radius:3px;background:var(--seq0);cursor:default}
.heatcell.l1{background:var(--seq1)}.heatcell.l2{background:var(--seq2)}
.heatcell.l3{background:var(--seq3)}.heatcell.l4{background:var(--seq4)}
.heatlegend{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11.5px;color:var(--muted);margin-top:10px}
.heatlegend .heatcell{width:11px;height:11px}

/* charts */
.chart{width:100%;font-family:var(--sans)}
.chart .grid line{stroke:var(--grid);stroke-width:1}
.chart .axis{stroke:var(--axis);stroke-width:1}
.chart text{fill:var(--muted);font-size:10.5px}
.chart .bar{fill:var(--seq4)}
.chart .bar:hover{fill:var(--seq5)}
.chart .goalline{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3;opacity:.75}
.chart .trend{fill:none;stroke:var(--seq4);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--seq4)}
.charttip{position:fixed;pointer-events:none;background:var(--ink);color:var(--bg);font-family:var(--sans);font-size:12px;
  padding:6px 9px;border-radius:7px;opacity:0;transition:opacity .1s;z-index:120;white-space:nowrap}
.charttip.show{opacity:1}

/* status bars (icon + word always present — never colour alone) */
.mixbar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--seq0);gap:2px}
.mixbar i{display:block;height:100%}
.mix-perfect{background:var(--good)}.mix-close{background:var(--warn)}.mix-wrong{background:var(--crit)}
.mixkey{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-family:var(--sans);font-size:13px}
.mixkey span{display:flex;align-items:center;gap:6px;color:var(--muted)}
.mixkey b{color:var(--ink)}
.swatch{width:11px;height:11px;border-radius:3px;flex:0 0 auto}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:11px}
.badge{border:1px solid var(--rule);border-radius:11px;padding:12px 13px;background:var(--bg);opacity:.42}
.badge.on{opacity:1;border-color:var(--accent);background:var(--accent-bg)}
.badge .bn{font-family:var(--sans);font-weight:650;font-size:13.5px}
.badge .bb{font-size:12px;color:var(--muted);line-height:1.4;margin-top:3px}
.badge .bd{font-family:var(--sans);font-size:10.5px;color:var(--accent);margin-top:5px}

.weaklist{font-family:var(--sans);font-size:13.5px}
.weaklist div{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule2);align-items:baseline}
.weaklist .p{font-family:var(--deva);font-size:17px;flex:0 0 auto}
.weaklist .e{color:var(--muted);flex:1}
.weaklist .m{color:var(--crit);font-size:12px}

/* ---------------- quiz ---------------- */
.quizwrap{max-width:640px;margin:0 auto}
.qsetup .opts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.chip{padding:8px 13px;border:1px solid var(--rule);border-radius:20px;background:var(--panel);color:var(--muted);font-family:var(--sans);font-size:13.5px;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.qbar{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.qprog{flex:1;height:6px;border-radius:3px;background:var(--seq0);overflow:hidden}
.qprog i{display:block;height:100%;background:var(--accent);transition:width .25s}
.qcard{background:var(--panel);border:1px solid var(--rule);border-radius:15px;padding:26px 24px;text-align:center}
.qmode{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.qprompt{font-size:34px;line-height:1.35;margin-bottom:6px}
.qprompt.dev{font-family:var(--deva);font-size:44px}
.qprompt.small{font-size:25px}
.qsub{color:var(--muted);font-size:15px;font-style:italic;margin-bottom:5px}
.qhint{font-family:var(--sans);font-size:12.5px;color:var(--faint);margin-bottom:18px}
.qinput{width:100%;padding:13px 15px;border:2px solid var(--rule);border-radius:11px;background:var(--bg);color:var(--ink);font-size:20px;font-family:var(--serif);text-align:center}
.qinput:focus{outline:none;border-color:var(--accent)}
.qinput.dev{font-family:var(--deva)}
.devpreview{min-height:34px;font-family:var(--deva);font-size:26px;color:var(--accent);margin-top:9px}
.devpreview:empty::before{content:"…start typing in roman letters";font-family:var(--sans);font-size:13px;color:var(--faint)}
.qactions{display:flex;gap:9px;margin-top:16px}
.qactions .btn{flex:1}
.verdict{margin-top:18px;border-radius:12px;padding:15px 17px;text-align:left;border:1px solid}
.verdict.perfect{background:var(--green-bg);border-color:var(--good)}
.verdict.close{background:var(--accent-bg);border-color:var(--warn)}
.verdict.wrong{background:var(--red-bg);border-color:var(--crit)}
.vhead{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:14.5px;margin-bottom:8px}
.vicon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;flex:0 0 auto}
.verdict.perfect .vicon{background:var(--good)}
.verdict.close .vicon{background:var(--warn);color:#3a2a05}
.verdict.wrong .vicon{background:var(--crit)}
.vnote{font-size:14.5px;color:var(--ink);margin-bottom:9px}
.vdiff{font-family:var(--sans);font-size:16px;background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:9px 12px;margin-bottom:9px;word-break:break-word}
.vdiff .del{background:rgba(208,59,59,.18);text-decoration:line-through;border-radius:2px}
.vdiff .add{background:rgba(12,163,12,.18);border-radius:2px}
.vdiff .dv{font-family:var(--deva);font-size:19px}
.vref{font-size:14px;color:var(--muted);border-top:1px solid var(--rule);padding-top:9px;margin-top:4px}
.vref .dv{font-family:var(--deva);font-size:20px;color:var(--ink)}
.vref .r{font-style:italic}
.vref .p{color:var(--accent);font-family:var(--sans);font-size:13px}
.vsmall{font-family:var(--sans);font-size:12px;color:var(--faint);margin-top:7px}
.qdone{text-align:center;padding:22px 0}
.qdone .big{font-family:var(--sans);font-size:52px;font-weight:700;color:var(--accent)}

/* ---------------- misc ---------------- */
.home .hero{text-align:center;padding:20px 0 10px}
.home .hero .dv{font-family:var(--deva);font-size:50px;color:var(--accent);line-height:1.25}
.home .hero h1{font-family:var(--sans);font-size:31px;margin:10px 0 6px;border:none;padding:0}
.home .hero p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:24px 0}
.bcard{display:block;padding:18px;border:1px solid var(--rule);border-radius:13px;text-decoration:none;color:var(--ink);background:var(--panel);transition:.13s}
.bcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.bcard .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.bcard .t{font-family:var(--sans);font-size:17px;font-weight:650;margin:5px 0}
.bcard .d{font-size:13.5px;color:var(--muted);line-height:1.5}
.bcard .pbar{height:5px;border-radius:3px;background:var(--seq0);margin-top:11px;overflow:hidden}
.bcard .pbar i{display:block;height:100%;background:var(--accent)}

#menubtn{display:none;position:fixed;left:12px;top:12px;z-index:60;width:42px;height:42px;border-radius:11px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);font-size:19px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.10)}
#scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:45}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--bg);font-family:var(--sans);font-size:14px;padding:11px 18px;border-radius:11px;z-index:150;opacity:0;transition:.24s}
.toast.show{transform:translateX(-50%);opacity:1}

@media(max-width:860px){
  #menubtn{display:block}
  #sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .22s;width:290px}
  body.navopen #sidebar{transform:none}
  body.navopen #scrim{display:block}
  #content{padding:64px 18px 110px}
  body{font-size:16.5px}
  h1.chapter{font-size:25px}
  .qprompt{font-size:28px}.qprompt.dev{font-size:36px}
  table{font-size:14.5px}
}
@media print{
  #sidebar,#menubtn,#scrim,.chapnav,.donebar{display:none!important}
  #app{display:block;height:auto;overflow:visible}
  #main{overflow:visible}#content{max-width:none;padding:0}
  body{font-size:11pt;background:#fff}
  .box,.ex,.exercise{break-inside:avoid}
}

/* ------------------------------------------------------------ my lessons */
.lstats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:0 0 16px}
.lcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:18px}
.lcard{display:block;background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.lcard:hover{border-color:var(--accent)}
.lk{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:700}
.lcard .lt{font-weight:650;margin:6px 0 4px;line-height:1.35}
.lcard .ld{font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.lcard .lc{font-family:var(--sans);font-size:12px;color:var(--faint);margin-top:10px}
.warn{color:var(--accent2);font-family:var(--sans);font-size:11.5px;font-weight:700}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#1f2937;color:#fbbf24;border-radius:10px;padding:12px 16px;margin:6px 0 12px;font-size:14px;overflow-x:auto}
.ltable{width:100%;border-collapse:collapse;font-size:14.5px}
.ltable th{font-family:var(--sans);text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:7px 10px;border-bottom:1px solid var(--rule)}
.ltable td{padding:8px 10px;border-bottom:1px solid var(--rule2);vertical-align:top}
.ltable tr:last-child td{border-bottom:none}
.ltable td.hi{font-weight:650;color:var(--accent2)}
.ltable td.dv{font-family:var(--deva)}
.ltable .mut,.ltable td.mut{color:var(--muted);font-size:12.5px}
.asklist{list-style:none;margin:0;padding:0}
.asklist li{padding:7px 0;border-bottom:1px dashed var(--rule);font-size:14.5px;line-height:1.5}
.asklist li:last-child{border-bottom:none}
.flagbox{border-color:var(--accent);background:var(--accent-bg)}
.lback{font-family:var(--sans);font-size:13px;margin-bottom:10px}