:root{color-scheme:dark;--line:#203749;--muted:#8495a7;--cyan:#67e7f0;--text:#ecf8ff;--aside:#0a1723;--bg:#040b13}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
#shell{height:100vh;min-height:720px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 60% 20%,#142637,#040b13 75%)}
.app-header{height:75px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);flex:none;background:#06121c;z-index:10}
.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:42px;height:42px;border:1px solid #5c8699;display:grid;place-items:center;color:#b8eff8;font:700 26px 'Space Grotesk';position:relative}.brand-mark span{font:15px sans-serif;position:absolute;right:-8px;top:-8px;color:#e9bd71}.brand-copy{display:flex;flex-direction:column;gap:4px}.eyebrow{color:#61cbd6;font-size:10px;letter-spacing:2px;font-weight:700}.brand-copy strong{font:700 21px 'Space Grotesk';letter-spacing:2px}.brand-copy em{color:#71dce5;font-style:normal}.header-right{display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:1.5px;font-weight:700;color:#adc5d1}.status-dot{width:7px;height:7px;border-radius:50%;background:#e8ad5f;box-shadow:0 0 12px #e8ad5f}.status-dot.ready{background:#64eabf;box-shadow:0 0 13px #64eabf}.outline-chip{border:1px solid #315064;padding:9px 13px;margin-left:8px;color:#62dbe9}
.layout{display:flex;flex:1;min-height:0}.viewport{min-width:0;flex:1;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#10263b 0,#020812 75%)}#scene,#fallback{width:100%;height:100%;display:block;position:absolute;inset:0}#fallback[hidden],#scene[hidden]{display:none}
.viewport:before{content:'';pointer-events:none;position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,11,20,.67),transparent 32%),radial-gradient(ellipse at 52% 52%,transparent 35%,rgba(3,10,20,.16) 90%)}
.top-left{position:absolute;top:48px;left:50px;z-index:2;pointer-events:none}.top-left .index{font-size:10px;color:#65cfd9;letter-spacing:3px;font-weight:700}.top-left h1{font:600 clamp(35px,4.3vw,72px)/.99 'Space Grotesk';letter-spacing:-2px;margin:18px 0 18px;text-shadow:0 4px 22px #04131d}.top-left h1 i{font-style:normal;color:#76e2f0}.top-left p{font-size:13px;line-height:1.7;color:#b1c4d3}
.scene-metrics{position:absolute;z-index:2;left:38px;bottom:81px;display:flex;gap:2px;pointer-events:none;flex-wrap:wrap}.scene-metrics>div{padding:15px 17px;background:rgba(5,16,27,.80);border-top:1px solid #345063;min-width:100px}.scene-metrics span{display:block;font-size:9px;color:#829dad;letter-spacing:1.2px;font-weight:700}.scene-metrics strong{display:block;font:600 22px 'Space Grotesk';margin-top:5px;color:#e1f8ff}.viewport-bottom{position:absolute;bottom:17px;left:40px;right:30px;display:flex;justify-content:space-between;gap:12px;z-index:2;font-size:9px;letter-spacing:1.2px;color:#7994a6}.mouse-guide{color:#9ab4c2}.mouse-guide b{color:#44bdcc;padding:0 6px}.reticle{position:absolute;left:50%;top:50%;width:16px;height:16px;border:1px solid rgba(155,223,237,.22);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1}
#selection-callout{position:absolute;right:31px;top:35px;z-index:4;background:#071623ed;border:1px solid #2d5362;border-left:3px solid #59d8e8;padding:17px 18px;max-width:255px;box-shadow:0 12px 40px #0006}#selection-callout[hidden]{display:none}#selection-callout span{font-size:9px;letter-spacing:1.6px;color:#66e3ef}#selection-callout strong{display:block;margin-top:7px;font:600 15px 'Space Grotesk';overflow-wrap:anywhere}#selection-callout p{font-size:11px;line-height:1.55;color:#a3bac8;margin-bottom:0}
.loading-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;background:#071824eb;border:1px solid #315d6b;padding:24px 36px;min-width:320px;box-shadow:0 20px 70px #000a;text-align:center}.loading-panel strong{display:block;font-size:11px;letter-spacing:2px}.loading-panel p{color:#8eabbc;font-size:12px}.loading-spinner{display:block;margin:0 auto 18px;width:30px;height:30px;border:2px solid #1b4050;border-top-color:#69e6ee;border-radius:50%;animation:spin .8s linear infinite}.loading-panel[hidden]{display:none}@keyframes spin{to{transform:rotate(360deg)}}
.controls{width:355px;min-width:355px;display:flex;flex-direction:column;background:var(--aside);border-left:1px solid var(--line);z-index:5}.controls-head{padding:27px 26px 23px;border-bottom:1px solid var(--line)}.controls-head h2{font:600 23px 'Space Grotesk';margin:8px 0 8px}.controls-head p{font-size:11px;color:#93a8b7;line-height:1.6;margin:0}.pane-scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:#325366 #071723;flex:1;padding-bottom:30px}.control-section{padding:22px 24px;border-bottom:1px solid #1c303f}.sec-header{display:flex;align-items:center;gap:11px;margin-bottom:17px}.sec-header>span{font:700 10px 'Space Grotesk';color:#68ddea;border:1px solid #2e6b77;border-radius:4px;padding:4px 5px}.sec-header h3{font:600 13px 'Space Grotesk';letter-spacing:.25px;margin:0}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mode-grid button,.camera-grid button,.mini-actions button{border:1px solid #2c4455;background:#0e2130;color:#afc2cf;border-radius:5px;padding:12px 8px;font-size:11px;transition:.15s}.mode-grid button:hover,.camera-grid button:hover,.mini-actions button:hover{border-color:#68ddea;color:#ebfdff}.mode-grid button.active{border-color:#4bbed0;background:#103642;color:#8af8ff;box-shadow:inset 0 0 0 1px #366978}.mode-grid .wide{grid-column:span 2}
.slider-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:13px 0 10px}.slider-heading label{font-size:11px;color:#b8cbd5}.slider-heading output{font:700 10px 'Space Grotesk';color:#66dfe9}input[type=range]{width:100%;accent-color:#63d7e4;height:5px;margin:0 0 5px}select,input[type=search]{width:100%;padding:10px 11px;background:#0b2130;border:1px solid #294356;color:#d8e9f1;border-radius:5px;font-size:11px;outline:0}select{appearance:auto}.mini-label{display:block;color:#9eb6c3;font-size:11px;line-height:1.55;margin-bottom:9px}.category-options{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px}.category-options label{display:flex;align-items:center;gap:8px;color:#a9c2cf;font-size:10px;cursor:pointer}.category-options input{accent-color:#58d8e7;width:13px;height:13px;margin:0}.mini-actions{display:flex;gap:8px;margin-top:13px}.mini-actions button{flex:1;padding:9px 8px}.control-section input[type=search]{margin-bottom:8px}.control-section select{margin-bottom:4px}.toggle-line{display:flex;gap:10px;align-items:center;font-size:11px;color:#bacbd5;margin:13px 0}.toggle-line input{accent-color:#52d8e8}.tiny-alert{margin-top:13px;padding:11px 13px;background:#132b36;border-left:2px solid #5cd5dc;color:#a6c2cb;font-size:10px;line-height:1.7}.camera-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.controls-footer{border-top:1px solid var(--line);padding:16px 20px;display:flex;gap:8px}.controls-footer button{flex:1;border-radius:5px;font-weight:700;letter-spacing:.4px;font-size:11px;padding:13px 8px}.reset-btn{border:1px solid #397081;background:#103543;color:#b9f4fd}.snapshot-btn{border:1px solid #3d6573;background:#0b2331;color:#c3e0eb}.footline{height:30px;flex:none;background:#030a11;border-top:1px solid var(--line);color:#607a8c;font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center;padding:0 28px}
@media(max-width:1060px){.top-left{top:30px;left:26px}.top-left h1{font-size:38px}.scene-metrics{left:20px}.controls{width:320px;min-width:320px}.viewport-bottom{left:20px}.coordinate{display:none}}
@media(max-width:760px){#shell{height:auto;min-height:100vh;overflow:auto}.app-header{padding:0 15px;height:60px}.brand-copy strong{font-size:15px}.brand-mark{width:31px;height:31px;font-size:19px}.outline-chip{display:none}.header-right{font-size:9px}.layout{display:block}.viewport{height:65vh;min-height:490px}.top-left{top:20px;left:19px}.top-left h1{font-size:31px;margin:10px 0}.top-left p{font-size:11px}.scene-metrics{bottom:47px;left:10px;right:10px;gap:4px}.scene-metrics>div{min-width:0;flex:1;padding:8px 6px}.scene-metrics span{font-size:7px}.scene-metrics strong{font-size:15px}.viewport-bottom{bottom:12px;left:13px}.mouse-guide{font-size:8px}.controls{width:100%;min-width:0;height:auto}.pane-scroll{max-height:650px}.controls-head{padding:20px}.control-section{padding:18px}.footline{padding:0 10px;font-size:7px}.footline span:last-child{display:none}#selection-callout{right:9px;top:10px;max-width:190px;padding:10px}}