:root {
  color-scheme: dark;
  --background: #101819;
  --panel: #192426;
  --surface: #222f31;
  --line: #415354;
  --text: #f3f6f1;
  --muted: #b9c8c5;
  --lime: #d1ff79;
  --gold: #ffda8b;
  --on-accent: #182115;
  font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  color: var(--text);
  background: var(--background);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; line-height: 1.6; }
main { width: min(880px, 100%); margin: auto; padding: 0 clamp(12px, 4vw, 30px) 36px; }
header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 17px 2px; }
h1, h2, h3, p { margin: 0; }
h1, .site-name { font-size: clamp(24px, 4vw, 32px); line-height: 1.2; letter-spacing: -.04em; }
.site-name { font-weight: 700; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
a { color: var(--lime); text-underline-offset: 4px; }
header nav { display: flex; flex-wrap: wrap; gap: 2px 16px; }
header a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: clamp(12px, 3.5vw, 26px); }
.panel + .panel { margin-top: 16px; }
.trainer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.trainer-head h1 { font-size: clamp(1.2rem, 4vw, 1.65rem); }
.practice h2 { font-size: 1rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend, .label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 5px; }
select, button, .choice span {
  font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; min-height: 44px; padding: 5px 11px;
}
button, select, summary, .choice { cursor: pointer; }
:focus-visible, .choice input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }
.options { display: flex; flex-wrap: wrap; gap: 5px; }
.choice { position: relative; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span { display: flex; align-items: center; height: 100%; }
.choice input:checked + span, button[aria-pressed="true"] {
  color: var(--lime); background: #2c392b; border-color: var(--lime); font-weight: 700;
}
.readout { margin: 15px 0 10px; }
.note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 12px; }
.note strong { font-size: 1.65rem; line-height: 1.25; }
.note span { font-size: .9rem; color: var(--muted); }
.instruction { font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 700; margin-top: 4px; }
.fret-label { display: block; color: var(--muted); font-size: .8rem; }
.board { width: 100%; table-layout: fixed; border-spacing: 0; text-align: center; font-size: .82rem; }
.board thead th { color: var(--muted); font-weight: 600; height: 25px; }
.board th:first-child { width: 45px; }
.board tbody th { background: var(--surface); font-weight: 600; border-bottom: 1px solid var(--line); }
.board tbody th.active { color: var(--lime); }
.board td {
  position: relative; height: 44px; padding: 0; border-right: 2px solid #566864;
  border-bottom: 1px solid var(--line); background: #141e20;
}
.board td::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid #80948d; }
.board td.open { border-right: 4px double #a6bbb2; background: #202c2d; }
.mark {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; padding: 1px 4px; border-radius: 6px; font-weight: 800; white-space: nowrap;
}
.scale { background: #354641; color: var(--text); }
.root { background: var(--lime); color: var(--on-accent); }
.fifth { background: var(--gold); color: var(--on-accent); }
.caption { font-size: .84rem; color: var(--muted); margin-top: 7px; }
.practice { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 12px; }
.practice-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.sequence { display: flex; gap: 4px; }
.sequence button { min-width: 44px; }
#next, #block-next {
  background: var(--lime); color: var(--on-accent); border-color: var(--lime);
  font-weight: 800; padding-inline: 15px; margin-left: auto;
}
details { border-top: 1px solid var(--line); margin-top: 14px; }
summary { padding-block: 9px; min-height: 44px; font-weight: 700; }
.settings-current { display: inline-block; color: var(--muted); font-size: .83rem; font-weight: 400; margin-left: 6px; }
.controls { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 5px 0 12px; }
.degrees { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.degrees button { padding: 5px 0; min-height: 51px; font-weight: 700; }
.degrees small { display: block; font-size: .76rem; font-weight: 500; }
.boards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.guide article { min-width: 0; border-top: 1px solid var(--line); padding-top: 9px; }
.guide article p { font-size: .88rem; margin: 4px 0 8px; }
.guide .board td { height: 34px; }
.block-settings { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; margin: 12px 0; }
.block-fret-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.block-mark {
  flex-direction: column; gap: 0; line-height: 1.12; min-height: 34px;
  padding: 2px; min-width: min(26px, 100%); font-size: .84rem;
}
.block-mark small { font-size: .72rem; }
.block-play { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.block-play strong { margin-right: 7px; }
.block-play span { display: inline-block; }
.power-lesson { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.manual-explainer p { margin-top: 6px; font-size: .9rem; }
.power-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.power-grid article { background: var(--surface); padding: 8px; border-radius: 8px; }
.power-grid .board td { height: 33px; }
.octave { background: #a4d9ff; color: var(--on-accent); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; font-size: .8rem; }
.legend .mark { padding-inline: 7px; }
.manual-footer { margin-top: 14px; }
@media (max-width: 720px) {
  .boards, .guide { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .power-grid { grid-template-columns: 1fr; }
}
@media (max-width: 370px) {
  #next { padding-inline: 9px; }
}

.score-key { margin: 8px 0 3px; font-weight: 700; }
.score-roots { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }
.song-verse + .song-verse { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 12px; }
.song-line { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 3px 0; }
.song-phrase { display: flex; flex-wrap: wrap; max-width: 100%; }
.song-slot {
  display: grid; grid-template-rows: 1.6rem auto; justify-items: center;
  align-items: center; min-width: 1.12rem; white-space: nowrap;
}
.song-lyric { grid-row: 2; font-size: 1.03rem; line-height: 1.55; }
.song-cue {
  grid-row: 1; color: var(--lime); font-size: 1.05rem; font-weight: 800;
  line-height: 1.35; padding-inline: .22em; border-radius: 4px; background: #2c392b;
}
.practice-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 10px 0 0; padding: 0; gap: 6px; }
.practice-bars li {
  min-height: 48px; display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px;
}
.practice-bars .song-cue { grid-row: auto; background: none; font-size: 1.25rem; }
.score-key-change { font-size: .84rem; color: var(--gold); margin: 8px 0 0; }
.song-source { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 9px; }
.song-source p + p { margin-top: 4px; }

.catalog-heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
}
.import-link {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font-size: .88rem; font-weight: 700; text-decoration: none;
}
.import-link:hover { border-color: var(--lime); }
.catalog-search { display: grid; gap: 5px; margin: 12px 0; }
.catalog-search input {
  width: 100%; min-height: 48px; padding: 8px 12px; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.catalog-search input::placeholder { color: var(--muted); }
.catalog-search label { font-size: .88rem; font-weight: 700; }
.catalog-list { padding: 0; margin: 6px 0 0; list-style: none; }
.catalog-list li + li { border-top: 1px solid var(--line); }
.catalog-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  min-height: 54px; padding: 7px 0; color: var(--text); text-decoration: none;
}
.catalog-list a:hover .catalog-title { color: var(--lime); text-decoration: underline; }
.catalog-title, .catalog-artist { display: block; }
.catalog-artist { color: var(--muted); font-size: .83rem; }
.catalog-destination { flex-shrink: 0; color: var(--lime); font-size: .83rem; }

#imported-title { margin-top: 8px; }
.imported-score-scroll { overflow-x: auto; padding-bottom: 3px; }
.imported-score-row {
  display: grid; grid-auto-columns: minmax(.62rem, max-content); grid-auto-rows: minmax(1.45rem, auto);
  width: max-content; margin-top: 5px; white-space: pre;
}
.imported-score-row .song-cue {
  justify-self: start; z-index: 1; padding: 0 1px; margin-inline-end: .28rem;
}
.imported-score-row .song-lyric { font-size: .98rem; line-height: 1.5; }
.imported-chords { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 8px; }

.notation-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 4px 12px; margin-block: 8px;
}
.notation-row .score-key { margin: 0; }
.notation-row button { font-size: .85rem; }

.review-actions, .review-metadata, .review-chord {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; margin-block: 8px;
}
.review-actions input { max-width: 100%; }
#image-review label { display: grid; gap: 4px; font-size: .84rem; font-weight: 700; }
#image-review input {
  min-width: 0; max-width: 100%; min-height: 40px; padding: 6px 8px;
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px;
}
#image-review .confirm-full-song {
  display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; margin-block: 10px;
}
#image-review .confirm-full-song input { flex: none; min-height: 0; accent-color: var(--lime); }
#image-review { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
#review-rows { margin-block: 10px; }
#review-rows details { margin-top: 3px; }
#review-rows summary { overflow-wrap: anywhere; }
.review-chord input { width: 7rem; }
.review-chord input[type="number"] { width: 5rem; }

.score-paste {
  margin-top: 8px; padding: 10px 12px; background: var(--surface);
  border: 1px dashed var(--line); border-radius: 7px; font-size: .9rem;
}