:root{background:#f3f4f1;color:#17201b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5}:root[data-theme=dark]{background:#101311;color:#edf2ee}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;overflow:hidden}button,input,select{font:inherit}button,.file-picker{align-items:center;background:#fff;border:1px solid #c9d0ca;border-radius:6px;color:#1d2822;cursor:pointer;display:inline-flex;min-height:38px;padding:.48rem .78rem}button:hover,.file-picker:hover{background:#eef2ef}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{display:grid;gap:10px;grid-template-rows:auto minmax(0,1fr);height:100%;padding:10px}.app-header{align-items:center;background:#fff;border:1px solid #d9dfd7;border-radius:8px;display:flex;gap:14px;justify-content:space-between;min-height:68px;padding:10px 12px}.app-title{display:block;font-size:1.08rem;font-weight:700;letter-spacing:0;margin:0}.app-header p{color:#627066;margin:2px 0 0}.top-actions{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.theme-toggle{gap:.48rem}.theme-toggle-track{background:#c8cfca;border-radius:999px;display:block;height:18px;padding:2px;transition:background .16s ease;width:32px}.theme-toggle-track span{background:#fff;border-radius:50%;box-shadow:0 1px 3px #00000059;display:block;height:14px;transition:transform .16s ease;width:14px}:root[data-theme=dark] .theme-toggle-track{background:#4389df}:root[data-theme=dark] .theme-toggle-track span{transform:translate(14px)}.hidden-input{display:none}.transport-button.primary{background:#235fb5;border-color:#235fb5;color:#fff}.mode-select{background:#fff;border:1px solid #c9d0ca;border-radius:6px;color:#1d2822;min-height:38px;padding:.4rem .55rem}.tempo-control{background:#fff;border:1px solid #c9d0ca;border-radius:6px;display:grid;grid-template-rows:24px 24px 24px;overflow:hidden;width:54px}.tempo-control button{background:#f7f8f7;border:0;border-radius:0;justify-content:center;min-height:0;padding:0}.tempo-control span{align-items:center;border-bottom:1px solid #d7ded9;border-top:1px solid #d7ded9;display:flex;font-size:.82rem;justify-content:center}.stage-panel{background:#080909;border:1px solid #222629;border-radius:8px;min-height:0;overflow:hidden}.empty-stage{background:radial-gradient(circle at 20% 0%,rgba(67,137,223,.2),transparent 36rem),#080909;color:#edf2ee;overflow-y:auto}.loading-stage{align-items:center;color:#aebbb2;display:flex;flex-direction:column;gap:.8rem;justify-content:center}.loading-stage p{margin:0}.loading-indicator{animation:loading-spin .7s linear infinite;border:3px solid #374039;border-radius:50%;border-top-color:#74b3f7;height:30px;width:30px}@keyframes loading-spin{to{transform:rotate(360deg)}}.empty-open{background:#3474ce;border-color:#3474ce;color:#fff;font-size:1.05rem;padding:.8rem 1rem}.empty-open:hover{background:#2866b8}.welcome-content{margin:0 auto;max-width:1100px;padding:clamp(2rem,6vw,5rem) clamp(1.25rem,5vw,4rem) 2rem}.welcome-hero{max-width:780px}.eyebrow{color:#74b3f7;font-size:.82rem;font-weight:700;letter-spacing:.1em;margin:0 0 .7rem;text-transform:uppercase}.welcome-hero h1{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.04em;line-height:1.02;margin:0;text-wrap:balance}.welcome-lead{color:#bdc9c0;font-size:clamp(1rem,2vw,1.25rem);line-height:1.65;max-width:700px}.welcome-lead code{color:#edf2ee}.welcome-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.5rem}.privacy-note{color:#8f9c93;font-size:.86rem;margin-top:.8rem}.welcome-error{color:#ff9b91;margin:.8rem 0 0}.song-library,.own-midi-section{display:grid;gap:12px}.own-midi-section{align-items:center;border-top:1px solid #e0e5e1;grid-template-columns:1fr auto;margin-top:16px;padding-top:16px}.built-in-song-list{display:grid;gap:8px}.built-in-song{justify-content:space-between;padding:.75rem .9rem;text-align:left;width:100%}.built-in-song>span:first-child{display:grid;gap:2px}.built-in-song small{color:#66736b}.feature-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(3rem,8vw,6rem)}.feature-grid article,.how-it-works{background:#ffffff0e;border:1px solid #272d29;border-radius:10px;padding:clamp(1.1rem,3vw,1.6rem)}.feature-grid h3,.how-it-works h2{margin:0 0 .45rem}.feature-grid p,.how-it-works li{color:#aebbb2;line-height:1.65;margin:0}.how-it-works{margin-top:12px}.how-it-works ol{display:grid;gap:.7rem;margin:1rem 0 0;padding-left:1.35rem}.how-it-works strong{color:#edf2ee}.welcome-footer{align-items:center;border-top:1px solid #272d29;color:#8f9c93;display:flex;flex-wrap:wrap;font-size:.86rem;gap:1rem;justify-content:space-between;margin-top:2rem;padding-top:1.3rem}.welcome-footer p{margin:0}.welcome-footer a{color:#74b3f7}.piano-roll{background:repeating-linear-gradient(90deg,#050505 0 3.2%,#202020 3.2% 5.6%,#111 5.6% 8.8%,#272727 8.8% 11.2%),linear-gradient(#111,#030303);height:calc(100% - 124px);min-height:0;overflow:hidden;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.song-progress{background:#111;border-bottom:1px solid #242424;height:16px;left:0;position:absolute;right:0;top:0;z-index:6}.song-progress-hit{background:transparent;border:0;border-radius:0;cursor:pointer;display:block;height:100%;min-height:0;padding:0;width:100%}.song-progress-hit span{background:#2e8b24;border-radius:0 999px 999px 0;display:block;height:100%}.loop-range{background:#ffffff47;border-left:2px solid rgba(255,255,255,.8);border-right:2px solid rgba(255,255,255,.8);bottom:0;display:block;height:100%;pointer-events:none;position:absolute;top:0;z-index:7}.loop-handle{background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:999px;cursor:ew-resize;height:18px;min-height:0;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;z-index:8}.loop-handle.end{transform:translate(-50%,-50%)}.progress-tooltip{background:#fffffff5;border:1px solid rgba(0,0,0,.25);border-radius:5px;color:#17201b;font-size:.78rem;padding:2px 6px;pointer-events:none;position:absolute;top:22px;transform:translate(-50%);white-space:nowrap;z-index:9}.play-line{background:#b42d25;box-shadow:0 0 8px #b42d25a6;bottom:0;height:3px;left:0;pointer-events:none;position:absolute;right:0;z-index:5}.note-spark{bottom:2px;height:1px;pointer-events:none;position:absolute;width:1px;z-index:7}.note-spark:after{animation:spark-flash .42s ease-out forwards;background:#fff;border-radius:50%;box-shadow:0 0 12px 5px currentColor;content:"";height:7px;left:-3px;position:absolute;top:-3px;width:7px}.note-spark.left-hand{color:#62a8ff}.note-spark.right-hand{color:#ffc35a}.note-spark i{animation:spark-particle .6s cubic-bezier(.12,.72,.3,1) forwards;background:currentColor;border-radius:999px;height:4px;left:-2px;position:absolute;top:-2px;width:4px;--spark-x: 0px;--spark-y: -34px}.note-spark i:nth-child(2){--spark-x: 25px;--spark-y: -25px}.note-spark i:nth-child(3){--spark-x: 34px;--spark-y: -7px}.note-spark i:nth-child(4){--spark-x: 23px;--spark-y: 10px}.note-spark i:nth-child(5){--spark-x: -23px;--spark-y: 10px}.note-spark i:nth-child(6){--spark-x: -34px;--spark-y: -7px}.note-spark i:nth-child(7){--spark-x: -25px;--spark-y: -25px}.note-spark i:nth-child(8){--spark-x: 10px;--spark-y: -42px}@keyframes spark-particle{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.25)}}@keyframes spark-flash{0%{opacity:1;transform:scale(.45)}to{opacity:0;transform:scale(2.2)}}.roll-note{border:1px solid rgba(255,255,255,.38);border-radius:6px;box-shadow:inset 0 1px #ffffff4d,0 2px 4px #0006;box-sizing:border-box;min-height:7px;position:absolute;z-index:2}.roll-note.left-hand{background:#4389df}.roll-note.right-hand{background:#f3a42a}.roll-note.expected{outline:2px solid #17201b}.section-menu{background:#fff;border:1px solid #bfc7c1;border-radius:8px;box-shadow:0 12px 30px #0000003d;display:grid;gap:4px;padding:6px;position:fixed;width:170px;z-index:10}.section-menu button{background:transparent;border:0;justify-content:start;min-height:32px;padding:.36rem .5rem}.section-menu button:hover{background:#eef2ef}.keyboard{background:#1a1a1a;border-top:0;height:124px;padding:0;position:relative;z-index:8}.key{background:linear-gradient(90deg,#f7f7f7,#d7d7d7 45%,#fff 74%,#bfc3c4);border:1px solid #8d8f90;border-radius:0;cursor:pointer;height:100%;position:absolute;padding:0}.key.black{background:linear-gradient(90deg,#0d0d0d,#383838 46%,#050505);border-color:#4a4a4a;box-shadow:inset 0 -4px #777;height:67%;z-index:3}.key.expected{box-shadow:inset 0 -12px #f3a42a}.key.left-hand.active,.key.left-hand.auto{background:linear-gradient(#74b3f7,#3d85d8)}.key.right-hand.active,.key.right-hand.auto{background:linear-gradient(#ffc45e,#f3a42a)}.dialog-backdrop{align-items:center;background:#1e262247;display:grid;inset:0;justify-content:center;padding:20px;position:fixed;z-index:20}.app-dialog{background:#fff;border:1px solid #cbd3cd;border-radius:10px;box-shadow:0 18px 50px #151f1938;max-width:min(760px,calc(100vw - 40px));padding:14px;width:640px}.dialog-header,.panel-header,.controls-row{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.dialog-header{border-bottom:1px solid #e0e5e1;margin-bottom:12px;padding-bottom:10px}.dialog-header h2,.panel h2,.dialog-section h2{font-size:1.02rem;margin:0}.dialog-copy{color:#66736b;margin:0 0 10px}.panel,.dialog-section{background:#fff}.field{color:#59665e;display:grid;flex:1 1 160px;gap:5px;min-width:150px}.field input,.field select{background:#fff;border:1px solid #c9d0ca;border-radius:6px;color:#17201b;min-height:38px;padding:.42rem .52rem}.setting-check{align-items:center;color:inherit;display:flex;gap:.55rem;margin:4px 0 5px}.setting-check input{accent-color:#3474ce;height:18px;margin:0;width:18px}@media(prefers-reduced-motion:reduce){.note-spark i,.note-spark:after{animation-duration:1ms}}.diagnostic-grid,.summary-grid,.practice-status{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 0}.diagnostic-grid div,.summary-grid div,.practice-status div{background:#f4f6f4;border-left:3px solid #45a049;min-width:0;padding:8px 10px}dt,.label{color:#65726a;display:block;font-size:.76rem}dd,strong{margin:0;overflow-wrap:anywhere}.notice{background:#f4f6f4;border:1px solid #d6ded8;border-radius:6px;color:#415047;margin:10px 0 0;padding:8px 10px}.track-list{display:grid;gap:7px;margin-top:12px}.track-row{align-items:center;background:#fff;color:#17201b;display:grid;gap:8px;grid-template-columns:1fr auto auto;text-align:left}.track-row.selected{background:#e8f0fb;border-color:#235fb5}.file-picker input{inline-size:0;opacity:0;position:absolute}:root[data-theme=dark] button,:root[data-theme=dark] .file-picker,:root[data-theme=dark] .mode-select,:root[data-theme=dark] .tempo-control,:root[data-theme=dark] .app-header,:root[data-theme=dark] .app-dialog,:root[data-theme=dark] .panel,:root[data-theme=dark] .dialog-section,:root[data-theme=dark] .section-menu,:root[data-theme=dark] .track-row,:root[data-theme=dark] .field input,:root[data-theme=dark] .field select{background:#191d1a;border-color:#424b44;color:#edf2ee}:root[data-theme=dark] button:hover,:root[data-theme=dark] .file-picker:hover,:root[data-theme=dark] .section-menu button:hover{background:#252b27}:root[data-theme=dark] .transport-button.primary{background:#3474ce;border-color:#3474ce}:root[data-theme=dark] .tempo-control button,:root[data-theme=dark] .diagnostic-grid div,:root[data-theme=dark] .summary-grid div,:root[data-theme=dark] .practice-status div,:root[data-theme=dark] .notice{background:#222823}:root[data-theme=dark] .tempo-control span,:root[data-theme=dark] .dialog-header,:root[data-theme=dark] .notice,:root[data-theme=dark] .own-midi-section{border-color:#303832}:root[data-theme=dark] .app-header p,:root[data-theme=dark] .dialog-copy,:root[data-theme=dark] .built-in-song small,:root[data-theme=dark] .field,:root[data-theme=dark] dt,:root[data-theme=dark] .label{color:#a9b5ac}:root[data-theme=dark] .track-row.selected{background:#23354d;border-color:#4389df}:root[data-theme=dark] button.key,:root[data-theme=dark] button.key:hover{background:linear-gradient(90deg,#f7f7f7,#d7d7d7 45%,#fff 74%,#bfc3c4);border-color:#8d8f90}:root[data-theme=dark] button.key.black,:root[data-theme=dark] button.key.black:hover{background:linear-gradient(90deg,#0d0d0d,#383838 46%,#050505);border-color:#4a4a4a}:root[data-theme=dark] button.key.left-hand.active,:root[data-theme=dark] button.key.left-hand.auto{background:linear-gradient(#74b3f7,#3d85d8)}:root[data-theme=dark] button.key.right-hand.active,:root[data-theme=dark] button.key.right-hand.auto{background:linear-gradient(#ffc45e,#f3a42a)}@media(max-width:760px){.app-header{align-items:stretch;display:grid}.top-actions{justify-content:start}.diagnostic-grid,.summary-grid,.practice-status,.feature-grid{grid-template-columns:1fr}.own-midi-section{align-items:stretch;grid-template-columns:1fr}}