:root { color-scheme: light dark; --fg: #1d1d1f; --bg: #fbfaf7; --accent: #2f7d4f; --muted: #6b6b6b; }
@media (prefers-color-scheme: dark) { :root { --fg: #eceae4; --bg: #161615; --accent: #5fbf85; --muted: #a0a09a; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.5 system-ui, sans-serif; }
main { max-width: 36rem; margin: 0 auto; padding: 2rem 16px; }
.note, #status { color: var(--muted); }
button { font: inherit; padding: .6rem 1.1rem; border-radius: .5rem; border: 0; background: var(--accent); color: #fff; }
.meter { height: .75rem; margin-top: 1rem; border-radius: .4rem; background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
#level { height: 100%; width: 0; background: var(--accent); transition: width 60ms linear; }
a { color: var(--accent); }
h2 { font-size: 1.25rem; margin: 2rem 0 .25rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .25rem; }
#now { font-variant-numeric: tabular-nums; }
#notes { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
#notes li { font-size: .9em; padding: .1rem .45rem; border-radius: .3rem; background: color-mix(in srgb, var(--accent) 18%, transparent); font-variant-numeric: tabular-nums; }
main { max-width: 60rem; }
main > p, main > section > p, .results, #q { max-width: 36rem; }
#q { width: 100%; box-sizing: border-box; font: inherit; padding: .55rem .7rem; border-radius: .5rem; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); background: var(--bg); color: var(--fg); }
.results { list-style: none; margin: .5rem 0 0; padding: 0; }
.results button { display: flex; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; background: none; color: var(--fg); padding: .5rem .25rem; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.results button span { color: var(--muted); font-size: .9em; text-align: right; }
#tune-title { margin-bottom: 0; }
#tune-aliases { margin-top: .1rem; }
.tune-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--muted); }
.tune-bar label { color: var(--fg); white-space: nowrap; }
#notation { margin-top: .5rem; overflow: hidden; }
#notation .now-bar { fill: color-mix(in srgb, var(--accent) 35%, var(--fg)); }
#notation .now { fill: var(--accent); stroke: var(--accent); stroke-width: 3px; }
@media (max-width: 560px) { .results button { flex-direction: column; gap: 0; } .results button span { text-align: left; } }
#roll { display: block; width: 100%; height: 220px; margin: .5rem 0; border-radius: .4rem; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.roll-bar { display: flex; gap: .5rem; margin-bottom: .5rem; }
.roll-bar button, .tuning button { padding: .35rem .8rem; }
details { margin-top: 1rem; }
summary { cursor: pointer; }
.tuning { display: grid; gap: .75rem; margin-top: .5rem; max-width: 36rem; }
.setting { display: grid; grid-template-columns: 1fr minmax(0, 10rem) 3.5rem; align-items: center; gap: .1rem .5rem; }
.setting input, .setting select { width: 100%; font: inherit; }
.setting output { font-variant-numeric: tabular-nums; text-align: right; }
.setting small { grid-column: 1 / -1; color: var(--muted); }
@media (max-width: 560px) { .setting { grid-template-columns: 1fr 3.5rem; } .setting span { grid-column: 1 / -1; } }
.toggles { display: flex; gap: 1rem; }
.guitar { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: .4rem 0 .5rem; border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.guitar p { margin: 0; }
.chord-now { display: flex; align-items: baseline; gap: .75rem; }
#chord-now { font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.chord-next { color: var(--muted); font-size: 1.1rem; }
.chord-next b { color: var(--fg); font-size: 1.4rem; }
#guitar-status { color: var(--muted); }
#guitar-status.drifting { color: var(--accent); font-weight: 600; }
#notation .lost { animation: lost 1.2s ease-out 2; }
@keyframes lost { 0% { fill: var(--accent); opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }
#chord-source { font-size: .9rem; margin-left: auto; }