:root{--bg: #0f0f12;--surface: #1a1a20;--border: #2a2a32;--text: #e8e8ec;--text-muted: #888;--accent: #00d4aa;--accent-dim: #00a884;--manual1: #00d4aa;--manual2: #7c5cff;--pedals: #ff9f43;--perfect: #00ff88;--good: #ffcc00;--miss: #ff4466}*{box-sizing:border-box}body{margin:0;font-family:DM Sans,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}#root{min-height:100vh}input,button{font:inherit}button{cursor:pointer}.app{min-height:100vh}.app-logo{display:block;height:auto;max-width:100%;object-fit:contain;filter:brightness(0) invert(1)}.app-logo.start-logo{width:200px;max-width:90%;margin:0 auto}.app-logo.play-logo{width:96px;height:96px;flex-shrink:0}.app-logo-global{width:96px;height:auto}.start-screen{max-width:960px;margin:0 auto;padding:2.5rem 1.5rem;display:flex;flex-direction:column;gap:1.75rem;min-height:100vh}.start-hero{text-align:left;padding:.5rem 0 1rem}.start-hero-kicker{margin:0 0 .5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}.start-hero-title{margin:0;font-size:1.4rem;font-weight:650}.start-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.25rem;align-items:flex-start}.mode-picker{display:flex;gap:.5rem;justify-content:center}.start-intro{font-size:.9rem;color:var(--text-muted);line-height:1.5;margin:0 0 1.25rem;max-width:36ch}.start-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.75rem;box-shadow:0 8px 32px #0000004d}.start-side{display:flex;flex-direction:column;gap:.75rem}.start-mode-card{background:radial-gradient(circle at top,#1e1e26,#121218 60%,#0f0f12);border-radius:16px;border:1px solid var(--border);padding:1.25rem 1.5rem}.start-side-title{margin:0 0 .4rem;font-size:.95rem;font-weight:600}.start-side-subtitle{margin:0 0 .9rem;font-size:.8rem;color:var(--text-muted)}.start-actions{display:flex;flex-direction:column;gap:.4rem}.upload-section{display:flex;flex-direction:column;gap:.75rem;padding:0 1rem 1rem}.library-upload-modal.save-modal{max-width:460px}.library-upload-modal--review.save-modal{max-width:480px;color-scheme:dark;background:radial-gradient(circle at top,#1a1a24,#12121a 55%,#0e0e14);border:1px solid rgba(0,212,170,.22);box-shadow:0 0 0 1px #00000059,0 22px 70px #000000bf}.library-upload-modal--review .save-modal-subtitle{max-width:36rem;line-height:1.45}.library-upload-review{display:flex;flex-direction:column;gap:.85rem;padding:0 1rem 1rem}.library-upload-file-hint{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .5rem;font-size:.78rem;color:var(--text-muted)}.library-upload-file-label{flex-shrink:0;text-transform:uppercase;letter-spacing:.06em;font-size:.65rem;font-weight:600;color:#ffffff73}.library-upload-file-name{display:inline-block;padding:.2rem .55rem;border-radius:6px;background:#00d4aa14;border:1px solid rgba(0,212,170,.18);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.76rem;font-weight:500;word-break:break-all}.library-upload-field{display:flex;flex-direction:column;gap:.28rem;margin:0}.library-upload-label{font-size:.72rem;font-weight:500;letter-spacing:.02em;color:#ffffff8c}.library-upload-input,.library-upload-select{width:100%;box-sizing:border-box;padding:.48rem .75rem;border-radius:10px;border:1px solid var(--border);background:radial-gradient(circle at top,#191922,#111116 60%,#0d0d11);color:var(--text);font-size:.85rem;font-family:inherit;line-height:1.35;box-shadow:0 0 0 1px transparent;transition:border-color .15s,box-shadow .15s,background .15s}.library-upload-input::placeholder{color:var(--text-muted)}.library-upload-input:focus,.library-upload-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px #00d4aa59}.library-upload-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding-right:2.25rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300d4aa' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.library-upload-select option{background:#12121a;color:var(--text)}.library-upload-input--num{-moz-appearance:textfield}.library-upload-input--num::-webkit-outer-spin-button,.library-upload-input--num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.library-upload-textarea{resize:vertical;min-height:4rem}.library-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}@media (max-width: 520px){.library-upload-grid{grid-template-columns:1fr}}.library-upload-modal-header{justify-content:flex-start}.library-upload-actions{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:space-between;align-items:center;margin-top:.35rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}.library-upload-actions-start{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.library-upload-actions--pick{justify-content:flex-end;margin-top:.75rem;padding-top:.85rem}.library-upload-btn-secondary{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(0,212,170,.45);background:transparent;color:var(--accent);font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.library-upload-btn-delete{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(255,120,120,.55);background:transparent;color:#f0a0a0;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.library-upload-btn-delete:hover:not(:disabled){background:#ff50501f;border-color:#ff8c8ca6;color:#ffb4b4}.library-upload-btn-delete:disabled{opacity:.5;cursor:not-allowed}.library-upload-btn-secondary:hover:not(:disabled){background:#00d4aa1a;border-color:var(--accent)}.library-upload-btn-secondary:disabled{opacity:.5;cursor:not-allowed}.library-upload-btn-primary.btn-primary{min-width:11rem;padding:.55rem 1.1rem;border-radius:999px;font-weight:700;letter-spacing:.01em}.upload-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:2rem 1.5rem;border:2px dashed var(--border);border-radius:12px;background:#00d4aa0a;cursor:pointer;transition:border-color .2s,background .2s;position:relative}.upload-drop:hover{border-color:var(--accent);background:#00d4aa14}.upload-drop-text{font-size:.95rem;font-weight:600;color:var(--text)}.upload-drop-hint{font-size:.8rem;color:var(--text-muted)}.upload-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%}.chart-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}.chart-meta-text{font-size:.85rem;color:var(--text-muted)}.upload-cta{margin:1.25rem 0 0;font-size:.85rem;color:var(--text-muted);text-align:center}.field input{padding:.5rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);width:100%}.upload-label{display:flex;flex-direction:column;gap:.35rem}.upload-label input[type=file]{font-size:.9rem}.status{font-size:.9rem;color:var(--text-muted);margin:0}.status.error{color:var(--miss)}.btn-primary{padding:.6rem 1.25rem;background:var(--accent);color:var(--bg);border:none;border-radius:10px;font-weight:600;font-size:.9rem;transition:background .15s,transform .1s}.btn-primary:hover:not(:disabled){background:var(--accent-dim)}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-midi{padding:.5rem 1rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px}.btn-midi:hover{border-color:var(--accent);color:var(--accent)}.chart-info{font-size:.9rem;color:var(--text-muted);margin:0}.midi-status{margin:0;font-size:.9rem;color:var(--text-muted)}.midi-status.unsupported{color:var(--miss)}.midi-status.connected{color:var(--perfect)}.midi-status .midi-error{color:var(--miss);margin-bottom:.5rem}.start-footer{margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:1rem}.start-footer .channel-mapping{padding:.75rem 0;background:transparent;border:none;border-radius:0}.channel-mapping{padding:.75rem;background:var(--surface);border-radius:8px;border:1px solid var(--border)}.channel-mapping-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.5rem}.channel-mapping-row{display:flex;gap:1rem;flex-wrap:wrap}.channel-field{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.channel-field select{padding:.35rem .5rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text)}.play-screen{display:flex;flex-direction:column;height:calc(100vh - 56px);min-height:calc(100vh - 56px);overflow:hidden;position:relative}.play-main{display:flex;flex-direction:row;flex:1;min-height:0}.play-main.lick-play-main{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.lick-full-width{width:100%;min-width:0;box-sizing:border-box;padding:.75rem 1.25rem 1.25rem}.share-route-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:2rem 1.25rem;text-align:center;min-height:12rem}.share-route-panel--error{color:var(--text-muted)}.share-route-title{margin:0;font-size:1rem;font-weight:600;color:var(--text)}.share-route-detail{margin:0;font-size:.85rem;max-width:28rem;line-height:1.4}.share-route-home-btn{margin-top:.25rem}.share-route-error-actions{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:.35rem}.share-route-home-btn--secondary{background:transparent!important;border:1px solid var(--border, rgba(255, 255, 255, .12));color:var(--text-muted)}.lick-header-filters{flex:1;display:flex;flex-direction:row;align-items:center;gap:.75rem;min-width:0}.lick-filter-stack{flex:1;display:flex;flex-direction:column;gap:.5rem;min-width:0;order:1}.lick-filters-toggle{display:none;align-items:center;justify-content:space-between;width:100%;gap:.5rem;min-height:44px;padding:.45rem .85rem;border-radius:12px;border:1px solid var(--border);background:radial-gradient(circle at top,#191922,#111116 60%,#0d0d11);color:var(--text);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}.lick-filters-toggle:hover{border-color:#00d4aa73;background:#00d4aa0f}.lick-filters-toggle-label{flex:1;text-align:left}.lick-filters-toggle-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;font-size:.72rem;font-weight:700;background:#00d4aa40;color:var(--accent);border:1px solid rgba(0,212,170,.45)}.lick-filters-toggle-chevron{font-size:.65rem;color:var(--text-muted);flex-shrink:0}.lick-header-filters input,.lick-header-filters select{padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border);background:radial-gradient(circle at top,#191922,#111116 60%,#0d0d11);color:var(--text);font-size:.8rem;box-shadow:0 0 0 1px transparent;transition:border-color .15s,box-shadow .15s,background .15s}.lick-header-filters input::placeholder{color:var(--text-muted)}.lick-header-filters input:focus,.lick-header-filters select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px #00d4aa59}.lick-header-filters .lick-filter-group{flex:1;display:grid;grid-template-columns:minmax(0,1.8fr) repeat(5,minmax(0,1fr));gap:.5rem;align-items:center;min-width:0}.lick-header-actions{display:inline-flex;gap:.4rem;align-items:center;order:2;flex-shrink:0}.lick-filter-group--collapsed-mobile{display:none!important}.lick-store-panel{border-left:1px solid var(--border);background:radial-gradient(circle at top,#1d1d26,#121218 60%,#0f0f12);padding:.75rem;overflow-y:auto}.lick-store{display:flex;flex-direction:column;gap:.75rem;width:100%;min-width:0}.lick-store-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.lick-store-title{margin:0;font-size:.95rem;font-weight:600}.lick-store-subtitle{margin:.1rem 0 0;font-size:.75rem;color:var(--text-muted)}.lick-upload-btn{position:relative;cursor:pointer;background:transparent;color:var(--accent);border:1px solid var(--border);padding-inline:.9rem;padding-block:.35rem;font-size:.78rem;font-weight:600;border-radius:999px;transition:border-color .15s,color .15s,background .15s}.lick-upload-btn:hover{background:#00d4aa14;border-color:var(--accent);color:var(--accent)}.lick-upload-btn input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.lick-record-btn{padding:.35rem .6rem;font-size:.75rem;font-weight:600;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;gap:.25rem}.lick-record-btn span[aria-hidden=true]{color:var(--miss)}.lick-record-btn:hover{border-color:var(--miss);color:var(--text);background:#ff446614}.lick-delete-btn{padding:.3rem .55rem;font-size:.7rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-muted)}.lick-delete-btn:hover{border-color:var(--miss);color:var(--miss);background:#ff44660f}.lick-refresh{border:1px solid var(--border);border-radius:999px;padding:.25rem .6rem;font-size:.7rem;background:transparent;color:var(--text-muted)}.lick-refresh:hover{background:#ffffff0a}.lick-filters{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:.4rem}.lick-filters input,.lick-filters select{padding:.35rem .5rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.75rem}.lick-error,.lick-loading,.lick-empty{font-size:.8rem;color:var(--text-muted)}.lick-error{color:var(--miss)}.lib-list{display:flex;flex-direction:column;gap:.65rem;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.lib-card{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem 1rem;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:.85rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(165deg,#20222af2,#14151afa);box-shadow:0 4px 22px #00000061;transition:border-color .15s,box-shadow .15s}.lib-card:hover{border-color:#00d4aa33;box-shadow:0 6px 28px #00000073}.lib-card-glyph{flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#00d4aa14;border:1px solid rgba(0,212,170,.2);color:var(--accent)}.lib-card-glyph-svg{width:22px;height:22px}.lib-card-body{flex:1 1 220px;min-width:0}.lib-card-title-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem .75rem}.lib-card-title{margin:0;font-size:.95rem;font-weight:650;letter-spacing:-.02em;line-height:1.3;color:var(--text);min-width:0;flex:1 1 12rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.lib-card-title-ext{font-weight:500;font-size:.78em;color:var(--text-muted);margin-left:.2rem;opacity:.9;white-space:nowrap}.lib-card-badges{display:flex;flex-wrap:wrap;gap:.35rem;flex-shrink:0}.lib-pill{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:.22rem .5rem;border-radius:7px;line-height:1}.lib-pill--personal{border:1px solid rgba(0,212,170,.45);color:var(--accent);background:#00d4aa1a}.lib-pill--community{border:1px solid rgba(155,107,204,.45);color:#d4b8f0;background:#9b6bcc1f}.lib-pill--bpm{border:1px solid rgba(255,255,255,.12);color:var(--text-muted);background:#ffffff0a;text-transform:none;letter-spacing:.02em;font-weight:600;font-size:.68rem}.lib-pill--plays{border:1px solid rgba(120,180,255,.35);color:#b8d4ff;background:#508cff1a;text-transform:none;letter-spacing:.02em;font-weight:600;font-size:.62rem}.lib-pill--best{border:1px solid rgba(255,200,120,.4);color:#ffd9a0;background:#ffb4501f;text-transform:none;letter-spacing:.02em;font-weight:700;font-size:.62rem}.lib-meta-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;list-style:none;margin:.4rem 0 0;padding:0}.lib-chip{font-size:.72rem;padding:.2rem .55rem;border-radius:999px;background:#ffffff0d;color:var(--text);border:1px solid rgba(255,255,255,.08)}.lib-chip--dim{color:var(--text-muted);border-color:#ffffff0f}.lib-card-creator{margin:.35rem 0 0;font-size:.78rem;color:var(--text-muted)}.lib-card-creator-label{font-weight:600;color:#ffffff59;margin-right:.25rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}.lib-card-desc{margin:.4rem 0 0;font-size:.78rem;color:var(--text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lib-card-aside{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;margin-left:auto}.lib-card-date{font-size:.72rem;font-weight:600;color:#ffffff61;white-space:nowrap}.lib-card-actions{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem;align-items:center}.lib-preview-btn{padding:.35rem .65rem;font-size:.75rem;font-weight:600;border-radius:999px;border:1px solid var(--border);background:#00000059;color:var(--text-muted);transition:background .15s,border-color .15s,color .15s;cursor:pointer}.lib-preview-btn:hover{background:#00d4aa1f;border-color:var(--accent);color:var(--accent)}.lib-preview-btn--on{background:#00d4aa2e;border-color:var(--accent);color:var(--accent)}.lib-edit-btn{padding:.32rem .55rem;font-size:.7rem;border-radius:999px;border:1px solid rgba(0,212,170,.35);background:transparent;color:var(--accent);cursor:pointer;font-weight:600;transition:border-color .15s,color .15s,background .15s}.lib-edit-btn:hover{border-color:var(--accent);background:#00d4aa14}.lib-delete-btn{padding:.32rem .55rem;font-size:.7rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:border-color .15s,color .15s,background .15s}.lib-delete-btn:hover{border-color:var(--miss);color:var(--miss);background:#ff44660f}.lib-share-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .55rem;font-size:.7rem;border-radius:999px;border:1px solid rgba(120,180,255,.35);background:transparent;color:#b8d4ff;cursor:pointer;font-weight:600;transition:border-color .15s,color .15s,background .15s}.lib-share-btn:hover{border-color:#78b4ff99;background:#508cff1a}.lib-share-btn-icon{width:14px;height:14px;flex-shrink:0}.lib-share-btn--copied{border-color:#00d4aa8c;color:var(--accent);background:#00d4aa1a}.lib-play-btn{padding:.38rem .85rem;font-size:.8rem;font-weight:600}@media (max-width: 720px){.lib-card-aside{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;margin-left:0;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.06)}.lib-card-glyph{flex-basis:44px}}.lick-store-overlay{position:absolute;top:88px;right:12px;width:340px;max-height:calc(100vh - 120px);background:radial-gradient(circle at top,#1d1d26,#121218 60%,#0f0f12);border-radius:16px;border:1px solid var(--border);padding:.6rem;overflow-y:auto;box-shadow:0 18px 60px #000000b3;z-index:30}.flash-toast{position:fixed;bottom:16px;right:16px;padding:.5rem .9rem;border-radius:999px;background:#00d4aa29;border:1px solid rgba(0,212,170,.6);color:var(--text);font-size:.8rem;animation:flashFade 3s forwards}@keyframes flashFade{0%{opacity:0;transform:translateY(4px)}10%{opacity:1;transform:translateY(0)}80%{opacity:1}to{opacity:0;transform:translateY(4px)}}.play-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.35rem 1rem;background:var(--surface);border-bottom:1px solid var(--border);min-height:64px}.play-header-stacked{flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0}.play-header-stacked .play-header-main-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem 1rem;min-height:56px;flex-wrap:wrap}.play-header-subnav.midi-subnav{display:flex;align-items:center;width:100%;padding:.3rem 1rem .4rem;background:var(--bg);border-top:1px solid var(--border);box-sizing:border-box}.midi-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;width:100%;justify-content:flex-start}.midi-toolbar-connect{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.midi-toolbar-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--accent)}.midi-toolbar-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #00d4aaa6}.midi-toolbar-dot--pulse{animation:midi-dot-pulse 1.1s ease-in-out infinite}@keyframes midi-dot-pulse{0%,to{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}.midi-toolbar-status--pending{color:var(--text-muted);font-weight:500}@media (prefers-reduced-motion: reduce){.midi-toolbar-dot--pulse{animation:none;opacity:.85}}.midi-toolbar-error{font-size:.72rem;color:var(--miss);max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-toolbar-channels{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-left:auto}.midi-toolbar-label{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.midi-toolbar-channel-row{display:flex;align-items:center;gap:.45rem}.midi-toolbar-field{display:flex;align-items:center;gap:.2rem;font-size:.8rem}.midi-toolbar-ch-num{font-size:.68rem;color:var(--text-muted);font-variant-numeric:tabular-nums;width:.65rem;text-align:right}.midi-toolbar-field select{padding:.22rem .3rem;font-size:.74rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);min-width:3rem}.btn-midi-compact{padding:.3rem .7rem;font-size:.78rem}.midi-toolbar-unsupported{font-size:.8rem;color:var(--text-muted);width:100%}.play-header-brand{display:flex;align-items:center;gap:.875rem;min-width:0;flex:0 1 auto;padding-left:.5rem}.play-header .play-title{font-size:.95rem;font-weight:600;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}.play-header-score{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.play-header-score .score-display{display:flex;align-items:center;gap:.75rem;padding:.4rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:999px}.play-header-score .score-value{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;min-width:1.5em;text-align:right}.play-header-score .combo-value{font-size:.8rem;font-weight:600;color:var(--accent)}.play-header-score .last-hit{font-size:.75rem;font-weight:600;padding:.2rem .5rem;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}.play-header .playback-controls{flex-shrink:0}.recording-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.recording-metronome{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.25rem .65rem;margin-right:.25rem;border-radius:8px;border:1px solid rgba(0,212,170,.25);background:#00d4aa0f}.recording-metronome-bpm{display:inline-flex;align-items:center;gap:.35rem}.recording-metronome-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.recording-metronome-input{width:3.25rem;padding:.25rem .35rem;font-size:.8rem;font-weight:600;text-align:center;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.recording-metronome-toggle{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none}.recording-metronome-toggle input{accent-color:var(--accent);width:.95rem;height:.95rem}.recording-btn{padding:.4rem .75rem;font-size:.8rem;font-weight:600;background:var(--surface);color:var(--text-muted);border:1px solid var(--border);border-radius:8px;transition:background .2s,color .2s,border-color .2s}.recording-btn:hover:not(:disabled){background:#ffffff0f;color:var(--text)}.recording-btn:disabled{opacity:.5;cursor:not-allowed}.recording-btn-active{background:#f003;color:#f46;border-color:#f46}.recording-btn.export-btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}.recording-meta{font-size:.75rem;color:var(--text-muted);margin-left:.25rem}.recording-export-error{font-size:.75rem;color:var(--miss);margin-left:.5rem}.recording-back-btn{padding:.35rem .6rem;font-size:.75rem;font-weight:600;background:transparent;color:var(--text-muted);border:none;border-radius:6px;margin-left:.5rem;transition:background .2s,color .2s}.recording-back-btn:hover{background:#ffffff14;color:var(--text)}.recording-footer{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem 1rem;background:var(--surface);border-top:1px solid var(--border)}.recording-footer .channel-mapping{margin:0}.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}.playback-controls{display:flex;flex-wrap:nowrap;align-items:center;gap:.65rem;min-height:40px;padding:.35rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}.playback-controls [role=group]{display:flex;align-items:center;gap:.5rem}.playback-controls .transport{flex-shrink:0}.playback-controls .transport-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;color:var(--text-muted);border:none;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}.playback-controls .transport-btn:hover{background:#ffffff14;color:var(--text)}.playback-controls .transport-btn-primary{color:var(--accent)}.playback-controls .transport-btn-primary:hover{color:var(--accent);background:#63b3ed26}.playback-controls .transport-btn svg{display:block;width:20px;height:20px}.playback-controls .seek-song{flex:1 1 160px;min-width:140px;max-width:100%;display:flex;flex-direction:column;align-items:stretch;gap:.25rem}.seek-song-label-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.7rem;color:var(--text-muted)}.seek-song-icon{display:inline-flex;color:var(--accent);flex-shrink:0}.seek-song-icon svg{display:block}.seek-song-title{font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#ffffff8c}.seek-song-times{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);font-size:.75rem}.seek-song-times-sep{color:var(--text-muted);font-weight:500}.seek-song-track{--seek-bar-h: 10px;position:relative;height:var(--seek-bar-h);border-radius:3px;background:#ffffff12;overflow:visible}.seek-song-track:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--song-progress-pct, 0%);max-width:100%;border-radius:3px;background:linear-gradient(90deg,#00d4aa59,#00d4aaa6);pointer-events:none;z-index:0}.playback-controls .seek-input--song{position:absolute;left:0;right:0;top:0;z-index:1;width:100%;height:var(--seek-bar-h);margin:0;padding:0;cursor:pointer;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.seek-input--song:focus{outline:none}.seek-input--song:focus-visible{outline:2px solid rgba(0,212,170,.45);outline-offset:2px;border-radius:4px}.seek-input--song::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:10px;border-radius:2px;background:var(--accent);cursor:grab;box-shadow:0 0 0 2px #0006;border:1px solid rgba(255,255,255,.9);margin-top:0}.seek-input--song::-moz-range-thumb{width:8px;height:10px;border-radius:2px;background:var(--accent);cursor:grab;box-shadow:0 0 0 2px #0006;border:1px solid rgba(255,255,255,.9)}.seek-input--song::-webkit-slider-runnable-track{height:10px;background:transparent}.seek-input--song::-moz-range-track{height:10px;background:transparent}.playback-controls .volume{flex:0 0 148px;width:148px;min-width:148px;max-width:148px;margin-left:auto;display:flex;flex-direction:row;align-items:center;gap:.4rem;flex-shrink:0}.playback-controls .volume-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;flex:0 0 32px;background:transparent;color:var(--text-muted);border:none;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}.playback-controls .volume-btn:hover{background:#ffffff14;color:var(--text)}.playback-controls .volume-btn--muted{color:#ffffff59}.playback-controls .volume-btn svg{display:block;width:20px;height:20px;flex-shrink:0}.playback-controls .volume-input{flex:1 1 0;width:0;min-width:0;max-width:108px;height:6px;margin:0;accent-color:var(--accent);cursor:pointer;border-radius:3px}.playback-controls .playback-end-btn{margin-left:0;flex-shrink:0}.playback-controls .tempo-buttons{flex-shrink:0;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.15rem .45rem;border-radius:8px;border:1px solid rgba(0,212,170,.2);background:#00d4aa0a}.tempo-buttons-heading{display:flex;align-items:center;gap:.35rem}.tempo-buttons-icon{display:inline-flex;color:var(--accent)}.tempo-buttons-icon svg{display:block}.tempo-buttons-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#ffffff8c}.tempo-buttons-row{display:flex;flex-wrap:wrap;gap:.35rem}.tempo-preset-btn{min-width:2.75rem;padding:.28rem .45rem;font-size:.72rem;font-weight:700;border-radius:6px;border:1px solid var(--border);background:#00000040;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}.tempo-preset-btn:hover{border-color:#00d4aa73;color:var(--text)}.tempo-preset-btn--active{border-color:var(--accent);background:#00d4aa2e;color:var(--accent)}.playback-controls .metronome-control{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.15rem .35rem;border-left:1px solid var(--border);margin-left:.1rem}.playback-controls .metronome-control-label{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none}.playback-controls .metronome-control-label input{accent-color:var(--accent);width:.95rem;height:.95rem}.metronome-inline-icon{display:inline-flex;margin-right:.1rem;color:var(--accent);vertical-align:middle}.metronome-inline-icon svg{display:block;width:14px;height:14px}.playback-controls .metronome-control-text{display:inline-flex;align-items:center;color:var(--text)}.metronome-bpm-details{position:relative}.metronome-bpm-details summary{list-style:none}.metronome-bpm-details summary::-webkit-details-marker{display:none}.metronome-bpm-summary{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.15rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.2rem .35rem;border-radius:6px;border:1px solid transparent;transition:border-color .15s,background .15s}.metronome-bpm-summary:hover{border-color:#00d4aa59;background:#00d4aa14}.metronome-bpm-value{font-size:.8rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}.metronome-bpm-suffix{font-size:.72rem;font-weight:600;color:#ffffff8c}.metronome-bpm-badge{margin-left:.25rem;padding:.08rem .35rem;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:4px;background:#00d4aa26;color:var(--accent)}.metronome-bpm-panel{position:absolute;right:0;top:calc(100% + .35rem);z-index:30;display:flex;flex-direction:column;gap:.5rem;min-width:12.5rem;padding:.65rem .75rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 36px #0000008c}.metronome-bpm-select-label{display:flex;flex-direction:column;gap:.35rem;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.metronome-bpm-select{padding:.4rem .5rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.85rem;font-weight:600;max-height:11rem}.metronome-bpm-reset{padding:.45rem .5rem;font-size:.75rem;font-weight:600;border-radius:8px;border:1px solid rgba(0,212,170,.35);background:transparent;color:var(--accent);cursor:pointer;transition:background .15s}.metronome-bpm-reset:hover{background:#00d4aa1a}.playback-controls .end-btn{height:32px;padding:0 .75rem;font-size:.8rem;font-weight:700;background:#00d4aa26;color:var(--accent);border:1px solid rgba(0,212,170,.45);border-radius:8px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.playback-controls .end-btn:hover{background:#00d4aa38;border-color:var(--accent);color:var(--text)}.score-display{display:flex;align-items:center;gap:.5rem}.score-value{font-size:1.1rem;font-weight:700}.combo-value{font-size:1rem;color:var(--accent)}.last-hit{font-size:.9rem;font-weight:600;padding:.2rem .5rem;border-radius:4px;animation:hitPop .3s ease-out}@keyframes hitPop{0%{transform:scale(1.2);opacity:.8}to{transform:scale(1);opacity:1}}.last-hit.perfect{color:var(--perfect)}.last-hit.good{color:var(--good)}.last-hit.miss{color:var(--miss)}.virtual-organ{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;background:var(--surface);border-bottom:1px solid var(--border)}.organ-manual{display:flex;align-items:center;gap:.75rem}.manual-label{font-size:.75rem;color:var(--text-muted);min-width:4rem}.organ-keys{display:flex;position:relative;height:56px}.organ-keys .organ-key{flex-shrink:0;border-radius:0 0 4px 4px;transition:transform .05s,background .05s}.organ-keys .organ-key.white{width:14px;height:56px;background:#f0f0f2;border:1px solid #ccc;margin-right:-1px}.organ-keys .organ-key.black{width:10px;height:36px;background:#2a2a2a;border:1px solid #111;margin-left:-5px;margin-right:-5px;z-index:1;position:relative}.organ-keys .organ-key.pressed{transform:translateY(2px)}.organ-keys .organ-key.white.pressed{background:var(--accent)}.organ-keys .organ-key.black.pressed{background:var(--accent-dim)}.organ-keys .organ-key.target{box-shadow:0 0 0 2px var(--accent)}.organ-keys .organ-key.white.target{background:#00d4aa40}.organ-keys .organ-key.black.target{background:#00d4aa66}.virtual-organ .organ-manual:last-child .organ-keys{height:40px}.virtual-organ .organ-manual:last-child .organ-key.white{height:40px;width:18px}.virtual-organ .organ-manual:last-child .organ-key.black{height:26px;width:12px}.highway-and-piano{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;width:100%}.highway-piano-inner{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;width:100%;padding:0 .75rem;box-sizing:border-box}.highway-piano-inner .highway-wrap{flex:1;min-height:120px;overflow:hidden;position:relative}.highway-and-piano .highway-wrap{flex:1;min-height:120px;overflow:hidden}.highway-wrap{flex:1;min-height:0;position:relative;overflow:hidden}.highway-canvas{width:100%;height:100%;min-height:0;display:block}.piano-strip-wrap{width:100%;flex-shrink:0;display:flex;flex-direction:column;gap:.35rem;padding:.4rem 0 .45rem;margin:0 0 .35rem;background:linear-gradient(180deg,#1c1c1e,#161618);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 20px #0006;box-sizing:border-box}.piano-strip-label{font-size:.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;padding:0 .25rem}.piano-strip{position:relative;width:100%;display:flex;flex-direction:column;gap:0;min-height:52px}.piano-keys{position:relative;width:100%;height:56px;border-radius:0 0 6px 6px;overflow:hidden;background:#0c0c0e;box-shadow:inset 0 -1px #00000059}.piano-keys:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(180deg,#7a3038,#4a1a20 55%,#321216);border-bottom:1px solid rgba(0,0,0,.5);z-index:0;pointer-events:none}.piano-key{top:4px;box-sizing:border-box;border-radius:0 0 4px 4px;transition:background .06s,box-shadow .06s,transform .06s}.piano-key.white{position:relative;height:52px;z-index:1;background:linear-gradient(180deg,#faf7f0,#ebe4d6 48%,#ddd5c8);border:1px solid #9a9488;border-right:1px solid #5c5850;border-top:none;box-shadow:inset 0 1px #fffffff2,inset 1px 0 #ffffff40}.piano-key.white:last-of-type{border-right:1px solid #5c5850}.piano-key.black{position:relative;height:32px;z-index:4;background:linear-gradient(180deg,#2f2f2f,#121212 42%,#0a0a0a 78%,#181818);border:1px solid #020202;border-top:none;border-radius:0 0 3px 3px;box-shadow:inset 2px 0 1px #ffffff38,inset 0 2px 1px #ffffff1f,inset -1px 0 #00000080,0 3px 4px #0000008c,0 1px #000000e6}.piano-key.black:after{content:"";position:absolute;left:2px;right:2px;bottom:3px;height:38%;border-radius:1px;background:linear-gradient(180deg,#282828e6,#000000d9);box-shadow:inset 0 1px #ffffff0f;pointer-events:none}.piano-key-c-label{position:absolute;left:50%;bottom:5px;transform:translate(-50%);font-size:.58rem;font-weight:600;color:#5a554ed9;letter-spacing:.02em;pointer-events:none;-webkit-user-select:none;user-select:none}.piano-key.white.pressed{background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dim) 100%);box-shadow:inset 0 1px #ffffff59}.piano-key.black.pressed{background:linear-gradient(180deg,#1a5c4d,#0a2e26);box-shadow:inset 2px 0 1px #ffffff2e,inset 0 2px 1px #ffffff1a,0 2px 3px #00000073}.piano-key.black.pressed:after{opacity:.35}.piano-key.target{box-shadow:0 0 0 2px var(--accent),0 0 10px #00d4aa59}.piano-key.white.target{background:linear-gradient(180deg,#00d4aa47,#00d4aa1f)}.piano-key.black.target{background:linear-gradient(180deg,#00d4aa73,#00d4aa33);box-shadow:inset 2px 0 1px #fff3,0 0 0 2px var(--accent),0 0 12px #00d4aa66}.piano-key.black.target:after{opacity:.5}.midi-feedback{position:fixed;bottom:8px;right:8px;font-size:.7rem;color:var(--text-muted)}.app-global-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem 1.25rem;background:linear-gradient(90deg,#14141a,#181822);border-bottom:1px solid var(--border)}.app-global-left{display:flex;align-items:center;gap:1rem}.app-global-brand{display:flex;align-items:center;padding:.25rem 0}.app-global-right{display:flex;align-items:center;gap:.75rem}.auth-header-btn{padding:.3rem .8rem;font-size:.8rem;font-weight:600;border-radius:999px;border:1px solid var(--border);background:#0006;color:var(--text-muted);transition:background .15s,border-color .15s,color .15s}.auth-header-btn:hover{background:#00d4aa1f;border-color:var(--accent);color:var(--accent)}.auth-user-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .7rem;border-radius:999px;background:#00d4aa1f;border:1px solid rgba(0,212,170,.4)}.auth-user-name{font-size:.8rem;font-weight:600}.auth-user-logout{border:none;background:transparent;font-size:.75rem;color:var(--text-muted);cursor:pointer}.auth-user-logout:hover{color:var(--miss)}.audio-unlock-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000c7;display:flex;align-items:center;justify-content:center;z-index:45;padding:1rem;box-sizing:border-box}.audio-unlock-modal{width:420px;max-width:100%;background:radial-gradient(circle at top,#22222c,#16161c 55%,#121218);border-radius:16px;border:1px solid var(--border);box-shadow:0 22px 64px #000000bf;padding:1.5rem 1.5rem 1.35rem;text-align:center}.audio-unlock-modal-icon-wrap{width:56px;height:56px;margin:0 auto 1rem;border-radius:50%;background:#00d4aa1a;border:1px solid rgba(0,212,170,.35);display:flex;align-items:center;justify-content:center;color:var(--accent)}.audio-unlock-modal-icon{width:28px;height:28px}.audio-unlock-modal-title{margin:0 0 .65rem;font-size:1.05rem;font-weight:600;color:var(--text);letter-spacing:.02em}.audio-unlock-modal-desc{margin:0 0 1.25rem;font-size:.82rem;line-height:1.45;color:var(--text-muted)}.audio-unlock-piece-name{color:var(--text);font-weight:600}.audio-unlock-modal-actions{display:flex;flex-direction:column;gap:.55rem;align-items:stretch}.audio-unlock-modal-primary{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;width:100%;padding:.55rem 1rem;font-size:.9rem;font-weight:600;border-radius:999px}.audio-unlock-modal-btn-icon{width:16px;height:16px;flex-shrink:0}.audio-unlock-modal-secondary{border:none;background:transparent;color:var(--text-muted);font-size:.8rem;font-weight:600;cursor:pointer;padding:.4rem;border-radius:8px;transition:color .15s,background .15s}.audio-unlock-modal-secondary:hover{color:var(--text);background:#ffffff0d}.welcome-onboarding-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 120% 80% at 50% -20%,rgba(0,212,170,.12),transparent 55%),#050508eb;display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem;box-sizing:border-box;animation:welcome-backdrop-in .45s ease-out both}@keyframes welcome-backdrop-in{0%{opacity:0}to{opacity:1}}.welcome-onboarding-card{width:460px;max-width:100%;max-height:min(92vh,720px);overflow:auto;background:radial-gradient(circle at top,#252530,#16161c 45%,#101014);border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px #00d4aa14,0 28px 80px #000000a6;padding:1.35rem 1.5rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;animation:welcome-card-in .55s cubic-bezier(.22,1,.36,1) both}@keyframes welcome-card-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.welcome-onboarding-brand{display:flex;justify-content:center;padding-bottom:.15rem}.welcome-onboarding-logo{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.95}.welcome-onboarding-body{min-height:0}.welcome-onboarding-pane--enter{animation:welcome-pane-in .45s ease-out both}@keyframes welcome-pane-in{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.welcome-onboarding-title{margin:0 0 .6rem;font-size:1.15rem;font-weight:700;letter-spacing:.02em;text-align:center;color:var(--text)}.welcome-onboarding-lead{margin:0 0 .65rem;font-size:.88rem;line-height:1.55;color:var(--text-muted);text-align:center}.welcome-onboarding-lead strong{color:var(--text);font-weight:600}.welcome-onboarding-hint{margin:0;font-size:.75rem;line-height:1.45;color:var(--text-muted);text-align:center;opacity:.92}.welcome-onboarding-hint strong{color:#b8d4ff;font-weight:600}.welcome-onboarding-hint--last{margin-top:.35rem;font-style:italic;opacity:.85}.welcome-onboarding-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}.welcome-onboarding-list li{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;line-height:1.45;color:var(--text-muted)}.welcome-onboarding-list strong{color:var(--accent);font-weight:600}.welcome-onboarding-list-icon{flex-shrink:0;width:1.1rem;text-align:center;color:#00d4aaa6;font-size:.75rem;line-height:1.5}.welcome-onboarding-dots{display:flex;justify-content:center;gap:.4rem;padding:.15rem 0}.welcome-onboarding-dots span{width:7px;height:7px;border-radius:50%;background:#ffffff26;transition:background .25s,transform .25s}.welcome-onboarding-dots span.is-active{background:var(--accent);transform:scale(1.15)}.welcome-onboarding-actions{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding-top:.25rem}.welcome-onboarding-primary{min-width:7rem;padding:.5rem 1.1rem;font-size:.88rem;font-weight:600;border-radius:999px}.welcome-onboarding-skip,.welcome-onboarding-back{border:none;background:transparent;color:var(--text-muted);font-size:.82rem;font-weight:600;cursor:pointer;padding:.4rem .5rem;border-radius:8px;transition:color .15s,background .15s}.welcome-onboarding-skip:hover,.welcome-onboarding-back:hover{color:var(--text);background:#ffffff0d}.welcome-visual{margin-bottom:1rem}.welcome-visual--s1{display:flex;flex-direction:column;gap:.85rem}.welcome-visual-highway{position:relative;height:88px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#141620f2,#0a0a10);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 24px #00000073}.welcome-visual-highway-lane{position:absolute;left:0;right:0;height:33.33%;border-bottom:1px solid rgba(255,255,255,.04)}.welcome-visual-highway-lane--mid{background:linear-gradient(90deg,transparent,rgba(0,212,170,.06) 50%,transparent)}.welcome-visual-note{position:absolute;width:10px;height:18px;margin-left:-5px;border-radius:3px;top:-20px;background:linear-gradient(180deg,#5ee4c8,var(--accent));box-shadow:0 0 12px #00d4aa73;animation:welcome-note-fall 2.2s ease-in infinite}@keyframes welcome-note-fall{0%{transform:translateY(0) scale(1);opacity:0}8%{opacity:1}to{transform:translateY(110px) scale(.92);opacity:.85}}.welcome-visual-keybed{display:flex;flex-direction:column;gap:.45rem;align-items:center}.welcome-visual-keys{display:flex;gap:3px;padding:.35rem .5rem;background:#00000059;border-radius:8px;border:1px solid rgba(255,255,255,.07)}.welcome-visual-key{width:14px;height:36px;border-radius:3px 3px 5px 5px;background:linear-gradient(180deg,#f2f2f5,#c8cad2);box-shadow:0 2px #6e7080;animation:welcome-key-glow 2.4s ease-in-out infinite}.welcome-visual-key:nth-child(odd){animation-duration:2.7s}@keyframes welcome-key-glow{0%,to{filter:brightness(1);transform:translateY(0)}15%{filter:brightness(1.15);transform:translateY(1px);box-shadow:0 1px #6e7080,0 0 10px #00d4aa59}30%{filter:brightness(1);transform:translateY(0)}}.welcome-visual-labels{display:flex;gap:.75rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#ffffff59}.welcome-visual-labels span:nth-child(1){animation:welcome-label-pop 3s ease-in-out infinite}.welcome-visual-labels span:nth-child(2){animation:welcome-label-pop 3s ease-in-out .4s infinite}.welcome-visual-labels span:nth-child(3){animation:welcome-label-pop 3s ease-in-out .8s infinite}@keyframes welcome-label-pop{0%,to{color:#ffffff59}40%{color:#00d4aabf}}.welcome-visual-midi{display:flex;align-items:center;justify-content:center;gap:.45rem;color:#9ecfff}.welcome-visual-midi-svg{width:52px;height:auto}.welcome-visual-midi-pulse{animation:welcome-midi-blink 1.4s ease-in-out infinite}@keyframes welcome-midi-blink{0%,to{opacity:.5}50%{opacity:1}}.welcome-visual-midi-text{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9ecfff}.welcome-visual--s2{margin-bottom:.85rem}.welcome-visual-features{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap}.welcome-visual-feature{flex:1 1 88px;min-width:82px;max-width:120px;padding:.65rem .45rem;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.07);text-align:center;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);animation:welcome-feature-rise .65s ease-out both}.welcome-visual-feature--a{animation-delay:.05s}.welcome-visual-feature--b{animation-delay:.18s}.welcome-visual-feature--c{animation-delay:.31s}@keyframes welcome-feature-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.welcome-visual-feature-icon-wrap{height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:.35rem;color:var(--accent)}.welcome-visual-feature-icon-wrap--rec{color:#ff6b8a}.welcome-visual-feature-svg{width:32px;height:32px}.welcome-visual-rec-dot{width:14px;height:14px;border-radius:50%;background:#ff445f;box-shadow:0 0 14px #ff445fa6;animation:welcome-rec-pulse 1.5s ease-in-out infinite}@keyframes welcome-rec-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.9}}@media (prefers-reduced-motion: reduce){.welcome-onboarding-backdrop,.welcome-onboarding-card,.welcome-onboarding-pane--enter{animation:none}.welcome-visual-note,.welcome-visual-key,.welcome-visual-labels span,.welcome-visual-midi-pulse,.welcome-visual-feature,.welcome-visual-rec-dot{animation:none!important}}.mobile-desktop-notice{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.25rem;box-sizing:border-box;background:radial-gradient(ellipse 100% 80% at 50% -15%,rgba(0,212,170,.14),transparent 50%),#08080bf7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.mobile-desktop-notice-glow{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 50% 100%,rgba(124,92,255,.08) 0%,transparent 45%)}.mobile-desktop-notice-inner{position:relative;max-width:22rem;width:100%;text-align:center}.mobile-desktop-notice-logo{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.95;margin-bottom:1.25rem}.mobile-desktop-notice-visual{margin:0 auto 1.15rem;color:#00d4aa80}.mobile-desktop-notice-stage{display:flex;flex-direction:column;align-items:center;gap:.65rem}.mobile-desktop-notice-svg{width:min(248px,88vw);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}.mobile-desktop-notice-bezel{color:#00d4aa59}.mobile-desktop-notice-fnote{animation:mobile-desktop-note-fall 2.5s ease-in infinite;transform-box:fill-box;transform-origin:center top}.mobile-desktop-notice-fnote--a{animation-delay:0s}.mobile-desktop-notice-fnote--b{animation-delay:.55s}.mobile-desktop-notice-fnote--c{animation-delay:1.1s}.mobile-desktop-notice-fnote--d{animation-delay:1.65s}@keyframes mobile-desktop-note-fall{0%{transform:translateY(0);opacity:0}10%{opacity:1}to{transform:translateY(76px);opacity:.88}}.mobile-desktop-notice-hitline{stroke:#00d4aa8c;animation:mobile-desktop-hitline 2.2s ease-in-out infinite}@keyframes mobile-desktop-hitline{0%,to{stroke-opacity:.45}50%{stroke-opacity:1}}.mobile-desktop-notice-jack{fill:#00d4aa59;animation:mobile-desktop-jack 2.8s ease-in-out infinite}@keyframes mobile-desktop-jack{0%,to{opacity:.45}50%{opacity:1}}.mobile-desktop-notice-keybed{display:flex;gap:3px;padding:.3rem .45rem;background:#00000059;border-radius:8px;border:1px solid rgba(255,255,255,.08)}.mobile-desktop-notice-key{width:12px;height:32px;border-radius:2px 2px 4px 4px;background:linear-gradient(180deg,#ececf0,#b8bac4);box-shadow:0 2px #5c5e68;animation:mobile-desktop-key 2.6s ease-in-out infinite}.mobile-desktop-notice-key:nth-child(odd){animation-duration:2.9s}@keyframes mobile-desktop-key{0%,to{filter:brightness(1);transform:translateY(0)}18%{filter:brightness(1.12);transform:translateY(1px);box-shadow:0 1px #5c5e68,0 0 10px #00d4aa59}35%{filter:brightness(1);transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.mobile-desktop-notice-fnote,.mobile-desktop-notice-hitline,.mobile-desktop-notice-jack,.mobile-desktop-notice-key{animation:none!important}.mobile-desktop-notice-hitline{stroke-opacity:.75}}.mobile-desktop-notice-title{margin:0 0 .75rem;font-size:1.35rem;font-weight:700;letter-spacing:.02em;line-height:1.25;color:var(--text)}.mobile-desktop-notice-lead{margin:0 0 .75rem;font-size:.9rem;line-height:1.55;color:var(--text-muted)}.mobile-desktop-notice-brand{color:var(--accent);font-weight:700}.mobile-desktop-notice-em{color:var(--text);font-weight:600}.mobile-desktop-notice-hint{margin:0 0 1.35rem;font-size:.78rem;line-height:1.45;color:var(--text-muted);opacity:.92}.mobile-desktop-notice-continue{width:100%;max-width:280px;margin:0 auto;display:block;padding:.55rem 1rem;font-size:.85rem;font-weight:600;color:var(--text-muted);background:#ffffff0f;border:1px solid var(--border);border-radius:999px;transition:color .15s,border-color .15s,background .15s}.mobile-desktop-notice-continue:hover{color:var(--text);border-color:#00d4aa73;background:#00d4aa14}.auth-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:40}.auth-modal{width:360px;max-width:90vw;background:var(--surface);border-radius:16px;border:1px solid var(--border);box-shadow:0 18px 60px #000000b3;padding:1.25rem 1.5rem 1.5rem}.auth-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}.auth-modal-brand{display:flex;align-items:center;gap:.5rem}.auth-logo{width:32px;height:32px}.auth-title{font-size:.9rem;font-weight:600}.auth-close{border:none;background:transparent;color:var(--text-muted);font-size:1.1rem;cursor:pointer}.auth-close:hover{color:var(--text)}.auth-tabs{display:flex;gap:.25rem;margin-bottom:.75rem}.auth-tab{flex:1;padding:.35rem .5rem;font-size:.8rem;font-weight:600;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--text-muted)}.auth-tab-active{background:#00d4aa29;border-color:var(--accent);color:var(--accent)}.auth-form{display:flex;flex-direction:column;gap:.65rem}.auth-field{display:flex;flex-direction:column;gap:.25rem}.auth-field span{font-size:.75rem;color:var(--text-muted)}.auth-field input{padding:.45rem .65rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text)}.auth-error{font-size:.75rem;color:var(--miss)}.auth-submit{margin-top:.25rem;width:100%}.save-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:35}.save-modal{width:420px;max-width:90vw;background:var(--surface);border-radius:16px;border:1px solid var(--border);box-shadow:0 18px 60px #000000b3;padding:1.25rem 1.5rem 1.5rem}.save-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.save-modal-title-wrap{display:flex;flex-direction:column;gap:.15rem}.save-modal-title{font-size:1rem;font-weight:600}.save-modal-subtitle{font-size:.75rem;color:var(--text-muted)}.save-modal-close{border:none;background:transparent;color:var(--text-muted);font-size:1.1rem;cursor:pointer}.save-modal-close:hover{color:var(--text)}.save-modal-form{display:flex;flex-direction:column;gap:.75rem}.save-field{display:flex;flex-direction:column;gap:.25rem}.save-label{font-size:.75rem;color:var(--text-muted)}.save-field input,.save-field textarea,.save-field select{padding:.45rem .65rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.85rem}.save-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.save-checkbox{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted)}.save-checkbox input{width:14px;height:14px}.save-error{font-size:.8rem;color:var(--miss)}.save-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.25rem}.save-secondary-btn{padding:.45rem .9rem;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:.8rem}.save-secondary-btn:hover{background:#ffffff0a;color:var(--text)}@media (max-width: 768px){html{-webkit-text-size-adjust:100%}.app{padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);padding-bottom:env(safe-area-inset-bottom,0)}.app-global-header{padding:.35rem .65rem;flex-wrap:wrap;gap:.35rem}.app-logo-global{width:72px}.auth-header-btn{min-height:44px;padding:.35rem .9rem}.auth-user-pill{max-width:min(100%,70vw)}.auth-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.start-screen{padding:1.25rem .85rem 1.75rem;min-height:100dvh;gap:1.25rem}.start-hero-title{font-size:1.2rem;line-height:1.3}.start-layout{grid-template-columns:1fr;gap:1rem}.start-card{padding:1.25rem}.mode-picker{flex-wrap:wrap}.play-screen{height:calc(100dvh - 52px);min-height:calc(100dvh - 52px)}.play-screen>.play-header:not(.play-header-stacked){flex-direction:column;align-items:stretch;gap:.65rem;padding:.6rem .65rem;min-height:0}.lick-header-left{min-width:0}.lick-header-filters{flex-direction:column;align-items:stretch;flex:1 1 auto;min-width:0;gap:.55rem}.lick-header-actions{order:1;display:flex;width:100%;gap:.5rem}.lick-filter-stack{order:2;width:100%}.lick-filters-toggle{display:flex}.lick-header-filters .lick-filter-group:not(.lick-filter-group--collapsed-mobile){grid-template-columns:1fr 1fr;gap:.45rem}.lick-header-filters .lick-filter-group input[type=text]{grid-column:1 / -1;min-height:44px;border-radius:12px}.lick-header-filters select{min-height:44px;border-radius:10px;font-size:.8rem}.lick-header-actions .lick-upload-btn,.lick-header-actions .lick-record-btn{flex:1;justify-content:center;min-height:44px;padding:.45rem .65rem}.lick-full-width{padding:.45rem .5rem 1rem}.lib-card{padding:.75rem .8rem;border-radius:12px}.lib-card-actions{flex-wrap:wrap;gap:.4rem;justify-content:flex-end}.lib-play-btn,.lib-preview-btn,.lib-share-btn{min-height:40px;min-width:40px}.play-header-stacked .play-header-main-row{padding:.4rem .65rem;gap:.5rem}.play-header-brand{min-width:0}.play-header .play-title{font-size:.85rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.play-header-score{flex-wrap:wrap;justify-content:flex-end;gap:.35rem}.play-header-subnav.midi-subnav{padding:.35rem .65rem .45rem}.midi-toolbar{gap:.45rem}.midi-toolbar-channels{margin-left:0;width:100%;justify-content:flex-start}.highway-piano-inner{padding:0 .35rem}.recording-controls{width:100%;justify-content:flex-start}.recording-btn{min-height:44px}.playback-controls{flex-wrap:wrap;row-gap:.45rem;max-width:100%}.playback-controls .transport-btn{width:40px;height:40px}.flash-toast{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));text-align:center}.save-modal-backdrop .save-modal,.library-upload-modal.save-modal{width:min(100%,calc(100vw - 1.25rem));max-height:min(90dvh,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem));overflow-y:auto}.save-grid{grid-template-columns:1fr}.lick-filters{grid-template-columns:1fr 1fr}.lick-store-overlay{left:8px;right:8px;width:auto;max-width:none;top:auto;bottom:72px;max-height:min(420px,55dvh)}.mobile-desktop-notice{align-items:flex-end;justify-content:center;padding:0;padding-bottom:env(safe-area-inset-bottom,0);background:#050508a6}.mobile-desktop-notice-inner{max-width:100%;border-radius:16px 16px 0 0;padding:1rem 1.1rem 1.25rem;background:linear-gradient(180deg,#1c1c26,#101014);border:1px solid var(--border);border-bottom:none;box-shadow:0 -12px 40px #00000080}.mobile-desktop-notice-visual{display:none}.mobile-desktop-notice-title{font-size:1.1rem}.mobile-desktop-notice-continue{max-width:none;width:100%;min-height:48px}}@media (max-width: 480px){.lick-header-filters .lick-filter-group:not(.lick-filter-group--collapsed-mobile){grid-template-columns:1fr}.lick-filters{grid-template-columns:1fr}}