.lcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lcard{position:relative;min-width:0}.lcard__link{position:relative;display:grid;grid-template-rows:1fr auto;gap:28px;min-height:176px;padding:24px 24px 20px;border-radius:20px;overflow:hidden;isolation:isolate;background:linear-gradient(170deg,#f4ece10f,#f4ece106 55%,#2b173347);border:1px solid rgba(244,236,225,.1);box-shadow:inset 0 1px #ffffff0f,0 24px 48px -32px #000000e6;color:var(--cream);text-decoration:none;transition:transform .5s var(--ease-out),border-color .3s}.lcard__light{position:absolute;left:50%;top:-60%;width:140%;height:120%;transform:translate(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(240,180,106,.28),rgba(240,180,106,.06) 55%,transparent 72%);opacity:.55;z-index:-1;pointer-events:none;transition:opacity .5s var(--ease-out)}.lcard__strings{position:absolute;left:24px;right:24px;top:22px;height:22px;display:grid;align-content:space-between;opacity:.45;pointer-events:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}.lcard__strings span{display:block;height:1px;background:linear-gradient(90deg,rgba(240,180,106,.9),rgba(240,180,106,.25) 60%,transparent)}.lcard__strings span:nth-child(2){height:1.2px}.lcard__strings span:nth-child(3){height:1.4px}.lcard__strings span:nth-child(4){height:1.7px}.lcard__strings span:nth-child(5){height:2px}.lcard__strings span:nth-child(6){height:2.4px}.lcard__title{align-self:end;font-family:var(--font-display);font-variation-settings:"opsz" 48,"SOFT" 40,"WONK" 1;font-weight:420;font-size:1.5rem;line-height:1.1;letter-spacing:-.01em;text-wrap:balance;padding-top:40px}.lcard__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-sm);color:var(--cream-2)}.lcard__state{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px solid rgba(244,236,225,.18);color:var(--cream-2);font-size:.8125rem;font-weight:500;white-space:nowrap;transition:border-color .3s,color .3s,background-color .3s}.lcard__state:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cream-3);transition:background-color .3s}.lcard.is-open .lcard__state{color:var(--amber);border-color:#f0b46a66;background:#f0b46a14}.lcard.is-open .lcard__state:before{background:var(--amber);box-shadow:0 0 10px #f0b46acc}.lcard__link:hover,.lcard__link:focus-visible{transform:translateY(-4px);border-color:#f0b46a66}.lcard__link:hover .lcard__light,.lcard__link:focus-visible .lcard__light{opacity:1}.lcard__link:hover .lcard__strings,.lcard__link:focus-visible .lcard__strings{opacity:.9}.lcard__link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.lcard__link:active{transform:translateY(-1px)}.lcard--compact .lcard__link{min-height:150px;gap:20px}.lcard--compact .lcard__title{font-size:1.3125rem;padding-top:32px}@media(max-width:1100px){.lcards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.lcards{grid-template-columns:1fr;gap:12px}.lcard__link{min-height:0;gap:20px;padding:20px 20px 18px}.lcard__title{padding-top:30px;font-size:1.375rem}.lcard__strings{left:20px;right:20px;top:18px;height:18px}}.lesson{position:relative;padding-bottom:120px}.lesson__head{position:relative;padding:calc(var(--header-h) + 64px) 0 48px}.lesson__head:before{content:"";position:absolute;left:50%;top:0;width:min(900px,120vw);height:520px;transform:translate(-50%);background:radial-gradient(50% 50% at 50% 0%,rgba(240,180,106,.22),transparent 70%);pointer-events:none}.lesson__head-inner{position:relative;max-width:860px}.lesson__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:16px}.lesson__badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid rgba(240,180,106,.45);background:#f0b46a1a;color:var(--amber);font-size:.75rem;font-weight:600;letter-spacing:.02em}.lesson__title{margin-bottom:20px;text-shadow:0 0 48px rgba(240,180,106,.22)}.lesson__lede{max-width:56ch}.lesson__body{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px 48px;align-items:start}.lesson__main{min-width:0}.stage-area [data-view][tabindex="-1"]:focus{outline:none}.screen{position:relative;aspect-ratio:16 / 9;border-radius:24px;overflow:hidden;background:radial-gradient(60% 80% at 50% 0%,rgba(240,180,106,.3),transparent 70%),linear-gradient(180deg,#2b173399,#06040ae6);border:1px solid rgba(244,236,225,.12);box-shadow:inset 0 1px #ffffff0f,0 40px 100px -40px #000000e6;display:grid;place-items:center;padding:32px}.screen__strings{position:absolute;inset:0;display:grid;align-content:space-evenly;padding:10% 0;pointer-events:none;opacity:.35}.screen__strings span{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(240,180,106,.8),transparent);transform:rotate(-3deg)}.screen__strings span:nth-child(2){height:1.2px}.screen__strings span:nth-child(3){height:1.5px}.screen__strings span:nth-child(4){height:1.8px}.screen__strings span:nth-child(5){height:2.2px}.screen__strings span:nth-child(6){height:2.6px}.screen__centre{position:relative;display:grid;justify-items:center;gap:14px;text-align:center;max-width:520px;padding:32px;border-radius:20px;background:#0a070f8c;border:1px solid rgba(244,236,225,.12)}.screen--wait .screen__centre{background:none;border:0}.screen__wait{color:var(--cream-2);font-size:var(--text-sm)}.screen__title{font-family:var(--font-display);font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 1;font-weight:420;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);line-height:1.1;letter-spacing:-.01em}.screen__text{color:var(--cream-2);max-width:44ch}.screen__text:empty{display:none}.screen__noscript{position:absolute;left:24px;right:24px;bottom:24px}html:not(.js) .screen--wait .spinner,html:not(.js) .screen--wait .screen__wait{display:none}.clips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.clips--single{grid-template-columns:1fr}.clip{margin:0;min-width:0}.clip__frame{position:relative;aspect-ratio:16 / 9;border-radius:20px;overflow:hidden;background:radial-gradient(60% 80% at 50% 0%,rgba(240,180,106,.3),transparent 70%),linear-gradient(180deg,#2b173399,#06040ae6);border:1px solid rgba(244,236,225,.12);box-shadow:inset 0 1px #ffffff0f,0 30px 80px -40px #000000e6}.clip__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}.clip__play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:10px;padding:24px;color:var(--cream);cursor:pointer;text-align:center}.clip__strings{position:absolute;inset:0;display:grid;align-content:space-evenly;padding:10% 0;pointer-events:none;opacity:.3;transition:opacity .4s var(--ease-out)}.clip__strings span{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(240,180,106,.8),transparent);transform:rotate(-3deg)}.clip__strings span:nth-child(2){height:1.2px}.clip__strings span:nth-child(3){height:1.5px}.clip__strings span:nth-child(4){height:1.8px}.clip__strings span:nth-child(5){height:2.2px}.clip__strings span:nth-child(6){height:2.6px}.clip__ring{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink);box-shadow:0 0 #ff9a4d4d,0 20px 40px -16px #ff9a4dcc;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}.clip__ring svg{width:30px;height:30px;translate:2px 0}.clip__word{font-family:var(--font-display);font-variation-settings:"opsz" 48,"SOFT" 40,"WONK" 1;font-size:1.25rem;font-weight:420}.clip__hint{font-size:.8125rem;color:var(--cream-3)}.clip__play:hover .clip__ring,.clip__play:focus-visible .clip__ring{transform:scale(1.08);box-shadow:0 0 0 12px #ff9a4d24,0 20px 40px -16px #ff9a4de6}.clip__play:hover .clip__strings{opacity:.6}.clip__play:active .clip__ring{transform:scale(.98)}.clip__play:focus-visible{outline:2px solid var(--accent);outline-offset:-6px;border-radius:20px}.clip__caption{display:flex;align-items:baseline;gap:12px;margin-top:14px;color:var(--cream-2)}.clip__index{flex:0 0 auto;font-size:var(--text-sm);color:var(--amber)}.clip__title{font-family:var(--font-display);font-variation-settings:"opsz" 36,"SOFT" 40,"WONK" 1;font-size:1.125rem;color:var(--cream)}.clips__note{margin-top:20px;font-size:var(--text-sm);color:var(--cream-3)}.lesson__aside{display:grid;gap:10px;color:var(--cream-2)}.lesson__aside>*+*{margin-top:0}.lesson__aside-title{font-family:var(--font-display);font-variation-settings:"opsz" 48,"SOFT" 40,"WONK" 1;font-weight:420;font-size:1.375rem;line-height:1.15;color:var(--cream);margin-bottom:4px}.lesson__aside-sub{margin-top:12px;font-size:var(--text-sm);font-weight:600;color:var(--amber)}.lesson__aside-buy{margin-top:16px;color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#ff9a4d80;transition:color .25s}.lesson__aside-buy:hover{color:var(--accent)}.chords{margin-top:80px}.chords__head{display:grid;gap:10px;max-width:640px;margin-bottom:32px}.chords__note{color:var(--cream-2)}.chords__grid{display:flex;flex-wrap:wrap;gap:16px}.chord{margin:0;flex:1 1 150px;max-width:200px;display:grid;justify-items:center;gap:4px;padding:20px 16px 16px;border-radius:20px;background:linear-gradient(170deg,#f4ece10f,#f4ece106 55%,#2b173347);border:1px solid rgba(244,236,225,.1);box-shadow:inset 0 1px #ffffff0f}.chord__svg{width:100%;max-width:132px;height:auto;fill:none;stroke:#f4ece173;stroke-width:1.2;stroke-linecap:round}.chord__nut{stroke:var(--cream);stroke-width:4}.chord__marks text{fill:var(--cream-2);stroke:none;font-family:var(--font-text);font-size:12px;font-weight:600}.chord__marks circle{stroke:var(--cream-2);stroke-width:1.5}.chord__dots circle{fill:var(--amber);stroke:none}.chord__name{font-family:var(--font-display);font-variation-settings:"opsz" 36,"SOFT" 40,"WONK" 1;font-size:1.125rem;color:var(--cream)}.related{margin-top:96px}.related__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}.related__title{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem)}.related__all{font-size:var(--text-sm)}.lesson-buy{position:relative;display:grid;grid-template-columns:180px minmax(0,1fr);gap:40px;align-items:center;margin-top:96px;padding:40px 48px;border-radius:28px;overflow:hidden;background:radial-gradient(60% 100% at 10% 0%,rgba(240,180,106,.22),transparent 70%),linear-gradient(160deg,#f4ece10f,#f4ece106 50%,#2b173359);border:1px solid rgba(244,236,225,.1);box-shadow:inset 0 1px #ffffff0f,0 30px 60px -30px #000c}.lesson-buy__cover{width:180px;aspect-ratio:1400 / 1982;margin-bottom:-80px}.lesson-buy__cover img{width:100%;height:100%;object-fit:cover;border-radius:4px 8px 8px 4px;box-shadow:0 2px 4px #0006,0 20px 50px -10px #000c,0 40px 80px -30px #f0b46a4d}.lesson-buy__title{font-family:var(--font-display);font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 1;font-weight:400;font-size:clamp(1.625rem,1.2rem + 1.6vw,2.5rem);line-height:1.08;letter-spacing:-.015em;margin:12px 0 14px;max-width:20ch}.lesson-buy__text{color:var(--cream-2);max-width:56ch;margin-bottom:24px}.lesson-buy__actions{display:flex;flex-wrap:wrap;gap:12px}.pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}.pager__link{display:grid;gap:6px;min-width:0;text-decoration:none}.pager__link--next{text-align:right}.pager__dir{font-size:var(--text-sm);color:var(--cream-3)}.pager__name{font-family:var(--font-display);font-variation-settings:"opsz" 48,"SOFT" 40,"WONK" 1;font-size:1.375rem;line-height:1.15;color:var(--cream);transition:color .25s,transform .4s var(--ease-out)}.pager__link--empty .pager__name{color:var(--cream-3)}a.pager__link:hover .pager__name{color:var(--accent)}a.pager__link:hover .pager__name{transform:translate(4px)}a.pager__link--next:hover .pager__name{transform:translate(-4px)}a.pager__link:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:8px}@media(max-width:1100px){.lesson__body{grid-template-columns:1fr;gap:24px}}@media(max-width:900px){.lesson__head{padding:calc(var(--header-h) + 40px) 0 32px}.screen{aspect-ratio:auto;min-height:0;padding:16px}.screen__centre{padding:28px 20px}.screen--wait{aspect-ratio:16 / 9}.clips{grid-template-columns:1fr;gap:20px}.chords{margin-top:56px}.related{margin-top:64px}.lesson-buy{grid-template-columns:1fr;gap:24px;margin-top:64px;padding:28px 24px 32px}.lesson-buy__cover{width:120px;margin-bottom:0}}@media(max-width:560px){.lesson-buy__actions .button{flex:1 1 auto}.pager{grid-template-columns:1fr;gap:20px}.pager__link--next{text-align:left}.chord{flex-basis:130px}}
