:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#111214; color:#f5f5f3; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 35% 15%,#282b31 0,#111214 48%,#090a0b 100%); }
button { border:1px solid #4b4d50; border-radius:7px; background:#202226; color:#f1f1ef; min-height:34px; padding:0 11px; font:inherit; font-size:12px; cursor:pointer; }
button:hover { background:#32353a; border-color:#777a80; }
.three-workshop { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) 290px; grid-template-rows:auto 1fr; }
.three-header { grid-column:1/-1; min-height:62px; padding:10px 18px; display:flex; align-items:center; gap:14px; border-bottom:1px solid #303236; background:rgba(17,18,20,.84); backdrop-filter:blur(16px); }
.three-header p,.three-header strong { display:block; margin:0; }
.three-header p,.eyebrow { color:#a8abb0; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.three-header strong { margin-top:2px; font-size:14px; }
.back-link { color:#f5f5f3; font-size:12px; text-decoration:none; }
.renderer-status { margin-left:auto; color:#b9d9c2; font-size:11px; }
.scene-shell { position:relative; min-height:calc(100vh - 62px); overflow:hidden; }
.scene { position:absolute; inset:0; }
.scene canvas { width:100%; height:100%; display:block; outline:0; }
.model-loading { position:absolute; z-index:2; left:50%; top:50%; width:min(290px,calc(100% - 40px)); padding:16px; transform:translate(-50%,-50%); border:1px solid rgba(190,200,212,.25); border-radius:10px; background:rgba(13,14,16,.82); box-shadow:0 16px 46px rgba(0,0,0,.32); backdrop-filter:blur(12px); transition:opacity .35s ease, visibility .35s ease; }
.model-loading.is-complete { opacity:0; visibility:hidden; pointer-events:none; }
.model-loading strong,.model-loading span { display:block; }
.model-loading strong { font-size:13px; font-weight:600; }
.model-loading span { margin-top:5px; color:#aeb3ba; font-size:11px; }
.model-progress { height:5px; margin-top:12px; overflow:hidden; border-radius:999px; background:#30333a; }
.model-progress i { display:block; width:3%; height:100%; border-radius:inherit; background:#e2e6e9; transition:width .2s ease; }
.scene-caption { position:absolute; left:16px; right:16px; bottom:15px; display:flex; justify-content:space-between; gap:16px; color:#b4b7bc; font-size:10px; pointer-events:none; }
.dashboard { position:absolute; top:16px; left:16px; min-width:156px; padding:11px 12px; display:grid; grid-template-columns:1fr auto; gap:2px 12px; border:1px solid rgba(160,170,180,.24); border-radius:9px; background:rgba(13,14,16,.62); backdrop-filter:blur(10px); font-family:ui-monospace, SFMono-Regular, Consolas, monospace; }
.dashboard-label { grid-column:1/-1; color:#93979d; font:10px Inter, sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.dashboard strong { color:#e8ece5; font-size:17px; font-weight:600; }
.dashboard span:not(.dashboard-label),.dashboard i { align-self:end; color:#a0d7a8; font-size:11px; font-style:normal; }
.dashboard i { color:#5af085; font-weight:700; }
.controls { padding:18px; border-left:1px solid #303236; background:rgba(19,20,23,.86); overflow:auto; }
.controls section { padding:0 0 17px; margin-bottom:16px; border-bottom:1px solid #33353a; }
.controls section:last-child { border:0; margin:0; }
.eyebrow { margin:0 0 9px; }
.button-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.button-row button { padding-inline:6px; }
.control-actions { grid-template-columns:repeat(3,1fr); }
.starter-button,.secondary-button { width:100%; margin-top:8px; }
.starter-button { border-color:#c7ccd1; background:#e9ecef; color:#17191c; font-weight:650; }
.starter-button:hover { background:#fff; border-color:#fff; }
.secondary-button { background:#272a2e; }
.point-inspector > button:first-of-type { width:100%; }
.coordinate-output { display:block; margin-top:9px; padding:8px; overflow-wrap:anywhere; border:1px solid #363a40; border-radius:6px; background:#17191c; color:#a9d7ff; font:10px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.control-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; margin-top:10px; }
.control-grid label { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 7px; color:#c7c9cc; font-size:10px; }
.control-grid input,.control-grid select { grid-column:1 / -1; min-width:0; }
.control-grid select { min-height:27px; border:1px solid #4b4d50; border-radius:5px; background:#1b1d20; color:#f1f1ef; font:inherit; font-size:11px; }
.control-grid output { color:#8fd49c; font-variant-numeric:tabular-nums; }
.checkbox-control { display:block; margin-top:10px; color:#c7c9cc; font-size:11px; }
.checkbox-control input { width:auto; margin:0 6px 0 0; accent-color:#d9dde2; }
.helper { margin:8px 0 0; color:#999da4; font-size:11px; line-height:1.45; }
.live-readout { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
.live-readout div { padding:7px 8px; border-radius:6px; background:#17191c; }
.live-readout dt { color:#8d9198; font-size:10px; }
.live-readout dd { margin:3px 0 0; font-size:12px; }
.smoke-test-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.smoke-test-grid button { min-height:38px; padding:6px; font-size:10px; }
input { width:100%; accent-color:#d9dde2; }
#simulatorBridge { position:fixed; width:1px; height:1px; left:-20px; top:-20px; opacity:0; pointer-events:none; border:0; }
@media (max-width:820px) { .three-workshop { display:block; } .scene-shell { min-height:67vh; } .controls { border-left:0; border-top:1px solid #303236; } .prototype-controls { display:none; } }