:root { color-scheme:light; --ink:#142028; --muted:#52646e; --blue:#1683b7; --blue-dark:#096790; --pale:#eef9fd; --line:#c9d6dc; --paper:#fffefa; }
* { box-sizing:border-box; }
html { background:#e7f0f4; }
body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:radial-gradient(circle at 82% 4%,rgba(22,131,183,.15),transparent 32rem),linear-gradient(145deg,#f8fbfc,#dce8ed); }
a { color:var(--blue-dark); text-underline-offset:3px; }
.guide-header,main,footer { width:min(980px,calc(100% - 32px)); margin-inline:auto; }
.guide-header { display:flex; justify-content:space-between; align-items:center; padding:24px 0; }
.brand { color:var(--blue-dark); font-size:1.1rem; font-weight:950; text-decoration:none; }
.back-link { font-weight:800; }
main { display:grid; gap:18px; padding-bottom:34px; }
section,details { padding:clamp(22px,4.5vw,44px); border:1px solid rgba(255,255,255,.92); border-radius:24px; background:rgba(255,255,255,.9); box-shadow:0 16px 46px rgba(27,55,67,.09); }
.intro { color:white; background:linear-gradient(125deg,#17232a 0 44%,#0d739f); }
.eyebrow,.lesson-number { margin:0 0 8px; color:#7bc8e6; font-size:.75rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.lesson-number { color:var(--blue-dark); }
h1 { max-width:760px; margin:0; font-size:clamp(2.6rem,7vw,5rem); line-height:.95; letter-spacing:-.045em; }
h2 { margin:0 0 14px; font-size:clamp(1.55rem,3.5vw,2.3rem); line-height:1.05; letter-spacing:-.03em; }
p { margin:0; color:#3e505a; font-size:1rem; line-height:1.65; }
p + p { margin-top:14px; }
.intro > p:not(.eyebrow) { max-width:750px; margin-top:18px; color:#e4edf0; font-size:1.08rem; }
.lead { max-width:760px; margin-bottom:18px; font-size:1.08rem; }
.first-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:28px; }
.first-steps article { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; padding:17px; border:1px solid rgba(255,255,255,.3); border-radius:15px; background:rgba(255,255,255,.07); }
.first-steps b { grid-row:1/3; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#7bc8e6; color:#102530; }
.first-steps strong { font-size:.95rem; }
.first-steps span { color:#cce3ec; font-size:.82rem; line-height:1.35; }
.example-row { display:grid; grid-template-columns:130px 1fr; gap:22px; align-items:center; margin:20px 0; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.example-row strong { font-size:1.15rem; }
.example-row p { margin-top:5px; }
.big-symbol { color:var(--blue-dark); font-size:clamp(2.5rem,7vw,4.7rem); font-weight:950; line-height:1; letter-spacing:-.05em; }
.big-symbol.small { font-size:clamp(2rem,5vw,3.3rem); }
.tip { margin-top:17px; padding:14px 16px; border-left:4px solid var(--blue); background:var(--pale); color:#36515f; line-height:1.55; }
.pointer-label { margin:20px 0 7px; color:var(--blue-dark); font-size:.9rem; font-weight:900; }
.scale-pointers { display:grid; grid-template-columns:repeat(7,1fr); min-height:42px; }
.scale-pointers span { align-self:end; justify-self:center; display:grid; place-items:center; color:var(--blue-dark); font-size:.78rem; font-weight:950; }
.scale-pointers b { margin-top:-3px; color:var(--blue); font-size:1.45rem; line-height:1; }
.scale-pointers .at-1 { grid-column:1; }
.scale-pointers .at-3 { grid-column:3; }
.scale-pointers .at-5 { grid-column:5; }
.number-line { display:grid; grid-template-columns:repeat(7,1fr); margin:0 0 20px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.number-line span { position:relative; display:grid; place-items:center; align-content:center; gap:2px; min-height:120px; padding:18px 6px 20px; border-right:1px solid var(--line); }
.number-line span:last-child { border-right:0; }
.number-line b { position:absolute; top:8px; left:10px; color:var(--muted); font-size:.72rem; }
.number-line i { color:var(--muted); font-size:.8rem; font-style:normal; font-weight:850; }
.number-line strong { color:var(--blue-dark); font-size:1.55rem; }
.number-line small { position:absolute; bottom:8px; color:var(--muted); font-size:.65rem; font-weight:800; text-transform:uppercase; }
.number-line .chord-tone { background:#dff3fb; box-shadow:inset 0 -5px 0 var(--blue); }
.number-line .chord-tone strong { color:#075c82; }
.scale-result { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px; padding:13px 15px; border-radius:12px; background:#14252e; color:white; }
.scale-result > strong { margin-right:4px; }
.scale-result .arrow { color:#86d4f0; font-size:1.25rem; }
.scale-result span:not(.arrow) { padding:5px 9px; border-radius:999px; background:rgba(134,212,240,.15); color:#c9ebf7; font-weight:850; }
.scale-result b { color:white; }
.number-extensions { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:18px; }
.number-extensions div { display:grid; grid-template-columns:38px 1fr; gap:8px; align-items:center; padding:11px 13px; border-radius:10px; background:#eff5f7; color:#40515a; font-size:.9rem; }
.number-extensions strong { color:var(--blue-dark); font-size:1.15rem; }
.side-by-side { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.side-by-side article { display:grid; gap:7px; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.side-by-side article > strong { font-size:1.02rem; }
.side-by-side span { color:var(--blue-dark); font-weight:850; }
.side-by-side article p { color:var(--muted); font-size:.9rem; }
.seventh-lesson { border:2px solid rgba(22,131,183,.35); }
.scale-seven-rule { display:flex; flex-wrap:wrap; gap:11px; align-items:center; width:max-content; max-width:100%; margin:16px 0; padding:12px 16px; border:1px solid #9fcfe3; border-radius:12px; background:#effaff; }
.scale-seven-rule span { color:var(--muted); font-weight:850; }
.scale-seven-rule strong { color:var(--blue-dark); font-size:1.35rem; }
.scale-seven-rule b { color:var(--blue); font-size:1.4rem; }
.surprise { display:grid; gap:5px; margin:18px 0; padding:17px 19px; border-radius:14px; background:#fff2cf; color:#5f4309; }
.surprise strong { font-size:1.15rem; }
.surprise span { line-height:1.5; }
.seventh-paths { display:grid; gap:8px; margin:0 0 10px; }
.seventh-paths > div { display:grid; grid-template-columns:90px auto minmax(145px,1fr) auto minmax(155px,1fr); gap:10px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#f5f9fa; }
.seventh-paths strong { color:var(--blue-dark); font-size:1.2rem; }
.seventh-paths b { color:var(--blue); font-size:1.25rem; }
.seventh-paths span { color:#263840; font-weight:900; }
.seventh-paths em { color:var(--muted); font-size:.9rem; font-style:normal; font-weight:800; }
.path-caption { margin:0 0 18px; font-size:.94rem; }
.why-wrong { display:grid; gap:9px; margin:0 0 18px; padding:18px; border:2px solid #e8c56e; border-radius:14px; background:#fffaf0; }
.why-wrong > strong { color:#694b0d; font-size:1.12rem; }
.why-wrong p { font-size:.94rem; }
.why-wrong > div { display:grid; grid-template-columns:minmax(170px,1.25fr) minmax(130px,1fr) minmax(130px,1fr); gap:9px; align-items:center; padding:10px 12px; border-radius:9px; background:white; }
.why-wrong span { color:var(--muted); font-size:.8rem; font-weight:850; }
.why-wrong b { color:var(--blue-dark); }
.why-wrong em { color:#40515a; font-size:.88rem; font-style:normal; }
.dominant-explainer { margin:0 0 18px; padding:16px 18px; border:1px solid #aad2e3; border-radius:14px; background:var(--pale); }
.dominant-explainer > strong { display:block; margin-bottom:5px; color:var(--blue-dark); font-size:1.05rem; }
.dominant-explainer p { font-size:.94rem; }
.memory { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; margin:0 0 18px; padding:15px 17px; border-radius:12px; background:#14252e; color:white; }
.memory span { color:#92d7f0; font-size:1.05rem; font-weight:950; }
.plain-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
.plain-grid span { display:grid; grid-template-columns:100px 1fr; gap:10px; align-items:baseline; padding:11px 13px; border-radius:10px; background:#eff5f7; color:#40515a; font-size:.9rem; }
.plain-grid strong { color:var(--blue-dark); font-size:1.05rem; }
.dictionary { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }
.dictionary article { padding:17px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.dictionary strong { display:block; margin-bottom:5px; color:var(--blue-dark); font-size:1.08rem; }
.dictionary p { font-size:.9rem; }
.voicing-section { border-color:#a8d1e2; background:linear-gradient(135deg,#fbfeff,#eaf8fd); }
.advanced { padding:0; overflow:hidden; }
.advanced summary { padding:22px 26px; cursor:pointer; color:var(--blue-dark); font-size:1.05rem; font-weight:900; }
.advanced[open] summary { border-bottom:1px solid var(--line); }
.advanced > div { padding:22px 26px 26px; }
.reference { padding-block:28px; }
.reference h2 { font-size:1.35rem; }
footer { display:flex; justify-content:space-between; gap:30px; align-items:end; padding:0 4px 32px; color:var(--muted); font-size:.8rem; line-height:1.45; }
footer > a { font-weight:850; }
footer span { text-align:right; }
@media (max-width:720px) { .first-steps { grid-template-columns:1fr; } .side-by-side,.plain-grid,.dictionary,.number-extensions { grid-template-columns:1fr; } .number-line,.scale-pointers { grid-template-columns:repeat(7,1fr); } .number-line span { border-bottom:1px solid var(--line); } .seventh-paths > div { grid-template-columns:auto auto 1fr; } .seventh-paths em { grid-column:3; } .why-wrong > div { grid-template-columns:1fr; } }
@media (max-width:480px) { .guide-header { align-items:flex-start; gap:10px; flex-direction:column; } .example-row { grid-template-columns:1fr; } footer { align-items:flex-start; flex-direction:column; } footer span { text-align:left; } }