:root{color:#f4f0e8;background:#111;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#111}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;background:linear-gradient(180deg,rgba(202,72,42,.12),transparent 320px),#111}.app-header,.app-main{width:min(1120px,calc(100vw - 32px));margin:0 auto}.app-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0 18px}.app-header h1{margin:0;line-height:1;letter-spacing:0}.app-header h1{font-size:1.45rem}.app-header a{color:#f4f0e8;text-decoration:none;border-bottom:2px solid #e4572e;padding-bottom:4px}.app-main{padding-bottom:48px}.eyebrow{margin:0 0 6px;color:#f4a261;font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.metronome-page{display:grid;gap:22px}.transport-button{width:100%;min-height:112px;border:0;border-radius:8px;background:#e4572e;color:#111;font-size:1.45rem;font-weight:900}.transport-button.is-playing{background:#f4f0e8}.metronome-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr);gap:18px}.transport-control-panel{display:grid;align-content:stretch;padding:0;border:0;border-radius:8px;background:transparent}.control-panel{display:grid;align-content:start;gap:16px;padding:20px;border:1px solid rgba(244,240,232,.12);border-radius:8px;background:#1a1a1a}.bpm-panel{grid-row:span 2}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px}.section-heading strong{font-size:1.25rem}.bpm-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.tap-tempo-button{width:100%}.bpm-wheel{position:relative;--wheel-rotation: 0deg;display:grid;width:min(320px,100%);aspect-ratio:1;place-items:center;justify-self:center;border:1px solid rgba(244,240,232,.16);border-radius:50%;background:#101010;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.bpm-wheel:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:radial-gradient(circle at center,#1a1a1a 0 54%,transparent 55%),repeating-conic-gradient(from 0deg,rgba(244,240,232,.34) 0deg 2deg,transparent 2deg 10deg);transform:rotate(var(--wheel-rotation));transition:transform .12s ease-out}.bpm-wheel:focus-visible{outline:2px solid #f4a261;outline-offset:4px}.bpm-wheel-ring{position:absolute;top:16px;right:16px;bottom:16px;left:16px;border:10px solid #262626;border-radius:50%;box-shadow:inset 0 0 0 1px #f4f0e81f;transform:rotate(var(--wheel-rotation));transition:transform .12s ease-out}.bpm-wheel-copy{position:relative;display:grid;place-items:center;gap:2px}.bpm-wheel-copy span{font-size:4.5rem;font-weight:900;line-height:1}.bpm-wheel-copy small{color:#f4a261;font-weight:900;letter-spacing:0}.icon-button,.secondary-button,.delete-button,.preset-load,input,select{border:1px solid rgba(244,240,232,.16);border-radius:6px}.icon-button,.secondary-button,.delete-button{min-height:42px;background:#292929;color:#f4f0e8;font-weight:800}.bpm-input,input,select{width:100%;min-height:42px;padding:0 12px;background:#101010;color:#f4f0e8}label{display:grid;gap:8px;color:#c9c0b3;font-size:.9rem;font-weight:700}.time-signature-control{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}.time-signature-control span{color:#f4f0e8;font-size:2.4rem;font-weight:900}.signature-stepper{display:grid;gap:6px}.signature-stepper button{border:1px solid rgba(244,240,232,.16);border-radius:6px;background:#101010;color:#f4f0e8}.signature-stepper>button:not(.signature-value){min-height:28px;color:#f4a261;font-size:.74rem;font-weight:900}.signature-value{min-height:74px;cursor:ew-resize;font-size:2.2rem;font-weight:900;touch-action:none;-webkit-user-select:none;user-select:none}.signature-value:active{border-color:#f4a261;background:#202020}.accent-first-button{min-height:46px;color:#f4a261}.click-volumes-panel{padding:20px}.practice-panel{grid-template-columns:1fr}.switch-label{position:relative;display:inline-flex;align-items:center;gap:10px;justify-self:end;color:#f4f0e8;font-size:.84rem;font-weight:900}.switch-label input{position:absolute;opacity:0;pointer-events:none}.switch-label i{position:relative;display:inline-block;width:52px;height:30px;border:1px solid rgba(244,240,232,.18);border-radius:999px;background:#101010;transition:background .15s ease,border-color .15s ease}.switch-label i:before{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#f4f0e8;content:"";transition:transform .15s ease}.switch-label input:checked+i{border-color:#e4572e;background:#e4572e}.switch-label input:checked+i:before{transform:translate(22px)}.switch-label:focus-within i{outline:2px solid #f4a261;outline-offset:3px}.compact-switch i{width:44px;height:26px}.compact-switch i:before{width:18px;height:18px}.compact-switch input:checked+i:before{transform:translate(18px)}.switch-label.is-disabled{color:#6f685f;cursor:not-allowed}.switch-label.is-disabled i{opacity:.48}.practice-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.practice-status>div{display:grid;min-height:74px;align-content:center;gap:4px;padding:12px;border:1px solid rgba(244,240,232,.12);border-radius:6px;background:#101010}.practice-status span,.practice-max-state{color:#9d9488;font-size:.78rem;font-weight:800}.practice-status strong{font-size:1.55rem}.practice-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.practice-options{display:flex;align-items:center;justify-content:flex-end;gap:16px}.practice-max-state{color:#f4a261}.max-bpm-control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px}.max-bpm-control .compact-switch{min-height:42px;padding-bottom:6px}.beat-volume-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;gap:10px;overflow:visible}.beat-volume-cell{position:relative;min-width:0}.beat-volume-button,.subdivision-toggle,.subdivision-volume-button,.level-apply-button{border:1px solid rgba(244,240,232,.14);border-radius:6px;background:#101010;color:#f4f0e8}.beat-volume-button{display:grid;width:100%;min-height:78px;place-items:center;gap:4px;padding:10px 12px}.beat-volume-button strong{font-size:1.4rem}.beat-volume-button.is-active{background:#f4f0e8;color:#111}.volume-loud{box-shadow:inset 0 -4px #e4572e}.volume-accent{box-shadow:inset 0 -4px #f4f0e8,inset 0 0 0 1px #f4f0e838}.volume-normal{box-shadow:inset 0 -4px #f4a261}.volume-soft{box-shadow:inset 0 -4px #6b6b6b}.volume-meter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;width:min(54px,100%)}.volume-meter i{display:block;height:6px;border-radius:999px;background:#f4f0e82e}.volume-meter i.is-filled{background:#f4a261}.volume-accent .volume-meter i.is-filled{background:#f4f0e8}.volume-loud .volume-meter i.is-filled{background:#e4572e}.volume-soft .volume-meter i.is-filled{background:#8a8a8a}.beat-volume-button.is-active .volume-meter i{background:#1111112e}.beat-volume-button.is-active .volume-meter i.is-filled{background:#111}.subdivision-toggle{position:absolute;top:50%;right:10px;width:34px;min-height:30px;color:#f4a261;font-size:1rem;font-weight:900;transform:translateY(-50%)}.beat-volume-row.is-compact{gap:8px}.beat-volume-row.is-compact .beat-volume-button{min-height:68px;padding:9px 8px 8px}.beat-volume-row.is-compact .beat-volume-button strong{font-size:1.18rem}.beat-volume-row.is-compact .volume-meter{width:44px;gap:2px}.beat-volume-row.is-compact .subdivision-toggle{top:8px;right:8px;width:24px;min-height:20px;border-radius:999px;font-size:0;transform:none}.beat-volume-row.is-compact .subdivision-toggle:before{content:"···";font-size:.78rem;line-height:1}.beat-volume-row.is-dense{gap:6px}.beat-volume-row.is-dense .beat-volume-button{min-height:66px;padding:10px 4px 7px}.beat-volume-row.is-dense .beat-volume-button strong{font-size:1.02rem}.beat-volume-row.is-dense .volume-meter{width:34px;gap:2px}.beat-volume-row.is-dense .volume-meter i{height:5px}.beat-volume-row.is-dense .subdivision-toggle{top:7px;right:7px;width:8px;min-height:8px;padding:0;border:0;background:#f4a261;box-shadow:0 0 0 3px #f4a2611f}.beat-volume-row.is-dense .subdivision-toggle:before{content:""}.beat-volume-row.is-dense .subdivision-toggle.is-active{background:#e4572e;box-shadow:0 0 0 4px #e4572e2e}.subdivision-toggle.is-active{border-color:#f4a261;background:#292929}.subdivision-popover{position:absolute;z-index:20;top:calc(100% + 10px);left:50%;display:grid;width:min(430px,calc(100vw - 48px));gap:14px;padding:14px;border:1px solid rgba(244,240,232,.16);border-radius:8px;background:#181818;box-shadow:0 18px 60px #0000007a;transform:translate(-50%)}.beat-volume-cell:first-child .subdivision-popover{left:0;transform:none}.beat-volume-cell:last-child .subdivision-popover{right:0;left:auto;transform:none}.subdivision-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.subdivision-popover-head button{width:30px;min-height:30px;border:1px solid rgba(244,240,232,.14);border-radius:50%;background:#101010;color:#f4f0e8}.subdivision-clicks,.subdivision-apply{display:grid;gap:8px}.subdivision-clicks{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}.subdivision-volume-button{display:grid;min-height:58px;place-items:center;gap:2px}.subdivision-apply{grid-template-columns:repeat(4,70px);justify-content:start}.subdivision-apply span{grid-column:1 / -1;color:#c9c0b3;font-size:.78rem;font-weight:800}.level-apply-button{min-height:34px;font-size:.78rem;font-weight:900}.presets-panel{grid-column:1 / -1}.preset-form,.preset-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.preset-list{display:grid;gap:10px}.preset-load{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 14px;background:#202020;color:#f4f0e8;text-align:left}.preset-load small,.empty-state{color:#9d9488}.delete-button{padding:0 14px;color:#f4a261}@media(max-width:760px){.app-header,.transport-band{align-items:stretch;flex-direction:column}.metronome-grid,.preset-form,.preset-row{grid-template-columns:1fr}.bpm-panel,.presets-panel{grid-row:auto;grid-column:auto}.practice-status,.practice-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}