:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0e1016;--panel:#171b26ee;--line:#2a3142;--text:#e8ecf4;--dim:#8a93a8;--accent:#f2c230;font-family:system-ui,sans-serif}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}#app{place-items:center;height:100%;display:grid;position:relative}.stage canvas{display:block}.overlay{background:#0e1016aa;place-items:center;padding:16px;display:grid;position:absolute;inset:0;overflow:auto}.overlay[hidden]{display:none}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;max-width:760px;padding:24px 28px;box-shadow:0 10px 40px #0008}h1{letter-spacing:.02em;margin:0 0 8px;font-size:34px}h2{margin:0 0 12px}.lede{color:var(--dim);margin:0 0 16px;line-height:1.5}.hint{color:var(--dim);font-size:12px}table{border-collapse:collapse;width:100%;margin:8px 0 16px;font-size:14px}th,td{border-bottom:1px solid var(--line);text-align:left;padding:4px 10px}th{color:var(--dim);font-weight:600}td.key,button.key{font-family:ui-monospace,monospace}td.num{text-align:right;font-variant-numeric:tabular-nums}tr.round th{color:var(--accent);padding-top:14px}.buttons{flex-wrap:wrap;gap:10px;display:flex}button{font:inherit;color:var(--text);border:1px solid var(--line);cursor:pointer;background:#232a3a;border-radius:6px;padding:8px 16px}button:hover{background:#2c3548}button.primary{background:var(--accent);color:#1a1a1a;border-color:var(--accent);font-weight:700}button.key{min-width:90px;padding:3px 10px}button.capturing{outline:2px solid var(--accent)}.grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px;margin-bottom:12px;display:grid}.field{gap:4px;display:grid}.field input[type=number]{font:inherit;color:var(--text);border:1px solid var(--line);background:#0e1016;border-radius:4px;width:110px;padding:5px 8px}.field input[type=checkbox]{width:18px;height:18px}.field select{min-width:200px;font:inherit;color:var(--text);border:1px solid var(--line);background:#0e1016;border-radius:4px;justify-self:start;padding:6px 8px}.field.name{margin-bottom:12px}.field.name input{max-width:260px}.hint.bad{color:#ff7a7a}.field input[type=text]{font:inherit;color:var(--text);border:1px solid var(--line);box-sizing:border-box;background:#0e1016;border-radius:4px;width:100%;padding:6px 8px}.menu{box-sizing:border-box;text-align:center;min-width:min(340px,100%)}.menu h1{margin-bottom:24px}.menu-buttons{flex-direction:column;gap:10px;display:flex}button.big{padding:14px 20px;font-size:18px}.rules{max-width:560px}.rules p:not(.hint){margin:0 0 12px;line-height:1.5}.rules strong{color:var(--accent)}h3{margin:8px 0;font-size:16px}.settings .controls{max-width:460px}.advanced{margin:4px 0 16px}.advanced summary{cursor:pointer;color:var(--dim);margin-bottom:8px}.net-hud{color:var(--dim);pointer-events:none;flex-direction:column;align-items:end;gap:4px;font:12px/1.3 ui-monospace,monospace;display:flex;position:absolute;top:8px;right:12px}.net-hud[hidden]{display:none}.net-hud .latency{background:var(--panel);pointer-events:auto;border-radius:4px;flex-direction:column;gap:2px;padding:6px 8px;display:flex}.net-hud .slider{grid-template-columns:70px 120px 36px;align-items:center;gap:6px;display:grid}
