:root{font-family:Inter,Arial,sans-serif;color:#dce9f4;background:#07111d;--bg:#07111d;--panel:rgba(8,22,34,.94);--edge:rgba(121,162,187,.19);--teal:#4ce5cf;--amber:#e6ae4c;--white:#e8f2fc;--muted:#8da0b1}
*{box-sizing:border-box}html,body,#app{height:100%;width:100%;padding:0;margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 47% 46%,transparent 35%,rgba(2,8,16,.57) 110%)}
.topbar{position:absolute;left:0;right:0;top:0;height:74px;border-bottom:1px solid var(--edge);background:linear-gradient(180deg,rgba(5,15,25,.98),rgba(8,20,32,.92));display:flex;align-items:center;justify-content:space-between;padding:0 38px;z-index:12}.brand{display:flex;align-items:center;gap:13px}.brand-icon{font-family:'Barlow Condensed';font-weight:800;font-size:24px;color:#091822;background:var(--teal);width:37px;height:37px;text-align:center;line-height:37px;clip-path:polygon(0 0,78% 0,100% 23%,100% 100%,0 100%)}.brand-icon span{font-size:23px}.brand-top{font-weight:800;letter-spacing:1.8px;font-size:15px;color:#f1f7fa}.brand-top span{font-weight:500}.brand-top small{font-size:11px;letter-spacing:.4px;color:var(--teal)}.brand-sub{font-family:'DM Mono';font-size:8px;letter-spacing:1.1px;color:#7892a8;margin-top:4px}.top-center{font-family:'DM Mono';font-size:10px;letter-spacing:1.4px;color:#9db0be}.live-dot,.status-bullet{display:inline-block;border-radius:100%;background:#56e2ba;box-shadow:0 0 12px #56e2ba91;width:7px;height:7px;margin-right:9px}.top-divider{color:#516778;margin:0 12px}.top-actions{display:flex;gap:8px}.ghost-btn{background:rgba(23,43,59,.55);border:1px solid var(--edge);padding:10px 14px;color:#afc1ce;font-family:'DM Mono';letter-spacing:1px;font-size:9px;transition:.2s}.ghost-btn:hover{color:white;border-color:var(--teal)}.ghost-btn span{color:var(--teal)}
.product-header{position:absolute;top:110px;left:40px;pointer-events:none}.eyebrow{font-family:'DM Mono';font-size:10px;letter-spacing:2px;color:var(--teal);font-weight:500}.eyebrow span{color:#819eaf;padding:0 10px}.product-header h1{font-family:'Barlow Condensed';font-size:clamp(52px,5.1vw,86px);font-weight:700;letter-spacing:1px;margin:8px 0 0;line-height:.99;color:#f4f8fc}.product-header .slash{color:var(--teal);padding:0 10px;font-weight:400}.product-header em{font-weight:400;font-style:normal;color:#bad0df}.product-header p{font-family:'DM Mono';font-size:11px;letter-spacing:2.2px;color:#92a9b9;margin:15px 0}.header-rule{width:60px;background:var(--teal);height:2px;margin:19px 0 15px}.micro-line{font-family:'DM Mono';font-size:10px;color:#758fa2;letter-spacing:.2px}.micro-line b{color:#d1e0e8;font-weight:500}.micro-line span{margin:0 8px;color:#4b6578}
.view-controls{position:absolute;left:40px;top:310px}.view-controls .label{font-family:'DM Mono';font-size:9px;letter-spacing:1.4px;color:#7e9aae;margin-bottom:9px}.preset-row{display:flex;gap:5px}.preset-row button{font-family:'DM Mono';font-size:9px;letter-spacing:.3px;color:#7393a9;padding:10px 11px;background:rgba(8,20,32,.72);border:1px solid rgba(119,161,187,.16)}.preset-row button span{color:#c2d0d9;margin-left:4px}.preset-row button.selected{color:var(--teal);background:#163442cc;border-color:#3ba9a396}.preset-row button:hover{border-color:var(--teal)}
.part-inspector{position:absolute;left:40px;bottom:110px;width:300px;background:linear-gradient(135deg,rgba(8,23,35,.94),rgba(12,30,43,.84));border:1px solid var(--edge);border-left:2px solid var(--teal);padding:16px 18px 13px;pointer-events:none}.part-top{font-family:'DM Mono';font-size:9px;letter-spacing:1.1px;color:#a8becc;display:flex;align-items:center;gap:7px}.square-dot{background:var(--teal);width:6px;height:6px}.part-top span:last-child{margin-left:auto;color:#557585}.part-name{font-family:'Barlow Condensed';font-size:22px;letter-spacing:.6px;font-weight:600;color:#f2f7fb;margin-top:11px}.part-desc{font-size:11px;line-height:1.7;color:#91a9b8;margin-top:5px}.part-hint{font-family:'DM Mono';font-size:8px;letter-spacing:.3px;border-top:1px solid var(--edge);margin-top:13px;padding-top:11px;color:#6d94a4}.part-hint span{float:right;color:var(--teal)}
.crosshair{position:absolute;left:53%;top:52%;width:20px;height:20px;opacity:.26;pointer-events:none}.crosshair span:first-child{position:absolute;width:20px;height:1px;top:10px;background:#b5d6e8}.crosshair span:last-child{position:absolute;width:1px;height:20px;left:10px;background:#b5d6e8}.scale-legend{position:absolute;left:40px;bottom:77px;font:9px 'DM Mono';letter-spacing:1px;color:#7e96a7}.scale-legend span{font-size:11px;color:var(--teal)}.scale-legend i{display:inline-block;width:24px;height:1px;background:#7994a7;margin:0 12px 3px}
.telemetry{position:absolute;left:365px;bottom:70px;width:420px;border:1px solid var(--edge);background:rgba(7,21,34,.9);padding:17px 19px 13px}.telemetry-title{font-family:'DM Mono';font-size:10px;letter-spacing:1.1px;color:#e0eaf0}.telemetry-title span{float:right;font-size:8px;color:#648498}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;gap:10px}.metric:not(:last-child){border-right:1px solid var(--edge)}.metric label{display:block;font:8px 'DM Mono';letter-spacing:.2px;color:#728c9e}.metric>div{margin-top:8px;white-space:nowrap}.metric strong{font:700 25px 'Barlow Condensed';color:#f0f7fc}.metric small{font:10px 'DM Mono';color:var(--teal);padding-left:4px}.status-line{border-top:1px solid var(--edge);margin-top:12px;padding-top:11px;font:9px 'DM Mono';color:#84b4a8;letter-spacing:.3px}.status-bullet{width:6px;height:6px;margin-right:6px}
.panel{position:absolute;right:0;top:74px;bottom:45px;z-index:5;width:350px;background:var(--panel);border-left:1px solid #31465a;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#33556a transparent}.panel-heading{display:flex;justify-content:space-between;padding:24px 25px 0;color:var(--teal);font:9px 'DM Mono';letter-spacing:1.1px}.panel-id{color:#637d92}.green{color:#4de0a0}.panel-title{font:600 32px 'Barlow Condensed';letter-spacing:.7px;color:#edf5fa;padding:16px 25px 0}.panel-sub{color:#647f93;font:9px 'DM Mono';letter-spacing:1px;padding:5px 25px 17px}.console-section{border-top:1px solid var(--edge);padding:17px 25px 13px}.section-label{font:10px 'DM Mono';letter-spacing:1.3px;color:#edf4f8;margin-bottom:19px}.section-label>span:first-child{color:var(--teal);margin-right:8px}.section-detail{float:right;color:#5e7a8d;font-size:9px}.axis{margin:0 0 20px}.axis-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.axis-heading label,.field-label{font:9px 'DM Mono';color:#9badbb;letter-spacing:.7px}.axis-heading output{font:11px 'DM Mono';color:var(--teal)}.axis input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;outline:none;display:block;background:linear-gradient(to right,#55dcc7 0%,#386879 55%,#284455 55%);accent-color:var(--teal);cursor:ew-resize}.axis input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border:2px solid #d8f2ef;background:#0b2631;border-radius:50%;box-shadow:0 0 0 3px rgba(69,209,192,.15)}.axis input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#c9ece9;border:2px solid #204653;border-radius:50%}.endpoints{display:flex;justify-content:space-between;margin-top:10px;font:8px 'DM Mono';color:#547083}.axis.compact{margin-bottom:15px}.toggle-group{display:flex;gap:5px;margin-top:10px}.toggle-group button{flex:1;background:#142e3d;color:#8ea8b7;border:1px solid #304b5d;padding:12px 0;font:11px 'DM Mono'}.toggle-group button.active{border-color:#4bd8ca;background:#1b4c52;color:#dcfff6}.button-row{display:flex;gap:8px;margin-top:17px}.primary-btn,.quiet-btn{height:40px;border:1px solid #306d68;font:10px 'DM Mono';letter-spacing:.15px}.primary-btn{flex:1;background:#173f44;color:#7be9dc}.primary-btn:hover{background:#22565b}.primary-btn.locked{color:#ffde8c;border-color:#957f52;background:#483b22}.button-icon{font-size:17px;vertical-align:-2px;padding-right:6px}.quiet-btn{background:#142737;color:#859eaf;padding:0 16px;border-color:#375062}.readonly-row{display:flex;align-items:center;justify-content:space-between;margin-top:15px;font:9px 'DM Mono';color:#688699}.readonly-row strong{font-weight:500;color:#7bcaa8}.readonly-row strong.warn{color:#eeb16f}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}.check-grid label{font:9px 'DM Mono';color:#a4b5bf;display:flex;align-items:center;gap:8px;cursor:pointer}.check-grid input{accent-color:#44cdbb;width:13px;height:13px}.console-footer{padding:18px 25px 30px}.demo-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:#d7ad5b;color:#19202b;border:1px solid #efd291;padding:15px 14px;font:11px 'DM Mono';font-weight:500;letter-spacing:.1px}.demo-btn:hover{background:#f0c678}.demo-btn.running{background:#64d7c2;border-color:#9df5d9}.stop-btn{width:100%;padding:13px;margin-top:10px;background:transparent;border:1px solid rgba(237,107,100,.55);color:#e78987;font:10px 'DM Mono';letter-spacing:1px}.stop-btn:hover,.stop-btn.stopped{background:#642d31;color:#ffe3e0}
.bottom-strip{height:45px;position:absolute;left:0;right:0;bottom:0;background:#071521ef;border-top:1px solid #2a475b;display:flex;align-items:center;gap:26px;padding:0 38px;font:9px 'DM Mono';letter-spacing:.2px;color:#647e8e;z-index:7}.bottom-strip b{color:#b1c6d2;font-weight:500}.bottom-strip .fps{color:#77d4aa}.bottom-strip .hint{margin-left:auto;letter-spacing:.8px}.toast{position:absolute;left:50%;bottom:150px;transform:translateX(-50%) translateY(10px);padding:13px 22px;min-width:240px;text-align:center;font:11px 'DM Mono';color:#faf6e5;background:rgba(18,43,52,.97);border:1px solid #599e96;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:10}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:1250px){.top-center{display:none}.telemetry{left:30px;bottom:280px;width:340px}.part-inspector{bottom:97px;left:30px}.product-header{left:30px}.view-controls{left:30px}.scale-legend{display:none}.header-rule{display:none}.bottom-strip .hint{display:none}.panel{width:320px}.product-header h1{font-size:54px}.view-controls{top:285px}.preset-row button{font-size:8px;padding:8px}}@media(max-width:850px){.topbar{height:58px;padding:0 12px}.brand-sub,.top-actions .ghost-btn:nth-child(1),.top-actions .ghost-btn:nth-child(2){display:none}.top-actions .ghost-btn{padding:9px;font-size:8px}.brand-top{font-size:12px}.panel{top:auto;bottom:34px;height:42vh;width:100%;border-top:1px solid #41566a}.panel-heading{padding:14px 18px 0}.panel-title{font-size:23px;padding:7px 18px 0}.panel-sub{display:none}.console-section{padding:13px 18px}.product-header{top:72px;left:16px}.product-header h1{font-size:45px}.product-header p{font-size:8px}.micro-line{display:none}.view-controls{top:178px;left:16px}.preset-row button{padding:7px}.preset-row button span{display:none}.part-inspector,.telemetry,.scale-legend,.crosshair{display:none}.bottom-strip{height:34px;padding:0 12px;font-size:8px}.bottom-strip span:nth-child(2){display:none}}
#annotation-root{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}.scene-label{position:absolute;display:flex;align-items:center;white-space:nowrap;gap:10px;transform:translate(0,-100%);pointer-events:none}.annotation-anchor{height:6px;width:6px;border:1px solid #68e9dd;background:#173d43;border-radius:50%;box-shadow:0 0 0 5px #3fe1d41b}.annotation-text{font:10px 'DM Mono';letter-spacing:.5px;color:#b6d9dc;text-shadow:0 1px 5px #07121e;background:rgba(5,17,27,.77);border:1px solid rgba(84,201,192,.32);padding:7px 10px}.annotation-text b{color:#54dcc9;padding-right:8px;font-size:8px;font-weight:500}