*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#0a0a0f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#f2f2f2;-webkit-tap-highlight-color:transparent}#root{position:fixed;top:0;right:0;bottom:0;left:0}canvas{touch-action:none;display:block}.hud{position:absolute;z-index:10;pointer-events:none;-webkit-user-select:none;user-select:none}.hud.top-left{top:0;left:0;padding:18px 22px}.title{font-size:13px;letter-spacing:.32em;text-transform:uppercase;opacity:.55;margin-bottom:4px}.formula{font-size:22px;font-weight:600;font-variant-ligatures:none;letter-spacing:.04em}.legend{margin-top:6px;display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;letter-spacing:.05em;color:#f2f2f2c7;white-space:nowrap}.legend .lg-sym{font-size:16px;font-weight:600;color:#fff;margin-right:6px;vertical-align:-1px}.dims{position:absolute;z-index:10;bottom:max(22px,env(safe-area-inset-bottom,0px) + 14px);left:50%;transform:translate(-50%);display:flex;gap:8px;pointer-events:auto;flex-wrap:nowrap;justify-content:center}.dim-btn{border:1px solid rgba(255,255,255,.18);background:#ffffff0a;color:#f2f2f2;padding:9px 14px;border-radius:999px;font-size:12px;letter-spacing:.08em;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .18s ease;white-space:nowrap}.dim-btn:hover{background:#ffffff1a}.dim-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}.dim-btn .num{opacity:.55;margin-right:7px}.controls{position:absolute;z-index:10;top:18px;right:22px;pointer-events:auto;display:flex;gap:8px;align-items:center}.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);background:#ffffff0a;color:#f2f2f2;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease,transform .18s ease;padding:0}.icon-btn:hover{background:#ffffff1a}.icon-btn.on{background:#78c8ff29;border-color:#78c8ff80;color:#cfe8ff}.icon-btn svg{display:block}.icon-btn.open{background:#ffffff1f;border-color:#ffffff4d}.zoom-wrap{position:relative;display:inline-flex}.speed-menu{position:absolute;top:calc(100% + 8px);right:0;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:14px;background:#14141cc7;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 28px #00000073;min-width:64px;animation:speed-pop .14s ease-out}@keyframes speed-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.speed-btn{border:1px solid transparent;background:transparent;color:#f2f2f2;font-size:12px;letter-spacing:.04em;padding:7px 10px;border-radius:999px;cursor:pointer;text-align:center;transition:background .14s ease,border-color .14s ease,color .14s ease;font-variant-numeric:tabular-nums}.speed-btn:hover{background:#ffffff14}.speed-btn.active{background:#78c8ff2e;border-color:#78c8ff8c;color:#cfe8ff}.speed-divider{height:1px;background:#ffffff1a;margin:4px 6px}.chain-btn{font-size:10.5px;letter-spacing:.06em;padding:6px 8px;min-width:64px}.chain-btn.active{background:#b48cff2e;border-color:#b48cff8c;color:#ddd0ff}@media (max-width: 720px){.hud.top-left{padding:14px 16px;max-width:calc(100vw - 100px)}.formula{font-size:17px}.legend{font-size:11px;padding:4px 11px}.legend .lg-sym{font-size:14px}.controls{top:14px;right:14px;gap:6px}.icon-btn{width:34px;height:34px}.icon-btn svg{width:16px;height:16px}.dims{bottom:max(14px,env(safe-area-inset-bottom,0px) + 10px);gap:5px;flex-wrap:nowrap;max-width:calc(100vw - 12px)}.dim-btn{padding:7px 10px;font-size:10px;letter-spacing:.04em}.dim-btn .num{margin-right:4px}}@media (max-width: 380px){.formula{font-size:15px}.legend{font-size:10px}.dims{gap:4px}.dim-btn{padding:6px 8px;font-size:9.5px;letter-spacing:.02em}.dim-btn .num{margin-right:3px}}