:root{
  --bg:#081018;
  --panel:#111a25;
  --line:rgba(255,255,255,.13);
  --text:#f7f9fc;
  --muted:#9da9b8;
  --green:#22d486;
  --blue:#2388ff;
  --yellow:#ffd04a;
  --purple:#7f3df2;
  --cream:#fff5cc;
}
*{box-sizing:border-box}
html,body{margin:0;background:#050a10;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body{background:radial-gradient(circle at 80% 0%,rgba(34,212,134,.12),transparent 30%),linear-gradient(180deg,#081018,#060a10)}
.app{max-width:850px;margin:auto;min-height:100vh;padding:10px}
.topbar{height:44px;display:flex;align-items:center;gap:12px}
.menu{font-size:25px;color:#dbe4ee;line-height:1}
.brand{flex:1;text-align:center;font-size:22px;font-weight:950}
.brand span{color:var(--green)}
.spacer{width:26px}
.card{border:1px solid var(--line);border-radius:20px;background:rgba(15,23,34,.92);padding:10px;box-shadow:0 24px 80px rgba(0,0,0,.38)}
.diagramPanel{background:var(--cream);color:#05080c;border-radius:18px;padding:12px 10px 10px}
.label{text-align:center;letter-spacing:5px;font-size:11px;font-weight:950;color:#425064;margin-bottom:2px}
.chordTitle{text-align:center;font-size:44px;font-weight:950;line-height:1;margin-bottom:6px}
.infoRow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;max-width:660px;margin:0 auto 3px}
.infoRow div{border:1px solid rgba(20,30,40,.22);border-radius:9px;padding:7px 8px;text-align:center;font-size:15px;color:#203040}
.infoRow b{letter-spacing:1px}
#shapeLabel{color:var(--purple)}
#chordSvg{display:block;width:100%;height:auto;max-height:56vh;margin:0 auto}
.toggle{display:flex;background:#081018;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:4px;max-width:560px;margin:6px auto 0}
.displayBtn{flex:1;height:34px;border:0;border-radius:9px;background:transparent;color:#c7d1de;font-weight:950;font-size:15px}
.displayBtn.active{background:var(--yellow);color:#111}
.controls{padding:8px 0 0}
.group{border-bottom:1px solid var(--line);padding:7px 0}
.groupTitle{font-size:15px;font-weight:950;margin-bottom:6px}
.groupHead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.modeToggle{display:flex;background:#081018;border:1px solid var(--line);padding:3px;border-radius:11px}
.modeBtn{border:0;border-radius:8px;background:transparent;color:#aeb8c5;font-weight:950;height:28px;padding:0 13px}
.modeBtn.active{background:var(--green);color:#04130d}
.buttonRow{display:grid;gap:5px}
.rootRow{grid-template-columns:repeat(12,1fr)}
.typeRow{grid-template-columns:repeat(10,1fr)}
.shapeRow{grid-template-columns:repeat(7,1fr)}
.pickBtn{height:34px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:linear-gradient(180deg,#202a36,#111821);color:#fff;font-size:13px;font-weight:950;padding:0 4px}
.pickBtn.rootActive{background:linear-gradient(135deg,#22d486,#12b872);color:#04130d;border-color:#22d486}
.pickBtn.typeActive{background:linear-gradient(135deg,#2388ff,#1769dd);border-color:#2388ff}
.pickBtn.shapeActive{background:linear-gradient(135deg,#874df6,#672bd2);border-color:#874df6}
footer{text-align:center;color:#647080;font-size:12px;font-weight:750;margin-top:9px}

@media(max-width:520px){
  .app{padding:7px}
  .topbar{height:40px}
  .brand{font-size:19px}
  .card{padding:7px;border-radius:17px}
  .diagramPanel{border-radius:16px;padding:8px 7px}
  .label{font-size:9px;letter-spacing:4px}
  .chordTitle{font-size:34px;margin-bottom:4px}
  .infoRow{gap:5px;margin-bottom:2px}
  .infoRow div{font-size:12px;padding:5px 4px}
  #chordSvg{max-height:52vh}
  .toggle{margin-top:5px}
  .displayBtn{height:30px;font-size:13px}
  .group{padding:6px 0}
  .groupTitle{font-size:14px;margin-bottom:5px}
  .rootRow{grid-template-columns:repeat(6,1fr)}
  .typeRow{grid-template-columns:repeat(5,1fr)}
  .shapeRow{grid-template-columns:repeat(4,1fr)}
  .pickBtn{height:30px;font-size:12px}
}