@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap";:root{--color-background: #f8f4eb;--color-background-light: #fdfbf7;--color-surface: #f5f0e3;--color-surface-hover: #efe9d8;--color-primary: #c9a227;--color-primary-light: #ddb84d;--color-primary-dark: #a68520;--color-primary-glow: rgba(201, 162, 39, .3);--color-note-green: #8fa03f;--color-note-green-light: #b5c45f;--color-note-yellow: #c9a227;--color-note-red: #c94a4a;--color-note-orange: #d4874d;--color-text-primary: #3d3d3d;--color-text-secondary: #7a7a6c;--color-text-muted: #a5a595;--color-text-light: #c5c5b5;--color-staff-line: rgba(180, 175, 160, .4);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);--shadow-glow: 0 0 20px var(--color-primary-glow);--font-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-display: "Outfit", var(--font-primary);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 9999px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-primary);background:var(--color-background);color:var(--color-text-primary);line-height:1.5;height:100vh;height:100dvh;overflow:hidden}#root{width:100%;height:100%;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;line-height:1.2}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.app{display:flex;flex-direction:column;height:100%;width:100%;background:linear-gradient(180deg,var(--color-background-light) 0%,var(--color-background) 100%);position:relative;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);position:relative;z-index:10}.header__back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--color-text-secondary);transition:color var(--transition-fast)}.header__back:hover{color:var(--color-primary)}.header__title{text-align:center;flex:1}.header__label{font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--spacing-xs)}.header__name{font-size:1rem;font-weight:600;color:var(--color-text-primary)}.header__settings{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--color-text-secondary);transition:color var(--transition-fast)}.header__settings:hover{color:var(--color-primary)}.timer-section{position:relative;padding:var(--spacing-md) 0}.timer-section .waveform{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:80%;margin:0;opacity:.7;z-index:0}.timer-section .timer{position:relative;z-index:1}.timer{text-align:center;padding:var(--spacing-sm) 0}.timer__display{font-family:var(--font-display);font-size:4rem;font-weight:300;color:var(--color-text-primary);letter-spacing:-.02em;position:relative}.timer__display .decimal{font-size:2.5rem;color:var(--color-text-muted);font-weight:300}.info-badges{display:flex;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-md)}.badge{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-full);font-size:.85rem;font-weight:500;color:var(--color-text-secondary);box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.badge__icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}@keyframes beatFlash{0%{transform:scale(1);background:var(--color-surface)}10%{transform:scale(1.05);background:var(--color-primary-glow)}to{transform:scale(1);background:var(--color-surface)}}.badge--bpm.flashing{animation:beatFlash var(--beat-duration, .5s) ease-out infinite}.badge--bpm .badge__icon{color:var(--color-primary)}.badge--key .badge__icon{color:var(--color-note-green)}.waveform{height:50px;margin:0 var(--spacing-lg);margin-top:calc(-1 * var(--spacing-lg));margin-bottom:var(--spacing-sm);position:relative;overflow:hidden}.waveform__svg{width:100%;height:100%}.waveform__path{stroke:var(--color-primary-light);stroke-width:2;fill:none;transition:opacity .3s ease,stroke-width .3s ease}.waveform__gradient-fill{fill:url(#waveformGradient);transition:opacity .3s ease}.note-display{flex:1;position:relative;margin:0 var(--spacing-lg);margin-bottom:var(--spacing-md);min-height:200px;background:var(--color-background-light);border-radius:var(--radius-lg);overflow:hidden;padding-left:30px}.note-display__staff-svg{position:absolute;inset:0 0 0 30px;width:calc(100% - 30px);height:100%;pointer-events:none}.note-display__notes{position:absolute;inset:0 0 0 30px;pointer-events:none}.note-display__playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--color-primary);opacity:.4;pointer-events:none}.note-display__pitch-line{position:absolute;top:5%;bottom:5%;width:2px;border-radius:1px;opacity:.7;transform:translate(-50%)}.note-dot{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 2px #00000026}.note-dot--current{width:12px;height:12px;box-shadow:0 0 8px currentColor;animation:pitchPulse 1s ease-in-out infinite}.note-duration-bar{position:absolute;height:3px;border-radius:1.5px;transform:translateY(-50%);opacity:.5}.note-display__octave-labels{position:absolute;left:0;top:0;bottom:0;width:30px;display:flex;flex-direction:column;pointer-events:none}.octave-label{position:absolute;left:4px;transform:translateY(-50%);font-size:.6rem;font-weight:500;color:var(--color-text-muted);opacity:.7}.note-display__label{position:absolute;right:8px;transform:translateY(-50%);background:var(--color-primary);color:#fff;font-size:.65rem;font-weight:600;padding:3px 6px;border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-sm);z-index:10}@keyframes pitchPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.9}}.strudel-overlay{position:absolute;inset:0;background:#f8f4ebe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);z-index:100;animation:fadeIn var(--transition-normal)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.strudel-overlay__content{background:#fff;padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:400px;display:flex;flex-direction:column;gap:var(--spacing-md)}.strudel-overlay__content h3{color:var(--color-primary);font-size:1.25rem;margin-bottom:var(--spacing-xs)}.strudel-code{background:#2d2d2d;color:#f8f8f2;padding:var(--spacing-md);border-radius:var(--radius-md);font-family:monospace;font-size:.9rem;overflow-x:auto;min-height:80px}.strudel-code pre{margin:0;white-space:pre-wrap;word-wrap:break-word}.strudel-overlay__actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-sm)}.overlay-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast);border:none;background:var(--color-primary);color:#fff}.overlay-btn:hover{background:var(--color-primary-dark)}.overlay-btn--close{background:var(--color-surface);color:var(--color-text-secondary)}.overlay-btn--close:hover{background:var(--color-surface-hover)}.note{position:relative;display:flex;flex-direction:column;align-items:center;animation:noteAppear .3s ease-out}@keyframes noteAppear{0%{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.note__stem{width:3px;border-radius:2px;min-height:40px;max-height:160px;transition:height var(--transition-normal)}.note__head{width:16px;height:12px;border-radius:50%;transform:rotate(-20deg);margin-top:-2px}.note__label{position:absolute;right:-40px;top:50%;transform:translateY(-50%);background:var(--color-primary);color:#fff;font-size:.7rem;font-weight:600;padding:4px 8px;border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-md)}.note--excellent .note__stem,.note--excellent .note__head{background:var(--color-note-green)}.note--good .note__stem,.note--good .note__head{background:var(--color-note-yellow)}.note--fair .note__stem,.note--fair .note__head{background:var(--color-note-orange)}.note--poor .note__stem,.note--poor .note__head{background:var(--color-note-red)}.note--current{z-index:10}.note--current .note__stem{box-shadow:0 0 12px currentColor}.note--current:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:6px;height:6px;background:var(--color-primary);border-radius:50%;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:translate(-50%) scale(1)}50%{opacity:.5;transform:translate(-50%) scale(1.5)}}.stats{display:flex;justify-content:space-around;padding:var(--spacing-lg);background:var(--color-surface);border-top:1px solid var(--color-staff-line)}.stat{text-align:center}.stat__label{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--spacing-xs)}.stat__value{font-size:1.1rem;font-weight:600}.stat__value--precision{color:var(--color-primary)}.stat__value--high{color:var(--color-note-green)}.stat__value--medium{color:var(--color-note-yellow)}.stat__value--low{color:var(--color-note-red)}.controls{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xl);padding:var(--spacing-lg);padding-bottom:var(--spacing-2xl);background:var(--color-surface)}.control-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:transparent;border:2px solid var(--color-text-light);border-radius:50%;cursor:pointer;color:var(--color-text-secondary);transition:all var(--transition-fast)}.control-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.control-btn--record{width:64px;height:64px;background:var(--color-primary);border:none;color:#fff;box-shadow:var(--shadow-glow);transition:all var(--transition-normal)}.control-btn--record:hover{background:var(--color-primary-dark);transform:scale(1.05)}.control-btn--record.recording{background:var(--color-note-red);animation:recordPulse 2s ease-in-out infinite}@keyframes recordPulse{0%,to{box-shadow:0 0 #c94a4a66}50%{box-shadow:0 0 0 12px #c94a4a00}}.control-btn--record .icon-stop{width:20px;height:20px;background:#fff;border-radius:4px}.control-btn--record .icon-mic{width:24px;height:24px}.record-label{font-size:.75rem;font-weight:600;letter-spacing:.05em;color:var(--color-text-muted);margin-left:var(--spacing-sm)}.initialize-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-2xl);text-align:center}.initialize-screen__icon{width:80px;height:80px;margin-bottom:var(--spacing-xl);color:var(--color-primary);opacity:.8}.initialize-screen__title{font-size:1.5rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-text-primary)}.initialize-screen__description{font-size:1rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);max-width:300px;line-height:1.6}.initialize-screen__button{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background:var(--color-primary);color:#fff;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-md),var(--shadow-glow);transition:all var(--transition-fast)}.initialize-screen__button:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow)}.error-message{background:#c94a4a1a;border:1px solid var(--color-note-red);color:var(--color-note-red);padding:var(--spacing-md);border-radius:var(--radius-md);margin:var(--spacing-lg);text-align:center;font-size:.9rem}.current-pitch{text-align:center;padding:var(--spacing-md) 0}.current-pitch__note{font-family:var(--font-display);font-size:3rem;font-weight:700;color:var(--color-primary);text-shadow:0 2px 8px var(--color-primary-glow)}.current-pitch__octave{font-size:1.5rem;font-weight:400}.current-pitch__cents{font-size:.9rem;color:var(--color-text-secondary);margin-top:var(--spacing-xs)}.current-pitch__cents.sharp{color:var(--color-note-red)}.current-pitch__cents.flat{color:var(--color-note-orange)}.current-pitch__cents.perfect{color:var(--color-note-green)}.accuracy-meter{height:6px;background:var(--color-surface);border-radius:var(--radius-full);margin:var(--spacing-md) var(--spacing-xl);overflow:hidden;position:relative}.accuracy-meter__fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-fast),background var(--transition-fast)}.accuracy-meter__fill.excellent{background:linear-gradient(90deg,var(--color-note-green-light),var(--color-note-green))}.accuracy-meter__fill.good{background:linear-gradient(90deg,var(--color-note-yellow),var(--color-primary))}.accuracy-meter__fill.fair{background:linear-gradient(90deg,var(--color-note-orange),var(--color-note-yellow))}.accuracy-meter__fill.poor{background:linear-gradient(90deg,var(--color-note-red),var(--color-note-orange))}@media(min-width:768px){body{padding:var(--spacing-2xl)}.app{max-width:100%;width:100%;height:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.timer__display{font-size:5.5rem}.note-display{min-height:350px}.header__name{font-size:1.3rem}}@media(max-width:380px){:root{--spacing-lg: 16px;--spacing-xl: 24px}.timer__display{font-size:3rem}.timer__display .decimal{font-size:1.8rem}.badge{padding:var(--spacing-xs) var(--spacing-sm);font-size:.75rem}.control-btn--record{width:56px;height:56px}}.debug-overlay{position:absolute;top:var(--spacing-sm);left:var(--spacing-sm);right:var(--spacing-sm);background:#000000bf;color:#fff;padding:var(--spacing-sm);border-radius:var(--radius-sm);font-family:SF Mono,Monaco,Consolas,monospace;font-size:.65rem;line-height:1.4;pointer-events:none;z-index:20}.debug-overlay__row{display:flex;justify-content:space-between;margin-bottom:2px}.debug-overlay__label{color:#fff9}.debug-overlay__value{color:var(--color-primary-light);font-weight:500}.debug-overlay__value--good{color:var(--color-note-green-light)}.debug-overlay__value--warn{color:var(--color-note-yellow)}.debug-overlay__value--bad{color:var(--color-note-red)}.mode-toggle{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--color-surface);border-radius:var(--radius-full);margin:0 var(--spacing-lg)}.mode-toggle__option{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-full);font-size:.85rem;font-weight:500;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.mode-toggle__option:hover{color:var(--color-text-secondary)}.mode-toggle__option.active{background:#fff;color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.settings-panel{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;visibility:hidden;transition:all var(--transition-normal);padding:var(--spacing-lg)}.settings-panel.open{opacity:1;visibility:visible}.settings-panel__content{background:var(--color-background-light);border-radius:var(--radius-lg);width:100%;max-width:400px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;transform:scale(.95);opacity:0;transition:all var(--transition-normal);overflow:hidden}.settings-panel.open .settings-panel__content{transform:scale(1);opacity:1}.settings-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-staff-line);flex-shrink:0}.settings-panel__title{font-size:1.1rem;font-weight:600}.settings-panel__close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border:none;border-radius:50%;cursor:pointer;color:var(--color-text-secondary);transition:all var(--transition-fast)}.settings-panel__close:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.settings-panel__body{padding:var(--spacing-lg);overflow-y:auto;flex:1}.settings-group{margin-bottom:var(--spacing-lg)}.settings-group:last-child{margin-bottom:0}.settings-group__title{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--spacing-sm)}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);margin-bottom:var(--spacing-xs);cursor:pointer;transition:all var(--transition-fast)}.setting-item:hover,.setting-item.active{background:var(--color-surface-hover)}.setting-item__label{font-size:.9rem;color:var(--color-text-primary)}.setting-item__value{font-size:.85rem;color:var(--color-text-secondary)}.setting-item__check{font-size:.85rem;color:var(--color-primary);font-weight:600;min-width:20px;text-align:right}.setting-item__hint{font-size:.75rem;color:var(--color-text-muted);padding:0 var(--spacing-sm);margin-top:calc(-1 * var(--spacing-xs));margin-bottom:var(--spacing-sm)}.toggle-switch{position:relative;width:44px;height:24px;cursor:pointer}.toggle-switch__track{position:absolute;inset:0;background:var(--color-text-light);border-radius:12px;transition:background var(--transition-fast)}.toggle-switch.on .toggle-switch__track{background:var(--color-primary)}.toggle-switch__thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.toggle-switch.on .toggle-switch__thumb{transform:translate(20px)}.slider-control{padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm)}.slider-control__labels{display:flex;justify-content:space-between;margin-top:var(--spacing-xs);padding:0 4px}.slider-control__labels span{font-size:.75rem;color:var(--color-text-muted);transition:color var(--transition-fast)}.slider-control__labels span.active{color:var(--color-primary);font-weight:600}.slider-control__input{width:100%;accent-color:var(--color-primary);cursor:pointer}.setting-item--column{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}.setting-item__row{display:flex;justify-content:space-between;align-items:center}.duration-options{display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.duration-option{flex:1;min-width:60px;padding:var(--spacing-xs);background:var(--color-background-light);border:1px solid var(--color-staff-line);border-radius:var(--radius-sm);font-size:.75rem;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.duration-option:hover{background:var(--color-surface)}.duration-option.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.loading-dots{display:inline-flex;gap:4px}.loading-dots span{width:8px;height:8px;background:var(--color-primary);border-radius:50%;animation:loadingBounce 1.4s ease-in-out infinite}.loading-dots span:nth-child(1){animation-delay:0s}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loadingBounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}