:root{
  --bg:#12171a;
  --bg-grad:#0c1012;
  --panel:#1a2126;
  --panel-2:#212a30;
  --panel-3:#171e22;
  --line:#2c383e;
  --brass:#c9a24b;
  --brass-bright:#e6c778;
  --brass-dim:#7a6430;
  --coral:#d9694f;
  --coral-dim:#7a3d2f;
  --teal:#4f9a8c;
  --teal-dim:#2c554d;
  --purple:#9b7ec2;
  --purple-dim:#5a4a72;
  --cream:#ede6d6;
  --muted:#8ea0a6;
  --lcd-bg:#0c1512;
  --lcd-fg:#83f0b8;
  --lcd-fg-dim:#3c6b52;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 700px at 15% -10%, #1b2328 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, #17201f 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-grad) 100%);
  color:var(--cream);
  font-family:'Zen Kaku Gothic New', sans-serif;
  min-height:100vh;
  line-height:1.7;
}
.wrap{max-width:1240px;margin:0 auto;padding:28px 20px 80px;}

/* ---------- header ---------- */
header.top{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:16px;}
.brand-mark{
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--brass);
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2a332c, #12171a 70%);
  box-shadow:inset 0 0 12px rgba(0,0,0,.6), 0 0 0 4px rgba(201,162,75,.08);
  flex-shrink:0;
}
.brand-mark svg{width:30px;height:30px;}
h1{
  font-family:'Zen Old Mincho', serif;
  font-weight:600;
  font-size:clamp(22px,3.4vw,32px);
  margin:0;letter-spacing:.03em;
  color:var(--cream);
}
h1 small{
  display:block;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;
  font-size:12px;letter-spacing:.16em;color:var(--muted);margin-top:4px;text-transform:uppercase;
}
.tagline{max-width:360px;font-size:13px;color:var(--muted);text-align:right;}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:440px 1fr;gap:30px;align-items:start;}
@media (max-width:920px){ .layout{grid-template-columns:1fr;} }

/* ---------- wheel panel ---------- */
.wheel-col{position:sticky;top:20px;}
@media (max-width:920px){ .wheel-col{position:static;} }
.wheel-panel{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-3) 100%);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px 16px 16px;
  box-shadow:var(--shadow);
}
.wheel-svg-holder{width:100%;aspect-ratio:1/1;}
.wheel-legend{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:12px;font-size:11px;color:var(--muted);
}
.wheel-legend span{display:inline-flex;align-items:center;gap:5px;}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* readout / LCD */
.lcd{
  margin-top:16px;
  background:var(--lcd-bg);
  border:1px solid #0a1310;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.6);
}
.lcd-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;}
.lcd-key{
  font-family:'DotGothic16', monospace;
  font-size:30px;color:var(--lcd-fg);
  text-shadow:0 0 8px rgba(131,240,184,.45);
  letter-spacing:.02em;
}
.lcd-sub{font-family:'DotGothic16', monospace;font-size:12px;color:var(--lcd-fg-dim);letter-spacing:.08em;}
.mode-toggle{
  display:flex;gap:6px;margin-top:12px;
}
.mode-toggle button{
  flex:1;padding:9px 6px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);font-family:inherit;font-size:12.5px;
  cursor:pointer;transition:.15s;font-weight:700;
}
.mode-toggle button.active{
  background:linear-gradient(180deg,#2d3b39,#1c2624);
  color:var(--teal);border-color:var(--teal-dim);
  box-shadow:0 0 0 1px var(--teal-dim) inset;
}
.mode-toggle button.active.minor-active{color:var(--purple);border-color:var(--purple-dim);box-shadow:0 0 0 1px var(--purple-dim) inset;}

/* ---------- tabs ---------- */
.tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;
}
.tab-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);cursor:pointer;font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:13px;font-weight:500;transition:.15s;
}
.tab-btn .num{
  font-family:'Zen Old Mincho',serif;font-weight:600;font-size:13px;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--brass-dim);color:var(--brass);flex-shrink:0;
}
.tab-btn:hover{border-color:var(--brass-dim);color:var(--cream);}
.tab-btn.active{
  background:linear-gradient(180deg,#28211a,#1c1712);
  border-color:var(--brass);color:var(--cream);
  box-shadow:0 0 0 1px rgba(201,162,75,.25) inset, 0 4px 14px rgba(0,0,0,.35);
}
.tab-btn.active .num{background:var(--brass);color:#1a1408;border-color:var(--brass);}

/* ---------- content panel ---------- */
.panel{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-3) 100%);
  border:1px solid var(--line);border-radius:20px;
  padding:26px 26px 30px;box-shadow:var(--shadow);
  min-height:420px;
}
.panel-head{margin-bottom:18px;}
.eyebrow{
  font-family:'DotGothic16',monospace;font-size:11px;letter-spacing:.18em;color:var(--brass);
  text-transform:uppercase;margin:0 0 6px;
}
.panel h2{
  font-family:'Zen Old Mincho',serif;font-size:22px;margin:0 0 8px;color:var(--cream);font-weight:600;
}
.panel .lead{color:var(--muted);font-size:13.5px;margin:0;max-width:640px;}

