:root{
  --bg:#090b10; --panel:#121722; --panel2:#18202e; --text:#f4f7fb; --muted:#9aa7b7;
  --accent:#f7c948; --blue:#5bc8ff; --line:#2b3547; --green:#42f5b3;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#1b2434,#080a0f 55%);color:var(--text)}
a{color:inherit;text-decoration:none}.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:rgba(9,11,16,.82);backdrop-filter:blur(12px);z-index:5}.brand{display:flex;gap:14px;align-items:center}.logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--accent),#ff8a00);display:grid;place-items:center;color:#111;font-weight:900}.brand h1{font-size:20px;margin:0}.brand p{margin:3px 0 0;color:var(--muted);font-size:13px}.nav{display:flex;gap:20px;color:var(--muted);font-size:14px}.nav a:hover{color:var(--accent)}main{padding:34px 5vw 60px}.hero{display:grid;grid-template-columns:1.45fr .7fr;gap:24px;align-items:stretch;margin-bottom:28px}.heroText,.heroCard,.controlPanel,.displayPanel,.contentSection{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);border-radius:28px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.heroText{padding:42px}.eyebrow{color:var(--green);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}.hero h2{font-size:clamp(34px,5vw,68px);line-height:.96;margin:14px 0}.hero p{color:var(--muted);font-size:18px;line-height:1.7;max-width:850px}.heroCard{padding:32px;display:flex;flex-direction:column;justify-content:end;min-height:260px;position:relative;overflow:hidden}.pulse{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 66%);opacity:.28;right:-50px;top:-45px}.heroCard p{color:var(--muted);margin:0 0 10px}.heroCard strong{font-size:28px}.studioGrid{display:grid;grid-template-columns:330px 1fr;gap:24px}.controlPanel,.displayPanel{padding:26px}.controlPanel h3{font-size:24px;margin-top:0}label{display:block;color:var(--muted);font-weight:700;font-size:13px;margin:18px 0 8px}select{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#0d111a;color:var(--text);font-size:16px}button{border:0;border-radius:16px;padding:14px 18px;background:var(--accent);color:#111;font-weight:900;cursor:pointer}button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}.buttonRow{display:flex;gap:10px;margin:22px 0;flex-wrap:wrap}.hint{color:var(--muted);font-size:13px;line-height:1.5}.chordHeader{display:flex;justify-content:space-between;align-items:start;margin-bottom:20px}.label{margin:0 0 8px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.chordHeader h2{font-size:44px;margin:0}.badge{border:1px solid rgba(66,245,179,.4);background:rgba(66,245,179,.1);color:var(--green);padding:8px 12px;border-radius:999px;font-weight:900}.diagram{background:#eef3f7;color:#10141b;border-radius:24px;padding:26px;overflow:auto}.fretboard{min-width:520px}.string{display:grid;grid-template-columns:46px repeat(5,1fr);align-items:center;height:48px;position:relative}.string:before{content:"";position:absolute;left:46px;right:0;height:2px;background:#343b45}.fret{height:48px;border-left:3px solid #67717f;display:grid;place-items:center;position:relative}.fret:last-child{border-right:3px solid #67717f}.stringName{font-weight:900;color:#56616d}.dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:var(--blue);color:#071018;z-index:2}.dot.root{background:var(--accent)}.openMark,.muteMark{font-weight:900;font-size:20px;color:#111}.fingerLabel{font-size:11px;position:absolute;bottom:0;color:#52606d;font-weight:900}.fretNumbers{display:grid;grid-template-columns:46px repeat(5,1fr);color:#667282;font-weight:900;text-align:center;margin-top:10px}.infoCards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.infoCards article,.featureGrid article{background:var(--panel2);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:18px}.infoCards h3{margin:0;font-size:22px}.contentSection{padding:30px;margin-top:24px}.contentSection.dark{background:linear-gradient(135deg,#111723,#0b0e14)}.featureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.featureGrid p,.contentSection p{color:var(--muted);line-height:1.6}footer{text-align:center;color:var(--muted);padding:28px;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){.topbar,.hero,.studioGrid{display:block}.nav{display:none}.heroText,.heroCard,.controlPanel,.displayPanel{margin-bottom:18px}.infoCards,.featureGrid{grid-template-columns:1fr}.heroText{padding:28px}.chordHeader h2{font-size:34px}}