/* Echilibrul din ureche — deep-lab identity, semantic theme tokens. */
:root{
  color-scheme:light dark;
  --bg:#edf1f8;
  --bg-raise:#f8fafd;
  --bg-sunken:#dfe7f3;
  --ink:#152238;
  --muted:#4c5b74;
  --line:#c3cede;
  --teal:#0d7a78;
  --teal-deep:#0a5f5e;
  --amber:#b25a1d;
  --signal:#c2432b;
  --violet:#5a4fa3;
  --focus:#0b5fff;
  --card-shadow:0 1px 2px rgb(21 34 56 / .08),0 8px 28px -12px rgb(21 34 56 / .25);
  --radius:14px;
  --topbar-h:3rem;
  --font-text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --bg:#0a1526;
  --bg-raise:#101d33;
  --bg-sunken:#060d1a;
  --ink:#e9eff8;
  --muted:#a9b7cf;
  --line:#2b3d5c;
  --teal:#4fd0c4;
  --teal-deep:#8fe6dc;
  --amber:#e8a05c;
  --signal:#ef7d5f;
  --violet:#b3aef0;
  --focus:#8fb4ff;
  --card-shadow:0 1px 2px rgb(0 0 0 / .4),0 10px 30px -12px rgb(0 0 0 / .6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-text);font-size:1.075rem;line-height:1.65;
}
h1,h2,h3{line-height:1.2;text-wrap:balance}
h1{font-size:clamp(2rem,4.5vw+.8rem,3rem);letter-spacing:-.01em;margin:.6em 0 .3em}
h2{font-size:clamp(1.35rem,2.4vw+.6rem,1.8rem);margin:2.2em 0 .5em}
h3{font-size:1.12rem;margin:1.6em 0 .4em}
p{margin:.7em 0;max-width:38em}
a{color:var(--teal-deep);text-underline-offset:.14em}
html[data-theme="dark"] a{color:var(--teal)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}

/* Topbar house pattern: one line, sideways scroll, sun/moon icon button. */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--topbar-h);
  display:flex;align-items:center;gap:.75rem;padding:0 .9rem;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.topbar .home{font-family:var(--font-ui);font-weight:700;font-size:.95rem;
  text-decoration:none;color:var(--ink);white-space:nowrap}
.topnav{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{font-family:var(--font-ui);font-size:.86rem;white-space:nowrap;
  padding:.45rem .6rem;border-radius:8px;text-decoration:none;color:var(--muted)}
.topnav a[aria-current="true"]{color:var(--ink);background:var(--bg-sunken)}
.spacer{flex:0 0 auto;width:.25rem}
.chip{font-family:var(--font-ui);font-size:.85rem;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;
  text-decoration:none;color:var(--ink);background:var(--bg-raise)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:50%;
  border:1px solid var(--line);background:var(--bg-raise);color:var(--ink);cursor:pointer}
.icon-btn svg{display:block;width:15px;height:15px;flex:0 0 auto}
.icon-btn svg[hidden]{display:none}

.wrap{max-width:66rem;margin:0 auto;padding:0 1.1rem}
.prose{max-width:42rem}
.eyebrow{font-family:var(--font-ui);font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);margin:2.2rem 0 0}
html[data-theme="dark"] .eyebrow{color:var(--teal)}
.deck{font-size:1.22rem;line-height:1.55;max-width:36em}
.byline{font-family:var(--font-ui);font-size:.85rem;color:var(--muted)}
section{scroll-margin-top:calc(var(--topbar-h) + .75rem)}

/* Simulator: the signature instrument panel. */
.sim{background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--card-shadow);padding:clamp(1rem,3vw,1.6rem);margin:1.4rem 0 0}
.sim-head{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;
  justify-content:space-between}
.sim-head h2{margin:0}
.status-pill{font-family:var(--font-ui);font-size:.85rem;font-weight:700;
  border:1px solid var(--line);border-radius:999px;padding:.3rem .9rem;background:var(--bg)}
.status-pill[data-state="spin"]{border-color:var(--teal);color:var(--teal-deep)}
html[data-theme="dark"] .status-pill[data-state="spin"]{color:var(--teal)}
.status-pill[data-state="dizzy"]{border-color:var(--signal);color:var(--signal)}
.sim-fallback{font-family:var(--font-ui);font-size:.9rem;border:1px solid var(--signal);
  border-radius:10px;padding:.7rem .9rem;background:var(--bg);margin:0 0 1rem}
