:root{--void:#030308;--glass:#080810b8;--border:#ffffff14;--text:#eceaf5;--muted:#eceaf580;--violet:#a78bfa;--cyan:#67e8f9;--pink:#f472b6;--play:#34d399;--stop:#fb7185;--font:"Syne", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{background:var(--void);height:100%;color:var(--text);font-family:var(--font)}.shell{flex-direction:column;height:100%;display:flex}.grain{pointer-events:none;opacity:.04;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.ambient{pointer-events:none;z-index:0;background:radial-gradient(60% 40% at 20% 80%,#a78bfa1f,#0000),radial-gradient(50% 35% at 80% 20%,#67e8f914,#0000);position:fixed;inset:0}.home-shell{position:relative}.hero{z-index:2;text-align:center;max-width:560px;margin:auto;padding:2rem;position:relative}.eyebrow{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-size:.7rem}.hero-title{letter-spacing:.12em;background:linear-gradient(135deg, var(--violet), var(--cyan), var(--pink));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-top:.5rem;font-size:clamp(3rem,12vw,4.5rem);font-weight:800}.hero-sub{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.35rem;font-size:.85rem}.hero-copy{color:var(--muted);margin-top:1.25rem;line-height:1.65}.hero-cta{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem;display:flex}.feature-list{font-family:var(--mono);color:var(--muted);margin-top:2rem;font-size:.72rem;line-height:1.9;list-style:none}.status-line{font-family:var(--mono);color:var(--muted);margin-top:1.5rem;font-size:.68rem}.status-line.ok{color:var(--play)}.status-line.warn{color:#fbbf24}.btn{border:1px solid var(--border);color:var(--text);font-family:var(--font);letter-spacing:.04em;cursor:pointer;background:#ffffff0a;border-radius:10px;justify-content:center;align-items:center;padding:.6rem 1.1rem;font-size:.8rem;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{background:#ffffff14}.btn-primary{color:var(--play);background:linear-gradient(135deg,#34d39933,#34d3990f);border-color:#34d39959}.btn-play{color:var(--play);border-color:#34d39959}.btn-stop{color:var(--stop);border-color:#fb718559}.btn-ghost{color:var(--muted)}.topbar{border-bottom:1px solid var(--border);background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.25rem;display:flex}.brand{color:inherit;align-items:baseline;gap:.6rem;text-decoration:none;display:flex}.brand-logo{letter-spacing:.14em;background:linear-gradient(135deg, var(--violet), var(--cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:800}.brand-tag{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-size:.62rem}.topbar-actions{flex-wrap:wrap;gap:.4rem;display:flex}.studio-shell{flex-direction:column;height:100%;display:flex}.studio-body{flex:1;min-height:0;display:flex;overflow:hidden}.studio-main-col{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.studio-sidebar{border-left:1px solid var(--border);background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-direction:column;flex-shrink:0;width:min(280px,35vw);display:flex;overflow:hidden}.studio-sidebar-guest{padding:1.25rem;font-size:.78rem;line-height:1.5}.studio-sidebar-guest a{color:var(--cyan)}.sidebar-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.85rem 1rem;display:flex}.sidebar-head h2{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:.68rem;font-weight:600}.song-save-form{border-bottom:1px solid var(--border);flex-direction:column;gap:.5rem;padding:.75rem 1rem;display:flex}.song-save-form input{border:1px solid var(--border);color:var(--text);font-family:var(--mono);background:#00000059;border-radius:8px;padding:.55rem .65rem;font-size:.78rem}.song-form-error{font-family:var(--mono);color:var(--stop);padding:0 1rem .5rem;font-size:.68rem}.song-list{flex:1;padding:.35rem;list-style:none;overflow-y:auto}.song-list-empty{padding:1rem;font-size:.72rem}.song-item{border:1px solid #0000;border-radius:8px;align-items:stretch;gap:.25rem;margin-bottom:.25rem;display:flex}.song-item.active{background:#a78bfa1a;border-color:#a78bfa73}.song-item-load{color:inherit;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;flex-direction:column;flex:1;align-items:flex-start;gap:.15rem;padding:.55rem .65rem;display:flex}.song-item-load:hover{background:#ffffff0a}.song-item-name{font-size:.82rem;font-weight:600;line-height:1.2}.song-item-date{font-family:var(--mono);color:var(--muted);font-size:.62rem}.song-item-delete{width:1.75rem;height:1.75rem;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;align-self:center;margin-right:.25rem;font-size:1.1rem;line-height:1}.song-item-delete:hover{color:var(--stop);background:#fb71851f}.studio-hint{font-family:var(--mono);color:var(--muted);border-bottom:1px solid var(--border);padding:.45rem 1.25rem;font-size:.62rem}.studio-presets{border-bottom:1px solid var(--border);background:#0003;align-items:center;gap:.75rem;padding:.55rem 1.25rem;display:flex;overflow-x:auto}.presets-label{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex-shrink:0;font-size:.62rem}.preset-list{flex-wrap:wrap;gap:.4rem;display:flex}.preset-chip{border:1px solid var(--border);color:var(--muted);font-family:var(--font);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;padding:.35rem .7rem;font-size:.72rem;font-weight:600;transition:border-color .15s,color .15s,background .15s}.preset-chip:hover{color:var(--text);border-color:#a78bfa66}.preset-chip.active{color:var(--violet);background:#a78bfa1f;border-color:#a78bfa80}.studio-snippets .snippet-chip{cursor:grab;border-style:dashed;font-size:.68rem}.studio-snippets .snippet-chip:active{cursor:grabbing}.snippet-chip.snippet-dragging{opacity:.55}.snippet-chip-custom{border-color:#67e8f959}.snippet-chip-wrap{align-items:center;gap:.1rem;display:inline-flex}.snippet-divider{color:var(--muted);font-family:var(--mono);-webkit-user-select:none;user-select:none;padding:0 .15rem;font-size:.85rem}.snippet-chip-edit,.snippet-chip-delete{width:1.25rem;height:1.25rem;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;font-size:.72rem;line-height:1}.snippet-chip-edit:hover{color:var(--cyan)}.snippet-chip-delete:hover{color:var(--stop)}.snippet-save-panel{border-bottom:1px solid var(--border);background:#a78bfa0f;padding:.75rem 1.25rem}.snippet-save-title{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem;font-size:.72rem;font-weight:600}.snippet-save-form{flex-direction:column;gap:.45rem;display:flex}.snippet-save-form input,.snippet-save-form textarea{border:1px solid var(--border);color:var(--text);font-family:var(--mono);resize:vertical;background:#00000059;border-radius:8px;padding:.5rem .6rem;font-size:.72rem}.snippet-save-actions{justify-content:flex-end;gap:.4rem;margin-top:.15rem;display:flex}.studio-wrap.snippet-drop-active{outline-offset:-2px;background:#a78bfa0a;outline:2px dashed #a78bfa8c}#snippet-bar{flex-wrap:wrap;align-items:center}#snippet-bar #snippet-list{flex:1;min-width:0}#snippet-bar .btn-sm{flex-shrink:0}.studio-tools{border-bottom:1px solid var(--border);background:#00000026;flex-wrap:wrap;align-items:center;gap:.85rem 1rem;padding:.55rem 1.25rem;display:flex}.tempo-control{flex:1;align-items:center;gap:.65rem;min-width:0;display:flex}.tempo-control input[type=range]{flex:1;max-width:220px}.tempo-value{font-family:var(--mono);color:var(--cyan);min-width:4.5rem;font-size:.72rem}.export-control{flex-shrink:0;align-items:center;gap:.45rem;display:flex}.cdaw-select{border:1px solid var(--border);color:var(--text);font-family:var(--mono);cursor:pointer;background:#00000059;border-radius:999px;outline:none;padding:.3rem .55rem;font-size:.65rem;transition:border-color .15s,box-shadow .15s}.cdaw-select:hover{border-color:#a78bfa59}.cdaw-select:focus-visible{border-color:#67e8f973;box-shadow:0 0 0 2px #67e8f926}.studio-tutorial{border-bottom:1px solid var(--border);padding:.5rem 1.25rem;font-size:.75rem}.studio-tutorial summary{cursor:pointer;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);-webkit-user-select:none;user-select:none;font-size:.62rem}.studio-tutorial summary:hover{color:var(--text)}.tutorial-list{color:var(--muted);flex-direction:column;gap:.35rem;margin:.65rem 0 .5rem;padding-left:1.1rem;line-height:1.45;display:flex}.tutorial-list strong{color:var(--text);font-weight:600}.tutorial-more{margin:0;font-size:.68rem}.tutorial-more a{color:var(--cyan)}.song-list-tools{border-bottom:1px solid var(--border);gap:.35rem;padding:0 .75rem .5rem;display:flex}.song-list-tools input,.song-list-tools select{border:1px solid var(--border);min-width:0;color:var(--text);font-family:var(--mono);background:#00000059;border-radius:8px;flex:1;padding:.45rem .55rem;font-size:.68rem}.song-list-tools select{flex:none;max-width:6.5rem}.song-item-actions{align-items:center;gap:.1rem;margin-right:.15rem;display:flex}.song-item-action{width:1.5rem;height:1.5rem;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;font-size:.85rem;line-height:1}.song-item-action:hover{color:var(--cyan);background:#67e8f91a}.btn-dirty{box-shadow:0 0 0 1px #fbbf2473}.save-dirty{color:#fbbf24!important}.studio-wrap{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.studio-hydra-layer{z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;position:absolute;inset:0;overflow:hidden}.studio-wrap.hydra-visible .studio-hydra-layer{opacity:1}.studio-hydra-layer canvas#hydra-canvas{pointer-events:none;filter:saturate(1.1)brightness(.95);width:100%!important;height:100%!important;position:absolute!important;inset:0!important}.studio-editor-stack{z-index:1;flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.studio-wrap.hydra-visible .studio-editor-stack{-webkit-backdrop-filter:blur(22px)saturate(1.2);background:#08081033;border:1px solid #ffffff1a;box-shadow:inset 0 1px #ffffff0f,0 8px 32px #00000040}.studio-wrap.hydra-visible .studio-editor-mount,.studio-wrap.hydra-visible .studio-editor-mount>div,.studio-wrap.hydra-visible .cm-editor,.studio-wrap.hydra-visible .cm-scroller,.studio-wrap.hydra-visible .cm-content,.studio-wrap.hydra-visible .cm-layer{background:0 0!important}.studio-wrap.hydra-visible .cm-gutters{-webkit-backdrop-filter:blur(14px);border-right:1px solid #ffffff12;background:#08081047!important}.studio-wrap.hydra-visible .cm-activeLine,.studio-wrap.hydra-visible .cm-activeLineGutter{background:#67e8f914!important}.studio-wrap.hydra-visible .cm-cursor{border-left-color:var(--cyan)}.studio-main-col.hydra-glass .studio-tools,.studio-main-col.hydra-glass .studio-presets,.studio-main-col.hydra-glass .studio-snippets,.studio-main-col.hydra-glass .studio-hint,.studio-main-col.hydra-glass .studio-tutorial{-webkit-backdrop-filter:blur(14px);background:#0808106b}body>canvas#test-canvas,body>canvas#hydra-canvas{display:none!important}.studio-editor-mount{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.visual-toggles{border:1px solid var(--border);background:#00000047;border-radius:999px;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.35rem .65rem;padding:.3rem .55rem;display:flex}.visual-toggle{font-family:var(--mono);letter-spacing:.04em;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;font-size:.65rem;transition:color .15s;display:inline-flex}.visual-toggle:hover{color:var(--text)}.visual-toggle:has(input:checked){color:var(--text)}.cdaw-range,.studio-wrap .cm-slider input[type=range]{appearance:none;cursor:pointer;background:#ffffff1a;border:none;border-radius:999px;outline:none;width:100%;height:4px}.cdaw-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#a78bfa59 0%,#67e8f940 100%);border-radius:999px;height:4px}.studio-wrap .cm-slider input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#a78bfa59 0%,#67e8f940 100%);border-radius:999px;height:4px}.cdaw-range::-webkit-slider-thumb{appearance:none;background:linear-gradient(145deg, var(--violet), #7c6cf0);border:2px solid #ffffff40;border-radius:50%;width:14px;height:14px;margin-top:-5px;transition:transform .12s,box-shadow .15s;box-shadow:0 0 0 1px #a78bfa4d,0 2px 8px #00000073,0 0 12px #a78bfa59}.studio-wrap .cm-slider input[type=range]::-webkit-slider-thumb{appearance:none;background:linear-gradient(145deg, var(--violet), #7c6cf0);border:2px solid #ffffff40;border-radius:50%;width:14px;height:14px;margin-top:-5px;transition:transform .12s,box-shadow .15s;box-shadow:0 0 0 1px #a78bfa4d,0 2px 8px #00000073,0 0 12px #a78bfa59}.cdaw-range:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 1px #67e8f980,0 2px 10px #00000080,0 0 16px #67e8f973}.studio-wrap .cm-slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 1px #67e8f980,0 2px 10px #00000080,0 0 16px #67e8f973}.cdaw-range::-moz-range-track{background:linear-gradient(90deg,#a78bfa59 0%,#67e8f940 100%);border-radius:999px;height:4px}.studio-wrap .cm-slider input[type=range]::-moz-range-track{background:linear-gradient(90deg,#a78bfa59 0%,#67e8f940 100%);border-radius:999px;height:4px}.cdaw-range::-moz-range-thumb{background:linear-gradient(145deg, var(--violet), #7c6cf0);cursor:pointer;border:2px solid #ffffff40;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 1px #a78bfa4d,0 2px 8px #00000073,0 0 12px #a78bfa59}.studio-wrap .cm-slider input[type=range]::-moz-range-thumb{background:linear-gradient(145deg, var(--violet), #7c6cf0);cursor:pointer;border:2px solid #ffffff40;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 1px #a78bfa4d,0 2px 8px #00000073,0 0 12px #a78bfa59}.cdaw-range:focus-visible,.studio-wrap .cm-slider input[type=range]:focus-visible{outline-offset:4px;outline:2px solid #67e8f973}.cdaw-switch input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.cdaw-switch-ui{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:999px;flex-shrink:0;width:1.85rem;height:1.05rem;transition:background .2s,border-color .2s,box-shadow .2s;position:relative}.cdaw-switch-ui:after{content:"";background:#eceaf559;border-radius:999px;width:calc(50% - 2px);height:calc(100% - 4px);transition:transform .2s cubic-bezier(.34,1.2,.64,1),background .2s,box-shadow .2s;position:absolute;top:2px;left:2px;box-shadow:0 1px 4px #0006}.cdaw-switch input:checked+.cdaw-switch-ui{background:#67e8f91f;border-color:#67e8f959;box-shadow:inset 0 0 12px #67e8f914}.cdaw-switch input:checked+.cdaw-switch-ui:after{background:linear-gradient(145deg, var(--cyan), #4dd4e8);transform:translate(calc(100% + 2px));box-shadow:0 0 10px #67e8f98c,0 1px 4px #00000059}.cdaw-switch input:focus-visible+.cdaw-switch-ui{outline-offset:2px;outline:2px solid #67e8f980}.cdaw-switch-label{line-height:1}.studio-wrap .cm-content canvas{background:#00000059;border-radius:6px;max-width:100%;margin:.35rem 0 .5rem;display:block}.studio-wrap.hydra-visible .cm-content canvas{-webkit-backdrop-filter:blur(10px);background:#0006;border:1px solid #ffffff14}.studio-wrap .cm-slider input[type=range]{cursor:pointer;min-width:64px}.studio-editor-mount strudel-editor{display:none}.studio-editor-mount>div{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.studio-wrap strudel-editor{display:none}.studio-wrap>div{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.studio-wrap .cm-editor{flex:1;height:100%;min-height:0}.studio-wrap .cm-scroller{scrollbar-width:thin;scrollbar-color:#a78bfa8c #ffffff0a;min-height:100%;font-family:var(--mono)!important}.studio-wrap .cm-scroller::-webkit-scrollbar{width:7px;height:7px}.studio-wrap .cm-scroller::-webkit-scrollbar-track{background:#ffffff08;border-radius:999px;margin:3px}.studio-wrap .cm-scroller::-webkit-scrollbar-thumb{background:linear-gradient(#a78bfab3 0%,#7c6cf08c 45%,#67e8f973 100%);border:1.5px solid #0000;border-radius:999px;transition:background .15s,box-shadow .15s;box-shadow:0 0 8px #a78bfa40,inset 0 0 4px #ffffff14}.studio-wrap .cm-scroller::-webkit-scrollbar-thumb:hover{background:linear-gradient(#a78bfae6 0%,#67e8f9a6 100%);box-shadow:0 0 12px #67e8f959,inset 0 0 6px #ffffff1f}.studio-wrap .cm-scroller::-webkit-scrollbar-thumb:active{background:linear-gradient(145deg, var(--violet), var(--cyan));box-shadow:0 0 14px #67e8f980}.studio-wrap .cm-scroller::-webkit-scrollbar-corner{background:0 0}.studio-loading{height:100%;min-height:12rem;font-family:var(--mono);color:var(--muted);justify-content:center;align-items:center;gap:.65rem;font-size:.78rem;display:flex}.studio-loading-dot{background:var(--play);border-radius:50%;width:8px;height:8px;animation:1s ease-in-out infinite pulse-live}.studio-error-banner{font-family:var(--mono);color:var(--stop);background:#fb71851a;border-bottom:1px solid #fb718540;padding:.55rem 1.25rem;font-size:.72rem}.studio-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 1.25rem;font-size:.68rem;display:flex}.muted{color:var(--muted);font-family:var(--mono)}.api-pill{font-family:var(--mono);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:.2rem .55rem}.api-pill.ok{color:var(--play);border-color:#34d39959}.studio-error{font-family:var(--mono);color:var(--stop);padding:2rem 1.25rem;font-size:.8rem}.auth-shell{justify-content:center;align-items:center;min-height:100%;padding:2rem 1rem;display:flex;position:relative}.auth-card{z-index:2;border:1px solid var(--border);background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;width:min(400px,100%);padding:2rem;position:relative}.auth-lead{color:var(--muted);margin-top:.75rem;font-size:.85rem}.auth-tabs{gap:.35rem;margin-top:1.25rem;display:flex}.auth-tab{border:1px solid var(--border);color:var(--muted);font-family:var(--font);cursor:pointer;background:0 0;border-radius:8px;flex:1;padding:.5rem;font-size:.75rem;font-weight:600}.auth-tab.active{color:var(--text);background:#a78bfa1a;border-color:#a78bfa66}.auth-form{flex-direction:column;gap:.85rem;margin-top:1rem;display:flex}.field{color:var(--muted);font-size:.72rem;font-family:var(--mono);flex-direction:column;gap:.35rem;display:flex}.field input{border:1px solid var(--border);color:var(--text);font-family:var(--mono);background:#00000059;border-radius:8px;padding:.65rem .75rem;font-size:.85rem}.field input:focus{border-color:#a78bfa80;outline:none}.auth-error{font-family:var(--mono);color:var(--stop);font-size:.72rem}.btn-block{width:100%}.auth-footer{text-align:center;margin-top:1.25rem;font-size:.75rem}.auth-footer a{color:var(--muted)}.user-chip{border:1px solid var(--border);font-family:var(--mono);color:var(--cyan);border-radius:999px;align-items:center;padding:.45rem .75rem;font-size:.68rem;display:inline-flex}.leaderboard{text-align:left;max-width:280px;margin-top:2rem;margin-left:auto;margin-right:auto}.leaderboard-title{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;font-size:.7rem}.leaderboard-list{font-family:var(--mono);font-size:.75rem;line-height:2;list-style:none}.leaderboard-list li{grid-template-columns:1.5rem 1fr auto;align-items:center;gap:.5rem;display:grid}.lb-rank{color:var(--muted)}.lb-name{color:var(--text)}.lb-wins{color:var(--play)}.battle-hub,.room-shell{flex-direction:column;height:100%;display:flex}.battle-main{flex:1;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-content:start;gap:1rem;padding:1.25rem;display:grid;overflow:auto}.battle-panel{border:1px solid var(--border);background:var(--glass);border-radius:14px;padding:1.25rem}.battle-panel-wide{grid-column:1/-1}.battle-panel h2{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;font-size:.72rem}.battle-form{flex-direction:column;gap:.85rem;display:flex}.field select{border:1px solid var(--border);color:var(--text);font-family:var(--mono);background:#00000059;border-radius:8px;padding:.65rem .75rem;font-size:.85rem}.lobby-list{flex-direction:column;gap:.5rem;list-style:none;display:flex}.lobby-item{border:1px solid var(--border);color:inherit;font-family:var(--mono);border-radius:10px;justify-content:space-between;padding:.65rem .85rem;font-size:.78rem;text-decoration:none;display:flex}.lobby-item:hover{background:#ffffff0a}.lobby-code{color:var(--cyan);letter-spacing:.12em}.lobby-meta{color:var(--muted)}.room-code-display{font-family:var(--mono);align-items:baseline;gap:.5rem;font-size:.75rem;display:flex}.room-code-display strong{letter-spacing:.14em;color:var(--cyan)}.status-pill,.timer-pill{font-family:var(--mono);border:1px solid var(--border);border-radius:999px;padding:.25rem .6rem;font-size:.68rem}.status-lobby{color:var(--cyan)}.status-coding{color:var(--play);border-color:#34d39959}.status-listening{color:var(--violet)}.timer-pill{color:var(--play);border-color:#34d39959}.room-body{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.room-coding{flex:1;min-height:0;display:flex;overflow:hidden}.room-coding-solo .room-coding-main{width:100%}.room-coding-main{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.room-snippets{border-bottom:1px solid var(--border);flex-shrink:0;padding:.4rem 1rem}.room-snippets .preset-list{flex-wrap:wrap}.room-song-sidebar .song-pick-hint{padding:0 1rem .65rem;font-size:.68rem;line-height:1.4}.room-loading{padding:2rem 1.25rem}.room-lobby,.room-phase{max-width:520px;padding:1.25rem}.room-lobby-head h2{margin-bottom:.25rem;font-size:1.1rem}.player-list{flex-direction:column;gap:.45rem;margin:1rem 0;list-style:none;display:flex}.player-row{border:1px solid var(--border);font-family:var(--mono);border-radius:8px;justify-content:space-between;padding:.55rem .75rem;font-size:.75rem;display:flex}.player-row.ready{border-color:#34d39959}.player-ready{color:var(--muted)}.player-row.ready .player-ready{color:var(--play)}.room-actions{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}.room-hint{margin-top:.75rem;font-size:.72rem}.room-editor{flex:1;min-height:0}.battle-hydra-off canvas#hydra-canvas{display:none!important}.battle-visual-hint span{color:var(--muted)}.coding-bar{border-bottom:1px solid var(--border);font-family:var(--mono);justify-content:space-between;align-items:center;padding:.55rem 1.25rem;font-size:.72rem;display:flex}.coding-label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.coding-timer{color:var(--play);font-size:1rem}.submit-section{border-top:1px solid var(--border);padding:1rem 1.25rem}.submit-form{flex-direction:column;gap:.65rem;max-width:360px;display:flex}.submit-done{font-family:var(--mono);color:var(--play);padding:.5rem 0;font-size:.75rem}.track-list{flex-direction:column;gap:.5rem;margin:1rem 0;list-style:none;display:flex}.track-row{border:1px solid var(--border);border-radius:10px;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem .85rem;display:flex}.track-row.voted{border-color:#34d39959}.track-row.track-now{background:#34d39914;border-color:#34d3998c;box-shadow:0 0 24px #34d3991f}.track-row.track-done{opacity:.55}.track-badge{font-family:var(--mono);font-size:.65rem}.playback-bar{background:#34d39914;border:1px solid #34d39959;border-radius:12px;margin:1rem 0;padding:.85rem 1rem}.playback-now{flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem;font-size:.9rem;display:flex}.playback-live{font-family:var(--mono);letter-spacing:.1em;color:var(--stop);font-size:.62rem;animation:1.2s ease-in-out infinite pulse-live}@keyframes pulse-live{0%,to{opacity:1}50%{opacity:.45}}.playback-meta{font-family:var(--mono);color:var(--muted);justify-content:space-between;margin-top:.45rem;font-size:.72rem;display:flex}.playback-timer{color:var(--play);font-size:.85rem}.playback-done{font-family:var(--mono);color:var(--play);margin:0;font-size:.78rem}.track-info{flex-direction:column;gap:.15rem;font-size:.85rem;display:flex}.track-info .muted{font-family:var(--mono);font-size:.68rem}.track-actions{align-items:center;gap:.35rem;display:flex}.btn-sm{padding:.35rem .65rem;font-size:.72rem}.status-voting{color:var(--violet);border-color:#a78bfa59}.status-finished{color:var(--play)}.preview-wrap{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed;overflow:hidden}.room-results{max-width:480px}.winner-line{margin:.75rem 0 1rem;font-size:1.05rem}.results-list{flex-direction:column;gap:.45rem;margin:1rem 0 1.5rem;list-style:none;display:flex}.results-row{font-family:var(--mono);grid-template-columns:1.5rem 1fr auto;align-items:center;gap:.5rem;font-size:.78rem;display:grid}