:root{--bg-canvas:#13261d;--bg-surface:#20382a;--bg-surface-hover:#284532;--bg-field:#183021;--text-primary:#efe6d2;--text-muted:#c9bfa7;--accent-primary:#b8923a;--accent-secondary:#d8b866;--border-subtle:rgba(184,146,58,.38);--ease-kinetic:cubic-bezier(.16,1,.3,1);--glass-backdrop:blur(16px) saturate(180%);--r:4px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font:1.0625rem/1.78 system-ui,"Segoe UI",sans-serif;overflow-wrap:anywhere;hyphens:auto;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:system-ui,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:0 0 .7em;overflow-wrap:anywhere;hyphens:auto}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.02em}
p{margin:0 0 1.1em}
a{color:var(--accent-secondary);text-underline-offset:3px}
a:hover{color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:3px}
img{max-width:100%;height:auto;display:block;border-radius:var(--r)}
ul,ol{padding-left:1.2rem}
.skip{position:absolute;left:-999px;top:0;background:var(--accent-primary);color:var(--bg-canvas);padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.prose{max-width:70ch}
.center{margin-left:auto;margin-right:auto}
.muted{color:var(--text-muted)}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-secondary);font-weight:700;margin-bottom:1rem}
/* header */
.site-header{position:relative;z-index:30;background:transparent;border-bottom:1px solid transparent;transition:background .45s var(--ease-kinetic),border-color .45s}
.site-header.solid{background:var(--bg-surface);border-bottom-color:var(--border-subtle)}
.hdr{max-width:1200px;margin:0 auto;padding:1rem 1.25rem;display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;color:var(--text-primary);text-decoration:none;font-weight:800;letter-spacing:-.03em;font-size:1.08rem}
.brand .mark{fill:none;stroke:var(--accent-primary);stroke-width:1.6;flex:0 0 auto}
.brand .mark rect:nth-child(2){fill:rgba(184,146,58,.35)}
.nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.05rem;list-style:none;margin:0;padding:0}
.nav a{color:var(--text-primary);text-decoration:none;font-size:.9rem;font-weight:600;padding:.3rem 0;background:linear-gradient(var(--accent-primary),var(--accent-primary)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease-kinetic),color .3s}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 1px;color:var(--accent-secondary)}
.menu-btn{display:none;background:transparent;border:1px solid var(--border-subtle);color:var(--text-primary);font-size:1.4rem;line-height:1;width:2.6rem;height:2.6rem;border-radius:var(--r);cursor:pointer}
/* buttons */
.btn{display:inline-block;background:var(--accent-primary);color:var(--bg-canvas);font-weight:800;letter-spacing:-.01em;padding:.9rem 1.45rem;border:0;border-radius:var(--r);text-decoration:none;cursor:pointer;font-size:1rem;font-family:inherit;transition:transform .45s var(--ease-kinetic),background .3s}
.btn:hover{transform:translateY(-4px);background:var(--accent-secondary);color:var(--bg-canvas)}
.link-u{display:inline-block;background:linear-gradient(var(--accent-primary),var(--accent-primary)) 0 100%/28% 2px no-repeat;border:0;padding:0 0 3px;color:var(--text-primary);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:background-size .45s var(--ease-kinetic),color .3s}
.link-u:hover,.link-u:focus-visible{background-size:100% 2px;color:var(--accent-secondary)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.8rem;margin-top:1.6rem}
/* hero */
.hero{position:relative;overflow:hidden;padding:3.5rem 0 7rem}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 42%,rgba(184,146,58,.24),transparent 42%),radial-gradient(circle at 12% 85%,rgba(216,184,102,.12),transparent 38%),radial-gradient(circle at 55% 0,rgba(32,56,42,.9),transparent 50%);background-size:200% 200%;animation:gradientShift 12s ease infinite}
@keyframes gradientShift{0%,100%{background-position:0 0}50%{background-position:100% 100%}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero .lead,.page-hero .lead{font-size:1.15rem;color:var(--text-muted);max-width:56ch}
.hero-art{position:relative;margin:0}
.hero-art img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border-subtle)}
.float-stack{position:absolute;left:-1.5rem;bottom:-1.8rem;background:rgba(19,38,29,.82);backdrop-filter:var(--glass-backdrop);-webkit-backdrop-filter:var(--glass-backdrop);border:1px solid var(--border-subtle);border-radius:var(--r);padding:1rem;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.facts{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding:0;list-style:none;color:var(--text-muted);font-size:.92rem}
.facts strong{display:block;color:var(--accent-secondary);font-size:1.5rem;font-weight:800}
.page-hero{position:relative;overflow:hidden;padding:3rem 0 6rem}
/* fields */
.sec{position:relative;padding:4.5rem 0}
.field{background:var(--bg-surface);clip-path:polygon(0 4vw,100% 0,100% calc(100% - 4vw),0 100%);padding:calc(4.5rem + 4vw) 0}
.curve{background:var(--bg-field);clip-path:ellipse(140% 100% at 50% 100%);padding-top:calc(4.5rem + 3vw)}
.field .panel,.field .ex,.field .stack-card{background:var(--bg-canvas)}
/* track */
.track{position:relative;padding-left:4.2rem}
.track::before{content:"";position:absolute;left:1.2rem;top:0;bottom:0;width:1px;background:var(--accent-primary);opacity:.75}
.track::after{content:"";position:absolute;left:calc(1.2rem - 1px);top:0;width:3px;height:var(--p,0%);background:var(--accent-secondary);transition:height .2s linear}
.module{position:relative;margin-bottom:3rem}
.module:last-child{margin-bottom:0}
.node{position:absolute;left:-4.2rem;top:.1rem;z-index:2;width:2.45rem;height:2.45rem;display:grid;place-items:center;background:var(--bg-canvas);border:1px solid var(--accent-primary);border-radius:var(--r);color:var(--accent-secondary);font-weight:800;font-size:.85rem}
.module p,.module ul,.module ol{max-width:70ch}
/* panels */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin:1.5rem 0}
.panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r);padding:1.5rem;transition:transform .5s var(--ease-kinetic),border-color .3s,background .3s}
.panel:hover{transform:translateY(-5px) scale(1.015);border-color:var(--accent-primary);background:var(--bg-surface-hover)}
.panel h3{margin-bottom:.5rem}
.panel p:last-child{margin-bottom:0}
.panel img{margin:-.5rem 0 1rem;width:100%;aspect-ratio:4/3;object-fit:cover}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin:2rem 0}
.ar-169{width:100%;aspect-ratio:16/9;object-fit:cover}
.ar-43{width:100%;aspect-ratio:4/3;object-fit:cover}
.ar-11{width:100%;aspect-ratio:1/1;object-fit:cover}
figure{margin:0}
figcaption{font-size:.85rem;color:var(--text-muted);margin-top:.5rem}
/* chord stacks */
.stacks{display:flex;flex-wrap:wrap;gap:1.25rem;margin:1.5rem 0}
.stack-card{border:1px solid var(--border-subtle);border-radius:var(--r);padding:1rem 1.1rem;background:var(--bg-surface);min-width:9.5rem}
.stack-card h4{font-size:1rem;margin:0 0 .7rem;color:var(--accent-secondary)}
.stack{display:flex;flex-direction:column-reverse;gap:4px}
.stack span{display:flex;justify-content:space-between;gap:1rem;padding:.3rem .7rem;border:1px solid var(--border-subtle);border-radius:var(--r);background:linear-gradient(90deg,rgba(184,146,58,.24),rgba(184,146,58,.05));font-weight:700;font-size:.88rem}
.stack span small{color:var(--text-muted);font-weight:600}
.stack .ext{background:var(--accent-primary);color:var(--bg-canvas)}
.stack .ext small{color:var(--bg-canvas)}
.stack .omit{opacity:.45;border-style:dashed}
/* tables */
.table-wrap{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--border-subtle);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
th,td{padding:.65rem .85rem;text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:top}
th{background:rgba(184,146,58,.16);font-weight:800}
tr:last-child td{border-bottom:0}
td strong{color:var(--accent-secondary)}
/* exercises */
.ex{border:1px solid var(--border-subtle);border-radius:var(--r);margin-top:1.2rem;background:rgba(0,0,0,.14)}
.ex summary{cursor:pointer;padding:.95rem 1.1rem;font-weight:800;list-style:none;display:flex;gap:.75rem;align-items:center}
.ex summary::-webkit-details-marker{display:none}
.ex summary::before{content:"+";display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:0 0 auto;border:1px solid var(--accent-primary);border-radius:var(--r);color:var(--accent-secondary)}
.ex[open] summary::before{content:"–"}
.ex-body{padding:0 1.1rem 1.1rem}
.solution{margin-top:1rem;padding:1rem;border-left:2px solid var(--accent-primary);background:rgba(184,146,58,.08)}
/* checklist */
.checklist{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.55rem}
.checklist label{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;padding:.6rem .8rem;border:1px solid var(--border-subtle);border-radius:var(--r);background:var(--bg-canvas)}
.checklist input{accent-color:var(--accent-primary);width:1.1rem;height:1.1rem;margin-top:.3rem;flex:0 0 auto}
.bar{height:6px;background:rgba(184,146,58,.18);border-radius:var(--r);overflow:hidden;margin:.6rem 0}
.bar i{display:block;height:100%;width:0;background:var(--accent-primary);transition:width .6s var(--ease-kinetic)}
.progress-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}
/* faq */
.faq .ex summary{font-size:1.02rem}
/* aside */
.related{border-top:1px solid var(--border-subtle);margin-top:3rem;padding-top:2rem}
.related ul{list-style:none;padding:0;display:grid;gap:.6rem}
/* forms */
.form{display:grid;gap:1rem;max-width:640px}
label.f{display:grid;gap:.35rem;font-weight:700;font-size:.94rem}
input,textarea,select{width:100%;background:var(--bg-canvas);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--r);padding:.75rem;font:inherit;font-weight:400}
input:focus,textarea:focus,select:focus{border-color:var(--accent-primary);outline:none}
textarea{min-height:9rem;resize:vertical}
.status{min-height:1.5rem;color:var(--accent-secondary);font-weight:600}
/* footer */
.site-footer{border-top:1px solid var(--border-subtle);padding:3.5rem 0 2rem;margin-top:3rem;font-size:.93rem;color:var(--text-muted);background:var(--bg-field)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.foot h2{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-secondary)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.foot a{color:var(--text-primary)}
.copy{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--border-subtle)}
/* reveal */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-kinetic),transform .7s var(--ease-kinetic)}
.js .reveal.reveal-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}
@media (max-width:1100px){.nav ul{gap:.2rem .8rem}.nav a{font-size:.85rem}}
@media (max-width:1024px){.hero-grid,.split{grid-template-columns:1fr}.foot{grid-template-columns:1fr 1fr}.float-stack{left:.75rem}}
@media (max-width:768px){
.menu-btn{display:block}
.hdr{position:relative}
.nav{position:absolute;top:100%;left:0;right:0;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);max-height:0;overflow:hidden;transition:max-height .55s var(--ease-kinetic)}
.nav.open{max-height:32rem}
.nav ul{flex-direction:column;padding:1rem 1.25rem 1.4rem;gap:.15rem}
.nav a{display:block;font-size:1rem;padding:.55rem 0;border-bottom:1px solid rgba(184,146,58,.15);background:none}
.track{padding-left:2.9rem}.track::before{left:.95rem}.track::after{left:calc(.95rem - 1px)}
.node{left:-2.9rem;width:2rem;height:2rem;font-size:.75rem}
.hero{padding:2rem 0 6rem}
}
@media (max-width:480px){body{font-size:1rem}.foot{grid-template-columns:1fr}.brand span{font-size:.95rem}.float-stack{position:static;margin-top:1rem;animation:none}.btn{width:100%;text-align:center}}
@media (min-width:1025px){.module{padding-right:2rem}}