:root { --bg: #1d2024; --card: #262a30; --fg: #e6e4de; --muted: #a5a29a; --acc: #c8a24a; --line: #3a3f47; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; }
header, main, footer { max-width: 880px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 20px; }
h1 { font-size: 1.5rem; margin: 0.2em 0; }
h2 { font-size: 1.15rem; margin: 0 0 0.6em; color: var(--acc); }
h3 { font-size: 1rem; margin: 1em 0 0.3em; }
.tag { font-size: 0.7rem; border: 1px solid var(--muted); border-radius: 4px; padding: 1px 6px; color: var(--muted); vertical-align: middle; }
.lead, .note, footer { color: var(--muted); }
.note { font-size: 0.9rem; margin: 0.3em 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin: 14px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; }
.grid.four { grid-template-columns: repeat(4, 1fr); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; }
.radios label, label.check { flex-direction: row; align-items: center; gap: 8px; }
.radios { display: flex; flex-direction: column; gap: 6px; }
select, input[type=number] { background: #16181b; color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: 1rem; }
input[type=range] { width: 100%; }
.fixed { padding: 8px 0; color: var(--muted); }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
button, .filebtn { background: #343a42; color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; font-size: 0.95rem; cursor: pointer; min-height: 44px; }
.filebtn { display: inline-flex; flex-direction: row; align-items: center; }
.filebtn input { display: none; }
button.primary { background: var(--acc); color: #1d2024; border-color: var(--acc); font-weight: bold; }
button:disabled { opacity: 0.45; cursor: default; }
.status { min-height: 1.6em; }
.status.err { color: #e08a7a; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 8px; }
th, td { border-bottom: 1px solid var(--line); padding: 5px 6px; text-align: left; }
.chords { font-family: ui-monospace, "Consolas", monospace; font-size: 0.85rem; word-break: break-word; }
.info ul { padding-left: 1.2em; }
details { margin: 6px 0; }
summary { cursor: pointer; }
a { color: var(--acc); }
@media (max-width: 560px) { .grid.four { grid-template-columns: repeat(2, 1fr); } body { font-size: 15px; } }
[hidden] { display: none !important; }
.hero { text-align: center; padding: 28px 16px; }
button.big { font-size: 1.15rem; padding: 14px 28px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; text-align: center; min-height: 96px; }
.tile .ico { font-size: 1.8rem; line-height: 1; }
.tile .sub { font-size: 0.75rem; color: var(--muted); }
.tile.sel { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc) inset; }
.crumbs { margin: 10px 0 4px; color: var(--muted); font-size: 0.9rem; }
button.link { background: none; border: none; color: var(--acc); padding: 6px 0; min-height: 0; }
.sticky { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; }
.cands { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cand { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.cand h3 { margin: 0; color: var(--acc); }
.cand .dir { margin: 4px 0; font-weight: bold; }
.cand .buttons { margin-top: 8px; }
.cand.playing { border-color: var(--acc); }
.statusbar { max-width: 880px; margin: 8px auto; display: flex; gap: 10px; align-items: center; min-height: 44px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }