:root{--bg-deep: #061a11;--bg-image: none;--card-bg: rgba(13, 42, 29, .7);--accent-blue: #22c55e;--accent-glow: rgba(34, 197, 94, .5);--text-main: #ffffff;--text-dim: #94a3b8;--text-accent: #4ade80;--button-dark: rgba(20, 61, 44, .8);--gradient-play: linear-gradient(135deg, #15803d 0%, #22c55e 100%);--shadow-accent: rgba(34, 197, 94, .4);--border-card: rgba(34, 197, 94, .3)}[data-theme=pink]{--bg-deep: #1a0f14;--card-bg: rgba(45, 27, 36, .7);--accent-blue: #f472b6;--accent-glow: rgba(244, 114, 182, .5);--text-accent: #f9a8d4;--button-dark: rgba(63, 37, 50, .8);--gradient-play: linear-gradient(135deg, #be185d 0%, #f472b6 100%);--shadow-accent: rgba(244, 114, 182, .4);--border-card: rgba(244, 114, 182, .3)}[data-theme=winter]{--bg-deep: #0f172a;--card-bg: rgba(30, 41, 59, .7);--accent-blue: #bae6fd;--accent-glow: rgba(186, 230, 253, .5);--text-accent: #7dd3fc;--button-dark: rgba(51, 65, 85, .8);--gradient-play: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%);--shadow-accent: rgba(56, 189, 248, .4);--border-card: rgba(186, 230, 253, .3)}[data-theme=autumn]{--bg-deep: #1a120b;--card-bg: rgba(45, 26, 11, .7);--accent-blue: #fbbf24;--accent-glow: rgba(251, 191, 36, .5);--text-accent: #fcd34d;--button-dark: rgba(63, 45, 27, .8);--gradient-play: linear-gradient(135deg, #b45309 0%, #fbbf24 100%);--shadow-accent: rgba(251, 191, 36, .4);--border-card: rgba(251, 191, 36, .3)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Outfit Variable,system-ui,-apple-system,sans-serif;background-color:var(--bg-deep);background-image:var(--bg-image);background-size:cover;background-position:center;background-repeat:no-repeat;color:var(--text-main);height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px;transition:background-color .8s cubic-bezier(.4,0,.2,1),background-image .8s cubic-bezier(.4,0,.2,1)}body:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,transparent 0%,rgba(0,0,0,.4) 100%);pointer-events:none;z-index:0}.metronome-container{width:100%;max-width:440px;height:min(840px,90dvh);background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-card);border-radius:64px;padding:clamp(24px,5dvh,48px) 32px clamp(16px,3dvh,32px);box-shadow:0 40px 80px -20px #000000e6,inset 0 1px 1px #ffffff1a;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;transition:border-color .5s cubic-bezier(.4,0,.2,1),box-shadow .5s cubic-bezier(.4,0,.2,1)}@media(max-width:480px){body{padding:0}.metronome-container{max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:env(safe-area-inset-top,16px) 24px env(safe-area-inset-bottom,16px)}}@media(max-height:500px){body{padding:0}.metronome-container{max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding:env(safe-area-inset-top,6px) 24px env(safe-area-inset-bottom,6px)}.app-nav{margin-bottom:6px}.theme-switcher{margin:4px 0}.theme-btn{width:28px;height:28px}}.page-content{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;transition:opacity .3s ease}.page-content.hidden{display:none}.header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(16px,4vh,48px)}.time-signature{position:relative;display:flex;align-items:center;gap:8px;background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0003}.time-signature select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:#fff;font-family:Outfit Variable,system-ui,-apple-system,sans-serif;font-weight:800;font-size:16px;cursor:pointer;outline:none;padding:0 28px 0 0;width:100%}.time-signature select option{background-color:#0f172a;color:#fff}.time-signature svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}.tempo-controls{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(16px,4vh,40px)}.slider-container{flex:1}.action-buttons{width:100%;display:flex;flex-direction:row;gap:12px;margin-bottom:0}.control-btn,.tap-btn,.info-block,.nav-item{background:#ffffff0d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d;color:#fff;transition:background .3s ease,box-shadow .3s ease}.control-btn{width:clamp(50px,7dvh,64px);height:clamp(50px,7dvh,64px);border-radius:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}.control-btn:active{background:#ffffff26;transform:scale(.95)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:#00000080;border-radius:3px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:34px;height:34px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 0 25px var(--accent-glow);border:6px solid var(--accent-blue)}.play-btn{flex:1;height:clamp(58px,9dvh,80px);background:var(--gradient-play);border-radius:24px;border:none;color:#fff;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;box-shadow:0 10px 30px var(--shadow-accent)}.tap-btn{width:90px;height:clamp(58px,9dvh,80px);border-radius:24px;font-weight:800;text-transform:uppercase;cursor:pointer}.beat-indicators{display:flex;justify-content:center;gap:16px;margin-bottom:clamp(12px,4vh,40px);min-height:20px}.beat-dot{width:clamp(8px,2vw,12px);height:clamp(8px,2vw,12px);background:#ffffff1a;border-radius:50%;transition:background .2s,box-shadow .2s,transform .2s}.beat-dot.active{background:var(--accent-blue);box-shadow:0 0 20px var(--accent-blue);transform:scale(1.3)}.beat-dot.active.first-beat{background:#ef4444;box-shadow:0 0 25px #ef444499;transform:scale(1.5)}.bpm-number{font-size:clamp(80px,30vw,140px);font-weight:900;line-height:1;letter-spacing:-6px;color:#fff}.bpm-label{font-size:clamp(10px,2vw,12px);font-weight:800;color:var(--text-dim);text-transform:uppercase;letter-spacing:3px;margin-bottom:clamp(12px,3vh,40px)}.tuner-start-btn{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:#fff;padding:10px 18px;border-radius:14px;font-weight:800;font-size:13px;display:flex;align-items:center;gap:10px}.mic-dot{width:10px;height:10px;background:#475569;border-radius:50%}.tuner-start-btn.active .mic-dot{background:#ef4444;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}.tuner-display{width:100%;background:#ffffff08;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:48px;padding:clamp(12px,4vh,40px) 20px;margin-bottom:clamp(12px,4vh,48px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 25px 50px -12px #00000080}.gauge-arc-container{position:relative;width:100%;max-width:280px;aspect-ratio:280 / 180;display:flex;align-items:center;justify-content:center;margin-bottom:-20px}.gauge-arc-svg{position:absolute;top:0;left:0;width:100%;height:100%}.arc-bg{fill:none;stroke:#ffffff0d;stroke-width:12;stroke-linecap:round}.arc-active{fill:none;stroke:var(--accent-blue);stroke-width:12;stroke-linecap:round;transition:stroke .1s ease,opacity .1s ease}.center-line{stroke:#ffffff1a;stroke-width:2;stroke-dasharray:4 4}.main-needle{position:absolute;bottom:20px;left:50%;width:6px;height:110px;background:linear-gradient(to top,transparent,#ef4444,#fff);border-radius:4px;transform-origin:bottom center;transform:translate(-50%) rotate(0);z-index:2;transition:transform .15s cubic-bezier(.1,0,.2,1);box-shadow:0 0 15px #ef444466;will-change:transform}.main-needle:after{content:"";position:absolute;bottom:-6px;left:50%;width:12px;height:12px;background:#fff;border-radius:50%;transform:translate(-50%);box-shadow:0 0 10px #00000080}.note-name{font-size:clamp(60px,22vw,100px);font-weight:800;line-height:1;color:#fffffff2;position:relative;z-index:1;margin-top:40px}.note-cents{font-size:16px;font-weight:800;color:var(--text-accent);text-transform:uppercase;letter-spacing:4px;margin-top:5px}.gauge-markers{display:flex;justify-content:space-between;width:100%;font-size:12px;font-weight:800;color:var(--text-dim);margin-bottom:12px}.gauge-track{width:100%;height:6px;background:#00000080;border-radius:3px;position:relative}.tuner-pointer{position:absolute;top:-10px;left:50%;width:4px;height:26px;background:#fff;border-radius:2px;transform:translate(-50%);transition:left .1s;box-shadow:0 0 15px var(--accent-blue);will-change:left}.note-name.in-tune{color:var(--accent-blue)}.tuner-footer{display:flex;gap:16px;width:100%;margin-top:30px}.info-block{flex:1;padding:15px;border-radius:16px;text-align:center}.info-block .info-label{display:block;font-size:10px;font-weight:800;color:var(--text-dim);margin-bottom:5px}.theme-switcher{display:flex;gap:12px;margin:12px 0;flex-shrink:0}.theme-btn{width:40px;height:40px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:border-color .2s,transform .2s}.theme-btn.active{border-color:#fff;transform:scale(1.2)}.app-nav{display:flex;gap:8px;width:60%;margin-bottom:clamp(12px,3vh,32px);padding:6px;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media(max-width:480px){.app-nav{width:70%}}.nav-item{flex:1;padding:10px;border-radius:14px;color:var(--text-dim);font-weight:800;font-size:11px;letter-spacing:1px;cursor:pointer;text-align:center;border:none;background:transparent;transition:background .3s,color .3s,box-shadow .3s}.nav-item.active{background:#ffffff1a;color:#fff;box-shadow:0 4px 12px #0003}.update-toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%) translateY(16px);background:#1e1e1eeb;color:#fff;font-family:Outfit Variable,system-ui,sans-serif;font-size:14px;font-weight:700;padding:12px 24px;border-radius:32px;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .3s ease,transform .3s ease;z-index:9999;pointer-events:none;white-space:nowrap}.update-toast--visible{opacity:1;transform:translate(-50%) translateY(0)}@font-face{font-family:Outfit Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/pwa_Metronome/assets/outfit-latin-ext-wght-normal-DdQaqQDo.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Outfit Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/pwa_Metronome/assets/outfit-latin-wght-normal-Bc-8i84L.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}