/* chord grid */
.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:20px;}
.chord-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:14px;
  position:relative;overflow:hidden;
}
.chord-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fn-color,var(--brass));
}
.chord-card .roman{font-family:'Zen Old Mincho',serif;font-size:13px;color:var(--muted);margin-bottom:4px;}
.chord-card .name{font-family:'DotGothic16',monospace;font-size:22px;color:var(--cream);}
.chord-card .name7{font-size:12px;color:var(--muted);margin-top:3px;font-family:'DotGothic16',monospace;}
.chord-card .fn-tag{
  display:inline-block;margin-top:8px;font-size:10.5px;padding:2px 8px;border-radius:20px;
  background:rgba(201,162,75,.12);color:var(--fn-color,var(--brass));border:1px solid var(--fn-color,var(--brass-dim));
}

/* function columns */
.fn-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:18px;}
@media (max-width:700px){ .fn-cols{grid-template-columns:1fr;} }
.fn-col{border-radius:14px;padding:14px;border:1px solid var(--line);background:var(--panel-2);}
.fn-col h3{margin:0 0 4px;font-family:'Zen Old Mincho',serif;font-size:16px;}
.fn-col p.desc{font-size:12px;color:var(--muted);margin:0 0 10px;}
.fn-col .chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  font-family:'DotGothic16',monospace;font-size:14px;padding:5px 10px;border-radius:8px;
  background:var(--panel-3);border:1px solid var(--line);color:var(--cream);
}

/* scale strip */
.scale-strip{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;}
.scale-note{
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  width:64px;padding:12px 4px;text-align:center;
}
.scale-note .deg{font-size:10px;color:var(--muted);}
.scale-note .nm{font-family:'DotGothic16',monospace;font-size:20px;color:var(--cream);margin-top:4px;}
.scale-note.root{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset;}
.scale-note.root .nm{color:var(--brass-bright);}

/* forms */
.field{margin-top:16px;}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
.field input[type=text]{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-3);color:var(--cream);font-family:'DotGothic16',monospace;font-size:16px;
}
.field input[type=text]:focus{outline:none;border-color:var(--brass);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:600px){ .row2{grid-template-columns:1fr;} }
select{
  width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-3);color:var(--cream);font-family:'Zen Kaku Gothic New',sans-serif;font-size:14px;
}
.btn{
  margin-top:16px;padding:12px 22px;border-radius:10px;border:1px solid var(--brass);
  background:linear-gradient(180deg,#2a2115,#1c160c);color:var(--brass-bright);
  font-weight:700;font-family:'Zen Kaku Gothic New',sans-serif;cursor:pointer;font-size:14px;
  transition:.15s;
}
.btn:hover{box-shadow:0 0 0 3px rgba(201,162,75,.15);}
.hint{font-size:12px;color:var(--muted);margin-top:8px;}

/* results list */
.result-list{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
.result-item{
  display:flex;align-items:center;gap:12px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:11px;padding:10px 14px;cursor:pointer;
}
.result-item:hover{border-color:var(--brass-dim);}
.result-item .rk{font-family:'DotGothic16',monospace;font-size:18px;min-width:80px;}
.result-bar{flex:1;height:6px;border-radius:4px;background:var(--panel-3);overflow:hidden;}
.result-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--brass));}
.result-pct{font-size:11px;color:var(--muted);width:38px;text-align:right;}

/* relation cards for secondary dominant / tritone sub / modal */
.rel-list{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.rel-card{
  display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;
}
@media (max-width:560px){ .rel-card{grid-template-columns:1fr;text-align:left;} }
.rel-card .target{font-family:'Zen Old Mincho',serif;color:var(--muted);font-size:13px;}
.rel-card .chords{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rel-card .chords .arrow{color:var(--muted);font-size:13px;}
.rel-card .big{font-family:'DotGothic16',monospace;font-size:19px;color:var(--coral);}
.rel-card .big.sub{color:var(--purple);}
.rel-card .desc{font-size:11.5px;color:var(--muted);max-width:220px;}

.transposed-out{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;
}
.transposed-out .pill{
  font-family:'DotGothic16',monospace;font-size:18px;background:var(--panel-2);
  border:1px solid var(--brass-dim);border-radius:10px;padding:8px 14px;color:var(--brass-bright);
}
.capo-note{margin-top:14px;font-size:12px;color:var(--muted);}

footer{margin-top:40px;text-align:center;color:var(--muted);font-size:11.5px;}
.fretboard-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.fretboard-scroll{overflow-x:auto;padding-bottom:6px;}
.fretboard-inner{display:inline-block;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px 10px;}
.version-tag{margin-top:6px;font-family:'DotGothic16',monospace;color:var(--brass-dim);letter-spacing:.06em;}

/* svg wheel elements */
.slot-outer text, .slot-inner text{ pointer-events:none; user-select:none; }
.slot-outer .bg{ cursor:pointer; transition:.15s; }
.slot-inner .bg{ cursor:pointer; transition:.15s; }
.slot-outer:hover .bg{ stroke:var(--brass); }
.slot-inner:hover .bg{ stroke:var(--purple); }