:root{color-scheme:dark;--bg: #100d0b;--panel: #18130f;--panel-2: #231a13;--text: #fff4df;--muted: #d5b98e;--line: rgba(255, 232, 184, .18);--maple: #f0c875;--red: #8f141b;--blue: #2d63c8;--green: #168a5a;--gold: #d8a442}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 20% 0%,#371016 0,transparent 34%),linear-gradient(180deg,#120d0a,#19100c 46%,#0b0908);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}.site-shell{width:min(1180px,calc(100% - 32px));margin:0 auto}.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(18px);background:#0f0b09bd;border-bottom:1px solid var(--line)}.topbar-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:0}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#e9bc68,#8f141b);color:#170d08}.nav{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:14px}.nav a:hover{color:var(--text)}.hero{min-height:calc(100vh - 64px);display:grid;align-items:center;padding:36px 0 54px}.hero-stage{position:relative;overflow:hidden;min-height:620px;border:1px solid var(--line);border-radius:8px;background:#100f0e;box-shadow:0 30px 80px #0000005c}.hero-guitar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.96}.hero-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0807d1,#0a08072e 54%,#0a080794)}.hero-content{position:relative;z-index:2;width:min(540px,calc(100% - 44px));padding:52px 0 0 38px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ffd68f;font-size:13px;font-weight:800;text-transform:uppercase}.hero h1{margin:16px 0 14px;font-size:clamp(46px,7vw,88px);line-height:.94;letter-spacing:0}.hero p{margin:0;max-width:520px;color:#edd4ad;font-size:17px;line-height:1.7}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid rgba(255,228,176,.28);border-radius:6px;background:#ffe8b814;color:var(--text);font-weight:800}.button.primary{background:linear-gradient(135deg,#f1c66f,#ca392f);color:#140906;border-color:transparent}.hero-card{position:absolute;right:26px;bottom:26px;z-index:2;width:min(390px,calc(100% - 52px));padding:18px;border:1px solid rgba(255,232,184,.24);border-radius:8px;background:#100c09d1;backdrop-filter:blur(16px)}.hero-card-title{margin:0 0 8px;font-size:20px}.hero-card p{font-size:14px;line-height:1.6}.section{padding:68px 0;border-top:1px solid var(--line)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.section h2{margin:0;font-size:clamp(30px,4vw,50px);line-height:1.05}.section-lede{max-width:560px;margin:0;color:var(--muted);line-height:1.7}.caged-map{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}.panel{border:1px solid var(--line);border-radius:8px;background:#18130fd1;padding:20px}.shape-list{display:grid;gap:10px}.shape{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid rgba(255,232,184,.14);border-radius:7px;background:#ffe8b80d}.shape-letter{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--maple);color:#1b1008;font-size:24px;font-weight:900}.shape strong,.shape span{display:block}.shape span{margin-top:3px;color:var(--muted);font-size:13px}.fretboard{position:relative;min-height:260px;overflow:hidden;border:3px solid #3d2817;border-radius:8px;background:linear-gradient(90deg,#e7b962,#f8e1a6 21%,#c88639 48%,#f2cc83 74%,#d19747)}.fretboard:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(102deg,rgba(87,46,14,.14) 0 2px,transparent 2px 18px)}.strings{position:absolute;inset:32px 0 46px;display:grid;grid-template-rows:repeat(6,1fr)}.string{align-self:center;height:2px;background:linear-gradient(90deg,#e8e0d1,#fff,#bfb4a4);box-shadow:0 1px 2px #0000006b}.frets{position:absolute;inset:0;display:grid;grid-template-columns:repeat(24,1fr)}.frets span{border-left:2px solid rgba(73,50,29,.52)}.frets span:first-child{border-left:6px solid rgba(245,231,197,.9)}.shape-zone{position:absolute;bottom:18px;padding:7px 10px;border-radius:18px;color:#fff;font-weight:900;box-shadow:0 8px 18px #00000040}.zone-c{left:5%;background:var(--red)}.zone-a{left:22%;background:var(--blue)}.zone-g{left:40%;background:var(--green)}.zone-e{left:61%;background:#7b49bd}.zone-d{left:80%;background:#c47a22}.progression-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.chord-stack{display:grid;gap:10px}.chord-row{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:12px;padding:10px;border:1px solid rgba(255,232,184,.16);border-radius:7px;background:#ffe8b80d}.mini-diagram{height:54px;border:1px solid #b78f50;border-radius:5px;background:linear-gradient(90deg,#e9bc6b,#fae4ad)}.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.module{min-height:180px;border:1px solid var(--line);border-radius:8px;background:#18130fd1;padding:18px}.module h3{margin:0 0 10px}.module p{margin:0;color:var(--muted);line-height:1.6}.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.tag{padding:6px 9px;border-radius:16px;background:#ffe8b81a;color:#f2d7a7;font-size:12px;font-weight:800}@media(max-width:820px){.nav{display:none}.hero-stage{min-height:720px}.hero-content{padding:36px 0 0 22px}.hero-guitar{object-position:40% center}.section-head,.caged-map,.progression-grid,.module-grid{grid-template-columns:1fr;display:grid}.shape{grid-template-columns:48px 1fr}.shape .button{grid-column:1 / -1}}