:root{--paper:#f9f6ee;--paper-2:#f2efe6;--surface:#fff;--surface-ink:#1b231f;--ink:#1b231f;--ink-muted:#6b7670;--ink-faint:#b8bfb9;--hairline:#e4e0d4;--hairline-strong:#d4cfc0;--green:#2bc97a;--green-deep:#1fa865;--green-soft:#2bc97a1f;--coral:#ff6b5b;--coral-deep:#e84c30;--coral-soft:#ff6b5b1f;--shadow-sm:0 1px 2px #1b231f0a;--shadow-md:0 2px 8px #1b231f0f;--shadow-lg:0 10px 28px #1b231f1a;--radius:14px;--radius-sm:7px;--radius-xs:3px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--font-body:"Space Grotesk", system-ui, -apple-system, sans-serif;--z-base:1;--z-raised:10;--z-overlay:100;--z-modal:1000;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1)}[data-theme=dark]{--paper:#14181a;--paper-2:#1a1f21;--surface:#1f2426;--surface-ink:#e8ede4;--ink:#e8ede4;--ink-muted:#8a938f;--ink-faint:#4d544f;--hairline:#2d3336;--hairline-strong:#3a4144}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--paper);color:var(--ink);text-rendering:optimizelegibility;font-feature-settings:"tnum" 1, "ss01" 1;height:100%}body{background:var(--paper);background-image:radial-gradient(circle at 20% 0,#2bc97a0a 0%,#0000 40%),radial-gradient(circle at 80% 100%,#ff6b5b08 0%,#0000 40%);background-attachment:fixed;flex-direction:column;min-height:100%;display:flex}#root{flex-direction:column;flex:1;display:flex}button{cursor:pointer;color:inherit;touch-action:manipulation;background:0 0;border:none;font-family:inherit}button:disabled{opacity:.35;cursor:default}input,select{color:inherit;font-family:inherit}:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--radius-xs)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.error-boundary{padding:var(--space-6);flex:1;justify-content:center;align-items:center;display:flex}.error-boundary__card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:var(--space-8) var(--space-6);text-align:center;align-items:center;gap:var(--space-3);flex-direction:column;max-width:360px;display:flex}.error-boundary__icon{color:var(--coral-deep);margin-bottom:var(--space-2)}.error-boundary__title{font-family:var(--font-mono);letter-spacing:.08em;color:var(--ink);text-transform:uppercase;font-size:13px;font-weight:700}.error-boundary__message{font-family:var(--font-body);color:var(--ink-muted);font-size:13px;font-weight:400;line-height:1.55}.error-boundary__btn{margin-top:var(--space-3);padding:var(--space-3) var(--space-6);border-radius:var(--radius-xs);background:var(--surface-ink);color:var(--green);font-family:var(--font-mono);letter-spacing:.12em;transition:opacity .2s var(--ease-out);font-size:11px;font-weight:700}.error-boundary__btn:hover{opacity:.85}.header{width:100%;margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:flex-start;display:flex}.header__brand{align-items:center;gap:var(--space-3);display:flex}.header__mark{font-family:var(--font-mono);color:var(--green-deep);font-size:26px;font-weight:400;line-height:1}.header__words{flex-direction:column;gap:2px;display:flex}.header__title{font-family:var(--font-mono);letter-spacing:.08em;color:var(--ink);font-size:15px;font-weight:700;line-height:1}.header__subtitle{font-family:var(--font-mono);letter-spacing:.14em;color:var(--ink-faint);font-size:9px;font-weight:500;line-height:1}.header__actions{gap:var(--space-2);display:flex}.header__icon-btn{border-radius:var(--radius-sm);border:1px solid var(--hairline);width:34px;height:34px;color:var(--ink-muted);background:var(--surface);transition:all .2s var(--ease-out);justify-content:center;align-items:center;display:flex}.header__icon-btn:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-soft)}.mode-selector{border-radius:var(--radius-sm);border:1px solid var(--hairline);background:var(--surface);width:100%;display:flex;overflow:hidden}.mode-selector__btn{padding:var(--space-3) var(--space-4);font-family:var(--font-mono);letter-spacing:.14em;color:var(--ink-muted);transition:all .2s var(--ease-out);text-align:center;border:none;border-right:1px solid var(--hairline);background:0 0;flex:1;font-size:11px;font-weight:700}.mode-selector__btn:last-child{border-right:none}.mode-selector__btn--active{background:var(--surface-ink);color:var(--green)}.mode-selector__btn:not(:disabled):hover:not(.mode-selector__btn--active){color:var(--green-deep);background:var(--paper-2)}.tempo-fraction{align-items:center;gap:var(--space-3);padding:var(--space-2) 0 var(--space-1);flex-direction:column;width:100%;display:flex}.tempo-fraction__ratio{justify-content:center;align-items:center;gap:var(--space-2);display:flex}.tempo-fraction__num,.tempo-fraction__den{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:center;width:130px;color:var(--ink);caret-color:var(--green);letter-spacing:-.02em;transition:transform .2s var(--ease-out);background:0 0;border:none;outline:none;padding:0;font-size:84px;font-weight:700;line-height:.9}.tempo-fraction__num:focus,.tempo-fraction__den:focus{transform:scale(1.02)}.tempo-fraction__num:disabled,.tempo-fraction__den:disabled{opacity:.45}.tempo-fraction__colon{font-family:var(--font-mono);color:var(--coral-deep);-webkit-user-select:none;user-select:none;font-size:64px;font-weight:400;line-height:.9}.tempo-fraction__readout{gap:var(--space-1) var(--space-6);width:100%;max-width:320px;padding:var(--space-3) var(--space-5);background:var(--paper-2);border-radius:var(--radius-sm);border:1px solid var(--hairline);grid-template-columns:1fr 1fr;display:grid}.tempo-fraction__readout-row{justify-content:space-between;align-items:baseline;gap:var(--space-3);display:flex}.tempo-fraction__readout-label{font-family:var(--font-mono);letter-spacing:.18em;color:var(--ink-faint);font-size:9px;font-weight:500}.tempo-fraction__readout-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);font-size:16px;font-weight:500}.tempo-fraction__readout-unit{color:var(--ink-muted);font-size:11px;font-weight:400}.film-strip{width:100%;padding:var(--space-3);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:opacity .3s var(--ease-out);flex-direction:column;gap:0;display:flex}.film-strip--dimmed{opacity:.4}.film-strip__sprockets{justify-content:space-between;height:10px;padding:3px 0;display:flex}.film-strip__hole{background:var(--hairline-strong);border-radius:1px;flex-shrink:0;width:6px;height:4px}.film-strip__stage{background:var(--paper-2);border-radius:var(--radius-xs);height:56px;position:relative;overflow:hidden}.film-strip__track{display:flex;position:absolute;inset:0}.film-strip__seg{height:100%}.film-strip__seg--back{border-right:1px dashed var(--hairline-strong);background:repeating-linear-gradient(90deg,#0000 0 11px,#1b231f0d 11px 12px)}.film-strip__seg--down{background:repeating-linear-gradient(90deg,#0000 0 7px,#1b231f12 7px 8px)}.film-strip__fill{background:linear-gradient(90deg, #2bc97a59 0%, var(--green) 100%);will-change:width;height:100%;position:absolute;top:0;left:0}.film-strip__tick{background:var(--ink-faint);width:2px;transition:background .2s var(--ease-out), box-shadow .2s var(--ease-out);position:absolute;top:-2px;bottom:-2px;transform:translate(-50%)}.film-strip__tick--active{background:var(--green-deep)}.film-strip__tick--impact.film-strip__tick--active{background:var(--coral);box-shadow:0 0 10px #ff6b5b8c}.film-strip__playhead{background:var(--ink);will-change:left;z-index:2;width:2px;position:absolute;top:-4px;bottom:-4px;transform:translate(-50%)}.film-strip__playhead:before{content:"";background:var(--ink);border-radius:1px 1px 0 0;width:8px;height:5px;position:absolute;top:-3px;left:50%;transform:translate(-50%)}.film-strip__labels{height:18px;margin-top:var(--space-2);position:relative}.film-strip__label{font-family:var(--font-mono);letter-spacing:.14em;color:var(--ink-faint);white-space:nowrap;transition:color .2s var(--ease-out);font-size:9px;font-weight:500;position:absolute;transform:translate(-50%)}.film-strip__label--impact{color:var(--coral-deep)}.film-strip__counter{padding-top:var(--space-1);font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-muted);justify-content:center;align-items:baseline;gap:6px;display:flex}.film-strip__counter-label{letter-spacing:.18em;color:var(--ink-faint);font-size:10px;font-weight:500}.film-strip__counter-num{color:var(--ink);font-size:18px;font-weight:700}.film-strip__counter-sep{color:var(--ink-faint);font-size:14px}.film-strip__counter-total{color:var(--ink-muted);font-size:14px;font-weight:500}.beat-indicators{justify-content:center;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4) 0 var(--space-1);transition:opacity .3s var(--ease-out);display:flex}.beat-indicators--dimmed{opacity:.35}.beat-indicators__dot{border:1.5px solid var(--hairline-strong);background:var(--surface);width:28px;height:28px;transition:background .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);border-radius:50%;justify-content:center;align-items:center;display:flex}.beat-indicators__num{font-family:var(--font-mono);color:var(--ink-faint);transition:color .25s var(--ease-out);font-size:11px;font-weight:700;line-height:1}.beat-indicators__dot--active{background:var(--green);border-color:var(--green);transform:scale(1.1)}.beat-indicators__dot--active .beat-indicators__num{color:var(--surface-ink)}.beat-indicators__dot--impact.beat-indicators__dot--active{background:var(--coral);border-color:var(--coral);transform:scale(1.25);box-shadow:0 0 10px #ff6b5b80}.playback-bar{justify-content:space-between;align-items:stretch;gap:var(--space-3);width:100%;padding:var(--space-3);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-sm);display:flex}.playback-bar__btn{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);border:1.5px solid var(--hairline-strong);color:var(--ink);background:var(--paper);transition:all .2s var(--ease-out);flex:1;display:flex}.playback-bar__btn:hover:not(:disabled){border-color:var(--green);color:var(--green-deep)}.playback-bar__btn:active:not(:disabled){transform:scale(.98)}.playback-bar__btn--playing{background:var(--surface-ink);border-color:var(--surface-ink);color:var(--green)}.playback-bar__btn--playing:hover{color:var(--coral)}.playback-bar__label{font-family:var(--font-mono);letter-spacing:.16em;font-size:11px;font-weight:700;line-height:1}.playback-bar__volume{align-items:center;gap:var(--space-2);padding:0 var(--space-3);border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--paper);display:flex}.playback-bar__vol-icon{color:var(--ink-faint);flex-shrink:0}.playback-bar__slider{appearance:none;background:var(--hairline-strong);cursor:pointer;border-radius:2px;outline:none;width:90px;height:3px}.playback-bar__slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--green);border:2px solid var(--surface);cursor:pointer;width:14px;height:14px;box-shadow:0 0 0 1px var(--green-deep);border-radius:50%}.playback-bar__slider::-moz-range-thumb{background:var(--green);border:2px solid var(--surface);cursor:pointer;width:14px;height:14px;box-shadow:0 0 0 1px var(--green-deep);border-radius:50%}.preset-selector{width:100%;padding:var(--space-4);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.preset-selector__header{margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:baseline;display:flex}.preset-selector__title{font-family:var(--font-mono);letter-spacing:.18em;color:var(--ink);font-size:10px;font-weight:700}.preset-selector__hint{font-family:var(--font-mono);letter-spacing:.16em;color:var(--ink-faint);font-size:8px;font-weight:500}.preset-selector__grid{gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(72px,1fr));display:grid}.preset-selector__btn{padding:var(--space-3) var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--hairline);background:var(--paper);transition:all .2s var(--ease-out);flex-direction:column;align-items:center;gap:2px;display:flex}.preset-selector__btn:not(:disabled):hover{border-color:var(--green);background:var(--green-soft)}.preset-selector__btn--active{background:var(--surface-ink);border-color:var(--surface-ink)}.preset-selector__ratio{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);font-size:15px;font-weight:700}.preset-selector__btn--active .preset-selector__ratio{color:var(--green)}.preset-selector__time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-faint);letter-spacing:.04em;font-size:10px;font-weight:500}.preset-selector__btn--active .preset-selector__time{color:var(--coral)}.settings-modal__backdrop{z-index:var(--z-modal);padding:var(--space-5);animation:modal-fade-in .2s var(--ease-out);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1b231f8c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}.settings-modal{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:400px;max-height:85vh;animation:modal-slide-up .25s var(--ease-out);flex-direction:column;display:flex;overflow:hidden}@keyframes modal-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-modal__header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;display:flex}.settings-modal__title{font-family:var(--font-mono);letter-spacing:.16em;color:var(--ink);font-size:12px;font-weight:700}.settings-modal__close{border-radius:var(--radius-xs);width:28px;height:28px;color:var(--ink-faint);transition:all .2s var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.settings-modal__close:hover{background:var(--paper-2);color:var(--ink)}.settings-modal__content{padding:var(--space-5);flex:1;overflow-y:auto}.settings-modal__section{margin-bottom:var(--space-6)}.settings-modal__section:last-child{margin-bottom:0}.settings-modal__section-title{font-family:var(--font-mono);letter-spacing:.18em;color:var(--ink-faint);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--hairline);font-size:10px;font-weight:700}.settings-modal__row{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.settings-modal__row:last-child{margin-bottom:0}.settings-modal__label{font-family:var(--font-body);color:var(--ink);flex-shrink:0;font-size:13px;font-weight:500}.settings-modal__control-group{align-items:center;gap:var(--space-2);flex:1;justify-content:flex-end;display:flex}.settings-modal__select{padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);border:1px solid var(--hairline-strong);background:var(--paper);color:var(--ink);font-family:var(--font-body);cursor:pointer;transition:border-color .2s var(--ease-out);outline:none;max-width:180px;font-size:13px}.settings-modal__select:hover,.settings-modal__select:focus{border-color:var(--green)}.settings-modal__slider{appearance:none;background:var(--hairline-strong);cursor:pointer;border-radius:2px;outline:none;flex:1;min-width:80px;height:3px}.settings-modal__slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--green);border:2px solid var(--surface);cursor:pointer;width:14px;height:14px;box-shadow:0 0 0 1px var(--green-deep);border-radius:50%}.settings-modal__slider::-moz-range-thumb{background:var(--green);border:2px solid var(--surface);cursor:pointer;width:14px;height:14px;box-shadow:0 0 0 1px var(--green-deep);border-radius:50%}.settings-modal__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-muted);text-align:right;min-width:48px;font-size:11px;font-weight:500}.settings-modal__preview-btn{padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);font-family:var(--font-mono);letter-spacing:.1em;color:var(--green-deep);border:1px solid var(--green);background:var(--green-soft);transition:all .2s var(--ease-out);white-space:nowrap;font-size:11px;font-weight:700}.settings-modal__preview-btn:hover{background:var(--green);color:var(--surface)}.settings-modal__toggle{padding:var(--space-2) var(--space-4);border-radius:var(--radius-xs);font-family:var(--font-mono);letter-spacing:.1em;transition:all .2s var(--ease-out);border:1px solid #0000;font-size:11px;font-weight:700}.settings-modal__toggle--on{background:var(--green);color:var(--surface-ink);border-color:var(--green)}.settings-modal__toggle--off{background:var(--paper);color:var(--ink-muted);border-color:var(--hairline-strong)}.settings-modal__reset-btn{width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xs);font-family:var(--font-mono);letter-spacing:.12em;color:var(--coral-deep);border:1px solid var(--coral);background:var(--coral-soft);transition:all .2s var(--ease-out);font-size:11px;font-weight:700}.settings-modal__reset-btn:hover{background:var(--coral);color:var(--surface)}.help__backdrop{z-index:var(--z-modal);padding:var(--space-5);animation:help-fade-in .2s var(--ease-out);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1b231f8c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@keyframes help-fade-in{0%{opacity:0}to{opacity:1}}.help{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:380px;animation:help-slide-up .25s var(--ease-out)}@keyframes help-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.help__header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;display:flex}.help__title{font-family:var(--font-mono);letter-spacing:.16em;color:var(--ink);font-size:11px;font-weight:700}.help__close{border-radius:var(--radius-xs);width:28px;height:28px;color:var(--ink-faint);transition:all .2s var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.help__close:hover{background:var(--paper-2);color:var(--ink)}.help__body{padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.help__text{font-family:var(--font-body);color:var(--ink-muted);font-size:13px;font-weight:400;line-height:1.6}.help__text strong{color:var(--ink);font-weight:600}.help__text--muted{padding-top:var(--space-3);border-top:1px solid var(--hairline);font-size:12px}.help__demo{background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:var(--space-4);align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.help__demo-ratio{align-items:baseline;gap:var(--space-2);font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);font-size:28px;font-weight:700;line-height:1;display:flex}.help__demo-colon{color:var(--coral-deep);font-weight:400}.help__demo-strip{border-radius:var(--radius-xs);width:100%;height:22px;display:flex;position:relative;overflow:hidden}.help__demo-back{background:var(--green-soft);border-right:1px dashed var(--hairline-strong);width:75%}.help__demo-down{background:var(--coral-soft);width:25%}.help__demo-tick{background:var(--ink-faint);width:2px;position:absolute;top:-2px;bottom:-2px;transform:translate(-50%)}.help__demo-tick--impact{background:var(--coral)}.help__demo-labels{width:100%;height:14px;position:relative}.help__demo-labels span{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-faint);font-size:10px;font-weight:500;position:absolute;transform:translate(-50%)}.app{padding:var(--space-6) var(--space-5) var(--space-10);align-items:center;gap:var(--space-4);flex-direction:column;flex:1;width:100%;max-width:440px;margin:0 auto;display:flex}.app__display{align-items:center;gap:var(--space-4);flex-direction:column;width:100%;display:flex}