:root{--bg:#0d1210;--bg-soft:#111713;--panel:#141c17f0;--line:#2f3a33;--line-strong:#445048;--text:#f4f7f3;--muted:#8a978f;--soft:#66736b;--lime:#a9e76d;--lime-ink:#162015;--amber:#f2bc56;--red:#d9715f;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;font-family:Aptos,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html{background:var(--bg);min-width:320px;min-height:100%}body{background:radial-gradient(circle at 50% 30%,#4b66541f,#0000 35%),linear-gradient(#90a8990b 1px,#0000 1px) 0 0/28px 28px,linear-gradient(90deg,#90a8990b 1px,#0000 1px) 0 0/28px 28px,#090d0b;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.app-shell{place-items:center;min-height:100vh;padding:24px;display:grid}.tuner-app{background:radial-gradient(circle at 50% 31%, #4c66541f, transparent 33%), var(--bg);border:1px solid #27322b;border-radius:22px;width:min(100%,430px);min-height:min(880px,100vh - 48px);animation:.42s cubic-bezier(.22,1,.36,1) both app-rise;overflow:hidden;box-shadow:0 28px 70px #0000006b}.tuner-screen,.data-screen{min-height:inherit;padding:24px 20px max(18px, env(safe-area-inset-bottom));background-image:linear-gradient(#9aada10a 1px,#0000 1px),linear-gradient(90deg,#9aada10a 1px,#0000 1px);background-size:28px 28px;flex-direction:column;display:flex}.app-header{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.eyebrow{color:#dce3de;letter-spacing:.02em;margin:0 0 6px;font-family:Bahnschrift,DIN Alternate,Arial Narrow,sans-serif;font-size:14px;font-weight:620}.phase-chip{color:#7e8c83;letter-spacing:.08em;text-transform:uppercase;border:1px solid #3a463f;border-radius:999px;align-items:center;padding:3px 8px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:8px;font-weight:700;display:inline-flex}.phase-listening{color:#b5e5c5;border-color:#567962}.phase-error{color:#e4a197;border-color:#834b43}.auto-button{color:#cbd3ce;background:#1a221dd1;border:1px solid #354039;border-radius:999px;align-items:center;gap:7px;min-height:36px;padding:5px 11px;font-size:10px;font-weight:650;display:inline-flex}.auto-button[aria-pressed=true]{color:#f2f6f3}.auto-button small{color:#7e8b83;font-family:ui-monospace,Cascadia Mono,monospace;font-size:8px;font-weight:700}.auto-button[aria-pressed=true] small{color:var(--lime)}.mini-toggle{background:#3c4840;border-radius:999px;width:24px;height:14px;transition:background-color .16s;position:relative}.mini-toggle:after{content:"";background:#18201b;border-radius:50%;width:10px;height:10px;transition:transform .16s;position:absolute;top:2px;left:2px}.auto-button[aria-pressed=true] .mini-toggle{background:var(--lime)}.auto-button[aria-pressed=true] .mini-toggle:after{transform:translate(10px)}.error-banner{border-left:3px solid var(--red);color:#f0c3bb;background:#4c211b9e;margin:14px 0 0;padding:10px 12px;font-size:12px;line-height:1.5}.tuning-readout{place-items:center;min-height:110px;margin-top:2px;padding-top:7px;display:grid;position:relative}.lane-line{background:linear-gradient(#cdd4d0,#cdd4d014);width:1px;position:absolute;top:47px;bottom:0;left:50%}.lane-marker{color:#eef2ef;background:var(--bg);z-index:2;border:2px solid #eef2ef;border-radius:50%;place-items:center;width:42px;height:42px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:11px;font-weight:700;display:grid}.lane-marker:after{content:"";background:var(--bg);border-bottom:2px solid #eef2ef;border-right:2px solid #eef2ef;width:10px;height:10px;position:absolute;top:43px;transform:rotate(45deg)}.tuning-readout>strong{color:#fff;letter-spacing:-.03em;font-family:Bahnschrift,DIN Alternate,Arial Narrow,sans-serif;font-size:34px;font-weight:720;position:absolute;bottom:33px;right:4px}.tuning-readout>strong.in-tune{color:var(--lime)}.tuning-readout>span{color:var(--amber);font-family:ui-monospace,Cascadia Mono,monospace;font-size:9px;font-weight:700;position:absolute;bottom:19px;right:4px}.headstock-stage{height:clamp(342px,47vh,430px);margin:-4px -4px 0;position:relative;overflow:hidden}.headstock-photo{object-fit:contain;object-position:50% 50%;filter:brightness(.93)saturate(.86)contrast(.94);width:100%;height:100%;position:absolute;inset:0}.headstock-shade{background:radial-gradient(ellipse at 50% 46%, transparent 34%, #0a0f0c2e 66%, #0a0f0cb8 100%), linear-gradient(180deg, var(--bg) 0%, transparent 12%, transparent 86%, var(--bg) 100%);pointer-events:none;position:absolute;inset:0}.string-choice{z-index:3;color:#f2f5f2;background:#1c231eeb;border:1px solid #3d4841;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:56px;height:56px;line-height:1;display:flex;position:absolute;box-shadow:inset 0 1px #ffffff14,0 7px 18px #00000052}.string-choice strong{font-size:18px;font-weight:720}.string-choice small{color:#aeb8b2;letter-spacing:.02em;margin-top:3px;font-size:7px;font-weight:600}.string-choice.active{color:#151b17;background:#fff;border-color:#fff;box-shadow:0 0 0 4px #ffffff17,0 7px 18px #0006}.string-choice.active small{color:#5e685f}.choice-e2{top:61%;left:14%}.choice-a2{top:40%;left:14%}.choice-d3{top:19%;left:14%}.choice-g3{top:19%;right:14%}.choice-b3{top:40%;right:14%}.choice-e4{top:61%;right:14%}.headstock-stage[data-instrument=ukulele] .headstock-photo{object-fit:contain;filter:brightness(.94)saturate(.9)contrast(.96);padding:3px 34px 0}.choice-uke-4{top:25%;left:19%}.choice-uke-3{top:52%;left:19%}.choice-uke-2{top:25%;right:19%}.choice-uke-1{top:52%;right:19%}@media (height<=760px){.headstock-stage[data-instrument=ukulele] .headstock-photo{padding-inline:25px}}.cents-meter{margin-top:-10px;padding:0 8px}.cents-track{opacity:.86;background:linear-gradient(90deg, #b55c53 0%, #8d6a3d 42%, var(--lime) 50%, #8d6a3d 58%, #b55c53 100%);border-radius:3px;height:9px;position:relative}.cents-zero{background:#e7ece8;width:1px;position:absolute;top:-4px;bottom:-4px;left:50%}.cents-pointer{background:#fff;border-radius:2px;width:4px;height:21px;position:absolute;top:-6px;transform:translate(-50%);box-shadow:0 0 0 3px #0d1210b8}.cents-labels{color:#66736b;justify-content:space-between;margin-top:8px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:8px;display:flex}.direction-line{text-align:center;margin-top:11px}.direction-line strong{color:var(--amber);font-size:14px;font-weight:720;display:block}.direction-line.in-tune strong{color:var(--lime)}.direction-line span{color:#748178;margin-top:4px;font-size:9px;display:block}.quick-metrics{grid-template-columns:repeat(3,1fr);gap:7px;margin-top:16px;display:grid}.quick-metrics>div,.data-grid>div{border:1px solid var(--line);background:#19211cb3;border-radius:6px;padding:10px}.quick-metrics span,.data-grid span{color:#6f7c74;letter-spacing:.06em;text-transform:uppercase;font-size:8px;display:block}.quick-metrics strong,.data-grid strong{color:#e2e8e4;margin-top:4px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:11px;font-weight:650;display:block}.primary-actions{grid-template-columns:1fr 1.35fr;gap:8px;margin-top:auto;padding-top:16px;display:grid}.secondary-action,.lime-action{border-radius:7px;min-height:46px;font-size:11px;font-weight:720}.secondary-action{color:#e0e6e2;background:#1b221dcc;border:1px solid #3a453e}.lime-action{border:1px solid var(--lime);color:var(--lime-ink);background:var(--lime)}.lime-action:disabled{cursor:wait;opacity:.62}.data-screen{gap:0}.data-hero{border-left:3px solid var(--amber);background:linear-gradient(90deg,#f2bc561a,#0000);margin-top:22px;padding:18px 16px}.data-hero strong{color:#fff;letter-spacing:-.04em;font-family:Bahnschrift,DIN Alternate,Arial Narrow,sans-serif;font-size:48px;line-height:1;display:block}.data-hero span{color:#a7b2aa;margin-top:8px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:10px;display:block}.data-grid{grid-template-columns:1fr 1fr;gap:7px;margin-top:18px;display:grid}.a4-control{color:#85928a;grid-template-columns:76px 1fr 60px;align-items:center;gap:9px;margin-top:18px;font-size:10px;display:grid}.a4-control input{width:100%;accent-color:var(--lime)}.a4-control strong{color:#dce3de;text-align:right;font-family:ui-monospace,Cascadia Mono,monospace;font-size:10px}.sound-toggle{border:1px solid var(--line);color:#dce3de;background:#19211cb3;border-radius:6px;justify-content:space-between;align-items:center;min-height:44px;margin-top:10px;padding:0 12px;font-size:10px;display:flex}.sound-toggle strong{color:var(--lime);font-family:ui-monospace,Cascadia Mono,monospace;font-size:9px;font-weight:650}.sound-toggle[aria-pressed=false] strong{color:#849188}.secondary-action.wide{width:100%;margin-top:18px}@keyframes app-rise{0%{opacity:0;transform:translateY(12px)scale(.992)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=520px){.app-shell{padding:0}.tuner-app{width:100%;min-height:100vh;box-shadow:none;border:0;border-radius:0}.tuner-screen,.data-screen{padding-top:max(18px, env(safe-area-inset-top))}}@media (height<=760px){.headstock-stage{height:clamp(304px,44vh,350px)}.tuning-readout{min-height:96px}}.practice-home{min-height:inherit;padding:24px 20px max(18px, env(safe-area-inset-bottom));flex-direction:column;gap:16px;display:flex}.home-hero h1{letter-spacing:-.06em;margin:4px 0 0;font-size:clamp(36px,11vw,54px);line-height:.95}.home-kicker{color:var(--muted);font-size:13px}.instrument-switch,.tuning-selector{background:#ffffff0a;border-radius:14px;gap:6px;padding:5px;display:grid}.instrument-switch{grid-template-columns:repeat(2,minmax(0,1fr))}.tuning-selector{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.instrument-switch button,.tuning-selector button{min-height:42px;color:var(--muted);background:0 0;border:0;border-radius:10px}.instrument-switch button.active,.tuning-selector button.active{color:#11150d;background:var(--lime);font-weight:750}.home-tuning-card{border:1px solid var(--line);background:radial-gradient(circle at 50% 0,#c8f15a14,#0000 48%),#ffffff06;border-radius:20px;gap:18px;padding:22px 18px;display:grid}.home-tuning-card>span{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:11px}.home-string-row{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.home-string-row.strings-4{grid-template-columns:repeat(4,1fr)}.home-card-topline{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;font-size:11px;display:flex}.home-card-topline strong{color:#dfe5e0;font-size:12px}.home-quick-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.home-quick-actions button{border:1px solid var(--line);color:#dfe5e0;background:0 0;border-radius:12px;min-height:42px;font-size:11px}.metronome-transition{margin-top:12px}.home-string-row strong{border:1px solid var(--line);text-align:center;border-radius:10px;padding:12px 3px;font-size:13px}.home-hint{color:var(--muted);font-size:12px;line-height:1.55}.advanced-details{border:1px solid var(--line);border-radius:14px;padding:14px}.advanced-details summary{cursor:pointer;color:var(--muted)}.privacy-note{color:var(--muted);font-size:11px;line-height:1.55}.privacy-link{color:var(--lime);font-size:11px}.header-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;display:flex}@media (width<=390px){.header-actions .auto-button{padding-inline:8px}}.settings-context{border-bottom:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:12px;padding:12px 0 18px;font-size:11px;display:flex}.settings-context strong{color:#dfe5e0;font-size:12px}@media (prefers-reduced-motion:reduce){.tuner-app{animation:none}}.metronome-screen{min-height:inherit;padding:24px 20px max(18px, env(safe-area-inset-bottom));flex-direction:column;gap:16px;display:flex}.metronome-hero{border:1px solid var(--line);background:radial-gradient(circle at 50% 42%,#c8f15a24,#0000 58%),linear-gradient(145deg,#ffffff09,#0000 62%);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:226px;display:flex;position:relative;overflow:hidden}.metronome-hero:after{content:"";pointer-events:none;border:1px solid #c8f15a14;border-radius:50%;width:210px;height:210px;position:absolute}.metronome-kicker{z-index:1;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:10px;font-weight:650}.metronome-tempo{z-index:1;align-items:baseline;gap:8px;display:flex}.metronome-tempo strong{color:var(--lime);letter-spacing:-.09em;font-size:clamp(86px,28vw,142px);font-weight:760;line-height:.82}.metronome-tempo small{color:#cbd4cc;letter-spacing:.08em;font-size:12px;font-weight:700}.metronome-signature-readout{z-index:1;color:var(--muted);border:1px solid #ffffff1a;border-radius:999px;padding:4px 9px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:10px}.beat-dots{align-items:center;gap:8px;min-height:18px;display:grid}.beat-dots span{background:#ffffff1a;border-radius:999px;height:8px;transition:background 80ms linear,transform 80ms linear,box-shadow 80ms linear}.beat-dots span.accent{background:#ffffff38}.beat-dots span.active{background:var(--lime);transform:scaleY(1.9);box-shadow:0 0 14px #c8f15a52}.bpm-controls{grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:10px;display:grid}.bpm-controls button{border:1px solid var(--line);color:#fff;background:#ffffff09;border-radius:50%;width:46px;height:46px;font-size:22px}.bpm-controls input{width:100%;accent-color:var(--lime)}.signature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.signature-grid button{border:1px solid var(--line);min-height:44px;color:var(--muted);background:0 0;border-radius:12px;font-family:ui-monospace,Cascadia Mono,monospace;font-size:11px}.signature-grid button.active{color:#11150d;border-color:var(--lime);background:var(--lime);font-weight:760}.metronome-primary{min-height:56px}.metronome-note{color:var(--muted);text-align:center;margin-top:-4px;font-size:11px;line-height:1.5}@media (width<=520px){.metronome-screen{padding-top:max(18px, env(safe-area-inset-top))}}