#sim[data-ready="true"] .sim-fallback{display:none}
.sim-grid{display:grid;gap:1.2rem;margin-top:1rem}
@media (min-width:56rem){.sim-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.stage{position:relative;background:var(--bg-sunken);border:1px solid var(--line);
  border-radius:10px;min-height:19rem;display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.stage svg{width:100%;height:auto;max-height:22rem}
.controls{display:flex;flex-direction:column;gap:.9rem;font-family:var(--font-ui)}
.controls fieldset{border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;margin:0}
.controls legend{font-size:.82rem;font-weight:700;color:var(--muted);padding:0 .4rem}
.seg{display:flex;gap:.5rem;flex-wrap:wrap}
.seg label{border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;
  cursor:pointer;font-size:.9rem;background:var(--bg)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
input[type="range"]{width:100%;accent-color:var(--teal);min-height:2.75rem}
.speed-val{font-variant-numeric:tabular-nums;font-weight:700}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap}
button,.btn{font-family:var(--font-ui);font-size:.95rem;font-weight:700;cursor:pointer;
  border-radius:10px;border:1px solid var(--teal);padding:.7rem 1.1rem;min-height:2.75rem}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal)}
html[data-theme="dark"] .btn-primary{color:#062a29}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost[disabled]{opacity:.45;cursor:not-allowed}
.btn-danger{background:var(--signal);border-color:var(--signal);color:#fff}
html[data-theme="dark"] .btn-danger{color:#2b0d06}
.readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.6rem}
.readout{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem}
.readout dt{font-size:.75rem;color:var(--muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em}
.readout dd{margin:.15rem 0 0;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.trace{margin-top:1.2rem}
.trace canvas{width:100%;height:11rem;display:block;background:var(--bg-sunken);
  border:1px solid var(--line);border-radius:10px}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-family:var(--font-ui);font-size:.82rem;
  color:var(--muted);margin:.5rem 0 0;padding:0;list-style:none}
.legend i{display:inline-block;width:1.6rem;height:.2rem;border-radius:2px;margin-right:.4rem;
  vertical-align:middle}
.legend .lg-amber{background:var(--amber)}
.legend .lg-teal{background:var(--teal)}
.legend .lg-signal{background:var(--signal)}
.step-hint{font-size:.85rem;color:var(--muted);align-self:center}
main.err{padding:3rem 1.1rem}
.gaze{display:flex;gap:1rem;align-items:center;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin-top:1rem}
.gaze-target{flex:0 0 4.5rem;height:4.5rem;border:2px dashed var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-raise)}
.gaze-target span{font-size:2.4rem;font-weight:700;color:var(--teal-deep);display:block}
html[data-theme="dark"] .gaze-target span{color:var(--teal)}
.gaze p{font-family:var(--font-ui);font-size:.9rem;margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stepper{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.stepper button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Documentary figure + method. */
figure.doc{margin:1.6rem 0;background:var(--bg-raise);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem;box-shadow:var(--card-shadow)}
figure.doc img{width:100%;height:auto;border-radius:8px;background:#fff}
figure.doc figcaption{font-family:var(--font-ui);font-size:.86rem;color:var(--muted);
  margin-top:.6rem;max-width:44em}
.credit{font-size:.8rem}
ul.tight li{margin:.35em 0}
.method{font-family:var(--font-ui);font-size:.93rem}
.method li{margin:.4em 0}
footer.site{border-top:1px solid var(--line);margin-top:3rem;padding:1.6rem 0 3rem;
  font-family:var(--font-ui);font-size:.85rem;color:var(--muted)}
footer.site nav{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);
  padding:.6rem 1rem;z-index:99;font-family:var(--font-ui)}
.skip:focus{left:.5rem;top:.5rem}
.to-top{position:fixed;right:1rem;bottom:1rem;display:none}
.to-top.show{display:inline-flex}
@media (max-width:26rem){
  body{font-size:1rem}
  .readouts{grid-template-columns:repeat(2,1fr)}
}