:root{color-scheme:light dark;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:#0d1117;color:#f0f6fc}body{margin:0;min-height:100vh;display:flex;align-items:stretch;justify-content:center;background:radial-gradient(circle at top,#1f2933,#0d1117 60%)}#app{width:min(960px,100%);padding:2.5rem 1.5rem 3rem;box-sizing:border-box}.app-header{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:.75rem;margin-bottom:1.1rem}.app-header__title{font-size:1.4rem;margin:0;font-weight:700;letter-spacing:.01em}.app-header__tools{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;flex-wrap:nowrap}.app-main{display:none}.app-main.is-active{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.5rem}.tool-button{border-radius:999px;border:1px solid rgba(240,246,252,.15);background:#0d11178c;color:#f0f6fcd9;font-size:.85rem;padding:.35rem .7rem;cursor:pointer;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.tool-button:hover,.tool-button:focus-visible{transform:translateY(-1px);box-shadow:0 10px 24px #3b82f64d;border-color:#3b82f699}.tool-button.is-active{background:linear-gradient(135deg,#38bdf8,#6366f1);color:#fff;border-color:transparent;box-shadow:0 12px 28px #6366f159}.tool-button.is-active:hover{transform:translateY(-1px)}.wipe-confirm{position:absolute;top:calc(100% + .6rem);right:0;display:flex;flex-direction:column;gap:.65rem;padding:.9rem 1rem;max-width:260px;border-radius:14px;border:1px solid rgba(239,68,68,.45);background:linear-gradient(135deg,#ef44442e,#f973162e);box-shadow:0 16px 45px #ef444440;z-index:10}.wipe-confirm__title{margin:0;font-size:1rem;font-weight:700;color:#fff1f2f2}.wipe-confirm__detail{margin:0;font-size:.9rem;color:#fef0c7d9}.wipe-confirm__actions{display:flex;gap:.5rem}.wipe-confirm__button{flex:1;font-size:.9rem;font-weight:600;letter-spacing:.01em;padding:.55rem .75rem;border-radius:10px;border:1px solid rgba(248,250,252,.2);background:#0f172aa6;color:#f8fafce6;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.wipe-confirm__button:hover,.wipe-confirm__button:focus-visible{transform:translateY(-1px);border-color:#f8fafc99;box-shadow:0 12px 30px #3b82f659}.wipe-confirm__button--danger{background:linear-gradient(135deg,#ef4444d9,#f97316cc);border-color:#ef4444e6;color:#fff}.wipe-confirm__button--danger:hover,.wipe-confirm__button--danger:focus-visible{box-shadow:0 16px 40px #ef444459}h1:not(.app-header__title){font-size:1.875rem;margin:0 0 1rem}.app-nav{display:flex;gap:.75rem;margin:0 0 1.5rem;background:#0d111773;padding:.4rem;border-radius:999px;box-shadow:inset 0 1px #f0f6fc14;flex-wrap:wrap;justify-content:center}.app-nav__tab{flex:1 1 180px;background:transparent;padding:.65rem 1rem;border-radius:999px;border:none;font-weight:600;color:#f0f6fcb8;cursor:pointer;transition:background .2s ease,color .2s ease}.app-nav__tab.is-active{background:linear-gradient(135deg,#4c6ef5,#38bdf8);color:#fff;box-shadow:0 12px 26px #38bdf859}.app-nav__tab[disabled]{cursor:not-allowed;opacity:.45;background:#0f172a59;color:#94a3b8bf;box-shadow:none}@media (max-width: 640px){.app-nav__tab{flex:1 1 48%;font-size:.9rem}}.app-views{position:relative}.app-view{display:none}.app-view.is-active{display:block}.live-view>.tuner,.live-view>.diagnostics{margin-bottom:1.75rem}.live-view__filters{margin-top:1.5rem}.live-view__status p{font-size:.95rem;color:#f0f6fcd9}.range-finder{position:relative}.range-finder>h2{margin:0 0 .75rem}.range-finder__intro{margin:0 0 1rem;font-size:1rem;color:#e2e8f0d9}.range-finder__step-track{list-style:none;padding:0;margin:0 0 1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}.range-finder__step{display:grid;grid-template-columns:auto 1fr auto;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;background:#0c1016a6;border:1px solid rgba(240,246,252,.08);border-radius:12px;transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease}.range-finder__step-index{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#52b7883d;color:#defeebf2;font-weight:700;font-size:.95rem;align-self:flex-start}.range-finder__step-copy{min-width:0}.range-finder__step-title{margin:0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8cc}.range-finder__step-label{margin:.15rem 0 0;font-size:1rem;font-weight:600;color:#e2e8f0f2}.range-finder__step-note{margin:.35rem 0 0;font-size:.85rem;color:#cbd5e1cc;line-height:1.4}.range-finder__step-status{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8cc;white-space:nowrap;justify-self:end}.range-finder__step.is-active{border-color:#52b788a6;box-shadow:0 0 0 3px #52b78840}.range-finder__step.is-capturing{border-color:#3b82f699;box-shadow:0 0 0 3px #3b82f633;transform:translateY(-1px)}.range-finder__step.is-complete{border-color:#b5179e8c;box-shadow:0 6px 20px #b5179e2e}.range-finder__step.is-complete .range-finder__step-index{background:#b5179e73}.range-finder__controls{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;align-items:stretch}.range-finder__cta-button{font-size:1rem;font-weight:600;letter-spacing:.01em;padding:.75rem 1rem;border-radius:12px;border:1px solid rgba(240,246,252,.15);background:#0f172aa6;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;text-align:left;white-space:normal;line-height:1.35}.range-finder__cta-button:hover{transform:translateY(-1px);box-shadow:0 12px 30px #3b82f633}.range-finder__controls button{flex:1 1 160px}.range-finder__controls button.is-highlight{border-color:#52b788b3;box-shadow:0 14px 35px #52b78840;background:linear-gradient(135deg,#52b78847,#3b82f62e)}.range-finder__reset-button{flex:0 0 auto;font-size:.9rem;padding:.55rem 1.1rem;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#0f172a66;color:#e2e8f0e6;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;align-self:center}.range-finder__reset-button:hover,.range-finder__reset-button:focus-visible{transform:translateY(-1px);border-color:#94a3b8b3;box-shadow:0 8px 20px #94a3b833}.range-finder__message{margin:0 0 1rem;color:#cbd5e1cc;font-size:.85rem}.range-finder__mic-notice{margin:0 0 1rem;padding:.65rem .85rem;border-radius:10px;background:#f899322e;border:1px solid rgba(249,115,22,.45);color:#fcd34df2;font-size:.9rem;font-weight:600}.range-finder__progress{width:100%;height:8px;background:#f0f6fc1a;border-radius:999px;overflow:hidden;margin-bottom:1.25rem;opacity:0;transition:opacity .2s ease}.range-finder__progress.is-active{opacity:1}.range-finder__progress span{display:block;height:100%;background:linear-gradient(90deg,#2d6a4f,#52b788);transition:width .2s ease;font-size:.7rem;color:#0d1117d9;text-align:right;padding-right:.5rem;line-height:8px}.range-finder__tuner section{margin:0}.range-finder__tuner h2{margin:0 0 .65rem}.range-finder__tuner .tuner{background:#0c101699;border:none;border-radius:12px}.range-finder__results{margin-top:1.75rem;padding:1.35rem 1.5rem;border-radius:18px;background:#0f172ad1;border:1px solid rgba(56,189,248,.25);box-shadow:0 18px 42px #0d111773;display:flex;flex-direction:column;gap:.9rem}.range-finder__results-heading{margin:0;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#bfdbfebf}.range-finder__results-body{display:flex;flex-direction:column;gap:.55rem}.range-finder__category{font-size:1.4rem;font-weight:700;margin:0;color:#38bdf8f2}.range-finder__span,.range-finder__extremes{margin:0;font-size:.96rem;color:#e2e8f0d9}.range-finder__guidance{margin:.5rem 0 0;padding:.75rem 1rem;border-radius:12px;font-size:.9rem;line-height:1.5;color:#bfdbfee6;background:#38bdf81f;border:1px solid rgba(56,189,248,.18)}.range-finder__results-empty{margin:0;padding:.5rem 0;color:#94a3b8d9}.range-finder__staff{min-height:160px;display:flex;align-items:center;justify-content:center;background:#0c1016a6;border:1px solid rgba(240,246,252,.08);border-radius:12px;padding:1rem}.range-finder__staff svg{width:100%}.range-finder__staff-placeholder{margin:0;color:#f0f6fca6}.range-finder__keyboard{display:block;width:100%;height:160px;margin-top:1.5rem;background:#0c101699;border-radius:12px;border:1px solid rgba(240,246,252,.08)}@media (max-width: 720px){.range-finder__controls button{flex:1 1 100%}.range-finder__keyboard{height:140px}}@media (max-width: 560px){.range-finder__step{grid-template-columns:auto 1fr;row-gap:.6rem}.range-finder__step-status{grid-column:1 / -1;justify-self:flex-start;white-space:normal}.range-finder__step-label{font-size:.95rem}.range-finder__step-note{font-size:.8rem}}section{margin-bottom:1.75rem;padding:1.25rem;border-radius:12px;background:#0d1117b3;border:1px solid rgba(240,246,252,.1);box-shadow:0 16px 40px #0000004d}button{font:inherit;padding:.65rem 1.25rem;border-radius:999px;border:none;cursor:pointer;background:linear-gradient(135deg,#4c6ef5,#2ab0ee);color:#fff;transition:transform .2s ease,box-shadow .2s ease}button[disabled]{cursor:not-allowed;background:#2c3443;color:#f0f6fc73}button:not([disabled]):hover{transform:translateY(-1px);box-shadow:0 8px 20px #2ab0ee73}.tuner{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem;align-items:center}.tuner__note{font-size:clamp(2.75rem,5vw,4.5rem);font-weight:700;letter-spacing:.02em}.tuner__cents{font-size:1rem;color:#f0f6fccc}.tuner__meter{height:8px;border-radius:999px;overflow:hidden;background:#f0f6fc1a}.tuner__meter-fill{height:100%;width:50%;transform-origin:center;background:linear-gradient(90deg,#ff5c7a,#4c6ef5,#4bdc7c);transition:transform .08s ease}.status-banner{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;padding:1rem 1.25rem;border-radius:12px;background:#0d111799;border:1px solid rgba(240,246,252,.1)}.status-banner__message{flex:1;font-size:.95rem;margin:0}.status-banner--warning{border-color:#facc1573;box-shadow:0 0 0 1px #facc1526}.status-banner--error{border-color:#ef444473;box-shadow:0 0 0 1px #ef44441f}.controls{display:flex;align-items:center;gap:.75rem}.status-banner__controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.status-banner__controls select{flex:1 1 220px;min-width:0;max-width:min(260px,100%)}.status-banner__controls button{font-size:.85rem;padding:.4rem .75rem}small{color:#f0f6fca6}.diagnostics{margin-bottom:1.75rem;padding:1.25rem;border-radius:12px;background:#0d1117a6;border:1px solid rgba(240,246,252,.08)}.diagnostics__controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0 1.5rem}.diagnostics__control{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem}.diagnostics__control-row{display:flex;align-items:center;gap:.75rem}.diagnostics__control input[type=range]{flex:1}.diagnostics__readout{font-variant-numeric:tabular-nums;color:#f0f6fcd9}.diagnostics__metrics{overflow-x:auto}.diagnostics__metrics table{width:100%;border-collapse:collapse;font-size:.9rem}.diagnostics__metrics th,.diagnostics__metrics td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid rgba(240,246,252,.08)}.diagnostics__signal-heading{margin-top:1.35rem;font-size:1rem}.diagnostics__signal{display:grid;gap:.75rem;margin:.75rem 0 1.5rem}.diagnostics__signal canvas{width:100%;display:block;border-radius:10px;background:#0f172abf;border:1px solid rgba(148,163,184,.16);box-shadow:inset 0 0 0 1px #082f4959}.diagnostics__log-heading{margin-top:1.25rem;font-size:1rem}.diagnostics__log{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;font-size:.85rem;font-variant-numeric:tabular-nums}.diagnostics__log li{padding:.35rem .5rem;border-radius:8px;background:#94a3b814}.info-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:.4rem;border-radius:50%;background:#94a3b840;color:#f0f6fce6;font-size:.7rem;font-weight:600;cursor:help;position:relative}.info-badge:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%);background:#0f172af2;color:#f8fafcf2;padding:.45rem .6rem;border-radius:6px;font-size:.75rem;line-height:1.2;width:max(180px,26ch);max-width:260px;box-shadow:0 12px 24px #0f172a59;opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:10}.info-badge:before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%);border:6px solid transparent;border-top-color:#0f172af2;opacity:0;transition:opacity .15s ease;z-index:9}.info-badge:hover:after,.info-badge:hover:before,.info-badge:focus:after,.info-badge:focus:before{opacity:1}.tone-game{background:#0c1016a6;border:1px solid rgba(240,246,252,.08);border-radius:18px;padding:1.5rem;box-shadow:0 18px 42px #0d111773}.tone-game__message{margin-top:0;margin-bottom:1.25rem;color:#f0f6fcd9;font-size:1rem}.tone-game__controls{display:flex;gap:.75rem;margin-bottom:1rem}.tone-game__controls button{flex:0 0 auto;border-radius:999px;border:1px solid rgba(59,130,246,.25);background:#3b82f626;color:#f0f6fce6;padding:.5rem 1.1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.tone-game__controls button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.tone-game__controls button:not(:disabled):hover,.tone-game__controls button:not(:disabled):focus-visible{transform:translateY(-1px);box-shadow:0 12px 30px #38bdf859}.tone-game__status-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.tone-game__timer{font-family:JetBrains Mono,Fira Mono,monospace;font-size:1.05rem;letter-spacing:.04em;color:#f8fafcd9;padding:.35rem .75rem;border-radius:999px;background:#3b82f633}.tone-game__timer.is-counting{background:linear-gradient(135deg,#f97316,#e11d48);color:#fff}.tone-game__active-note{font-size:1rem;color:#e2e8f0d9}.tone-game__visual{width:100%;border-radius:14px;border:1px solid rgba(148,163,184,.35);display:block;margin-bottom:1.5rem}.tone-game__targets-heading{margin:0 0 .75rem;font-size:1rem;color:#cbd5e1d9}.tone-game__targets{display:flex;flex-wrap:wrap;gap:.6rem;min-height:48px;margin-bottom:1.5rem}.tone-game__target{padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(148,163,184,.3);background:#94a3b826;color:#e2e8f0d9;font-size:.95rem}.tone-game__target.is-cleared{background:linear-gradient(135deg,#22c55e,#14b8a6);border-color:transparent;color:#0f172a}.tone-game__target.is-active{border-color:#38bdf8a6;box-shadow:0 0 0 2px #38bdf840}.tone-game__empty{margin:0;color:#94a3b8bf}.tone-game__summary{background:#0f172abf;border:1px solid rgba(56,189,248,.25);border-radius:14px;padding:1rem 1.25rem}.tone-game__summary-score{margin:0 0 .25rem;font-size:1.25rem;font-weight:700;color:#38bdf8f2}.tone-game__summary-details{margin:0;color:#e2e8f0d9;font-size:.95rem}.diagnostics__label{display:flex;align-items:center;gap:.3rem;font-weight:600}.game-steps{margin:1rem 0 1.5rem}.game-steps__list{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));list-style:none;padding:0;margin:0}.game-steps__item{position:relative;padding:1rem 1.1rem;border-radius:16px;border:1px solid rgba(240,246,252,.12);background:linear-gradient(135deg,#0d1117b3,#0d111773);display:flex;flex-direction:column;gap:.35rem;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 12px 30px #0f172a33;cursor:pointer}.game-steps__item--completed{border-color:#22c55ea6;box-shadow:0 16px 40px #22c55e40}.game-steps__item--completed:after{content:"✓";position:absolute;top:.65rem;right:.75rem;font-size:1rem;color:#bbf7d0f2}.game-steps__item--active{border-color:#3b82f6b3;transform:translateY(-3px);box-shadow:0 18px 45px #3b82f659}.game-steps__item--ready{border-color:#facc1599;box-shadow:0 16px 36px #facc1540}.game-steps__item--pending{border-style:dashed;border-color:#94a3b873}.game-steps__item--locked{cursor:not-allowed;border-style:dashed;border-color:#4755698c;color:#94a3b8b3;box-shadow:none;background:linear-gradient(135deg,#334155cc,#1e293b99)}.game-steps__item--locked:before{content:"🔒";position:absolute;top:.65rem;right:.75rem;font-size:1rem;color:#94a3b8d9}.game-steps__item--locked .game-steps__title{color:#cbd5e1bf}.game-steps__item--locked .game-steps__subtitle{color:#94a3b8b3}.game-steps__item:focus-visible{outline:2px solid rgba(59,130,246,.85);outline-offset:3px}.game-steps__title{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}.game-steps__subtitle{font-size:1rem;color:#f0f6fcd9}.game-steps__notice{margin:.75rem 0 0;padding:.75rem .9rem;border-radius:12px;border:1px solid rgba(249,115,22,.45);background:#f973162e;color:#fef0c7f2;font-size:.9rem;font-weight:600;letter-spacing:.01em}.settings{display:grid;gap:1.5rem}.settings__intro{margin:0 0 1.5rem;color:#f0f6fcbf;font-size:.95rem}.settings fieldset{border:1px solid rgba(240,246,252,.12);border-radius:16px;padding:1.25rem;background:#0d111799}.settings__group{display:grid;gap:1rem}.settings__group legend{font-weight:600;letter-spacing:.02em;padding:0}.settings__description{margin:0;color:#f0f6fcbf;font-size:.9rem}.settings__control{display:flex;flex-direction:column;gap:.45rem;font-size:.95rem}.settings__control-row{display:flex;align-items:center;gap:.75rem}.settings__readout{font-variant-numeric:tabular-nums;color:#f0f6fcd9}.settings__toggle{display:inline-flex;align-items:center;gap:.6rem;font-weight:600}.settings__select,.settings__select-wrapper select{background:#0f172aa6;border:1px solid rgba(240,246,252,.1);color:#f0f6fc;border-radius:999px;padding:.45rem .85rem;min-height:2.2rem}.settings__select:disabled{opacity:.6}.settings__select-wrapper{display:flex}.settings__notice{margin:0;font-size:.85rem;color:#94a3b8f2}.settings__preview{display:flex;flex-wrap:wrap;gap:.75rem}.settings__preview-btn{padding:.55rem 1.2rem;border-radius:999px;border:none;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#f97316,#facc15);color:#0b1120}.settings__preview-btn[disabled]{background:#2c3443;color:#f0f6fc73;cursor:not-allowed}.settings__preview-btn--secondary{background:#0f172ae6;color:#f0f6fceb;border:1px solid rgba(240,246,252,.18)}.settings__control--midi{display:none}.settings__control--midi:not([hidden]){display:flex}.settings-bar{margin-top:2rem;padding:.85rem 1rem;border-radius:12px;background:#0d11178c;border:1px solid rgba(240,246,252,.1);font-size:.85rem;font-variant-numeric:tabular-nums;color:#f0f6fcbf}.karaoke-placeholder{display:grid;gap:1rem}.karaoke-placeholder__list{padding-left:1.25rem;color:#f0f6fcbf}.game-placeholder{display:grid;gap:1rem;background:#0d111799;border:1px solid rgba(240,246,252,.1);border-radius:14px;padding:1.5rem}.game-placeholder__list{padding-left:1.25rem;color:#f0f6fcbf}.game-placeholder__requirement{margin:0;font-size:.95rem;color:#facc15f2}.game-placeholder__callout{margin:0;padding:.75rem 1rem;border-radius:10px;background:#3b82f61f;border:1px solid rgba(59,130,246,.25);color:#bfdbfef2}@media (max-width: 640px){.tone-game{padding:1.25rem}.tone-game__controls{flex-direction:column;align-items:stretch;gap:.65rem}.tone-game__controls button{width:100%}.tone-game__status-row{flex-direction:column;align-items:flex-start;gap:.5rem}.tone-game__active-note{font-size:.95rem}.range-finder__results{padding:1.1rem 1.2rem;gap:.75rem}.range-finder__category{font-size:1.2rem}.game-steps__list{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}@media (max-width: 720px){.settings fieldset{padding:1rem}.settings__control-row{flex-direction:column;align-items:flex-start}.settings__preview{flex-direction:column;align-items:stretch}.settings__preview-btn{width:100%}}