:root{color-scheme:dark;--bg:#131716;--panel:#1b201e;--line:#323a35;--muted:#a7b0a8;--ink:#f0f2e9;--lime:#d7f28b;--green:#829e70;--orange:#e7b28a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif}button,input,textarea{font:inherit}button{cursor:pointer;color:var(--ink);border:1px solid var(--line);background:transparent;border-radius:8px;padding:8px 12px;transition:background .12s}button:hover{background:#303a31}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button:disabled{opacity:.35;cursor:default}button.primary{background:var(--lime);border-color:var(--lime);color:#20291a;font-weight:650}button.primary:hover{background:#e7ffad}a{color:var(--lime)}header{height:64px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:4}.brand{text-decoration:none;color:var(--ink);font-size:23px;font-weight:650;letter-spacing:-1px;display:flex;align-items:center;gap:12px}.mark{display:flex;gap:3px;align-items:center;height:25px}.mark i{background:var(--lime);width:4px;height:13px;border-radius:2px}.mark i:nth-child(2){height:24px}.mark i:nth-child(3){height:18px}.mark i:nth-child(4){height:9px}.beta{color:var(--muted);font-size:9px;letter-spacing:1.2px;font-weight:500;margin-left:5px}.window-actions{display:flex;gap:8px}.window-actions button{font-size:11px;padding:6px 10px}.window-actions button[aria-pressed=true]{border-color:var(--lime);color:var(--lime)}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);max-width:1400px;margin:auto}aside{padding:30px 20px;border-right:1px solid var(--line);position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto}.course-label,.eyebrow,.section-label{font-size:10px;letter-spacing:1.65px;color:var(--muted);font-weight:650}#song-title{border:0;border-bottom:1px solid transparent;background:transparent;color:var(--ink);font-size:25px;width:100%;padding:5px 0;font-weight:600;letter-spacing:-.6px}#song-title:hover{border-color:var(--line)}.subtitle{font-size:11px;color:var(--muted);margin:2px 0 22px}.stats{display:flex;gap:22px;margin-bottom:24px;font-size:17px;font-weight:600}.stats small{display:block;font-size:8px;font-weight:500;color:var(--muted);letter-spacing:1px}.progress-head{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.progress-track{height:3px;background:var(--line);margin:9px 0 24px;border-radius:3px}#progress-fill{background:var(--lime);height:100%;transition:width .3s}.phase-label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;font-size:11px;line-height:1.4;padding:10px 8px;margin:2px 0;border-radius:6px}.nav-item .num{color:#879087;font-size:10px;font-variant-numeric:tabular-nums;min-width:18px}.nav-item.active{background:#2d3728;color:var(--lime)}.nav-item.done .num{color:var(--lime)}.aside-foot{margin-top:30px;font-size:8px;color:var(--muted);letter-spacing:1px}.aside-foot p{font-size:10px;letter-spacing:0;margin:5px 0}.tiny-dot{display:inline-block;width:5px;height:5px;background:var(--lime);border-radius:50%;margin-right:5px}main{padding:22px 38px 18px;min-width:0}.livebar{font-size:10px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:35px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#888b7f;margin-right:7px}.dot.connected{background:var(--lime);box-shadow:0 0 10px #d7f23344}.live-actions{display:flex;gap:6px}.live-actions button{border:0;padding:3px 6px;font-size:10px;color:var(--muted)}.eyebrow{color:var(--lime)}h1{font-size:38px;letter-spacing:-1.5px;line-height:1.12;font-weight:550;margin:13px 0 15px;max-width:600px}.lead{font-size:16px;line-height:1.7;color:#bcc5b9;max-width:660px;margin:0 0 20px}.meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:10px}.meta span{padding:3px 9px;border:1px solid var(--line);border-radius:5px}.hero-art{height:90px;display:flex;align-items:end;gap:5px;position:relative;margin:24px 0 28px;overflow:hidden;border-bottom:1px solid var(--line)}.hero-art div{flex:1;background:#465b3b;border-radius:3px 3px 0 0;min-height:5px}.hero-art div:nth-child(4n){background:var(--lime)}.hero-art div:nth-child(3n){background:#71855c}.why{padding:16px 19px;background:#20271e;border-left:2px solid #aec779;border-radius:0 8px 8px 0;margin:24px 0 30px;font-size:12px;color:#c8d1c1}.why strong{display:block;color:var(--lime);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:4px}.steps{list-style:none;padding:0;margin:16px 0 25px;counter-reset:steps}.steps li{counter-increment:steps;position:relative;padding:0 0 21px 38px}.steps li:before{content:counter(steps,decimal-leading-zero);position:absolute;left:0;top:2px;font-size:10px;color:var(--lime);background:#283020;width:25px;height:25px;border-radius:50%;display:grid;place-items:center}.steps h3{font-size:14px;font-weight:600;margin:0 0 5px}.steps p{margin:0;color:var(--muted);font-size:12px;line-height:1.85}h2{font-size:17px;letter-spacing:-.3px;font-weight:550;margin:0 0 12px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin:24px 0}.listen{border-color:#524838;background:#28251f}.listen .section-label{color:var(--orange)}.listen p{font-size:13px;color:#d5c8b4;margin:9px 0 0}.check-row{display:flex;align-items:start;gap:10px;padding:10px 0;border-bottom:1px solid #303830;font-size:12px;cursor:pointer}.check-row:last-child{border:0}.check-row input{accent-color:var(--lime);width:16px;height:16px;flex-shrink:0;margin-top:3px}.check-row:has(input:checked){color:#b7cda0}.checkpoint-note{font-size:10px;color:var(--muted);margin-top:5px}.probe-row{display:flex;align-items:start;gap:8px;font-size:11px;color:var(--muted);padding:4px 0}.probe-row b{font-size:12px;color:var(--orange)}.probe-row.ok b{color:var(--lime)}.probe-title{font-size:10px;letter-spacing:.8px;color:var(--muted);margin:14px 0 6px}details{border-top:1px solid var(--line);padding:12px 0}summary{cursor:pointer;font-size:12px;color:#c9d0c4}details p{color:var(--muted);font-size:12px;padding:0 0 0 14px}.quiz-opts{display:grid;gap:8px;margin-top:13px}.quiz-opts button{text-align:left;font-size:12px}.quiz-opts .correct{border-color:var(--lime);color:var(--lime)}.quiz-opts .incorrect{border-color:#bb8c73}.quiz-result{font-size:12px;color:#c7d6b7;margin:10px 0 0}textarea{background:#181d19;border:1px solid var(--line);border-radius:8px;width:100%;min-height:85px;padding:12px;color:var(--ink);resize:vertical;font-size:12px}textarea::placeholder{color:#7f8b7e}footer{border-top:1px solid var(--line);padding:20px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:10px}footer span{font-size:10px;color:var(--muted)}footer button{font-size:11px}.bottom-note{text-align:center;font-size:9px;color:#879285;margin:8px 0 14px}.lab-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}.lab-top h2{margin:0}.lab-controls{display:flex;gap:7px}.lab-controls button{font-size:10px}.lab-caption{font-size:10px;color:var(--muted);margin:10px 0 0}.beat-row{display:grid;grid-template-columns:44px repeat(16,minmax(0,1fr));gap:4px;align-items:center;margin:6px 0}.beat-row span{font-size:9px;color:var(--muted)}.beat{padding:0;border-radius:3px;height:24px;background:#2c342d;border:1px solid transparent}.beat.strong{border-left-color:#7c8b72}.beat.on{background:var(--lime);color:#212a19}.beat.playhead{box-shadow:0 0 0 2px #fff}.beat-label{text-align:center;font-size:8px}.chord-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.chord-card{border:1px solid #48583d;background:#263021;border-radius:7px;padding:12px 8px}.chord-card strong{font-size:16px;font-weight:550;display:block;color:var(--lime)}.chord-card small{display:block;font-size:9px;color:var(--muted);line-height:1.7}.roll{height:110px;position:relative;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#49504155 calc(12.5% - 1px),#49504155 12.5%),repeating-linear-gradient(0deg,#232a22 0,#232a22 10px,#30372b 10px,#30372b 11px);margin-top:10px;border-radius:5px;overflow:hidden}.note{position:absolute;height:7px;background:var(--lime);border-radius:2px;min-width:3px}.stems{display:flex;gap:15px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:10px}.stems input{accent-color:var(--lime)}.volume{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted);margin-top:12px}.volume input{accent-color:var(--lime);width:100px}.arrangement{display:flex;gap:4px;align-items:end;height:105px;margin:20px 0 8px}.arrangement button{padding:6px 3px;border-radius:5px 5px 0 0;background:#3f5134;border:1px solid #70865a;display:flex;flex-direction:column;justify-content:end;align-items:center;font-size:8px;min-width:0;line-height:1.3;color:#eff9e2}.arrangement button.selected{background:var(--lime);color:#202a15}.arrangement button span{opacity:.7;font-size:8px}.map-detail{font-size:12px;color:var(--muted);min-height:55px}.map-detail strong{color:var(--lime)}.finish-banner{background:#293b21;padding:20px;border-radius:10px;border:1px solid #667f4c;margin:20px 0}.finish-banner h2{color:var(--lime)}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--lime);color:#213116;max-width:90vw;padding:11px 18px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;z-index:20;transition:.2s}#toast.show{opacity:1;transform:translateX(-50%)}#menu-panel{position:fixed;right:20px;top:57px;background:#273025;border:1px solid #4b5942;border-radius:10px;padding:10px;z-index:10;width:230px;box-shadow:0 12px 35px #0005}#menu-panel button{display:block;border:0;font-size:12px;width:100%;text-align:left}#menu-panel p{font-size:10px;color:var(--muted);padding:0 12px}#lesson:focus{outline:none}@media(min-width:1200px){main{padding:28px 58px}}@media(max-width:780px){.workspace{grid-template-columns:215px minmax(0,1fr)}aside{padding:25px 14px}main{padding:18px 24px}h1{font-size:32px}.livebar{align-items:start;flex-direction:column;gap:7px}.beta{display:none}.chord-cards{gap:4px}.chord-card strong{font-size:14px}}@media(max-width:620px){aside{display:none}header{padding:0 18px;height:56px}.brand{font-size:21px}.window-actions{gap:5px}.window-actions button{font-size:10px;padding:5px 7px}.workspace{display:block}main{padding:15px 22px}.livebar{margin-bottom:26px}h1{font-size:33px}.lead{font-size:14px}.panel{padding:16px}.beat-row{gap:3px;grid-template-columns:32px repeat(16,minmax(0,1fr))}.beat{height:20px}.lab-top{align-items:start;flex-direction:column;gap:10px}footer{position:sticky;bottom:0;background:var(--bg);padding:14px 0}.bottom-note{font-size:8px}.steps p{font-size:12px}.chord-card strong{font-size:13px}#menu-panel{top:50px}.hero-art{height:65px}}
body[data-course=nature]{--lime:#afdcd2;--green:#79a99d;--orange:#d7c4a1;--bg:#141c1b;--panel:#1b2724;--line:#35453f}body[data-course=nature] .why{background:#1f302b;border-color:#79b6a7}body[data-course=nature] .nav-item.active{background:#2a4038}body[data-course=nature] .steps li:before{background:#273d35}body[data-course=nature] .hero-art div{background:#406a5d}body[data-course=nature] .hero-art div:nth-child(3n){background:#72998a}body[data-course=nature] .hero-art div:nth-child(4n){background:var(--lime)}body[data-course=nature] .arrangement button{background:#335248;border-color:#658e80}body[data-course=nature] .arrangement button.selected{background:var(--lime);color:#142e25}.course-switcher{margin:0 0 22px}.course-switcher>.section-label{margin-bottom:9px}.course-switcher>p{color:var(--muted);font-size:10px;margin:7px 0 0}#course-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.course-option{text-align:left;padding:12px 14px;border-radius:9px;background:#1c2420}.course-option strong,.course-option span{display:block}.course-option strong{font-size:12px;font-weight:600}.course-option span{font-size:10px;color:var(--muted);margin-top:2px}.course-option.selected{border-color:var(--lime);background:#2b392b}.course-option.selected strong{color:var(--lime)}body[data-course=nature] .course-option.selected{background:#263e36}.sources h2{margin-top:8px}.source-actions{display:flex;gap:7px;flex-wrap:wrap}.source-actions button{font-size:11px}.bird-label{font-size:12px;display:block;margin:18px 0 8px}.sources audio{width:100%;height:40px}.bowl-explainer{font-size:12px;color:var(--muted);margin:0 0 14px}.spacing-control{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px}.spacing-control output{color:var(--lime)}.spacing-control input{grid-column:1 / -1;width:100%;accent-color:var(--lime)}.bowl-events{height:56px;margin:15px 15px 0 6px;position:relative;border-top:1px solid #6b9387}.bowl-events span{position:absolute;top:14px;font-size:10px;color:var(--lime);transform:translateX(-50%)}.bowl-events span:before{content:'';position:absolute;width:8px;height:8px;left:50%;top:-19px;transform:translateX(-50%);border-radius:50%;background:var(--lime)}@media(max-width:620px){.course-option{padding:10px}.course-switcher{margin-bottom:15px}.course-switcher>p{font-size:9px}}

.sample-previews audio{display:block;width:100%;margin:6px 0 17px;height:40px}.sample-previews .bird-label{display:block;margin-top:14px}

/* Timing guidance spans the lesson so both rulers and the overlap stay legible. */
.steps li.with-guide:has(.timing-guide){grid-template-columns:1fr;gap:16px}.ruler-label{font-size:11px;font-weight:650;color:#ffd1a7;padding:5px 0}.ruler-seconds{color:#f2d991;padding-top:9px}.timing-guide{border:1px solid #637c6d;border-radius:9px;padding:16px;background:#1c2c26}.timing-target span,.timing-target small{display:block;color:var(--muted);font-size:10px}.timing-target span{letter-spacing:1px}.timing-target strong{display:block;color:var(--lime);font-size:24px;line-height:1.5;font-variant-numeric:tabular-nums}.timing-target small{font-size:11px}.timing-diagram{display:block;width:100%;height:auto;margin:16px 0 8px}.steps p.timing-help{font-size:12px;color:#c3d1c8}.narration-label{display:block;margin:18px 0 8px;font-size:13px;font-weight:600;color:var(--lime)}.timing-guide audio{display:block;width:100%;height:40px}.narration-transcript{margin-top:14px;padding-bottom:0}.narration-transcript p{padding:10px 0 0;white-space:pre-line}.timing-help strong{color:var(--ink)}@media(max-width:620px){.timing-guide{padding:12px}.timing-target strong{font-size:22px}}

/* Text search stays available while reading long chapters. */
[hidden]{display:none!important}html{scroll-padding-top:145px}#find-bar{position:sticky;top:64px;z-index:5;background:var(--panel);border-bottom:1px solid var(--line);padding:10px 24px}.find-controls{display:flex;gap:8px;align-items:center;max-width:1350px;margin:auto}#find-query{min-width:100px;flex:1;max-width:420px;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 10px;color:var(--ink);font-size:13px}#find-scope{font:inherit;font-size:12px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:8px}#find-count{color:var(--muted);font-size:11px;min-width:96px}#find-bar button{font-size:12px;padding:6px 10px}.finding aside{top:122px;height:calc(100vh - 122px)}mark{background:#f2d78d;color:#252314;border-radius:2px}.find-hit.current-hit{background:#ffad66;color:#221609;outline:2px solid #ffad66}#find-results{max-height:45vh;overflow:auto;margin:10px auto 0;max-width:1350px;border-top:1px solid var(--line)}#find-results p{font-size:12px;color:var(--muted)}#find-results .find-result{display:block;text-align:left;border-radius:5px;width:100%;border:1px solid transparent;padding:10px 12px}.find-result small,.find-result strong,.find-result span{display:block}.find-result small{font-size:9px;letter-spacing:.8px;color:var(--muted)}.find-result strong{font-size:13px;margin:3px 0}.find-result span{font-size:11px;color:var(--muted)}#find-results .current-hit{border-color:var(--lime);background:#2a3830}
/* Real Live screenshots sit beside the exact action they explain. */
.steps li.with-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,1.1fr);gap:20px;align-items:start;padding-bottom:30px}.step-copy,.step-visuals{min-width:0}.step-visuals{display:grid;gap:14px}.control-guide{margin:0;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.guide-title{font-size:11px;font-weight:650;color:var(--lime);margin-bottom:9px}.screenshot{display:block;padding:0;border:0;border-radius:4px;width:100%;overflow:hidden;background:#aaa;cursor:zoom-in}.screenshot:hover{background:#aaa;box-shadow:0 0 0 2px var(--lime)}.screenshot-image{position:relative;display:block;line-height:0}.screenshot-image img{width:100%;height:auto;display:block}.control-outline{position:absolute;border:2px solid #ff6448;box-shadow:0 0 0 1px #fff7;border-radius:2px;pointer-events:none}.zoom-hint{display:block;font-size:10px;padding:4px 0;background:#263a31;color:#e9f5ed}.control-guide figcaption{font-size:11px;line-height:1.7;color:#bcc9c2;margin-top:9px}.image-credit{display:block;margin-top:7px;font-size:9px;color:var(--muted)}#screenshot-dialog{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:18px;width:min(1200px,94vw);max-height:90vh;overflow:auto}#screenshot-dialog::backdrop{background:#000c}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:-18px;background:var(--bg);z-index:2;padding:12px 0;margin-top:-12px}.dialog-heading h2{margin:0;font-size:18px}.dialog-heading button{flex-shrink:0;font-size:12px}.dialog-picture .control-guide{padding:0;border:0}.dialog-picture .guide-title{display:none}.dialog-picture .screenshot-image{max-width:100%;margin:auto}.dialog-picture figcaption{font-size:14px}.dialog-picture .image-credit{font-size:11px}
@media(max-width:820px){.steps li.with-guide{grid-template-columns:1fr;gap:14px}.step-visuals{max-width:620px}}
@media(max-width:620px){#find-bar{top:56px;padding:8px 14px}.find-controls{flex-wrap:wrap;gap:6px}#find-query{flex-basis:50%;max-width:none}#find-scope{font-size:11px;flex:1}#find-count{margin-right:auto}.window-actions button{padding:5px 6px}.brand{gap:7px}.beta{display:none}html{scroll-padding-top:160px}.steps li.with-guide{padding-left:32px}.control-guide{padding:10px}.dialog-heading h2{font-size:15px}}
/* Beginner wayfinding: show the view, exact destination, then the outcome. */
.orientation{border:1px solid #638e80;border-radius:12px;background:#1d302b;padding:18px;margin:26px 0}.orientation h2{font-size:21px;margin:7px 0}.orientation>p{font-size:12px;line-height:1.8;color:#c9d8d0}.view-reference{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.orientation .view-note{font-size:10px;color:var(--muted);margin-bottom:0}.orientation .control-guide{padding:10px}.placement-map{padding:12px;margin:15px 0 8px;background:#182b26;border:1px dashed #689989;border-radius:8px}.placement-map>.section-label{font-size:8px;letter-spacing:1px;margin-bottom:10px}.drag-source,.drag-destination{border:1px solid #506a5f;border-radius:5px;padding:9px 10px;overflow-wrap:anywhere}.drag-source{background:#26372e}.drag-destination{border-color:#9cc9b9;background:#244639}.drag-source small,.drag-destination small{display:block;font-size:8px;letter-spacing:.6px;color:#b7cec2}.drag-source strong,.drag-destination strong{display:block;font-size:12px;color:#e1efe8;margin-top:3px}.drag-arrow{text-align:center;font-size:22px;line-height:1.4;color:var(--lime)}.drop-bar{border-top:1px solid #6c9988;margin-top:8px;padding-top:6px;font-size:11px;color:#c0e4d6}.drop-marker{color:#eac17f}.steps .placement-map p{font-size:10px;line-height:1.6;margin-top:9px}.steps .step-result{border-left:2px solid var(--lime);padding:9px 11px;margin-top:14px;font-size:11px;background:#21342c;color:#cad9d1}.step-result strong{display:block;font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--lime);margin-bottom:4px}.step-folder{font-size:11px;margin:3px 0 4px}.steps li.with-guide:has(.placement-map){padding-bottom:36px}@media(max-width:620px){.view-reference{grid-template-columns:1fr}.orientation{padding:14px}.orientation .view-note{font-size:10px}.steps li.with-guide{gap:12px}}

.signal-flow{border:1px solid var(--line);border-radius:8px;padding:15px;margin-top:16px;background:#1d3028}.signal-flow p{margin:12px 0 0!important;line-height:2!important;font-size:12px!important}.signal-flow span{display:inline-block;border:1px solid #648479;border-radius:5px;padding:2px 8px;color:var(--ink)}.signal-flow b{color:var(--lime);white-space:nowrap}