:root{--bg: #f6f3ee;--fg: #1d1b19;--muted: #8a837a;--line: #ddd6cc;--card: #ffffff;--accent: #c9821d;--good: #2f9e5b;--ok: #d6a419;--warn: #e07b24;--bad: #d0473a;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #1d1b19;--fg: #f1ece4;--muted: #9b948b;--line: #3a3632;--card: #282522;--accent: #e8a33d;--good: #45c27a;--ok: #e6bb36;--warn: #f08a3a;--bad: #f0675a}}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--fg);font:17px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}main{max-width:520px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) 16px calc(88px + env(safe-area-inset-bottom));min-height:100%}section{display:flex;flex-direction:column}[hidden]{display:none!important}button,select{font:inherit;color:inherit}button{border:0;cursor:pointer;touch-action:manipulation}.primary{background:var(--accent);color:#1d1b19;font-weight:600;font-size:1.15rem;border-radius:14px;padding:16px 20px;width:100%}.secondary{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;width:100%}.link{background:none;color:var(--accent);padding:4px;text-decoration:underline}.round{width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:1.6rem;line-height:1}.row{display:flex;gap:12px}.error,.status{text-align:center;min-height:1.4em;margin:12px 0}.error{color:var(--bad)}.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.tabs a{flex:1;max-width:150px;text-align:center;padding:18px 0;font-size:.9rem;color:var(--muted);text-decoration:none;font-weight:600}.tabs a.on{color:var(--accent)}.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}.seg button{flex:1;background:none;border-radius:9px;padding:10px 6px;color:var(--muted)}.seg button.on{background:var(--bg);color:var(--fg);font-weight:600}.tuner{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:24px}.tuner-note{font-size:7rem;font-weight:700;line-height:1;min-height:1em;transition:color .2s}.tuner-cents{color:var(--muted);font-variant-numeric:tabular-nums}.in-tune .tuner-note{color:var(--good)}.meter{position:relative;width:100%;height:56px;border-radius:12px;background:var(--card);border:1px solid var(--line);overflow:hidden}.meter-zone{position:absolute;left:45%;width:10%;top:0;bottom:0;background:color-mix(in srgb,var(--good) 22%,transparent)}.meter-mid{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--good)}.meter-needle{position:absolute;left:50%;top:8px;bottom:8px;width:6px;margin-left:-3px;border-radius:3px;background:var(--accent);opacity:.25;transition:left .08s linear}.in-tune .meter-needle{background:var(--good)}.meter-labels{width:100%;display:flex;justify-content:space-between;color:var(--muted);margin-top:-10px;padding:0 6px}.strings{display:flex;gap:8px;margin:8px 0 16px}.string{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);font-weight:600}.string.active{border-color:var(--accent);color:var(--fg);background:var(--card)}.in-tune .string.active{border-color:var(--good);background:color-mix(in srgb,var(--good) 22%,transparent)}.metronome{display:flex;flex-direction:column;gap:20px;padding-top:24px}.dots{display:flex;justify-content:center;gap:18px;height:56px;align-items:center}.dots span{width:36px;height:36px;border-radius:50%;background:var(--line);transition:background .06s}.dots span.accent{width:48px;height:48px}.dots span.lit{background:var(--accent);transition:none}.bpm-row{display:flex;align-items:center;justify-content:center;gap:24px}.bpm{min-width:140px;text-align:center;font-size:4.5rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.bpm small{display:block;font-size:.9rem;font-weight:400;color:var(--muted)}.bpm-row.small .bpm{font-size:2.6rem;min-width:100px}input[type=range]{width:100%;accent-color:var(--accent);height:32px}.slider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.9rem}.slider span{min-width:82px}.rhythm{display:flex;flex-direction:column;gap:16px;padding-top:8px}.selects{display:flex;gap:8px}.selects select:last-child{flex:0 0 96px}.rhythm select{flex:1;min-width:0;width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card)}.controls{display:flex;flex-direction:column;gap:12px}.pattern{display:grid;grid-template-columns:repeat(var(--cells, 8),1fr);gap:3px}.cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 0 8px;border-radius:8px;background:var(--card);font-size:1.6rem;line-height:1.1;font-weight:700}.cell small{font-size:.75rem;font-weight:400;color:var(--muted)}.cell.on-beat small{color:var(--fg);font-weight:700}.cell.rest{color:var(--line)}.cell.now{background:var(--accent);color:#1d1b19}.cell.now small{color:#1d1b19}.result .cell{font-size:1.2rem;padding:6px 0 12px}.result .gut,.result .pause{background:color-mix(in srgb,var(--good) 35%,var(--card))}.result .pause{color:color-mix(in srgb,var(--fg) 30%,transparent)}.result .knapp{background:color-mix(in srgb,var(--ok) 40%,var(--card))}.result .grob{background:color-mix(in srgb,var(--warn) 45%,var(--card))}.result .fehlt,.result .zuviel{background:color-mix(in srgb,var(--bad) 40%,var(--card))}.result .zuviel.rest{color:var(--fg)}.result .cell i{position:absolute;bottom:3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--fg)}.results{display:flex;flex-direction:column;gap:4px}.summary{list-style:none;padding:0;margin:12px 0 0;line-height:1.7}.chips{display:flex;gap:8px}.chips button{flex:1;padding:10px 6px;border-radius:999px;background:none;border:1px solid var(--line);color:var(--muted)}.chips button.on{background:var(--accent);border-color:var(--accent);color:#1d1b19;font-weight:600}.result .pending{background:var(--card);color:var(--line)}.live{display:flex;flex-direction:column;gap:6px;min-height:72px}.live .age-0 .cell{font-size:2rem;padding:14px 0 16px}.live .age-1{opacity:.7}.live .age-2{opacity:.45}.live .age-3{opacity:.25}.live .age-1 .cell,.live .age-2 .cell,.live .age-3 .cell{font-size:.95rem;padding:3px 0 7px}.rhythm .summary{text-align:center;margin:0;min-height:1.4em}.hint{color:var(--muted);font-size:.9rem;text-align:center;margin:0}.calib{color:var(--muted);font-size:.9rem;text-align:center}.headstock{width:190px;margin-top:-4px}.hs-body{fill:var(--card);stroke:var(--line)}.hs-nut{fill:var(--line)}.hs-string{stroke:var(--muted);stroke-width:1}.hs-shaft{stroke:var(--line);stroke-width:3}.hs-post{fill:var(--muted)}.hs-knob{fill:var(--bg);stroke:var(--line);stroke-width:1.5;transition:fill .15s}.peg text{font:600 12px system-ui,sans-serif;text-anchor:middle;fill:var(--muted)}.peg.active .hs-knob{fill:var(--accent);stroke:var(--accent)}.peg.active text{fill:#1d1b19}.peg.active .hs-shaft{stroke:var(--accent)}.in-tune .peg.active .hs-knob,.in-tune .peg.active .hs-shaft{fill:var(--good);stroke:var(--good)}.chords-view{display:flex;flex-direction:column;gap:14px;padding-top:8px}.chords-view select,.chords-view input{flex:1;min-width:0;width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);font:inherit;color:inherit}.chords-view input{-webkit-user-select:text;user-select:text}.secondary.small,.primary.small{width:auto;padding:10px 16px;font-size:1rem}.editor{display:flex;flex-direction:column;gap:8px;margin-top:8px}.editor .row{justify-content:flex-end}.target{display:flex;align-items:center;justify-content:center;gap:18px;min-height:150px}.target-name{font-size:5.5rem;font-weight:700;line-height:1}.target-name.success{animation:success .6s ease-out}@keyframes success{0%{color:var(--good);transform:scale(1.15)}to{color:var(--fg);transform:scale(1)}}.diagram{width:100px}.diagram line{stroke:var(--muted);stroke-width:1.5}.diagram line.nut{stroke:var(--fg);stroke-width:4}.diagram .dot{fill:var(--accent)}.diagram line.missing{stroke:var(--bad);stroke-width:3}.diagram .dot.missing{fill:var(--bad)}.diagram .open.missing{stroke:var(--bad);stroke-width:2.5}.diagram .open{fill:none;stroke:var(--fg);stroke-width:1.5}.diagram text{font:16px system-ui,sans-serif;fill:var(--fg);text-anchor:middle}.next,.heard{text-align:center;color:var(--muted);margin:0;min-height:1.4em}.sequence{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:40px}.sequence span{padding:8px 12px;border-radius:10px;background:var(--card);color:var(--muted);font-weight:600}.sequence span.done{color:var(--good)}.sequence span.now{background:var(--accent);color:#1d1b19}
