@import"https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box}:root{--color-brand: #F15A29;--color-secondary: #0077B6;--color-success: #00A86B;--color-error: #D14545;--color-ink: #222222;--color-bg: #F7F7F7;--sl-amber: var(--color-brand);--sl-amber-light: #FBC2A8;--sl-terracotta: var(--color-error);--sl-steel: var(--color-secondary);--sl-steel-light: #3399CC;--sl-teal-light: var(--color-success);--sl-charcoal: var(--color-ink);--sl-warm-white: #FFFFFF;--sl-bg: var(--color-bg);--sl-surface: var(--color-bg);--sl-linen: var(--color-bg);--sl-ink: var(--color-ink);--sl-text-mid: rgba(34, 34, 34, .7);--sl-text-light: rgba(34, 34, 34, .45);--sl-border: rgba(34, 34, 34, .14);--sl-border-light: rgba(34, 34, 34, .08);--sl-font-display: "Rubik", sans-serif;--sl-font-sans: "Inter", sans-serif;--sl-radius-sm: 7px;--sl-radius-md: 9px;--sl-radius-lg: 16px;--sl-radius-xl: 18px;--sl-shadow-topbar: 0 1px 2px rgba(34,34,34,.08);--sl-shadow-canvas: 0 1px 2px rgba(34,34,34,.06), 0 2px 8px rgba(34,34,34,.06);--sl-shadow-dropdown: 0 8px 24px rgba(34,34,34,.18);--sl-shadow-play-btn: 0 4px 12px rgba(241,90,41,.3)}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 color-mix(in srgb,var(--sl-amber) 25%,transparent);transform:scale(1)}50%{box-shadow:0 0 22px color-mix(in srgb,var(--sl-amber) 50%,transparent);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, "Inter", 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, #F7F7F7);color:var(--sl-ink, #222222)}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:var(--sl-warm-white);border:1px solid var(--sl-border-light);border-radius:var(--sl-radius-md);box-shadow:var(--sl-shadow-canvas);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:var(--sl-radius-md);border:1px solid var(--sl-border);padding:0 12px;background:var(--sl-warm-white);color:var(--sl-ink);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 var(--sl-amber);outline-offset:2px}.btn:disabled,.icon-btn:disabled{opacity:.5;cursor:not-allowed}.btn-disabled{background:var(--sl-bg);color:var(--sl-text-light)}.btn-secondary:hover,.inline-field select:hover{background:var(--sl-bg)}.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:var(--sl-text-light);font-weight:600;text-transform:uppercase}.inline-field-hint{font-size:11px;color:var(--sl-text-light);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:var(--sl-amber);background:color-mix(in srgb,var(--sl-amber) 12%,transparent);color:var(--sl-ink)}.tempo-slider-wrap{margin-top:10px}.tempo-slider-wrap input{width:100%;accent-color:var(--sl-amber)}.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:var(--sl-text-light);display:none}.notation-actions{display:flex;gap:8px}.icon-btn{height:36px;width:36px;border-radius:var(--sl-radius-md);border:1px solid var(--sl-border);background:var(--sl-warm-white);color:var(--sl-ink);cursor:pointer;line-height:1;font-size:16px}.icon-btn-primary{border-color:var(--sl-amber);background:var(--sl-amber);color:#fff}.icon-btn-record{color:var(--sl-terracotta, #D14545);border-color:color-mix(in srgb,var(--sl-terracotta) 35%,transparent);background:color-mix(in srgb,var(--sl-terracotta) 6%,transparent)}.icon-btn-record.is-active{color:var(--sl-warm-white);border-color:var(--sl-terracotta, #D14545);background:var(--sl-terracotta, #D14545)}.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 var(--sl-border-light);border-radius:var(--sl-radius-md);padding:8px}.notation-loader{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--sl-warm-white) 82%,transparent);z-index:2}.notation-spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--sl-border-light, rgba(34,34,34,.08));border-top-color:var(--sl-steel, #0077B6);animation:notation-spin .8s linear infinite}@keyframes notation-spin{to{transform:rotate(360deg)}}.timing-panel{margin-bottom:12px;padding:10px;border:1px solid var(--sl-border-light);border-radius:var(--sl-radius-md);background:var(--sl-bg)}.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:var(--sl-amber)}.timing-number-field{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--sl-text-light)}.timing-number-field input{width:84px;height:36px;border:1px solid var(--sl-border);border-radius:var(--sl-radius-sm);padding:0 8px}.timing-actions{display:flex;gap:8px;margin:8px 0}.feedback-card h2{margin:0 0 6px;font-size:12px;color:var(--sl-text-light);text-transform:uppercase;letter-spacing:.06em}.feedback-card p{margin:0;font-size:14px;color:var(--sl-text-mid)}.tap-pad-wrap{margin-bottom:12px}.midi-panel{padding:16px;border:1px dashed var(--sl-border);border-radius:var(--sl-radius-md);background:var(--sl-bg);color:var(--sl-text-mid);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:var(--sl-radius-md);border:1px solid var(--sl-amber);background:color-mix(in srgb,var(--sl-amber) 12%,transparent);color:var(--sl-ink);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:color-mix(in srgb,var(--sl-amber) 20%,transparent)}.tap-pad.is-pressed{transform:scale(.98)}.tap-pad:disabled{cursor:not-allowed;opacity:.6}.tap-pad:focus-visible{outline:2px solid var(--sl-amber);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:var(--sl-text-light);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))}}