:root{--bio-bg: #050d1c;--bio-text: #eef5ff;--bio-muted: #9db6d6;--bio-accent: #7cc0ff;--bio-gold: #ffc23d;--bio-panel: rgba(8, 22, 48, .82);--bio-panel-solid: #0a1c3c;--bio-border: rgba(110, 170, 255, .42);--bio-border-soft: rgba(110, 170, 255, .2);--radius: 10px;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,ol{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:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#040b1af0,#040b1ab8 34%,#040b1a00 62%)}.welcome-card{position:absolute;z-index:2;left:5vw;top:50%;transform:translateY(-50%);width:min(40rem,48vw);animation:rise .9s cubic-bezier(.2,.7,.2,1) both}.eyebrow{margin:0 0 .9rem;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;font-weight:600;color:var(--bio-accent)}.welcome-card h1{margin:0 0 1rem;font-size:clamp(2.1rem,3.9vw,3.7rem);line-height:1.06;font-weight:700;letter-spacing:-.015em}.welcome-card h1 em,.brand em{font-style:normal;color:var(--bio-gold)}.welcome-card p{margin:0 0 .8rem;line-height:1.5;font-size:1.08rem;color:#d3e2f6}.quiet{color:var(--bio-muted)!important;font-size:.95rem!important}.fine{margin-top:1.2rem!important;font-size:.8rem!important;color:#86a0c2!important;max-width:34rem}button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--bio-border);background:linear-gradient(180deg,#12305f,#0b2148);color:var(--bio-text);border-radius:8px;padding:.42rem .85rem;font-weight:600;font-size:.86rem;transition:background .18s ease,border-color .18s ease,transform .18s ease}button:hover:not(:disabled){border-color:#96c8ffd9;background:linear-gradient(180deg,#18407c,#0e2a5a)}button:focus-visible{outline:2px solid var(--bio-gold);outline-offset:2px}button:disabled{opacity:.38;cursor:default}button.on{background:linear-gradient(180deg,#dcebff,#b5d2f7);color:#0a2040;border-color:#dcebff}button.primary{border-color:#a0cdffe6;background:linear-gradient(180deg,#2f7fe6,#1b55b8);color:#fff}button.primary:hover:not(:disabled){background:linear-gradient(180deg,#4592f2,#2163cc)}button.large{margin-top:.5rem;padding:.85rem 1.5rem;font-size:1.05rem;border-radius:10px}.masthead,.chevrons,.dock{position:absolute;left:1rem;right:1rem;z-index:20}.masthead{top:.6rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}.brand{grid-column:2;text-align:center;padding:.4rem 1.6rem .45rem;border:1px solid var(--bio-border);border-radius:14px;background:linear-gradient(180deg,#0c224ce6,#07142edb);backdrop-filter:blur(10px)}.brand strong{display:block;font-size:clamp(1.05rem,1.75vw,1.7rem);font-weight:700;letter-spacing:-.005em;line-height:1.2}.brand span{display:block;margin-top:.1rem;font-size:clamp(.78rem,1vw,1rem);color:#cfe0f7;font-style:italic}.counter{grid-column:3;justify-self:end;min-width:9.5rem;padding:.4rem .8rem .45rem;border:1px solid var(--bio-border);border-radius:14px;background:var(--bio-panel);backdrop-filter:blur(10px);font-size:.8rem;font-weight:600;text-align:center}.counter span{display:block}.counter-bar{display:flex;align-items:center;margin-top:.3rem}.counter-bar i{display:block;height:5px;border-radius:99px;background:linear-gradient(90deg,#4c9bf0,#b9dcff);transition:width .4s ease}.counter-bar{position:relative}.counter-bar:before{content:"";position:absolute;left:0;right:2.6rem;height:5px;border-radius:99px;background:#ffffff24}.counter-bar i{position:relative;flex:none;max-width:calc(100% - 2.6rem)}.counter-bar b{margin-left:auto;font-weight:600;font-size:.74rem;color:#cfe0f7;white-space:nowrap}.chevrons{top:4.75rem;display:flex;gap:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}.chevron{--notch: 1.05rem;flex:1 1 0;min-width:0;height:2.7rem;margin-left:calc(var(--notch) * -.55);padding:0 1.5rem 0 1.9rem;border:0;border-radius:0;gap:.55rem;color:#fff;background:color-mix(in srgb,var(--c) 30%,#0a1a36);clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% 50%,calc(100% - var(--notch)) 100%,0 100%,var(--notch) 50%);transition:background .3s ease,color .3s ease}.chevron:first-child{margin-left:0;clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% 50%,calc(100% - var(--notch)) 100%,0 100%);border-radius:8px 0 0 8px;padding-left:1.1rem}.chevron:hover:not(:disabled){background:color-mix(in srgb,var(--c) 55%,#0a1a36)}.chevron.done{background:color-mix(in srgb,var(--c) 62%,#0a1a36)}.chevron.on,.chevron.on:hover:not(:disabled){background:linear-gradient(180deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c))}.chevron b{flex:none;display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:#fff3;font-size:.8rem}.chevron.on b{background:#fff;color:var(--c)}.chevron span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(.72rem,.95vw,.95rem);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.35)}.chevron small{flex:none;font-size:.72rem;font-weight:500;opacity:.9}.dock{bottom:.6rem;display:grid;gap:.4rem;pointer-events:none}.dock>*{pointer-events:auto}.dock-head{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;margin-bottom:-.4rem;pointer-events:none}.dock-head>*{pointer-events:auto}.keys-tab{position:relative;z-index:1;margin-left:.9rem;padding:.28rem 1rem .3rem;border-radius:9px 9px 0 0;background:linear-gradient(180deg,#1f5fc0,#143f8c);border:1px solid var(--bio-border);border-bottom:0;font-weight:700;font-size:.9rem}.tools{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem;padding-bottom:.35rem}.tools button{padding:.24rem .6rem;font-size:.74rem;font-weight:500;border-color:var(--bio-border-soft);background:#081630c7}.tools button.on{background:#bedaffe6;color:#0a2040}.keys{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.3rem 1.6rem;align-items:center;padding:.65rem 1.1rem .7rem;border:1px solid var(--bio-border);border-radius:var(--radius);background:linear-gradient(180deg,#0a1c3ee6,#061128e6);backdrop-filter:blur(12px);box-shadow:0 -8px 30px #00000047}.keys-lead{animation:rise .45s ease both}.keys h1{margin:0;font-size:1.22rem;font-weight:700;line-height:1.2}.keys h1:before{content:"";display:inline-block;width:.6rem;height:.6rem;margin-right:.55rem;border-radius:50%;background:var(--c);vertical-align:.08em}.keys-lead p{margin:.22rem 0 0;color:#d3e2f6;line-height:1.38;font-size:.95rem}.keys-msg{margin:0;padding-left:1.1rem;border-left:3px solid var(--c);font-weight:600;font-size:.98rem;line-height:1.4;color:#fff}.keys-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);margin:.35rem 0 0;padding:.5rem 0 0;list-style:none;border-top:1px solid var(--bio-border-soft)}.keys-grid li{padding:0 1rem;font-size:.86rem;font-weight:600;line-height:1.35;border-left:1px solid var(--bio-border-soft)}.keys-grid li:first-child{padding-left:0;border-left:0}.navbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;padding:.38rem .5rem;border:1px solid var(--bio-border-soft);border-radius:var(--radius);background:#050e22db;backdrop-filter:blur(12px)}.nav-side,.nav-main{display:flex;align-items:center;gap:.5rem}.nav-side.end{justify-content:flex-end}.nav-main>button{min-width:7.6rem}.hint{color:var(--bio-muted);font-size:.72rem;white-space:nowrap}.dots{display:flex;align-items:center;gap:3px;padding:0 .5rem}.dots button{width:clamp(8px,.95vw,15px);height:7px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--c) 28%,#101f3c)}.dots button.done{background:color-mix(in srgb,var(--c) 80%,#101f3c)}.dots button.on{height:13px;background:#fff;box-shadow:0 0 0 2px var(--c)}.dots button:hover{background:var(--c)}.legend,.notes,.drawer{position:absolute;z-index:22;border:1px solid var(--bio-border);border-radius:var(--radius);background:var(--bio-panel);backdrop-filter:blur(12px)}.legend{z-index:18;right:1rem;top:8.4rem;width:13.2rem;padding:.55rem .8rem .6rem;pointer-events:none;animation:rise .4s ease both}.legend h2{margin:.35rem 0 .25rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bio-accent)}.legend h2:first-child{margin-top:0}.legend ul{margin:0;padding:0;list-style:none}.legend li{display:flex;align-items:center;gap:.55rem;margin:.3rem 0;font-size:.8rem;font-weight:500}.legend p{margin:.45rem 0 0;font-size:.66rem;color:var(--bio-muted)}.swatch{flex:none;display:inline-block;width:.95rem;height:.95rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 62%,color-mix(in srgb,var(--c) 60%,#000))}.swatch.bar{height:.42rem;border-radius:99px;background:var(--c)}.swatch.fiber{height:.3rem;border-radius:99px;background:var(--c);transform:rotate(-24deg)}.swatch.cluster{width:.5rem;height:.5rem;margin:0 .22rem;background:var(--c);box-shadow:.34rem -.2rem 0 -.04rem var(--c),-.3rem .24rem 0 -.06rem var(--c)}.notes,.drawer{top:8.2rem;bottom:11.5rem;width:min(28rem,40vw);overflow:auto;padding:.9rem 1rem 1.2rem;background:#061026f2}.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:var(--bio-accent)}.notes p,.refs p{margin:.25rem 0;line-height:1.45;color:#d5e4f5;font-size:.92rem}.note-time{color:var(--bio-muted)!important;font-size:.8rem!important}.notes ul{margin:.2rem 0 0;padding-left:1.1rem}.toc h2{display:flex;align-items:center;gap:.5rem;color:#fff;text-transform:none;letter-spacing:0;font-size:.92rem}.toc h2 b{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--c);font-size:.78rem}.toc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--c);margin-left:.65rem}.toc li button{width:100%;justify-content:flex-start;padding:.3rem .6rem;border:0;border-radius:0 6px 6px 0;background:none;font-weight:500;text-align:left}.toc li button span{flex:none;width:1.5rem;color:var(--bio-muted);font-size:.76rem}.toc li button:hover:not(:disabled){background:#78aaff24}.toc li button.on{background:color-mix(in srgb,var(--c) 45%,transparent);color:#fff}.tag{display:inline-block;padding:.2rem .6rem;border-radius:7px;background:#071430e0;border:1px solid rgba(120,180,255,.6);color:#fff;font:600 12px/1.25 IBM Plex Sans,sans-serif;white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 4px 12px #0000004d}.tag.tone{border-color:var(--tag);border-radius:99px;background:color-mix(in srgb,var(--tag) 34%,#071430);box-shadow:0 0 0 1px #00000040,0 4px 12px #0000004d}.badge{position:absolute;left:1.2rem;top:8.1rem;margin:0;z-index:4;font-size:.7rem;letter-spacing:.04em;color:#c6d8f0b3;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(14,34,70,.35),var(--bio-bg) 72%);opacity:0;pointer-events:none;transition:opacity .48s ease;z-index:3}.fade.on{opacity:.62}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.welcome-card{animation-name:rise-center}@keyframes rise-center{0%{opacity:0;transform:translateY(calc(-50% + 14px))}to{opacity:1;transform:translateY(-50%)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:1180px){.hint,.chevron small{display:none}.legend{width:11.4rem}.keys{grid-template-columns:1fr}.keys-grid{grid-template-columns:1fr 1fr;gap:.35rem 0}.keys-grid li:nth-child(odd){padding-left:0;border-left:0}}@media(max-width:900px){.welcome:after{background:linear-gradient(0deg,#040b1af2,#040b1a99 55%,#040b1a00 85%)}.welcome-card{width:auto;left:5vw;right:5vw;top:auto;bottom:2rem;transform:none;animation-name:rise}.masthead{grid-template-columns:1fr auto;gap:.5rem}.brand{grid-column:1;text-align:left;padding:.35rem .8rem}.brand span{display:none}.counter{grid-column:2;min-width:0}.chevrons{top:3.7rem}.chevron{height:2.1rem;padding:0 .9rem 0 1.25rem;--notch: .7rem}.chevron span{display:none}.chevron.on span{display:block}.chevron:not(.on){flex:0 0 3rem}.legend{display:none}.badge{top:6.1rem}.tools button:nth-child(n+4){display:none}.keys h1{font-size:1rem}.keys-lead p{font-size:.84rem}.keys-msg,.keys-grid{display:none}.navbar{grid-template-columns:auto 1fr auto;gap:.3rem;padding:.3rem}.navbar button{padding:.42rem .55rem;font-size:0;gap:0}.nav-main{justify-content:center}.nav-main>button{min-width:0}.dots{display:none}.notes,.drawer{width:auto;inset:6.2rem .6rem 9.5rem}}@media(max-height:820px){.masthead{top:.4rem}.brand{padding:.28rem 1.2rem .3rem}.chevrons{top:3.95rem}.chevron{height:2.25rem}.legend{top:6.9rem}.badge{top:6.6rem;font-size:.66rem}.keys{padding:.45rem .9rem .5rem}.keys h1{font-size:1.05rem}.keys-lead p,.keys-msg{font-size:.86rem}.keys-grid li{font-size:.78rem}.navbar{padding:.28rem .4rem}.notes,.drawer{top:6.8rem;bottom:10.2rem}}.legend.paths{width:17.5rem}.path{margin:.4rem 0 0;padding:.4rem .5rem .45rem;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:9px;background:color-mix(in srgb,var(--c) 12%,transparent);opacity:.5;transition:opacity .35s ease,background .35s ease}.path.on{opacity:1;background:color-mix(in srgb,var(--c) 22%,transparent)}.path strong{display:block;font-size:.74rem;font-weight:700;color:color-mix(in srgb,var(--c) 70%,#fff)}.path div{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;margin-top:.3rem}.path div span{padding:.12rem .5rem;border-radius:99px;background:var(--c);color:#fff;font-size:.72rem;font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.35)}.path div i{font-style:normal;font-size:.8rem;color:color-mix(in srgb,var(--c) 70%,#fff)}.path small{display:block;margin-top:.28rem;font-size:.66rem;color:#cfe0f7}@media(max-width:1180px){.legend.paths{width:14.5rem}}