/* Look: day (porcelain, champagne accent) and night (navy-black, cyan→violet gradient), switched by html[data-mode].
   The model fills the screen; rail, list and reading panel float over it as glass cards with a gradient hairline edge. */
html[data-mode=day]{color-scheme:light;
  --bg:#e3e4ea;--panel:#ececf2;--ink:#20222e;--muted:#5b5e70;--faint:#8d90a2;--surf:rgba(238,239,246,.72);--surf2:rgba(255,255,255,.4);--edge1:rgba(255,255,255,.7);--edge2:rgba(255,255,255,.12);--hair:rgba(30,32,50,.1);
  --acc:#5b55d6;--acc2:#8f86f0;--grad:linear-gradient(135deg,#5b55d6,#8f86f0);--accent:#4f48c9;--accent-soft:rgba(91,85,214,.12);--accent-ink:#ffffff;
  --press:#3f3aa8;--press-ink:#ffffff;--sh:0 1px 2px rgba(20,24,30,.05),0 18px 44px rgba(40,50,70,.12);--glow:none;--sheet:rgba(234,235,242,.95);
  --aura1:rgba(246,246,252,.7);--aura2:rgba(180,180,230,.35);--aura3:rgba(220,200,225,.3)}
html[data-mode=night]{color-scheme:dark;
  --bg:#09091a;--panel:#10102a;--ink:#eef1f7;--muted:#97a0b2;--faint:#5c6579;--surf:rgba(20,20,44,.58);--surf2:rgba(255,255,255,.035);--edge1:rgba(255,255,255,.2);--edge2:rgba(255,255,255,.03);--hair:rgba(255,255,255,.07);
  --acc:#a78bfa;--acc2:#f472b6;--grad:linear-gradient(135deg,#8b5cf6,#ec4899);--accent:#c4b5fd;--accent-soft:rgba(167,139,250,.14);--accent-ink:#ffffff;
  --press:linear-gradient(135deg,#7c3aed,#db2777);--press-ink:#ffffff;--sh:0 20px 50px rgba(0,0,0,.5);--glow:0 0 24px rgba(167,139,250,.35);--sheet:rgba(14,14,32,.95);
  --aura1:rgba(90,60,220,.18);--aura2:rgba(219,39,119,.1);--aura3:rgba(139,92,246,.08)}
:root{--rail:transparent;--panel2:var(--surf2);--raise:var(--surf2);--line:var(--hair);--line2:var(--hair);--glass:var(--surf);--hover:color-mix(in srgb,var(--ink) 5%,transparent);
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;--L:0px;--R:0px}
body{background:var(--bg);transition:background .5s}
/* film grain, so the soft gradients do not band */
body::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stage{background:radial-gradient(ellipse 34% 42% at 52% 46%,var(--aura1),transparent 70%),radial-gradient(ellipse 30% 40% at 66% 62%,var(--aura2),transparent 70%),radial-gradient(ellipse 30% 36% at 40% 34%,var(--aura3),transparent 70%),var(--bg);transition:background .5s}
html[data-mode=night] #gl canvas{filter:drop-shadow(0 0 30px rgba(90,110,255,.18))}

/* desktop: floating cards */
@media (min-width:901px) and (min-height:521px){
  :root{--L:406px;--R:424px}
  .app{grid-template-columns:86px 284px minmax(0,1fr) 400px;column-gap:12px;padding:12px}
  .stage{position:fixed;inset:0;z-index:0}
  .rail{grid-column:1;grid-row:1} .side{grid-column:2;grid-row:1} .info{grid-column:4;grid-row:1}
  .rail,.side,.info{position:relative;z-index:1}
  .tb.tl{left:calc(var(--L) + 6px);top:24px} .tb.tr{right:calc(var(--R) + 6px);top:24px}
  .tb.bc,.note{left:calc(var(--L) + (100% - var(--L) - var(--R)) / 2)} .tb.bc{bottom:24px}
  .info-close{top:26px;right:26px}
}
@media (max-width:1440px) and (min-width:901px) and (min-height:521px){:root{--L:374px;--R:384px} .app{grid-template-columns:82px 256px minmax(0,1fr) 360px}}
@media (max-width:1180px) and (min-width:901px) and (min-height:521px){:root{--L:340px;--R:344px} .app{grid-template-columns:76px 232px minmax(0,1fr) 320px}}
.rail,.side,.info{border:1px solid transparent!important;border-radius:22px!important;
  background:linear-gradient(var(--surf),var(--surf)) padding-box,linear-gradient(170deg,var(--edge1),var(--edge2) 45%,var(--edge2) 70%,color-mix(in srgb,var(--edge1) 40%,transparent)) border-box!important;
  backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);box-shadow:var(--sh)!important}
