:root {
  color-scheme: dark;
  --bg: #08090b;
  --panel: #11151b;
  --soft: #171d24;
  --line: #2c343f;
  --text: #f4f6f1;
  --muted: #aeb7b1;
  --accent: #e7f45d;
  --good: #75e59f;
  --bad: #ff6868;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--text);
  background: radial-gradient(circle at 10% 0%, rgba(231,244,93,.12), transparent 28rem), linear-gradient(135deg, #08090b, #12171d 48%, #07080a);
}
button, input { font: inherit; }
button { cursor: pointer; }
.app { display: grid; grid-template-columns: minmax(16rem, 21rem) 1fr; width: 100%; min-width: 0; min-height: 100svh; }
.library { min-width: 0; padding: 1.25rem; border-right: 1px solid var(--line); background: rgba(8,9,11,.74); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.4rem; }
.mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .35rem; background: var(--accent); color: #111409; font-weight: 950; font-size: 1.35rem; }
h1, h2, p { margin: 0; letter-spacing: 0; }
h1 { font-size: 1.15rem; }
.brand p, .eyebrow, .meta, .controls span, .coach span { color: var(--muted); font-size: .8rem; }
.segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: .3rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--panel); }
.segment { min-width: 0; min-height: 2.15rem; border: 0; border-radius: .3rem; color: var(--muted); background: transparent; }
.segment.active { color: #111409; background: var(--accent); font-weight: 850; }
.songs { display: grid; gap: .65rem; margin-top: 1rem; }
.song { width: 100%; padding: .9rem; border: 1px solid transparent; border-radius: .5rem; text-align: left; color: var(--text); background: transparent; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.song:hover, .song.active { border-color: rgba(231,244,93,.42); background: rgba(231,244,93,.08); transform: translateY(-1px); }
.song strong { display: block; margin-bottom: .25rem; }
.practice { width: 100%; min-width: 0; padding: 1.25rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.topbar h2 { margin-top: .2rem; font-size: clamp(1.55rem, 4vw, 3rem); line-height: .95; }
.actions { display: flex; min-width: 0; gap: .65rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 0; min-height: 2.65rem; padding: 0 .95rem; border-radius: .45rem; border: 1px solid var(--line); color: var(--text); background: var(--panel); white-space: nowrap; }
.primary { border-color: var(--accent); background: var(--accent); color: #111409; font-weight: 900; }
.ghost.listening { border-color: var(--good); color: var(--good); }
.controls { display: grid; grid-template-columns: minmax(15rem, 1fr) auto minmax(13rem, 18rem); align-items: center; gap: 1rem; padding: .85rem 0; border-block: 1px solid var(--line); }
.tempo { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .8rem; }
input[type="range"], input[type="checkbox"] { accent-color: var(--accent); }
.toggle { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; }
.meter { height: .5rem; overflow: hidden; border-radius: 999px; background: var(--soft); }
.meter div { width: 0%; height: 100%; background: linear-gradient(90deg, var(--bad), var(--accent), var(--good)); transition: width .18s ease; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 1rem; height: calc(100svh - 11rem); min-height: 36rem; margin-top: 1rem; }
.highway-wrap { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.strings { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; height: 1.5rem; padding: 0 .35rem; color: var(--muted); font-weight: 800; text-align: center; }
.highway { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: .5rem; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 18rem), var(--panel); }
.lanes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.lanes span { border-left: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.04); }
.lanes span:last-child { border-right: 1px solid rgba(255,255,255,.06); }
.strike { position: absolute; left: 0; right: 0; bottom: 18%; z-index: 3; height: .28rem; background: var(--accent); box-shadow: 0 0 24px rgba(231,244,93,.45); }
.cues { position: absolute; inset: 0; z-index: 2; }
.cue { position: absolute; left: 0; width: 100%; height: 5.8rem; transform: translateY(-100%); }
.cue-label { position: absolute; left: .8rem; top: -1.45rem; padding: .2rem .42rem; border-radius: .3rem; background: rgba(8,9,11,.82); color: var(--accent); font-weight: 900; }
.string-cue { position: absolute; top: 1.75rem; width: calc(100% / 6 - .7rem); min-height: 2.4rem; display: grid; place-items: center; border: 1px solid rgba(231,244,93,.46); border-radius: .4rem; background: rgba(231,244,93,.18); font-weight: 900; }
.string-cue.open { border-color: rgba(117,229,159,.45); background: rgba(117,229,159,.13); }
.string-cue.muted { border-color: rgba(255,104,104,.45); color: var(--bad); background: rgba(255,104,104,.12); }
.coach { min-width: 0; padding-left: 1rem; border-left: 1px solid var(--line); }
.now { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.now strong { font-size: 4.75rem; line-height: .9; color: var(--accent); }
.fretboard { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); height: 15rem; margin: 1rem 0; border-top: .4rem solid var(--text); border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(20% - 1px), var(--line) calc(20% - 1px), var(--line) 20%); }
.fret-string { border-left: 1px solid rgba(244,246,241,.22); }
.fret-string:last-child { border-right: 1px solid rgba(244,246,241,.22); }
.nut-row { position: absolute; left: 0; right: 0; top: -1.65rem; display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; color: var(--muted); font-weight: 900; }
.dot { position: absolute; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; transform: translate(-50%,-50%); background: var(--accent); color: #111409; font-weight: 900; }
.heard { display: grid; gap: .35rem; padding: .9rem 0; border-block: 1px solid var(--line); }
.heard strong { min-height: 1.7rem; font-size: 1.15rem; }
.queue { padding-top: .9rem; }
.queue ol { display: grid; gap: .45rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.queue li { display: flex; align-items: center; justify-content: space-between; padding-bottom: .45rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.queue strong { color: var(--accent); }
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .library { border-right: 0; border-bottom: 1px solid var(--line); }
  .songs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workspace { grid-template-columns: 1fr; height: auto; }
  .highway-wrap { height: 34rem; }
  .coach { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }
}
@media (max-width: 680px) {
  .practice, .library { padding: .9rem; }
  .app, .library, .practice, .topbar, .controls, .workspace { max-width: 100vw; overflow-x: hidden; }
  .segments { width: 100%; }
  .segment { padding: 0; font-size: .92rem; }
  .topbar { flex-direction: column; align-items: stretch; }
  .actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .button { width: 100%; padding-inline: .5rem; font-size: .92rem; }
  .controls, .tempo, .score { grid-template-columns: 1fr; align-items: stretch; }
  .songs { grid-template-columns: 1fr; }
  .now strong { font-size: 3.8rem; }
}