:root{--bg:#0b0b0f;--text:#e8e6e3;--dim:#8a8894;--line:#ffffff1a;--amber:#ffb347;--cyan:#4fd1ff;--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--mono);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}canvas{touch-action:none;display:block}.overlay{background:radial-gradient(#0b0b0fd9,#0b0b0f99 40%,#0b0b0f00 75%);place-items:center;padding:16px;display:grid;position:fixed;inset:0 0 18vh;overflow-y:auto}.overlay[hidden]{display:none}.panel{text-align:center;width:min(640px,100%)}.brand{margin-bottom:22px}#logo{aspect-ratio:420/92;width:min(420px,100%);margin:0 auto 4px;display:block}.wordmark{letter-spacing:-.03em;font-size:clamp(44px,9vw,84px);font-weight:200;line-height:1}.w-piano{color:var(--amber);text-shadow:0 0 28px #ffb34759}.w-pong{color:var(--cyan);text-shadow:0 0 28px #4fd1ff59}.modes{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;display:grid}.mode{text-align:left;color:var(--dim);border-radius:12px;flex-direction:column;gap:6px;padding:14px 16px;display:flex}.mode strong{color:var(--text);font-size:14px;font-weight:500}.mode span{font-size:11px;line-height:1.5}.mode[aria-pressed=true]{border-color:var(--amber);background:#ffb34712}#mode-duo[aria-pressed=true],#mode-clash[aria-pressed=true]{border-color:var(--cyan);background:linear-gradient(90deg,#ffb34712,#4fd1ff12)}@media (width<=480px){.modes{grid-template-columns:1fr}}h1{letter-spacing:-.02em;margin:0;font-size:clamp(36px,7vw,64px);font-weight:300}.tag{color:var(--dim);margin:6px 0 24px;font-size:13px}.rules{margin:0 0 20px;font-size:14px;line-height:1.7}.status{min-height:1.4em;color:var(--dim);margin:0 0 20px;font-size:12px}.status .ok{color:var(--amber)}.opts{flex-wrap:wrap;justify-content:center;gap:28px;margin-bottom:24px;display:flex}.opt{align-items:center;gap:6px;font-size:13px;display:flex}.opt span{color:var(--dim);margin-right:4px}.opt output{min-width:3.5ch}button{font:inherit;color:var(--text);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;padding:6px 12px;transition:border-color .15s,background .15s}button:hover{border-color:#ffffff4d}button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}button.primary{border-color:var(--amber);color:var(--amber);padding:10px 26px;font-size:14px}button.primary:hover{background:#ffb3471a}button:disabled{opacity:.5;cursor:default}.hint,.keys{color:var(--dim);margin:20px 0 0;font-size:11px;line-height:1.8}.keys{margin-top:8px}kbd{font:inherit;border:1px solid var(--line);border-radius:3px;padding:0 4px}.amber{color:var(--amber)}.cyan{color:var(--cyan)}.row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;display:flex}#stats{border-collapse:collapse;margin:0 auto 20px;font-size:12px}#stats td,#stats th{text-align:right;padding:4px 14px;font-weight:400}#stats th{color:var(--dim)}#stats td:first-child{text-align:left;color:var(--dim)}#results.replaying{opacity:.3;background:0 0;transition:opacity .3s}#results.replaying:hover{opacity:1}@media (height<=760px){#logo{width:min(300px,100%)}.wordmark{font-size:clamp(40px,7vw,60px)}.brand{margin-bottom:12px}.tag{margin-bottom:0}.modes,.status,.opts{margin-bottom:12px}.hint{display:none}}.start-row{margin-top:0}.wordmark.small{margin-bottom:6px;font-size:clamp(32px,6vw,52px)}.link-row{gap:8px;margin:16px 0;display:flex}.link-row input{min-width:0;font:inherit;color:var(--text);border:1px solid var(--line);background:#ffffff0a;border-radius:999px;flex:1;padding:8px 14px;font-size:13px}#join .row{margin:8px 0 16px}.emotes{z-index:2;flex-direction:column;gap:6px;display:flex;position:fixed;top:50%;right:12px;transform:translateY(-50%)}.emotes[hidden]{display:none}.emotes button{background:#0b0b0f99;border-radius:12px;padding:7px;font-size:20px;line-height:1}.emotes button:active{transform:scale(.9)}