:root{
  --bg:#0b0f12;
  --panel:#0f1417;
  --muted:#9aa4ad;
  --accent:#6ee7b7;
  --accent-2:#8ab4ff;
  --glass:rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);color:#e6eef6;
}
.app{max-width:1100px;margin:24px auto;padding:20px}
.hero h1{margin:0 0 6px;font-size:1.6rem}
.hero p{margin:0;color:var(--muted)}

/* small version label next to the main title */
.hero h1 .version{font-size:0.55rem;color:var(--muted);font-weight:500;margin-left:10px;vertical-align:super}
#circle-area{display:flex;justify-content:center;align-items:center;margin:6px 0}
#circleSvg{width:100%;max-width:720px;height:auto}

/* remove any background box behind the circle */
.circle-area{background:transparent}
#circleSvg{background:transparent}
.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px;background:var(--panel);border-radius:10px}
.selected{min-width:220px}
.selected div{margin:4px 0;color:var(--muted)}
.btn{background:transparent;border:1px solid var(--glass);color:var(--accent);padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}
.btn:hover{background:rgba(255,255,255,0.02)}
.buttons .btn{display:inline-block}
.buttons .btn{cursor:pointer}
.staff-area{margin-top:6px;padding:18px 12px;background:transparent;border-radius:10px;min-height:260px}
#staffSvg{width:100%;height:220px}
.examples{margin-top:18px;padding:12px;background:var(--panel);border-radius:10px}
.example-list{display:flex;gap:12px;flex-wrap:wrap}
.example{display:flex;gap:8px;align-items:center}
.example .meta{color:var(--muted)}
.example .btn{display:inline-block}
.example-play{display:inline-block}
.example .btn, .example-play{border:1px solid var(--glass);color:var(--accent);padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}
.example .btn:hover, .example-play:hover{background:rgba(255,255,255,0.02)}
.foot{margin-top:18px;color:var(--muted);font-size:0.9rem}

@media (max-width:720px){
  .app{padding:12px}
  .hero h1{font-size:1.2rem}
  #circleSvg{max-width:420px}
  #staffSvg{height:260px}
  .staff-area{min-height:300px}
}

.segment-label{font-size:12px;fill:#e6eef6;text-anchor:middle}
.segment-key{font-weight:700}
.segment-sub{font-size:10px;fill:var(--muted)}
.segment-hover{fill:rgba(110,231,183,0.08)}

/* invert segment on hover: bright fill and dark label text */
.segment-invert .segment-path{fill:rgba(255,255,255,0.12); stroke:rgba(0,0,0,0.06)}
.segment-invert .segment-label{fill:#e6eef6}
.segment-invert .segment-sub{fill:#e6eef6}

.notehead{fill:white;stroke:#00000022}
.note-highlit{fill:var(--accent);stroke:rgba(0,0,0,0.2)}