@font-face{font-family:Comic Neue;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/comic-neue-700-normal.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2)format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2)format("woff2")}*,:before,:after{box-sizing:border-box;margin:0;padding:0}button,input,[role=tab],[role=spinbutton]{touch-action:manipulation}:root{--bg:#0b0b0d;--card:#111116;--border:#1e1e28;--border-interactive:#606070;--accent:#f59e0b;--accent-glow:#f59e0b2e;--text:#e2e2e8;--muted:#a8a8be;--color-count-in:#60a5fa;--on-accent:#0b0b0d;--text-xs:.6875rem;--text-sm:.75rem;--text-md:.8125rem;--text-body:.875rem;--text-input:.8125rem;--text-btn:.875rem;--transport-h:78px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}body{background:var(--bg);color:var(--text);flex-direction:column;justify-content:center;align-items:center;gap:1.75rem;min-height:100dvh;padding:1.5rem;font-family:Inter,system-ui,sans-serif;display:flex}h1{font-size:var(--text-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:600}@media (width<=380px){body{gap:1.25rem;padding:1rem 0}}@media (width>=381px) and (width<=480px){body{padding:.75rem 0}}@media (width>=481px) and (width<=768px){body{padding:1rem}}.card{background:var(--card);border:1px solid var(--border);border-radius:24px;flex-direction:column;align-items:center;gap:1.75rem;width:min(max(320px,100% - 2rem),440px);padding:1.75rem 2.5rem 2rem;display:flex;position:relative;overflow:hidden}.zone-performance,.zone-piece,.zone-settings{flex-direction:column;align-items:center;gap:1.75rem;width:100%;display:flex}.zone-piece,.zone-settings{border-top:1px solid var(--border);padding-top:1.5rem}.view-tabs{margin-top:-1.75rem;background:var(--bg);border:none;border-radius:23px 23px 0 0;width:calc(100% + 5rem);margin-inline:-2.5rem;display:flex;overflow:hidden}.view-tab-btn{background:var(--card);color:var(--muted);font-family:inherit;font-size:var(--text-md);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:none;flex:1;justify-content:center;align-items:center;gap:6px;height:44px;padding:4px 16px;font-weight:600;transition:background .1s,color .1s;display:flex}.view-tab-btn:hover:not(.on){background:var(--accent-glow);color:var(--text)}.view-tab-btn.on{background:var(--accent);color:var(--on-accent)}@media (width<=380px){.card{gap:1.25rem;width:100%;padding:1.25rem 1rem 1.5rem}.zone-performance,.zone-piece,.zone-settings{gap:1.25rem}.view-tabs{border-radius:17px 17px 0 0}}@media (width<=480px){.card{width:100%;padding:1.5rem 1.25rem 1.75rem}.view-tabs{margin-top:-1.5rem;width:calc(100% + 2.5rem);margin-inline:-1.25rem}}@media (width>=481px) and (width<=768px){.card{width:min(600px,100%)}}@media (width>=769px){.card{gap:2rem;width:min(640px,100%);padding:2rem 3rem 2.5rem}.zone-performance,.zone-piece,.zone-settings{gap:2rem}.view-tabs{margin-top:-2rem;border-radius:27px 27px 0 0;width:calc(100% + 6rem);margin-inline:-3rem}.view-tab-btn{height:48px}}@media (width>=900px){.card{grid-template-columns:1fr 1fr;grid-template-areas:"tabs tabs""perf piece""perf settings";align-items:start;gap:2rem 3rem;width:min(960px,100%);display:grid}.view-tabs{grid-area:tabs}.zone-performance{grid-area:perf}.zone-piece{grid-area:piece}.zone-settings{grid-area:settings}.zone-piece,.zone-settings{border-top:none;padding-top:0}}.card-top{align-items:flex-start;gap:8px;width:100%;display:flex}.beat-dots{flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(8px,2.5vw,18px);width:100%;display:flex}.beat-dots[data-mode=groove]{flex-direction:column;gap:10px}.beat-dot-bar{justify-content:center;gap:clamp(6px,1.8vw,10px);display:flex}.beat-dot{box-sizing:border-box;border:2px solid var(--border-interactive);background:0 0;border-radius:50%;width:clamp(24px,7vw,40px);height:clamp(24px,7vw,40px);padding:0;transition:background-color .12s ease-out,border-color .12s ease-out,box-shadow .12s ease-out,transform .12s ease-out}.beat-dots[data-mode=groove] .beat-dot{width:clamp(20px,6vw,26px);height:clamp(20px,6vw,26px)}.beat-dot[data-state=accent]{background:var(--muted);border-color:var(--muted);box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--border-interactive)}.beat-dot[data-state=muted]{border-style:dashed}.beat-dot.lit{background:var(--accent);border-color:var(--accent);transition:none;transform:scale(1.15)}.beat-dot.lit[data-state=accent]{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent), 0 0 12px var(--accent)}.beat-dot.lit.count-in{background:var(--color-count-in);border-color:var(--color-count-in)}.beat-dot.lit.count-in[data-state=accent]{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--color-count-in), 0 0 12px var(--color-count-in)}@media (prefers-reduced-motion:reduce){.beat-dot,.beat-dot.lit{transform:none}}.bpm-block{flex-direction:column;align-items:center;gap:8px;display:flex}.bpm-num{letter-spacing:-.04em;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;border-bottom:2px solid #f59e0b47;min-width:3.6ch;font-size:5.5rem;font-weight:700;line-height:1;transition:border-color .15s}.bpm-num:hover{cursor:text;border-bottom-color:#f59e0b80}.bpm-num[contenteditable=true]{border-bottom-color:var(--accent);cursor:text}.bpm-num[contenteditable=true]:hover{border-bottom-color:var(--accent)}.bpm-label{font-size:var(--text-xs);letter-spacing:.25em;text-transform:uppercase;color:var(--muted);font-weight:600}.tempo-marking{color:var(--text);min-height:1.1em;font-size:1.1rem;font-style:italic;line-height:1}.bpm-section{flex-direction:column;align-items:center;gap:1.75rem;width:100%;transition:opacity .2s;display:flex}.bpm-section.disabled{opacity:.35;pointer-events:none}@media (width<=380px){.bpm-num{font-size:4.5rem}}@media (width>=769px){.bpm-num{font-size:6.5rem}}.row{grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;width:100%;display:grid}.nudge{border:1px solid var(--border-interactive);width:44px;height:44px;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;transition:border-color .15s,color .15s;display:flex}.nudge:hover{border-color:var(--accent);color:var(--accent)}.nudge:active{background:var(--accent-glow)}input[type=range]{appearance:none;background:linear-gradient(to right, var(--accent) var(--fill,0%), var(--border-interactive) var(--fill,0%));cursor:pointer;border-radius:2px;width:100%;height:4px}input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 1px 4px #00000080}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 1px 4px #00000080}input[type=range]::-moz-range-thumb:hover{transform:scale(1.25)}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}@media (width<=768px){input[type=range]{background:0 0;height:44px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--fill,0%), var(--border-interactive) var(--fill,0%));border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9px}input[type=range]::-moz-range-track{background:var(--border-interactive);border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{width:22px;height:22px}body.cat-mode input[type=range]{background:0 0}body.cat-mode input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, #c026d3 var(--fill,0%), var(--border-interactive) var(--fill,0%))}}@media (width>=769px){.nudge{width:48px;height:48px}.row{grid-template-columns:48px 1fr 48px}}.preset-row{flex-wrap:wrap;justify-content:center;gap:6px;width:100%;display:flex}.preset-btn{border:1px solid var(--border-interactive);height:44px;color:var(--muted);font-family:inherit;font-size:var(--text-md);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border-radius:99px;padding:4px 20px;font-weight:500;transition:border-color .15s,color .15s,background .15s}.preset-btn:hover{border-color:var(--accent);color:var(--accent)}.preset-btn.on{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);font-weight:600}.preset-btn.on:hover{background:#f59e0b47}@media (width<=480px){.preset-row{scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;padding-right:32px;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000 100%)}.preset-row::-webkit-scrollbar{display:none}}.meter-group{flex-direction:column;gap:8px;width:100%;display:flex}.section-label{font-size:var(--text-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text);font-weight:600}.meter-controls{align-items:flex-start;gap:12px;display:flex}.meter-col{flex-direction:column;flex:none;gap:8px;display:flex}.sub-group{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}select{appearance:none;border:1px solid var(--border-interactive);color:var(--text);font-family:inherit;font-size:var(--text-input);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;padding:9px 12px;font-weight:500}select:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}#timeSig{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9ab0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;height:44px;padding:4px 28px 4px 16px}.sub-picker-btn{border:1px solid var(--border-interactive);width:100%;height:44px;color:var(--text);font-family:inherit;font-size:var(--text-input);cursor:pointer;background:0 0;border-radius:8px;align-items:center;gap:10px;padding:4px 12px 4px 6px;font-weight:500;transition:border-color .15s;display:flex}.sub-picker-btn:hover:not(:disabled){border-color:var(--accent)}.sub-picker-glyph{flex:none;justify-content:center;align-items:center;display:flex}.sub-picker-glyph .sub-icon{width:34px;height:34px}.sub-picker-label{text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.sub-picker-chevron{color:var(--muted);flex:none}.sub-btns{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;display:grid}.sub-btn{border:1px solid var(--border-interactive);color:var(--muted);cursor:pointer;background:0 0;border-radius:10px;justify-content:center;align-items:center;height:64px;padding:4px;transition:background .1s,color .1s;display:inline-flex}.sub-icon{fill:#fff;width:46px;height:46px;display:block}.sub-btn:hover:not(.on){background:var(--accent-glow);color:var(--text)}.sub-btn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.sub-btn.on .sub-icon{fill:var(--on-accent)}@media (width<=480px){.meter-controls{flex-direction:column;gap:12px}.meter-col,.sub-group{width:100%}}.sheet{background:var(--card);color:var(--text);border:1px solid var(--border-interactive);border-radius:16px;width:min(480px,100% - 2rem);max-height:min(85dvh,680px);padding:0}.sheet::backdrop{background:#000000a6}.sheet-header{justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1rem .75rem 1.25rem;display:flex}.sheet-title{font-size:var(--text-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin:0;font-weight:600}.sheet-close{width:36px;height:36px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;justify-content:center;align-items:center;display:flex}.sheet-close:hover{background:var(--accent-glow);color:var(--text)}.sheet-body{padding:0 1.25rem 1.25rem;overflow-y:auto}@media (width<=599px){.sheet{border-bottom:none;border-left:none;border-right:none;border-radius:16px 16px 0 0;width:100%;max-width:100%;margin:auto 0 0}.sheet-body{padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px))}.sheet[open]{animation:.22s ease-out sheet-slide-up}}@keyframes sheet-slide-up{0%{opacity:0;transform:translateY(32px)}}@media (prefers-reduced-motion:reduce){.sheet[open]{animation:none}}.tap{border:1px solid var(--border-interactive);width:100%;height:58px;color:var(--muted);font-family:inherit;font-size:var(--text-md);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:12px;justify-content:center;align-items:center;gap:7px;font-weight:600;transition:border-color .12s,color .12s,background 80ms;display:flex}.tap:hover{border-color:var(--accent);color:var(--accent)}.tap:active,.tap.tapped{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}.tap.disabled{opacity:.35;pointer-events:none}.tap-play-row{flex-direction:column;gap:10px;width:100%;display:flex}.test-row{width:100%}.play{border:2px solid var(--accent);width:100%;height:58px;color:var(--accent);cursor:pointer;font-family:inherit;font-size:var(--text-btn);letter-spacing:.12em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:12px;justify-content:center;align-items:center;gap:10px;font-weight:600;transition:background .15s,box-shadow .15s;display:flex}.play:hover{background:var(--accent-glow)}.play svg.icon-stop,.icon-paw,body.cat-mode .icon-tap{display:none}body.cat-mode .icon-paw{display:inline-block}.play.on{background:var(--accent);color:var(--on-accent);box-shadow:0 0 32px #f59e0b4d}.play.on svg.icon-play{display:none}.play.on svg.icon-stop{display:inline-block}.play.on:hover{filter:brightness(1.08);background:var(--accent)}@media (width<=380px){.tap,.play{height:54px}}@media (width>=481px){.tap-play-row{flex-direction:row;gap:12px}.tap-play-row .tap,.tap-play-row .test-row{flex:1;width:auto}.tap-play-row .tap{height:58px}}@media (width>=769px){.play{height:64px;font-size:.9rem}.tap,.tap-play-row .tap{height:64px}}@media (width<=899px){html{scroll-padding-bottom:calc(var(--transport-h) + env(safe-area-inset-bottom,0px))}body{padding-bottom:calc(var(--transport-h) + env(safe-area-inset-bottom,0px))}.tap-play-row{z-index:200;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--border-interactive);flex-direction:row;gap:12px;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 32px #00000080}.tap-play-row .tap,.tap-play-row .test-row{flex:1;width:auto}.tap-play-row .tap,.tap-play-row .play{height:54px}body.cat-mode .tap-play-row{bottom:calc(26px + env(safe-area-inset-bottom,0px))}html body.cat-mode{padding-bottom:calc(var(--transport-h) + 26px + env(safe-area-inset-bottom,0px))}}.advanced{border-top:1px solid var(--border);width:100%}.advanced-toggle{width:100%;color:var(--muted);font-family:inherit;font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px;font-weight:600;transition:color .15s;display:flex}.advanced-toggle:hover{color:var(--text)}.advanced-toggle .chevron{transition:transform .28s}.advanced-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}.advanced-body{visibility:hidden;grid-template-rows:0fr;transition:grid-template-rows .28s,visibility 0s .28s;display:grid;overflow:hidden}.advanced-body.open{visibility:visible;grid-template-rows:1fr;transition:grid-template-rows .28s,visibility}.advanced-body-inner{flex-direction:column;gap:14px;min-height:0;padding-top:12px;display:flex;overflow:hidden}.advanced-body.open .advanced-body-inner{padding-bottom:12px}.reset-btn{border:1px solid var(--border-interactive);color:var(--muted);font-family:inherit;font-size:var(--text-sm);cursor:pointer;background:0 0;border-radius:99px;align-self:center;align-items:center;gap:6px;min-height:44px;margin-top:6px;padding:5px 14px;font-weight:500;transition:border-color .15s,color .15s;display:flex}.reset-btn:hover{border-color:var(--accent);color:var(--accent)}.ctrl-row{grid-template-columns:104px minmax(0,1fr);align-items:center;gap:16px;padding-top:16px;display:grid}.ctrl-label{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-weight:500}.slider-val-row{align-items:center;gap:8px;display:flex}.slider-val-row input[type=range]{flex:1;min-width:0}.ctrl-val{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;text-align:right;min-width:3ch}.seg-btns{border:1px solid var(--border-interactive);border-radius:8px;width:fit-content;display:flex;overflow:hidden}.seg-btn{border:none;border-left:1px solid var(--border-interactive);color:var(--muted);font-family:inherit;font-size:var(--text-md);cursor:pointer;white-space:nowrap;background:0 0;height:44px;padding:6px 16px;font-weight:500;transition:background .1s,color .1s}.seg-btn:first-child{border-left:none}.seg-btn:hover:not(.on){background:var(--accent-glow);color:var(--text)}.seg-btn.on{background:var(--accent);color:var(--on-accent);font-weight:600}.toggle-btn{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);font-family:inherit;font-size:var(--text-sm);letter-spacing:.06em;cursor:pointer;border-radius:99px;justify-self:end;height:44px;padding:4px 20px;font-weight:700;transition:background .15s,border-color .15s,color .15s}.toggle-btn[aria-pressed=false]{border-color:var(--border-interactive);color:var(--muted);background:0 0}@media (width<=380px){.ctrl-row{grid-template-columns:1fr;gap:6px}}@media (width<=480px){.seg-btns{scrollbar-width:none;width:100%;max-width:120px;overflow-x:auto}.seg-btns::-webkit-scrollbar{display:none}}@media (width>=769px){.ctrl-row{grid-template-columns:116px minmax(0,1fr)}}.mode-ramp-group{flex-direction:column;gap:0;width:100%;display:flex}.mode-switcher{border:1px solid var(--border-interactive);border-radius:12px;width:100%;display:flex;overflow:hidden}.mode-btn{border:none;border-left:1px solid var(--border-interactive);color:var(--muted);font-family:inherit;font-size:var(--text-md);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;flex:1;justify-content:center;align-items:center;gap:6px;height:44px;padding:4px 16px;font-weight:600;transition:background .1s,color .1s;display:flex}.mode-btn:first-child{border-left:none}.mode-btn:hover:not(.on){background:var(--accent-glow);color:var(--text)}.mode-btn.on{background:var(--accent);color:var(--on-accent)}.mode-btn.on .train-active-dot{background:#0b0b0d}.ramp-panel-inner{flex-direction:column;gap:14px;width:100%;display:flex}.train-summary-row{align-items:stretch;gap:8px;width:100%;padding-top:12px;display:flex}.train-summary-row[hidden]{display:none}.train-summary-row .train-summary{flex:1;min-width:0}.train-edit-btn{border:1px solid var(--border-interactive);min-height:44px;color:var(--muted);font-family:inherit;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;border-radius:8px;flex:none;padding:4px 12px;font-weight:600;transition:border-color .15s,color .15s}.train-edit-btn:hover{border-color:var(--accent);color:var(--accent)}.train-mid-config{flex-direction:column;gap:14px;width:100%;display:flex}.train-mid-config.hidden,.train-stop-config.hidden,.count-in-config.hidden{display:none}.count-in-config{border-left:2px solid var(--border-interactive);border-radius:0 0 0 4px;padding-left:12px}.ctrl-num{appearance:none;border:1px solid var(--border-interactive);color:var(--text);font-family:inherit;font-size:var(--text-input);text-align:center;background:0 0;border-radius:8px;justify-self:start;width:80px;padding:6px 10px;font-weight:500}.ctrl-num:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}.ctrl-num::-webkit-inner-spin-button{appearance:none;margin:0}.ctrl-num::-webkit-outer-spin-button{appearance:none;margin:0}.ctrl-num[type=number]{appearance:textfield}.ctrl-row--top{padding-top:1rem}.train-summary{font-size:var(--text-sm);font-variant-numeric:tabular-nums;color:var(--text);text-align:center;border:1px solid var(--border);background:#ffffff08;border-radius:8px;padding:8px 12px;line-height:1.5}.train-stage{border-left:2px solid var(--accent);background:#f59e0b0a;border-radius:0 8px 8px 0;flex-direction:column;gap:12px;width:100%;padding:10px 12px;display:flex}.train-stage--2{border-left-color:var(--color-count-in);background:#60a5fa0a}.train-stage-label{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}.train-stage--2 .train-stage-label{color:var(--color-count-in)}.train-stage-break{align-items:center;gap:8px;width:100%;display:flex}.train-stage-break-line{border-top:1px dashed var(--border-interactive);flex:1;height:1px}.train-stage-break-btn{border:1px dashed var(--border-interactive);color:var(--muted);font-family:inherit;font-size:var(--text-xs);letter-spacing:.08em;cursor:pointer;white-space:nowrap;background:0 0;border-radius:99px;height:44px;padding:4px 14px;font-weight:600;transition:border-color .15s,color .15s,background .15s}.train-stage-break-btn:hover{border-color:var(--color-count-in);color:var(--color-count-in);border-style:solid}.train-stage-break-btn[aria-pressed=true]{border-color:var(--color-count-in);color:var(--color-count-in);background:#60a5fa14;border-style:solid}.num-stepper{border:1px solid var(--border-interactive);border-radius:8px;align-items:center;width:fit-content;display:flex;overflow:hidden}.num-step{color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;justify-content:center;align-items:center;min-width:28px;height:44px;padding:0 8px;font-size:1rem;line-height:1;transition:background .1s,color .1s;display:flex}.num-step:first-child{border-right:1px solid var(--border-interactive)}.num-step:last-child{border-left:1px solid var(--border-interactive)}.num-step:hover{background:var(--accent-glow);color:var(--accent)}.num-step:active{background:var(--accent-glow)}.num-stepper .ctrl-num{border:none;border-radius:0;width:58px;min-width:54px;height:44px}.train-every-hint{font-size:var(--text-xs);color:var(--muted);text-align:left;min-height:1em;line-height:1}.train-active-dot{background:var(--accent);vertical-align:middle;opacity:0;border-radius:50%;width:5px;height:5px;margin-left:4px;transition:opacity .3s;display:inline-block}.train-active-dot.active{opacity:1;animation:1.4s ease-in-out infinite train-pulse}@keyframes train-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.6)}}@media (width<=380px){.num-stepper{width:100%}.num-stepper .ctrl-num{flex:1;width:auto;min-width:0}}@media (width>=769px){.mode-btn{height:48px}}.sound-swing-group,.groove-group{flex-direction:column;gap:8px;width:100%;display:flex}.groove-select{background:var(--card);border:1px solid var(--border-interactive);width:100%;height:44px;color:var(--text);font-family:inherit;font-size:var(--text-btn);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9ab0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;border-radius:8px;padding:0 12px;transition:border-color .15s}.groove-select:hover,.groove-select:focus{border-color:var(--accent);outline:none}.groove-select option,.groove-select optgroup{background:var(--bg);color:var(--text)}.meter-group.groove-active{opacity:.35;pointer-events:none}.groove-lock-hint{font-size:var(--text-xs);color:var(--muted);min-height:1em;line-height:1.4;display:none}.meter-group.groove-active .groove-lock-hint{display:block}.meter-group.groove-active~.groove-group .groove-select{border-color:var(--accent)}@media (width<=480px){.sound-swing-group{gap:16px}}.conductor-overlay{z-index:9999;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;display:none;position:fixed;inset:0}body.conductor-active .conductor-overlay{display:flex}.conductor-content{z-index:1;flex-direction:column;align-items:center;gap:.5rem;display:flex;position:relative}.conductor-beats{pointer-events:none;width:min(90vw,640px);margin-bottom:1rem}.conductor-beats .beat-dot{width:clamp(28px,6vmin,56px);height:clamp(28px,6vmin,56px)}.conductor-beats[data-mode=groove] .beat-dot{width:clamp(22px,4vmin,36px);height:clamp(22px,4vmin,36px)}.conductor-bpm-num{letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(6rem,30vmin,20rem);font-weight:700;line-height:1}.conductor-bpm-label{letter-spacing:.35em;text-transform:uppercase;color:var(--muted);font-size:clamp(.6rem,2.5vmin,1.2rem);font-weight:600}.conductor-tempo-marking{color:var(--muted);min-height:1.2em;font-size:clamp(1rem,5vmin,3rem);font-style:italic}.conductor-hint{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.6;pointer-events:none;white-space:nowrap;font-weight:600;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)}.conductor-info{color:var(--muted);letter-spacing:.06em;text-align:center;overflow-wrap:break-word;max-width:min(92vw,40rem);min-height:1.5em;padding-inline:1rem;font-size:clamp(.75rem,2vmin,1.1rem)}.conductor-ramp{color:var(--accent);letter-spacing:.04em;text-wrap:balance;overflow-wrap:break-word;margin-top:.4em;font-size:clamp(.78rem,1.8vmin,1rem);line-height:1.35}.conductor-close{border:1px solid var(--border-interactive);width:44px;height:44px;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:10px;justify-content:center;align-items:center;transition:border-color .15s,color .15s;display:flex;position:absolute;top:1.25rem;right:1.25rem}.conductor-close:hover{border-color:var(--accent);color:var(--accent)}main{flex-direction:column;align-items:center;gap:1.75rem;width:100%;display:flex}.hint{font-size:var(--text-xs);color:var(--muted);letter-spacing:.04em}.footer{flex-direction:column;align-items:center;gap:.2rem;display:flex}.copyright,.version,.legal-link{font-size:var(--text-xs);color:var(--muted);letter-spacing:.04em}.legal-link a{color:var(--muted);text-decoration:none}.legal-link a:hover{color:var(--text)}.feature-description{max-width:480px;margin-top:1.5rem;padding:20px}.feature-description h2{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem;font-weight:600}.feature-description h3{font-size:var(--text-sm);color:var(--text);letter-spacing:.03em;margin:.75rem 0 .15rem;padding:0;font-weight:600}.feature-description h3:first-of-type{margin-top:0}.feature-description p{font-size:var(--text-body);color:var(--muted);margin:0;line-height:1.6}.faq{max-width:480px;margin-top:1.5rem;padding:20px}.faq-heading{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem;font-weight:600}.faq dl{flex-direction:column;gap:.75rem;display:flex}.faq-item dt{font-size:var(--text-sm);color:var(--text);letter-spacing:.03em;margin:0 0 .15rem;padding:0;font-weight:600}.faq-item dd{font-size:var(--text-body);color:var(--muted);margin:0;line-height:1.6}#pwa-update{background:var(--card);border:1px solid var(--border-interactive);color:var(--text);z-index:9999;white-space:nowrap;border-radius:12px;align-items:center;gap:.75rem;padding:.6rem .75rem .6rem 1rem;font-size:.8rem;display:flex;position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);box-shadow:0 4px 24px #00000080}#pwa-update[hidden]{display:none}#pwa-update-btn{background:var(--accent);color:var(--on-accent);cursor:pointer;border:none;border-radius:7px;padding:.3rem .8rem;font-family:inherit;font-size:.78rem;font-weight:600}#pwa-update-btn:hover{filter:brightness(1.1)}body.cat-mode #pwa-update{bottom:calc(26px + env(safe-area-inset-bottom,0px) + 1.25rem)}@media (width<=899px){#pwa-update{bottom:calc(var(--transport-h) + env(safe-area-inset-bottom,0px) + 1rem)}body.cat-mode #pwa-update{bottom:calc(26px + var(--transport-h) + env(safe-area-inset-bottom,0px) + 1rem)}}@media (width<=480px){.hint{display:none}}@media (width>=481px) and (width<=768px){.feature-description,.faq{max-width:600px}}@media (width>=769px){.feature-description,.faq{max-width:640px}}body.cat-mode,body.cat-mode select,body.cat-mode input,body.cat-mode button{font-family:Comic Neue,Comic Sans MS,Comic Sans,cursive}body.cat-mode #lolcat-caption,body.cat-mode #lolcat-caption-2,body.cat-mode #lolcat-caption-3{font-family:Impact,Arial Black,sans-serif}body.cat-mode{--bg:#0d001a;--card:#1a0030;--border:#7c3aed;--border-interactive:#c026d3;--accent:#f0abfc;--accent-glow:#f0abfc38;--text:#fce7f3;--muted:#c4b5fd;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='28' font-size='28'%3E%F0%9F%90%BE%3C/text%3E%3C/svg%3E") 14 14,auto;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px) + 1.5rem)}body.cat-mode:before{content:"";z-index:-1;pointer-events:none;will-change:opacity;background-image:radial-gradient(1.5px 1.5px at 5% 8%,#ffffffe6 0,#0000 100%),radial-gradient(1px 1px at 12% 22%,#ffffffb3 0,#0000 100%),radial-gradient(2px 2px at 18% 55%,#fffc 0,#0000 100%),radial-gradient(1px 1px at 24% 35%,#fff9 0,#0000 100%),radial-gradient(1.5px 1.5px at 30% 70%,#ffffffe6 0,#0000 100%),radial-gradient(1px 1px at 38% 15%,#ffffffb3 0,#0000 100%),radial-gradient(2px 2px at 42% 88%,#fffc 0,#0000 100%),radial-gradient(1px 1px at 50% 42%,#fff9 0,#0000 100%),radial-gradient(1.5px 1.5px at 55% 62%,#ffffffe6 0,#0000 100%),radial-gradient(1px 1px at 62% 28%,#ffffffb3 0,#0000 100%),radial-gradient(2px 2px at 68% 78%,#fffc 0,#0000 100%),radial-gradient(1px 1px at 73% 5%,#fff9 0,#0000 100%),radial-gradient(1.5px 1.5px at 80% 48%,#ffffffe6 0,#0000 100%),radial-gradient(1px 1px at 87% 92%,#ffffffb3 0,#0000 100%),radial-gradient(2px 2px at 93% 33%,#fffc 0,#0000 100%),radial-gradient(1px 1px at 96% 18%,#fff9 0,#0000 100%),radial-gradient(1px 1px at 3% 66%,#ffffffb3 0,#0000 100%),radial-gradient(2px 2px at 15% 80%,#fffc 0,#0000 100%),radial-gradient(1px 1px at 48% 95%,#fff9 0,#0000 100%),radial-gradient(1.5px 1.5px at 75% 10%,#ffffffe6 0,#0000 100%),radial-gradient(1px 1px at 88% 55%,#ffffffb3 0,#0000 100%),radial-gradient(2px 2px at 60% 5%,#ffc8ff99 0,#0000 100%),radial-gradient(1px 1px at 35% 93%,#c8ffff99 0,#0000 100%),radial-gradient(1px 1px at 7% 43%,#ffffff80 0,#0000 100%),radial-gradient(2px 2px at 52% 17%,#ffb4ffb3 0,#0000 100%),radial-gradient(1px 1px at 83% 75%,#fff9 0,#0000 100%),radial-gradient(1.5px 1.5px at 28%,#fffc 0,#0000 100%),radial-gradient(1px 1px at 65% 38%,#fff9 0,#0000 100%),radial-gradient(1px 1px at 91% 62%,#c8c8ffb3 0,#0000 100%),radial-gradient(2px 2px at 44% 72%,#ffffff80 0,#0000 100%);animation:3s ease-in-out infinite alternate cat-stars;position:fixed;inset:0}@keyframes cat-stars{0%{opacity:.4}to{opacity:1}}body.cat-mode .card{border-color:#7c3aed;box-shadow:0 0 40px #c026d340,0 0 80px #7c3aed1a}body.cat-mode .beat-dot.lit{background:#f0abfc;border-color:#f0abfc}body.cat-mode .beat-dot.lit[data-state=accent]{box-shadow:0 0 0 2px var(--card), 0 0 0 4px #f0abfc, 0 0 8px #f0abfc, 0 0 16px #c026d3}body.cat-mode .sub-btn.on,body.cat-mode .seg-btn.on,body.cat-mode .mode-btn.on{color:#fff;background:#c026d3}body.cat-mode .sub-btn.on .sub-icon{fill:#fff}body.cat-mode .mode-btn.on .train-active-dot{background:#fce7f3}body.cat-mode .toggle-btn[aria-pressed=true]{color:#fff;background:#c026d3;border-color:#c026d3}body.cat-mode input[type=range]{background:linear-gradient(to right, #c026d3 var(--fill,0%), var(--border-interactive) var(--fill,0%))}body.cat-mode input[type=range]::-webkit-slider-thumb{background:#f0abfc}body.cat-mode input[type=range]::-moz-range-thumb{background:#f0abfc}body.cat-mode .play{color:#f0abfc;border-color:#f0abfc}body.cat-mode .play.on{color:#fff;will-change:filter;background:linear-gradient(90deg,#ff0080,#ff8c00,gold,#00e87a,#00cfff,#8000ff,#ff0080);border-color:#0000;animation:1.5s linear infinite cat-rainbow-btn;box-shadow:0 0 40px #ff008080}body.cat-mode .play.on:hover{background:linear-gradient(90deg,#ff0080,#ff8c00,gold,#00e87a,#00cfff,#8000ff,#ff0080)}@keyframes cat-rainbow-btn{to{filter:hue-rotate(360deg)}}body.cat-mode .train-stage{background:#c026d30f;border-left-color:#c026d3}body.cat-mode .train-stage-label{color:#f0abfc}body.cat-mode .groove-select{background-color:var(--card)}@keyframes cat-page-wobble{0%{transform:rotate(0)}25%{transform:rotate(.75deg)}75%{transform:rotate(-.75deg)}to{transform:rotate(0)}}@media (width>=900px){body.cat-mode.cat-playing>main{transform-origin:50%;animation:4s ease-in-out infinite cat-page-wobble}}@keyframes cat-rainbow-glow{0%{filter:drop-shadow(0 0 3px #ff0080)drop-shadow(0 0 12px #ff008080)}16%{filter:drop-shadow(0 0 3px #ff8c00)drop-shadow(0 0 12px #ff8c0080)}33%{filter:drop-shadow(0 0 3px gold)drop-shadow(0 0 12px #ffd70080)}50%{filter:drop-shadow(0 0 3px #00e87a)drop-shadow(0 0 12px #00e87a80)}66%{filter:drop-shadow(0 0 3px #00cfff)drop-shadow(0 0 12px #00cfff80)}83%{filter:drop-shadow(0 0 3px #8000ff)drop-shadow(0 0 12px #8000ff80)}to{filter:drop-shadow(0 0 3px #ff0080)drop-shadow(0 0 12px #ff008080)}}@media (width>=900px){body.cat-mode.cat-playing .card{will-change:filter;border-color:#0000;animation:2s linear infinite cat-rainbow-glow}}#lolcat-caption{top:max(8px, env(safe-area-inset-top,8px));color:#fff;text-shadow:2px 2px #000,-2px -2px #000,2px -2px #000,-2px 2px #000,0 2px #000,2px 0 #000,0 -2px #000,-2px 0 #000;text-align:center;z-index:9994;pointer-events:none;opacity:0;white-space:nowrap;text-overflow:ellipsis;max-width:90vw;font-family:Impact,Arial Black,sans-serif;font-size:clamp(.85rem,3vw,1.6rem);font-style:normal;transition:opacity .5s;position:fixed;left:50%;overflow:hidden;transform:translate(-50%)}body.cat-mode #lolcat-caption{opacity:1}#lolcat-caption-2{bottom:calc(3.5rem + env(safe-area-inset-bottom,0px));color:#fff;text-shadow:2px 2px #000,-2px -2px #000,2px -2px #000,-2px 2px #000;z-index:9994;pointer-events:none;opacity:0;text-overflow:ellipsis;white-space:nowrap;max-width:38vw;font-family:Impact,Arial Black,sans-serif;font-size:clamp(.6rem,2vw,1rem);font-style:normal;transition:opacity .5s;position:fixed;left:1.5rem;overflow:hidden;transform:none}#lolcat-caption-3{transform-origin:100%;color:#fff;text-shadow:2px 2px #000,-2px -2px #000,2px -2px #000,-2px 2px #000;z-index:9994;pointer-events:none;opacity:0;white-space:nowrap;font-family:Impact,Arial Black,sans-serif;font-size:clamp(.5rem,1.4vw,.85rem);font-style:normal;transition:opacity .5s;position:fixed;top:50%;right:0;transform:translateY(-50%)rotate(90deg)}body.cat-mode #lolcat-caption-2{opacity:.8}body.cat-mode #lolcat-caption-3{opacity:.6}#cat-ticker{height:calc(26px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);z-index:9989;opacity:0;background:#0a0016e0;border-top:1px solid #c026d3;align-items:center;transition:opacity .4s;display:flex;position:fixed;bottom:0;left:0;right:0;overflow:hidden}body.cat-mode #cat-ticker{opacity:1}#cat-ticker-inner{white-space:nowrap;letter-spacing:.05em;color:#f0abfc;will-change:transform;font-family:Impact,Arial Black,sans-serif;font-size:.7rem}.cat-rain-emoji{pointer-events:none;z-index:9988;-webkit-user-select:none;user-select:none;animation:cat-rain-fall var(--fall-dur,3s) linear forwards;position:fixed;top:-50px}@keyframes cat-rain-fall{0%{opacity:1;transform:translateY(0)rotate(0)}80%{opacity:1}to{opacity:0;transform:translateY(calc(100vh + 60px))rotate(720deg)}}.cat-paw-trail{pointer-events:none;z-index:9987;-webkit-user-select:none;user-select:none;font-size:1rem;animation:.85s ease-out forwards cat-paw-fade;position:fixed;transform:translate(-50%,-50%)}@keyframes cat-paw-fade{0%{opacity:.9;transform:translate(-50%, -50%) scale(1) rotate(var(--rot,0deg))}to{opacity:0;transform:translate(-50%, -75%) scale(.3) rotate(var(--rot,0deg))}}#cat-beat-emoji{pointer-events:none;opacity:0;z-index:9993;-webkit-user-select:none;user-select:none;transform-origin:50%;font-size:2.4rem;line-height:1;position:fixed}#keyboard-cat{bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:9991;pointer-events:none;opacity:0;-webkit-user-select:none;user-select:none;font-size:1.7rem;line-height:1;transition:opacity .4s;position:fixed;right:1.25rem}body.cat-mode.cat-playing #keyboard-cat{opacity:1;animation:.42s ease-in-out infinite alternate keyboard-cat-jam}@keyframes keyboard-cat-jam{0%{transform:translateY(0)rotate(-6deg)scale(1)}to{transform:translateY(-7px)rotate(6deg)scale(1.1)}}@media (prefers-reduced-motion:reduce){.advanced-body,.advanced-toggle .chevron,.train-active-dot{transition:none;animation:none}body.cat-mode>main,body.cat-mode .card,body.cat-mode .play.on,#keyboard-cat,body.cat-mode:before{will-change:auto;animation:none!important}}