:root{color-scheme:dark;--ink:#d8e8ee;--muted:#72919b;--cyan:#53d9e5;--border:#233740;--deep:#08141a;--panel:#0c1a21;--mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--deep);color:var(--ink)}button,input,select{font:inherit}#app{height:100dvh;min-height:720px;display:flex;flex-direction:column;overflow:hidden}.topbar{height:70px;min-height:70px;padding:0 31px;display:flex;align-items:center;justify-content:space-between;background:#0a171e;border-bottom:1px solid var(--border);z-index:4}.brand{font-size:12px;font-weight:500;letter-spacing:.18em;display:flex;align-items:center;gap:15px}.brand strong{color:#e8fbff}.mark{width:24px;height:24px;border:1px solid #86e7ee;display:grid;place-items:center;transform:rotate(45deg)}.mark-inner{height:10px;width:10px;border:2px solid #53d9e5;border-radius:100%}.top-right{display:flex;align-items:center;gap:23px}.pill,.id{font:10px var(--mono);letter-spacing:.08em;color:#7eabb5}.pill{border:1px solid #2d6570;border-radius:20px;padding:9px 13px;color:#7fe6e7}.pill i{width:6px;height:6px;display:inline-block;border-radius:50%;background:#5becb8;margin-right:8px;box-shadow:0 0 9px #35e2ac}.workspace{min-height:0;display:grid;grid-template-columns:354px minmax(0,1fr);flex:1}.inspector{background:linear-gradient(180deg,#0d1c23,#09171e);padding:28px 25px 24px;border-right:1px solid var(--border);overflow-y:auto;scrollbar-color:#24424d transparent;scrollbar-width:thin}.eyebrow{color:#67d6dc;font:10px var(--mono);letter-spacing:.13em;margin-bottom:9px}h1{font-size:38px;letter-spacing:-.065em;margin:0;font-weight:610;line-height:1.1}.title-dot{color:var(--cyan)}.subtitle{font-size:13px;color:#a7ccd2;margin:8px 0 14px;letter-spacing:.035em}.lede{font-size:12px;color:#728d96;line-height:1.8;margin:0 0 25px}.section-title{margin:23px 0 16px;border-top:1px solid #213943;padding-top:16px;display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.08em;color:#9cb5ba}.section-title span+span{color:#4f737e}.field{display:grid;gap:9px;color:#789aa5;font:10px var(--mono);letter-spacing:.07em;margin:0 0 16px}.field select{appearance:none;padding:11px 34px 11px 11px;background:#11242d;color:#d7ecef;border:1px solid #31505b;border-radius:3px;outline:0;font:12px Inter,system-ui,sans-serif;min-width:0;background-image:linear-gradient(45deg,transparent 50%,#8acbd0 50%),linear-gradient(135deg,#8acbd0 50%,transparent 50%);background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;background-size:5px 5px;background-repeat:no-repeat}.field select:focus-visible{outline:2px solid var(--cyan)}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.slider-line{display:grid;grid-template-columns:1fr auto;row-gap:10px;align-items:center;font-size:11px;margin:0 0 16px;color:#b4c9ce}.slider-line output{color:#64e1e6;font:11px var(--mono)}.slider-line input{grid-column:1 / 3;width:100%;margin:0;accent-color:#67d8e0;height:3px;cursor:pointer}.toggles{padding:3px 0 10px}.switch{display:flex;align-items:center;gap:10px;color:#b1c7cd;font-size:11px;cursor:pointer}.switch input{position:absolute;opacity:0;pointer-events:none}.track{display:inline-block;width:29px;height:16px;border-radius:12px;background:#29404b;position:relative;transition:background .15s;flex:none}.track:after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;background:#7799a1;border-radius:50%;transition:transform .15s}.switch input:checked+.track{background:#186875}.switch input:checked+.track:after{transform:translateX(13px);background:#bafcff}.switch input:focus-visible+.track{outline:2px solid white}.colorfield{display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);color:#8ba9b0;letter-spacing:.04em;padding:8px 0}.colorfield input{height:30px;width:44px;border:1px solid #2d4c56;background:#132832;padding:3px;cursor:pointer}.component-list{display:grid;gap:15px}.inspector-foot{font:9px/1.95 var(--mono);letter-spacing:.08em;color:#62828b;border-top:1px solid #203740;padding-top:20px;margin-top:26px}.inspector-foot .square{height:7px;width:7px;border:1px solid #5bd2db;display:inline-block;transform:rotate(45deg);margin-right:8px}.inspector-foot>span:last-child{color:#3b6671}.viewport{position:relative;min-width:0;background:#06141b;overflow:hidden}.render-canvas{position:absolute;inset:0;z-index:0}.render-canvas canvas{width:100%;height:100%;display:block}.viewport-top{position:absolute;top:28px;left:33px;right:32px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.view-label{display:grid;gap:6px}.view-label small,.view-label strong{font:10px var(--mono);letter-spacing:.11em}.view-label small{color:#5ea3ae}.view-label strong{font-size:13px;color:#d4e7eb;font-weight:500;letter-spacing:0}.live-state{border:1px solid #27646e;background:#07232a;border-radius:2px;padding:9px 10px;font:10px var(--mono);color:#80dee2;letter-spacing:.07em}.live-state span:first-child{width:7px;height:7px;border-radius:50%;background:#4ff0b5;display:inline-block;margin-right:7px}.crosshair{pointer-events:none;position:absolute;background:#174451;opacity:.25}.crosshair.h{height:1px;width:100%;top:50%}.crosshair.v{width:1px;height:100%;left:50%}.reticle{position:absolute;top:51%;left:50%;transform:translate(-50%, -50%);border:1px solid #23606a55;border-radius:100%;width:320px;height:320px;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column;color:transparent}.reticle:before,.reticle:after{content:"";position:absolute;border:1px dashed #1b4951;border-radius:50%;inset:20px;opacity:.35}.reticle:after{inset:-50px;border:1px solid #1c414858}.reticle span,.reticle small{position:absolute;bottom:0;right:-100px;font:9px var(--mono);color:#519ca8;letter-spacing:.13em}.reticle small{bottom:-15px;font-size:8px;color:#386778}.viewhint{position:absolute;bottom:147px;left:35px;font:10px var(--mono);color:#658d96;letter-spacing:.07em;pointer-events:none}.viewhint span{color:#3ab5be}.transport{position:absolute;left:30px;right:30px;bottom:90px;display:flex;gap:7px;flex-wrap:wrap}.action{cursor:pointer;border:1px solid #32535e;background:#10252e;color:#b8d4dc;padding:13px 12px;font:10px var(--mono);letter-spacing:.045em;border-radius:3px;transition:.14s;white-space:nowrap}.action:hover{background:#193a45;color:#d3f9ff;border-color:#5abfc9}.action.primary{color:#061b20;background:#78e4e9;border-color:#78e4e9;font-weight:700;letter-spacing:.04em;padding-inline:16px}.action.primary:hover{background:#b0f5f6}.action.audio{margin-left:auto;border-color:#245863;color:#82d5e0}.telemetry{position:absolute;left:0;right:0;bottom:0;height:74px;border-top:1px solid #23404a;background:#07171ed9;display:flex;justify-content:space-evenly;align-items:center;gap:20px}.telemetry div{display:grid;gap:6px}.telemetry small{font:9px var(--mono);color:#577b88;letter-spacing:.09em}.telemetry strong{font:12px var(--mono);color:#cfecf0}.bottom{height:31px;min-height:31px;border-top:1px solid #19323c;background:#0a171e;padding:0 25px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#65828b;font:9px var(--mono);letter-spacing:.02em}.bottom b{font-weight:400;color:#366876}.bottom #error{color:#ffa8a8;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1050px){.workspace{grid-template-columns:304px minmax(0,1fr)}.inspector{padding:22px 17px}.transport{right:13px;left:13px;bottom:90px}.action{padding:10px 9px}.action.audio{margin-left:0}.viewhint{left:17px;bottom:184px}.reticle{width:250px;height:250px}}@media(max-width:750px){#app{height:auto;min-height:100dvh;overflow:visible}.topbar{padding:0 15px;height:56px;min-height:56px}.top-right .id{display:none}.workspace{display:flex;flex-direction:column}.inspector{order:2;border:0;overflow:visible;padding:25px 20px}.viewport{order:1;min-height:560px;height:68vh}.reticle{width:220px;height:220px}.reticle span,.reticle small{display:none}.transport{bottom:93px}.action span{display:none}.action.primary span{display:inline}.viewhint{bottom:170px;font-size:8px}.telemetry{gap:6px}.telemetry small{font-size:8px}.telemetry strong{font-size:10px}.bottom{height:auto;padding:12px 15px;flex-wrap:wrap;font-size:8px}}