@keyframes headerSlideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes rotateBorder{to{--btn-angle:360deg}}@font-face{font-family:"Inter";src:url(../fonts/Inter-latin.var.woff2)format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}:root{--tuner-target:#21CE98;--tuner-out:#F2005D;--tuner-in:#2AFDC1;--tuner-tint:#F2005D;--page-bg:#0a0a0a;--card-bg:#1c1c1c;--card-border:rgba(255,255,255,0.09);--card-shadow:0 24px 80px rgba(0,0,0,0.6);--text-primary-t:#ffffff;--text-secondary-t:rgba(255,255,255,0.45);--text-muted-t:rgba(255,255,255,0.22);--ti-track:rgba(255,255,255,0.12);--needle-color:#ffffff;--line-color:#ffffff;--control-bg:#2a2a2a;--control-border:rgba(255,255,255,0.1);--select-arrow: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='%23ffffff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")}@media (prefers-color-scheme:light){html:not([data-theme=dark]){--page-bg:#f0f0f0;--card-bg:#ffffff;--card-border:rgba(0,0,0,0.08);--card-shadow:0 24px 80px rgba(0,0,0,0.12);--text-primary-t:#000000;--text-secondary-t:rgba(0,0,0,0.45);--text-muted-t:rgba(0,0,0,0.25);--ti-track:rgba(0,0,0,0.12);--needle-color:#1a1a1a;--line-color:#1a1a1a;--control-bg:#f0f0f0;--control-border:rgba(0,0,0,0.12);--select-arrow: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='%23333333' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")}}html[data-theme=light]{--page-bg:#f0f0f0;--card-bg:#ffffff;--card-border:rgba(0,0,0,0.08);--card-shadow:0 24px 80px rgba(0,0,0,0.12);--text-primary-t:#000000;--text-secondary-t:rgba(0,0,0,0.45);--text-muted-t:rgba(0,0,0,0.25);--ti-track:rgba(0,0,0,0.12);--needle-color:#1a1a1a;--line-color:#1a1a1a;--control-bg:#f0f0f0;--control-border:rgba(0,0,0,0.12);--select-arrow: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='%23333333' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")}body{background:var(--page-bg);transition:background .3s ease}.tuner-page{padding:calc(var(--header-height, 80px) + 2.5rem) 1rem 5rem}.tuner-page .container{max-width:700px;margin:0 auto}.tuner-page-header{text-align:center;margin-bottom:2rem}.tuner-page-header h1,.tuner-page-header p{background:linear-gradient(91deg,#ff00d0,#fff000);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}.tuner-page-header h1{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:700;line-height:1.1;margin-bottom:.5rem;animation:headerSlideUp 1s cubic-bezier(.16,1,.3,1) .2s both}.tuner-page-header p{font-size:1rem;animation:headerSlideUp .8s cubic-bezier(.16,1,.3,1) .5s both}.tuner-page-byline{display:block;font-size:.9375rem;color:var(--text-secondary-t)!important;background:0 0!important;-webkit-background-clip:unset!important;-webkit-text-fill-color:unset!important;background-clip:unset!important;max-width:520px;margin:.75rem auto 0;line-height:1.6;animation:headerSlideUp .8s cubic-bezier(.16,1,.3,1) .75s both}.tuner-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:24px;box-shadow:var(--card-shadow);padding:1.5rem 1.5rem 2rem;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden}.tuner-card::before{content:"";position:absolute;inset:0;border-radius:24px;background:radial-gradient(ellipse at 50% 50%,rgba(42,253,193,.15)0,transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:0}.tuner-card.in-tune::before{opacity:1}.tuner-card>*{position:relative;z-index:1}.tuner-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}.instrument-select-wrap{flex:1;min-width:160px;position:relative}.instrument-select-wrap::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:12px;height:8px;background:var(--select-arrow) no-repeat center;pointer-events:none}select#instrumentSelect{width:100%;height:36px;background:var(--control-bg);border:1px solid var(--control-border);border-radius:10px;color:var(--text-primary-t);font-family:"Inter",-apple-system,sans-serif;font-size:.8125rem;font-weight:500;padding:0 2rem 0 .75rem;appearance:none;-webkit-appearance:none;cursor:pointer;outline:0;transition:border-color .15s}select#instrumentSelect:focus{border-color:var(--tuner-tint)}select#instrumentSelect optgroup,select#instrumentSelect option{background:var(--card-bg);color:var(--text-primary-t)}.ref-a-control{display:flex;align-items:center;background:var(--control-bg);border:1px solid var(--control-border);border-radius:10px;overflow:hidden}.ref-a-btn{background:0 0;border:0;color:var(--text-secondary-t);font-size:1rem;font-weight:600;cursor:pointer;padding:0 .6rem;height:36px;line-height:36px;font-family:"Inter",sans-serif;transition:color .15s,background .15s;user-select:none}.ref-a-btn:hover{background:rgba(127,127,127,.1)}.ref-a-value{font-size:.8125rem;font-weight:600;color:var(--text-primary-t);min-width:58px;text-align:center;font-variant-numeric:tabular-nums;padding:0 .25rem}.ref-a-label{font-size:.75rem;color:var(--text-muted-t);padding-left:.6rem;padding-right:.4rem}.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}.theme-toggle-btn{background:var(--control-bg);border:1px solid var(--control-border);border-radius:10px;color:var(--text-secondary-t);cursor:pointer;font-size:1rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;flex-shrink:0}.ref-a-btn:hover,.theme-toggle-btn:hover,.tuner-explainer summary:hover,.tuner-related a:hover{color:var(--text-primary-t)}.response-speed{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.response-speed-label{font-size:.6875rem;font-weight:600;color:var(--text-muted-t);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}.response-speed-end{font-size:.625rem;color:var(--text-muted-t);flex-shrink:0}.response-speed-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--ti-track);border-radius:2px;outline:0;cursor:pointer}.response-speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--text-primary-t);border:2px solid var(--control-bg);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}.response-speed-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--text-primary-t);border:2px solid var(--control-bg);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}.note-display{display:flex;align-items:stretch;height:84px;margin-bottom:.75rem;border:1px solid var(--control-border);border-radius:12px;overflow:hidden}.nd-col,.nd-note-row{display:flex;align-items:center;gap:3px}.nd-col{flex:1;flex-direction:column;justify-content:center;padding:.5rem .25rem}.nd-col+.nd-col{border-left:1px solid var(--control-border)}.nd-note-row{line-height:1}.nd-note-name{font-size:clamp(2rem,8vw,2.5rem);font-weight:700;line-height:1;color:var(--text-primary-t);transition:color .15s;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.nd-acc-oct{display:flex;flex-direction:column;align-items:flex-start}.nd-accidental,.nd-octave,.nd-value{font-weight:700;color:var(--text-primary-t);transition:color .15s}.nd-accidental{font-size:1.375rem;line-height:1.1;min-height:1.4rem}.nd-octave,.nd-value{font-variant-numeric:tabular-nums}.nd-octave{font-size:1.125rem;line-height:1.1}.nd-value{font-size:clamp(1.25rem,5vw,1.5rem);line-height:1}.nd-label{font-size:.625rem;font-weight:600;color:var(--text-muted-t);text-transform:uppercase;letter-spacing:.1em}.ti-section{margin-bottom:1rem}.ti-container{position:relative;height:220px;overflow:hidden;border-radius:12px;user-select:none}#historyCanvas,.ti-range-label{position:absolute;pointer-events:none}.ti-range-label{top:50%;transform:translateY(-50%);font-size:.625rem;color:var(--text-muted-t);font-variant-numeric:tabular-nums;padding:0 6px;z-index:10}.ti-range-left{left:0}.ti-range-right{right:0}.ti-track{position:absolute;inset:16px 0;background:var(--ti-track);border-radius:6px;overflow:hidden}.ti-center-zone{position:absolute;inset:0 0 0 37.5%;width:25%;background:var(--tuner-target);z-index:1}.ti-in-fill,.ti-out-fill{position:absolute;top:0;bottom:0;z-index:0}.ti-out-fill{background:var(--tuner-out);opacity:0}.ti-in-fill{background:var(--tuner-in);display:none;left:37.5%;width:25%}#historyCanvas{top:16px;left:0;width:100%;height:calc(100% - 32px);display:block;z-index:4}.ti-static-bottom,.ti-static-top{position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;z-index:6;border-left:8px solid transparent;border-right:8px solid transparent}.ti-static-top{top:0;border-top:14px solid var(--tuner-target)}.ti-static-bottom{bottom:0;border-bottom:14px solid var(--tuner-target)}.ti-needle-bottom,.ti-needle-top{position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;z-index:8;border-left:9px solid transparent;border-right:9px solid transparent}.ti-needle-top{top:0;border-top:16px solid var(--needle-color)}.ti-needle-bottom{bottom:0;border-bottom:16px solid var(--needle-color)}.start-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:.625rem;position:relative}.start-btn-wrap .button-notes{position:absolute;top:0;left:0;right:0;bottom:auto;height:54px;pointer-events:none;overflow:visible}.start-btn-wrap .flying-note{position:absolute;font-size:1rem;color:var(--tuner-in);pointer-events:none;z-index:10;animation:flyOut 2s ease-out forwards}@property --btn-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.start-btn-border{width:100%;padding:2px;border-radius:16px;background:conic-gradient(from var(--btn-angle),rgba(42,253,193,.45),rgba(33,206,152,.45),rgba(255,0,208,.45),rgba(255,240,0,.45),rgba(42,253,193,.45));animation:rotateBorder 4s linear infinite;transition:opacity .3s}.start-btn-border:hover{animation-duration:2s}.start-btn-border:has(.start-btn.running){background:var(--control-border);animation:none}.start-btn{width:100%;padding:.875rem 1.5rem;border-radius:14px;font-family:"Inter",-apple-system,sans-serif;font-size:1rem;font-weight:700;letter-spacing:.02em;cursor:pointer;position:relative;background:linear-gradient(135deg,rgba(255,0,208,.12)0,rgba(42,253,193,.08) 50%,rgba(255,240,0,.07) 100%),#eee;border:0;color:#111;box-shadow:0 4px 24px rgba(33,206,152,.12);transition:box-shadow .3s,transform .12s,background .3s,color .3s}.start-btn:hover{box-shadow:0 6px 36px rgba(33,206,152,.28),0 0 60px rgba(33,206,152,.08);transform:translateY(-1px)}.start-btn:active{transform:translateY(0)}.start-btn.running{background:var(--control-bg);color:var(--text-secondary-t);box-shadow:none}.tuner-status{font-size:.8125rem;color:var(--text-muted-t);text-align:center;min-height:1.2em}.tuner-status.error{color:var(--tuner-out)}.tuner-explainer{margin-top:1.25rem;border-top:1px solid var(--card-border);padding-top:.875rem}.tuner-explainer summary{display:flex;align-items:center;gap:.3rem;font-size:.875rem;font-weight:500;color:var(--text-secondary-t);cursor:pointer;list-style:none;user-select:none;transition:color .15s;width:fit-content}.tuner-explainer summary::-webkit-details-marker{display:none}.tuner-explainer summary::marker{display:none}.tuner-explainer-icon{opacity:.5;flex-shrink:0}.tuner-explainer-body{margin-top:.875rem;display:flex;flex-direction:column;gap:.625rem}.tuner-explainer .tuner-tip{display:grid;grid-template-columns:4.5rem 1fr;gap:0 .625rem;align-items:baseline}.tuner-explainer .tuner-tip-label{font-size:.625rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted-t);padding-top:.125rem;line-height:1.55}.tuner-explainer .tuner-tip p{font-size:.75rem;color:var(--text-secondary-t);line-height:1.55;margin:0}.tuner-explainer .tuner-tip p strong{color:var(--text-primary-t);font-weight:600}.tuner-explainer .tuner-tip p em{font-style:italic}@media (max-width:480px){.tuner-explainer .tuner-tip{grid-template-columns:1fr;gap:.125rem}}.tuner-about{margin-top:2rem;padding-bottom:2rem;border-bottom:1px solid var(--card-border);animation:headerSlideUp .8s cubic-bezier(.16,1,.3,1) .7s both}.tuner-about p,.tuner-upsell .upsell-sub{font-size:.9375rem;color:var(--text-secondary-t)}.tuner-about p{line-height:1.7;margin:0}.tuner-related{padding:.75rem 0;font-size:.8125rem;color:var(--text-muted-t);line-height:2}.tuner-related a{color:var(--text-secondary-t);text-decoration:none;transition:color .15s}.tuner-upsell{margin-top:0;padding:2rem 1.5rem;text-align:center}.tuner-upsell h2{font-size:1.375rem;font-weight:700;margin-bottom:.375rem}.tuner-upsell .upsell-sub{margin-bottom:1.25rem}.upsell-features{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem}.upsell-tag{background:var(--control-bg);border:1px solid var(--control-border);color:var(--text-secondary-t);border-radius:100px;padding:.25rem .75rem;font-size:.8125rem}.upsell-store-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.upsell-learn-more{display:inline-block;margin-top:1rem;font-size:.875rem;color:var(--text-secondary-t);text-decoration:none;transition:color .15s}.tuner-upsell h2,.upsell-learn-more:hover{color:var(--text-primary-t)}@media (max-width:480px){.tuner-card{padding:1.25rem 1rem 1.5rem;border-radius:18px}.tuner-controls{gap:.375rem}select#instrumentSelect{font-size:.75rem}.ti-container{height:160px}}a.nav-logo{text-decoration:none;cursor:pointer}a.nav-logo .logo-icon{transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .25s ease}a.nav-logo:hover .logo-icon{transform:scale(1.1) rotate(-4deg);filter:brightness(1.15)}a.nav-logo:hover .logo-text{opacity:.75;transition:opacity .2s ease}.navbar{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}@media (prefers-color-scheme:light){html:not([data-theme=dark]) .navbar{background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.08)}html:not([data-theme=dark]) .navbar .nav-link,html:not([data-theme=dark]) .navbar .nav-logo{color:#1a1a1a}html:not([data-theme=dark]) .tuner-page-header h1,html:not([data-theme=dark]) .tuner-page-header p:not(.tuner-page-byline){background:linear-gradient(91deg,#c09,#667eea);-webkit-background-clip:text;background-clip:text}html:not([data-theme=dark]) .start-btn{background:linear-gradient(135deg,rgba(255,0,208,.12)0,rgba(42,253,193,.08) 50%,rgba(255,240,0,.07) 100%),#111;color:#2afdc1}html:not([data-theme=dark]) .start-btn.running{background:var(--control-bg)}}html[data-theme=light] .navbar{background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.08)}html[data-theme=light] .navbar .nav-link,html[data-theme=light] .navbar .nav-logo{color:#1a1a1a}html[data-theme=light] .tuner-page-header h1,html[data-theme=light] .tuner-page-header p:not(.tuner-page-byline){background:linear-gradient(91deg,#c09,#667eea);-webkit-background-clip:text;background-clip:text}html[data-theme=light] .start-btn{background:linear-gradient(135deg,rgba(255,0,208,.12)0,rgba(42,253,193,.08) 50%,rgba(255,240,0,.07) 100%),#111;color:#2afdc1}html[data-theme=light] .start-btn.running{background:var(--control-bg)}