:root{--bg:#07101b;--bg2:#0c1927;--panel:#0b1927;--line:#21374b;--line2:#152a3b;--text:#ddeef5;--muted:#728fa3;--cyan:#5bd9e7;--green:#5af5bd;--gold:#dfbd81;--accent:#58dbe7;color-scheme:dark;font-family:'DM Sans',Inter,Arial,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-size:13px}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);color:#c1d6e5;background:#142638;border-radius:4px;transition:background .15s,border .15s,color .15s}button:hover{background:#1d3d4b;color:white;border-color:#5095a0}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}button:disabled{opacity:.38;cursor:not-allowed}.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;overflow:hidden}.eyebrow{font-size:10px;letter-spacing:1.65px;color:#6e93a7;font-weight:700}.topbar{height:75px;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 25px;background:#081420;gap:25px}.brand{display:flex;gap:11px;align-items:center}.mark{color:#e2f7ff;font-size:22px;font-weight:900;font-family:'Barlow Condensed',sans-serif;letter-spacing:-4px;position:relative}.mark span:not(.mark-ring){color:var(--cyan)}.mark-ring{position:absolute;inset:-7px -7px -7px -8px;border:1px solid #407386;border-radius:3px;transform:rotate(45deg);opacity:.3}.brand-text{display:flex;flex-direction:column;gap:3px;white-space:nowrap}.brand-text strong{font-size:12px;letter-spacing:2.4px}.brand-text small{font-size:8px;letter-spacing:1.4px;color:#61849a}.separator{height:34px;width:1px;background:var(--line)}.project-head h1{margin:1px 0 0;font:800 29px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.5px}.project-head h1 span{color:var(--cyan)}.project-head h1 small{font:600 12px/1 'DM Sans',sans-serif;letter-spacing:3px;color:#8eaebf;margin-left:8px}.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.live-pill{background:#0e2d31;border:1px solid #1c544c;border-radius:2px;padding:8px 12px;color:#65eac2;font-size:9px;letter-spacing:1.3px;font-weight:700;margin-right:10px}.blink,.green-dot{width:6px;height:6px;background:#56edb3;box-shadow:0 0 9px #3deab0;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:middle}.iconbutton{width:33px;height:34px;font-size:18px}.modebar{display:flex;gap:5px;padding:9px 23px;background:#0b1723;border-bottom:1px solid var(--line);height:56px;align-items:center}.mode{background:none;border:none;flex:1;max-width:175px;height:38px;color:#7f9aae;font-weight:700;letter-spacing:.7px;font-size:11px;text-transform:uppercase}.mode:hover{background:#15303d}.mode.active{background:linear-gradient(110deg,#174753,#173843);color:#a8ffeb;box-shadow:inset 0 -2px #55e2d5}.mode-symbol{font-size:17px;margin-right:8px;vertical-align:middle}.workspace{display:grid;grid-template-columns:245px minmax(300px,1fr) 295px;min-height:490px;flex:1;max-height:calc(100dvh - 75px - 56px - 204px)}.left-panel,.right-panel{min-height:0;background:var(--panel);display:flex;flex-direction:column}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line);overflow-y:auto;scrollbar-color:#36516a transparent;scrollbar-width:thin}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 17px 13px}.panel-header h2,.mechanic-head h2{font:700 21px/1 'Barlow Condensed',sans-serif;letter-spacing:.7px;margin:5px 0 0}.counter{font-size:9px;border:1px solid #335065;border-radius:2px;color:#95bcd0;padding:5px}.search{position:relative;margin:0 14px 12px}.search input{background:#08131f;border:1px solid #284456;color:#d6f3f4;padding:11px 28px;width:100%;border-radius:4px;outline:none}.search span{position:absolute;top:3px;left:9px;font-size:22px;color:#719cb6}.search kbd{position:absolute;right:11px;top:8px;color:#618093;border:1px solid #2e4858;font-size:10px;padding:2px 5px}.panel-tools{display:flex;gap:4px;padding:0 12px 13px}.panel-tools button{font-size:9px;flex:1;padding:8px 0;background:#102538;letter-spacing:.4px}.assembly-tree{overflow-y:auto;min-height:90px;flex:1;padding:0 7px 0 10px;scrollbar-color:#314e62 transparent;scrollbar-width:thin}.tree-group{margin:2px 0 7px}.group-button{background:#112a38;display:flex;justify-content:space-between;align-items:center;border:0;border-left:2px solid #2f5967;border-radius:0;padding:11px 10px;width:100%;text-align:left;color:#a8ccdb;font-size:10px;font-weight:800;letter-spacing:1px}.group-button small{font-size:10px;color:#7295a4}.tree-items{padding:3px 0 7px}.tree-item{width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:2px;padding:8px 10px 8px 22px;color:#7f9fae;display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:11px}.tree-item:hover{background:#13283b}.tree-item.active{background:#123c45;border-left:2px solid #64dacd;color:#d1fff5}.tree-item .dot{width:5px;height:5px;background:#3f7188;border-radius:50%;flex:0 0 auto}.tree-item.removed .dot{background:#e5a65a}.tree-item.learned .dot{background:#53d5b2}.tree-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.left-foot{margin-top:auto;border-top:1px solid var(--line);padding:17px}.left-foot>span{font-size:10px;letter-spacing:1.2px;color:#8baabc}.left-foot>strong{float:right;color:var(--green);font-size:16px}.progress-track{height:5px;background:#1b3743;margin:11px 0;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#2c91a6,#66e9ba);transition:width .22s}.left-foot small{font-size:10px;color:#7998a5}.viewport-wrap{min-width:0;display:flex;flex-direction:column;position:relative;background:#081522}.viewport-top{position:absolute;z-index:2;top:15px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:start;pointer-events:none}.viewport-top h2{font:600 16px 'Barlow Condensed',sans-serif;letter-spacing:1.8px;margin:6px 0}.vp-flags{display:flex;gap:8px;font-size:9px;color:#93aebf}.vp-flags span{border:1px solid #315166;padding:6px 8px;background:#0d2433a1}.canvas-wrap{flex:1;position:relative;min-height:340px;overflow:hidden;background:radial-gradient(ellipse at 49% 41%,#152f45 0%,#0a1929 55%,#06111d 100%)}.canvas-wrap:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(20,49,64,.065) 4px);pointer-events:none}#scene{width:100%;height:100%;display:block;cursor:grab;touch-action:none;outline:none;position:absolute;inset:0}#scene:active{cursor:grabbing}.connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.part-labels{position:absolute;inset:0;pointer-events:none}.part-label{position:absolute;background:#071b27de;padding:5px 7px;color:#bde6ee;font-size:9px;letter-spacing:.45px;border-left:2px solid #5cddc9;white-space:nowrap}.viewport-left{position:absolute;left:17px;bottom:70px;color:#587a8f;font-size:9px;letter-spacing:1.3px}.side-vertical-label{writing-mode:vertical-rl;transform:rotate(180deg);padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #3f6274}.view-widget{position:absolute;right:24px;top:80px;border:1px solid #31566d;width:57px;height:57px;border-radius:50%;background:#0a1b28a8;display:flex;align-items:center;justify-content:center;font-weight:bold;color:#79f3dc}.view-widget:before,.view-widget:after{content:'';position:absolute;background:#436779}.view-widget:before{height:1px;width:80%;transform:rotate(-37deg)}.view-widget:after{width:1px;height:75%;transform:rotate(-37deg)}.view-widget strong{position:absolute;top:1px;left:26px}.view-widget span{position:absolute;right:8px;bottom:5px}.view-widget i{position:absolute;left:9px;bottom:5px;font-style:normal}.viewport-bottom{position:absolute;left:25px;right:25px;bottom:17px;display:flex;justify-content:space-between;color:#688ea2;font-size:9px;letter-spacing:1px;pointer-events:none}.camera-controls{height:48px;background:#0b1928;border-top:1px solid var(--line);display:flex;align-items:center;gap:5px;padding:0 16px;overflow-x:auto}.camera-controls .eyebrow{white-space:nowrap;margin-right:10px}.camera-controls button{background:transparent;font-size:9px;padding:8px 10px;white-space:nowrap;letter-spacing:.6px}.camera-controls button.active{color:#69e4d3;border-color:#428a85;background:#15333e}.inspector-marker{font-size:17px;border:1px solid #365166;color:#5fbfd0;border-radius:50%;width:25px;height:25px;text-align:center}.component-visual{min-height:104px;margin:0 16px;border:1px solid #2a495c;background:radial-gradient(ellipse,#205269,#0a2232 70%);display:flex;align-items:center;justify-content:center;position:relative}.wire-icon{font-family:serif;font-size:65px;line-height:1;color:#5eb8cc;text-shadow:0 0 30px #207e9e;opacity:.56}.component-visual span{position:absolute;right:9px;bottom:9px;font-size:9px;color:#81b6c2;letter-spacing:1px}.inspector-body{padding:17px}.inspector-body h3{font:700 22px/1.14 'Barlow Condensed',sans-serif;margin:7px 0 12px;letter-spacing:.5px}.inspector-body p{font-size:11px;line-height:1.65;color:#8faab9;margin:0 0 17px;min-height:60px}.specs{display:grid;grid-template-columns:1fr 1fr;gap:15px 9px;padding-bottom:14px;border-bottom:1px solid var(--line)}.specs>div{display:flex;flex-direction:column;gap:5px}.specs span{font-size:9px;color:#64869b;letter-spacing:1.1px}.specs b{font-size:11px;font-weight:700;color:#d0e5ec;overflow-wrap:anywhere}.part-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:15px}.part-actions button{padding:10px 4px;font-size:9px;letter-spacing:.4px}.part-actions button:nth-child(3){grid-column:span 2}.part-actions .primary-action{background:#1c5b61;border-color:#42998c;color:#b5ffed}.right-divider{height:1px;background:var(--line)}.mechanic-head{padding:15px 17px 7px}.mechanics{padding:4px 17px 17px;display:flex;flex-direction:column;gap:11px}.mechanics label{display:block}.mechanics label>span{display:flex;justify-content:space-between;align-items:center;color:#90aebc;font-size:10px;margin-bottom:4px}.mechanics label b{color:#67dccc}.mechanics input{width:100%;height:6px;margin:7px 0 0;accent-color:#63dfcf;cursor:pointer}.mechanics button{font-size:10px;padding:9px;background:#16474f;color:#a2fdeb}.control-deck{background:#0c1928;border-top:1px solid #234051;min-height:204px;padding:14px 23px 0}.deck-top{display:flex;align-items:end;justify-content:space-between;gap:12px}.deck-title{display:flex;flex-direction:column;gap:3px}.deck-title strong{font:700 20px 'Barlow Condensed',sans-serif;letter-spacing:1px}.inline-group{display:flex;gap:8px;align-items:center}.inline-group label,.speed-box label,.assembly-select label{color:#7194a7;font-size:9px;font-weight:700;letter-spacing:1px}.inline-group select,.speed-box select,.assembly-select select{background:#132b3c;color:#c3dce8;border:1px solid #325065;border-radius:3px;padding:7px 10px;min-width:100px}.sequence{display:flex;align-items:center;gap:25px;padding:16px 0}.playbuttons{display:flex;align-items:center;gap:7px}.playbuttons button{height:40px;min-width:38px;font-size:16px}.playbuttons #btn-reset{font-size:10px;padding:0 13px}.playbuttons .play-button{height:43px;width:43px;background:#266c71;color:#b1fff4;border-color:#469a91}.explode-slider{flex:1;min-width:80px}.range-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.8px;color:#afc6d1}.range-head strong{color:#62dfcd;font:800 21px 'Barlow Condensed',sans-serif}.explode-slider input{width:100%;margin:8px 0;accent-color:#6de8cf}.range-ends{display:flex;justify-content:space-between;font-size:9px;color:#57788b;letter-spacing:1px}.speed-box,.assembly-select{display:flex;flex-direction:column;gap:5px}.assembly-select{min-width:145px}.assembly-select button{font-size:9px;padding:5px}.status-strip{border-top:1px solid #203b4c;min-height:34px;display:flex;align-items:center;gap:18px;color:#7193a6;font-size:10px}.status-strip>span:nth-child(2){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-strip b{color:#8cdbd1}.status-meta{font-size:9px;letter-spacing:.7px}.status-meta i{font-style:normal;color:#365f67;margin:0 8px}.mobile-tabs{display:none}dialog{background:#102436;border:1px solid #376278;color:#dceefa;max-width:720px;width:92%;border-radius:6px;box-shadow:0 28px 100px #000a}dialog::backdrop{background:#01070dd9}.dialog-head{display:flex;justify-content:space-between}.dialog-head h2{font:700 29px 'Barlow Condensed',sans-serif;margin:0}.dialog-head button{padding:7px 11px}dialog p{color:#a1c1cf;line-height:1.6}.help-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.help-columns section{padding:12px;background:#0c1d2c;border:1px solid #274154}.help-columns h3{color:#6ae4d6;letter-spacing:.5px;font-size:14px;margin:3px 0}.help-columns p{font-size:12px;margin:7px 0}
@media (max-width:1150px){.workspace{grid-template-columns:218px minmax(280px,1fr) 260px}.project-head h1 small{display:none}.sequence{gap:12px}.camera-controls .eyebrow{display:none}.mode{font-size:10px}.topbar{padding:0 14px;gap:16px}}
@media (max-width:880px){.topbar{height:65px}.brand-text small,.separator,.project-head .eyebrow{display:none}.project-head h1{font-size:23px}.live-pill{display:none}.workspace{grid-template-columns:200px minmax(260px,1fr);max-height:none;min-height:60vh}.right-panel{display:none}.right-panel.mobile-active{display:flex;position:absolute;right:0;top:120px;bottom:164px;z-index:10;width:min(340px,85vw);border-left:1px solid var(--cyan);box-shadow:-30px 0 50px #0009}.modebar{height:48px;padding:5px}.mode{height:38px}.mode-symbol{margin-right:3px}.control-deck{padding:12px 13px}.sequence{flex-wrap:wrap}.explode-slider{order:-1;flex-basis:60%}.status-meta{display:none}}
@media (max-width:650px){body{overflow:auto}.app{min-height:100dvh}.topbar{height:58px;padding:0 11px;gap:10px}.brand-text strong{font-size:10px;letter-spacing:1.3px}.mark{font-size:18px}.project-head h1{font-size:20px}.top-actions{gap:3px}.iconbutton{width:30px;height:30px}.modebar{height:55px;gap:0;padding:2px 4px}.mode{min-width:0;font-size:8px;letter-spacing:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.mode-symbol{font-size:17px;margin:0}.workspace{display:flex;flex-direction:column;min-height:0;flex:1;max-height:none}.viewport-wrap{order:0;min-height:50dvh;height:50dvh}.canvas-wrap{min-height:35dvh}.viewport-top{top:12px;left:14px;right:12px}.viewport-top h2{font-size:13px}.viewport-bottom{left:12px;right:12px;font-size:8px}.viewport-bottom span:first-child{max-width:65%}.view-widget{right:15px;top:62px}.camera-controls{padding:4px 5px;gap:4px;height:42px}.camera-controls button{font-size:8px;padding:7px}.left-panel,.right-panel{display:none}.left-panel.mobile-active,.right-panel.mobile-active{display:flex;position:relative;inset:auto;width:100%;height:320px;min-height:200px;border:1px solid #284759;box-shadow:none;order:1}.left-panel.mobile-active .assembly-tree{height:150px}.right-panel.mobile-active{height:420px;overflow:auto}.right-panel.mobile-active .component-visual{display:none}.control-deck{min-height:220px;order:2}.deck-top{align-items:start;flex-wrap:wrap}.deck-title strong{font-size:17px}.inline-group{width:100%;gap:4px;justify-content:space-between}.inline-group label{font-size:8px}.inline-group select{min-width:85px;padding:6px;font-size:10px}.sequence{gap:9px;padding:10px 0}.playbuttons{gap:3px}.playbuttons button{height:32px;min-width:29px;font-size:13px}.playbuttons .play-button{height:35px;width:35px}.explode-slider{order:-1;flex-basis:100%}.speed-box,.assembly-select{flex:1;min-width:80px}.speed-box select,.assembly-select select{font-size:10px;min-width:70px}.assembly-select button{padding:3px}.status-strip{min-height:36px;font-size:9px;gap:9px}.status-strip span:first-child{display:none}.mobile-tabs{display:flex;position:sticky;bottom:0;background:#0a1a28;border-top:1px solid #305467;padding:6px;z-index:20;gap:5px}.mobile-tabs button{flex:1;padding:10px 0;font-size:11px}.help-columns{grid-template-columns:1fr}}
/* The workbench must establish an explicit containing block for a resizable canvas. */
@media (min-width:651px){.app{height:100dvh;min-height:650px}.workspace{flex:1;min-height:0;max-height:none;height:0}.viewport-wrap{min-height:0}.canvas-wrap{min-height:0}}
@media (max-width:650px){.app{height:auto;overflow:visible}.workspace{flex:none}.canvas-wrap{flex:1}}
@media(max-width:650px){.mobile-tabs{order:3}.project-head h1{font-size:17px;white-space:nowrap}.topbar{gap:7px}.brand-text strong{font-size:9px}}