:root{
  --ground:#fbfaf8; --panel:#fff; --sunk:#f3f2ee;
  --ink:#1c1e1b; --soft:#6b6f68; --faint:#8e928b;
  --line:#e0e0da; --firm:#c7c8c1;
  --room:#405532; --room-soft:#eaefdf; --room-ink:#2c3c22; --on-room:#fff;
  --ok:#3d6b45; --warn:#8a5a1d; --stop:#8d3a32;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:16px;
}
:root[data-room="read"]  {--room:#405532;--room-soft:#eaefdf;--room-ink:#2c3c22}
:root[data-room="decide"]{--room:#963e36;--room-soft:#fbe6e0;--room-ink:#6e2a24}
:root[data-room="map"]   {--room:#155e83;--room-soft:#dfecf3;--room-ink:#0e4460}
:root[data-room="carry"] {--room:#254ad3;--room-soft:#e2e6fb;--room-ink:#1a3596}
:root[data-room="notes"] {--room:#4a4458;--room-soft:#eeeaf3;--room-ink:#372f45}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#141614; --panel:#1d201e; --sunk:#191c1a;
    --ink:#e7e9e5; --soft:#9ba097; --faint:#7d827a;
    --line:#2e322f; --firm:#474c48; --on-room:#14170f;
    --ok:#8fbd97; --warn:#d8a75f; --stop:#e09189;
  }
  :root:not([data-theme="light"])[data-room="read"]  {--room:#a8c188;--room-soft:#2a3323;--room-ink:#cfdcb9}
  :root:not([data-theme="light"])[data-room="decide"]{--room:#f0a696;--room-soft:#3a2622;--room-ink:#f7cbc0}
  :root:not([data-theme="light"])[data-room="map"]   {--room:#82ceee;--room-soft:#17303d;--room-ink:#b9e3f6}
  :root:not([data-theme="light"])[data-room="carry"] {--room:#aebcff;--room-soft:#20264a;--room-ink:#ccd5ff}
  :root:not([data-theme="light"])[data-room="notes"] {--room:#c6b7dd;--room-soft:#2b2637;--room-ink:#ddd3ec}
}
:root[data-theme="dark"]{
  --ground:#141614; --panel:#1d201e; --sunk:#191c1a;
  --ink:#e7e9e5; --soft:#9ba097; --faint:#7d827a;
  --line:#2e322f; --firm:#474c48; --on-room:#14170f;
  --ok:#8fbd97; --warn:#d8a75f; --stop:#e09189;
}
:root[data-theme="dark"][data-room="read"]  {--room:#a8c188;--room-soft:#2a3323;--room-ink:#cfdcb9}
:root[data-theme="dark"][data-room="decide"]{--room:#f0a696;--room-soft:#3a2622;--room-ink:#f7cbc0}
:root[data-theme="dark"][data-room="map"]   {--room:#82ceee;--room-soft:#17303d;--room-ink:#b9e3f6}
:root[data-theme="dark"][data-room="carry"] {--room:#aebcff;--room-soft:#20264a;--room-ink:#ccd5ff}
:root[data-theme="dark"][data-room="notes"] {--room:#c6b7dd;--room-soft:#2b2637;--room-ink:#ddd3ec}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.55 var(--sans);
  padding-bottom:calc(66px + env(safe-area-inset-bottom,0px));overscroll-behavior-y:contain;
  -webkit-text-size-adjust:100%}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.012em}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%}
code,pre,.lean{font-family:var(--mono);font-variant-ligatures:none}

.top{position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top,0px)) var(--pad) 10px;display:flex;gap:12px;align-items:center}
.where{min-width:0;flex:1}
.eyebrow{font:500 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--room)}
.top h1{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{background:var(--sunk);border:1px solid var(--line);border-radius:9px;width:38px;height:38px;
  display:grid;place-items:center;flex:0 0 auto;font-size:15px}
.icon-btn:active{background:var(--room-soft)}

.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--panel);
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.nav button{background:none;border:0;padding:9px 2px 10px;display:grid;gap:3px;justify-items:center;
  color:var(--faint);font-size:10.5px;font-weight:500}
.nav .glyph{font-size:17px;line-height:1.1}
.nav button[aria-current="true"]{color:var(--room)}
.nav button:focus-visible,.icon-btn:focus-visible,.act:focus-visible,.term:focus-visible,
.node:focus-visible,.choice:focus-visible,.sw:focus-visible{outline:2px solid var(--room);outline-offset:2px}

.view{padding:var(--pad) var(--pad) 28px;max-width:720px;margin:0 auto}
.lede{color:var(--soft);font-size:13.5px;margin:6px 0 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px}
.stack{display:grid;gap:13px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.act{border:1px solid var(--firm);background:var(--panel);border-radius:9px;padding:10px 13px;
  font-size:14px;font-weight:500;flex:1 1 auto;min-width:0}
.act.primary{background:var(--room);border-color:var(--room);color:var(--on-room)}
.act:active{transform:translateY(1px)}
.stub::after{content:"◌";margin-left:7px;opacity:.55;font-size:11px;vertical-align:1px}
.meta{font:500 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.sep{height:1px;background:var(--line);margin:3px 0}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;
  font:500 11px/1.5 var(--mono);background:var(--sunk);color:var(--soft);border:1px solid var(--line)}
.pill.ok{color:var(--ok);border-color:currentColor;background:transparent}
.pill.warn{color:var(--warn);border-color:currentColor;background:transparent}

.prose{font-family:var(--serif);font-size:18.5px;line-height:1.62}
.prose p{margin:0 0 13px}
.prose p:last-child{margin-bottom:0}
.term{background:var(--room-soft);border:0;border-bottom:1.5px solid var(--room);border-radius:3px;
  padding:0 2px;font-family:inherit;font-size:inherit;color:inherit}
.term[aria-pressed="true"]{background:var(--room);color:var(--on-room);border-radius:4px}
pre.lean{background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:13px;
  margin:0;font-size:12.5px;line-height:1.62;overflow-x:auto;white-space:pre;
  -webkit-overflow-scrolling:touch}
pre.lean .term{font-size:inherit;background:transparent;border-radius:0}
.srcline{font:400 11px/1.5 var(--mono);color:var(--faint);margin-top:7px;word-break:break-word}

.scrim{position:fixed;inset:0;z-index:50;background:rgba(10,12,10,.42);display:grid;align-items:end;
  animation:fade .16s ease}
.sheet{background:var(--panel);border-radius:16px 16px 0 0;border-top:1px solid var(--firm);
  max-height:86vh;overflow-y:auto;padding:8px var(--pad) calc(20px + env(safe-area-inset-bottom,0px));
  animation:rise .2s cubic-bezier(.2,.8,.3,1)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(14px)}}
.grab{width:38px;height:4px;background:var(--firm);border-radius:2px;margin:6px auto 12px}
.sheet h2{font-size:19px;margin-bottom:3px}
.qual{font:500 13px/1.5 var(--mono);color:var(--room);word-break:break-all;margin:0 0 10px}
.prov{display:grid;gap:7px;margin:12px 0}
.prov>div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:6px 10px;align-items:baseline}
.prov dt{font:500 9.5px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.prov dd{margin:0;font-size:13.5px;word-break:break-word}
.gloss{font-family:var(--serif);font-size:16.5px;line-height:1.6;margin:10px 0}
.disclaim{font-size:12px;color:var(--faint);line-height:1.5;margin-top:8px}

.toast{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  z-index:60;background:var(--ink);color:var(--ground);padding:11px 15px;border-radius:10px;
  font-size:13.5px;line-height:1.45;max-width:min(430px,calc(100vw - 28px));box-shadow:0 5px 22px rgba(0,0,0,.24)}

.q{font-family:var(--serif);font-size:23px;line-height:1.35;margin:0 0 4px}
.choice{display:block;width:100%;text-align:left;background:var(--panel);border:1.5px solid var(--firm);
  border-radius:13px;padding:14px 15px;font-size:15px;line-height:1.45;margin-bottom:9px}
.choice[data-state="right"]{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--panel))}
.choice[data-state="wrong"]{border-color:var(--stop);background:color-mix(in srgb,var(--stop) 10%,var(--panel))}
.choice small{display:block;margin-top:7px;color:var(--soft);font-size:12.5px}
.progress{display:flex;gap:4px;margin-bottom:14px}
.progress i{height:3px;flex:1;border-radius:2px;background:var(--line)}
.progress i.on{background:var(--room)}

.dag{display:grid;margin-top:12px}
.lvl{display:flex;gap:7px;flex-wrap:wrap;padding:7px 0;align-items:center}
.node{border:1.5px solid var(--firm);background:var(--panel);border-radius:8px;padding:7px 10px;
  font:500 12px/1.3 var(--mono);display:flex;align-items:center;gap:6px}
.node[aria-pressed="true"]{border-color:var(--room);background:var(--room-soft);color:var(--room-ink)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.dot.empty{background:var(--firm)}
.up{font:500 9.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:13px 0;
  border-bottom:1px solid var(--line);align-items:center}
.item:last-child{border-bottom:0}
.item .name{font-weight:500;font-size:14.5px}
.item .sub{grid-column:1;font:400 11.5px/1.5 var(--mono);color:var(--faint)}
.sw{width:46px;height:27px;border-radius:999px;background:var(--firm);border:0;position:relative;
  grid-row:1/3;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:transform .15s}
.sw[aria-checked="true"]{background:var(--room)}
.sw[aria-checked="true"]::after{transform:translateX(19px)}
.budget{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--soft)}
.bar{height:7px;border-radius:4px;background:var(--sunk);overflow:hidden;border:1px solid var(--line);margin-top:7px}
.bar i{display:block;height:100%;background:var(--room);transition:width .2s}

.note-item{border:1px solid var(--line);border-radius:11px;padding:12px;background:var(--panel);display:grid;gap:8px}
.note-item img{width:100%;border-radius:8px;border:1px solid var(--line);display:block}
textarea{width:100%;font:inherit;font-size:16px;padding:11px;border-radius:10px;border:1px solid var(--firm);
  background:var(--panel);color:var(--ink);resize:vertical;min-height:84px}
.file-btn{display:block;border:1.5px dashed var(--firm);border-radius:11px;padding:16px;text-align:center;
  color:var(--soft);font-size:14px;background:var(--sunk);margin-top:10px}
.net{display:inline-flex;align-items:center;gap:6px;font:500 11px/1.5 var(--mono);color:var(--soft)}
.net i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.net.off i{background:var(--warn)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}