500;600;700;800&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#070d16;--panel:#0d1623;--panel2:#0b1420;--line:#213346;--soft:#8297ad;--primary:#e3edf8;--cyan:#5adeff;--orange:#e8a35d;--mono:'DM Mono',Consolas,monospace;--display:'Barlow Condensed','Arial Narrow',sans-serif;--body:Inter,Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:#070d16;color:var(--primary);font-family:var(--body);font-size:12px}body{overflow:hidden}button,select,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}button:disabled{opacity:.33;cursor:not-allowed}.hidden{display:none!important}.app-shell{height:100dvh;min-height:640px;display:flex;flex-direction:column;background:radial-gradient(circle at 45% 50%,#0c1d2d,#080e19 66%)}
.topbar{height:57px;min-height:57px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 23px;gap:12px;background:#0a121f}.brand{display:flex;gap:10px;align-items:center}.brandmark{font-size:29px;color:var(--cyan);line-height:1}.brandtext{display:flex;flex-direction:column;gap:2px}.brandtext>b{font-size:14px;letter-spacing:.13em;font-weight:800}.brandtext>b span{color:var(--cyan)}.brandtext small{font:8px var(--mono);letter-spacing:.16em;color:#7995ad}.top-center{font:10px var(--mono);letter-spacing:.09em;color:#819caf;display:flex;align-items:center;gap:10px}.top-center strong{color:#ddefff;font-weight:500}.live-dot,.status-light,.pulse{width:6px;height:6px;display:inline-block;border-radius:50%;background:#6ce7b9;box-shadow:0 0 11px #4dfcc699}.top-divider{height:16px;width:1px;background:#344657;margin:0 6px}.top-actions{display:flex;gap:7px}.tiny-icon{border:1px solid #284053;background:#111f2f;border-radius:3px;color:#afc9db;padding:8px 11px;font:10px var(--mono);min-height:31px}.tiny-icon:hover{border-color:var(--cyan);color:#fff}
.headline{height:93px;min-height:93px;display:flex;align-items:center;justify-content:space-between;padding:0 27px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#0b1420,#101c2a 49%,#0a1420)}.eyebrow,.control-caption{font:9px var(--mono);letter-spacing:.12em;color:#94afc6;display:flex;align-items:center;gap:11px}.eyebrow .line{height:2px;width:16px;background:var(--orange)}.badge-pill{padding:4px 8px;border:1px solid #334558;border-radius:2px;color:#8caebf;font-size:9px}.headline h1{font:800 clamp(26px,3.1vw,41px)/1 var(--display);letter-spacing:.032em;margin:9px 0 0}.headline h1 em{font-style:normal;color:var(--cyan)}.headline h1 small{font-size:18px;font-weight:500;color:#91a9ba;vertical-align:5px;letter-spacing:.10em}.title-sub{color:#36516a;margin:0 8px}.headline-readout{width:170px;text-align:right}.headline-readout>span{font:9px var(--mono);letter-spacing:.1em;color:#a2aebc}.headline-readout strong{display:block;font:700 24px var(--display);letter-spacing:.04em;color:#80edcb}.headline-readout strong span{font-size:13px}.progress-line{height:3px;background:#22313e;margin-top:5px;overflow:hidden}.progress-line i{height:100%;width:100%;display:block;background:linear-gradient(90deg,#15a6bd,#83f3df);transition:width .18s}
.modebar{height:47px;min-height:47px;display:flex;background:#0b1521;border-bottom:1px solid var(--line);padding-left:20px;gap:1px}.modebar button{min-width:108px;padding:0 17px;display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:.11em;color:#91a8bc;background:transparent;border:0;border-bottom:2px solid transparent;font:600 10px var(--mono)}.modebar button>span{font-size:16px;font-weight:400}.modebar button.active{color:#7ceaff;border-bottom:2px solid var(--cyan);background:linear-gradient(0deg,#10304077,transparent)}.modebar button:hover{color:#fff;background:#132539}
.workbench{display:grid;grid-template-columns:267px minmax(0,1fr) 283px;min-height:0;flex:1;overflow:hidden}.panel{background:#0a1421;min-height:0;display:flex;flex-direction:column}.sidebar{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.panelhead{height:75px;min-height:75px;display:flex;align-items:center;justify-content:space-between;padding:16px 19px;border-bottom:1px solid #1d2f41}.section-number{font:9px var(--mono);color:#67bfd5;letter-spacing:.10em}.panelhead h2{font:600 21px var(--display);margin:5px 0 0;letter-spacing:.02em}.count{font:9px var(--mono);color:#728fa8}.search-shell{margin:15px 14px 10px;height:39px;border:1px solid #284157;background:#0e1b2b;display:flex;align-items:center;padding:0 10px;gap:8px}.search-shell>span{font-size:20px;color:#8caaba}.search-shell input{min-width:0;flex:1;width:100%;border:0;outline:0;background:none;color:#ddebf7;font-size:11px}.search-shell input::placeholder{color:#7390a5}.search-shell kbd{font:10px var(--mono);border:1px solid #34516a;padding:3px 5px;color:#6c8ba2}.tree{flex:1;overflow:auto;scrollbar-color:#25445c transparent;scrollbar-width:thin;padding-bottom:25px}.tree-group-title{display:flex;align-items:center;gap:8px;padding:12px 15px 9px;color:#c0d1e2;background:#102031;font:600 10px var(--mono);letter-spacing:.05em;border-top:1px solid #24394d;cursor:pointer}.tree-group-title:hover{background:#172c3c}.tree-group-title .twisty{font-size:12px;color:#66cce8}.tree-group-title .group-count{margin-left:auto;color:#66839c;font-weight:400}.tree-item{width:100%;display:flex;align-items:center;text-align:left;padding:10px 16px 10px 21px;min-height:35px;border:0;border-left:2px solid transparent;border-bottom:1px solid #16293c;background:#0b1623;color:#8ea7bc;font:11px var(--body);gap:10px}.tree-item:hover{background:#162536;color:#eef9ff}.tree-item.active{border-left-color:var(--cyan);background:#153045;color:#e7faff}.part-dot{width:5px;height:5px;min-width:5px;border-radius:50%;background:#db9b57}.part-dot.removed{background:#4fc4f4}.tree-item .tree-index{font:9px var(--mono);color:#5e8098}.tree-item .part-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.sidebar-bottom{height:47px;min-height:47px;display:flex;align-items:center;gap:8px;padding:0 14px;border-top:1px solid #243647;color:#8da7bc;font:8px var(--mono)}.legend-dot{width:5px;height:5px;border-radius:50%;display:inline-block}.legend-dot.orange{background:var(--orange)}.legend-dot.blue{background:var(--cyan)}.align-right{margin-left:auto;color:#d3e0ec}
.viewport-section{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 47%,#193247 0%,#0d1b2b 41%,#08111d 77%,#07101b 100%)}.viewport-section:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.26;background:linear-gradient(90deg,transparent 49.9%,#203e51 50%,transparent 50.1%),linear-gradient(0deg,transparent 49.9%,#203e51 50%,transparent 50.1%);background-size:64px 64px;mask-image:linear-gradient(180deg,transparent,#000 37%,#000 75%,transparent)}.viewport-section:after{content:'';position:absolute;inset:0;pointer-events:none;border:20px solid transparent;outline:1px solid #162a3b;outline-offset:-20px}#viewport{width:100%;height:100%;display:block;position:absolute;inset:0;touch-action:none;cursor:grab}#viewport:active{cursor:grabbing}.viewport-hud{position:absolute;z-index:4}.top-left{top:21px;left:23px}.viewport-label{font:600 11px var(--mono);letter-spacing:.1em;color:#bbd6e6;display:flex;gap:9px;align-items:center}.top-left small{font:9px var(--mono);display:block;margin:8px 0 0 15px;color:#6389a2}.top-right{display:flex;top:20px;right:23px;gap:19px}.metric{border-left:1px solid #34506a;padding-left:13px;text-align:right}.metric small{display:block;font:8px var(--mono);letter-spacing:.08em;color:#779eb6}.metric strong{display:block;font:500 18px var(--mono);color:#e4f2fc;margin-top:6px}.viewport-tools{position:absolute;z-index:5;bottom:22px;left:19px;display:flex;gap:3px;padding:4px;background:#0d1c2dde;border:1px solid #2e4558}.tool{border:0;padding:8px 9px;font:9px var(--mono);background:transparent;color:#8caec4}.tool.active,.tool:hover{background:#174159;color:#7ee6fc}.viewport-corner{position:absolute;right:25px;bottom:19px;z-index:2;display:flex;flex-direction:column;gap:3px;text-align:right}.axis-label{font:10px var(--mono);color:#65c8db}.bottom-right small{font:8px var(--mono);color:#63889d}.viewport-reticle{position:absolute;top:50%;left:50%;color:#38536d;font:16px var(--mono);opacity:.4;pointer-events:none}.intro-hint{position:absolute;bottom:87px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#7291a7;font:9px var(--mono);z-index:3;letter-spacing:.05em}.intro-hint span{color:var(--cyan);margin:0 7px}.label-lines,.scene-labels{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;overflow:hidden;z-index:3}.scene-label{position:absolute;font:9px var(--mono);color:#d3eff7;background:#081725da;border-left:2px solid #5ae2fc;padding:5px 8px;white-space:nowrap;transform:translate(12px,-50%);max-width:210px;overflow:hidden;text-overflow:ellipsis}.warning{position:absolute;z-index:12;top:58px;left:20px;right:20px;padding:10px;background:#46311d;color:#ffdc9b;font:10px var(--mono)}
.inspector-scroll{overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:#274156 transparent}.inspector-placeholder{padding:70px 22px;text-align:center;color:#8bacc2}.large-symbol{font-size:57px;color:#345773;margin-bottom:22px}.inspector-placeholder b{font:600 14px var(--mono);color:#bbd4e4;letter-spacing:.07em}.inspector-placeholder p{font-size:11px;line-height:1.8;max-width:210px;margin:15px auto}.part-graphic{height:115px;margin:15px 18px 17px;background:radial-gradient(circle at 50%,#1c4255,#112234 60%,#0e1926);border:1px solid #29455a;position:relative;display:flex;align-items:center;justify-content:center}.graphic-cross{font:62px var(--display);color:#52c6eb;text-shadow:0 0 33px #26c9f3}.part-graphic>span:last-child{position:absolute;right:8px;bottom:8px;font:9px var(--mono);color:#98c0d7}.part-category{margin:0 19px;font:9px var(--mono);color:#75c9df;letter-spacing:.1em;text-transform:uppercase}#partDetails h3{font:600 26px/1.0 var(--display);margin:8px 19px 9px;letter-spacing:.02em}#partDetails p{font:11px/1.7 var(--body);color:#93aabe;margin:0 19px 16px}.detail-row{border-top:1px solid #1e3041;display:flex;justify-content:space-between;padding:12px 19px;gap:10px;align-items:flex-start}.detail-row span,.alignment-detail>span{font:9px var(--mono);color:#788fa5}.detail-row strong{font:500 10px/1.4 var(--mono);color:#d7e8f4;text-align:right;max-width:145px}.alignment-detail{border-top:1px solid #28394d;padding:12px 19px}.alignment-detail b{color:var(--cyan);float:right}.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:16px}.outline-action,.accent-action{font:10px var(--mono);min-height:35px;border:1px solid #294860;background:#122637;color:#c4e1ef}.outline-action:hover{background:#214159}.accent-action{background:#136486;border-color:#3bb6d8;color:#fff}.accent-action:hover{background:#1a81a4}.inspector-footer{border-top:1px solid var(--line);padding:15px 19px;background:#0d1b2a}.inspector-footer b{font:9px var(--mono);color:#dcac7c}.inspector-footer p{font:10px/1.6 var(--body);color:#8b9fb2;margin:7px 0 0}
.control-deck{height:153px;min-height:153px;border-top:1px solid #2b4356;background:linear-gradient(180deg,#102032,#0c1725);display:grid;grid-template-columns:1.25fr .94fr 1.03fr 1.27fr}.deck-block{min-width:0;border-right:1px solid #283c4f;padding:18px 20px 12px}.control-caption{justify-content:space-between;white-space:nowrap}.control-caption>b{color:#6de3ec;font-weight:500}.deck-block input[type=range]{width:100%;accent-color:#5ae0f6;cursor:pointer;height:13px}.explosion-controls>input{margin:13px 0 1px}.slider-bounds{font:8px var(--mono);color:#6d879c;display:flex;justify-content:space-between}.deck-block select{width:100%;border:1px solid #2a4760;background:#101d2c;color:#b7d5e8;padding:7px 8px;margin-top:9px;font:10px var(--mono)}.button-line{display:flex;gap:6px;margin-top:12px}.min-btn{border:1px solid #2a4e66;background:#122a3c;color:#a2d4e9;font:9px var(--mono);padding:9px 8px;flex:1;white-space:nowrap}.min-btn:hover{background:#19556c;color:#eaffff}.transport{display:flex;gap:6px;margin:10px 0}.transport button{background:#172b40;border:1px solid #2d4a5f;color:#dcecf5;min-width:34px;min-height:36px;font-size:15px}.transport button:hover{background:#245875}.transport .play-main{background:#12769b;color:#e7fcff;border-color:#43c0e2;min-width:42px}.transport select{flex:1;min-width:53px;margin:0;width:auto}.mode-inline{font:9px/1.4 var(--mono);color:#6e93ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mechanism-sliders{display:flex;flex-direction:column;gap:1px;margin-top:9px}.mechanism-sliders label{display:flex;align-items:center;gap:12px;color:#7ba4b8;font:8px var(--mono)}.mechanism-sliders label input{flex:1}.mechanism-controls .button-line{margin-top:7px}.statusbar{height:35px;min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-top:1px solid #263c4f;color:#7f9bb0;background:#08121f;font:8px var(--mono);letter-spacing:.02em;gap:8px}.statusbar>span:first-child{display:flex;align-items:center;gap:8px}.statusbar b{font-weight:400;color:#bcd6e5}.build-info i{font-style:normal;color:#efac68}.toast{position:fixed;z-index:9999;bottom:212px;left:50%;transform:translateX(-50%) translateY(10px);padding:13px 19px;background:#133348;border:1px solid #3e9dbe;box-shadow:0 16px 35px #020916b0;color:#e7faff;font:11px var(--mono);opacity:0;pointer-events:none;transition:opacity .20s,transform .20s;max-width:min(630px,85vw)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.mobile-tabs{display:none}
@media(max-width:1250px){.workbench{grid-template-columns:215px minmax(0,1fr) 238px}.panelhead{padding:13px}.headline h1{font-size:32px}.headline h1 small{font-size:13px}.deck-block{padding:14px 12px}.status-instructions{display:none}.part-graphic{height:96px}.intro-hint{font-size:8px}}
@media(max-width:900px){body{overflow:auto}.app-shell{min-height:680px}.top-center{display:none}.headline{height:77px;min-height:77px;padding:0 13px}.headline h1{font-size:27px}.headline h1 small{display:none}.headline-readout{width:110px}.modebar{overflow-x:auto;padding:0;scrollbar-width:none}.modebar button{min-width:102px;padding:0 9px}.workbench{grid-template-columns:minmax(0,1fr);position:relative}.sidebar,.inspector{position:absolute;top:0;bottom:0;z-index:15;width:min(320px,87vw);box-shadow:0 10px 60px #0008;transition:transform .22s}.sidebar{left:0;transform:translateX(-101%)}.inspector{right:0;transform:translateX(101%)}.sidebar.open,.inspector.open{transform:translateX(0)}.mobile-tabs{display:flex;justify-content:center;gap:5px;position:absolute;z-index:21;bottom:160px;left:50%;transform:translateX(-50%);width:max-content}.mobile-tabs button{background:#10283ddf;border:1px solid #365975;color:#badbf0;padding:9px;font:9px var(--mono)}.viewport-tools{bottom:12px;left:12px}.intro-hint,.viewport-corner{display:none}.control-deck{height:154px;min-height:154px;grid-template-columns:1fr 1fr}.deck-block{padding:9px 12px;overflow:hidden}.subselect{display:none}.mechanism-controls{display:none}.statusbar{padding:0 9px}.build-info{font-size:7px}.toast{bottom:175px}.viewport-section:after{display:none}}
@media(max-width:500px){.topbar{padding:0 12px;height:52px;min-height:52px}.brandtext>b{font-size:11px}.brandtext small{font-size:6.5px}.top-actions{gap:3px}.top-actions .tiny-icon span{display:none}.headline{height:65px;min-height:65px}.headline h1{font-size:24px}.eyebrow{font-size:7px}.headline-readout>span{font-size:7px}.headline-readout strong{font-size:20px}.modebar{height:44px;min-height:44px}.modebar button{min-width:92px;font-size:9px}.top-left{top:12px;left:12px}.top-right{top:12px;right:11px;gap:8px}.metric{padding-left:6px}.metric strong{font-size:12px}.metric small{font-size:6.5px}.viewport-tools{gap:0}.viewport-tools .tool{font-size:8px;padding:8px 7px}.mobile-tabs{bottom:155px}.control-deck{height:148px;min-height:148px}.deck-block .control-caption{font-size:8px}.transport{gap:3px}.transport button{min-width:30px}.transport select{font-size:8px}.statusbar{height:29px;min-height:29px}}

.guide-link{text-decoration:none;display:flex;align-items:center;color:#c1dde9}.guide-link:hover{color:#fff;border-color:#5adeff}@media(max-width:500px){.guide-link{font-size:8px;padding:8px}}

@media(max-width:900px){
 .control-deck.mobile-expanded{height:292px;min-height:292px;grid-template-columns:1fr 1fr}
 .control-deck.mobile-expanded .subselect,.control-deck.mobile-expanded .mechanism-controls{display:block}
 .app-shell.controls-open .mobile-tabs{bottom:298px}
 .mobile-tabs button{padding:8px 7px}
}
@media(max-width:500px){
 .control-deck.mobile-expanded{height:285px;min-height:285px}
 .app-shell.controls-open .mobile-tabs{bottom:290px}
 .mobile-tabs button{font-size:8px;padding:8px 6px}
}

/* mysimulator integration */
html.embed-mode,body.embed-mode{height:100vh;height:100dvh}
body.embed-mode .app-shell{height:100vh;height:100dvh;min-height:0}
body.embed-mode .topbar,body.embed-mode .headline{display:none}
body.embed-mode .workbench{min-height:0}
body.embed-mode .control-deck{height:auto;min-height:0}
.science{position:absolute;z-index:8;top:100px;left:23px;max-width:min(420px,calc(100% - 46px));font:11px/1.6 var(--body)}
.science>summary{cursor:pointer;display:inline-block;list-style:none;padding:6px 10px;background:#0d1c2dde;border:1px solid #2e4558;color:#8fdcf0;font:9px var(--mono);letter-spacing:.1em}
.science>summary::-webkit-details-marker{display:none}
.science[open]>summary{color:#fff;border-color:var(--cyan)}
.science-body{margin-top:4px;max-height:min(60vh,420px);overflow:auto;padding:4px 14px 12px;background:#0a1421f2;border:1px solid #2e4558;color:#a9bfd0}
.science-body h3{font:600 11px var(--mono);color:#7ce2ff;margin:12px 0 4px;letter-spacing:.06em}
.science-body p{margin:0 0 6px}.science-body a{color:#7ce2ff}
@media(max-width:900px){.viewport-tools{bottom:52px}.science{top:96px;left:12px;max-width:calc(100% - 24px)}}
.headline h1{color:var(--primary)}