:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;box-sizing:border-box;border-inline:0;flex-direction:column;width:100%;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.difficulty-badge{white-space:nowrap;min-height:25px;color:var(--difficulty-color);background:var(--difficulty-bg);border-radius:9px;align-items:center;gap:6px;padding:3px 10px;font-size:13px;font-weight:700;line-height:1.2;display:inline-flex}.difficulty-badge__dot{background:var(--difficulty-color);border-radius:50%;flex:none;width:8px;height:8px}.difficulty-filter{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.difficulty-filter__label{color:#64748b;margin-right:4px;font-size:13px;font-weight:700}.difficulty-filter__select{min-width:148px;min-height:38px;font:inherit;color:#334155;cursor:pointer;background:#fff;border:1px solid #e4e8f2;border-radius:10px;padding:0 32px 0 12px;font-size:13px;font-weight:700;transition:background .2s,border-color .2s}.difficulty-filter__select:hover{border-color:#f97316}.difficulty-filter__select:focus-visible{outline-offset:2px;outline:3px solid #fbbf2459}.song-tile{--tile-accent:#93c5fd;--tile-accent-soft:#dbeafe;--tile-blue:#2563eb;--tile-blue-dark:#1d4ed8;--tile-navy:#0f172a;background:#fff;border:1px solid #eef1f6;border-radius:22px;flex-direction:column;gap:12px;min-width:0;padding:12px 12px 12px 18px;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 6px 20px #0f172a0d;container-type:inline-size}.song-tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px #2563eb1f}.song-tile__art{position:relative}.song-tile__art:before{content:"";background:var(--tile-accent);opacity:.55;border-radius:14px;transition:transform .25s;position:absolute;inset:6% 3% 0 -8px;transform:rotate(-4deg)}.song-tile:hover .song-tile__art:before{transform:rotate(-7deg)translate(-2px)}.song-tile__cover{aspect-ratio:1;background:var(--tile-accent-soft);border-radius:16px;position:relative;overflow:hidden;box-shadow:0 8px 18px #0f172a2e}.song-tile__cover img{object-fit:cover;width:100%;height:100%;display:block}.song-tile__placeholder{color:#ffffffe6;background:linear-gradient(145deg, var(--tile-accent) 0%, var(--tile-blue) 100%);place-items:center;width:100%;height:100%;font-size:3rem;display:grid}.song-tile__top{justify-content:space-between;align-items:flex-start;gap:6px;display:flex;position:absolute;top:10px;left:10px;right:10px}.song-tile__top-right{gap:6px;margin-left:auto;display:flex}.song-tile__pill,.song-tile .difficulty-badge{font-variant-numeric:tabular-nums;background:#ffffffeb;border-radius:999px;min-height:0;padding:4px 9px;font-size:12px;font-weight:700;box-shadow:0 2px 8px #0f172a26}.song-tile__pill{color:#334155}.song-tile__pill--new{color:#fff;background:var(--tile-blue)}.song-tile__caption{color:#fff;background:linear-gradient(#0000 0%,#0f172a99 45%,#0f172aeb 100%);padding:42px 14px 12px;position:absolute;bottom:0;left:0;right:0}.song-tile__title,.song-tile__subtitle{white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.song-tile__title{font-size:16px;font-weight:800;line-height:1.25}.song-tile__subtitle{color:#ffffffbf;margin-top:2px;font-size:12px}.song-tile__best{font-variant-numeric:tabular-nums;align-items:center;gap:6px;margin:6px 0 0;font-size:12px;font-weight:800;display:flex}.song-tile__best .is-perfect{color:#93c5fd}.song-tile__stars{gap:1px;display:inline-flex}.song-tile__stars svg{fill:#ffffff59}.song-tile__stars svg.is-on{fill:#fbbf24}.song-tile__delete{color:#fff;cursor:pointer;background:#ffffff2e;border:0;border-radius:50%;place-items:center;width:28px;height:28px;padding:0;font:700 18px/1 system-ui,sans-serif;display:grid;position:absolute;bottom:12px;right:10px}.song-tile__delete:hover{background:#dc2626}.song-tile__actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.song-tile__btn{height:36px;font:inherit;white-space:nowrap;cursor:pointer;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 8px;font-size:13px;font-weight:700;transition:background .2s,border-color .2s;display:inline-flex}.song-tile__btn:focus-visible{outline-offset:2px;outline:3px solid #93c5fd}.song-tile__btn--practice{color:#fff;background:var(--tile-blue)}.song-tile__btn--practice:hover:not(:disabled){background:var(--tile-blue-dark)}.song-tile__btn--listen{color:var(--tile-blue-dark);background:#eff6ff;border-color:#dbeafe}.song-tile__btn--listen:hover:not(:disabled){border-color:#93c5fd}.song-tile__btn:disabled{opacity:.4;cursor:not-allowed}@media (width<=700px){.song-tile{gap:10px;padding:10px 10px 10px 14px}}@container (width<=210px){.song-tile__actions{gap:6px}.song-tile__btn{height:32px;padding:0 4px;font-size:11.5px}.song-tile__icon{display:none}.song-tile__title{font-size:14px}.song-tile__caption{padding:30px 10px 9px}.song-tile__top{top:8px;left:8px;right:8px}.song-tile__pill,.song-tile .difficulty-badge{padding:3px 7px;font-size:11px}.song-tile .difficulty-badge__dot{width:6px;height:6px}}@media (prefers-reduced-motion:reduce){.song-tile,.song-tile__art:before,.song-tile__btn{transition:none}.song-tile:hover{transform:none}}.practice-player-bar{-webkit-backdrop-filter:blur(18px);color:#f8fafc;z-index:9999;background:#111214f5;border:1px solid #ffffff1f;border-radius:24px;flex-direction:column;gap:12px;width:calc(100% - 48px);max-width:1080px;padding:16px 24px;animation:.35s cubic-bezier(.16,1,.3,1) forwards slideUpPractice;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 20px 45px -10px #0006,0 0 30px #f9731633}@keyframes slideUpPractice{0%{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%)}}.practice-player-top{justify-content:space-between;align-items:center;gap:18px;display:flex}.practice-song-info{align-items:center;gap:14px;min-width:220px;max-width:30%;display:flex}.practice-song-cover{object-fit:cover;border:1px solid #ffffff26;border-radius:12px;width:50px;height:50px;box-shadow:0 4px 12px #0000004d}.practice-song-details{flex-direction:column;display:flex;overflow:hidden}.practice-badge{text-transform:uppercase;letter-spacing:.5px;color:#fbbf24;align-items:center;gap:5px;margin-bottom:2px;font-size:11px;font-weight:700;display:inline-flex}.practice-badge-dot{background-color:#34d399;border-radius:50%;width:7px;height:7px;box-shadow:0 0 8px #34d399}.practice-badge-dot.paused{box-shadow:none;background-color:#f59e0b}.practice-song-title{white-space:nowrap;text-overflow:ellipsis;color:#fff;margin:0;font-size:15px;font-weight:700;overflow:hidden}.practice-song-artist{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;overflow:hidden}.practice-center-controls{align-items:center;gap:12px;display:flex}.practice-btn{color:#e2e8f0;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-family:inherit;font-size:14px;transition:all .2s;display:inline-flex}.practice-btn:hover{color:#fff;background:#ffffff29;transform:translateY(-1px)}.practice-btn:active{transform:translateY(0)}.practice-btn.active{color:#fff;background:#6366f1;border-color:#818cf8;box-shadow:0 0 14px #6366f180}.practice-play-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#fbbf24,#ef4444);border:none;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;font-size:18px;transition:all .2s;display:flex;box-shadow:0 4px 18px #f9731673}.practice-play-btn:hover{transform:scale(1.06);box-shadow:0 6px 22px #6366f199}.practice-speed-selector{background:#ffffff0f;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:2px;padding:3px;display:flex}.speed-option-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:5px 9px;font-family:inherit;font-size:12px;font-weight:600;transition:all .15s}.speed-option-btn:hover{color:#f1f5f9}.speed-option-btn.active{color:#fff;background:#ffffff2e}.practice-right-controls{align-items:center;gap:16px;display:flex}.practice-volume-box{align-items:center;gap:8px;display:flex}.practice-volume-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:999px;outline:none;width:80px;height:5px}.practice-volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#818cf8;border-radius:50%;width:14px;height:14px;box-shadow:0 0 6px #818cf8cc}.practice-close-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;transition:all .2s;display:flex}.practice-close-btn:hover{color:#ef4444;background:#ef44441f}.practice-timeline-container{align-items:center;gap:12px;width:100%;display:flex}.practice-time{font-variant-numeric:tabular-nums;color:#94a3b8;min-width:38px;font-size:11px}.practice-time.current{text-align:right;color:#cbd5e1}.practice-timeline-slider{appearance:none;cursor:pointer;background:#ffffff26;border-radius:999px;outline:none;flex:1;height:6px;position:relative}.practice-timeline-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .1s;box-shadow:0 2px 8px #0006}.practice-timeline-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.practice-error-banner{color:#fca5a5;background:#ef444433;border:1px solid #ef444466;border-radius:8px;justify-content:space-between;align-items:center;padding:6px 12px;font-size:12px;display:flex}@media (width<=860px){.practice-player-bar{width:calc(100% - 24px);padding:12px 16px;bottom:12px}.practice-player-top{flex-wrap:wrap;gap:12px}.practice-song-info{min-width:100%;max-width:100%}.practice-center-controls{flex:1;justify-content:space-between}}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:#0b1026;background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.songs-page{background:radial-gradient(circle at 18% 10%,#e3ecff38,#0000 34%),#fff;min-height:100vh;padding:clamp(16px,2vw,28px)}.container{width:min(100%,1500px);margin:0 auto}.brand{letter-spacing:-.7px;align-items:center;gap:10px;margin-bottom:clamp(22px,3vw,34px);font-size:clamp(22px,2vw,29px);font-weight:800;display:inline-flex}.brand-mark{flex-shrink:0;align-items:center;gap:4px;height:28px;display:flex}.brand-mark span{background:#0b1026;border-radius:999px;width:3px;display:block}.brand-mark span:first-child{height:14px}.brand-mark span:nth-child(2){height:24px}.brand-mark span:nth-child(3){height:31px}.brand-mark span:nth-child(4){height:20px}.brand-mark span:nth-child(5){height:12px}.top-row{grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);align-items:center;gap:clamp(20px,3vw,42px);margin-bottom:18px;display:grid}h1{letter-spacing:-1.2px;margin:0 0 6px;font-size:clamp(30px,3vw,46px);line-height:1.05}.subtitle{color:#7180b0;margin:0;font-size:clamp(14px,1.2vw,17px);line-height:1.45}.search-box{background:#fffffff7;border:1px solid #e5e9f2;border-radius:14px;align-items:center;gap:13px;width:100%;min-height:50px;padding:0 17px;display:flex;box-shadow:0 6px 20px #1e2d5a0a}.search-icon{border:2px solid #8392c0;border-radius:50%;flex:none;width:18px;height:18px;position:relative}.search-icon:after{content:"";background:#8392c0;border-radius:999px;width:7px;height:2px;position:absolute;bottom:-3px;right:-6px;transform:rotate(45deg)}.search-box input{color:#17203c;background:0 0;border:0;outline:0;width:100%;min-width:0;font-size:14px}.search-box input::placeholder{color:#7e8db9}.filters{scrollbar-width:none;gap:9px;margin-bottom:18px;padding-bottom:2px;display:flex;overflow-x:auto}.filters::-webkit-scrollbar{display:none}.filter-btn{color:#0f1630;cursor:pointer;background:#fff;border:1px solid #e4e8f2;border-radius:13px;flex:none;min-height:42px;padding:0 18px;font-size:13px;transition:background .2s,border-color .2s,transform .2s}.filter-btn:hover{border-color:#cbd8f7;transform:translateY(-1px)}.filter-btn.active{color:#0d69ff;background:#eaf3ff;border-color:#0000;font-weight:700}.songs-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;padding-bottom:80px;display:grid}.song-card{background:#fffffffa;border:1px solid #edf0f5;border-radius:15px;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0;min-height:108px;padding:9px;transition:transform .2s,box-shadow .2s;display:grid;box-shadow:0 5px 18px #1c264e09}.song-card:hover{transform:translateY(-1px);box-shadow:0 8px 24px #1c264e0f}.song-cover{aspect-ratio:1;object-fit:cover;background:#eef2f9;border-radius:10px;width:88px}.song-main{flex-direction:column;justify-content:center;min-width:0;display:flex}.song-title{white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px;font-size:clamp(14px,1vw,16px);font-weight:800;line-height:1.25;overflow:hidden}.artist{color:#7381ad;white-space:nowrap;text-overflow:ellipsis;margin:0 0 7px;font-size:12.5px;line-height:1.3;overflow:hidden}.song-meta{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.badge{border-radius:8px;align-items:center;min-height:21px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge.beginner{color:#13a06a;background:#dff8ed}.badge.intermediate{color:#d98200;background:#fff2d2}.badge.classical{color:#7836d9;background:#efe4ff}.duration{color:#6879ab;align-items:center;gap:6px;font-size:12px;display:inline-flex}.clock{border:1.5px solid #8190bd;border-radius:50%;flex:none;width:14px;height:14px;position:relative}.clock:before,.clock:after{content:"";transform-origin:bottom;background:#8190bd;border-radius:999px;width:1.5px;position:absolute;left:5.5px}.clock:before{height:4px;top:2px}.clock:after{height:3px;top:5px;transform:rotate(125deg)}.song-actions{flex-direction:column;justify-content:space-between;align-self:stretch;align-items:flex-end;gap:8px;padding:1px 2px 1px 0;display:flex}.favorite-btn{color:#6f82b7;cursor:pointer;background:0 0;border:0;place-items:center;width:28px;height:28px;padding:0;font-size:23px;line-height:1;display:grid}.favorite-btn.active{color:#3579ff}.play-btn{color:#0d6dff;cursor:pointer;background:#edf5ff;border:0;border-radius:9px;justify-content:center;align-items:center;gap:8px;min-width:88px;height:36px;padding:0 13px;font-size:13px;font-weight:700;transition:background .2s,transform .2s;display:inline-flex}.play-btn:hover{background:#deedff;transform:translateY(-1px)}.action-buttons-group{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.practice-btn-card{color:#4338ca;cursor:pointer;background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;justify-content:center;align-items:center;gap:6px;min-width:118px;height:36px;font-size:13px;font-weight:700;transition:all .2s;display:inline-flex}.practice-btn-card:hover{background:#e0e7ff;border-color:#818cf8;transform:translateY(-1px);box-shadow:0 4px 12px #4f46e526}.practice-btn-card:disabled,.practice-btn-card:disabled:hover{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.library-tabs{background:#eef2f8;border-radius:14px;gap:4px;margin-bottom:18px;padding:4px;display:inline-flex}.library-tab{color:#64748b;cursor:pointer;background:0 0;border:0;border-radius:11px;align-items:center;gap:8px;padding:10px 18px;font-size:15px;font-weight:700;transition:background .2s,color .2s;display:inline-flex}.library-tab:hover{color:#1d4ed8}.library-tab:focus-visible{outline-offset:2px;outline:3px solid #93c5fd}.library-tab.is-active{color:#1d4ed8;background:#fff;box-shadow:0 2px 8px #0f172a14}.library-tab__short{display:none}.library-tab__count{color:#fff;background:#2563eb;border-radius:999px;min-width:22px;padding:1px 7px;font-size:12px}.library-toolbar{align-items:flex-start;gap:14px;margin-bottom:14px;display:flex}.library-toolbar .filters{flex-wrap:wrap;flex:auto;margin-bottom:0}.library-toolbar__actions{gap:10px;margin-left:auto;display:flex}.library-toolbar__difficulty{flex:none;margin-left:auto}.library-toolbar__hint{color:#64748b;flex:auto;align-self:center;margin:0;font-size:15px}@media (width<=650px){.library-tabs{scrollbar-width:none;display:flex;overflow-x:auto}.library-tabs::-webkit-scrollbar{display:none}.library-tab{white-space:nowrap;flex:1 0 auto;justify-content:center;gap:6px;padding:9px 10px;font-size:14px}.library-tab__count{min-width:20px;padding:1px 6px;font-size:11px}.library-tab__long{display:none}.library-tab__short{display:inline}.library-toolbar{flex-direction:column;align-items:stretch}.library-toolbar__actions{margin-left:0}.library-toolbar__actions>button{flex:1 1 0}.library-toolbar__difficulty{align-self:flex-start;margin-left:0}}.library-section{margin-bottom:30px}.library-section__head{flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:14px;display:flex}.library-section__title{letter-spacing:-.02em;color:#0f172a;margin:0;font-size:22px;font-weight:800}.library-section__subtitle{color:#64748b;margin:0;font-size:14px}.library-section .songs-grid{padding-bottom:0}.filter-controls{flex-wrap:wrap;align-items:center;gap:8px;margin:-8px 0 22px;display:flex}.songs-page .difficulty-filter{margin:0}.clear-filters-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e4e8f2;border-radius:50%;place-items:center;width:36px;height:36px;padding:0;font-size:23px;line-height:1;transition:color .2s,border-color .2s,background .2s;display:inline-grid}.clear-filters-btn:hover{color:#dc2626;background:#fef2f2;border-color:#fca5a5}.clear-filters-btn:focus-visible{outline-offset:2px;outline:3px solid #93c5fd}.play-triangle{border-top:6px solid #0000;border-bottom:6px solid #0000;border-left:10px solid #1677ff;width:0;height:0}.reachy{z-index:20;pointer-events:none;align-items:flex-end;gap:10px;display:flex;position:fixed;bottom:14px;right:18px}.reachy-bubble{color:#6b7daf;background:#fff;border:1px solid #e9edf6;border-radius:22px 22px 8px;max-width:150px;padding:12px 14px;font-size:12px;line-height:1.4;box-shadow:0 8px 26px #222f5712}.reachy-robot{color:#7180b0;flex-direction:column;align-items:center;gap:4px;font-size:11px;display:flex}.robot-head{background:linear-gradient(145deg,#fff,#e9edf4);border:1px solid #dfe5ef;border-radius:50%;width:58px;height:48px;position:relative;box-shadow:0 7px 16px #1422461a}.robot-head:before{content:"";background:#757e8f;width:2px;height:21px;position:absolute;top:-21px;left:50%}.robot-head:after{content:"";background:#757e8f;border-radius:50%;width:6px;height:6px;position:absolute;top:-25px;left:calc(50% - 3px)}.eye{background:#0c0f16;border-radius:50%;width:9px;height:9px;position:absolute;top:18px}.eye.left{left:14px}.eye.right{right:14px}.empty{text-align:center;color:#7c88aa;grid-column:1/-1;padding:50px 20px;font-size:14px}.top-actions{align-items:center;gap:10px;display:flex}.top-actions .search-box{flex:1}.add-music-btn{color:#fff;cursor:pointer;background:#1677ff;border:0;border-radius:12px;flex:none;height:50px;padding:0 18px;font-size:14px;font-weight:700}.add-music-btn:hover{background:#0d6ce8}.free-play-btn{color:#1677ff;cursor:pointer;background:#eaf3ff;border:1px solid #c7dcff;border-radius:12px;flex:none;height:50px;padding:0 18px;font-size:14px;font-weight:700}.free-play-btn:hover{background:#d6e7ff}.modal-overlay{z-index:99999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a80;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:20px;width:min(560px,100%);max-height:90vh;padding:28px;position:relative;overflow-y:auto;box-shadow:0 25px 70px #00000040}.modal-close{color:#5f6b85;cursor:pointer;background:#f2f4f8;border:0;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:24px;display:flex;position:absolute;top:14px;right:14px}.modal-header{margin-bottom:20px;padding-right:40px}.modal-header h2{color:#111827;margin:0 0 6px;font-size:23px}.modal-header p{color:#7581a2;margin:0;font-size:14px}@media (width<=650px){.top-actions{flex-direction:column;align-items:stretch}.add-music-btn{width:100%}.modal-content{padding:22px 16px}}@media (width<=1180px){.songs-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}@media (width<=900px){.top-row{grid-template-columns:1fr;gap:16px}.search-box{max-width:100%}}@media (width<=700px){.songs-page{padding:16px 14px 100px}.brand{margin-bottom:20px}h1{font-size:clamp(28px,8vw,36px)}.songs-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}.song-card{grid-template-columns:78px minmax(0,1fr) auto;min-height:96px;padding:8px}.song-cover{width:78px}.filter-btn{min-height:39px;padding:0 15px}.reachy-bubble{display:none}}@media (width<=480px){.songs-page{padding-inline:12px}.brand{font-size:21px}.brand-mark{transform-origin:0;transform:scale(.9)}.subtitle{font-size:14px}.search-box{min-height:46px}.song-card{grid-template-columns:68px minmax(0,1fr);gap:10px}.song-cover{width:68px}.song-actions{flex-direction:row-reverse;grid-column:1/-1;align-items:center;margin-top:-2px;padding:0 0 0 78px}.favorite-btn{margin-left:auto}.play-btn{min-width:84px;height:34px;font-size:12px}.reachy{bottom:8px;right:10px}.robot-head{width:52px;height:43px}}body:has(.songs-page){color:#f5efe6;background:#111214}.songs-page{--home-bg:#111214;--home-surface:#1a1b1f;--home-surface-raised:#222327;--home-border:#34353a;--home-text:#f7f0e7;--home-muted:#aaa39a;--home-red:#ef4444;--home-orange:#f97316;--home-amber:#fbbf24;color:var(--home-text);background:radial-gradient(circle at 82% 8%, #ef444421, transparent 28%), radial-gradient(circle at 12% 35%, #f9731614, transparent 30%), var(--home-bg)}.songs-page .brand{color:var(--home-text)}.songs-page .home-header{grid-template-columns:minmax(180px,1fr) minmax(280px,520px) minmax(300px,1fr);grid-template-areas:"brand search actions";align-items:center;gap:24px;margin-bottom:clamp(72px,8vw,96px);display:grid}.songs-page .home-header .brand{grid-area:brand;margin-bottom:0}.songs-page .home-header__search{grid-area:search;width:100%}.songs-page .home-header__actions{grid-area:actions;justify-content:flex-end;align-items:center;gap:10px;display:flex}.songs-page .home-header__actions .free-play-btn,.songs-page .home-header__actions .add-music-btn{border-radius:10px;min-height:40px;padding:0 16px;font-size:13px}.songs-page .container{position:relative}.songs-page .container>.library-tabs{z-index:2;margin-bottom:0;position:absolute;top:160px;right:0}.songs-page .home-kicker{color:var(--home-orange);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;font-size:12px;font-weight:800;display:block}.songs-page .top-row>div:first-child{text-align:left}.songs-page .brand-mark span{background:var(--home-orange)}.songs-page h1,.songs-page .library-section__title{color:var(--home-text)}.songs-page .subtitle,.songs-page .library-section__subtitle,.songs-page .library-toolbar__hint{color:var(--home-muted)}.songs-page .search-box{border-color:var(--home-border);background:#1a1b1feb;box-shadow:0 10px 28px #0003}.songs-page .search-box input{color:var(--home-text)}.songs-page .search-box input::placeholder{color:#817a72}.songs-page .search-icon{border-color:var(--home-amber)}.songs-page .search-icon:after{background:var(--home-amber)}.songs-page .library-tabs,.songs-page .filter-btn,.songs-page .free-play-btn,.songs-page .add-music-btn,.songs-page .clear-filters-btn{border-color:var(--home-border);background:var(--home-surface);color:var(--home-text)}.songs-page .library-tab.is-active,.songs-page .filter-btn.active{color:#ffd166;background:#fbbf2424;border-color:#fbbf248c}.songs-page .difficulty-filter__label{color:var(--home-muted)}.songs-page .difficulty-filter__select{color:var(--home-text);background:var(--home-surface);border-color:var(--home-border)}.songs-page .difficulty-filter__select:hover,.songs-page .filter-btn:hover,.songs-page .library-tab:hover{border-color:var(--home-orange)}.songs-page .free-play-btn{color:#ffb347}.songs-page .add-music-btn{color:#ff8a65}@media (width<=700px){.songs-page .home-header{grid-template-columns:1fr auto;grid-template-areas:"brand actions""search search";align-items:start}.songs-page .home-header__search{margin-top:10px}.songs-page .container>.library-tabs{margin-bottom:18px;position:static}.songs-page .home-header__actions{flex-direction:column;align-items:stretch;gap:6px}.songs-page .home-header__actions .free-play-btn,.songs-page .home-header__actions .add-music-btn{min-height:34px;padding:0 10px;font-size:11px}}.songs-page .song-tile{--tile-accent:var(--home-orange);--tile-accent-soft:#3a2119;--tile-blue:var(--home-orange);--tile-blue-dark:var(--home-red);--tile-navy:var(--home-text);border-color:var(--home-border);background:var(--home-surface);box-shadow:0 12px 28px #0000003d}.songs-page .song-tile:hover{box-shadow:0 18px 36px #ef44442e}.songs-page .song-tile:nth-child(4n+1) .song-tile__art:before{background:#ef4444}.songs-page .song-tile:nth-child(4n+2) .song-tile__art:before{background:#f97316}.songs-page .song-tile:nth-child(4n+3) .song-tile__art:before{background:#fbbf24}.songs-page .song-tile:nth-child(4n+4) .song-tile__art:before{background:#dc2626}.songs-page .song-tile__cover{box-shadow:0 8px 20px #00000059}.songs-page .song-tile__caption{color:var(--home-text);background:linear-gradient(#0000,#11121494,#111214f5)}.songs-page .song-tile__title{color:var(--home-text)}.songs-page .song-tile__subtitle{color:#c0b7ad}.songs-page .song-tile__pill{color:#ffe0b2;background:#111214d1}.songs-page .song-tile .difficulty-badge{color:#ffd166!important;background:#78350fcc!important}.songs-page .song-tile .difficulty-badge__dot{background:#f97316!important}.songs-page .song-tile__btn--practice{color:#22140c;background:linear-gradient(135deg,#fbbf24,#f97316)}.songs-page .song-tile__btn--practice:hover:not(:disabled){background:linear-gradient(135deg,#ffd166,#ef4444)}.songs-page .song-tile__btn--listen{color:#ffd166;background:#2a1c18;border-color:#693321}.songs-page .song-tile__btn--listen:hover:not(:disabled){border-color:#f97316}.songs-page .modal-overlay{background:#000000b8}.songs-page .modal-content{border-color:var(--home-border);background:var(--home-surface);color:var(--home-text)}.songs-page .empty-user-songs{color:var(--home-text);text-align:left;background:#1a1b1f;border:1px solid #34353a;border-radius:14px;align-items:flex-start;box-shadow:0 10px 24px #0000003d}.songs-page .empty-user-songs>span{color:#fbbf24;background:#f9731629}.songs-page .empty-user-songs strong{color:#fff7ed}.songs-page .empty-user-songs p{color:#aaa39a}.songs-page .user-songs-loading{color:#aaa39a;text-align:left}.songs-page button{transition:box-shadow .2s,transform .2s,background .2s;box-shadow:0 5px 14px #0000003d;border:0!important}.songs-page button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px #f9731647,0 5px 14px #0000004d}.songs-page button:focus-visible{outline-offset:3px;outline:3px solid #fbbf24b8}.songs-page button:disabled{box-shadow:none}.songs-page .library-tabs,.songs-page .library-tab,.songs-page .library-tab.is-active{box-shadow:none!important}.songs-page .library-tab:hover{color:#ffb347;transform:none;box-shadow:none!important}.piano,.piano-lanes{--piano-bg:#fff;--piano-white-key:#fff;--piano-white-shade:#eef0f5;--piano-line:#e3e6ee;--piano-lane-line:#f0f2f7;--piano-sharp:#111114;--piano-accent:#1f7bff;--piano-accent-soft:#d6e7ff;--piano-accent-deep:#0b3d91;--piano-text:#0b1026;--piano-muted:#7180b0;--piano-hit:#13a06a;--piano-miss:#e5484d;--piano-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;--piano-height:clamp(150px, 26vw, 250px)}.piano{-webkit-user-select:none;user-select:none;position:relative}.piano__hitline{background:var(--piano-lane-line);height:6px;position:relative}.piano__fret{transition:background-color 60ms,box-shadow 60ms;position:absolute;top:0;bottom:0}.piano__fret.is-black{z-index:1}.piano__fret.is-target{background:var(--piano-accent-soft)}.piano__fret.is-active{background:var(--piano-accent);box-shadow:0 0 16px 3px color-mix(in srgb, var(--piano-accent) 60%, transparent)}.piano__fret.is-hit{background:var(--piano-hit);box-shadow:0 0 14px 2px var(--piano-hit)}.piano__fret.is-miss{background:var(--piano-miss)}.piano__keys{height:var(--piano-height);touch-action:none;position:relative}.piano__key{box-sizing:border-box;cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;transition:box-shadow 50ms,background 50ms;display:flex;position:absolute;top:0}.piano__key.is-white{background:linear-gradient(180deg, #f6f7fa 0%, var(--piano-white-key) 10%, var(--piano-white-key) 90%, var(--piano-white-shade) 100%);border-right:1px solid var(--piano-line);height:100%;box-shadow:inset 0 -6px 0 var(--piano-white-shade);border-radius:0 0 5px 5px;padding-bottom:12px}.piano__key.is-white:last-child{border-right:0}.piano__key.is-white.is-active{background:linear-gradient(180deg, var(--piano-accent-soft) 0%, #8ab8ff 70%, var(--piano-accent) 100%);box-shadow:inset 0 -2px 0 var(--piano-accent), 0 0 18px color-mix(in srgb, var(--piano-accent) 45%, transparent)}.piano__key.is-black{z-index:2;background:linear-gradient(180deg, #2c2c31 0%, var(--piano-sharp) 70%, #000 100%);border-radius:0 0 4px 4px;height:62%;padding-bottom:14px;box-shadow:inset 0 -8px #2a2a2f,0 3px 5px #0b10264d}.piano__key.is-black.is-active{background:linear-gradient(180deg, #1d5fd1 0%, var(--piano-accent-deep) 100%);box-shadow:inset 0 -3px 0 #0a3175, 0 0 18px color-mix(in srgb, var(--piano-accent) 50%, transparent)}.piano__key.is-target{box-shadow:inset 0 4px 0 var(--piano-accent)}.piano__key.is-white.is-hit{background:linear-gradient(180deg, #dcfce7 0%, #86efac 70%, var(--piano-hit) 100%);box-shadow:inset 0 -2px 0 var(--piano-hit), 0 0 18px color-mix(in srgb, var(--piano-hit) 55%, transparent)}.piano__key.is-black.is-hit{box-shadow:inset 0 -3px 0 #166534, 0 0 18px color-mix(in srgb, var(--piano-hit) 55%, transparent);background:linear-gradient(#22c55e 0%,#15803d 100%)}.piano__key.is-white.is-miss{background:linear-gradient(180deg, #fee2e2 0%, #fca5a5 70%, var(--piano-miss) 100%);box-shadow:inset 0 -2px 0 var(--piano-miss)}.piano__key.is-black.is-miss{background:linear-gradient(#ef4444 0%,#991b1b 100%);box-shadow:inset 0 -3px #7f1d1d}.piano__key.is-hit>.piano__cap{background:var(--piano-hit);border-color:var(--piano-hit);color:#fff}.piano__key.is-miss>.piano__cap{background:var(--piano-miss);border-color:var(--piano-miss);color:#fff}.piano__name{font-family:var(--piano-mono);color:var(--piano-muted);font-size:.66rem}.piano__cap{width:1.9em;height:1.9em;font-family:var(--piano-mono);border-radius:5px;place-items:center;padding:0;font-size:.8rem;font-weight:500;display:grid}.is-white>.piano__cap{color:var(--piano-text);border:1px solid var(--piano-line);background:#fff}.is-black>.piano__cap{color:#d7dbe6;border:1px solid #3a3a41;font-size:.7rem}.piano__key.is-active>.piano__cap{background:var(--piano-accent);border-color:var(--piano-accent);color:#fff}.piano__key.is-active>.piano__name{color:var(--piano-accent-deep)}.piano__name--custom{text-align:center;overflow-wrap:anywhere;max-width:100%;padding:0 2px;font-family:inherit;font-size:.62rem;font-weight:700;line-height:1.15}.is-black>.piano__name--custom{color:#e6e9f3;font-size:.56rem}@media (width<=560px){.piano__name,.is-black>.piano__cap{display:none}.piano__cap{width:1.6em;height:1.6em;font-size:.66rem}}.piano-lanes{background:var(--piano-bg);position:relative;overflow:hidden}.piano-lanes__lane{box-sizing:border-box;transition:background 80ms;position:absolute;top:0;bottom:0}.piano-lanes__lane.is-white{border-right:1px solid var(--piano-lane-line)}.piano-lanes__lane.is-black{z-index:1;background:#fafbfd}.piano-lanes__lane.is-target{background:linear-gradient(0deg, color-mix(in srgb, var(--piano-accent) 16%, transparent), transparent 75%)}.piano-lanes__lane.is-active{background:linear-gradient(0deg, color-mix(in srgb, var(--piano-accent) 30%, transparent), transparent 70%)}.piano-lanes__notes{z-index:2;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.piano *,.piano-lanes *{transition:none!important}}.piano-stage{flex-direction:column;flex:auto;min-height:0;display:flex}.piano-stage__lanes{flex:auto;min-height:160px;-webkit-mask-image:linear-gradient(#0000 0,#000 64px);mask-image:linear-gradient(#0000 0,#000 64px)}.transport{--transport-bg:#fff;--transport-surface:#fff;--transport-line:#e6e9f3;--transport-text:#0b1026;--transport-muted:#7180b0;--transport-accent:#1f7bff;--transport-accent-hover:#0d69ff;--transport-accent-soft:#eaf3ff;--transport-accent-ink:#fff;--transport-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;--transport-sans:"Instrument Sans", "Segoe UI", system-ui, sans-serif;box-sizing:border-box;background:var(--transport-bg);color:var(--transport-text);font-family:var(--transport-sans);gap:18px;padding:16px 14px;display:flex}.transport *,.transport :before,.transport :after{box-sizing:border-box}.transport--vertical{flex-direction:column;gap:clamp(8px,2vh,18px);width:184px;padding:clamp(10px,2vh,16px) 14px}.transport--vertical .transport__main .transport__btn{text-align:left;grid-template-rows:auto auto;grid-template-columns:auto minmax(0,1fr);place-items:center start;gap:1px 10px;padding:clamp(6px,1.2vh,10px) 12px;display:grid}.transport--vertical .transport__main .transport__icon{grid-row:1/span 2}.transport--vertical .transport__btn--play{padding-block:clamp(9px,1.8vh,14px)}.transport--vertical .transport__main{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;display:grid}.transport--vertical .transport__section{align-self:stretch;width:100%}.transport--vertical .transport__main .transport__btn{text-align:center;min-width:76px;min-height:48px;padding:8px;display:flex}.transport--vertical .transport__main .transport__label,.transport--vertical .transport__main kbd{display:none}.transport--horizontal{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:14px 28px}.transport__section{grid-template-columns:minmax(0,1fr);gap:6px;min-width:0;display:grid}.transport--horizontal .transport__section{min-width:140px}.transport__main{gap:8px}.transport--horizontal .transport__main{display:flex}.transport__heading{text-transform:uppercase;letter-spacing:.1em;color:var(--transport-muted);flex-wrap:wrap;justify-content:space-between;gap:0 6px;font-size:.72rem;display:flex}.transport--vertical .transport__heading{justify-content:flex-start}.transport__muted{color:var(--transport-muted)}.transport__btn{width:100%;font:inherit;color:var(--transport-text);background:var(--transport-surface);border:1px solid var(--transport-line);cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:8px 10px 6px;transition:border-color .12s,background .12s,transform 60ms;display:flex}.transport__btn:hover:not(:disabled){border-color:var(--transport-accent)}.transport__btn:active:not(:disabled){transform:translateY(1px)}.transport__btn:focus-visible,.transport__value:focus-visible,.transport__slider:focus-visible{outline:2px solid var(--transport-accent);outline-offset:2px}.transport__btn:disabled{opacity:.35;cursor:not-allowed}.transport__btn--play{background:var(--transport-accent);border-color:var(--transport-accent);color:var(--transport-accent-ink);padding-block:12px 8px}.transport__btn--play .transport__label{font-size:1rem}.transport__btn--play:hover:not(:disabled){background:var(--transport-accent-hover);border-color:var(--transport-accent-hover)}.transport__btn--play.is-playing{background:var(--transport-accent-soft);color:var(--transport-accent);border-color:#0000}.transport__btn--small{flex:none;gap:1px;width:44px;padding:4px 0 3px}.transport--vertical .transport__btn--small{border-radius:9px;width:36px;height:64px;padding:0}.transport--vertical .transport__btn--small .transport__icon{width:16px;height:16px}.transport--vertical .transport__value{min-height:64px}.transport__icon{flex:none}.transport__label{font-size:.85rem;font-weight:600;line-height:1.1}.transport__btn kbd{font:.68rem var(--transport-mono);color:inherit;opacity:.65;background:0 0;border:0;padding:0}.transport__stepper{justify-content:space-between;align-items:stretch;gap:6px;display:flex}.transport--vertical .transport__stepper{width:100%}.transport__value{font:inherit;color:var(--transport-text);background:0 0;border:0;border-radius:8px;flex-direction:column;flex:auto;justify-content:center;align-items:center;padding:2px 4px;display:flex}button.transport__value{cursor:pointer}.transport__value-number{font:500 1.15rem var(--transport-mono);font-variant-numeric:tabular-nums;color:var(--transport-accent)}.transport__value-word{text-transform:uppercase;letter-spacing:.08em;color:var(--transport-muted);font-size:.7rem}.transport__clock{font:.95rem var(--transport-mono);font-variant-numeric:tabular-nums}.transport__progress{background:var(--transport-line);border-radius:2px;height:4px;display:block;overflow:hidden}.transport__progress span{background:var(--transport-accent);transform-origin:0;height:100%;display:block}.transport__slider{width:100%;accent-color:var(--transport-accent)}@media (height<=560px){.transport--vertical .transport__value-word,.transport--vertical .transport__btn--small kbd{display:none}.transport--vertical .transport__section{gap:3px}}@media (prefers-reduced-motion:reduce){.transport *{transition:none!important}}.note-scroller{--ns-bg:#fff;--ns-note:#147cf5;--ns-note-accidental:#72aef9;--ns-note-active:#147cf5;--ns-note-hit:#147cf5;--ns-note-missed:#a9b3c2;--ns-hit-line-color:transparent;--ns-hit-line-thickness:0;--ns-note-radius:6px;--ns-note-min-height:68px;--ns-hit-line:92%;background:var(--ns-bg);contain:layout paint;background-image:linear-gradient(90deg,#24344d12 1px,#0000 1px);background-size:12.5% 100%;width:100%;height:100%;min-height:240px;position:relative;overflow:hidden}.note-scroller__track{left:0;top:var(--ns-hit-line);pointer-events:none;will-change:transform;width:100%;height:100%;position:absolute}.note-scroller__hit-line{left:0;right:0;top:var(--ns-hit-line);height:var(--ns-hit-line-thickness);background:var(--ns-hit-line-color);box-shadow:0 0 12px var(--ns-hit-line-color);pointer-events:none;position:absolute;transform:translateY(-50%)}.note{box-sizing:border-box;min-height:var(--ns-note-min-height);transform-origin:bottom;border-radius:var(--ns-note-radius);isolation:isolate;background:linear-gradient(#39a0ff 0%,#147cf5 72%,#0d68d6 100%);border:none;justify-content:center;align-items:flex-end;transition:background-color .12s,opacity .25s;display:flex;position:absolute;overflow:visible;transform:translateY(-100%);box-shadow:0 12px 22px #147cf547,0 3px 7px #101f3724}.note:before{z-index:-1;content:"";filter:blur(13px);opacity:.7;pointer-events:none;background:linear-gradient(#147cf500,#147cf56b);border-radius:999px;width:76%;height:170%;position:absolute;top:-145%;left:12%}.note--accidental{background:linear-gradient(#91c9ff 0%,#5e9ff0 100%);box-shadow:0 10px 20px #4b8fe23d,0 3px 7px #101f371a}.note--accidental:before{background:linear-gradient(#5ba4f400,#5ba4f452)}.note--active{background:linear-gradient(#55b2ff 0%,#147cf5 70%,#075fc9 100%);box-shadow:0 15px 32px #147cf56b,0 4px 10px #101f372e}.note--hit{background:var(--ns-note-hit);opacity:.38}.note--missed,.note--wrong{background:var(--ns-note-missed);opacity:.45}.note--past{opacity:.2}.note__label{box-sizing:border-box;letter-spacing:0;color:#fff;text-shadow:0 1px 2px #00367f47;white-space:nowrap;max-width:100%;padding:0 4px 12px;font:700 11px/1 Arial,sans-serif}.transport{color:#607080;background:#fffffff0;border:1px solid #edf0f4;border-radius:14px;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;font:14px/1.2 system-ui,sans-serif;display:flex;box-shadow:0 8px 24px #2f3f5714}.transport button{color:inherit;cursor:pointer;background:#fff;border:1px solid #e2e7ed;border-radius:6px;padding:6px 12px}.transport button:hover{background:#f4f7fa}.transport button:focus-visible,.transport input:focus-visible{outline-offset:2px;outline:2px solid #147cf5}.transport button[aria-pressed=true]{color:#fff;background:#147cf5;border-color:#147cf5}.transport__progress{flex:200px;align-items:center;gap:8px;min-width:0;display:flex}.transport__progress input{flex:1;min-width:0}.transport__speeds{gap:4px;display:flex}.game-overlay{--go-perfect:#16a34a;--go-good:#1f7bff;--go-late:#f59e0b;--go-text:#0b1026;--go-font:"Instrument Sans", "Segoe UI", system-ui, sans-serif;z-index:3;pointer-events:none;font-family:var(--go-font);position:absolute;inset:0;overflow:hidden}.game-overlay__countdown{color:#1f7bff;text-shadow:0 10px 30px #1f7bff59;font-size:clamp(5rem,16vw,9rem);font-weight:800;line-height:1;animation:1s ease-out both go-count;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.game-overlay__countdown.is-go{color:var(--go-perfect);text-shadow:0 10px 30px #16a34a59;white-space:nowrap;font-size:clamp(2.5rem,8vw,4.5rem);animation-duration:.8s}@keyframes go-count{0%{opacity:0;transform:translate(-50%,-50%)scale(1.8)}25%{opacity:1;transform:translate(-50%,-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(.85)}}.game-overlay__combo{justify-items:end;gap:6px;display:grid;position:absolute;top:76px;right:16px}.game-overlay__streak{font-variant-numeric:tabular-nums;color:var(--go-text);background:#fff;border:2px solid #fed7aa;border-radius:999px;padding:6px 14px;font-size:1.4rem;font-weight:800;animation:.25s ease-out go-pop;box-shadow:0 6px 18px #f973162e}.game-overlay__streak.is-hot{color:#fff;background:linear-gradient(135deg,#f97316,#ef4444);border-color:#0000;box-shadow:0 8px 24px #ef444459}@keyframes go-pop{0%{transform:scale(1.35)}to{transform:scale(1)}}.game-overlay__milestone{white-space:nowrap;color:#fff;background:linear-gradient(135deg,#f97316,#ef4444);border-radius:999px;padding:10px 22px;font-size:clamp(1.4rem,4vw,2.2rem);font-weight:800;animation:1.6s ease-out both go-milestone;position:absolute;top:30%;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #ef444459}@keyframes go-milestone{0%{opacity:0;transform:translate(-50%)scale(.5)}15%{opacity:1;transform:translate(-50%)scale(1.1)}25%{transform:translate(-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%)translateY(-20px)}}.game-overlay__multiplier{color:#fff;background:#1f7bff;border-radius:999px;padding:4px 12px;font-size:.95rem;font-weight:800;animation:.35s ease-out go-pop;box-shadow:0 6px 16px #1f7bff4d}.game-overlay__multiplier.is-x3{background:linear-gradient(135deg,#f97316,#ef4444);box-shadow:0 6px 16px #ef444459}.game-overlay__multiplier.is-x4{background:linear-gradient(135deg,#38bdf8,#2563eb 60%,#6366f1);box-shadow:0 6px 18px #38bdf880}.game-overlay__fire{pointer-events:none;width:100%;height:140px;position:absolute;bottom:0;left:0;right:0}.game-overlay__burst{--tone:var(--go-good);width:0;height:0;position:absolute;bottom:0}.game-overlay__burst.is-perfect{--tone:var(--go-perfect)}.game-overlay__burst.is-late{--tone:var(--go-late)}.game-overlay__spark{background:var(--tone);width:8px;height:8px;box-shadow:0 0 8px var(--tone);border-radius:50%;animation:.45s ease-out forwards go-spark;position:absolute;bottom:-4px;left:-4px}@keyframes go-spark{0%{opacity:1;transform:rotate(var(--angle)) translateY(0) scale(1)}to{opacity:0;transform:rotate(var(--angle)) translateY(-46px) scale(.3)}}.game-overlay__word{transform:translateX(var(--shift,-50%));white-space:nowrap;color:var(--tone);text-shadow:0 2px #fff,0 0 12px #fff;font-size:1rem;font-weight:800;animation:.6s ease-out forwards go-word;position:absolute;bottom:18px;left:0}@keyframes go-word{0%{opacity:0;transform:translate(var(--shift,-50%), 6px) scale(.7)}25%{opacity:1;transform:translate(var(--shift,-50%), 0) scale(1.1)}to{opacity:0;transform:translate(var(--shift,-50%), -34px) scale(1)}}.game-overlay__pulse{background:linear-gradient(90deg,#0000,#1f7bff 20%,#60a5fa 50%,#1f7bff 80%,#0000);height:4px;animation:.45s ease-out forwards go-pulse;position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 18px 4px #1f7bff73}@keyframes go-pulse{0%{opacity:1;transform:scaleY(1.6)}to{opacity:.15;transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.game-overlay *{animation-duration:10ms!important}.game-overlay__pulse{display:none}}.flame-gauge{--fg-night:#0b1026;--fg-night-2:#1e2448;--fg-text:#fff;--fg-muted:#94a3c8;--fg-fill:linear-gradient(90deg, #f59e0b, #fbbf24);--fg-glow:#fbbf2473;--fg-tier:#fcd34d;color:var(--fg-text);background:radial-gradient(ellipse at 50% 120%, var(--fg-night-2) 0%, var(--fg-night) 70%);border-radius:24px;gap:.25rem;padding:1.25rem 1.5rem 1rem;display:grid;overflow:hidden}.flame-gauge[data-tier=warm]{--fg-fill:linear-gradient(90deg, #f59e0b, #f97316);--fg-glow:#f9731680;--fg-tier:#fdba74}.flame-gauge[data-tier=fire]{--fg-fill:linear-gradient(90deg, #f97316, #ef4444);--fg-glow:#ef44448c;--fg-tier:#fca5a5}.flame-gauge[data-tier=blue]{--fg-fill:linear-gradient(90deg, #f97316, #ef4444 60%, #fbbf24);--fg-glow:#f97316b3;--fg-tier:#ffd166}.flame-gauge__head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;display:flex}.flame-gauge__value{letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(3rem,9vw,4.2rem);font-weight:800;line-height:1}.flame-gauge__unit{color:var(--fg-muted);margin-left:.1em;font-size:.5em}.flame-gauge__tier{text-align:right;text-wrap:balance;color:var(--fg-tier);font-size:clamp(1rem,2.6vh,1.2rem);font-weight:800;transition:color .3s}.flame-gauge__stage{height:130px;position:relative}.flame-gauge__canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.flame-gauge__track{background:#ffffff14;border:1px solid #ffffff24;border-radius:9999px;height:30px;padding:4px;position:absolute;bottom:0;left:0;right:0}.flame-gauge__fill{background:var(--fg-fill);min-width:0;height:100%;box-shadow:0 0 18px 2px var(--fg-glow);border-radius:9999px}.flame-gauge__ticks{height:1.4rem;margin-top:.35rem;position:relative}.flame-gauge__tick{color:var(--fg-muted);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:700;position:absolute;top:0;transform:translate(-50%)}.flame-gauge__tick:last-child{transform:translate(-100%)}.flame-gauge__tick:before{content:"";background:currentColor;border-radius:1px;width:2px;height:.35rem;position:absolute;top:-.5rem;left:50%}.flame-gauge__tick:last-child:before{left:auto;right:1rem}.flame-gauge__tick.is-reached{color:#fff}.flame-gauge__tick.is-blue{color:#7dd3fc}@media (prefers-reduced-motion:reduce){.flame-gauge *{transition:none!important}}.gr-details{--gr-perfect:#1d4ed8;--gr-good:#60a5fa;--gr-offbeat:#f59e0b;--gr-wrong:#dc2626;--gr-missed:#94a3b8;--gr-hatch:repeating-linear-gradient(135deg, #e2e8f0 0 4px, #f8fafc 4px 8px);--gr-text:#0f172a;--gr-muted:#64748b;--gr-faint:#94a3b8;--gr-line:#e2e8f0;--gr-card:#fff;--gr-primary:#2563eb;--gr-primary-hover:#1d4ed8;color:var(--gr-text);gap:1.25rem;display:grid}.gr-fill--perfect{fill:var(--gr-perfect);background:var(--gr-perfect);color:#fff}.gr-fill--good{fill:var(--gr-good);background:var(--gr-good);color:var(--gr-text)}.gr-fill--offbeat{fill:var(--gr-offbeat);background:var(--gr-offbeat);color:var(--gr-text)}.gr-fill--wrong{fill:var(--gr-wrong);background:var(--gr-wrong);color:#fff}.gr-fill--missed{fill:var(--gr-missed);background:var(--gr-hatch);color:var(--gr-muted);box-shadow:inset 0 0 0 1px var(--gr-missed)}.gr-swatch{border-radius:3px;flex:none;width:10px;height:10px;display:inline-block}.gr-swatch--perfect{background:var(--gr-perfect)}.gr-swatch--good{background:var(--gr-good)}.gr-swatch--offbeat{background:var(--gr-offbeat)}.gr-swatch--wrong{background:var(--gr-wrong)}.gr-swatch--missed{background:var(--gr-hatch);box-shadow:inset 0 0 0 1px var(--gr-missed)}.gr-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;display:grid}.gr-card{background:var(--gr-card);border:1px solid #eef2f7;border-radius:20px;align-content:start;gap:1.1rem;min-width:0;padding:1.6rem 1.75rem;display:grid;box-shadow:0 4px 20px #0000000a}.gr-card__title{margin:0;font-size:1.15rem;font-weight:800}.gr-card__subtitle{color:var(--gr-muted);margin:.2rem 0 0;font-size:.88rem}.gr-note{color:#334155;margin:0;font-size:.9rem;line-height:1.5}.gr-bar-wrap,.gr-chart,.gr-ribbon-wrap{position:relative}.gr-bar{gap:2px;height:22px;display:flex}.gr-bar__seg{cursor:default;border-radius:2px;min-width:4px}.gr-bar__seg:first-child{border-radius:6px 2px 2px 6px}.gr-bar__seg:last-child{border-radius:2px 6px 6px 2px}.gr-bar__seg:only-child{border-radius:6px}.gr-legend{gap:.55rem;margin:0;padding:0;list-style:none;display:grid}.gr-legend__item{grid-template-columns:10px auto minmax(0,1fr) 2.5ch 5ch;align-items:center;gap:.6rem;font-size:.9rem;display:grid}.gr-legend__label{font-weight:700}.gr-legend__hint{color:var(--gr-muted);text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;overflow:hidden}.gr-legend__count{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.gr-legend__pct{text-align:right;color:var(--gr-muted);font-variant-numeric:tabular-nums}.gr-legend--compact{flex-wrap:wrap;gap:.5rem 1.25rem;display:flex}.gr-legend--compact .gr-legend__item{gap:.45rem;font-size:.85rem;display:flex}.gr-legend--compact .gr-legend__label{color:#334155;font-weight:600}.gr-chart__svg{width:100%;height:auto;display:block;overflow:visible}.gr-zone__label{fill:var(--gr-muted);font-size:11px;font-weight:600}.gr-grid{stroke:#eef2f7;stroke-width:1px}.gr-baseline{stroke:#cbd5e1;stroke-width:1px}.gr-zero{stroke:var(--gr-faint);stroke-width:1px;stroke-dasharray:3 3}.gr-avg{fill:var(--gr-text)}.gr-axis{fill:var(--gr-muted);font-variant-numeric:tabular-nums;font-size:11px}.gr-axis--strong{fill:#334155;font-weight:700}.gr-hit{fill:#0000;cursor:default}.gr-hit:hover{fill:#2563eb0f}.gr-ribbon{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.gr-chip{font-variant-numeric:tabular-nums;cursor:default;border-radius:8px;place-items:center;height:40px;font-size:.82rem;font-weight:700;transition:transform .12s;display:grid;position:relative}.gr-chip:hover,.gr-chip:focus-visible{transform:translateY(-2px)}.gr-chip:focus-visible{outline-offset:2px;outline:3px solid #93c5fd}.gr-chip__played{opacity:.85;font-size:.6rem;font-weight:600;text-decoration:line-through;position:absolute;bottom:1px;right:3px}.gr-trouble{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none;display:grid}.gr-trouble__item{background:#f8fafc;border:1px solid #eef2f7;border-radius:16px;gap:.35rem;padding:1rem 1.15rem;display:grid}.gr-trouble__note{letter-spacing:-.02em;font-size:1.6rem;font-weight:800}.gr-trouble__ratio{color:var(--gr-muted);font-size:.9rem}.gr-trouble__kinds{flex-wrap:wrap;gap:.4rem;margin-top:.2rem;display:flex}.gr-pill{color:#334155;border:1px solid var(--gr-line);background:#fff;border-radius:9999px;align-items:center;gap:.35rem;padding:.2rem .6rem;font-size:.78rem;font-weight:600;display:inline-flex}.gr-tip{color:#1e3a8a;background:#eff6ff;border:1px solid #dbeafe;border-radius:16px;margin:0;padding:1rem 1.2rem;font-size:.92rem;line-height:1.5}.gr-tip__who{color:#1d4ed8;margin-bottom:.2rem;font-weight:800;display:block}.gr-tooltip{z-index:10;white-space:nowrap;color:#fff;pointer-events:none;background:#0f172a;border-radius:8px;padding:.45rem .7rem;font-size:.8rem;line-height:1.35;position:absolute;transform:translate(-50%,calc(-100% - 12px));box-shadow:0 6px 16px #0f172a33}@media (width<=760px){.gr-columns,.gr-trouble{grid-template-columns:1fr}}@media (width<=640px){.gr-legend__hint{display:none}.gr-legend__item{grid-template-columns:10px minmax(0,1fr) 2.5ch 5ch}}@media (prefers-reduced-motion:reduce){.gr-details *{transition:none!important}}.gr-details{--gr-perfect:#fbbf24;--gr-good:#f97316;--gr-offbeat:#fb923c;--gr-wrong:#ef4444;--gr-missed:#78716c;--gr-hatch:repeating-linear-gradient(135deg, #3b3c42 0 4px, #292a2e 4px 8px);--gr-text:#fff7ed;--gr-muted:#aaa39a;--gr-faint:#78716c;--gr-line:#3b3c42;--gr-card:#24252a;--gr-primary:#f97316;--gr-primary-hover:#ef4444}.gr-card{background:var(--gr-card);border:0;box-shadow:0 8px 20px #0000003d}.gr-note{color:#d6cec4}.gr-legend--compact .gr-legend__label{color:#f7f0e7}.gr-zone{fill:#2a211b}.gr-grid{stroke:#34353a}.gr-baseline{stroke:#57534e}.gr-axis--strong{fill:#f7f0e7}.gr-trouble__item{background:#1f2024;border:0}.gr-trouble__ratio{color:#aaa39a}.gr-trouble__ratio strong{color:#fff7ed}.gr-pill{color:#f7f0e7;background:#2a2b30;border:0}.gr-tip{color:#ffd166;background:#f973161f;border:0}.gr-tip__who{color:#fbbf24}.gr-tooltip{color:#fff7ed;background:#111214;box-shadow:0 8px 20px #0006}.results-modal{--gr-perfect:#1d4ed8;--gr-good:#60a5fa;--gr-offbeat:#f59e0b;--gr-wrong:#dc2626;--gr-missed:#94a3b8;--rm-text:#0f172a;--rm-muted:#64748b;--rm-primary:#2563eb;--rm-primary-hover:#1d4ed8;z-index:1000;padding:16px;padding-block:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-bottom,0px));place-items:center;display:grid;position:fixed;inset:0}.results-modal__backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a73;animation:.25s ease-out rm-fade;position:absolute;inset:0}.results-modal__panel{width:min(940px,100%);max-height:100%;color:var(--rm-text);background:#fff;border-radius:28px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(.75rem,2.4vh,1.5rem) clamp(1rem,2.5vw,1.75rem);padding:clamp(1rem,3vh,1.75rem);animation:.4s cubic-bezier(.2,.9,.3,1.2) rm-pop;display:grid;position:relative;overflow-y:auto;box-shadow:0 30px 80px #0f172a4d}.results-modal__panel:has(.gr-details){width:min(1040px,100%)}.results-modal__main,.results-modal__side{gap:clamp(.6rem,1.8vh,1rem);min-width:0;display:grid}.results-modal__details{grid-column:1/-1}.results-modal .flame-gauge{padding:clamp(.7rem,2vh,1.25rem) clamp(1rem,2vw,1.5rem) clamp(.5rem,1.5vh,1rem)}.results-modal .flame-gauge__value{font-size:clamp(2.2rem,7vh,4rem)}.results-modal .flame-gauge__stage{height:clamp(64px,14vh,130px)}.results-modal__head{text-align:center;justify-items:center;gap:clamp(.15rem,.8vh,.35rem);display:grid}.results-modal__eyebrow{color:#1d4ed8;background:#dbeafe;border-radius:9999px;padding:.3rem .9rem;font-size:.85rem;font-weight:800}.results-modal__title{letter-spacing:-.02em;text-wrap:balance;margin:.15rem 0 0;font-size:clamp(1.3rem,4vh,2rem);font-weight:800;line-height:1.15}.results-modal__points{color:#1d4ed8;font-variant-numeric:tabular-nums;margin:0;font-size:1.1rem;font-weight:800}.results-modal__points span{color:var(--rm-muted);font-size:.9rem;font-weight:700}.results-modal__message{color:var(--rm-muted);margin:0;font-size:clamp(.9rem,2.2vh,1.05rem);font-weight:600}.results-modal__stars{gap:6px;display:flex}.results-modal__stars svg{fill:#e2e8f0;width:clamp(24px,4.5vh,36px);height:clamp(24px,4.5vh,36px)}.results-modal__stars svg.is-on{fill:#f59e0b;animation:.45s cubic-bezier(.2,.9,.3,1.4) both rm-star}.results-modal__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.4rem,1.2vh,.75rem);margin:0;padding:0;list-style:none;display:grid}.results-modal__stat{--tone:var(--gr-perfect);text-align:center;background:color-mix(in srgb, var(--tone) 8%, #fff);border:2px solid color-mix(in srgb, var(--tone) 30%, #fff);border-radius:20px;justify-items:center;gap:.1rem;padding:clamp(.4rem,1.4vh,.9rem) .5rem;display:grid}.results-modal__stat--offbeat{--tone:var(--gr-offbeat)}.results-modal__stat--wrong{--tone:var(--gr-wrong)}.results-modal__stat--missed{--tone:var(--gr-missed)}.results-modal__stat-icon{font-size:clamp(1.1rem,3vh,1.6rem);line-height:1.2}.results-modal__stat-value{font-variant-numeric:tabular-nums;font-size:clamp(1.4rem,4.5vh,2.2rem);font-weight:800;line-height:1.05}.results-modal__stat-label{color:#334155;font-size:clamp(.78rem,1.9vh,.9rem);font-weight:700;line-height:1.2}.results-modal__slower{text-align:center;background:#ecfdf5;border:2px solid #a7f3d0;border-radius:20px;gap:clamp(.35rem,1vh,.6rem);padding:clamp(.55rem,1.6vh,1rem);display:grid}.results-modal__slower-text{color:#065f46;margin:0;font-size:clamp(.85rem,2vh,1rem);font-weight:700}.results-modal__actions{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.results-modal__btn{font:inherit;color:#1e293b;cursor:pointer;background:#fff;border:2px solid #cbd5e1;border-radius:9999px;padding:clamp(.6rem,1.8vh,1rem) 1rem;font-size:clamp(.95rem,2.3vh,1.15rem);font-weight:800;transition:background .2s,border-color .2s,color .2s,transform .15s}.results-modal__btn:hover{border-color:var(--rm-primary);color:var(--rm-primary)}.results-modal__btn:active{transform:translateY(1px)}.results-modal__btn:focus-visible{outline-offset:2px;outline:4px solid #93c5fd}.results-modal__btn--primary{color:#fff;background:var(--rm-primary);border-color:var(--rm-primary);box-shadow:0 6px 18px #2563eb59}.results-modal__btn--primary:hover{color:#fff;background:var(--rm-primary-hover);border-color:var(--rm-primary-hover)}.results-modal__details-toggle{font:inherit;color:var(--rm-muted);cursor:pointer;background:0 0;border:0;border-radius:9999px;justify-self:center;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.9rem;font-weight:700;display:inline-flex}.results-modal__details-toggle:focus-visible{outline:3px solid #93c5fd}.results-modal__chevron{transition:transform .2s}.results-modal__details-toggle[aria-expanded=true] .results-modal__chevron{transform:rotate(180deg)}@keyframes rm-fade{0%{opacity:0}}@keyframes rm-pop{0%{opacity:0;transform:translateY(24px)scale(.96)}}@keyframes rm-star{0%{opacity:0;transform:scale(.3)rotate(-30deg)}}@media (width<=820px){.results-modal__panel{grid-template-columns:minmax(0,1fr)}.results-modal__stats{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=640px){.results-modal__panel{border-radius:22px}.results-modal__stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (height<=620px){.results-modal__message,.results-modal__stat-icon,.results-modal .flame-gauge__ticks{display:none}}@media (prefers-reduced-motion:reduce){.results-modal *,.results-modal__panel,.results-modal__backdrop{transition:none!important;animation:none!important}}.results-modal{--gr-perfect:#fbbf24;--gr-good:#f97316;--gr-offbeat:#fb923c;--gr-wrong:#ef4444;--gr-missed:#78716c;--rm-text:#fff7ed;--rm-muted:#aaa39a;--rm-primary:#f97316;--rm-primary-hover:#ef4444}.results-modal__backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000c7}.results-modal__panel{color:var(--rm-text);background:#1a1b1f;border:1px solid #34353a;box-shadow:0 30px 80px #0000008c,0 0 40px #f973161f}.results-modal__eyebrow{color:#ffd166;background:#f9731629}.results-modal__points{color:#fbbf24}.results-modal__points span,.results-modal__message{color:var(--rm-muted)}.results-modal__stars svg{fill:#3b3c42}.results-modal__stars svg.is-on{fill:#fbbf24}.results-modal__stat{background:#24252a;border:0;box-shadow:0 8px 18px #0000003d}.results-modal__stat-label{color:#d6cec4}.results-modal__slower{background:#f973161f;border:0}.results-modal__slower-text{color:#ffd166}.results-modal__btn{color:#fff7ed;background:#24252a;border:0;box-shadow:0 6px 16px #00000040}.results-modal__btn:hover{color:#ffd166;border:0;box-shadow:0 10px 24px #f9731647}.results-modal__btn--primary{color:#21130d;background:linear-gradient(135deg,#fbbf24,#f97316)}.results-modal__btn--primary:hover{color:#21130d;background:linear-gradient(135deg,#ffd166,#ef4444)}.results-modal__details-toggle{color:#c9bfb4}.results-modal__details-toggle:hover{color:#ffb347}.piano-page{box-sizing:border-box;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#fff;gap:16px;height:100svh;padding:0 16px 16px;display:flex}.piano-page__play{flex-direction:column;flex:auto;gap:10px;min-width:0;padding-top:16px;display:flex}.piano-page__progress{background:#eef1f7;border-radius:999px;flex:none;height:6px;overflow:hidden}.piano-page__progress span{border-radius:inherit;transform-origin:0;background:linear-gradient(90deg,#22c55e,#1f7bff,#a855f7);height:100%;display:block}.piano-page__stage{flex:auto;min-height:0}.piano-page__stage .piano-lanes{background:linear-gradient(#fff 0%,#f3f7ff 70%,#eaf2ff 100%)}.piano-page__stage .piano-lanes:before{content:"";pointer-events:none;background-image:radial-gradient(circle,#1f7bff29 0 2px,#0000 3px),radial-gradient(circle,#a855f71f 0 1.5px,#0000 2.5px);background-position:0 0,60px 40px;background-size:190px 190px,130px 130px;animation:24s linear infinite stage-drift;position:absolute;inset:0}@keyframes stage-drift{to{background-position:0 190px,60px 170px}}.piano-page__stage .piano-lanes{transition:box-shadow .8s,background .8s}.piano-page__stage.is-heat-2 .piano-lanes{background:linear-gradient(#fff 0%,#fff7ed 70%,#ffedd5 100%);box-shadow:inset 0 -60px 80px -40px #f9731640}.piano-page__stage.is-heat-3 .piano-lanes{background:linear-gradient(#fff 0%,#fff1e6 60%,#fed7aa 100%);box-shadow:inset 0 -90px 110px -40px #ef44444d,inset 12px 0 30px -18px #f9731659,inset -12px 0 30px -18px #f9731659}.piano-page__stage.is-heat-4 .piano-lanes{background:linear-gradient(#fff 0%,#eff6ff 55%,#dbeafe 100%);box-shadow:inset 0 -110px 120px -40px #38bdf873,inset 14px 0 36px -18px #6366f173,inset -14px 0 36px -18px #6366f173}.piano-page__scroller.note-scroller{--ns-bg:transparent;--ns-note-min-height:8px;background-image:none;min-height:0}.piano-page__scroller .note{--c:var(--ns-note-color,#1f7bff);background:linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 80%, #0b1026) 100%);box-shadow:inset 0 2px 0 #ffffff8c, 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent);border-radius:12px}.piano-page__scroller .note__label{width:22px;height:22px;color:var(--c);text-shadow:none;background:#fff;border-radius:50%;place-items:center;margin-bottom:5px;padding:0;font:800 12px/1 Instrument Sans,Segoe UI,system-ui,sans-serif;display:grid;box-shadow:0 2px 6px #0b10262e}.piano-page__scroller .note--hit{--c:#22c55e;opacity:1;background:linear-gradient(#86efac 0%,#22c55e 60%,#15803d 100%);box-shadow:0 0 22px #22c55ea6,0 3px 7px #101f3724}.piano-page__scroller .note--hit:before{background:linear-gradient(#22c55e00,#22c55e80)}.piano-page__scroller :is(.note--missed,.note--wrong){--c:#ef4444;opacity:.75;box-shadow:none;background:linear-gradient(#fecaca 0%,#f87171 100%)}.piano-page__scroller :is(.note--missed,.note--wrong):before{display:none}@media (prefers-reduced-motion:reduce){.piano-page__stage .piano-lanes:before{animation:none}}.piano-page__points{color:#7180b0;background:#fff;border:1px solid #edf0f5;border-radius:14px;gap:6px;padding:10px 14px;font:700 .85rem Instrument Sans,Segoe UI,system-ui,sans-serif;display:grid}.piano-page__points-line{margin:0}.piano-page__points-value{color:#0b1026;font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:800;line-height:1.1}.piano-page__score{font-variant-numeric:tabular-nums;justify-content:space-between;gap:8px;margin:0;display:flex}.piano-page__side{flex-direction:column;flex:none;gap:12px;width:184px;min-height:0;padding-top:16px;display:flex}.piano-page__side--scroll{scrollbar-width:thin;overflow-y:auto}.piano-page__side--scroll>*{flex:none}.piano-page__card,.piano-page__transport{border:1px solid #edf0f5;border-radius:18px;box-shadow:0 6px 24px #1c264e0f}.piano-page__card{color:#0b1026;background:#fff;gap:10px;padding:14px;font-family:Instrument Sans,Segoe UI,system-ui,sans-serif;display:grid}.piano-page__back{font:inherit;color:#1f7bff;cursor:pointer;background:#eaf3ff;border:0;border-radius:999px;justify-self:start;padding:7px 12px;font-size:.85rem;font-weight:700}.piano-page__back:focus-visible{outline-offset:2px;outline:2px solid #1f7bff}.piano-page__song{gap:2px;display:grid}.piano-page__song-title{font-size:1rem;line-height:1.25}.piano-page__field-label{text-transform:uppercase;letter-spacing:.1em;color:#7180b0;font-size:.72rem}.piano-page__status{color:#7180b0;margin:0;font-size:.8rem}.piano-page__badge{color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;margin:0;padding:6px 10px;font-size:.8rem;font-weight:700;line-height:1.3}.piano-page__status--error,.piano-page__warning{color:#c2410c}.piano-page__warning{margin:0;padding:0 4px;font-size:.78rem;line-height:1.35}@media (width<=1024px){.piano-page{gap:12px;padding-inline:12px}}@media (height<=760px) and (width>=721px){.piano-page__status{display:none}.piano-page__side{gap:8px}.piano-page__card{gap:6px;padding:10px 12px}}@media (width<=720px){.piano-page{flex-direction:column;height:auto;min-height:100svh;padding:0 12px 16px}.piano-page__play{flex:none;height:72svh;min-height:380px;padding-top:12px}.piano-page__side{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px;width:auto;padding-top:0;display:grid}.piano-page__side>:not(.piano-page__card):not(.piano-page__points){grid-column:1/-1}.piano-page__transport.transport--vertical{flex-flow:wrap;justify-content:center;align-items:flex-start;gap:12px 18px;width:auto}.piano-page__transport .transport__section{flex:150px;max-width:260px}.piano-page__transport .transport__main{flex:100%;max-width:none;display:flex}}@media (width<=420px){.piano-page__side{grid-template-columns:minmax(0,1fr)}}.piano-page__metronome{text-align:left;color:#0b1026;cursor:pointer;background:#fff;border:1px solid #edf0f5;border-radius:14px;gap:2px;padding:9px 12px;font-family:Instrument Sans,Segoe UI,system-ui,sans-serif;display:grid}.piano-page__metronome:focus-visible{outline-offset:2px;outline:2px solid #1f7bff}.piano-page__metronome-label{font-size:.85rem;font-weight:700}.piano-page__metronome-state{color:#7180b0;font-size:.75rem}.piano-page__metronome.is-on{color:#fff;background:#1f7bff;border-color:#0000}.piano-page__part{color:#ffd166;background:#f9731624;border:1px solid #f9731666;border-radius:10px;gap:3px;margin:0;padding:8px 10px;font-size:.82rem;line-height:1.3;display:grid}.piano-page__part span{color:#c9bfb4;font-size:.74rem}.piano-page{--warm-red:#ef4444;--warm-orange:#f97316;--warm-yellow:#fbbf24;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f7f0e7;background:radial-gradient(circle at 68% 12%,#ef44441f,#0000 30%),#111214}.piano-page__stage .piano-lanes{--piano-bg:#151619;--piano-lane-line:#2a2b30;--piano-accent:var(--warm-orange);--piano-accent-soft:#f9731640;--piano-accent-deep:#9a3412;box-shadow:inset 0 -90px 120px -60px #f9731638;background:linear-gradient(#151619 0%,#191a1e 72%,#241713 100%)!important}.piano-page__stage .piano-lanes__lane.is-white{border-color:#282a2f}.piano-page__stage .piano-lanes__lane.is-black{background:#1b1c20}.piano-page__stage .piano-lanes__lane.is-active{background:linear-gradient(#0000 30%,#f9731640)}.piano-page__progress{background:#2d2e33}.piano-page__progress span{background:linear-gradient(90deg, var(--warm-red), var(--warm-orange), var(--warm-yellow))}.piano-page__card,.piano-page__transport,.piano-page__points,.piano-page__metronome{color:#f7f0e7;background:#1a1b1f;border-color:#34353a;box-shadow:0 12px 28px #00000047}.piano-page__back{color:#ffd166;text-align:left;background:#f9731624;justify-self:start}.piano-page__back:hover{background:#ef444433}.piano-page__field-label,.piano-page__status,.piano-page__metronome-state{color:#aaa39a}.piano-page__song-title,.piano-page__points-value{color:#fff7ed}.piano-page__song-image{aspect-ratio:16/10;object-fit:cover;border-radius:10px;width:100%;margin-top:8px;display:block;box-shadow:0 8px 18px #0000004d}.piano-page__points-line{color:#c9bfb4}.piano-page__score-hit{color:#fbbf24}.piano-page__score-miss{color:#f87171}.piano-page__score{margin-top:10px}.piano-page__score-hit,.piano-page__score-miss{text-align:center;background:#24252a;border-radius:10px;flex:1 1 0;padding:8px 6px;font-size:.72rem;box-shadow:inset 0 1px #ffffff0a}.piano-page__badge{color:#ffd166;background:#f9731629;border-color:#f9731666}.piano-page__metronome:hover{background:#24252a}.piano-page__metronome:focus-visible{outline-color:var(--warm-yellow)}.piano-page__metronome.is-on{background:var(--warm-orange);color:#21130d}.piano-page__metronome.is-on .piano-page__metronome-state{color:#3b1b0d}.piano-page__scroller.note-scroller{--ns-bg:transparent;--ns-note:var(--warm-orange);--ns-note-active:var(--warm-yellow);--ns-note-hit:#fbbf24;--ns-note-missed:var(--warm-red)}.piano-page__scroller .note{background:linear-gradient(#ffb347 0%,#f97316 65%,#c2410c 100%);box-shadow:0 10px 24px #f9731652,0 3px 8px #0000004d}.piano-page__scroller .note:before{background:linear-gradient(#0000,#fbbf2480)}.piano-page__scroller .note__label{color:#34150b;background:#ffd166}.piano-page__scroller .note--hit{background:linear-gradient(#fde68a,#f59e0b 65%,#b45309)}.piano-page__scroller :is(.note--missed,.note--wrong){background:linear-gradient(#fca5a5,#ef4444)}.piano-page__transport{--transport-bg:#1a1b1f;--transport-surface:#24252a;--transport-line:#3b3c42;--transport-text:#fff7ed;--transport-muted:#aaa39a;--transport-accent:#f97316;--transport-accent-hover:#ef4444;--transport-accent-soft:#f973162e;--transport-accent-ink:#21130d;background:#1a1b1f;border-color:#34353a;box-shadow:0 12px 28px #00000047}.piano-page__transport .transport__btn{border-color:#3b3c42;box-shadow:0 5px 14px #0000003d}.piano-page__transport .transport__btn:hover:not(:disabled){border-color:#fbbf24;box-shadow:0 8px 18px #f973164d}.piano-page__transport .transport__btn--play{border-color:#0000}.piano-page__transport .transport__btn,.piano-page__transport .transport__value{color:#fff7ed;box-shadow:0 5px 14px #00000047;background:#24252a!important;border:0!important}.piano-page__transport .transport__btn--play{color:#21130d;background:linear-gradient(135deg,#fbbf24,#f97316)!important}.piano-page__transport .transport__btn:hover:not(:disabled),.piano-page__transport .transport__value:hover{box-shadow:0 10px 24px #f973164d;border:0!important}.piano-page .piano-page__transport{box-sizing:border-box;width:100%;max-width:100%}.piano-page__transport .transport__heading,.piano-page__transport .transport__clock{text-align:left;align-self:flex-start}.piano-page__transport .transport__slider{width:100%}.piano-page .metronome,.piano-page .recorder{color:#f7f0e7;background:#1a1b1f;border-color:#34353a;box-shadow:0 12px 28px #00000047}.piano-page .metronome__title,.piano-page .metronome__muted,.piano-page .recorder__title,.piano-page .recorder__state,.piano-page .recorder__muted,.piano-page .recorder__hint{color:#aaa39a}.piano-page .metronome__switch.is-on,.piano-page .recorder__state--playing{color:#fbbf24}.piano-page .metronome__switch-track{background:#3b3c42}.piano-page .metronome__switch.is-on .metronome__switch-track{background:#f97316}.piano-page .metronome__switch-track span{background:#fff7ed}.piano-page .metronome__beat{background:#3b3c42}.piano-page .metronome__beat.is-lit{background:#f97316}.piano-page .metronome__beat.is-first.is-lit{background:#ef4444}.piano-page .metronome__step,.piano-page .metronome__sig,.piano-page .metronome__tap,.piano-page .metronome__try,.piano-page .recorder__btn,.piano-page .recorder__input{color:#fff7ed;background:#24252a;border:0;box-shadow:0 5px 14px #0000003d}.piano-page .metronome__step:hover,.piano-page .metronome__sig:hover,.piano-page .metronome__tap:hover,.piano-page .metronome__try:hover,.piano-page .recorder__btn:hover{background:#30251f;box-shadow:0 9px 20px #f9731640}.piano-page .metronome__sig.is-active,.piano-page .metronome__try.is-on,.piano-page .recorder__btn--play{color:#21130d;background:#f97316}.piano-page .recorder__btn--rec{color:#fca5a5;background:#ef444433}.piano-page .recorder__btn--save{color:#ffd166;background:#f9731629}.piano-page .metronome__more,.piano-page .recorder__save,.piano-page .recorder__saved{border-color:#34353a}.piano-page .metronome__slider,.piano-page .recorder__check input{accent-color:#f97316}.piano-page .recorder__check{color:#fff}.piano-page .recorder__progress{background:#34353a}.piano-page .recorder__progress span{background:linear-gradient(90deg,#fbbf24,#f97316,#ef4444)}.piano-page .recorder__time{color:#fff7ed}.piano-page .recorder__saved-text{color:#fbbf24}.piano-page .recorder__error{color:#f87171}.piano-page .recorder__time:empty{display:none}.piano-page .metronome,.piano-page .recorder{width:100%;min-width:0;overflow:hidden}.piano-page .recorder__buttons{width:100%;min-width:0}.piano-page .recorder__btn{min-width:0;padding:6px;font-size:.78rem}.piano-page .recorder__btn--icon{flex:0 0 36px;width:36px;min-width:36px;padding:0}.piano-page .metronome__tempo{grid-template-columns:28px minmax(0,1fr) 28px;min-width:0}.piano-page .metronome__step{width:28px;height:28px;padding:0}.piano-page .metronome__signatures{grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}.piano-page .metronome__sig{min-width:0;padding-inline:2px}.piano-page .metronome__more summary{color:#f97316}.piano-page .transport--vertical .transport__section--octave{width:100%;min-width:0}.piano-page .transport--vertical .transport__section--octave .transport__stepper{min-width:0;max-width:100%}.piano-page .transport--vertical .transport__section--octave .transport__btn--small{flex-basis:30px;width:30px}.piano-page .transport--vertical .transport__section--octave .transport__value{min-width:0;overflow:hidden}.piano-page__side>.piano-page__points,.piano-page__side>.piano-page__card,.piano-page__side>.piano-page__metronome,.piano-page__side>.piano-page__transport{color:#f7f0e7;background:#1a1b1f}.recorder{box-sizing:border-box;color:#0b1026;background:#fff;border:1px solid #e6e9f3;border-radius:14px;gap:8px;width:100%;min-width:0;padding:12px 14px;font-family:Instrument Sans,Segoe UI,system-ui,sans-serif;display:grid}.recorder *,.recorder :before,.recorder :after{box-sizing:border-box}.recorder__head{justify-content:space-between;align-items:center;gap:8px;display:flex}.recorder__title{letter-spacing:.06em;text-transform:uppercase;color:#7180b0;font-size:.72rem;font-weight:700}.recorder__state{color:#7180b0;align-items:center;gap:5px;font-size:.75rem;font-weight:700;display:inline-flex}.recorder__state--recording{color:#e11d48}.recorder__state--playing{color:#1f7bff}.recorder__time{margin:0;font:600 1.35rem/1.1 IBM Plex Mono,ui-monospace,Menlo,Consolas,monospace}.recorder__muted{color:#7180b0;font-size:.8rem;font-weight:500}.recorder__time .recorder__muted{font-family:inherit}.recorder__info{margin:0}.recorder__progress{background:#eef1f7;border-radius:999px;height:5px;display:block;overflow:hidden}.recorder__progress span{border-radius:inherit;transform-origin:0;background:#1f7bff;height:100%;display:block}.recorder__buttons{flex-wrap:wrap;gap:6px;width:100%;min-width:0;display:flex}.recorder__btn{color:#0b1026;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #e6e9f3;border-radius:10px;flex:1 1 0;justify-content:center;align-items:center;gap:6px;min-width:0;min-height:36px;padding:6px 8px;font:700 .8rem/1.1 inherit;display:inline-flex}.recorder__btn:hover{background:#f4f6fb}.recorder__btn:focus-visible{outline-offset:2px;outline:2px solid #1f7bff}.recorder__btn--rec{color:#e11d48;background:#fff1f2;border-color:#fecdd3;flex:100%;width:100%}.recorder__btn--rec:hover{background:#ffe4e6}.recorder__btn--play{color:#fff;background:#1f7bff;border-color:#0000}.recorder__btn--play:hover{background:#0d69ff}.recorder__btn--stop{color:#0b1026}.recorder__btn--ghost{color:#7180b0;flex:none}.recorder__btn--icon{flex:0 0 36px;width:36px;min-width:36px;padding:0}.recorder__btn--icon svg{display:block}.recorder__dot{background:#e11d48;border-radius:50%;width:9px;height:9px}.recorder__state--recording .recorder__dot{animation:1s steps(2,start) infinite recorder-blink}@keyframes recorder-blink{to{visibility:hidden}}@media (prefers-reduced-motion:reduce){.recorder__state--recording .recorder__dot{animation:none}}.recorder__btn--save{color:#1677ff;background:#eaf3ff;border-color:#c7dcff}.recorder__btn--save:hover{background:#d6e7ff}.recorder__save,.recorder__saved{border-top:1px solid #eef1f7;gap:6px;padding-top:8px;display:grid}.recorder__input{width:100%;min-height:36px;font:inherit;color:#0b1026;background:#fff;border:1px solid #d9dfeb;border-radius:10px;padding:6px 10px;font-size:.85rem}.recorder__input:focus{outline-offset:1px;border-color:#0000;outline:2px solid #1f7bff}.recorder__saved-text{color:#16a34a;margin:0;font-size:.82rem;font-weight:700}.recorder__error{color:#e11d48;margin:0;font-size:.8rem}.recorder__state--countIn{color:#f59e0b}.recorder__count{color:#f59e0b;font-size:1.8rem}.recorder__check{color:#44507a;align-items:flex-start;gap:6px;font-size:.76rem;font-weight:600;line-height:1.3;display:flex}.recorder__check input{accent-color:#1f7bff;margin:1px 0 0}.recorder__hint{color:#7180b0;font-weight:500;display:block}.metronome{box-sizing:border-box;color:#0b1026;background:#fff;border:1px solid #e6e9f3;border-radius:14px;gap:8px;padding:12px 14px;font-family:Instrument Sans,Segoe UI,system-ui,sans-serif;display:grid}.metronome *,.metronome :before,.metronome :after{box-sizing:border-box}.metronome__head{justify-content:space-between;align-items:center;gap:8px;display:flex}.metronome__title{letter-spacing:.06em;text-transform:uppercase;color:#7180b0;font-size:.72rem;font-weight:700}.metronome__muted{color:#7180b0;font-size:.75rem;font-weight:500}.metronome__switch{color:#7180b0;cursor:pointer;background:0 0;border:0;align-items:center;gap:7px;padding:2px 0;font:700 .78rem/1 inherit;display:inline-flex}.metronome__switch.is-on{color:#1f7bff}.metronome__switch-track{background:#d9dfeb;border-radius:999px;width:34px;height:20px;transition:background .15s;position:relative}.metronome__switch-track span{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0b102640}.metronome__switch.is-on .metronome__switch-track{background:#1f7bff}.metronome__switch.is-on .metronome__switch-track span{transform:translate(14px)}.metronome__hint{margin:-2px 0 0;line-height:1.3}.metronome__beats{justify-content:center;align-items:center;gap:6px;min-height:16px;display:flex}.metronome__beat{background:#e6e9f3;border-radius:50%;width:9px;height:9px;transition:background 60ms,transform 60ms}.metronome__beat.is-first{width:13px;height:13px}.metronome__beat.is-lit{background:#1f7bff;transform:scale(1.2)}.metronome__beat.is-first.is-lit{background:#e11d48}.metronome__tempo{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;display:grid}.metronome__bpm{justify-items:center;margin:0;display:grid}.metronome__bpm-value{font-variant-numeric:tabular-nums;font:700 1.4rem/1.05 IBM Plex Mono,ui-monospace,Menlo,Consolas,monospace}.metronome__step{color:#0b1026;cursor:pointer;background:#fff;border:1px solid #e6e9f3;border-radius:9px;width:32px;height:32px;font:700 1.1rem/1 inherit}.metronome__step:hover:not(:disabled){background:#f4f6fb}.metronome__step:disabled{opacity:.4;cursor:default}.metronome__slider{accent-color:#1f7bff;width:100%;margin:0}.metronome__more{border-top:1px solid #eef1f7;gap:8px;padding-top:6px;display:grid}.metronome__more[open]>:not(summary){margin-top:8px}.metronome__more summary{color:#1677ff;cursor:pointer;font-size:.78rem;font-weight:700}.metronome__tap{color:#1677ff;cursor:pointer;background:#f7faff;border:1px dashed #c7dcff;border-radius:10px;width:100%;min-height:34px;font:700 .8rem/1 inherit}.metronome__tap:active{background:#d6e7ff}.metronome__field{gap:4px;display:grid}.metronome__signatures{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;display:grid}.metronome__sig{color:#0b1026;cursor:pointer;background:#fff;border:1px solid #e6e9f3;border-radius:8px;min-height:30px;font:700 .75rem/1 inherit}.metronome__sig.is-active{color:#fff;background:#1f7bff;border-color:#0000}.metronome__check{align-items:center;gap:6px;font-size:.78rem;font-weight:600;display:flex}.metronome__check input{accent-color:#1f7bff}.metronome button:focus-visible,.metronome summary:focus-visible{outline-offset:2px;outline:2px solid #1f7bff}@media (prefers-reduced-motion:reduce){.metronome__beat,.metronome__switch-track,.metronome__switch-track span{transition:none}}.metronome__locked{text-align:center;margin:0}.metronome__tap:disabled,.metronome__sig:disabled,.metronome__slider:disabled{opacity:.45;cursor:default}.metronome__try{color:#1677ff;cursor:pointer;background:#eaf3ff;border:1px solid #c7dcff;border-radius:10px;min-height:32px;font:700 .8rem/1 inherit}.metronome__try:hover{background:#d6e7ff}.metronome__try.is-on{color:#fff;background:#1f7bff;border-color:#0000}.metronome__try.is-on:hover{background:#0d69ff}.tracks{box-sizing:border-box;color:#f7f0e7;gap:8px;font-family:Instrument Sans,Segoe UI,system-ui,sans-serif;display:grid}.tracks *,.tracks :before,.tracks :after{box-sizing:border-box}.tracks__list{gap:6px;margin:0;padding:0;list-style:none;display:grid}.tracks__empty{color:#aaa39a;margin:0;font-size:.85rem}.track{--track-color:#1f7bff;border:1px solid #34353a;border-left:4px solid var(--track-color);cursor:pointer;background:#1a1b1f;border-radius:12px;grid-template-columns:170px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;display:grid;box-shadow:0 8px 20px #00000038}.track.is-selected{border-color:color-mix(in srgb, var(--track-color) 60%, #1a1b1f);border-left-color:var(--track-color);background:color-mix(in srgb, var(--track-color) 10%, #1a1b1f);box-shadow:0 8px 22px color-mix(in srgb, var(--track-color) 22%, transparent)}.track.is-recording{border-color:#ef4444b3;box-shadow:0 0 0 2px #ef44444d}.track.is-silent .track__roll{opacity:.4}.track__head{align-items:center;gap:8px;min-width:0;display:flex}.track__icon{font-size:1.3rem}.track__names{gap:2px;min-width:0;display:grid}.track__title{color:#fff7ed;text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:700;overflow:hidden}.track__muted{color:#aaa39a;font-size:.75rem}.track__variant{color:#f7f0e7;max-width:100%;font:inherit;background:#24252a;border:1px solid #34353a;border-radius:6px;padding:2px 4px;font-size:.75rem}.track__roll{background:repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--measures) - 1px), #34353a calc(100% / var(--measures) - 1px), #34353a calc(100% / var(--measures))), #151619;border-radius:8px;height:44px;position:relative;overflow:hidden}.track__note{background:var(--track-color);border-radius:3px;min-width:3px;height:5px;position:absolute}.track__roll-empty{color:#7d766e;place-items:center;font-size:.72rem;display:grid;position:absolute;inset:0}.track__playhead{background:#fbbf24;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;box-shadow:0 0 8px #fbbf2499}.track__controls{align-items:center;gap:4px;display:flex}.track__btn{color:#f7f0e7;cursor:pointer;background:#24252a;border:0;border-radius:8px;place-items:center;min-width:30px;height:30px;padding:0 6px;font:700 .78rem/1 inherit;display:grid;box-shadow:0 4px 10px #00000038}.track__btn:hover:not(:disabled){background:#30251f}.track__btn:disabled{opacity:.4;cursor:default}.track__btn:focus-visible{outline-offset:2px;outline:2px solid #fbbf24}.track__btn.is-on{color:#111214;background:#aaa39a}.track__btn--solo.is-on{color:#21130d;background:#fbbf24}.track__btn--rec{background:#ef444433}.track__dot{background:#ef4444;border-radius:50%;width:11px;height:11px}.track.is-recording .track__dot{animation:1s steps(2,start) infinite track-blink}@keyframes track-blink{to{visibility:hidden}}.track__btn--delete{color:#aaa39a;font-size:1.1rem}.track__btn--delete:hover:not(:disabled){color:#fca5a5;background:#ef444433}.track__volume{width:70px;accent-color:var(--track-color)}.tracks__add{color:#ffd166;cursor:pointer;background:#f9731614;border:1px dashed #f973168c;border-radius:10px;justify-self:start;min-height:36px;padding:6px 14px;font:700 .85rem/1 inherit}.tracks__add:hover:not(:disabled){background:#f9731629}.tracks__add:focus-visible{outline-offset:2px;outline:2px solid #fbbf24}.tracks__add:disabled{opacity:.5;cursor:default}.tracks__picker{background:#1a1b1f;border:1px dashed #f973168c;border-radius:12px;gap:8px;padding:10px;display:grid}.tracks__instruments{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;display:grid}.tracks__instrument{--track-color:#1f7bff;border:1px solid #34353a;border-left:4px solid var(--track-color);color:#f7f0e7;text-align:left;cursor:pointer;background:#24252a;border-radius:10px;align-items:center;gap:8px;min-height:40px;padding:6px 10px;font:700 .82rem/1.1 inherit;display:flex}.tracks__instrument:hover{background:color-mix(in srgb, var(--track-color) 16%, #24252a)}.tracks__instrument:focus-visible{outline-offset:2px;outline:2px solid #fbbf24}.tracks__cancel{justify-self:start}@media (width<=760px){.track{grid-template-columns:minmax(0,1fr) auto}.track__roll{grid-area:2/1/auto/-1}}@media (prefers-reduced-motion:reduce){.track.is-recording .track__dot{animation:none}}.track__practice{color:#ffd166;white-space:nowrap;background:#f9731629;border-radius:999px;justify-self:start;padding:1px 7px;font-size:.68rem;font-weight:700}.studio-save{box-sizing:border-box;color:#f7f0e7;background:#1a1b1f;border:1px solid #f9731673;border-radius:14px;gap:8px;padding:12px 14px;font-family:Instrument Sans,Segoe UI,system-ui,sans-serif;display:grid;box-shadow:0 12px 28px #00000047}.studio-save *,.studio-save :before,.studio-save :after{box-sizing:border-box}.studio-save__form{gap:8px;display:grid}.studio-save__label{color:#aaa39a;font-size:.8rem;font-weight:700}.studio-save__input{color:#fff7ed;width:100%;max-width:420px;min-height:38px;font:inherit;background:#24252a;border:1px solid #34353a;border-radius:10px;padding:6px 10px;font-size:.9rem}.studio-save__input:focus{outline-offset:1px;border-color:#0000;outline:2px solid #fbbf24}.studio-save__text{color:#f7f0e7;margin:0;font-size:.85rem;line-height:1.4}.studio-save__text strong{color:#ffd166}.studio-save__text--warn{color:#fca5a5}.studio-save__ok{color:#fbbf24;margin:0;font-weight:800}.studio-save__error{color:#f87171;margin:0;font-size:.8rem}.studio-save__buttons{flex-wrap:wrap;gap:8px;display:flex}.studio-save__btn{color:#fff7ed;cursor:pointer;background:#24252a;border:0;border-radius:10px;min-height:36px;padding:6px 14px;font:700 .85rem/1 inherit;box-shadow:0 5px 14px #0000003d}.studio-save__btn:hover{background:#30251f;box-shadow:0 9px 20px #f9731640}.studio-save__btn:focus-visible{outline-offset:2px;outline:2px solid #fbbf24}.studio-save__btn--main{color:#21130d;background:linear-gradient(135deg,#fbbf24,#f97316)}.studio-save__btn--main:hover{filter:brightness(1.06);background:linear-gradient(135deg,#fbbf24,#f97316)}.studio-save__btn--ghost{color:#aaa39a;box-shadow:none;background:0 0}.studio-save__btn--ghost:hover{box-shadow:none;background:#24252a}.studio{--studio-bg:#111214;--studio-surface:#1a1b1f;--studio-raised:#24252a;--studio-border:#34353a;--studio-text:#f7f0e7;--studio-bright:#fff7ed;--studio-muted:#aaa39a;--studio-red:#ef4444;--studio-orange:#f97316;--studio-yellow:#fbbf24;--studio-ink:#21130d;box-sizing:border-box;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;height:100svh;color:var(--studio-text);background:radial-gradient(circle at 68% 12%, #ef44441f, transparent 30%), var(--studio-bg);gap:16px;padding:16px;font-family:Instrument Sans,Segoe UI,system-ui,sans-serif;display:flex}.studio *,.studio :before,.studio :after{box-sizing:border-box}.studio__main{flex-direction:column;flex:auto;gap:12px;min-width:0;display:flex}.studio__muted{color:var(--studio-muted);font-size:.8rem}.studio__bar,.studio__keyboard,.studio__card{border:1px solid var(--studio-border);background:var(--studio-surface);box-shadow:0 12px 28px #00000047}.studio__bar{border-radius:14px;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 14px;display:flex}.studio__title{color:var(--studio-bright);margin:0;font-size:1.25rem;font-weight:800}.studio__transport{flex-wrap:wrap;gap:8px;display:flex}.studio__btn{background:var(--studio-raised);min-height:38px;color:var(--studio-bright);cursor:pointer;border:0;border-radius:10px;padding:6px 14px;font:700 .85rem/1 inherit;box-shadow:0 5px 14px #0000003d}.studio__btn:hover:not(:disabled){background:#30251f;box-shadow:0 9px 20px #f9731640}.studio__btn:disabled{opacity:.45;cursor:default}.studio__btn:focus-visible,.studio__chip:focus-visible,.studio__back:focus-visible{outline:2px solid var(--studio-yellow);outline-offset:2px}.studio__btn--play{background:linear-gradient(135deg, var(--studio-yellow), var(--studio-orange));color:var(--studio-ink)}.studio__btn--play:hover:not(:disabled){background:linear-gradient(135deg, var(--studio-yellow), var(--studio-orange));filter:brightness(1.06)}.studio__btn--stop{color:#fca5a5;background:#ef444433}.studio__btn--stop:hover:not(:disabled){background:#ef44444d}.studio__position{font-variant-numeric:tabular-nums;align-items:center;gap:8px;min-width:190px;margin:0;font-size:.9rem;display:flex}.studio__position strong{color:var(--studio-bright)}.studio__rec{color:var(--studio-red);font-weight:800}.studio__countdown{color:var(--studio-yellow);font-size:1.6rem;font-weight:800;line-height:1}.studio__loop{align-items:center;gap:4px;margin-left:auto;display:flex}.studio__chip{background:var(--studio-raised);min-width:34px;min-height:30px;color:var(--studio-bright);cursor:pointer;border:0;border-radius:8px;padding:4px 8px;font:700 .8rem/1 inherit}.studio__chip:hover:not(:disabled){background:#30251f}.studio__chip:disabled{opacity:.45;cursor:default}.studio__chip.is-active{background:var(--studio-orange);color:var(--studio-ink)}.studio__chip kbd{font:inherit;color:var(--studio-muted);font-size:.7rem}.studio__loading,.studio__hint{border-radius:10px;margin:0;padding:8px 12px;font-size:.82rem}.studio__loading{color:#ffd166;background:#f9731624}.studio__hint{background:var(--studio-surface);color:var(--studio-muted);text-align:center}.studio__tracks{scrollbar-width:thin;scrollbar-color:var(--studio-border) transparent;flex:auto;min-height:0;overflow-y:auto}.studio__keyboard{--track-color:var(--studio-orange);border-top:4px solid var(--track-color);border-radius:14px;flex:none;gap:6px;padding:8px 10px 10px;display:grid}.studio__keyboard-bar{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}.studio__keyboard-title{color:var(--studio-bright);font-size:.9rem;font-weight:800}.studio__octave{align-items:center;gap:6px;display:inline-flex}.studio__piano{--piano-height:clamp(130px, 22vh, 210px);--piano-accent:var(--track-color);--piano-lane-line:#2a2b30}.studio__side{scrollbar-width:thin;scrollbar-color:var(--studio-border) transparent;flex-direction:column;flex:none;gap:12px;width:220px;min-height:0;display:flex;overflow-y:auto}.studio__side>*{flex:none}.studio__card{border-radius:14px;gap:10px;padding:12px 14px;display:grid}.studio__back{color:#ffd166;text-align:left;cursor:pointer;background:#f9731624;border:0;border-radius:10px;padding:8px 10px;font:700 .85rem/1 inherit}.studio__back:hover{background:#ef444433}.studio__help{margin:0;line-height:1.45}.studio__help strong{color:var(--studio-text)}.studio__dot{background:var(--studio-red);vertical-align:middle;border-radius:50%;width:9px;height:9px;display:inline-block}.studio .metronome{border-color:var(--studio-border);background:var(--studio-surface);color:var(--studio-text);box-shadow:0 12px 28px #00000047}.studio .metronome__title,.studio .metronome__muted{color:var(--studio-muted)}.studio .metronome__bpm-value{color:var(--studio-bright)}.studio .metronome__switch{color:var(--studio-muted)}.studio .metronome__switch.is-on{color:var(--studio-yellow)}.studio .metronome__switch-track{background:#3b3c42}.studio .metronome__switch.is-on .metronome__switch-track{background:var(--studio-orange)}.studio .metronome__switch-track span{background:var(--studio-bright)}.studio .metronome__beat{background:#3b3c42}.studio .metronome__beat.is-lit{background:var(--studio-orange)}.studio .metronome__beat.is-first.is-lit{background:var(--studio-red)}.studio .metronome__step,.studio .metronome__sig,.studio .metronome__tap,.studio .metronome__try{background:var(--studio-raised);color:var(--studio-bright);border:0;box-shadow:0 5px 14px #0000003d}.studio .metronome__step:hover:not(:disabled),.studio .metronome__sig:hover:not(:disabled),.studio .metronome__tap:hover:not(:disabled),.studio .metronome__try:hover{background:#30251f;box-shadow:0 9px 20px #f9731640}.studio .metronome__sig.is-active,.studio .metronome__try.is-on{background:var(--studio-orange);color:var(--studio-ink)}.studio .metronome__more{border-color:var(--studio-border)}.studio .metronome__more summary{color:#ffd166}.studio .metronome__slider,.studio .metronome__check input{accent-color:var(--studio-orange)}.studio .metronome button:focus-visible,.studio .metronome summary:focus-visible{outline-color:var(--studio-yellow)}@media (width<=900px){.studio{flex-direction:column;height:auto;min-height:100svh}.studio__side{width:auto;overflow:visible}.studio__tracks{overflow:visible}.studio__loop{margin-left:0}}