@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-sans-latin-ext-400-normal-Q_nF8v4l.woff2) format("woff2"),url(/assets/instrument-sans-latin-ext-400-normal-r32jotim.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-sans-latin-400-normal-DRC__1Mx.woff2) format("woff2"),url(/assets/instrument-sans-latin-400-normal-D1W7dsQl.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/instrument-sans-latin-ext-500-normal-CTEe1bJa.woff2) format("woff2"),url(/assets/instrument-sans-latin-ext-500-normal-CAxz3nsc.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/instrument-sans-latin-500-normal-Dk9ku72i.woff2) format("woff2"),url(/assets/instrument-sans-latin-500-normal-Z6ESRlEs.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/instrument-sans-latin-ext-600-normal-BsaQcF38.woff2) format("woff2"),url(/assets/instrument-sans-latin-ext-600-normal-DMks36a2.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/instrument-sans-latin-600-normal-B7fBEWYG.woff2) format("woff2"),url(/assets/instrument-sans-latin-600-normal-B9e8oLYv.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/instrument-sans-latin-ext-700-normal-ClYbKGw-.woff2) format("woff2"),url(/assets/instrument-sans-latin-ext-700-normal-BQc-7cTM.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/instrument-sans-latin-700-normal-CYfAanHo.woff2) format("woff2"),url(/assets/instrument-sans-latin-700-normal-DfAjL1vF.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Instrument Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-serif-latin-ext-400-normal-C2je3j2s.woff2) format("woff2"),url(/assets/instrument-serif-latin-ext-400-normal-CFCUzsTy.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Instrument Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-serif-latin-400-normal-DnYpCC2O.woff2) format("woff2"),url(/assets/instrument-serif-latin-400-normal-BVbkICAY.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;src:url(/assets/instrument-serif-latin-ext-400-italic-C9HzH3YL.woff2) format("woff2"),url(/assets/instrument-serif-latin-ext-400-italic-D7-lnxEk.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;src:url(/assets/instrument-serif-latin-400-italic-DKMiL14s.woff2) format("woff2"),url(/assets/instrument-serif-latin-400-italic-u__WvvIK.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg: #131110;--panel: #1b1815;--panel-2: #252119;--panel-veil: rgba(27, 24, 21, .86);--border: #37312a;--border-strong: #4c4436;--text: #ece6da;--text-dim: #a89e8d;--accent: #dfa94d;--accent-bright: #eec06a;--accent-ink: #24160a;--accent-veil: rgba(223, 169, 77, .13);--danger: #e26a55;--danger-bright: #ea8069;--danger-ink: #2b0d07;--danger-veil: rgba(226, 106, 85, .14);--success: #86c07c;--success-veil: rgba(134, 192, 124, .14);--warn: #f2d24b;--font: "Instrument Sans", "Segoe UI", system-ui, sans-serif;--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;--text-xs: 11px;--text-sm: 12px;--text-md: 13px;--text-base: 14px;--text-lg: 15px;--text-xl: 17px;--text-2xl: 21px;--text-3xl: 26px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius-xs: 6px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);--shadow: 0 16px 48px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);--focus-ring: 0 0 0 3px rgba(223, 169, 77, .7)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);overflow:hidden}::selection{background:#dfa94d59}button{font-family:inherit;color:inherit}h1,h2,h3{font-weight:600;letter-spacing:-.01em;text-wrap:balance}.icon{flex-shrink:0}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;font-size:var(--text-base);font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .05s ease;text-decoration:none}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.btn.primary:hover{background:var(--accent-bright);border-color:var(--accent-bright)}.btn.ghost{border-color:var(--border);background:#ece6da08}.btn.ghost:hover{background:#ece6da14;border-color:var(--border-strong)}.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--danger-ink);font-weight:600}.btn.danger:hover{background:var(--danger-bright);border-color:var(--danger-bright)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn.primary:disabled:hover{background:var(--accent)}.btn.ghost:disabled:hover{background:#ece6da08;border-color:var(--border)}.btn.danger:disabled:hover{background:var(--danger);border-color:var(--danger)}.btn:focus-visible,.icon-btn:focus-visible,.list-item:focus-visible,.swatch-row:focus-visible,.toast:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn.full{width:100%;justify-content:center}.btn.small{padding:5px 10px;font-size:var(--text-md)}.btn.ghost.active{border-color:var(--danger);background:var(--danger-veil)}.btn.ghost.active:hover{background:#e26a553d;border-color:var(--danger-bright)}.btn.ghost.selected{background:var(--accent-veil);border-color:#dfa94d66;color:var(--accent)}.btn.ghost.selected:hover{background:#dfa94d33}.btn.ghost.kick{color:var(--danger);border-color:#e26a5566}.btn.ghost.kick:hover{background:var(--danger-veil);border-color:var(--danger)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-dim);font-size:var(--text-lg);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-xs);transition:background .15s ease,color .15s ease}.icon-btn:hover{color:var(--text);background:#ece6da12}.icon-btn:active{transform:translateY(1px)}.tooltip-wrap{position:relative;display:inline-flex}.tooltip-wrap.block{display:flex}.tooltip-wrap[data-tip]:after{content:attr(data-tip);position:absolute;top:calc(100% + var(--space-2));right:0;background:var(--panel-2);border:1px solid var(--border);color:var(--text);font-size:var(--text-sm);font-weight:500;line-height:1.4;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transform:translateY(-3px);transition:opacity .15s ease,transform .15s ease;z-index:60}.tooltip-wrap[data-tip]:hover:after,.tooltip-wrap[data-tip]:focus-within:after{opacity:1;transform:translateY(0)}.form{display:flex;flex-direction:column;gap:clamp(8px,1.7vh,16px)}.form label{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-md);color:var(--text-dim);font-weight:500}.form input[type=text],.form input[type=password],.form input[type=email],.form input:not([type]){padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text);font-size:var(--text-base);font-family:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.form input:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}.checkbox{flex-direction:row!important;align-items:center;gap:var(--space-2)!important;font-size:var(--text-base)!important;color:var(--text)!important;cursor:pointer}.checkbox input{width:16px;height:16px;accent-color:var(--accent)}.checkbox input:focus-visible,.mode-option input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::placeholder{color:var(--text-dim);opacity:1}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}input[type=range]:disabled{cursor:not-allowed;opacity:.5}input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-pill)}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.hint{color:var(--text-dim);font-size:var(--text-md);line-height:1.5;text-wrap:pretty}.hint-inline{font-weight:400}.tag{font-size:var(--text-xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);background:var(--accent-veil);color:var(--accent)}.badge{min-width:18px;height:18px;padding:0 6px;margin-left:var(--space-1);border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-ink);font-size:var(--text-xs);font-weight:700;display:inline-flex;align-items:center;justify-content:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0806bf;display:flex;align-items:center;justify-content:center;z-index:100;animation:fade-in .15s ease}.modal{width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);animation:pop-in .18s cubic-bezier(.2,.9,.3,1.15)}.modal:focus{outline:none}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-5) 0}.modal-header h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);letter-spacing:0}.modal-body{padding:var(--space-4) var(--space-5) var(--space-5)}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.96) translateY(8px)}}.toasts{position:fixed;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);z-index:200}.toast{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--panel-2);border:1px solid var(--border-strong);box-shadow:var(--shadow);font-size:var(--text-base);line-height:1.45;text-align:left;max-width:340px;cursor:pointer;animation:toast-in .2s ease;transition:filter .15s ease}.toast:hover{filter:brightness(1.18)}.toast-error{border-color:var(--danger)}.toast-success{border-color:var(--success)}@keyframes toast-in{0%{opacity:0;transform:translate(16px)}}.home-page{height:100%;overflow-y:auto;background:radial-gradient(1100px 480px at 50% -120px,rgba(223,169,77,.07),transparent) var(--bg)}.navbar{display:flex;align-items:center;justify-content:space-between;padding:clamp(10px,2vh,18px) clamp(16px,5vw,56px)}.logo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--text-3xl);font-weight:400;letter-spacing:0}.logo b{color:var(--accent);font-style:italic;font-weight:400}.logo-keys{display:inline-flex;gap:2px;padding:5px 6px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-xs)}.logo-keys i{width:5px;height:18px;border-radius:1.5px;background:var(--text)}.logo-keys i:nth-child(2),.logo-keys i:nth-child(4){background:var(--accent);height:12px;align-self:flex-start}.hero{text-align:center;padding:clamp(12px,4vh,56px) clamp(16px,5vw,56px) clamp(6px,1.5vh,12px);max-width:680px;margin:0 auto}.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,min(5.5vw,7vh),62px);letter-spacing:0;margin-bottom:clamp(8px,1.6vh,14px)}.hero em{font-style:italic;color:var(--accent)}.hero p{color:var(--text-dim);font-size:clamp(var(--text-md),min(1.6vw,2.2vh),var(--text-lg));line-height:1.6;text-wrap:pretty}.home-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,460px));justify-content:center;gap:clamp(14px,2vw,24px);padding:clamp(14px,3vh,32px) clamp(16px,5vw,56px) clamp(10px,2vh,24px)}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(16px,2.6vh,24px) var(--space-5);box-shadow:var(--shadow-sm)}.card h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);letter-spacing:0;margin-bottom:clamp(10px,1.8vh,16px)}.room-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:clamp(120px,26vh,260px);overflow-y:auto;margin-bottom:var(--space-4)}.room-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel-2);transition:border-color .15s ease}.room-row:hover{border-color:var(--border-strong)}.room-row-info{display:flex;flex-direction:column;gap:2px;min-width:0}.room-row .room-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-meta{font-size:var(--text-sm);color:var(--text-dim);line-height:1.4}.join-by-id{display:flex;gap:var(--space-2)}.join-by-id input{flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text);font-family:inherit;font-size:var(--text-base);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.join-by-id input:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}.home-footer{text-align:center;color:var(--text-dim);font-size:var(--text-md);padding:var(--space-2) clamp(16px,5vw,56px) clamp(12px,3vh,40px)}.page-center{height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-5)}.page-center .card{text-align:center;max-width:380px;display:flex;flex-direction:column;gap:var(--space-3);align-items:center}.room-page{height:100%;display:flex;flex-direction:column;overflow:hidden;--scroll-thumb-tint: color-mix( in srgb, var(--scroll-thumb, var(--border)) 55%, var(--text-dim) )}.room-page .soundpack-list,.room-page .chat-messages,.room-page .player-list{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb-tint) transparent}.room-page .soundpack-list::-webkit-scrollbar,.room-page .chat-messages::-webkit-scrollbar,.room-page .player-list::-webkit-scrollbar{width:10px}.room-page .soundpack-list::-webkit-scrollbar-track,.room-page .chat-messages::-webkit-scrollbar-track,.room-page .player-list::-webkit-scrollbar-track{background:transparent}.room-page .soundpack-list::-webkit-scrollbar-thumb,.room-page .chat-messages::-webkit-scrollbar-thumb,.room-page .player-list::-webkit-scrollbar-thumb{background:var(--scroll-thumb-tint);border-radius:var(--radius-pill);border:3px solid transparent;background-clip:padding-box}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:#131110d1;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;flex-wrap:wrap}.topbar-left,.topbar-center,.topbar-right{display:flex;align-items:center;gap:var(--space-2);min-width:0}.room-title{display:flex;flex-direction:column;min-width:0}.room-title .room-name{font-weight:600;font-size:var(--text-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.room-id{font-size:var(--text-xs);color:var(--text-dim)}.status-chip{font-size:var(--text-xs);font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:var(--radius-pill);border:1px solid var(--border);color:var(--text-dim)}.status-chip.ok{color:var(--success);border-color:#86c07c66}.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--text-dim);display:inline-block}.rec-dot.live{background:var(--danger-ink);animation:blink 1.1s infinite}.rec-clock{font-variant-numeric:tabular-nums}@keyframes blink{50%{opacity:.25}}.spinner{width:12px;height:12px;border:2px solid var(--text-dim);border-top-color:transparent;border-radius:50%;display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stage{position:relative;flex:1;min-height:0}.note-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.song-hud{position:absolute;top:var(--space-3);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) 20px;background:var(--panel-veil);border:1px solid var(--border);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);z-index:6;pointer-events:none;animation:fade-in .3s ease;font-variant-numeric:tabular-nums;white-space:nowrap}.song-hud-title{font-size:var(--text-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim)}.song-hud-acc{font-size:var(--text-2xl);font-weight:700;color:var(--accent)}.song-hud-stats{display:flex;gap:var(--space-3);font-size:var(--text-md);font-weight:600}.song-hud-good{color:var(--success)}.song-hud-mid{color:var(--warn)}.song-hud-bad{color:var(--danger)}.song-hud-streak{color:var(--accent-bright)}.audio-hint{position:absolute;top:64px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-2);background:var(--panel);border:1px solid var(--border);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-size:var(--text-md);color:var(--text-dim);animation:fade-in .3s ease;pointer-events:none}.note-display{position:absolute;left:var(--space-4);bottom:var(--space-4);display:flex;align-items:baseline;gap:var(--space-3);pointer-events:none}.note-names{font-size:var(--text-lg);color:var(--text-dim);font-variant-numeric:tabular-nums}.chord-name{font-size:var(--text-3xl);font-weight:700;color:var(--accent)}.chat-drawer{position:absolute;top:var(--space-3);right:var(--space-3);bottom:var(--space-3);width:min(340px,calc(100vw - 24px));background:var(--panel-veil);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;z-index:20;animation:drawer-in .2s ease}@keyframes drawer-in{0%{opacity:0;transform:translate(20px)}}.chat{display:flex;flex-direction:column;flex:1;min-height:0}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.chat-message{display:flex;flex-direction:column;gap:1px;padding:var(--space-2) var(--space-3);background:var(--panel-2);border-radius:var(--radius-md);max-width:90%;align-self:flex-start;word-break:break-word}.chat-message.mine{align-self:flex-end;background:var(--accent-veil)}.chat-message.system{background:transparent;border:1px dashed var(--border);align-self:center;text-align:center}.chat-from{font-size:var(--text-xs);font-weight:700;color:var(--text-dim)}.chat-message.system .chat-from{color:var(--text-dim)}.chat-text{font-size:var(--text-base);line-height:1.4}.chat-input{display:flex;gap:var(--space-2);padding:var(--space-2);border-top:1px solid var(--border)}.chat-input input{flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text);font-family:inherit;font-size:var(--text-base);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.chat-input input:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}.chat-input input:disabled{opacity:.55;cursor:not-allowed}.keyboard{position:relative;height:clamp(120px,21vh,200px);background:#0a0908;border-top:3px solid #8e2030;touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0}.piano-key{position:absolute;top:0;cursor:pointer}.piano-key.white{height:100%;background:linear-gradient(180deg,#e9e5da,#fbf9f2 12%,#f3efe5 85%,#d8d3c6);border:1px solid #b3ac9d;border-top:none;border-radius:0 0 5px 5px;box-shadow:inset 0 -5px 8px #00000014;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}.piano-key.black{height:62%;background:linear-gradient(180deg,#2e2b27,#14120f 20%,#23201b 90%,#000);border-radius:0 0 4px 4px;box-shadow:0 4px 6px #0000008c,inset 0 -3px 3px #ffffff12;z-index:2}.piano-key.active{filter:brightness(1.02);box-shadow:inset 0 -3px 10px #00000047}.piano-key.white.active{border-color:transparent}.key-label{font-size:10px;color:#6e685a;pointer-events:none}.piano-key.active .key-label{color:#0000008c}.piano-key.white.practice-correct{background:linear-gradient(180deg,#d2eec9,#8ed483 40%,#3ca154);border-color:#2b7a41;box-shadow:0 0 16px #86c07c99,inset 0 -4px 8px #0000002e}.piano-key.black.practice-correct{background:linear-gradient(180deg,#86c07c,#33914b 35%,#17462a);box-shadow:0 0 16px #86c07ca6,0 4px 6px #0000008c}.piano-key.white.practice-wrong,.piano-key.white.practice-overheld{background:linear-gradient(180deg,#fbe3dc,#ef9d88 40%,#cf4a32);border-color:#a33322;box-shadow:0 0 16px #e26a5599,inset 0 -4px 8px #0000002e}.piano-key.black.practice-wrong,.piano-key.black.practice-overheld{background:linear-gradient(180deg,#e26a55,#a33322 35%,#541710);box-shadow:0 0 16px #e26a55a6,0 4px 6px #0000008c}.piano-key.practice-overheld{animation:practice-overheld .45s ease-in-out infinite alternate}@keyframes practice-overheld{0%{filter:brightness(.95)}to{filter:brightness(1.4)}}.piano-key.practice-correct .key-label,.piano-key.practice-wrong .key-label,.piano-key.practice-overheld .key-label{color:#0009}.list-item{display:flex;align-items:center;gap:var(--space-2);width:100%;text-align:left;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid transparent;background:transparent;font-size:var(--text-base);cursor:pointer;transition:background .15s ease,border-color .15s ease}.list-item:hover:not(:disabled){background:#ece6da0d}.list-item:active:not(:disabled),.swatch-row:active,.segment:active{transform:translateY(1px)}.list-item.selected{background:var(--accent-veil);border-color:#dfa94d66;font-weight:600}.list-item:disabled{opacity:.55;cursor:not-allowed}.soundpack-list{display:flex;flex-direction:column;gap:2px;max-height:min(430px,60vh);overflow-y:auto}.list-item-spinner{margin-left:auto}.room-settings{display:flex;flex-direction:column;gap:var(--space-4)}.settings-player{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1)}.settings-player-text{display:flex;flex-direction:column;min-width:0;flex:1}.player-list{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow-y:auto}.metronome{display:flex;flex-direction:column;gap:var(--space-4);align-items:center}.metronome-beats{display:flex;gap:var(--space-4)}.beat-dot{width:14px;height:14px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border);transition:transform .08s ease,background .08s ease}.beat-dot.on{background:var(--text);transform:scale(1.35)}.beat-dot.accent.on{background:var(--accent)}.metronome-bpm{display:flex;align-items:baseline;gap:var(--space-2)}.bpm-value{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums}.bpm-label{color:var(--text-dim);font-weight:600}.metronome .row-between{width:100%}.theme-panel{display:flex;flex-direction:column;gap:var(--space-4);align-items:stretch}.theme-panel .react-colorful{width:100%;height:160px}.theme-swatches{display:flex;flex-direction:column;gap:var(--space-1)}.swatch-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid transparent;background:transparent;font-size:var(--text-base);cursor:pointer;text-align:left;transition:background .15s ease,border-color .15s ease}.swatch-row:hover{background:#ece6da0d}.swatch-row.selected{border-color:var(--accent);background:var(--accent-veil)}.swatch{width:22px;height:22px;border-radius:var(--radius-xs);border:1px solid rgba(236,230,218,.25)}.join-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0806cc;display:flex;align-items:center;justify-content:center;z-index:90;padding:var(--space-4);animation:fade-in .2s ease}.join-dialog{width:min(430px,100%);display:flex;flex-direction:column;gap:var(--space-3);max-height:calc(100vh - 32px);overflow-y:auto}.join-nickname{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-md);color:var(--text-dim);font-weight:500}.join-nickname input{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text);font-family:inherit;font-size:var(--text-lg);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.join-nickname input:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}.join-error{background:var(--danger-veil);border:1px solid var(--danger);color:var(--danger-bright);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--text-md)}.avatar-header{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-md);color:var(--text-dim);font-weight:500}.avatar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}.avatar-option{aspect-ratio:1;border-radius:var(--radius-md);border:2px solid transparent;background:var(--panel-2);cursor:pointer;padding:var(--space-2);transition:transform .08s ease,border-color .1s ease}.avatar-option img{width:100%;height:100%;display:block}.avatar-option:hover{transform:scale(1.08)}.avatar-option:active{transform:scale(1)}.avatar-option:focus-visible{outline:none;box-shadow:var(--focus-ring)}.avatar-option.selected{border-color:var(--accent);background:var(--accent-veil)}.player-strip{position:absolute;top:var(--space-3);left:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1);z-index:5;max-height:calc(100% - 100px);overflow-y:auto}.player-chip{display:flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3) 6px var(--space-2);background:var(--panel-veil);border:1px solid var(--border);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s ease,box-shadow .15s ease}.player-chip.playing{border-color:var(--accent);box-shadow:0 0 12px #dfa94d59}.player-avatar{width:30px;height:30px;padding:var(--space-1);background:var(--panel-2);border-radius:50%}.player-chip-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}.player-chip-name{font-size:var(--text-md);font-weight:600;display:flex;align-items:center;gap:var(--space-1);white-space:nowrap}.crown{display:inline-flex;color:var(--accent)}.player-chip-wrap{position:relative;display:flex;flex-direction:column;gap:var(--space-1)}.chip-menu-btn{padding:5px 8px;margin-left:2px}.local-mute-mark{display:inline-flex;color:var(--text-dim)}.mute-menu{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2) var(--space-2);background:var(--panel-veil);border:1px solid var(--border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade-in .12s ease}.mute-menu-hint{flex-basis:100%;font-size:var(--text-xs);color:var(--text-dim);line-height:1.4}.strip-mute-all{align-self:flex-start;background:var(--panel-veil);border-radius:var(--radius-pill)}.song-panel{display:flex;flex-direction:column;gap:var(--space-4)}.song-current{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.song-current-info{display:flex;flex-direction:column;gap:2px;min-width:0}.song-title{display:flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-title .icon{color:var(--accent)}.song-picker,.song-transport,.song-solo,.song-display{display:flex;flex-direction:column;gap:var(--space-2)}.song-transport,.song-solo,.song-display{border-top:1px solid var(--border);padding-top:var(--space-4)}.song-loaded-badge{margin-left:auto;font-size:var(--text-xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);background:var(--accent-veil);color:var(--accent);white-space:nowrap}.song-transport label{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-md);color:var(--text-dim);font-weight:500}.transport-buttons{display:flex;align-items:center;gap:var(--space-2)}.song-time{margin-left:auto;font-size:var(--text-md);color:var(--text-dim);font-variant-numeric:tabular-nums}.solo-stats{display:flex;align-items:baseline;gap:var(--space-4);font-size:var(--text-lg)}.solo-stats b{font-size:var(--text-2xl);color:var(--accent)}.score-chip{font-size:var(--text-xs);font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);background:var(--accent-veil);color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px}.song-summary{display:flex;flex-direction:column;gap:var(--space-1)}.summary-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2);border-radius:var(--radius-md);background:var(--panel-2);border:1px solid transparent}.summary-row.mine{border-color:#dfa94d66}.summary-rank{width:26px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-dim)}.summary-rank.rank-1{color:var(--accent-bright)}.summary-rank.rank-2{color:#c3bdb1}.summary-rank.rank-3{color:#c78d5e}.summary-row .player-avatar{width:24px;height:24px;padding:3px}.summary-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.summary-detail{margin-left:auto;font-size:var(--text-xs);color:var(--text-dim);white-space:nowrap}.summary-accuracy{font-size:var(--text-lg);font-variant-numeric:tabular-nums}.reaction-bar{position:absolute;right:var(--space-4);bottom:var(--space-4);display:flex;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:var(--panel-veil);border:1px solid var(--border);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:5;transition:right .2s ease}.stage.chat-open .reaction-bar{right:calc(min(340px,100vw - 24px) + var(--space-5))}.reaction-btn{border:none;background:transparent;font-size:18px;line-height:1;padding:5px 6px;border-radius:50%;cursor:pointer;transition:transform .08s ease,background .12s ease}.reaction-btn:hover:enabled{transform:scale(1.2);background:#ece6da14}.reaction-btn:active:enabled{transform:scale(1.05)}.reaction-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.reaction-bar.cooldown .reaction-btn{opacity:.45;cursor:default}.floating-reaction{position:absolute;top:-6px;font-size:22px;pointer-events:none;z-index:6;animation:reaction-float 2.6s ease-out forwards}@keyframes reaction-float{0%{opacity:0;transform:translateY(6px) scale(.6)}12%{opacity:1;transform:translateY(-6px) scale(1.15)}70%{opacity:1}to{opacity:0;transform:translateY(-46px) scale(1)}}.player-chip-instrument{font-size:var(--text-xs);color:var(--text-dim);white-space:nowrap}.mode-picker{display:flex;flex-direction:column;gap:var(--space-1)}.mode-picker-label{font-size:var(--text-md);color:var(--text-dim);font-weight:500}.mode-option{display:flex;align-items:flex-start;gap:var(--space-2);padding:clamp(7px,1.4vh,10px) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--panel-2);cursor:pointer;transition:border-color .15s ease,background .15s ease}.mode-option:hover{border-color:var(--border-strong);background:color-mix(in srgb,var(--panel-2) 94%,var(--text))}.mode-option:has(input:focus-visible){box-shadow:var(--focus-ring)}.mode-option.selected{border-color:var(--accent);background:var(--accent-veil)}.mode-option input{margin-top:3px;accent-color:var(--accent)}.mode-option span{display:flex;flex-direction:column;gap:2px}.mode-option b{font-size:var(--text-base)}.mode-option small{font-size:var(--text-sm);color:var(--text-dim);line-height:1.4}.segmented{display:flex;gap:var(--space-1);padding:3px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel-2)}.segment{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border:1px solid transparent;border-radius:var(--radius-xs);background:transparent;font-size:var(--text-md);font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.segment:hover{background:#ece6da0f}.segment:focus-visible{outline:none;box-shadow:var(--focus-ring)}.segment.selected{background:var(--accent-veil);border-color:#dfa94d66;color:var(--accent)}.room-row .lock{display:inline-flex;color:var(--text-dim);vertical-align:-1px}.soundpack-panel{display:flex;flex-direction:column;gap:var(--space-2)}.center-text{text-align:center}@media(max-width:760px){.topbar{padding:var(--space-1) var(--space-2)}.topbar .btn{padding:var(--space-1) var(--space-2);font-size:var(--text-sm)}.room-title .room-name{max-width:110px}.chord-name{font-size:var(--text-2xl)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.spinner{animation-duration:1.2s!important;animation-iteration-count:infinite!important}.floating-reaction{animation:none!important;opacity:1;transform:translateY(-12px)}}