:root{--bg:#141411;--panel:#20211c;--line:#ffffff17;--muted:#acafa0;--lime:#e7bc7b;--text:#f7f2e6}body{background:radial-gradient(ellipse at 85% 0,#77603a18,transparent 45%),radial-gradient(ellipse at 0 80%,#515a3515,transparent 55%),var(--bg);background-attachment:fixed}aside{background:linear-gradient(160deg,#24251f,#151712);box-shadow:12px 0 70px #0002}.brand{letter-spacing:-1.5px}aside>small{color:#969c89}.nav{transition:background .2s,transform .2s,color .2s}.nav:hover{background:#ffffff08;transform:translateX(3px)}.nav.active{background:linear-gradient(110deg,#e7bc7b24,#e7bc7b08);color:var(--lime);box-shadow:inset 2px 0 var(--lime)}main{padding-top:0}header{height:78px}.pill{background:#ffffff05;color:#c9c5b7}.card{background:linear-gradient(135deg,#ffffff04,transparent 55%),var(--panel);border-color:#ffffff14;box-shadow:0 16px 32px -20px #000b,inset 0 1px #ffffff05;transition:border-color .25s,box-shadow .25s,transform .25s}.card:hover{border-color:#e7bc7b32;box-shadow:0 20px 38px -24px #000e,inset 0 1px #ffffff08}.primary{background:linear-gradient(135deg,#f3d29b,#d6a45d);color:#2b2316;box-shadow:0 4px 0 #8f6737,0 7px 17px #0003;transition:transform .18s,box-shadow .18s}.primary:hover{background:linear-gradient(135deg,#ffe3b0,#e7bc7b);transform:translateY(-2px);box-shadow:0 6px 0 #8f6737,0 10px 20px #0004}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #8f6737}.secondary{background:#ffffff03;transition:background .2s,transform .2s}.secondary:hover{background:#ffffff0b;border-color:#e7bc7b66}.secondary:active{transform:scale(.97)}select{background:#171b16;border-color:#ffffff20;box-shadow:inset 0 2px 4px #0003}.intro{position:relative;isolation:isolate;overflow:hidden;border:1px solid #e7bc7b25;border-radius:18px;margin:28px 0 22px;padding:34px 32px;min-height:245px;background:radial-gradient(ellipse at 80% 40%,#bd8e4833,transparent 50%),linear-gradient(120deg,#30372a,#20241b 65%,#323226);box-shadow:inset 0 1px #ffffff0a,0 20px 45px -30px #000}.intro:before{content:'';position:absolute;inset:0;z-index:-1;opacity:.16;background:repeating-linear-gradient(90deg,transparent 0,transparent 49px,#d9c39333 50px,transparent 51px);mask-image:linear-gradient(90deg,transparent,#000)}.intro h1{max-width:67%;font-size:clamp(26px,3vw,43px);line-height:1.55;letter-spacing:-1.2px}.intro p{max-width:66%;font-size:14px}.eyebrow{color:#dfc49a;font-size:9px;letter-spacing:2.4px}.hero-caption{display:flex;gap:14px;margin-top:20px;font-size:10px;color:#d1c7b2;align-items:center;flex-wrap:wrap}.hero-caption span{background:#0002;border:1px solid #ffffff16;border-radius:20px;padding:6px 11px}.guitar-art{position:absolute;right:0;top:-26px;width:33%;height:320px;filter:drop-shadow(10px 20px 12px #0007);transform:rotate(13deg);z-index:-1;transition:transform 1s}.intro:hover .guitar-art{transform:rotate(9deg) translateY(-4px)}.beginner-start{background:linear-gradient(110deg,#373c2c99,#25291f);position:relative;padding-left:30px}.beginner-start:before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:3px;background:var(--lime);border-radius:3px}.beginner-start h2{font-size:21px}.sound-panel{background:linear-gradient(110deg,#2c2921,#20221c)}.sound-panel h2{font-size:20px}.sound-panel .tag{border:1px solid #e7bc7b33;border-radius:20px;padding:7px 10px;color:#dac398}.tempo{padding:10px 0;background:radial-gradient(ellipse,#e7bc7b09,transparent 70%)}.tempo input{color:#f1d7b1;text-shadow:0 2px 20px #e7bc7b15;font-weight:300}.beats .beat{box-shadow:inset 0 2px 3px #0005}.beats .on{background:#efcd98;box-shadow:0 0 18px #e7bc7b77}.tip{background:radial-gradient(ellipse at top right,#64533755,transparent 75%),var(--panel)}#board,.lesson-board{background:repeating-linear-gradient(1deg,#6b492e11 0px,#6b492e11 1px,transparent 2px,transparent 7px),linear-gradient(110deg,#403024,#291f19);box-shadow:0 8px 14px #0004,inset 0 2px 4px #0006;border-color:#8a705250}.string{height:45px}.fret{border-right-color:#9a9276;background:linear-gradient(transparent 47%,#17110d 48%,#d5c9ad99 50%,#786c5555 52%,transparent 54%)}.fret:first-child{background:#171b16;border-right-color:#eee0bd}.note{background:linear-gradient(135deg,#647257,#48543b);border:1px solid #adc09533;box-shadow:0 3px 5px #0007,inset 0 1px #ffffff22;transition:transform .15s,box-shadow .15s,background .15s}.note.root{background:linear-gradient(135deg,#f7d9a5,#d7a760);color:#362a17;border-color:#ffe4b4}.fret:hover .note{transform:translateY(-3px) scale(1.1);background:#fff0d2;box-shadow:0 5px 10px #0008}.fret.sounding .note{animation:pluck-light .7s ease-out;background:#fff1ca;color:#352718}.numbers{background:#141713}.legend .dot.root{background:var(--lime)}.lesson-grid .card{position:relative;overflow:hidden;min-height:175px}.lesson-grid .card:after{content:'↗';position:absolute;right:20px;top:19px;color:var(--lime);transition:transform .2s}.lesson-grid .card:hover{transform:translateY(-4px)}.lesson-grid .card:hover:after{transform:translate(2px,-2px)}.lesson-grid small{color:#d7b985}.lesson-goal{background:#e7bc7b0d}.exercise-box{background:#272c21}.sound-controls input{cursor:pointer}.room-toggle{border:1px solid #ffffff25;border-radius:20px;background:#ffffff06;color:#ded7c8;padding:8px 12px;font-size:11px;margin-left:auto;margin-right:12px}.room-toggle:hover{border-color:var(--lime)}.room-toggle[aria-pressed=true]{color:var(--lime);background:#e7bc7b12}.audio-indicator{display:inline-flex;align-items:center;gap:3px;height:20px;margin-right:10px;vertical-align:middle}.audio-indicator i{width:3px;height:5px;border-radius:3px;background:var(--lime)}.audio-indicator.active i{animation:equalizer .5s ease-in-out infinite alternate}.audio-indicator i:nth-child(2){animation-delay:.1s}.audio-indicator i:nth-child(3){animation-delay:.25s}.audio-indicator i:nth-child(4){animation-delay:.15s}.focus-room{--bg:#0c0e0b;--panel:#171c16}.focus-room .intro{background:radial-gradient(ellipse at 80% 40%,#d8a75a26,transparent 55%),linear-gradient(120deg,#252b20,#141a13)}.focus-room aside{background:#11170f}.page:not([hidden]){animation:page-enter .35s ease-out}@keyframes page-enter{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes pluck-light{0%{transform:scale(1.2);box-shadow:0 0 0 0 #e7bc7baa}100%{transform:scale(1);box-shadow:0 0 0 15px #e7bc7b00}}@keyframes equalizer{to{height:18px}}@media(min-width:1500px){.intro{min-height:270px}.guitar-art{height:350px}.intro h1{max-width:70%}}@media(max-width:800px){.intro{padding:26px 22px}.intro h1{max-width:75%;font-size:28px}.intro p{max-width:72%}.guitar-art{width:36%;opacity:.8;right:-25px}.hero-caption{max-width:76%;gap:6px}.sound-panel .tag{font-size:9px}.room-toggle{margin-right:0}}@media(max-width:650px){header{height:60px}header>span:first-child{font-size:10px}.intro{min-height:260px;margin-top:20px}.intro h1{font-size:27px;max-width:85%}.intro p{max-width:75%;font-size:12px}.guitar-art{width:48%;right:-32px;top:15px;opacity:.4}.hero-caption{max-width:100%;position:relative}.hero-caption span{font-size:9px;background:#171c16bb}.beginner-start{padding:20px}.beginner-start h2{font-size:19px}.card-head{gap:10px}.string{height:43px}.sound-panel .card-head .tag{width:fit-content}.room-toggle{font-size:10px;padding:7px 10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.narrator-panel{padding:24px;margin:24px 0;border:1px solid #e7bc7b55;border-radius:14px;background:radial-gradient(ellipse at top right,#e7bc7b15,transparent 75%),#1b231a}.narrator-panel p{font-size:13px}.narrator-icon{font-size:32px;color:var(--lime)}.narrator-panel .controls{margin:18px 0}.narrator-panel #narrator-status{color:var(--lime);min-height:24px}.teaching-step.narrating{background:#e7bc7b12;border-radius:10px;box-shadow:inset 3px 0 var(--lime)}.beginner-start>.secondary{margin:10px 0 0 10px}button:disabled{cursor:not-allowed;opacity:.45}@media(max-width:650px){.narrator-panel{padding:18px}.narrator-panel .controls label{flex-basis:100%}.beginner-start>.secondary{margin-left:0}}
.narrator-caption{padding:18px 20px;margin-top:18px;background:#100e10aa;border:1px solid #e7bc7b33;border-left:3px solid var(--lime);border-radius:8px;line-height:2;font-size:16px;color:#f8e7ce;min-height:75px}.narrator-panel .controls{flex-wrap:wrap}.narrator-panel .controls label{flex-basis:180px}
.lesson-recording{width:100%;margin:12px 0 16px;display:block;color-scheme:dark}.narrator-panel .actions label{max-width:220px}.recording-badge{display:block;margin-top:12px;font-size:11px;color:#ffd0a0}.narrator-panel .actions{align-items:end}
.course-tools{margin:0 0 22px}.course-tools input{width:100%;min-width:0;background:#171416;border:1px solid #ffffff25;border-radius:7px;color:var(--text);padding:10px;font:inherit}.course-tools p{font-size:12px;margin-bottom:0}.course-meta{display:block;color:#d9ae7b;font-size:10px;margin-bottom:13px}.teacher-card{display:flex;flex-direction:column;gap:8px}.teacher-card h2{margin:6px 0}.teacher-card p{font-size:13px}.teacher-link{display:block;text-decoration:none;text-align:center;margin-top:auto}.teacher-card small{line-height:1.8}.teacher-card .hint{font-size:10px;margin:0}.teacher-card:after{display:none}#teachers>.card{margin-bottom:22px}#teachers .intro h1{max-width:100%}#teachers .intro p{max-width:90%}@media(max-width:650px){nav{flex-wrap:wrap}.nav{flex:1;white-space:nowrap}.course-tools .controls label{flex-basis:100%}}
.fret-marker{color:var(--lime);font-weight:700}.fret:first-child:not([data-fret="0"]){border-right:2px solid #9a9276;background:linear-gradient(transparent 47%,#17110d 48%,#d5c9ad99 50%,#786c5555 52%,transparent 54%)}.board-scroll{scrollbar-color:#a7794e #191416;scrollbar-width:thin}.board-scroll:focus-visible{outline:2px solid var(--lime);outline-offset:5px;border-radius:8px}