@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Serif+Display:ital@0;1&display=swap";*,*:before,*:after{box-sizing:border-box}:root{--sl-charcoal: #353830;--sl-charcoal-mid: #444840;--sl-steel: #4A6B72;--sl-steel-light: #7A9EA8;--sl-teal: #3A6068;--sl-teal-light: #5A8E98;--sl-linen: #F0EAE0;--sl-linen-dark: #E4DDD2;--sl-warm-white: #FAF6F0;--sl-bg: #EBE4D8;--sl-surface: #FAF6F0;--sl-amber: #C9924A;--sl-amber-light: #E0B478;--sl-terracotta: #B5522A;--sl-ink: #26221E;--sl-text-mid: #6A5E54;--sl-text-light: #A0948A;--sl-border: #CEC5B8;--sl-border-light: #DDD6CC;--sl-mauve: #A89898;--sl-font-display: "Playfair Display", serif;--sl-font-serif: "DM Serif Display", serif;--sl-font-sans: "DM Sans", sans-serif;--sl-radius-sm: 7px;--sl-radius-md: 9px;--sl-radius-lg: 16px;--sl-radius-xl: 18px;--sl-shadow-topbar: 0 2px 16px rgba(0,0,0,.3);--sl-shadow-canvas: 0 2px 14px rgba(38,34,30,.1), 0 1px 0 rgba(255,255,255,.9) inset;--sl-shadow-dropdown: 0 10px 30px rgba(0,0,0,.4);--sl-shadow-play-btn: 0 4px 14px rgba(53,56,48,.35)}body{font-family:var(--sl-font-sans);background:var(--sl-bg);color:var(--sl-ink);-webkit-font-smoothing:antialiased}@keyframes sl-blink{0%,to{opacity:1}50%{opacity:.25}}@keyframes sl-glow-pulse{0%,to{box-shadow:0 0 10px #c9924a40;transform:scale(1)}50%{box-shadow:0 0 22px #c9924a80;transform:scale(1.08)}}.sl-hit{color:var(--sl-teal-light)}.sl-miss{color:var(--sl-terracotta)}.sl-active{color:var(--sl-amber-light)}.sl-muted{color:var(--sl-text-light)}::-webkit-scrollbar{width:0}:root{font-family:var(--sl-font-sans, "DM Sans", system-ui, sans-serif);line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--sl-bg, #EBE4D8);color:var(--sl-ink, #26221E)}html,body{overflow-x:hidden}.practice-page{min-height:100dvh}.practice-shell{max-width:1024px;margin:0 auto;padding:16px 12px}.stack{display:grid;gap:16px}.card{max-width:100%;min-width:0;overflow-x:hidden;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 2px #0f172a14;padding:12px}.topbar{margin-bottom:12px;padding-top:10px;padding-bottom:10px}.topbar-minimal{background:transparent;border:none;box-shadow:none;display:flex;justify-content:center;align-items:center}.brand-title{margin:0;font-weight:600;letter-spacing:.32em;text-align:center;text-transform:lowercase}.btn,.inline-field select{height:44px;border-radius:10px;border:1px solid #cbd5e1;padding:0 12px;background:#fff;color:#334155;font-weight:500;transition:background-color .15s ease}.btn{cursor:pointer}.btn:focus-visible,.inline-field select:focus-visible,.tempo-slider-wrap input:focus-visible,.icon-btn:focus-visible{outline:2px solid #2fa4a9;outline-offset:2px}.btn:disabled,.icon-btn:disabled{opacity:.5;cursor:not-allowed}.btn-disabled{background:#f1f5f9;color:#94a3b8}.btn-secondary:hover,.inline-field select:hover{background:#f8fafc}.controls-card{padding:10px 12px}.controls-row{display:grid;gap:10px;overflow-x:hidden;min-width:0;grid-template-columns:1fr;padding-bottom:2px}.settings-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:end}.inline-field{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;max-width:100%}.inline-field>span{font-size:11px;letter-spacing:.05em;color:#64748b;font-weight:600;text-transform:uppercase}.inline-field-hint{font-size:11px;color:#64748b;line-height:1.3}.inline-field select,.tempo-trigger,.metronome-cycle{width:100%;min-width:0}.tempo-field,.metronome-field{min-width:0}.controls-row>*{min-width:0;max-width:100%}.tempo-trigger.active{border-color:#2fa4a9;background:#f0fdfa;color:#0f766e}.tempo-slider-wrap{margin-top:10px}.tempo-slider-wrap input{width:100%;accent-color:#2fa4a9}.notation-card{min-width:0;max-width:100%}.notation-header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}.notation-header h1{margin:0;font-size:16px;font-weight:600}.notation-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.notation-header p{margin:0;font-size:12px;color:#64748b;display:none}.notation-actions{display:flex;gap:8px}.icon-btn{height:36px;width:36px;border-radius:9px;border:1px solid #cbd5e1;background:#fff;color:#334155;cursor:pointer;line-height:1;font-size:16px}.icon-btn-primary{border-color:#2fa4a9;background:#2fa4a9;color:#fff}.icon-btn-record{color:var(--sl-terracotta, #B5522A);border-color:#b5522a59;background:#b5522a0f}.icon-btn-record.is-active{color:#fff;border-color:var(--sl-terracotta, #B5522A);background:var(--sl-terracotta, #B5522A)}.notation-scroll{position:relative;width:100%;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0}.notation-scroll::-webkit-scrollbar{display:none}.notation-inner{min-width:0;width:100%;max-width:100%;border:1px solid #f1f5f9;border-radius:10px;padding:8px}.notation-loader{position:absolute;inset:0;display:grid;place-items:center;background:#faf6f0d1;z-index:2}.notation-spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--sl-border-light, #DDD6CC);border-top-color:var(--sl-steel, #4A6B72);animation:notation-spin .8s linear infinite}@keyframes notation-spin{to{transform:rotate(360deg)}}.timing-panel{margin-bottom:12px;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}.timing-controls{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:8px 0}.timing-controls input[type=range]{width:100%;accent-color:#2fa4a9}.timing-number-field{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#64748b}.timing-number-field input{width:84px;height:36px;border:1px solid #cbd5e1;border-radius:8px;padding:0 8px}.timing-actions{display:flex;gap:8px;margin:8px 0}.feedback-card h2{margin:0 0 6px;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.feedback-card p{margin:0;font-size:14px;color:#475569}.tap-pad-wrap{margin-bottom:12px}.midi-panel{padding:16px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#475569;display:grid;gap:10px;text-align:left}.midi-panel-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:end}.midi-input-select{min-width:220px;flex:1}.tap-pad{width:100%;min-height:64px;border-radius:12px;border:1px solid #2fa4a9;background:#ecfeff;color:#155e75;font-size:18px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:transform 80ms ease,background-color .12s ease,box-shadow .12s ease}.tap-pad:hover{background:#cffafe}.tap-pad.is-pressed{transform:scale(.98)}.tap-pad:disabled{cursor:not-allowed;opacity:.6}.tap-pad:focus-visible{outline:2px solid #2fa4a9;outline-offset:2px}.collapsible-header-row{display:flex;justify-content:space-between;gap:10px;align-items:center}.collapsible-title-wrap{min-width:0}.collapsible-title{margin:0;font-size:16px;font-weight:600}.collapsible-summary{margin:2px 0 0;font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapsible-toggle{flex:0 0 auto}.chevron{display:inline-block;transform:rotate(90deg);transition:transform .2s ease}.chevron.open{transform:rotate(0)}.collapsible-content{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease,opacity .2s ease,margin-top .2s ease;margin-top:0}.collapsible-content.open{grid-template-rows:1fr;opacity:1;margin-top:10px}.collapsible-content-inner{overflow:hidden;min-width:0}.field,.inline-field,.field input,.field select,.inline-field input,.inline-field select{width:100%;min-width:0}@media(min-width:420px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:640px){.practice-shell{padding:20px 24px}.card{padding:16px}.controls-card{padding-top:12px;padding-bottom:12px}.collapsible-summary{white-space:normal;overflow:visible;text-overflow:clip}.notation-header p{display:block}.notation-scroll{margin:0;padding:0}}@media(min-width:768px){.practice-shell{padding:24px}.stack{gap:20px}.controls-row{overflow-x:visible;grid-template-columns:repeat(2,minmax(0,1fr))}.inline-field{min-width:0}}@media(min-width:900px){.settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}