/* ================= Look: "gel and glow" =================
   Deep scan-room blue, coupling-gel blue for actions, beam amber only for what the beam shows
   (slice, focus, stars, live values). The ultrasound screen, 3D view and lesson figures stay dark
   in both themes, like a real monitor. Palettes and light/dark mirror RheoBase's settings. */
:root{
  --ts:1;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r-lg:18px;--r-md:12px;--r-sm:9px;
  /* dark "gel" (default) */
  --bg:#0b1626;--panel:#11213a;--panel2:#182c49;--panel3:#203759;--line:#22395a;--line-hi:#36557f;
  --fg:#e9f1fb;--fg-strong:#ffffff;--muted:#93a9c4;--faint:#6d84a1;
  --fluid:#4fb3ff;--ink:#04203a;--amber:#ffb547;--amber-dim:rgba(255,181,71,.16);
  --ok:#4fd39a;--warn:#ff9f5a;--bad:#ff6b6b;--well:#070e19;--screen:#000;
  --glow:rgba(79,179,255,.14);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef4fa;--panel:#ffffff;--panel2:#e6eef8;--panel3:#d8e5f3;--line:#cfdcec;--line-hi:#9db7d4;
  --fg:#0f2138;--fg-strong:#061325;--muted:#506680;--faint:#7d90a6;
  --fluid:#1572cc;--ink:#ffffff;--amber:#b06a00;--amber-dim:rgba(176,106,0,.12);
  --ok:#1d8656;--warn:#bd5d22;--bad:#c63b3b;--well:#0b1626;--glow:rgba(21,114,204,.10);
  color-scheme:light;
}
:root[data-palette="graphite"]{--bg:#121417;--panel:#1a1d21;--panel2:#22262b;--panel3:#2b3036;--line:#2e333a;--line-hi:#48505a;--fg:#ecedef;--muted:#a1a7ae;--faint:#6f767e;--fluid:#f0b648;--ink:#1f1600;--glow:rgba(240,182,72,.12);--well:#07090b}
:root[data-palette="graphite"][data-theme="light"]{--bg:#f4f5f7;--panel:#fff;--panel2:#eceef1;--panel3:#e0e3e8;--line:#d9dde2;--line-hi:#aab1ba;--fg:#16191d;--muted:#555d66;--faint:#868e97;--fluid:#8e5c00;--ink:#fff;--well:#121417}
:root[data-palette="teal"]{--bg:#0d1d20;--panel:#13272c;--panel2:#1a3238;--panel3:#223f46;--line:#24444c;--line-hi:#3a6670;--fg:#e4f1f2;--muted:#9cb7bc;--faint:#6a8589;--fluid:#ff7f6b;--ink:#2a0c06;--glow:rgba(255,127,107,.12);--well:#060c0e}
:root[data-palette="teal"][data-theme="light"]{--bg:#eff6f6;--panel:#fff;--panel2:#e2eeef;--panel3:#d3e5e7;--line:#cde0e2;--line-hi:#93b8bd;--fg:#11272b;--muted:#4b6a70;--faint:#7f9a9f;--fluid:#c0432f;--ink:#fff;--well:#0d1d20}
:root[data-palette="indigo"]{--bg:#13152b;--panel:#1a1d39;--panel2:#222647;--panel3:#2b3057;--line:#2f3460;--line-hi:#4a5190;--fg:#e9eaf9;--muted:#a3a8cb;--faint:#70759a;--fluid:#ff9f43;--ink:#2a1400;--glow:rgba(255,159,67,.12);--well:#080912}
:root[data-palette="indigo"][data-theme="light"]{--bg:#f3f4fb;--panel:#fff;--panel2:#e8eaf6;--panel3:#dcdff1;--line:#d6d9ee;--line-hi:#a4a9d6;--fg:#171a3a;--muted:#50557d;--faint:#8287ab;--fluid:#c25e0a;--ink:#fff;--well:#13152b}
:root[data-palette="plum"]{--bg:#18131f;--panel:#221a2c;--panel2:#2b2238;--panel3:#352a45;--line:#3a2f4d;--line-hi:#5a4a76;--fg:#efe9f7;--muted:#ac9fc2;--faint:#786c8e;--fluid:#e7b416;--ink:#1f1700;--glow:rgba(231,180,22,.12);--well:#0a080d}
:root[data-palette="plum"][data-theme="light"]{--bg:#f5f2fa;--panel:#fff;--panel2:#ece6f5;--panel3:#e1d8ef;--line:#ddd3ec;--line-hi:#ad9ccc;--fg:#21173a;--muted:#5e5179;--faint:#8f84a8;--fluid:#7f5d00;--ink:#fff;--well:#18131f}

/* ---------- base ---------- */
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--f-body);font-size:calc(15px * var(--ts));line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{gap:18px;padding-block:14px 32px}
h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance}
a{color:var(--fluid)}
button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--fluid);outline-offset:2px}
input[type=range]{accent-color:var(--fluid)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- app bar ---------- */
.appbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px 20px;padding:6px 0}
.brand{display:flex;align-items:center;gap:11px;color:var(--fg);text-decoration:none;min-width:0}
.logo{width:38px;height:38px;flex:none}
.lg-probe{fill:var(--fg)}.lg-mark{fill:#2fe0f0}.lg-beam{fill:var(--amber);opacity:.22}.lg-line{fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round}.lg-line2{fill:none;stroke:var(--fluid);stroke-width:2.2;stroke-linecap:round;opacity:.9}
.bt{display:flex;flex-direction:column;line-height:1.05}
.bt b{font:800 21px/1 var(--f-display);letter-spacing:-.015em}
.bt small{font-size:12.5px;color:var(--muted);margin-top:3px}
.tabs{justify-self:center;display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.tabs button{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);font:600 15px var(--f-display);padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.tabs button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-pressed="true"]{background:var(--fluid);color:var(--ink)}
.appctl{display:flex;align-items:center;gap:8px;justify-self:end}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.iconbtn:hover,.iconbtn[aria-pressed="true"]{color:var(--fg);border-color:var(--line-hi)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-sun{display:none}:root[data-theme="light"] .ic-sun{display:block}:root[data-theme="light"] .ic-moon{display:none}
@media (max-width:760px){
  .appbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b c" "t t";gap:10px}
  .brand{grid-area:b}.appctl{grid-area:c}.tabs{grid-area:t;justify-self:stretch}
  .tabs button{flex:1;justify-content:center;padding:8px 6px;font-size:14px}
  .bt small{display:none}.bt b{font-size:19px}.logo{width:32px;height:32px}
  .appctl .seg button{padding:7px 9px}
  .iconbtn{width:38px;height:38px}
}

/* ---------- shared controls ---------- */
.seg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.seg button,.seg.big button{font:600 14px var(--f-display);letter-spacing:0;text-transform:none;color:var(--muted);border-radius:9px;padding:6px 12px}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--panel3);color:var(--fg);box-shadow:inset 0 -2px 0 var(--fluid)}
.btn{font:600 14px var(--f-body);border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--fg);padding:8px 14px}
.btn:hover{border-color:var(--line-hi)}
.btn.primary{background:var(--fluid);color:var(--ink);border-color:transparent;font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
select{font:500 14px var(--f-body);border-radius:10px;background:var(--panel2);border-color:var(--line);color:var(--fg)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;gap:12px}
.card h2{font:700 17px/1.2 var(--f-display);letter-spacing:-.005em;text-transform:none;color:var(--fg)}
.hint{color:var(--muted);font-size:13px}
.kicker{font:600 14px var(--f-display);letter-spacing:0;text-transform:none;color:var(--fluid)}
.ctl label{font-size:14px}
.ctl output,.mk output{color:var(--amber)}
.presets{gap:8px}
.presets button{font:600 14.5px var(--f-display);border-radius:12px;background:var(--panel2);border-color:var(--line);padding:9px 12px}
.presets button small{font:400 12.5px var(--f-body);color:var(--muted);margin-top:1px}
.presets button:hover{border-color:var(--line-hi)}
.pad button{border-radius:9px;background:var(--panel2);border-color:var(--line)}
.pad button:hover{border-color:var(--line-hi)}.pad button:active{background:var(--panel3);color:var(--amber)}
.mk{background:var(--panel);border-color:var(--line);border-radius:12px}
.mk span{font:600 13px var(--f-display);letter-spacing:0;text-transform:none}
.mk button{border-radius:8px;background:var(--panel2);border-color:var(--line);color:var(--fg)}
.mk button:hover{border-color:var(--line-hi)}
.keys kbd{background:var(--panel2);border-color:var(--line)}
.chip{border-color:var(--line)}
.tlist li{border-color:var(--line)}
.armbar{border-top-color:var(--line)}
.armbar h3{font:700 15px var(--f-display);letter-spacing:0;text-transform:none;opacity:1}
.readout{color:var(--muted)}

/* ---------- simulator ---------- */
.monitor{background:var(--screen);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px;box-shadow:0 0 0 4px var(--glow)}
.bodywrap{border-radius:14px;background:#0d1520}
.coach{font-size:calc(14.5px * var(--ts));background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-md);padding:12px 16px}
.viewrow{font-size:14px}
.info{border-radius:var(--r-lg)}
.info .nm{font:700 20px var(--f-display);letter-spacing:-.01em}
.info p{font-size:calc(15px * var(--ts))}
.info .echo{font:700 12.5px var(--f-body);letter-spacing:0;text-transform:none;color:var(--amber);background:var(--amber-dim);padding:2px 10px;border-radius:999px}
.tour{border-color:var(--amber)}
.tour h3{font:700 21px var(--f-display);letter-spacing:-.01em}
.tstep{font:600 14px var(--f-display);letter-spacing:0;text-transform:none}
.challenge{border-color:var(--amber)}
.result{background:var(--panel2);border-radius:var(--r-md)}
.sitefoot{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-wrap:wrap;gap:4px 12px}
.sitefoot span:first-child{color:var(--fg)}
/* phone dock and probe panel */
.dock{background:var(--panel);border-color:var(--line);border-radius:14px}
.dock button{font:600 14px var(--f-display);letter-spacing:0;text-transform:none;border-radius:10px}
.dock button[aria-pressed="true"]{background:var(--fluid);color:var(--ink)}
.dial{border-color:var(--line-hi)!important;background:radial-gradient(circle at 50% 50%,var(--panel2) 0 48%,transparent 49%),repeating-conic-gradient(from 0deg,var(--line-hi) 0 2deg,transparent 2deg 15deg),radial-gradient(circle,var(--panel) 0 70%,var(--panel3) 71% 100%)!important}
.dialh,.tl{font:600 11px var(--f-display)!important;letter-spacing:0!important;text-transform:none!important}
.tiltpad{border-color:var(--line-hi)!important;background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat,var(--panel2)!important}

/* ---------- Foundations ---------- */
.lhero{border-radius:22px;border-color:var(--line);background:radial-gradient(90% 140% at 100% 0%,var(--glow),transparent 60%),var(--panel)}
.lhero h2,.lmain h2{font-weight:800;letter-spacing:-.02em;color:var(--fg)}
.lede{font-size:calc(16.5px * var(--ts))}
.lpath a{border-radius:16px;background:var(--panel);border-color:var(--line)}
.lpath a:hover{border-color:var(--line-hi)}
.lpath .num{font:800 24px var(--f-display);color:var(--faint)}
.lpath .lt b{font:700 17px var(--f-display);letter-spacing:-.01em}
.lpath .lt small{font-size:13.5px}
.lmain,.lside .card{border-radius:var(--r-lg)}
.lbody{font-size:calc(16px * var(--ts));line-height:1.65}
.lbody b{color:var(--fg-strong)}
.lbody h4{font:700 16px var(--f-display);letter-spacing:0;text-transform:none;color:var(--fg)}
.lside h3,.quiz h3{font:700 17px var(--f-display);letter-spacing:0;text-transform:none;color:var(--fg)}
.qq{font-size:calc(15px * var(--ts))}
.opt{font:400 calc(14.5px * var(--ts)) var(--f-body);border-radius:10px;background:var(--panel2);border-color:var(--line);color:var(--fg)}
.opt:hover:not(:disabled){border-color:var(--line-hi)}
.why{font-size:calc(14px * var(--ts))}
.fig{background:var(--well);border-color:var(--line);border-radius:var(--r-md);color:#e9f1fb}
.fig .btn,.fig .seg{color:#e9f1fb}
.figinfo{font-size:calc(14.5px * var(--ts));color:#dfe8f3}.fig .hint{color:#93a9c4}
.ring{background:conic-gradient(var(--amber) calc(var(--p)*360deg),var(--panel3) 0)}
.crumbs a{color:var(--fluid)}
:root[data-theme="light"] .fig .btn{background:#182c49;border-color:#22395a}
:root[data-theme="light"] .fig .seg{background:#11213a;border-color:#22395a}
:root[data-theme="light"] .fig .seg button{color:#93a9c4}:root[data-theme="light"] .fig .seg button[aria-pressed="true"]{background:#203759;color:#e9f1fb}
:root[data-theme="light"] .tile figcaption{color:#e9f1fb}:root[data-theme="light"] .game .ghead{color:#e9f1fb}
:root[data-theme="light"] .fig .ctl label{color:#e9f1fb}

/* ---------- Home ---------- */
.home{display:flex;flex-direction:column;gap:22px}
.hhero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;padding:30px 30px 30px 34px;border-radius:26px;border:1px solid var(--line);
  background:radial-gradient(70% 90% at 92% 10%,var(--glow),transparent 70%),var(--panel)}
.hhero h1{font:800 clamp(34px,4.6vw,58px)/1.02 var(--f-display);letter-spacing:-.03em;margin:0 0 14px;max-width:13ch}
.hhero .sub{font-size:calc(17.5px * var(--ts));line-height:1.55;color:var(--muted);margin:0 0 22px;max-width:44ch}
.hcta{display:flex;flex-wrap:wrap;gap:10px}
.hcta .btn{font:700 16px var(--f-display);padding:12px 20px;border-radius:14px}
.hfine{margin:16px 0 0;font-size:13px;color:var(--faint)}
.scanwin{position:relative;border-radius:20px;background:#000;border:1px solid var(--line);box-shadow:0 0 0 6px var(--glow),0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden;aspect-ratio:4/3.1}
.scanwin canvas{width:100%;height:100%;display:block}
.scancap{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-top:10px;font-size:13.5px;color:var(--muted)}
.scancap b{color:var(--amber);font:500 13px var(--f-mono)}
.hcont{display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:20px;border:1px solid var(--line);background:var(--panel)}
.hcont .ring{flex:none;width:64px;height:64px}.hcont .ring::before{inset:7px}.hcont .ring span{font-size:18px}
.hcont p{margin:0;color:var(--muted)}.hcont b{display:block;font:700 18px var(--f-display);color:var(--fg)}
.hcont .btn{margin-left:auto}
.doors{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.door{grid-column:span 4;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:22px;border:1px solid var(--line);background:var(--panel);color:var(--fg);text-decoration:none;position:relative;overflow:hidden;cursor:pointer;text-align:left;font:inherit;transition:border-color .15s,transform .15s}
.door:hover{border-color:var(--line-hi);transform:translateY(-2px)}
.door.wide{grid-column:span 8}
.door h3{font:800 24px/1.1 var(--f-display);letter-spacing:-.02em;margin:0}
.door p{margin:0;color:var(--muted);max-width:46ch}
.door .go{margin-top:auto;font:700 15px var(--f-display);color:var(--fluid)}
.door .art{height:92px;display:flex;align-items:end;gap:6px}
.dots{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dots i{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-hi);display:grid;place-items:center;font:700 11px var(--f-display);font-style:normal;color:var(--faint)}
.dots i.on{background:var(--amber);border-color:var(--amber);color:#1c1200}
.dots i+i{position:relative}
.door .views{display:flex;flex-wrap:wrap;gap:6px}
.door .views span{font-size:13px;padding:3px 10px;border-radius:999px;background:var(--panel2);color:var(--fg)}
.door svg.big{width:76px;height:76px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.joints{display:flex;flex-direction:column;gap:12px}
.joints h2{font:800 24px var(--f-display);letter-spacing:-.02em;margin:0}
.jrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.joint{padding:14px;border-radius:16px;border:1px dashed var(--line-hi);color:var(--faint);display:flex;flex-direction:column;gap:2px}
.joint b{font:700 16px var(--f-display);color:var(--muted)}
.joint.open{border:1px solid var(--fluid);background:color-mix(in srgb,var(--fluid) 10%,var(--panel));color:var(--fg)}
.joint.open b{color:var(--fg)}
@media (max-width:900px){.hhero{grid-template-columns:minmax(0,1fr);padding:22px}.door,.door.wide{grid-column:span 12}.jrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.hhero{padding:18px;border-radius:20px}.hcont{flex-wrap:wrap}.hcont .btn{margin-left:0}.jrow{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Settings ---------- */
.settings{max-width:860px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.settings>h2{font:800 32px var(--f-display);letter-spacing:-.02em;margin:4px 0 0}
.settings>.hint{margin-top:-8px}
.setcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 20px}
.setcard h3{font:700 18px var(--f-display);margin:14px 0 4px}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;padding:14px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.setcard h3+.setrow{border-top:0}
.setrow>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 240px}
.setrow b{font-weight:700}.setrow .muted{color:var(--muted);font-size:13.5px}
.setrow.col{flex-direction:column;align-items:stretch}
.palgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.palbtn{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);cursor:pointer;text-align:left;font:600 14px var(--f-display)}
.palbtn[aria-pressed="true"]{border-color:var(--fluid);box-shadow:0 0 0 2px var(--fluid)}
.palsw{display:flex;gap:6px}.palsw i{flex:1;height:34px;border-radius:9px;display:flex;align-items:end;padding:5px;border:1px solid rgba(127,127,127,.25)}.palsw b{height:6px;width:60%;border-radius:3px}
.palbtn small{font:400 12px var(--f-body);color:var(--muted);margin-left:6px}
.setsample{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--panel2);font-size:calc(15px * var(--ts))}
.dangerline{border:1px solid var(--bad);color:var(--bad);background:transparent;border-radius:10px;padding:8px 14px;font:700 14px var(--f-body);cursor:pointer}
.danger{border:1px solid var(--bad);background:var(--bad);color:#fff;border-radius:10px;padding:8px 14px;font:700 14px var(--f-body);cursor:pointer}
:root.nocoach .coach{display:none}
.setrow.col>div{flex:none}
.lmain h2{font:800 clamp(26px,3vw,34px)/1.1 var(--f-display);letter-spacing:-.02em;color:var(--fg)}
.door .art{height:auto;min-height:40px}
@media (max-width:760px){:root[data-view="sim"] .bt{display:none}.hhero .sub{font-size:calc(16px * var(--ts))}.hhero>div:last-child{order:-1}.hhero{gap:18px}.scancap{font-size:12.5px}}