@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/plex-0-ClCTSiDw.ttf) format("truetype")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/plex-1-DyRt3UMW.ttf) format("truetype")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;src:url(/assets/plex-2-BTB9ndPq.ttf) format("truetype")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-stretch:normal;font-display:swap;src:url(/assets/plex-3-DPg3uh6f.ttf) format("truetype")}@font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-stretch:normal;font-display:swap;src:url(/assets/plex-4-DzahmYX0.ttf) format("truetype")}:root{font-family:IBM Plex Sans,Noto Sans SC,PingFang SC,sans-serif;color:#202c3c;background:#f7f9fc;font-synthesis:none;font-size:13px}*{box-sizing:border-box}body{margin:0}button,select,a{font:inherit}button,select{cursor:pointer}button{border:0;background:transparent;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #00a6d6;outline-offset:3px}a{color:#00146e;text-decoration:none}header{height:92px;display:flex;align-items:center;border-bottom:1px solid #d7dfe7;padding:0 28px;gap:42px;background:#fff}.brand{font-size:34px;font-weight:700;font-style:italic;letter-spacing:-2px;color:#00146e;line-height:1}.brand span{display:block;font:8px IBM Plex Mono,monospace;letter-spacing:1.5px;margin-top:9px}.project-title{border-left:1px solid #d7dfe7;padding-left:29px}h1{font-size:19px;letter-spacing:.6px;margin:5px 0 0;font-weight:500}.eyebrow{font:10px IBM Plex Mono,monospace;letter-spacing:1.1px;color:#778697}.header-end{margin-left:auto;display:flex;align-items:center;gap:22px;white-space:nowrap}.concept-badge{border:1px solid #d7dfe7;padding:7px 10px;font:10px IBM Plex Mono,monospace;color:#657587}#language{color:#00146e;font-weight:600}#language span{color:#8f9aa6;margin-left:7px}main{max-width:2200px;margin:auto}.workspace{display:grid;grid-template-columns:174px minmax(0,1fr) 262px;min-height:610px;height:calc(100dvh - 240px);max-height:1000px}.left-panel{border-right:1px solid #d7dfe7;display:flex;flex-direction:column;padding:24px 13px 18px;background:#fbfcfe}.section-title{font-size:10px;color:#718194;letter-spacing:1.3px;margin-bottom:20px;padding-left:8px;font-weight:500}nav button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:15px 10px;margin-bottom:5px;border:1px solid transparent;border-radius:3px}nav button[aria-pressed=true]{background:#00146e;color:#fff}nav button:hover{border-color:#96a6ca}.nav-number{font:10px IBM Plex Mono,monospace;opacity:.5}.nav-arrow{margin-left:auto;opacity:.7}nav small{display:block;font:8px IBM Plex Mono,monospace;letter-spacing:1px;margin-top:4px;opacity:.55}.left-bottom{margin-top:auto;padding:20px 8px 0;display:grid;gap:10px}.left-bottom b{font-size:11px;font-weight:500}.left-bottom p{font-size:10px;line-height:1.8;color:#82909e;margin:0}.left-bottom a{font-size:10px}.viewport{min-width:0;display:flex;flex-direction:column;position:relative;background:#f0f3f6}.view-toolbar{display:flex;justify-content:space-between;align-items:center;height:62px;padding:0 20px;border-bottom:1px solid #e0e5eb;gap:10px}.view-toolbar #modes{background:#e5eaf0;border-radius:5px;padding:3px;display:flex}.view-toolbar button{padding:8px 14px;font-size:11px;border-radius:3px}.view-toolbar button[aria-pressed=true]{background:#fff;color:#00146e;box-shadow:0 1px 4px #27384c15}#zones{border:1px solid #cdd6e0!important}#scene{position:relative;flex:1;min-height:430px;overflow:hidden}canvas{display:block;touch-action:none}.scene-notice{position:absolute;top:17px;left:22px;font:9px IBM Plex Mono,PingFang SC,sans-serif;color:#8795a4;letter-spacing:.6px;pointer-events:none}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#00a6d6;margin-right:8px}.axis-key{position:absolute;bottom:23px;left:22px;color:#8795a4;font:10px IBM Plex Mono,monospace;pointer-events:none}.axis-key span{margin:0 10px}.orbit-hint{position:absolute;bottom:22px;right:20px;color:#8996a4;font-size:9px;letter-spacing:.4px;pointer-events:none}#hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;transform:translate(-50%,-100%);background:#fffef0f2;background:#ffffffed;border:1px solid #ced8e3;border-radius:3px;padding:8px 11px;font-size:10px;color:#364b62;box-shadow:0 3px 10px #20304009;white-space:nowrap;pointer-events:auto}.hotspot:after{content:"";width:1px;height:16px;background:#9cadbc;position:absolute;left:50%;top:100%}.hotspot.side{background:#00146e;color:#fff;border-color:#00146e}.hotspot:hover{border-color:#00a6d6}.material-strip{height:63px;display:flex;align-items:center;justify-content:center;gap:11px;border-top:1px solid #dce3e9;background:#f8fafc;font-size:10px;padding:10px;flex-shrink:0}.material-strip>b{font:14px IBM Plex Mono,monospace;color:#00146e;margin-right:5px}.material-strip span{border-bottom:3px solid var(--state, #ed8e24);padding:7px 0}.material-strip em{font-style:normal;color:#99a5b1}.inspector{border-left:1px solid #d7dfe7;padding:24px 22px 18px;background:#fff;overflow:auto;display:flex;flex-direction:column}.inspector .section-title{padding:0}.inspector .eyebrow{font-size:9px}.inspector h2{font-size:22px;font-weight:500;line-height:1.5;color:#00146e;margin:12px 0}.inspector p{font-size:11px;line-height:1.9;color:#728194;margin:0 0 20px}.inspector p.small{font-size:10px}.inspector dl{margin:18px 0 12px}.inspector dl>div{display:flex;justify-content:space-between;border-bottom:1px solid #edf0f4;padding:9px 0;gap:8px}.inspector dt{font-size:10px;color:#7a8898}.inspector dd{font:10px IBM Plex Mono,monospace;margin:0;white-space:nowrap}.concept-note{font-size:9px;color:#929dab}.screw-note{font:8px/1.8 IBM Plex Mono,monospace;color:#8f9aa7;border:1px dashed #d9e0e7;padding:10px;margin-top:22px}.screw-note b{font-weight:400;color:#697b8e}.legacy{font-size:10px;margin-top:auto;padding-top:20px;line-height:1.7}.flow-card{padding:12px;font-size:13px;font-weight:600;margin-bottom:9px;border-left:2px solid}.flow-card small{display:block;font:8px/1.6 IBM Plex Mono,sans-serif;margin-top:5px;font-weight:400}.flow-card.vapor{background:#edf8fb;color:#0085ac;border-color:#00a6d6}.flow-card.solid{background:#fcf5e9;color:#ae7627;border-color:#d5a64d}.playback{display:flex;align-items:center;gap:28px;padding:22px 28px;border-top:1px solid #d7dfe7;border-bottom:1px solid #d7dfe7;background:#fff;min-height:88px}.transport{display:flex;gap:8px;align-items:center}.transport button{padding:10px 13px;background:#eef1f6;border-radius:3px}.transport #play{background:#00146e;color:#fff;min-width:83px}.transport select{border:1px solid #d7dfe7;padding:9px;background:#fff;color:#637587;font:11px IBM Plex Mono,monospace;border-radius:3px}.timeline{flex:1}.timeline-label{display:flex;justify-content:space-between;font-size:10px;margin-bottom:10px;color:#53677b;gap:8px}.timeline-label b{font-weight:500}.timeline-label span{font:9px IBM Plex Mono,monospace;color:#93a0ad}.step-track{display:flex;gap:4px}.step-track button{flex:1;height:8px;background:#e8edf2;border-radius:1px}.step-track button.done{background:#a8c1d7}.step-track button.current{background:#00a6d6}.animation-note{max-width:100px;font-size:9px;color:#8b99a7;line-height:1.7}.legend{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:18px 28px;border-bottom:1px solid #e0e6ed;font-size:10px;color:#788796}.legend>span{display:flex;align-items:center;gap:7px}.legend i{display:inline-block;width:8px;height:8px;border:1px solid #00000008;border-radius:2px}footer{display:flex;justify-content:space-between;padding:15px 28px;font:8px IBM Plex Mono,PingFang SC,sans-serif;color:#9aa6b3;letter-spacing:.6px}footer b{color:#00146e;margin-left:12px}#zone-strip{position:absolute;bottom:52px;left:20px;right:20px;background:#ffffffed;border:1px solid #dce3e9;padding:10px;pointer-events:none}#zone-strip small{font:8px IBM Plex Mono,monospace;color:#7c8a9b}#zone-strip>div{display:flex;margin-top:8px}#zone-strip span{flex:1;min-width:0;font-size:8px;line-height:1.5;padding:0 6px;border-right:1px solid #dce3e9}#zone-strip b{display:block;color:#00146e;font:11px IBM Plex Mono,monospace;margin-bottom:4px}[hidden]{display:none!important}@media(min-width:1700px){.workspace{grid-template-columns:200px minmax(0,1fr) 300px}.inspector{padding:28px}.inspector h2{font-size:26px}}@media(max-width:1100px){header{gap:20px;padding:0 18px}.project-title{padding-left:20px}h1{font-size:15px}.concept-badge{display:none}.workspace{grid-template-columns:135px minmax(0,1fr) 214px}.inspector{padding:20px 15px}.inspector h2{font-size:19px}.left-panel{padding-left:6px;padding-right:6px}.nav-number{display:none}.material-strip{font-size:8px;gap:7px}.view-toolbar{padding:0 12px}.view-toolbar button{padding:8px 9px}.legend{gap:15px}}@media(max-width:760px){header{height:85px;gap:15px}.brand{font-size:25px}.brand span{font-size:6px}.project-title{border:0;padding:0}.project-title .eyebrow{font-size:7px}h1{font-size:12px;max-width:210px}.header-end{gap:0;font-size:10px}.workspace{display:flex;flex-wrap:wrap;height:auto;min-height:0}.left-panel{width:100%;padding:8px;border:0}.left-panel .section-title,.left-bottom{display:none}nav{display:flex;overflow-x:auto}nav button{min-width:83px;margin:0;padding:9px;justify-content:center;font-size:10px}nav small,.nav-arrow{display:none}.viewport{width:100%}#scene{height:450px;flex:none;min-height:0}.scene-notice{font-size:7px}.view-toolbar{height:54px}.material-strip{font-size:8px;gap:6px;height:60px}.inspector{width:100%;border-left:0;border-top:1px solid #d7dfe7;padding:20px}.inspector .section-title{margin-bottom:13px}.inspector h2{font-size:21px}.inspector dl{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.screw-note{margin-top:15px}.legacy{padding-top:15px}.playback{padding:18px 15px;gap:16px;flex-wrap:wrap}.animation-note{display:none}.timeline{min-width:170px}.timeline-label{font-size:9px}.timeline-label span{display:none}.legend{padding:17px 15px;gap:12px;font-size:9px}footer{padding:14px 15px;gap:20px;font-size:7px;line-height:1.7}.orbit-hint{font-size:7px}.hotspot{font-size:8px;padding:6px}.axis-key{font-size:8px}#zone-strip span{padding:0 3px;font-size:7px}}.hotspot.vapor-label{background:#e5f8ff;color:#0085ac;border-color:#00a6d6}.hotspot.solid-label{background:#fff5e5;color:#ae7627;border-color:#d5a64d}@media(max-width:760px){.workspace{max-height:none}.inspector{flex-shrink:0}}.inspector dd{white-space:normal;text-align:right;max-width:135px;line-height:1.5}.inspector dt{flex-shrink:0}:root{--phite-white: #f7f9fc;--phite-blue: #00146e;--phite-night: #090d24;--phite-anthracite: #383e42;--phite-cyan: #00a6d6;--pv-border: #dde3e8;--pv-muted: #667085;--pv-panel: rgba(255, 255, 255, .94);--pv-shadow: rgba(9, 13, 36, .06);color:var(--phite-night)}.brand img{display:block;width:116px;height:auto}.brand{font-style:normal}.inspector,.left-panel{border-color:var(--pv-border)}.view-toolbar #modes{background:#eef2f5}.view-toolbar button[aria-pressed=true]{box-shadow:0 2px 8px var(--pv-shadow)}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--phite-cyan);outline-offset:4px}.hotspot{border-color:var(--pv-border);box-shadow:0 4px 18px var(--pv-shadow)}.concept-badge{display:inline-block!important;font-size:9px;padding:6px 8px}.header-end{gap:15px}#panel-toggle{display:none}#scene-status{position:absolute;inset:0;z-index:8;background:var(--phite-white);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px}#scene-status h2{font-size:20px;color:var(--phite-blue)}#scene-status p{font:11px IBM Plex Mono,monospace;color:var(--pv-muted)}#retry-scene{background:var(--phite-blue);color:#fff;padding:12px 24px;border-radius:4px}#startup-status{font-family:IBM Plex Sans,PingFang SC,sans-serif!important}#startup-status h1{font-size:26px;letter-spacing:1px}#startup-status span{font:10px IBM Plex Mono,monospace;letter-spacing:2px}#startup-status:after{content:"";height:2px;width:100px;background:var(--phite-cyan);animation:loading-pulse 1.3s ease-in-out infinite}#startup-status a{padding:10px;border:1px solid var(--pv-border);border-radius:4px}@keyframes loading-pulse{50%{opacity:.2;transform:scaleX(.55)}}@media(max-width:1100px){.workspace{grid-template-columns:135px minmax(0,1fr)}.inspector{display:none}.panel-open .workspace{grid-template-columns:135px minmax(0,1fr) 230px}.panel-open .inspector{display:flex}#panel-toggle{display:block!important;padding:7px;font-size:10px;border:1px solid var(--pv-border)}.view-toolbar{gap:6px}.view-toolbar button{padding:8px}.project-title .eyebrow{font-size:8px}}@media(max-width:760px){header{padding:0 12px;gap:10px;height:100px;flex-wrap:wrap;align-content:center;row-gap:10px}.brand img{width:82px}.brand span{font-size:6px;letter-spacing:1px}.project-title{flex:1}.project-title .eyebrow{font-size:7px}.header-end{width:100%;justify-content:flex-end;gap:14px}.concept-badge{font-size:8px;padding:3px 7px}#language{font-size:10px}.panel-open .workspace,.workspace,.panel-open .inspector{display:flex}.view-toolbar{padding:0 8px}#panel-toggle{font-size:9px}.view-toolbar button{font-size:10px;padding:7px}#modes{min-width:0}.material-strip{flex-wrap:wrap;min-height:63px;height:auto}.viewport{order:0}.inspector{order:1}.orbit-hint{max-width:230px;text-align:right}}@media(prefers-reduced-motion:reduce){#startup-status:after{animation:none}*{scroll-behavior:auto}}