@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap";:root{color:#e8dfcf;background:#171410;font-family:Noto Sans SC,sans-serif;font-size:15px}*{box-sizing:border-box}body{background:radial-gradient(circle at 80% 0,#3c281d 0,#0000 33%),#171410;margin:0}button{font:inherit;color:inherit;cursor:pointer}main{max-width:1280px;margin:auto;padding:52px 42px 30px}header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}h1,h2,h3,p{margin:0}h1{letter-spacing:-.04em;font:700 clamp(38px,6vw,72px)/1 Playfair Display,Noto Sans SC,serif}.eyebrow{letter-spacing:.15em;color:#c99354;font:500 11px DM Mono,monospace}.intro{color:#b9afa0;margin-top:16px}.status{color:#cfc3ae;border:1px solid #5d4b3c;border-radius:99px;margin-top:12px;padding:10px 13px;font-size:12px}.pulse{background:#c99354;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}nav{border-bottom:1px solid #4e4136;gap:30px;margin:46px 0 25px;display:flex}nav button{color:#998f83;background:0 0;border:0;padding:0 0 13px}nav button.active{color:#f1ddbb;border-bottom:2px solid #ce995c}.controls{background:#201b17;border:1px solid #4e4136;border-radius:12px;gap:35px;padding:21px;display:flex}.controls label{color:#a89d8e;margin-bottom:9px;font-size:12px;display:block}.key-grid{flex-wrap:wrap;gap:5px;max-width:600px;display:flex}.key-grid button{background:#2a231d;border:1px solid #5b4b3d;border-radius:5px;padding:7px 12px;font-family:DM Mono;font-size:12px}.key-grid button.chosen{color:#21170f;background:#c99354;border-color:#dcad71}.key-summary{border-left:1px solid #514336;flex-direction:column;justify-content:center;gap:5px;padding:4px 0 4px 30px;display:flex}.key-summary span{color:#c99354;font:12px DM Mono}.key-summary b{letter-spacing:.04em;font-size:18px}.key-summary small{color:#978d7f}.theory-strip{color:#afa494;border-bottom:1px solid #3e352d;align-items:center;gap:25px;padding:18px 0;font-size:13px;display:flex}.theory-strip strong{color:#ead9bf;font:600 20px Playfair Display}.chord-group{border-bottom:1px solid #3e352d;padding:32px 0}.group-heading{align-items:baseline;gap:17px;margin-bottom:16px;display:flex}.group-heading h2,.map-head h2,.practice h2,.detail h2{letter-spacing:-.02em;font:600 27px Playfair Display,Noto Sans SC}.group-heading p{color:#938a7d;font-size:12px}.chord-cards{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;display:grid}.chord-card{text-align:left;background:#211b17;border:1px solid #4d4035;border-radius:8px;min-height:126px;padding:12px;transition:all .15s}.chord-card:hover{background:#292018;border-color:#cf9859;transform:translateY(-2px)}.chord-card>*{display:block}.degree{color:#c99354;font:11px DM Mono}.chord-card strong{margin:9px 0 2px;font:600 25px Playfair Display}.chord-card small{color:#b2a796;font-size:11px}.chord-card em{color:#776c5e;margin-top:10px;font:10px DM Mono}.detail{background:linear-gradient(115deg,#2a2119,#201b17);border:1px solid #5a4836;border-radius:13px;grid-template-columns:1fr 210px 1.4fr;align-items:center;gap:28px;margin-top:34px;padding:28px;display:grid}.detail h2 small{color:#ae9f8d;font:400 12px Noto Sans SC}.detail h2+p{color:#b5a995;margin-top:10px;font-size:13px}.detail-actions{gap:9px;margin-top:21px;display:flex}.detail-actions button,.practice>button{color:#23170f;background:#c99354;border:1px solid #c99354;border-radius:5px;padding:9px 12px;font-size:12px;font-weight:600}.detail-actions .quiet{color:#d4bd9c;background:0 0;border-color:#5d4c3c}.box-wrap{text-align:center}.box-title strong{font:600 26px Playfair Display;display:block}.box-title span{color:#a89e8f;font-size:11px}.chord-box{border-left:3px solid #ded3c1;border-right:1px solid #918473;width:132px;margin:14px auto 0;position:relative}.box-head,.box-row{grid-template-columns:repeat(6,1fr);height:23px;display:grid}.box-head{height:20px}.box-head span{color:#d5c7b5;font:16px DM Mono}.nut{color:#988a77;font-size:10px;position:absolute;top:23px;left:-48px}.box-row{border-top:1px solid #968a7a}.box-row span{border-right:1px solid #968a7a;position:relative}.box-row span:last-child{border-right:0}.box-row .dot{z-index:1;background:#c99354;border-radius:50%;justify-content:center;place-self:center;align-items:center;width:22px;height:22px;display:flex}.box-row em{color:#21170f;font:8px DM Mono}.box-note{color:#938775;margin-top:8px;font-size:10px}.mini-board>p{color:#998b79;margin-bottom:7px;font:11px DM Mono}.map-panel{background:#211c18;border:1px solid #514336;border-radius:12px;margin-top:28px;padding:28px}.map-head{justify-content:space-between;align-items:center;gap:15px;margin-bottom:23px;display:flex}.map-head p{color:#aaa090;margin-top:5px;font-size:12px}.toggle{border:1px solid #5b4b3c;border-radius:6px;padding:3px;display:flex}.toggle button{color:#a79a89;background:0 0;border:0;padding:6px 10px;font-size:12px}.toggle .active{color:#241a11;background:#c99354;border-radius:4px}.fretboard{background:#37271d;border:1px solid #6a5541;border-radius:5px;min-width:0;padding:11px;overflow-x:auto}.fret-labels,.fret-string{grid-template-columns:36px repeat(16,minmax(42px,1fr));min-width:710px;display:grid}.fret-labels{color:#ae9b81;text-align:center;height:20px;font:10px DM Mono}.fret-labels span:first-child{font-size:9px}.fret-string{background:linear-gradient(#0000 49%,#bbb09c 50%,#0000 53%);align-items:center;height:41px}.string-name{color:#c9b69a;font:11px DM Mono}.fret{background:0 0;border:0;border-left:1px solid #deccae38;height:41px;position:relative}.fret.hit:before{content:"";z-index:0;background:#a7c4b7;border-radius:50%;width:29px;height:29px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.fret.root:before{background:#d29a58}.fret b,.fret small{z-index:1;color:#1e211e;font:500 9px/12px DM Mono;display:block;position:relative}.fret small{font-size:8px}.compact{padding:6px}.compact .fret-labels,.compact .fret-string{grid-template-columns:30px repeat(13,minmax(29px,1fr));min-width:430px}.compact .fret-string,.compact .fret{height:26px}.compact .fret.hit:before{width:20px;height:20px;top:3px}.compact .fret b{font-size:7px;line-height:10px}.compact .fret small{font-size:6px;line-height:7px}.legend{color:#a79c8d;gap:20px;margin-top:13px;font-size:11px;display:flex}.legend i{background:#a7c4b7;border-radius:50%;width:9px;height:9px;margin-right:4px;display:inline-block}.legend .gold{background:#d29a58}.practice{padding:52px 0}.steps{grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0;display:grid}.steps article{background:#211c17;border-top:2px solid #c99354;min-height:180px;padding:17px}.steps b{color:#c99354;font:20px DM Mono}.steps h3{margin:19px 0 8px;font-size:17px}.steps p{color:#aaa092;font-size:12px;line-height:1.75}footer{color:#766b5d;text-align:center;padding-top:40px;font-size:11px}@media (width<=800px){main{padding:28px 16px}header,.controls,.detail,.map-head{display:block}.status{display:inline-block}.controls{padding:16px}.key-summary{border-top:1px solid #514336;border-left:0;margin-top:16px;padding:16px 0 0}.theory-strip{display:block}.theory-strip>*{margin:6px 0;display:block}.detail{padding:20px}.box-wrap{margin:24px 0}.steps{grid-template-columns:1fr 1fr}.mini-board{overflow:hidden}.group-heading{display:block}.group-heading p{margin-top:4px}.chord-cards{grid-template-columns:repeat(2,1fr)}}.detail{grid-template-columns:minmax(290px,1fr) minmax(350px,1.4fr)}.voicing-section{border-top:1px solid #514133;grid-column:1/-1;padding-top:24px}.voicing-heading{justify-content:space-between;align-items:end;gap:20px;display:flex}.voicing-heading h3{margin-top:4px;font:600 22px Playfair Display,Noto Sans SC}.voicing-heading>p{color:#a89c8b;text-align:right;max-width:450px;font-size:12px;line-height:1.7}.voicing-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:17px;display:grid}.box-wrap{background:#1a1613;border:1px solid #4c4035;border-radius:9px;padding:14px 10px}@media (width<=800px){.voicing-heading{display:block}.voicing-heading>p{text-align:left;margin-top:10px}.voicing-grid{grid-template-columns:1fr}}.box-head span,.box-row .dot{justify-self:end;transform:translate(50%)}.progressions{padding:36px 0}.progression-intro{max-width:690px}.progression-intro h2{margin:7px 0 10px;font:600 31px Playfair Display,Noto Sans SC}.progression-intro>p:last-child{color:#aaa092;font-size:13px;line-height:1.8}.progression-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:26px;display:grid}.progression-card{background:#211b17;border:1px solid #4d4035;border-radius:10px;padding:18px}.progression-card-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.progression-card h3{font-size:18px}.progression-card-head span{color:#bd8f59;text-align:right;font-size:11px}.progression-notes{align-items:center;gap:7px;margin:19px 0 16px;padding-bottom:4px;display:flex;overflow-x:auto}.progression-notes>i{color:#8c7b67;font-style:normal}.progression-chord{text-align:center;background:#30261d;border-radius:6px;min-width:61px;padding:7px 5px}.progression-chord b{color:#c99354;font:11px DM Mono;display:block}.progression-chord strong{margin-top:3px;font:600 18px Playfair Display;display:block}.progression-card>p{color:#ada293;margin-top:7px;font-size:12px;line-height:1.7}.progression-card em{color:#d1a267;width:34px;font-style:normal;font-weight:600;display:inline-block}@media (width<=800px){.progression-grid{grid-template-columns:1fr}.progression-intro h2{font-size:27px}}.song-knowledge{background:linear-gradient(125deg,#292017,#201b17);border:1px solid #5b4937;border-radius:12px;margin-top:42px;padding:28px}.song-knowledge h2{margin:7px 0 10px;font:600 28px Playfair Display,Noto Sans SC}.knowledge-lead{color:#b6aa98;max-width:760px;font-size:13px;line-height:1.85}.knowledge-flow{grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;align-items:stretch;gap:8px;margin:25px 0;display:grid}.knowledge-flow article{background:#1b1713;border-top:2px solid #c99354;padding:14px}.knowledge-flow b{color:#d8b177;font-size:13px}.knowledge-flow p{color:#aaa092;margin-top:9px;font-size:11px;line-height:1.75}.knowledge-flow>i{color:#c99354;text-align:center;align-self:center;font-style:normal}.knowledge-columns{border-top:1px solid #4c4034;grid-template-columns:1fr 1fr;gap:22px;padding-top:20px;display:grid}.knowledge-columns h3{color:#ded0ba;margin-bottom:9px;font-size:15px}.knowledge-columns ul,.knowledge-columns ol{color:#aba091;margin:0;padding-left:18px;font-size:12px;line-height:1.85}.knowledge-columns b{color:#d2a369}.knowledge-note{color:#d4c2a8;border-left:2px solid #c99354;margin-top:21px;padding:5px 0 5px 13px;font-size:12px;line-height:1.8}@media (width<=800px){.knowledge-flow{grid-template-columns:1fr;gap:0}.knowledge-flow>i{height:18px;transform:rotate(90deg)}.knowledge-columns{grid-template-columns:1fr;gap:18px}.song-knowledge{padding:20px}}.song-cases{margin-top:32px}.song-cases>div>h2{margin:7px 0;font:600 28px Playfair Display,Noto Sans SC}.song-cases>div>p:last-child{color:#a99d8d;font-size:12px;line-height:1.8}.song-case{background:#211b17;border:1px solid #4e4034;border-radius:10px;margin-top:16px;padding:20px}.case-title{align-items:center;gap:13px;display:flex}.case-title>span{color:#241911;background:#c99354;border-radius:50%;place-items:center;width:34px;height:34px;font:13px DM Mono;display:grid}.case-title h3{font:600 21px Playfair Display,Noto Sans SC}.case-title p{color:#a99c8a;margin-top:2px;font-size:11px}.case-body{border-top:1px solid #4d4034;grid-template-columns:190px 1fr;gap:24px;margin-top:18px;padding-top:18px;display:grid}.case-timeline{flex-direction:column;align-items:flex-start;gap:7px;display:flex}.case-timeline b{color:#dac4a4;background:#30261d;border-radius:4px;padding:5px 8px;font-size:11px}.case-timeline i{color:#c99354;margin-left:14px;font-style:normal}.case-copy p{color:#b2a695;margin-bottom:9px;font-size:12px;line-height:1.78}.case-copy strong{color:#e0caa9}.case-lesson{color:#d3c0a3;border-left:2px solid #c99354;margin-top:16px;padding-left:12px;font-size:12px;line-height:1.75}.case-lesson em{color:#d4a366;margin-right:6px;font-style:normal;font-weight:600}@media (width<=800px){.song-cases>div>h2{font-size:26px}.case-body{grid-template-columns:1fr;gap:15px}.case-timeline{flex-flow:wrap;align-items:center}.case-timeline i{margin-left:0}.case-timeline i:after{content:"→"}.case-timeline i{font-size:0}.case-timeline i:after{font-size:14px}}.caged{padding:36px 0}.caged-intro{max-width:770px}.caged-intro h2{margin:7px 0 10px;font:600 31px Playfair Display,Noto Sans SC}.caged-intro>p:last-child{color:#aaa092;font-size:13px;line-height:1.85}.caged-order{align-items:center;gap:7px;margin:26px 0 16px;padding-bottom:5px;display:flex;overflow-x:auto}.caged-order>span{color:#9c8c78;white-space:nowrap;font:10px DM Mono}.caged-order button{background:#262019;border:1px solid #554536;border-radius:6px;min-width:58px;padding:8px 12px}.caged-order button b{font:600 19px Playfair Display;display:block}.caged-order button small{color:#a49684;margin-top:2px;font-size:9px;display:block}.caged-order button.active{color:#241911;background:#c99354;border-color:#d9a666}.caged-order button.active small{color:#4a3020}.caged-order>i{color:#c99354;font-style:normal}.caged-layout{grid-template-columns:340px 1fr;gap:18px;display:grid}.caged-shapes{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px;display:grid}.caged-card{color:inherit;background:#211b17;border:1px solid #4d4035;border-radius:9px;padding:0}.caged-card.active{border-color:#d19a5d;box-shadow:0 0 0 1px #d19a5d}.caged-card .box-wrap{background:0 0;border:0;min-height:220px}.caged-card:last-child{grid-column:1/3}.caged-map{background:#211b17;border:1px solid #4d4035;border-radius:10px;min-width:0;padding:20px}.caged-map h3{margin:5px 0;font:600 24px Playfair Display,Noto Sans SC}.caged-map>div>p:last-child{color:#aaa092;margin-bottom:17px;font-size:12px}.caged-practice{color:#bdb09e;background:#2d241b;border-left:2px solid #c99354;align-items:center;gap:16px;margin-top:16px;padding:14px 17px;font-size:12px;line-height:1.7;display:flex}.caged-practice b{color:#e0bd8d;white-space:nowrap}@media (width<=900px){.caged-layout{grid-template-columns:1fr}.caged-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}.caged-card:last-child{grid-column:auto}}@media (width<=600px){.caged-intro h2{font-size:27px}.caged-shapes{grid-template-columns:repeat(2,minmax(0,1fr))}.caged-card:last-child{grid-column:1/3}.caged-practice{display:block}.caged-practice span{margin-top:5px;display:block}}.looper{padding:36px 0}.looper-intro{max-width:720px}.looper-intro h2{margin:7px 0 10px;font:600 31px Playfair Display,Noto Sans SC}.looper-intro>p:last-child{color:#aaa092;font-size:13px;line-height:1.8}.looper-picker{flex-wrap:wrap;gap:7px;margin:25px 0 16px;display:flex}.looper-picker button{text-align:left;background:#211b17;border:1px solid #4e4035;border-radius:6px;padding:9px 11px}.looper-picker button b,.looper-picker button span{display:block}.looper-picker button b{font-size:12px}.looper-picker button span{color:#9c8d7b;margin-top:3px;font:10px DM Mono}.looper-picker button.active{color:#251911;background:#c99354;border-color:#d8a464}.looper-picker button.active span{color:#523522}.looper-console{background:linear-gradient(125deg,#2a2119,#201b17);border:1px solid #5a4836;border-radius:12px;padding:25px}.loop-chords{justify-content:center;align-items:center;gap:9px;padding:3px;display:flex;overflow-x:auto}.loop-chords>i{color:#8c7b67;font-style:normal}.loop-chord{text-align:center;background:#1a1613;border:1px solid #4d4035;border-radius:8px;flex:0 0 105px;width:105px;padding:14px 6px;transition:all .12s}.loop-chord.now{color:#251911;background:#d09a59;border-color:#edbd7a;transform:translateY(-3px);box-shadow:0 6px 16px #100c0877}.loop-chord span,.loop-chord small{color:#c18e54;font:10px DM Mono;display:block}.loop-chord.now span,.loop-chord.now small{color:#573a21}.loop-chord b{margin:6px 0;font:600 26px Playfair Display;display:block}.looper-controls{border-top:1px solid #504030;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;margin-top:25px;padding-top:21px;display:flex}.play-button,.reset-button{color:#261a10;background:#c99354;border:1px solid #c99354;border-radius:5px;padding:10px 13px;font-weight:700}.reset-button{color:#c9b294;background:0 0;border-color:#5d4b3b}.looper-controls label{color:#b6a996;align-items:center;gap:7px;font-size:12px;display:flex}.looper-controls output{color:#e3c08e;font:12px DM Mono}.looper-controls input{accent-color:#c99354;width:110px}.bpm-preset{gap:4px;display:flex}.bpm-preset button{color:#b4a796;background:0 0;border:1px solid #544536;border-radius:3px;padding:5px 7px;font:10px DM Mono}.bpm-preset button.active{color:#eccb9a;background:#4a3725;border-color:#bd8750}.beats-control select{color:#e3d7c4;background:#211b17;border:1px solid #594938;border-radius:3px;padding:5px;font:11px Noto Sans SC}.loop-tip{text-align:center;color:#afa291;margin:19px 0 0;font-size:12px}.loop-tip b{color:#d1a167}@media (width<=650px){.looper-intro h2{font-size:27px}.looper-console{padding:16px}.loop-chords,.looper-controls{justify-content:flex-start}.loop-tip{text-align:left}}.scale-lab{padding:36px 0}.scale-intro{max-width:760px}.scale-intro h2{margin:7px 0 10px;font:600 31px Playfair Display,Noto Sans SC}.scale-intro>p:last-child{color:#aaa092;font-size:13px;line-height:1.85}.scale-tabs{grid-template-columns:repeat(3,1fr);gap:8px;margin:25px 0 16px;display:grid}.scale-tabs button{text-align:left;background:#211b17;border:1px solid #4e4035;border-radius:7px;padding:10px}.scale-tabs button b,.scale-tabs button span{display:block}.scale-tabs button b{font-size:13px}.scale-tabs button span{color:#9e907d;margin-top:4px;font:10px DM Mono}.scale-tabs button.active{color:#241911;background:#c99354;border-color:#d8a464}.scale-tabs button.active span{color:#543723}.scale-panel{background:linear-gradient(125deg,#2a2119,#201b17);border:1px solid #5a4836;border-radius:12px;padding:23px}.scale-summary{grid-template-columns:1fr 1fr;gap:25px;margin-bottom:18px;display:grid}.scale-summary h3{margin:5px 0;font:600 26px Playfair Display,Noto Sans SC}.scale-summary p{color:#b8ab98;margin-top:5px;font-size:12px;line-height:1.8}.scale-summary p b{color:#dfc39a}.scale-summary .scale-formula{color:#d19c61;letter-spacing:.04em;font:12px DM Mono}.scale-drills{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;display:grid}.scale-drills article{background:#211b17;border-top:2px solid #c99354;padding:14px}.scale-drills b{color:#d5ad76;font:11px DM Mono}.scale-drills p{color:#aba091;margin-top:8px;font-size:12px;line-height:1.75}@media (width<=700px){.scale-intro h2{font-size:27px}.scale-tabs{grid-template-columns:1fr 1fr}.scale-summary,.scale-drills{grid-template-columns:1fr}.scale-panel{padding:16px}}