html,body,#root{width:100%;height:100%;margin:0;overflow:hidden;background-color:#070b14;color:#e6f0ff;font-family:Eurostile,Orbitron,Arial Black,system-ui,sans-serif}.app-version{position:fixed;right:.6rem;bottom:.5rem;z-index:10;font-size:.7rem;letter-spacing:.05em;color:#e6f0ff59;pointer-events:none;-webkit-user-select:none;user-select:none}.mic-button{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,rgba(44,130,255,.18),transparent 55%),radial-gradient(circle at 70% 20%,rgba(39,255,195,.18),transparent 50%),linear-gradient(135deg,#05070d,#0b1220 60%,#0a0f1c);z-index:1}.mic-button button{padding:1rem 2rem;font-size:1.25rem;cursor:pointer;background:linear-gradient(135deg,#2dd4bf,#2563eb);color:#f8fbff;border:none;border-radius:8px;font-family:inherit;box-shadow:0 0 18px #2dd4bf59;text-transform:uppercase;letter-spacing:.08em}.mic-button button:hover{background:linear-gradient(135deg,#5eead4,#3b82f6)}.mic-button .mic-panel{display:flex;flex-direction:column;align-items:center;max-width:24rem;padding:0 1rem}.mic-button .mic-hint{margin:0 0 1.25rem;color:#cbd5e1;text-align:center;line-height:1.5}.mic-button .error{margin-top:1rem;color:#fb7185;text-align:center}.tuner-canvas-wrapper{position:fixed;inset:0;width:100%;height:100%;z-index:1}.tuner-canvas-wrapper canvas{display:block;width:100%;height:100%}.tuner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.tuner-overlay p{margin:0;padding:.5rem 1rem;background:#0a1428cc;color:#c7f9ff;border-radius:999px;font-size:1.35rem;font-family:inherit;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 0 18px #22d3ee59}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#root{width:100%;height:100%;margin:0;padding:0}.electric-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s ease;background:radial-gradient(circle at 50% 50%,rgba(46,255,138,.42),rgba(16,240,120,.12) 45%,transparent 72%);overflow:hidden}.electric-overlay:before{content:"";position:absolute;inset:-25%;background:repeating-linear-gradient(60deg,transparent 0 14px,rgba(120,255,170,.16) 15px,rgba(120,255,170,.16) 16px,transparent 17px 30px)}.tuner-canvas-wrapper.in-tune .electric-overlay{opacity:1;animation:electric-glow 1.6s ease-in-out infinite}.tuner-canvas-wrapper.in-tune .electric-overlay:before{will-change:transform,opacity;animation:electric-stream 1.1s linear infinite,electric-flicker .12s steps(2,jump-none) infinite}@keyframes electric-glow{0%,to{opacity:.7}50%{opacity:1}}@keyframes electric-stream{0%{transform:translate3d(-12%,-12%,0)}to{transform:translate3d(12%,12%,0)}}@keyframes electric-flicker{0%{opacity:.5}to{opacity:.95}}@media(prefers-reduced-motion:reduce){.tuner-canvas-wrapper.in-tune .electric-overlay,.tuner-canvas-wrapper.in-tune .electric-overlay:before{animation:none}}.instrument-toggle{position:absolute;top:clamp(.75rem,3vh,1.5rem);left:clamp(.75rem,3vw,1.5rem);z-index:3;display:flex;gap:.2rem;padding:.25rem;background:#08101c80;border:1px solid rgba(56,189,248,.25);border-radius:999px;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 0 20px #00000059}.instrument-toggle__option{padding:.35rem .85rem;border:none;border-radius:999px;background:transparent;color:#9fb6d4;font-family:inherit;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:color .18s ease,background .18s ease,box-shadow .18s ease}.instrument-toggle__option:hover{color:#e6f0ff}.instrument-toggle__option.is-active{color:#06121f;background:linear-gradient(135deg,#5eead4,#22c55e);box-shadow:0 0 16px #22c55e80}.tuning-selector{position:absolute;top:clamp(.75rem,3vh,1.5rem);left:50%;transform:translate(-50%);z-index:3;width:min(92vw,400px);font-family:inherit}.tuning-selector__current{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem 1rem;cursor:pointer;color:#e6f0ff;background:#08101c80;border:1px solid rgba(61,255,154,.35);border-radius:14px;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 0 24px #22c55e2e,inset 0 0 18px #22c55e0f;transition:border-color .2s ease,box-shadow .2s ease}.tuning-selector__current:hover,.tuning-selector__current[aria-expanded=true]{border-color:#3dff9ab3;box-shadow:0 0 30px #22c55e59,inset 0 0 22px #22c55e1a}.tuning-selector__col{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-width:0}.tuning-selector__name{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.tuning-selector__sub{font-size:.7rem;letter-spacing:.14em;color:#7fe9b6;opacity:.85}.tuning-letters{display:inline-flex;flex-wrap:wrap;gap:.4em}.tuning-letter--ext{color:color-mix(in oklab,#d6caff,#6d28d9 calc(var(--ext-t, 1) * 100%));text-shadow:0 0 8px rgba(124,58,237,calc(.35 + var(--ext-t, 1) * .4))}.tuning-selector__caret{font-size:.85rem;color:#7fe9b6;transition:transform .2s ease}.tuning-selector__current[aria-expanded=true] .tuning-selector__caret{transform:rotate(180deg)}.tuning-selector__panel{position:absolute;top:calc(100% + .5rem);left:0;right:0;max-height:min(60vh,420px);overflow-y:auto;padding:.4rem;background:#08101ca6;border:1px solid rgba(61,255,154,.3);border-radius:16px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 18px 50px #00000080,0 0 30px #22c55e26;animation:tuning-pop .18s ease}@keyframes tuning-pop{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.tuning-group__label{padding:.5rem .6rem .25rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#5fa8d8;opacity:.8}.tuning-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .6rem;border-radius:10px;background:transparent;border:1px solid transparent;color:#dce8f7;cursor:pointer;text-align:left;font-family:inherit;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.tuning-option:hover{background:#3dff9a14;border-color:#3dff9a40}.tuning-option.is-selected{background:#3dff9a24;border-color:#3dff9a80;box-shadow:inset 0 0 14px #22c55e1f}.tuning-selector__current:focus-visible,.tuning-option:focus-visible{outline:2px solid rgba(61,255,154,.9);outline-offset:2px}.tuning-option__name{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.tuning-option__sub{font-size:.72rem;letter-spacing:.1em;color:#7fe9b6;opacity:.85;white-space:nowrap}.string-strip{position:absolute;bottom:calc(clamp(.75rem,3.5vh,1.75rem) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;width:max-content;max-width:min(92vw,34rem);padding:.45rem .65rem;background:#08101c73;border:1px solid rgba(56,189,248,.25);border-radius:999px;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 0 24px #0006;pointer-events:none}.string-pip{display:flex;align-items:center;justify-content:center;min-width:1.75rem;height:1.75rem;padding:0 .3rem;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:#9fb6d4;background:#ffffff0a;border:1px solid rgba(159,182,212,.2);transition:transform .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease}.string-pip.is-extended{color:color-mix(in oklab,#d6caff,#7c3aed calc(var(--ext-t, 1) * 70%));background:color-mix(in oklab,transparent,#6d28d9 calc(12% + var(--ext-t, 1) * 22%));border-color:color-mix(in oklab,transparent,#a78bfa calc(30% + var(--ext-t, 1) * 40%))}.string-pip.is-active{transform:scale(1.18);color:#06121f;background:linear-gradient(135deg,#7dd3fc,#38bdf8);border-color:#7dd3fccc;box-shadow:0 0 18px #38bdf899}.string-pip.is-active.in-tune{background:linear-gradient(135deg,#86efac,#22c55e);border-color:#3dff9ae6;box-shadow:0 0 22px #22c55eb3}.string-strip.is-lockable{pointer-events:auto}.string-strip.is-lockable .string-pip{position:relative;margin:0;font-family:inherit;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}.string-strip.is-lockable .string-pip:hover{border-color:#7dd3fc99}.string-strip.is-lockable .string-pip:focus-visible{outline:2px solid rgba(61,255,154,.9);outline-offset:2px}.string-pip.is-locked{border-color:#f472b6f2;box-shadow:0 0 14px #f472b673}.string-pip.is-locked.is-active{box-shadow:0 0 0 2px #f472b6e6,0 0 18px #38bdf899}.string-pip.is-locked.is-active.in-tune{box-shadow:0 0 0 2px #f472b6e6,0 0 22px #22c55eb3}.string-pip.is-locked:after{content:"";position:absolute;top:-.42rem;left:50%;width:.36rem;height:.36rem;border-radius:50%;background:#f472b6;box-shadow:0 0 8px #f472b6e6;transform:translate(-50%)}.tuner-canvas-wrapper{container-type:size}.cents-readout{position:absolute;left:50%;bottom:calc(50% + 7.2vmin);bottom:calc(50% + 7.2cqmin);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.1rem;transform:translate(-50%);pointer-events:none;white-space:nowrap;text-align:center;text-shadow:0 0 12px rgba(5,7,13,.9);font-variant-numeric:tabular-nums}.cents-readout__value{font-size:clamp(1rem,4.2vmin,2rem);font-size:clamp(1rem,4.2cqmin,2rem);font-weight:700;letter-spacing:.04em;color:#fdba74;transition:color .2s ease}.cents-readout__hint{font-size:clamp(.62rem,2.2vmin,.95rem);font-size:clamp(.62rem,2.2cqmin,.95rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fb6d4}.cents-readout.is-in-tune .cents-readout__value,.cents-readout.is-in-tune .cents-readout__hint{color:#4ade80}.tuner-settings{position:absolute;left:calc(clamp(.75rem,3vw,1.5rem) + env(safe-area-inset-left,0px));bottom:calc(clamp(.75rem,3.5vh,1.75rem) + env(safe-area-inset-bottom,0px));z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}.segmented,.a4-control{display:flex;align-items:center;gap:.2rem;padding:.22rem;background:#08101c80;border:1px solid rgba(56,189,248,.25);border-radius:999px;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 0 20px #00000059}.segmented__option{padding:.3rem .65rem;border:none;border-radius:999px;background:transparent;color:#9fb6d4;font-family:inherit;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:color .18s ease,background .18s ease,box-shadow .18s ease}.segmented__option:hover{color:#e6f0ff}.segmented__option.is-active{color:#1a0614;background:linear-gradient(135deg,#f9a8d4,#e879f9);box-shadow:0 0 14px #e879f973}.a4-control__step,.a4-control__reset{display:flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;padding:0;border:1px solid rgba(159,182,212,.25);border-radius:999px;background:#ffffff0a;color:#e6f0ff;font-family:inherit;font-size:.95rem;font-weight:700;line-height:1;cursor:pointer;transition:border-color .15s ease,background .15s ease}.a4-control__step:hover,.a4-control__reset:hover{border-color:#7dd3fc99;background:#38bdf81f}.a4-control__step[aria-disabled=true]{opacity:.35;cursor:default}.a4-control__reset{color:#f9a8d4}.a4-control__value{min-width:5.6rem;padding:0 .35rem;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:#e6f0ff;font-variant-numeric:tabular-nums;white-space:nowrap}.a4-control__note,.a4-control__unit{color:#7fe9b6}.segmented__option:focus-visible,.a4-control__step:focus-visible,.a4-control__reset:focus-visible{outline:2px solid rgba(61,255,154,.9);outline-offset:2px}@media(prefers-reduced-motion:reduce){.tuning-selector__panel{animation:none}.string-pip,.segmented__option,.a4-control__step,.a4-control__reset,.cents-readout__value{transition:none}}@media(max-width:860px){.instrument-toggle{top:.75rem;left:50%;right:auto;transform:translate(-50%);width:min(92vw,400px)}.instrument-toggle__option{flex:1 1 0;text-align:center}.tuning-selector{top:3.5rem}}@media(max-width:860px)and (orientation:portrait){.tuner-settings{left:50%;bottom:calc(clamp(.75rem,3.5vh,1.75rem) + env(safe-area-inset-bottom,0px) + 3.4rem);transform:translate(-50%);flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;width:max-content;max-width:92vw}}