:root{--ink:#14213d;--ink-soft:#526174;--navy:#17233d;--navy-deep:#0f172a;--cream:#f8f5ee;--paper:#fffdf8;--line:#e3ded2;--coral:#ff6b5f;--coral-deep:#e45449;--yellow:#fbbf24;--mint:#2dd4bf;--green:#10b981;--blue:#60a5fa;--shadow:0 22px 60px #1e293b1a}*{box-sizing:border-box}html{background:var(--cream);min-width:320px}body{background:radial-gradient(circle at 5% 0%, #fbbf241a, transparent 27rem), var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #2563eb59}.app-shell{min-height:100vh}.app-loading{min-height:100vh;color:var(--ink-soft);place-content:center;justify-items:center;gap:16px;display:grid}.app-loading .brand-mark{animation:1.3s ease-in-out infinite loading-pulse}@keyframes loading-pulse{50%{transform:translateY(-4px);box-shadow:0 14px 30px #ff6b5f4d}}.app-header{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:30;background:#fffdf8e8;border-bottom:1px solid #14213d17;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:76px;padding:0 clamp(22px,4vw,64px);display:grid;position:sticky;top:0}.brand{appearance:none;cursor:pointer;text-align:left;background:0 0;border:0;justify-self:start;align-items:center;gap:12px;padding:0;display:inline-flex}.brand-mark{color:#fff;background:var(--coral);border-radius:13px;place-items:center;width:42px;height:42px;display:grid;transform:rotate(-2deg);box-shadow:0 9px 20px #ff6b5f3d}.brand>span:last-child{gap:5px;line-height:1.05;display:grid}.brand strong{letter-spacing:-.4px;font-family:Georgia,Times New Roman,serif;font-size:21px}.brand small{color:#778397;letter-spacing:.04em;font-size:10px}.app-header nav{border:1px solid var(--line);background:#f2eee5;border-radius:14px;align-items:center;gap:4px;padding:5px;display:flex}.app-header nav button{cursor:pointer;color:#697488;background:0 0;border:0;border-radius:10px;align-items:center;gap:8px;padding:9px 17px;font-size:13px;font-weight:750;display:inline-flex}.app-header nav button.is-active{color:var(--ink);background:var(--paper);box-shadow:0 3px 10px #1f293717}.app-header nav button:disabled{cursor:not-allowed;opacity:.42}.library-hero{grid-template-columns:minmax(0,1.14fr) minmax(350px,.74fr);align-items:center;gap:clamp(54px,8vw,118px);max-width:1220px;margin:0 auto;padding:clamp(48px,7vw,92px) 28px clamp(42px,6vw,76px);display:grid}.eyebrow{color:#8b4a42;text-transform:uppercase;letter-spacing:.12em;align-items:center;gap:9px;font-size:12px;font-weight:850;display:inline-flex}.eyebrow-dot{background:var(--coral);border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 5px #ff6b5f21}.hero-copy h1{letter-spacing:-.047em;max-width:690px;color:var(--navy);margin:20px 0;font-family:Georgia,Times New Roman,serif;font-size:clamp(46px,5.7vw,77px);font-weight:700;line-height:.98}.hero-copy>p{max-width:610px;color:var(--ink-soft);margin:0;font-size:clamp(16px,1.6vw,19px);line-height:1.68}.hero-steps{color:#7d8797;align-items:center;gap:12px;margin-top:30px;font-size:12px;font-weight:720;display:flex}.hero-steps span{align-items:center;gap:7px;display:inline-flex}.hero-steps b{color:#5c6573;background:#e8e2d7;border-radius:50%;place-items:center;width:23px;height:23px;font-size:10px;display:grid}.import-card{background:linear-gradient(var(--paper), var(--paper)) padding-box, repeating-linear-gradient(-45deg, transparent, transparent 8px, #ff6b5f0f 8px, #ff6b5f0f 16px) border-box;min-height:390px;box-shadow:var(--shadow);text-align:center;border:1px solid #ded8cb;border-radius:25px;flex-direction:column;align-items:center;padding:39px 38px 31px;transition:transform .18s,border-color .18s,box-shadow .18s;display:flex}.import-card.is-dragging{border-color:var(--coral);transform:translateY(-5px)rotate(.4deg);box-shadow:0 28px 70px #1e293b26,0 0 0 5px #ff6b5f1c}.import-icon{width:72px;height:72px;color:var(--coral-deep);background:#fff0ec;border:1px solid #ffd3cc;border-radius:22px;place-items:center;margin-bottom:22px;display:grid}.import-card h2{margin:0 0 9px;font-family:Georgia,Times New Roman,serif;font-size:27px}.import-card p{color:#707b8b;max-width:280px;margin:0 0 25px;font-size:14px;line-height:1.55}.import-card small{color:#9299a5;text-transform:uppercase;letter-spacing:.08em;margin-top:15px;font-size:10px}.import-message{color:#39705d;background:#eef8f4;border-radius:9px;width:100%;margin-top:14px;padding:9px 12px;font-size:12px;line-height:1.4}.button{cursor:pointer;border:1px solid #0000;border-radius:11px;justify-content:center;align-items:center;gap:9px;min-height:42px;padding:0 18px;font-size:13px;font-weight:790;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex}.button:hover:not(:disabled){transform:translateY(-1px)}.button:active:not(:disabled){transform:translateY(0)}.button:disabled{opacity:.55;cursor:not-allowed}.button--wide{width:100%}.button--primary{color:#fff;background:var(--coral);border-color:var(--coral);box-shadow:0 10px 22px #ff6b5f33}.button--primary:hover:not(:disabled){background:var(--coral-deep)}.button--secondary{color:var(--ink);background:#f4f1e9;border-color:#e1dcd2}.library-section{background:var(--paper);border-top:1px solid var(--line);min-height:360px;padding:clamp(42px,5vw,68px) max(28px,50vw - 582px)}.section-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:27px;display:flex}.section-kicker,.panel-label{color:#9a6a62;text-transform:uppercase;letter-spacing:.13em;margin:0 0 7px;font-size:10px;font-weight:850}.section-heading h2{letter-spacing:-.03em;margin:0;font-family:Georgia,Times New Roman,serif;font-size:32px}.song-count{color:#687485;background:#f1ede4;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:750}.empty-library{text-align:center;background:#fcfaf5;border:1px dashed #d7d0c1;border-radius:20px;place-content:center;justify-items:center;min-height:240px;padding:30px;display:grid}.empty-library h3{margin:18px 0 8px;font-family:Georgia,Times New Roman,serif;font-size:20px}.empty-library p{color:#7c8694;max-width:430px;margin:0;font-size:13px;line-height:1.55}.empty-art{width:90px;height:56px;color:var(--coral);justify-content:center;align-items:end;gap:5px;display:flex}.empty-art span{background:#f9cfc9;border-radius:5px;width:7px}.empty-art span:nth-child(2){height:24px}.empty-art span:nth-child(3){height:42px}.empty-art span:nth-child(4){height:31px}.song-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;display:grid}.song-card{cursor:pointer;background:#fff;border:1px solid #dfd9cd;border-radius:18px;padding:20px;transition:transform .16s,border-color .16s,box-shadow .16s;position:relative}.song-card:hover{transform:translateY(-3px);box-shadow:0 15px 35px #1e293b17}.song-card.is-selected{border-color:#ff6b5fbf;box-shadow:0 0 0 3px #ff6b5f1a}.song-card-top{justify-content:space-between;align-items:start;display:flex}.song-art{color:#376777;background:#e4f2ef;border-radius:14px;justify-content:center;align-items:center;gap:2px;width:57px;height:57px;display:flex}.song-art i{background:#77b8ae;border-radius:2px;width:3px}.song-art i:first-of-type{height:11px}.song-art i:nth-of-type(2){height:20px}.song-art i:nth-of-type(3){height:15px}.icon-button{color:#9aa1ab;cursor:pointer;background:0 0;border:0;border-radius:9px;place-items:center;width:35px;height:35px;display:grid}.icon-button:hover{color:var(--coral-deep);background:#fff0ed}.song-info{margin:20px 0}.song-info h3{white-space:nowrap;text-overflow:ellipsis;margin:0 0 6px;font-family:Georgia,Times New Roman,serif;font-size:21px;overflow:hidden}.song-info p{color:#8a929f;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:11px;overflow:hidden}.song-stats{border-top:1px solid #eee9df;border-bottom:1px solid #eee9df;grid-template-columns:repeat(3,1fr);margin:0 0 17px;padding:14px 0;display:grid}.song-stats div{gap:4px;display:grid}.song-stats div+div{border-left:1px solid #eee9df;padding-left:13px}.song-stats dt{color:#9aa2ae;text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:750}.song-stats dd{margin:0;font-size:12px;font-weight:790}.practice-page{background:#f3f0e9;min-height:calc(100vh - 76px)}.practice-topbar{background:var(--paper);border-bottom:1px solid #ded9cf;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;min-height:72px;padding:12px clamp(20px,3vw,45px);display:grid}.back-button{color:#657185;cursor:pointer;background:0 0;border:0;justify-self:start;align-items:center;gap:7px;padding:8px 0;font-size:12px;font-weight:800;display:inline-flex}.back-button:hover{color:var(--coral-deep)}.practice-song{justify-items:center;gap:3px;display:grid}.practice-song span{color:#9b7d76;text-transform:uppercase;letter-spacing:.13em;font-size:9px;font-weight:850}.practice-song strong{text-overflow:ellipsis;white-space:nowrap;max-width:430px;font-family:Georgia,Times New Roman,serif;font-size:18px;overflow:hidden}.practice-progress{color:#7f8896;font-variant-numeric:tabular-nums;grid-template-columns:auto 1fr auto;justify-self:end;align-items:center;gap:10px;width:min(260px,100%);font-size:10px;display:grid}.practice-progress>div{background:#e7e2d9;border-radius:999px;height:5px;overflow:hidden}.practice-progress i{border-radius:inherit;background:var(--coral);height:100%;transition:width 80ms linear;display:block}.practice-layout{grid-template-columns:245px minmax(0,1fr);gap:20px;min-height:calc(100vh - 148px);padding:22px;display:grid}.practice-sidebar{flex-direction:column;gap:12px;display:flex}.device-card,.expected-card,.feedback-card{background:var(--paper);border:1px solid #ddd7cc;border-radius:15px}.device-card{padding:16px}.device-icon{color:#68758a;background:#ece8e0;border-radius:11px;place-items:center;width:41px;height:41px;margin-bottom:13px;display:grid;position:relative}.device-icon span{border:3px solid var(--paper);background:#b8bec7;border-radius:50%;width:12px;height:12px;position:absolute;bottom:-2px;right:-2px}.device-card--connected .device-icon{color:#246a54;background:#dcf5ea}.device-card--connected .device-icon span{background:var(--green)}.device-card--denied .device-icon span,.device-card--error .device-icon span{background:var(--coral)}.device-copy{gap:4px;margin-bottom:13px;display:grid}.device-copy p{margin:0;font-size:12px;font-weight:830}.device-copy strong{color:#7f8998;font-size:10px;font-weight:550;line-height:1.45}.button--connect{color:#fff;background:var(--navy);width:100%;min-height:38px}.device-ready{color:#287057;text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:7px;font-size:10px;font-weight:850;display:inline-flex}.device-ready span{background:var(--green);border-radius:50%;width:7px;height:7px}.connected-tools{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.connected-tools .device-ready{margin-right:auto}.map-keys-button{min-height:30px;color:var(--ink);cursor:pointer;background:#f5f2ec;border:1px solid #d5d0c6;border-radius:8px;padding:0 10px;font-size:9px;font-weight:820}.map-keys-button:hover{background:#fff;border-color:#aca394}.map-keys-button--quiet{color:#7f8998;background:0 0}.keyboard-map-status{border-top:1px solid #e7e2d9;gap:4px;margin-top:12px;padding-top:11px;display:grid}.keyboard-map-status p,.keyboard-map-status strong,.keyboard-map-status small{margin:0}.keyboard-map-status p{color:#4d586a;font-size:10px;font-weight:820}.keyboard-map-status strong{color:#25705a;font-size:10px}.keyboard-map-status small{color:#7f8998;font-size:9px;line-height:1.4}.expected-card,.feedback-card{padding:17px}.expected-notes{flex-wrap:wrap;align-items:center;gap:7px;min-height:56px;display:flex}.expected-notes span{color:#624917;background:#fff1bd;border:1px solid #f9d96b;border-radius:11px;place-items:center;min-width:47px;min-height:45px;padding:0 10px;font-family:Georgia,Times New Roman,serif;font-size:19px;font-weight:750;display:grid}.expected-card>p:last-child{color:#8c94a0;margin:10px 0 0;font-size:10px}.feedback-card{min-height:110px;transition:background .16s,border-color .16s}.feedback-card--correct{background:#edfbf5;border-color:#a8e7ce}.feedback-card--early,.feedback-card--late{background:#fff8df;border-color:#f4d97b}.feedback-card--extra{background:#fff1ef;border-color:#f5b7b0}.feedback-result{align-items:center;gap:10px;min-height:43px;display:flex}.feedback-result strong{font-size:12px;line-height:1.35}.feedback-mark{color:#fff;background:#b8bec7;border-radius:50%;flex:none;place-items:center;width:26px;height:26px;font-weight:900;display:grid}.feedback-card--correct .feedback-mark{background:var(--green)}.feedback-card--early .feedback-mark,.feedback-card--late .feedback-mark{background:var(--yellow);color:#5e4511}.feedback-history{gap:5px;margin-top:8px;display:flex}.history-dot{background:#cbd0d7;border-radius:50%;width:7px;height:7px}.history-dot--correct{background:var(--green)}.history-dot--early,.history-dot--late{background:var(--yellow)}.history-dot--extra{background:var(--coral)}.practice-stage{flex-direction:column;gap:12px;min-width:0;min-height:0;display:flex}.stage-toolbar{background:var(--paper);border:1px solid #ddd7cc;border-radius:15px;grid-template-columns:auto minmax(260px,1fr) auto;align-items:center;gap:20px;min-height:61px;padding:9px 12px;display:grid}.transport-controls{align-items:center;gap:8px;display:flex}.round-button{cursor:pointer;background:#f5f2ec;border:1px solid #ddd8ce;border-radius:11px;place-items:center;width:40px;height:40px;display:grid}.play-button{color:#fff;background:var(--coral);cursor:pointer;border:0;border-radius:11px;justify-content:center;align-items:center;gap:8px;min-width:108px;min-height:42px;font-size:13px;font-weight:830;display:inline-flex;box-shadow:0 8px 18px #ff6b5f33}.play-button:disabled{cursor:wait;opacity:.76}.audio-status{color:#697588;cursor:pointer;white-space:nowrap;background:#f5f2ec;border:1px solid #ddd8ce;border-radius:10px;align-items:center;gap:6px;min-height:34px;padding:0 10px;font-size:9px;font-weight:800;display:inline-flex}.audio-status--ready{color:#287057;background:#edf9f4;border-color:#b7dfd1}.audio-status--error{color:#9a433b;background:#fff1ef;border-color:#efc1bb}.audio-status:disabled{cursor:default}.audio-status--starting:disabled{cursor:wait}.speed-control{color:#727d8e;grid-template-columns:auto auto 1fr 43px;justify-self:center;align-items:center;gap:9px;width:min(450px,100%);font-size:11px;font-weight:720;display:grid}.speed-control input{min-width:100px;accent-color:var(--coral)}.speed-control strong{color:var(--ink);text-align:right;font-size:11px}.viewport-control{border-left:1px solid #e6e1d8;align-items:center;padding-left:17px;display:flex}.viewport-control>div{gap:2px;min-width:83px;margin-right:8px;display:grid}.viewport-control span{color:#969da8;text-transform:uppercase;letter-spacing:.08em;font-size:8px;font-weight:800}.viewport-control strong{font-size:10px}.viewport-control button{cursor:pointer;background:#f5f2ec;border:1px solid #ddd8cf;place-items:center;width:27px;height:30px;display:grid}.viewport-control button:first-of-type{border-radius:8px 0 0 8px}.viewport-control button:last-of-type{border-radius:0 8px 8px 0;margin-left:-1px}.viewport-control button:disabled{opacity:.4;cursor:not-allowed}.roll-shell{background:var(--navy-deep);border:1px solid #1e293b;border-radius:18px;flex:0 880px;width:100%;height:min(880px,100dvh - 190px);min-height:510px;position:relative;overflow:hidden;box-shadow:0 22px 55px #0f172a33}.piano-roll{width:100%;height:calc(100% - 176px);min-height:334px;display:block}.piano-keyboard{-webkit-user-select:none;user-select:none;background:#121826;border-top:1px solid #354155;width:100%;height:176px;position:relative}.piano-key{transition:background 80ms,transform 80ms;position:absolute;top:0}.piano-key--white{z-index:1;background:linear-gradient(#fffefa,#e8e4dc);border:1px solid #9ca3af;border-top:0;border-radius:0 0 5px 5px;height:172px}.piano-key--white span{color:#7b8491;font-size:8px;font-weight:750;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.piano-key--black{z-index:2;background:linear-gradient(90deg,#111827,#273245 55%,#0b1020);border:1px solid #050914;border-radius:0 0 5px 5px;height:108px;box-shadow:0 4px 6px #0006}.piano-key.is-expected{box-shadow:inset 0 -14px #fbbf24a6,0 0 14px #fbbf2459}.piano-key--black.is-expected{background:linear-gradient(#8a6414,#fbbf24)}.piano-key.is-active{background:linear-gradient(#9cf4e6,#2dd4bf);transform:translateY(3px);box-shadow:0 0 20px #2dd4bf94}@media (width<=1040px){.library-hero{grid-template-columns:minmax(0,1fr) 350px;gap:45px}.practice-layout{grid-template-columns:210px minmax(0,1fr);gap:14px;padding:15px}.stage-toolbar{grid-template-columns:auto 1fr}.viewport-control{border-top:1px solid #e6e1d8;border-left:0;grid-column:1/-1;justify-content:end;padding:8px 0 0}}@media (width<=800px){.app-header{grid-template-columns:1fr auto;padding:0 18px}.app-header nav{z-index:50;order:3;position:fixed;bottom:14px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #0f172a30}.library-hero{grid-template-columns:1fr;gap:42px;padding-top:48px}.hero-copy h1{font-size:clamp(47px,13vw,68px)}.import-card{min-height:340px}.practice-topbar{grid-template-columns:auto 1fr;gap:15px}.practice-song{place-items:start}.practice-progress{grid-column:1/-1;justify-self:stretch;width:100%}.practice-layout{grid-template-columns:1fr;padding-bottom:90px}.roll-shell{height:560px}.practice-sidebar{grid-template-columns:repeat(3,1fr);display:grid}}@media (width<=580px){.brand small{display:none}.library-hero{padding-left:19px;padding-right:19px}.hero-steps{gap:7px}.hero-steps svg{display:none}.import-card{padding:30px 24px}.library-section{padding-left:19px;padding-right:19px}.practice-sidebar,.stage-toolbar{grid-template-columns:1fr}.transport-controls{justify-content:center}.speed-control{grid-template-columns:auto auto 1fr 40px}.viewport-control{grid-column:auto}.roll-shell{min-height:500px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}