.pill{border:1px solid transparent;border-radius:14px;background:linear-gradient(var(--surf),var(--surf)) padding-box,linear-gradient(170deg,var(--edge1),var(--edge2)) border-box;box-shadow:var(--sh)}
.pill button{border-radius:10px;color:var(--ink)}
.pill button svg.i{color:var(--muted)}
.pill button[aria-pressed="true"]{background:var(--press);color:var(--press-ink);box-shadow:var(--glow)}
.pill button[aria-pressed="true"] svg.i{color:var(--press-ink)}
#themeBtn svg.i{color:var(--accent)}
.pill select{background-color:var(--surf2);border-color:var(--hair);border-radius:10px;color:var(--ink)}
.pill label{color:var(--muted)}
.pill .sep{background:var(--hair)}
.menu{background:var(--panel);border-color:var(--hair)}
/* type */
.side-head .app-name{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--faint)}
.side-head h1{font-size:26px;font-weight:800;letter-spacing:-.025em}
.info h2{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-top:-6px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-mode=day] .eyebrow{background:none;color:#4f48c9}
.latin{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.02em}
.sec{border-radius:16px;background:var(--surf2);border-color:var(--hair);padding:16px 18px}
.sec h4{font-size:12px;font-weight:700;letter-spacing:0;color:var(--muted)}
.sec p,.info ol,.chip b,.layers p{color:var(--ink)}
.info ol li::marker{color:var(--accent)}
.tree h3{font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--faint);border-top:0!important;padding-top:0;margin-top:18px}
/* rail */
.logo{border-radius:14px;background:var(--grad);color:#fff;box-shadow:var(--glow)}
.rail [role=tab]{border-radius:14px;color:var(--muted);border:1px solid transparent;transition:background .2s,color .2s,transform .2s}
.rail [role=tab]:hover{transform:translateY(-1px)}
.rail [role=tab][aria-selected="true"]{color:var(--ink);background:linear-gradient(var(--surf2),var(--surf2)) padding-box,var(--grad) border-box;box-shadow:var(--glow)}
.rail [role=tab][aria-selected="true"] svg.i{color:var(--accent)}
.rail [role=tab][aria-selected="true"]::before{display:none}
/* list */
.search input{border-radius:14px;background:var(--surf2);border-color:var(--hair);color:var(--ink)}
.item{color:var(--ink);border-radius:10px;transition:background .15s,transform .15s}
.item:hover{transform:translateX(2px)}
.tree details[data-lobe]{margin:6px 0;border:1px solid var(--hair);border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 12%,transparent),transparent 55%);overflow:hidden}
.tree details[data-lobe]>summary{border-radius:0;padding:11px 14px}
.tree details[data-lobe][open]{padding-bottom:6px}
.tree details[data-lobe] .item{padding-left:36px}
.tree .dot{width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--c,#888) 22%,transparent)}
.tree .cnt{margin-left:6px;font:600 10.5px var(--mono);color:var(--muted);background:var(--surf2);border:1px solid var(--hair);padding:0 7px;border-radius:9px}
.item.sel,.tree summary.sel{color:var(--ink);background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 18%,transparent),color-mix(in srgb,var(--acc2) 8%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
.item small,.item .num{color:var(--faint)}
/* buttons, chips, labels on the model */
.btn{border-radius:12px;background:var(--surf2);border-color:var(--hair);color:var(--ink);transition:transform .15s,border-color .15s,background .15s}
.btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--acc) 50%,transparent);background:var(--surf2)}
.btn.primary,.btn.primary:hover{background:var(--press);color:var(--press-ink);border-color:transparent}
.chip{border-radius:999px;background:var(--surf2);border-color:var(--hair);color:var(--muted)}
.callout{background:var(--press);color:var(--press-ink);border-radius:999px;padding:5px 14px;box-shadow:var(--sh),var(--glow)}
#lead line{stroke:var(--acc)} #lead circle{fill:var(--acc);stroke:var(--bg)}
.note{background:var(--surf);border-color:var(--hair);color:var(--muted)}
.tip{background:var(--panel);color:var(--ink);border-color:var(--hair)}
.info-close{border-radius:12px;background:var(--surf2);border-color:var(--hair)}
.opt,.qtext{background:var(--surf2);border-color:var(--hair);color:var(--ink)}
.qacts{background:linear-gradient(transparent,var(--sheet) 14px)}
html[data-mode=day] .column .band.b0{fill:#e2e6ec} html[data-mode=day] .column .band.b1{fill:#edf0f3} html[data-mode=day] .column .band.b4{fill:#dedbe8}
html[data-mode=day] .balabel{box-shadow:0 2px 8px rgba(0,0,0,.15)}
/* phone: floating dock, sheets nearly opaque so text over the model stays readable */
@media (max-width:900px) and (min-height:521px){
  :root{--nav:calc(78px + env(safe-area-inset-bottom))}
  .rail{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:60px;padding:0 4px;border-radius:22px!important}
  .rail [role=tab]{font-size:clamp(7.5px,2vw,10px)}
  .rail [role=tab][aria-selected="true"]{box-shadow:none}
  .side,.info{left:8px;right:8px;background:linear-gradient(var(--sheet),var(--sheet)) padding-box,linear-gradient(170deg,var(--edge1),var(--edge2)) border-box!important}
  .info{bottom:calc(var(--nav) + 4px)}
}
/* short screens (laptop preview frames, phones held sideways): rail | model | reading panel, list as a drawer */
@media (max-height:520px){
  .app{grid-template-columns:78px minmax(0,1fr) minmax(280px,34vw);padding:8px;column-gap:8px}
  .rail [role=tab]{width:70px;font-size:8.5px;letter-spacing:-.2px}
  .side{left:94px;top:8px;bottom:8px;transform:translateX(calc(-100% - 120px))}
  body[data-sheet=list] .side{transform:none}
}

/* one dock with every tool, under the model */
.dock{position:absolute;z-index:3;bottom:22px;left:calc(var(--L) + (100% - var(--L) - var(--R)) / 2);transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:6px;border-radius:20px;
  background:linear-gradient(var(--surf),var(--surf)) padding-box,linear-gradient(170deg,var(--edge1),var(--edge2)) border-box;border:1px solid transparent;box-shadow:var(--sh);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
.dock .pill{background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none}
.dock .pill+.pill{border-left:1px solid var(--hair);padding-left:6px;border-radius:0}
.dock .lbl,.dock .mlbl{display:none}
.dock .pill button{padding:8px 9px}
.dock .menu{top:auto;bottom:calc(100% + 12px)}
.dock input[type=range]{width:90px}
.tb.bc{bottom:88px!important}
/* reading panel: sections as one row of underlined tabs */
.utabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;border-bottom:1px solid var(--hair);position:sticky;top:-24px;z-index:1;background:var(--panel);margin:0 -4px;padding:0 4px}
.utabs::-webkit-scrollbar{display:none}
.utabs button{flex:none;white-space:nowrap;border:0;background:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:10px 10px 11px;position:relative;cursor:pointer}
.utabs button:hover{color:var(--ink)}
.utabs button[aria-selected="true"]{color:var(--ink)}
.utabs button[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--grad)}
.sec.off{display:none}
.utabs~.sec>h4{display:none}
.utabs~.sec{background:none;border:0;padding:4px 2px}
.utabs~.sec p,.info ol{font-size:15px;line-height:1.75}
.info h2{font-size:30px}
@media (max-width:900px) and (min-height:521px){
  .dock{top:calc(10px + env(safe-area-inset-top));bottom:auto;left:10px;right:10px;transform:none;flex-wrap:wrap;justify-content:center;border-radius:18px}
  .dock .menu{top:calc(100% + 8px);bottom:auto}
  .dock input[type=range]{width:80px}
  .dock .pill select{max-width:130px}
  .tb.bc{bottom:28px!important}
  body[data-sheet=quiz] .dock{display:none}
  .utabs{top:-4px}
  .info h2{font-size:22px}
}
@media (max-height:520px){.dock{bottom:8px;padding:4px}.dock .pill button{padding:6px 7px}.tb.bc{bottom:62px!important}}
@media (max-width:900px) and (min-height:521px){
  .dock{gap:3px;padding:4px}
  .dock .pill+.pill{padding-left:3px}
  .dock .pill button{padding:7px}
  .dock .pill select{max-width:108px;padding-right:24px}
  .dock input[type=range]{width:62px}
}