:root{--bio-bg: #07131f;--bio-text: #e8f0f8;--bio-muted: #9eb4cc;--bio-accent: #8eb8e0;--bio-panel: rgba(6, 14, 26, .72);--bio-border: rgba(170, 200, 230, .14);--bio-glow: rgba(120, 170, 220, .08);color:var(--bio-text);background:var(--bio-bg);font-family:IBM Plex Sans,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{overflow:hidden;background:var(--bio-bg)}button,p,h1,h2,ul{font:inherit}button{cursor:pointer}canvas{display:block}.welcome,.stage{position:relative;height:100%}.welcome canvas,.stage canvas{position:absolute;inset:0;width:100%;height:100%}.welcome-card{position:absolute;z-index:2;left:4vw;top:12vh;width:min(38rem,46vw);padding:1.6rem 1.7rem 1.4rem;border:1px solid var(--bio-border);border-radius:4px;background:linear-gradient(180deg,#071220e0,#0712209e);backdrop-filter:blur(14px);box-shadow:0 18px 48px #00000059}.eyebrow{margin:0 0 .6rem;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;font-weight:500;color:var(--bio-accent)}.welcome-card h1{margin:0 0 .7rem;font-family:"IBM Plex Serif",Georgia,serif;font-size:clamp(1.75rem,2.8vw,2.55rem);line-height:1.15;font-weight:600}.welcome-card p{margin:0 0 .7rem;line-height:1.45;color:#d0dff0}.quiet{color:var(--bio-muted)!important}.fine{margin-top:1rem!important;font-size:.82rem;color:#8ea4bc!important}button.primary,.controls button.primary{border:1px solid rgba(180,210,240,.4);background:linear-gradient(180deg,#1a456e,#123048);color:#fff}button.large{margin-top:.4rem;padding:.75rem 1.1rem;border-radius:4px;font-size:1rem}.topbar,.dock{position:absolute;left:1.15rem;right:1.15rem;z-index:5;pointer-events:none}.topbar{top:.75rem;display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;padding:.55rem .85rem .5rem;border-radius:6px;background:linear-gradient(180deg,#060e1a8c,#060e1a47);border:1px solid var(--bio-border);backdrop-filter:blur(10px);box-shadow:0 8px 28px #0000002e}.topbar strong,.topbar span{display:block}.topbar strong{font-size:.95rem;letter-spacing:.01em}.topbar span,.hint{color:#9fb4cc;font-size:.76rem}.top-meta{text-align:right}.track{grid-column:1 / -1;height:2px;margin-top:.35rem;background:#ffffff1a;border-radius:99px;overflow:hidden}.track i{display:block;height:100%;background:linear-gradient(90deg,#6aa8e0,#b8d8f5);border-radius:inherit}.dock{bottom:.65rem;display:grid;gap:.42rem;padding:.65rem .9rem .55rem;border-radius:6px;background:linear-gradient(180deg,rgba(7,16,28,.12),var(--bio-panel));border:1px solid var(--bio-border);backdrop-filter:blur(14px);box-shadow:0 -6px 32px #00000038;pointer-events:auto;max-height:30vh}.caption h1{margin:0;font-family:"IBM Plex Serif",Georgia,serif;font-size:1.12rem;font-weight:600}.caption p{margin:.2rem 0 0;max-width:78rem;color:#d0dff0;line-height:1.35}.conclusions{display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem;margin:.45rem 0 0;padding:0;list-style:none}.conclusions li{font-size:.82rem;color:#c9d8ea}.controls,.tools,.scenes{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}button{border:1px solid rgba(170,200,230,.22);background:#0a1626c7;color:var(--bio-text);border-radius:4px;padding:.4rem .72rem;font-weight:500}button:disabled{opacity:.4;cursor:default}button.on,.scenes button.on{background:#c8dcf0;color:#0c2238}.hint{margin-left:auto;color:var(--bio-muted)}.notes,.drawer{position:absolute;top:4.2rem;bottom:8.5rem;z-index:6;width:min(28rem,38vw);overflow:auto;padding:.9rem 1rem 1.2rem;border-radius:16px;background:#060e1ae6;border:1px solid rgba(180,206,240,.18)}.notes{left:1rem}.drawer{right:1rem}.notes header,.drawer header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.notes h2,.drawer h2{margin:.9rem 0 .25rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#9ec5ff}.notes p,.refs p{margin:.25rem 0;line-height:1.45;color:#d5e4f5;font-size:.92rem}.note-time{color:#9fb4cc!important;font-size:.8rem!important}.notes ul{margin:.2rem 0 0;padding-left:1.1rem}.legend ul{list-style:none;padding:0}.legend li{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}.swatch{width:.8rem;height:.8rem;border-radius:99px;display:inline-block}.gold{background:#f0b429}.violet{background:#8b5cf6}.rose{background:#e11d48}.sand{background:#f3b7a6}.teal{background:#2dd4bf}.blue{background:#60a5fa}.red{background:#ff2438}.tag{display:inline-block;padding:.16rem .48rem;border-radius:3px;background:#060e1ae0;border:1px solid rgba(160,195,230,.32);color:#e8f2fc;font:500 11px/1.25 IBM Plex Sans,sans-serif;letter-spacing:.01em;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 4px 12px #00000040}.badge{position:absolute;left:1.2rem;top:3.55rem;bottom:auto;margin:0;z-index:4;font-size:.72rem;letter-spacing:.04em;color:#c6d8ecb8;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.45)}.fade{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 40%,rgba(12,28,48,.35),var(--bio-bg) 72%);opacity:0;pointer-events:none;transition:opacity .48s ease;z-index:3}.fade.on{opacity:.62}@media(max-width:900px){.welcome-card{width:auto;right:4vw;top:auto;bottom:2rem}.conclusions{grid-template-columns:1fr}.notes,.drawer{width:auto;left:.6rem;right:.6rem}}@media(max-height:820px){.dock{padding:.55rem .75rem .5rem;gap:.3rem}.caption h1{font-size:1.02rem}.caption p{font-size:.9rem}.conclusions li{font-size:.76rem}.badge{top:3.05rem;font-size:.68rem}}@media(max-height:720px){.dock{bottom:.4rem;padding:.45rem .65rem .4rem}.notes,.drawer{top:3.6rem;bottom:7.2rem}button{padding:.34rem .62rem}}
