@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--bg:#0b131e;--line:#27394b;--fg:#e1eaf1;--muted:#8fa4b8;--teal:#67d5c5;--purple:#b59beb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:13px/1.6 'DM Sans',sans-serif;overflow:hidden}button,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}button:hover{color:white}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--teal);outline-offset:4px}a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}[hidden]{display:none!important}
header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;border-bottom:1px solid var(--line);background:#0c1724;position:relative;z-index:10}.wordmark{font:500 18px 'Space Grotesk',sans-serif;letter-spacing:-.6px;color:#e5eff8;display:flex;align-items:center;gap:5px}.wordmark strong{font-weight:600}.wordmark span{font:9px 'IBM Plex Mono',monospace;letter-spacing:1.4px;margin-left:17px;color:#7894ad}.header-actions{display:flex;gap:20px;align-items:center}.header-actions button{font-size:12px;color:#adbece}.header-actions span{color:#637e97;margin-left:5px}.light-button{background:#c5e9e2!important;color:#112b2e!important;padding:9px 14px;border-radius:6px;font-weight:600}.light-button:hover{background:#e3fff8!important}#architecture-tabs{height:76px;display:flex;align-items:stretch;justify-content:center;padding:0 24px;gap:8px;border-bottom:1px solid #243849;background:#0c1521;position:relative;z-index:10}.architecture-tab{position:relative;flex:1;max-width:265px;padding:12px 15px;text-align:left;color:#89a0b6;border-bottom:2px solid transparent}.architecture-tab small{display:block;font:9px 'IBM Plex Mono',monospace;letter-spacing:.7px;color:#58758d;margin-bottom:4px}.architecture-tab strong{font:500 14px 'Space Grotesk',sans-serif;display:block}.architecture-tab:hover{background:#152338}.architecture-tab.active{color:#d5c7fa;background:linear-gradient(0deg,#a995eb13,transparent);border-bottom-color:var(--purple)}.architecture-tab.active small{color:#b5a3df}
#stage{position:relative;height:calc(100dvh - 199px);min-height:320px;background:radial-gradient(ellipse at 48% 91%,#20374a66,transparent 66%);overflow:hidden}#scene,#labels{position:absolute;inset:0;width:100%;height:100%}#scene{outline:0;touch-action:none}#labels{pointer-events:none;overflow:hidden}.scene-intro{position:absolute;left:26px;top:20px;max-width:370px;pointer-events:none;transition:opacity .4s}.scene-intro>span{font:9px 'IBM Plex Mono',monospace;color:#8a7cae;letter-spacing:1.3px;text-transform:uppercase}.scene-intro h1{font:500 21px 'Space Grotesk',sans-serif;letter-spacing:-.5px;margin:5px 0 6px}.scene-intro p{font-size:11px;line-height:1.7;color:#8299b0;margin:0;max-width:355px}.zoomed .scene-intro{opacity:0}.breadcrumbs{position:absolute;right:24px;top:22px;display:flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid #35506b66;border-radius:5px;background:#0b1825b0;z-index:4}.breadcrumbs button{font-size:10px;color:#9bb0c5;padding:3px 6px}.breadcrumbs span{color:#3b5871;font-size:10px}.breadcrumbs button:last-child{color:#d1e6f2}#zoom-hint{position:absolute;left:26px;bottom:43px;font-size:11px;line-height:1.85;color:#7691a9;pointer-events:none;transition:opacity .4s}#zoom-hint strong{font-weight:400;color:#afc4d5}.zoomed #zoom-hint{opacity:0}.scene-note{position:absolute;left:26px;bottom:13px;font:8px 'IBM Plex Mono',monospace;color:#536e86;pointer-events:none}.label{position:absolute;white-space:nowrap;transform:translate(-50%,-50%);font-family:'DM Sans',sans-serif;will-change:transform,opacity;transition:opacity .13s;text-shadow:0 2px 7px #06121f,0 0 4px #06121f;padding:1px 4px;border-radius:3px;pointer-events:none}.label.interactive{pointer-events:auto;cursor:pointer}.label.interactive:hover{background:#18344b;color:white!important}.label.tower{font:500 20px 'Space Grotesk',sans-serif;text-align:center;letter-spacing:-.4px}.label.tower small{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:.2px;color:#809ab2;margin-top:3px}.label.component{font-size:12px;font-weight:500;color:#c1d1df}.label.component:before{content:"";display:inline-block;width:16px;border-top:1px solid currentColor;vertical-align:middle;opacity:.4;margin-right:5px}.label.micro{font:10px 'IBM Plex Mono',monospace;color:#9ab5c9}.label.metric{font:500 22px 'Space Grotesk',sans-serif;text-align:center}.label.metric small{display:block;font:11px 'DM Sans',sans-serif;color:#9fb7cb;margin-top:3px}.label.path{font:9px 'IBM Plex Mono',monospace;color:#6e9aaf;background:#0b1523a6;padding:2px 5px}.label.band{font:9px 'IBM Plex Mono',monospace;color:#769bb7}.label.input{font-size:12px;color:#c4abca}.label.hidden{display:none}
footer{height:59px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-top:1px solid var(--line);background:#0c1724;position:relative;z-index:10;gap:15px}.camera-bookmarks{display:flex;gap:6px}.camera-bookmarks button{padding:7px 11px;border:1px solid transparent;border-radius:5px;color:#90a6bb;font-size:11px}.camera-bookmarks button.active{background:#19343d;border-color:#31545b;color:#b9eee2}.camera-bookmarks button:hover{background:#193043}.legend{display:flex;gap:20px;font-size:10px;color:#7791a7}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:5px;height:5px;border-radius:2px}.view-controls{display:flex;align-items:center;gap:6px}.view-controls button{width:28px;height:28px;border:1px solid var(--line);border-radius:4px;color:#a9bfce}.view-controls button:hover{background:#233e52}#zoom-readout{font:10px 'IBM Plex Mono',monospace;color:#68869e;min-width:35px;text-align:center}
#selection{position:absolute;right:22px;bottom:28px;width:315px;max-height:min(380px,65%);overflow:auto;background:#0e1b2bef;border:1px solid #314e66;border-radius:8px;padding:18px 19px;box-shadow:0 12px 60px #0005;z-index:8;backdrop-filter:blur(12px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.panel-heading span{font:9px 'IBM Plex Mono',monospace;letter-spacing:1.1px;color:#698da7}.panel-heading button,.dialog-heading button{font-size:20px;color:#95aabb;line-height:1;padding:0 3px}#selection h2{font:500 19px 'Space Grotesk',sans-serif;letter-spacing:-.4px;margin:4px 0 8px}#selection p{color:#9db3c7;font-size:11px;line-height:1.8;margin:6px 0 10px}.detail-chip{font:8px 'IBM Plex Mono',monospace;color:#b1a2d2;border:1px solid #3b3653;padding:3px 5px;border-radius:3px;display:inline-block;margin:2px 0 8px}.detail-formula{font:10px/1.8 'IBM Plex Mono',monospace;color:#b8cfdf;background:#091422;border:1px solid #233d52;border-radius:4px;padding:9px;white-space:pre-wrap}.detail-toggle{width:100%;border-top:1px solid var(--line);padding:10px 0 0;margin-top:11px;text-align:left;font-size:10px;color:var(--teal)}.detail-extra h3{font:9px 'IBM Plex Mono',monospace;color:#6e91ab;letter-spacing:1px;margin:15px 0 5px}.detail-extra ul{padding-left:15px;font-size:11px;color:#9db3c7}.detail-extra a{font-size:10px;display:block;overflow-wrap:anywhere;margin-top:8px}.detail-warning{color:#c4af8c!important;border-left:2px solid #826944;padding-left:9px;font-size:10px!important}.depth-prompt{font:9px 'IBM Plex Mono',monospace;color:#749db6;margin-top:13px}
#options{position:absolute;right:22px;top:66px;width:325px;max-height:calc(100% - 86px);overflow:auto;background:#0f1f2ff5;border:1px solid #34536b;border-radius:8px;padding:19px;z-index:20;box-shadow:0 12px 65px #0007;backdrop-filter:blur(12px)}#options p{font-size:11px;color:#94adbf;line-height:1.7}.option-toggle{display:flex;align-items:center;width:100%;gap:11px;text-align:left;padding:11px 0;border-bottom:1px solid #263d50}.option-toggle strong{font-size:11px;display:block;font-weight:500}.option-toggle small{font-size:9px;color:#7590a8}.switch{width:26px;height:14px;border-radius:10px;position:relative;background:#2c4054;flex-shrink:0}.switch:after{content:"";width:8px;height:8px;border-radius:50%;background:#7891a7;position:absolute;left:3px;top:3px;transition:.2s}.option-toggle[aria-pressed=true] .switch{background:#397b70}.option-toggle[aria-pressed=true] .switch:after{left:15px;background:#c7fff1}#options label{font-size:10px;color:#91a9be;display:block;margin:16px 0 5px}select{width:100%;border:1px solid #344e65;border-radius:4px;background:#12273a;padding:7px;font-size:11px}select:disabled{opacity:.45}#options>small{font-size:9px;color:#68869f;display:block;margin-top:16px;line-height:1.8}#copy-link{width:100%;text-align:left;padding:12px 0 0;color:var(--teal);font-size:11px}
dialog{width:min(850px,calc(100vw - 30px));max-height:85vh;border:1px solid #3c5c74;border-radius:11px;background:#101e2d;color:var(--fg);padding:25px 28px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#020810ba;backdrop-filter:blur(8px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between}.dialog-heading small{font:9px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#6f97ae}.dialog-heading h2{font:500 25px 'Space Grotesk',sans-serif;margin:7px 0 20px}#source-content h3{font:500 16px 'Space Grotesk',sans-serif;margin:22px 0 8px}#source-content p{font-size:12px;line-height:1.9;color:#a0b6c8}#source-content table{border-collapse:collapse;width:100%;font-size:11px;margin:12px 0}#source-content td,#source-content th{text-align:left;padding:9px;border-bottom:1px solid #2b4156}#source-content th{font:9px 'IBM Plex Mono',monospace;color:#7198b0}#source-content code{font-size:10px;color:#b0c9d9}.source-links{display:flex;flex-wrap:wrap;gap:8px 20px}.source-links a{font-size:11px}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#a4c7d7;font-size:14px}#toast{position:fixed;left:50%;bottom:75px;transform:translateX(-50%);background:#c4e9df;color:#17322e;padding:8px 15px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:60}#toast.show{opacity:1}#story{position:absolute;bottom:28px;left:26px;background:#102335ef;border:1px solid #385c73;border-radius:8px;padding:17px 20px;width:min(455px,calc(100% - 52px));z-index:10;backdrop-filter:blur(10px)}#story small{font:9px 'IBM Plex Mono',monospace;color:var(--teal);letter-spacing:1px}#story h2{font:500 20px 'Space Grotesk',sans-serif;margin:6px 0}#story p{color:#9fb7cb;font-size:11px;line-height:1.8;margin:7px 0}#story .story-nav{display:flex;justify-content:space-between;align-items:center;margin-top:13px}#story .story-nav button{color:var(--teal);font-size:11px}
@media(max-width:1100px){.wordmark span{display:none}.legend{display:none}.architecture-tab{padding:11px 8px}.architecture-tab strong{font-size:12px}.header-actions{gap:13px}.scene-intro{max-width:310px}.scene-intro h1{font-size:19px}.scene-intro p{font-size:10px}#selection{width:285px}}
@media(max-width:680px){header{height:57px;padding:0 13px}.wordmark{font-size:16px}.header-actions{gap:11px}.header-actions button{font-size:10px}#guide-button{display:none}.header-actions span{display:none}#architecture-tabs{height:75px;padding:0 8px;overflow-x:auto;justify-content:flex-start;gap:0}.architecture-tab{min-width:147px;flex:0 0 147px;padding:13px 9px}.architecture-tab small{font-size:8px}.architecture-tab strong{font-size:12px}#stage{height:calc(100dvh - 193px)}.scene-intro{left:15px;top:14px;max-width:265px}.scene-intro h1{font-size:17px}.scene-intro p{font-size:10px;max-width:260px}.scene-intro>span{font-size:8px}.breadcrumbs{top:auto;bottom:44px;right:12px;left:12px;justify-content:center;border:0;background:#0b1825c0}.breadcrumbs button{font-size:9px}#zoom-hint{left:15px;bottom:88px;font-size:9px}.scene-note{left:15px;right:15px;bottom:11px;font-size:7px}.label.tower{font-size:16px}.label.tower small{font-size:8px}.label.component{font-size:10px}.label.component:before{width:8px}.label.metric{font-size:18px}.label.metric small{font-size:9px}footer{height:61px;padding:0 10px;gap:4px}.camera-bookmarks{gap:0}.camera-bookmarks button{font-size:9px;padding:7px}.camera-bookmarks button:first-child span{display:none}.view-controls{gap:4px}.view-controls button{width:25px;height:26px}.view-controls #zoom-out,.view-controls #zoom-in{display:none}#zoom-readout{font-size:9px}#selection{right:10px;bottom:84px;width:calc(100% - 20px);max-height:225px;padding:13px 16px}.panel-heading{margin-bottom:5px}#selection h2{font-size:17px}#selection p{font-size:10px}.detail-formula{font-size:9px}#options{right:10px;top:10px;width:calc(100% - 20px);max-height:calc(100% - 20px)}#story{left:10px;bottom:85px;width:calc(100% - 20px)}dialog{padding:19px}#source-content table{font-size:9px}.zoomed .scene-note{opacity:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}