:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#000;color:#f7f7f2}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#000}#app{position:relative;min-width:320px}#viewer{position:absolute;top:0;right:0;bottom:0;left:0;background:#000}#viewer canvas{display:block}.topbar,.brand-logo,.status,.axis-panel,.help-panel{position:absolute;z-index:10}.brand-logo{top:18px;left:18px;display:block;width:100px;line-height:0;opacity:.65;transition:opacity .2s ease}.brand-logo:hover,.brand-logo:focus-visible{opacity:1}.brand-logo:focus-visible{outline:2px solid #6db3ff;outline-offset:4px;border-radius:4px}.brand-logo img{display:block;width:100px;height:auto}.topbar{top:18px;right:18px}.control-button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border:1px solid rgb(255 255 255 / .26);border-radius:6px;background:#101012b8;color:#fff;font:inherit;font-size:14px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .16s ease,background .16s ease,transform .16s ease}.control-button:hover{border-color:#ffffff7a;background:#242428d1}.control-button:disabled{cursor:wait;opacity:.56}.control-button:active{transform:translateY(1px)}.control-button:focus-visible{outline:2px solid #6db3ff;outline-offset:3px}.control-button.is-active{border-color:#6db3ffe6;background:#1f4e7ac7}.control-button__icon{width:18px;font-size:20px;line-height:1}.status{top:56px;left:18px;max-width:min(460px,calc(100vw - 148px));padding:9px 11px;border:1px solid rgb(255 255 255 / .16);border-radius:6px;background:#0a0a0c9e;color:#ffffffd1;font-size:13px;line-height:1.35;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:opacity .22s ease,transform .22s ease,visibility .22s ease}.status [data-mode=ready]{color:#b8f7c3}.status [data-mode=error]{color:#ffb3a8}.status.is-hidden{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-4px)}.axis-panel{left:18px;bottom:18px;width:128px;height:128px;border:1px solid rgb(255 255 255 / .14);border-radius:6px;background:#08080a6b;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.axis-panel canvas{display:block;width:128px;height:128px}.help-panel{right:18px;bottom:18px;width:min(260px,calc(100vw - 182px));padding:13px 14px;border:1px solid rgb(255 255 255 / .14);border-radius:6px;background:#08080aa3;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.help-panel dl{display:grid;gap:9px;margin:0}.help-panel div{display:grid;grid-template-columns:minmax(86px,1fr) minmax(72px,1fr);gap:12px;align-items:baseline}.help-panel dt,.help-panel dd{margin:0;font-size:13px;line-height:1.25;white-space:nowrap}.help-panel dt{color:#ffffffa3}.help-panel dd{color:#ffffffeb;text-align:right}@media (max-width: 640px){.topbar,.status{top:12px}.brand-logo{top:12px;left:12px}.topbar{right:12px}.status{top:50px;left:12px;max-width:calc(100vw - 134px)}.axis-panel{left:12px;bottom:12px;width:104px;height:104px}.axis-panel canvas{width:104px;height:104px}.help-panel{right:12px;bottom:12px;width:calc(100vw - 144px);max-width:240px;padding:11px 12px}.help-panel div{grid-template-columns:1fr auto;gap:10px}}