/* Dark spatial cockpit: live information, deliberate motion, clear editing. */
.garage-lab{--accent:#e63849;--accent-2:#a5edf3;--config-width:390px;--lab-cyan:#9ceaf2;--lab-red:#ff4559;--ink:#bddbe324;color-scheme:dark}
.garage-lab body{font-family:Arial,Helvetica,sans-serif;background:#080b13;color:#e9f2fa}
.garage-lab [hidden]{display:none!important}
.garage-lab #app{isolation:isolate;background:radial-gradient(ellipse at 25% 20%,#243c5120,transparent 65%)}
.garage-lab #config{top:88px;right:20px;bottom:20px;max-height:none;width:var(--config-width);padding:20px;gap:14px;border-radius:24px;border:1px solid #bce5ff26;background:linear-gradient(145deg,#18202be8,#0b1019f5 65%);box-shadow:0 25px 70px #0008,inset 0 1px 0 #d8f3ff20;backdrop-filter:blur(30px);scrollbar-width:thin;scrollbar-color:#486171 transparent}
.garage-lab #canvas{width:calc(100% - var(--config-width) - 40px)!important}
.garage-lab .top-bar{padding:22px 25px;align-items:flex-start;background:linear-gradient(#080c16e8,transparent);z-index:13}
.garage-lab .brand b{font:800 17px Arial,sans-serif;letter-spacing:2px}.garage-lab .brand i{font-style:normal;color:var(--lab-red);margin:0 5px}.garage-lab .brand span{margin-top:7px;color:#93a7b8;font:10px Arial,sans-serif;letter-spacing:1.5px}
.garage-lab .studio-link{font:600 11px Arial,sans-serif;letter-spacing:.5px;text-transform:none;border:1px solid #a6d3e52b;color:#d0e3ef;background:#a5c4d20a;border-radius:30px;min-height:36px}
.garage-lab .cfg-title{font:600 12px Arial,sans-serif;letter-spacing:1px;margin:0;padding-bottom:14px;color:#b8cbd9}.garage-lab .cfg-title::before{background:var(--lab-red);width:7px;height:7px;transform:rotate(45deg)}
.lab-hud{position:absolute;z-index:3;left:34px;top:110px;pointer-events:none;max-width:calc(100% - var(--config-width) - 80px)}
.lab-eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;color:#b6c8d5;display:flex;align-items:center;gap:9px}.lab-eyebrow>span{height:5px;width:5px;background:var(--lab-red);box-shadow:0 0 14px #ff455980}
.lab-hud h1{font-size:clamp(25px,3vw,44px);line-height:1.08;letter-spacing:-1.8px;font-weight:500;margin:16px 0 23px;text-shadow:0 2px 16px #0008}.lab-hud h1 em{font-style:normal;font-weight:400;color:#b7ccd7;font-size:.72em;letter-spacing:-.8px}
.lab-readouts{display:flex;gap:24px;padding:13px 0;border-top:1px solid #b1e6ff30;width:max-content;max-width:100%}.lab-readouts span{display:flex;flex-direction:column;gap:6px}.lab-readouts small{font-size:8px;letter-spacing:1.3px;color:#91a9bc}.lab-readouts b{font:400 18px ui-monospace,Consolas,monospace;color:#cef4f9}
.lab-corners{pointer-events:none;position:absolute;z-index:2;left:20px;right:calc(var(--config-width) + 55px);top:88px;bottom:104px;background:linear-gradient(#9ddae53d,#9ddae53d) left top/23px 1px no-repeat,linear-gradient(#9ddae53d,#9ddae53d) left top/1px 23px no-repeat,linear-gradient(#9ddae53d,#9ddae53d) right bottom/23px 1px no-repeat,linear-gradient(#9ddae53d,#9ddae53d) right bottom/1px 23px no-repeat}
.lab-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px;border-radius:15px;background:#03071080;border:1px solid #bdeaff17;gap:3px}
.lab-steps button{cursor:pointer;min-height:56px;border:1px solid transparent;color:#95a8b8;background:transparent;border-radius:11px;font:500 10px Arial,sans-serif;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;transition:background .25s,box-shadow .25s,transform .25s}
.lab-steps button span{font:500 10px ui-monospace,monospace;opacity:.65}.lab-steps button.active{color:#e9fcff;background:linear-gradient(140deg,#36586670,#172d3e85);border-color:#adf1ff40;box-shadow:0 0 20px #80d5ef12,inset 0 1px #d0fbff30}.lab-steps button.active span{color:var(--lab-cyan);opacity:1}.lab-steps button:hover{background:#c0e8f110}
.lab-stage-intro{padding:3px 0 8px;animation:lab-enter .35s both}.lab-stage-intro small{font:9px ui-monospace,monospace;letter-spacing:2px;color:#a9dce7}.lab-stage-intro h2{font-weight:500;letter-spacing:-.8px;font-size:30px;margin:8px 0}.lab-stage-intro p{color:#9eb0be;font-size:12px;line-height:1.5}
.garage-lab .acc{border-color:#d1eeff17;background:#d7efff03;border-radius:13px}.garage-lab .acc-h{font:600 11px Arial,sans-serif;letter-spacing:.7px;min-height:44px}.garage-lab .acc-h .ico{font-size:13px;filter:grayscale(1)}.garage-lab .grp>label{font:500 11px Arial,sans-serif;letter-spacing:.1px;text-transform:none;color:#b9cbd7;line-height:1.5}.garage-lab .grp>label .val{color:#c8f1f7}.garage-lab .acc-b{padding:6px 12px 16px;gap:18px}
.garage-lab .tg{font:500 10px Arial,sans-serif;letter-spacing:0;text-transform:none;color:#b9cbd7;min-height:40px;border-color:#bcd7e525;padding:10px 7px}.garage-lab .tg.active{color:#dcfaff;border-color:#93dce570;background:#76cfe71a;box-shadow:0 0 16px #7dd9e90a}.garage-lab .sw{border-radius:9px;width:35px;height:35px}.garage-lab .sw.active{border-color:#bcf4ff;box-shadow:0 0 0 2px #bcf4ff30}.garage-lab .hint{font:11px/1.6 Arial,sans-serif;color:#9cb0bd}.garage-lab .stepper button{color:#c7eff4;background:#b4dfed0a;border-color:#bcd7e528}.garage-lab .stepper .num{font-family:ui-monospace,monospace;font-weight:400}
.garage-lab input[type=range]{background:linear-gradient(90deg,#709aa8 0%,#a7e4ee var(--fill,50%),#c5dfec18 var(--fill,50%));height:3px}.garage-lab input[type=range]::-webkit-slider-thumb{width:19px;height:19px;background:#c3f1fa;border:4px solid #28414f;box-shadow:0 0 14px #9cdeff40}
.lab-editor{animation:lab-enter .35s both}.lab-add{display:flex;gap:6px}.lab-add button{flex:1;min-height:43px;padding:7px 4px;background:#81d7ee0d;color:#d1f0fa;border:1px solid #b2e2f32b;border-radius:9px;font:600 11px Arial,sans-serif;cursor:pointer}.lab-add button:hover{background:#81d7ee20}
.lab-element-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:13px 0}.lab-element{min-width:0;border:1px solid #bfdced26;border-radius:10px;background:#bfdced04;text-align:left;padding:11px;color:#c0d2df;cursor:pointer}.lab-element>span{display:flex;justify-content:space-between;font:600 12px Arial,sans-serif}.lab-element small{font:10px/1.5 Arial,sans-serif;color:#91a9b9}.lab-element>small{display:block;margin-top:5px}.lab-element[aria-pressed=true]{border-color:#a1e9f681;background:linear-gradient(130deg,#a3e4ed1c,#30435310);box-shadow:inset 3px 0 #a1e9f6}.lab-empty{grid-column:1/-1;color:#b6c9d7;font:12px/1.6 Arial,sans-serif}
.lab-element-form h3{font:500 14px Arial,sans-serif;padding:11px 0 14px}.lab-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px}.lab-field{min-width:0;display:flex;flex-direction:column;gap:7px}.lab-field>span{font:10px/1.4 Arial,sans-serif;color:#aabfce}.lab-field input,.lab-field select{width:100%;min-width:0;min-height:44px;border:1px solid #b4d9ec33;border-radius:9px;background:#080e17;color:#def3fd;padding:9px;font:13px Arial,sans-serif}.lab-field input[aria-invalid=true]{border-color:#ff8d93}.lab-field-hint{font:11px/1.6 Arial,sans-serif;color:#90a9b9;margin-top:13px}.lab-remove{min-height:40px;padding:8px 0;color:#ffb7bc;border:0;background:none;font:11px Arial,sans-serif;cursor:pointer}.lab-error{font:12px/1.5 Arial,sans-serif;color:#ffd0a5;background:#b157191c;border:1px solid #ffbc8054;border-radius:9px;padding:12px;margin-top:10px}
.lab-step-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #b8dcea20;padding-top:14px;margin-top:auto}.lab-step-footer button{min-height:42px;padding:10px 16px;border-radius:10px;border:1px solid #b1e5ef34;background:#a0dfe70d;color:#d9eff6;font:500 11px Arial,sans-serif;cursor:pointer}.lab-step-footer button:disabled{opacity:.3;cursor:default}.lab-step-footer span{font:10px ui-monospace,monospace;color:#8299ab}#lab-next{background:#ca3046;color:#fff;border-color:#ed5568}
.lab-review{animation:lab-enter .35s both}.lab-review-icon{height:50px;width:50px;display:grid;place-items:center;background:#79e2ef0a;border:1px solid #b4f6ff40;border-radius:15px;color:#a7eaf4;font-size:27px;box-shadow:0 0 25px #a1e9f60d;margin-bottom:17px}.lab-review h2{font-size:21px;font-weight:500;letter-spacing:-.5px}.lab-review p{font:12px/1.7 Arial,sans-serif;color:#a6bccc;margin-top:10px}.lab-review dl{display:grid;grid-template-columns:auto 1fr;gap:13px 10px;padding:18px 0;margin:10px 0;border-bottom:1px solid #bad9ed22;font-size:11px}.lab-review dt{color:#9cb3c2}.lab-review dd{text-align:right;color:#d8f0fb;margin:0}.lab-review-actions{display:flex;flex-direction:column;gap:8px}.lab-review-actions button{min-height:46px;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#9ed7e50a;border:1px solid #a6dceb30;color:#d7eff9;border-radius:11px;font:12px Arial,sans-serif;cursor:pointer}.lab-review-actions .lab-primary{background:linear-gradient(135deg,#e23851,#a42036);color:#fff;border-color:#f57b8a50}.lab-review .lab-demo-note{font-size:10px;color:#8299aa;margin:17px 0}
.garage-lab #sceneTools{left:32px;bottom:24px;max-width:calc(100% - var(--config-width) - 90px);gap:3px;background:linear-gradient(#283846b8,#0b1421eb);border-color:#beddf338;box-shadow:0 15px 35px #0008,inset 0 1px 0 #ddf4ff20;border-radius:18px;padding:7px;backdrop-filter:blur(22px)}.garage-lab #sceneTools button{font:10px Arial,sans-serif;border-color:transparent;background:transparent;padding:11px 12px;color:#b8cddd;min-height:42px;border-radius:11px;transition:transform .2s,background .2s,box-shadow .2s}.garage-lab #sceneTools button:hover{border-color:#9ceaf240;background:#98dcec15;box-shadow:0 0 22px #9deafb12;transform:translateY(-3px)}.garage-lab #sceneTools button[aria-pressed=true]{background:#99dce51a;border-color:#b2edfb33;color:#dbfaff}.garage-lab #studioSwitch{display:none}.garage-lab .view-help{display:none!important}
.lab-view-actions{position:absolute;z-index:10;left:32px;bottom:100px;display:flex;gap:7px}.lab-view-actions button{min-height:37px;padding:8px 12px;border-radius:25px;border:1px solid #c1e2f32b;background:#101c2dd9;color:#b9d4e4;font:10px Arial,sans-serif;cursor:pointer;backdrop-filter:blur(15px)}.lab-view-actions button span{margin-right:5px;color:#b5edfa}.lab-view-actions button[aria-pressed=true]{border-color:#a6ecf661;color:#d7f7ff;background:#152d3bda}
.garage-lab #dlBtn{font:11px Arial,sans-serif;letter-spacing:.1px;text-transform:none;background:#a4dded0a;border-color:#b1dcea30;color:#d2eaf7;min-height:42px;margin:0}.garage-lab :is(button,a,input,select,[role=button]):focus-visible{outline:2px solid #a5f0ff;outline-offset:3px}.garage-lab #loader{background:#090e18}.garage-lab #exportStatus{font:11px/1.5 Arial,sans-serif;color:#b0d7e5}
@keyframes lab-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:821px) and (max-width:1100px){.garage-lab{--config-width:350px}.lab-hud{left:26px;top:110px}.lab-hud h1{font-size:29px}.lab-readouts{gap:17px}.garage-lab #sceneTools{left:20px;max-width:calc(100% - var(--config-width) - 70px);flex-wrap:wrap}.garage-lab #sceneTools button{padding:8px}.lab-view-actions{left:20px;bottom:138px}}
@media(max-width:820px){.garage-lab #canvas{width:100%!important;height:100%!important}.garage-lab #app.panel-open #canvas{height:44%!important}.garage-lab #config{top:auto;right:0;left:0;bottom:0;width:100%;height:56dvh;max-height:56dvh;padding:14px 16px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:linear-gradient(130deg,#18212bf7,#090e18fc);gap:12px}.garage-lab #config.collapsed{display:none}.garage-lab .cfg-title{position:relative;top:auto;margin:0;padding:0 0 11px;background:transparent;min-height:34px;font-size:11px}.garage-lab #configClose{font:10px Arial,sans-serif;background:#a1dbe812;border-color:#a2d7e72e;color:#c3e5f1;min-height:34px;border-radius:20px}.garage-lab .top-bar{padding:16px}.garage-lab .brand b{font-size:13px;letter-spacing:1px}.garage-lab .brand span{font-size:8px;letter-spacing:.4px}.garage-lab .studio-link{font-size:9px;padding:7px 9px;min-height:31px}.lab-hud{left:19px;top:83px;max-width:calc(100% - 38px)}.lab-hud h1{font-size:30px;margin:11px 0 17px}.lab-eyebrow{font-size:7px;letter-spacing:1.3px}.lab-readouts{gap:23px;padding:10px 0}.lab-readouts small{font-size:7px;letter-spacing:.7px}.lab-readouts b{font-size:15px}.lab-corners{left:10px;right:10px;top:74px;bottom:175px}.garage-lab #app.panel-open .lab-hud{top:69px}.garage-lab #app.panel-open .lab-hud h1,.garage-lab #app.panel-open .lab-eyebrow{display:none}.garage-lab #app.panel-open .lab-readouts{border:0;padding:0;gap:19px}.garage-lab #app.panel-open .lab-readouts small{font-size:6px}.garage-lab #app.panel-open .lab-readouts b{font-size:12px}.garage-lab #app.panel-open .lab-corners{display:none}.garage-lab #sceneTools{left:12px;right:12px;bottom:81px;max-width:none;border-radius:16px;flex-wrap:nowrap;overflow-x:auto;padding:5px;gap:2px}.garage-lab #sceneTools button{font-size:10px;padding:8px 10px;min-height:40px;transform:none}.garage-lab #app.panel-open #sceneTools{bottom:calc(56dvh + 8px);left:10px;right:10px;padding:3px}.garage-lab #app.panel-open #sceneTools button{min-height:32px;padding:7px 9px;font-size:9px}.lab-view-actions{left:14px;bottom:144px;gap:6px}.lab-view-actions button{min-height:35px;font-size:10px;padding:8px 11px}.garage-lab #app.panel-open .lab-view-actions{left:auto;right:12px;bottom:auto;top:68px;gap:4px}.garage-lab #app.panel-open .lab-view-actions button{font-size:0;min-width:35px;width:35px;min-height:32px;padding:6px}.garage-lab #app.panel-open .lab-view-actions button span{font-size:16px;margin:0}.garage-lab #panelBtn{bottom:20px;left:50%;transform:translateX(-50%);border:1px solid #f97d8a50;background:linear-gradient(135deg,#ed3b52,#a32239);color:#fff;box-shadow:0 6px 35px #e7334d35;font:600 12px Arial,sans-serif;letter-spacing:.4px;min-width:200px;justify-content:center}.lab-steps button{min-height:48px}.lab-stage-intro h2{font-size:25px;margin:6px 0}.lab-stage-intro p{font-size:11px}.garage-lab .sw{width:38px;height:38px}.garage-lab .tg{min-height:42px}.lab-step-footer{margin-top:5px}}
@media(max-width:360px){.garage-lab .brand b{font-size:11px}.garage-lab .studio-link{font-size:8px}.garage-lab #config{padding-left:12px;padding-right:12px}.lab-hud h1{font-size:27px}.lab-readouts{gap:18px}.lab-field>span{font-size:9px}.garage-lab #app.panel-open .lab-readouts{gap:12px}.garage-lab #app.panel-open .lab-view-actions{right:10px}.garage-lab #app.panel-open .lab-view-actions button{min-width:31px;width:31px}.lab-steps button{font-size:9px}.lab-steps button span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.garage-lab *, .garage-lab *::before,.garage-lab *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Refinement: readable labels, compact telemetry and a single moving dock lens. */
.lab-hud{top:105px}.lab-hud h1{display:none}.lab-eyebrow{font-size:10px;letter-spacing:1.2px}.lab-readouts{margin-top:13px;padding:10px 13px;background:#080f19b8;border:1px solid #bbddef25;border-radius:12px;backdrop-filter:blur(12px);gap:24px}.lab-readouts small{font-size:9px;letter-spacing:.8px}.lab-readouts b{font-size:18px}
.lab-steps{position:relative;isolation:isolate;--step:0}.lab-steps::before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:calc((100% - 19px)/4);border-radius:11px;background:linear-gradient(140deg,#48748665,#172d3e85);border:1px solid #adf1ff59;box-shadow:0 0 22px #80d5ef16,inset 0 1px 0 #d0fbff38;transform:translateX(calc(var(--step) * (100% + 3px)));transition:transform .42s cubic-bezier(.22,1,.36,1);z-index:-1;pointer-events:none}
.lab-steps button{font-size:12px;min-height:58px}.lab-steps button span{font-size:10px}.lab-steps button.active{background:transparent;border-color:transparent;box-shadow:none}.lab-steps button.active:hover{background:#c0e8f108}
.garage-lab .grp>label{font-size:12px}.garage-lab .acc-h{font-size:12px}.garage-lab .tg{font-size:11px}.lab-stage-intro p{font-size:13px}.garage-lab #sceneTools button{font-size:12px}.lab-view-actions button{font-size:12px;min-height:40px}.lab-add button{font-size:12px}.lab-element>span{font-size:13px}.lab-element small{font-size:11px}.lab-field>span{font-size:12px}.lab-field-hint{font-size:12px}.lab-remove{font-size:12px}.lab-step-footer button{font-size:12px}.lab-review-actions button{font-size:13px}.lab-review p{font-size:13px}.lab-review dl{font-size:12px}.garage-lab #dlBtn{font-size:12px}
@media(max-width:820px){.lab-hud{top:82px}.lab-eyebrow{font-size:8px}.lab-readouts{gap:20px;padding:9px 12px;margin-top:9px}.lab-readouts small{font-size:8px}.lab-readouts b{font-size:15px}.garage-lab #app.panel-open .lab-hud{top:67px}.garage-lab #app.panel-open .lab-readouts{margin:0;background:#0b1721b0;border:1px solid #bce4f020;padding:5px 8px;gap:12px}.garage-lab #app.panel-open .lab-readouts small{font-size:7px}.garage-lab #app.panel-open .lab-readouts b{font-size:12px}.lab-steps button{min-height:51px;font-size:11px}.lab-stage-intro p{font-size:12px}.garage-lab #sceneTools button{font-size:11px}.garage-lab #app.panel-open #sceneTools button{font-size:10px}.lab-field>span{font-size:11px}.lab-view-actions button{font-size:11px}.garage-lab #app.panel-open .lab-view-actions button{font-size:0}.lab-steps::before{transition-duration:.3s}}
@media(max-width:360px){.lab-steps button{font-size:10px}.garage-lab #app.panel-open .lab-readouts{gap:9px;padding:5px 7px}.garage-lab #app.panel-open .lab-readouts small{font-size:6px}.garage-lab #app.panel-open .lab-readouts b{font-size:11px}.lab-field>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.lab-steps::before{transition:none}}
