*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#13131a;color:#f7f8ff;font:14px/1.5 system-ui,sans-serif;overflow:hidden}button,select{font:inherit;border:1px solid #ffffff30;border-radius:22px;min-height:44px;background:#30313b;color:white;padding:9px 18px;cursor:pointer}button:hover{background:#484a59}button:disabled{opacity:.6;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #82b9ff;outline-offset:3px}.primary{background:#e9f0ff;color:#172f54;font-weight:650}.primary:hover{background:white}header{position:absolute;z-index:4;inset:0 0 auto;height:78px;display:flex;align-items:center;justify-content:space-between;padding:15px 26px;background:linear-gradient(#13131adf,#13131a00);pointer-events:none}header>*{pointer-events:auto}header strong{font-size:20px;font-weight:600}header span{display:block;font-size:9px;letter-spacing:1.6px;color:#aab4c9;margin-top:2px}.header-actions{display:flex;gap:8px}#stage,#viewport{position:absolute;inset:0;overflow:hidden}#viewport{display:grid;place-items:center;background:#777b79}canvas{display:block;touch-action:none}.top-note{position:absolute;left:26px;top:94px;display:flex;flex-direction:column;gap:3px;font-size:11px;text-shadow:0 1px 5px #000;pointer-events:none}.top-note span:first-child{font-size:14px}.bottom-note{position:absolute;left:20px;right:20px;bottom:16px;text-align:center;font-size:11px;text-shadow:0 1px 4px #000;pointer-events:none}.bottom-note p{font-size:13px;margin:6px}.bottom-note>span{color:#ecedf2}#stereoLabels{position:absolute;left:0;right:0;bottom:80px;display:flex;justify-content:space-around;font-size:11px;letter-spacing:3px;pointer-events:none}#stereoLabels[hidden]{display:none}aside{position:absolute;z-index:5;right:16px;top:88px;bottom:16px;width:370px;max-width:calc(100% - 32px);overflow:auto;padding:22px;background:#22232bef;backdrop-filter:blur(24px);border:1px solid #ffffff29;border-radius:22px;box-shadow:0 15px 50px #0005}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}h1{font-size:19px;margin:0}h2{font-size:14px;margin-top:28px;border-top:1px solid #ffffff20;padding-top:18px}label{display:block;margin:18px 0 7px;font-size:12px;color:#cdd6e8}select{width:100%;border-radius:10px;font-size:12px}input[type=range]{width:100%;accent-color:#96bcff}output{float:right;color:white}.small{font-size:11px;color:#b2b8ca}dl{font-size:12px}dt{color:#acb5c9;margin-top:12px}dd{margin:2px 0 0}pre{font:11px/1.8 ui-monospace,monospace;white-space:pre-wrap;color:#d1e0fa;background:#13141d;padding:12px;border-radius:10px}a{color:#b1d2ff}ul{padding-left:16px;font-size:11px}li{margin:8px 0}body.xr header,body.xr aside,body.xr .top-note,body.xr .bottom-note,body.xr #stereoLabels{display:none}body.xr #viewport{background:transparent}@media(max-width:700px){header{height:auto;align-items:flex-start;padding:12px}header strong{font-size:16px}header span{max-width:150px;font-size:8px}.header-actions{max-width:210px;flex-wrap:wrap;justify-content:flex-end}.header-actions button{font-size:11px;padding:8px 12px;min-height:38px}.top-note{top:118px;left:16px;font-size:10px}.top-note span:first-child{font-size:12px}}