:root{--bg: #12151c;--surface: #1b202b;--surface-raised: #232936;--border: #2f3644;--text: #e8ecf4;--text-muted: #93a0b5;--accent: #ffb238;--accent-ink: #1a1206;--diagram-line: #6f7d95;--radius: 12px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;-webkit-text-size-adjust:100%}.app{max-width:960px;margin:0 auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom))}.app__header{display:flex;align-items:center;justify-content:space-between;padding:4px 0 12px}.app__title{margin:0;font-size:1rem;font-weight:600;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase}.app__main{display:grid;gap:16px}.selector__steps{display:grid;gap:10px}.selector__steps--collapsed{display:none}.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px}.step__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.step__title{display:flex;align-items:center;gap:8px;margin:0;font-size:.8125rem;font-weight:600;color:var(--text-muted)}.step__index{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-raised);color:var(--text);font-size:.6875rem}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips--keys{display:grid;grid-template-columns:repeat(7,1fr)}.chips--accidentals{display:grid;grid-template-columns:repeat(5,1fr);margin-top:6px}.chips--quality{display:grid;grid-template-columns:repeat(2,1fr)}.chips--keys .chip,.chips--accidentals .chip,.chips--quality .chip{min-width:0;padding:0 4px}.chip{min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-raised);color:var(--text);font-family:inherit;font-size:1rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease}.chip--accidental{min-height:36px;font-size:.8125rem;font-weight:500;color:var(--text-muted)}.chip--quality{min-height:48px}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.chip:focus-visible,.toggle__button:focus-visible,.forms__tab:focus-visible,.playback__play:focus-visible,.playback__mode:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.toggle{display:flex;gap:2px;padding:2px;background:var(--surface-raised);border:1px solid var(--border);border-radius:8px}.toggle__button{min-width:34px;min-height:28px;border:0;border-radius:6px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:.9375rem;cursor:pointer}.toggle__button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.result{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.result__name{width:100%;margin:0;text-align:center;font-size:3rem;font-weight:700;line-height:1;letter-spacing:.01em}.result__frets{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;letter-spacing:.16em;color:var(--text-muted)}.diagram{width:min(100%,250px);height:auto}.diagram__nut{fill:var(--text)}.diagram__fret{stroke:var(--diagram-line);stroke-width:1;opacity:.7}.diagram__string{stroke:var(--diagram-line)}.diagram__base-fret{fill:var(--text-muted);font-size:11px;text-anchor:end;dominant-baseline:middle}.diagram__barre,.diagram__dot{fill:var(--accent)}.diagram__finger{fill:var(--accent-ink);font-size:11px;font-weight:700;text-anchor:middle;dominant-baseline:central}.diagram__open{fill:none;stroke:var(--text);stroke-width:1.5}.diagram__mute line{stroke:var(--text-muted);stroke-width:1.5;stroke-linecap:round}.forms{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.forms__tab{min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:.8125rem;cursor:pointer}.forms__tab[aria-selected=true]{border-color:var(--accent);color:var(--accent)}.stage{display:flex;align-items:center;justify-content:center;gap:2px;width:100%}.stage__swipe{flex:0 1 auto;display:flex;justify-content:center;min-width:0;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.stage__step{flex:0 0 auto;display:grid;place-items:center;width:36px;height:72px;border:0;border-radius:10px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:1.5rem;line-height:1;cursor:pointer}.stage__step:active{background:var(--surface-raised);color:var(--text)}@media (hover: hover){.stage__step:hover{background:var(--surface-raised);color:var(--text)}}.minor-toggle{min-height:30px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:.8125rem;font-weight:700;letter-spacing:.02em;cursor:pointer}.minor-toggle[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.stage__step:focus-visible,.minor-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.favorites{display:flex;gap:6px;margin-bottom:10px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none}.favorites::-webkit-scrollbar{display:none}.favorites__item{flex:0 0 auto;min-height:38px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-family:inherit;font-size:.9375rem;font-weight:600;cursor:pointer}.favorites__item[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.result__actions{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:-4px}.favorite-button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer}.favorite-button[aria-pressed=true]{color:var(--accent)}.favorite-button__icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}.favorite-button[aria-pressed=true] .favorite-button__icon{fill:currentColor}.favorites__item:focus-visible,.favorite-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.step__note{font-size:.6875rem;color:var(--text-muted)}.chips--capo{display:grid;grid-template-columns:repeat(8,1fr)}.chips--capo .chip{min-width:0;min-height:40px;padding:0 4px;font-size:.875rem}.result__capo{display:flex;align-items:center;gap:8px;margin:-4px 0 0;font-size:.8125rem;color:var(--text-muted)}.result__capo strong{color:var(--text);font-size:.9375rem}.result__capo-badge{padding:3px 9px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-weight:700}.diagram__nut--capo{fill:var(--accent)}.playback{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:2px}.playback__play{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 28px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer}.playback__icon{font-size:.75rem}.playback__modes{display:flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--bg)}.playback__mode{min-height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:.75rem;cursor:pointer}.playback__mode[aria-pressed=true]{background:var(--surface-raised);color:var(--text)}.diagram__hit{fill:transparent;cursor:pointer}.diagram__hit:active{fill:#ffffff14}@media (hover: hover){.diagram__hit:hover{fill:#ffffff0a}}.tones{display:flex;gap:14px;margin:4px 0 0}.tones__item{display:grid;justify-items:center;gap:2px}.tones__degree{font-size:.6875rem;color:var(--text-muted)}.tones__note{margin:0;font-size:1rem;font-weight:600}.app__tools{display:flex;align-items:center;gap:8px}.tool-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer}.tool-button[aria-pressed=true],.tool-button[aria-expanded=true]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.tool-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tool-button__icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.selector-toggle .tool-button__icon circle{fill:currentColor;stroke:none}.voice{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:flex-end}.voice__backdrop{position:absolute;inset:0;border:0;padding:0;background:#06080c99;cursor:pointer}.voice__sheet{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,520px);margin:0 auto;padding:20px 16px calc(20px + env(safe-area-inset-bottom));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0}.voice__status{display:flex;align-items:center;gap:8px;margin:0;font-size:.875rem;font-weight:600;color:var(--text-muted)}.voice__pulse{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:voice-pulse 1.1s ease-in-out infinite}@keyframes voice-pulse{50%{opacity:.25}}@media (prefers-reduced-motion: reduce){.voice__pulse{animation:none}}.voice__transcript{margin:0;font-size:1.125rem;font-weight:600;text-align:center}.voice__candidates{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}.voice__candidate{min-height:52px;padding:0 22px;border:1px solid var(--accent);border-radius:12px;background:transparent;color:var(--accent);font-family:inherit;font-size:1.375rem;font-weight:700;cursor:pointer}.voice__hint{margin:0;font-size:.8125rem;color:var(--text-muted);text-align:center}.voice__actions{display:flex;gap:8px}.voice__action{min-height:44px;padding:0 20px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:.875rem;cursor:pointer}.voice__action--primary{border-color:var(--accent);color:var(--accent)}.voice__candidate:focus-visible,.voice__action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width: 719px){.app--focus .result__name{font-size:3.5rem}.app--focus .diagram{width:min(100%,300px)}.app--focus .result__frets{font-size:1.125rem}}@media (min-width: 720px){.app__main{grid-template-columns:1fr 340px;align-items:start}.selector-toggle{display:none}.selector__steps--collapsed{display:grid}.result{position:sticky;top:12px}.result__name{font-size:2.5rem}.diagram{width:min(100%,220px)}}@media (max-height: 540px){.app{padding-top:6px}.app__header{padding:0 0 8px}.result{gap:6px;padding:12px 10px 14px}.result__name{font-size:1.5rem}.diagram{width:min(100%,132px)}.stage__step{height:56px}.result__frets{font-size:.875rem}.forms__tab{min-height:30px}.playback{flex-direction:row;gap:8px}.playback__play{min-height:40px;padding:0 18px}.playback__mode{padding:0 9px;font-size:.6875rem}.tones{gap:10px}.step{padding:10px}}