:root{color-scheme:dark;--bg:#14161a;--panel:#1e2127;--line:#333842;--text:#e8e8ea;--muted:#9aa2ad;--accent:#e08a2b}*{box-sizing:border-box}body,html{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.stage{position:fixed;inset:0}.stage canvas{display:block}.panel{position:fixed;top:16px;left:16px;z-index:2;width:260px;max-height:calc(100vh - 32px);overflow:auto;padding:16px;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);border-radius:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel h1{margin:0 0 2px;font-size:15px;letter-spacing:.01em}.panel .sub{margin:0 0 14px}.panel .sub,label{color:var(--muted);font-size:12px}label{display:block;margin:12px 0 4px}input[type=number]{width:100%;padding:6px 8px;background:var(--bg);color:inherit;border:1px solid var(--line);border-radius:6px;font:inherit}input[type=number]:focus{outline:2px solid var(--accent);outline-offset:-1px}.result{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.result .big{color:var(--text);font-size:14px;font-weight:600;margin-bottom:6px}.result table{width:100%;border-collapse:collapse;margin-top:8px}.result td{padding:2px 0}.result td:last-child{text-align:right;color:var(--text)}.error{margin-top:12px;padding:8px 10px;border:1px solid #7a3b3b;border-radius:6px;background:#2a1c1c;color:#f0c9c9}.error,.hint{font-size:12px}.hint{position:fixed;bottom:14px;left:16px;z-index:2;color:#6b727d}@media (max-width:640px){.panel{width:auto;right:16px;max-height:46vh}.hint{display:none}}