:root{--background:#f6f4ef;--card:#fff;--text:#222;--muted:#666;--accent:#356f9d;--accent-hover:#2a5b82;--border:#ddd;--shadow:0 8px 22px #00000014}*{box-sizing:border-box}body{background:var(--background);color:var(--text);margin:0;font-family:Inter,system-ui,sans-serif;line-height:1.6}#app{max-width:900px;margin:auto;padding:50px 25px 100px}h1{margin-bottom:.25rem;font-size:2.7rem}h2{margin-top:60px;margin-bottom:5px;font-size:1.8rem}h3{margin-top:0;margin-bottom:.5rem}.artist-description{color:var(--muted);margin-bottom:30px}.lesson-card{background:var(--card);box-shadow:var(--shadow);border-radius:18px;margin-bottom:28px;padding:26px;transition:transform .15s,box-shadow .15s}.lesson-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px #0000001f}.lesson-links{flex-wrap:wrap;gap:20px;margin-top:18px;margin-bottom:18px;display:flex}.lesson-links a{color:var(--accent);font-weight:600;text-decoration:none}.lesson-links a:hover{text-decoration:underline}.lesson-status{color:var(--muted);min-height:1.4rem;margin-bottom:15px}*{-webkit-user-select:none;user-select:none}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px 20px;font-size:1rem;font-weight:600;transition:background .2s,transform .15s}button:hover{background:var(--accent-hover)}button:active{transform:scale(.98)}button:disabled{opacity:.5;cursor:wait}.settings-container{z-index:10;text-align:right;width:min(360px,100vw - 40px);position:fixed;top:20px;right:20px}.lesson-actions{flex-wrap:wrap;gap:12px;margin-top:18px;margin-bottom:15px;display:flex}button:disabled{cursor:wait;opacity:.65}.auth-bar{justify-content:flex-end;align-items:center;gap:12px;min-height:42px;margin:8px 0 24px;display:flex}.auth-status{color:var(--muted);font-size:.9rem}.auth-button{padding:8px 14px;font-size:.9rem}.auth-logout{background:var(--muted)}.login-dialog{width:min(430px,100vw - 32px);box-shadow:var(--shadow);border:0;border-radius:18px;padding:0}.login-dialog::backdrop{background:#0006}.login-form{padding:28px;position:relative}.login-form h2{margin:0 0 8px}.login-form label{margin-top:20px;font-weight:600;display:block}.login-form input{border:1px solid var(--border);width:100%;font:inherit;border-radius:8px;margin:5px 0 16px;padding:11px}.dialog-close{color:var(--muted);background:0 0;padding:2px 10px;font-size:1.6rem;position:absolute;top:12px;right:12px}.login-message{color:var(--muted);margin-bottom:0}.settings-button{vertical-align:top;justify-content:center;align-items:center;width:54px;height:48px;padding:0;font-size:2rem;line-height:1;display:inline-flex}.settings-panel{box-shadow:var(--shadow);text-align:left;background:#fff;border-radius:18px;margin-top:20px;padding:20px}.settings-panel label{margin-bottom:3px;font-weight:600;display:block}.settings-panel select{border:1px solid var(--border);border-radius:8px;width:100%;margin-bottom:18px;padding:10px;font-size:1rem}.artist{margin-bottom:70px}@media (width<=700px){#app{padding:25px 15px 70px}h1{font-size:2rem}.lesson-links{flex-direction:column;gap:10px}.settings-panel select{width:100%}.lesson-actions{flex-direction:column}.settings-container{width:calc(100vw - 24px);top:12px;right:12px}}.site-navigation{border-bottom:1px solid var(--border);gap:24px;margin-bottom:36px;padding-bottom:14px;display:flex}.site-navigation a{color:var(--muted);font-weight:600;text-decoration:none}.site-navigation a:hover,.site-navigation a.selected{color:var(--accent)}.static-page{max-width:720px}.static-page h3{margin-top:24px}.static-page hr{border:0;border-top:1px solid var(--border);margin:28px 0}.static-page a{color:var(--accent)}.format-options{gap:18px;margin-bottom:24px;display:flex}.format-option{flex:1;max-width:260px}.format-button{width:100%}.format-button.selected{background:#2f8f4e;box-shadow:0 8px 18px #2f8f4e59,0 2px 5px #0000002e}.format-button.selected:hover{background:#287a43}.format-option ul{color:var(--muted);margin:12px 0 0;padding-left:42px}.format-option li{margin-bottom:4px}@media (width<=700px){.format-options{flex-direction:column}.format-option{max-width:none}}.cancel-button{background:var(--muted);margin-left:10px}.lesson-card progress{width:100%;height:12px;margin-bottom:15px}.site-navigation{flex-wrap:wrap;padding-right:55px}.instrument-filters,.genre-filters,.genre-tags{flex-wrap:wrap;gap:10px;margin:18px 0;display:flex}.instrument-filters button[aria-pressed=false],.genre-filters button[aria-pressed=false]{background:var(--card);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.genre-tags span{background:var(--background);border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:3px 10px}.master-timeline{align-items:center;gap:12px;margin-bottom:15px;display:flex}.master-timeline progress{cursor:pointer;min-width:0;accent-color:var(--accent);flex:1;margin:0}.master-timeline[hidden]{display:none}.master-timeline progress:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.master-reset{border-radius:6px;flex:0 0 36px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:inline-flex}.master-play{justify-content:center;align-items:center;width:48px;height:48px;padding:0;display:inline-flex}.generated-lesson-actions{flex-flow:row;align-items:stretch}.generated-lesson-actions .master-play{flex:0 0 48px}.lesson-download{color:#194b2a;overflow-wrap:anywhere;background:#b9e6c2;flex:0 auto;min-width:0;min-height:48px;padding:12px clamp(8px,3vw,20px)}.lesson-download:hover{background:#a2d9ae}.account-controls{margin:18px 0 28px}.account-controls .auth-bar{flex-wrap:wrap;align-items:center;gap:12px}.account-controls .auth-status{overflow-wrap:anywhere}.account-message{color:var(--muted);margin:8px 0}.account-message:not(:empty){border:1px solid var(--accent);border-left:4px solid var(--accent);color:#204d70;background:#e9f3fb;border-radius:10px;padding:16px;font-size:1.05rem;font-weight:600;line-height:1.5}.account-controls [hidden]{display:none}.account-controls .auth-bar{justify-content:flex-start;gap:8px}.account-controls .auth-status{flex-basis:100%}.account-controls .auth-bar button{box-sizing:border-box;height:48px;min-height:48px;padding:8px 12px;font-size:.9rem}.lessons-heading{align-items:center;gap:12px 20px;display:flex}.lessons-heading h1{margin:16px auto 16px 0}.owned-lessons-filter[aria-pressed=true]{background:#c6c6c6}.instrument-tags{margin:10px 0 0;display:flex}.lesson-title-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.lesson-title-row h3{min-width:0}.lesson-title-row .instrument-tags{flex-shrink:0;margin:0}.lesson-release-date{color:var(--muted);margin:0 0 12px;font-size:.85rem}.lesson-key-details{text-align:left;color:var(--muted);font-size:.85rem}.lesson-card[data-lesson-id]:not([hidden]){flex-direction:column;gap:13.5px;display:flex}.lesson-card[data-lesson-id]>*{margin-top:0;margin-bottom:0}.lesson-card[data-lesson-id] .lesson-title-row h3{margin:0}.lesson-card[data-lesson-id] .lesson-status:empty{display:none}.instrument-tags span{border:1px solid var(--accent);color:#204d70;background:#e9f3fb;border-radius:8px;padding:3px 10px}.instrument-tags{flex-wrap:wrap;justify-content:flex-end;gap:6px}.lesson-title-row .instrument-tags{flex-shrink:1}.instrument-tags button{font:inherit;border:1px solid var(--accent);border-radius:8px;padding:3px 10px;font-size:.85rem}.instrument-tags button[aria-pressed=false]{color:#204d70;background:#e9f3fb}.account-controls .auth-bar [hidden]{display:none}.account-controls .auth-bar .buy-credits{color:#194b2a;background:#b9e6c2;flex:1 0 100%;width:100%;min-width:0;max-width:none;line-height:1.15}.account-controls .auth-bar .buy-credits:hover{background:#a2d9ae}.account-controls .auth-status{font-weight:700}.account-controls .auth-bar .free-credits{color:#194b2a;background:#b9e6c2;flex-basis:100%;width:100%;max-width:none}.account-controls .auth-bar .free-credits:hover{background:#a2d9ae}.account-controls .account-login{z-index:10;position:fixed;top:20px;right:20px}.account-identity{justify-content:flex-start;align-items:center;gap:12px;min-height:54px;margin:20px 20px 0;padding-right:128px;display:flex}.account-identity[hidden]{display:none}.account-email{overflow-wrap:anywhere;min-width:0;color:var(--muted)}.account-identity .account-logout{flex-shrink:0;height:48px}.settings-container{pointer-events:none}.settings-container>*{pointer-events:auto}#app:not(.is-authenticated) .site-navigation{padding-right:150px}.lesson-redeem{color:#632535;background:#ffb6c1}.lesson-redeem:hover{background:#f5a0af}@media (width<=700px){.account-controls .account-login{top:12px;right:12px}.account-identity{margin:12px 12px 0}}.settings-panel .settings-account{border-top:1px solid #ccc;margin-top:48px;padding-top:16px}.settings-account-email{color:var(--muted);overflow-wrap:anywhere;margin:0 0 16px}.settings-panel select{margin-bottom:27px}.settings-panel .lesson-sort,.settings-panel .account-logout{width:100%;height:48px;font:inherit;padding:10px 18px;font-size:1rem;font-weight:600;display:block}.account-logout,.owned-lessons-filter,.lesson-sort{color:#333;background:#e2e2e2}.account-logout:hover,.owned-lessons-filter:hover,.lesson-sort:hover{background:#d2d2d2}#app{padding-top:90px}#app.is-authenticated{padding-top:16px}.site-menu{z-index:20;position:fixed;top:20px;right:84px}#app:not(.is-authenticated) .site-menu{right:calc(30px + var(--login-width,80px))}.site-menu-toggle{justify-content:center;align-items:center;width:54px;height:48px;padding:0;display:flex}.site-menu-links{background:var(--card);border:1px solid var(--border);width:180px;box-shadow:var(--shadow);border-radius:12px;padding:8px;position:absolute;top:64px;right:0}.site-menu-links button,.site-menu-links a{text-align:left;width:100%;color:var(--text);background:0 0;padding:12px;text-decoration:none;display:block}.site-menu-links button:hover,.site-menu-links a:hover{background:var(--background)}.info-dialog{width:min(580px,100vw - 32px);max-height:calc(100dvh - 48px);box-shadow:var(--shadow);color:var(--text);border:0;border-radius:16px;padding:28px;overflow-y:auto}.info-dialog::backdrop{background:#00000073}.info-dialog{overscroll-behavior:contain}:is(html:has(.info-dialog[open]),body:has(.info-dialog[open])){overflow:hidden}.info-dialog h1{margin-top:0;padding-right:32px;font-size:2.025rem}@media (width<=700px){.info-dialog h1{font-size:1.5rem}.site-menu{top:12px;right:76px}#app:not(.is-authenticated) .site-menu{right:calc(22px + var(--login-width,80px))}#app:not(.is-authenticated) .site-menu-links{right:-64px}}.lesson-filter-group{border:0;border-bottom:1px solid var(--border);min-width:0;margin:18px 0;padding:0 0 8px}.lesson-filter-group legend{color:var(--muted);padding:0;font-weight:600}.lesson-filter-group .instrument-filters,.lesson-filter-group .genre-filters{margin:12px 0}@media (width<=700px){.lesson-filter-group .instrument-filters,.lesson-filter-group .genre-filters{--chip-width:calc((100% - 20px) / 2.5);scrollbar-width:thin;scrollbar-color:var(--accent) transparent;scroll-snap-type:x proximity;flex-wrap:nowrap;padding:4px 0 10px;overflow:auto hidden}.instrument-filters button,.genre-filters button{flex:0 0 var(--chip-width);white-space:nowrap;scroll-snap-align:start;min-width:0;padding:12px 8px;font-size:clamp(.8rem,3vw,1rem)}}@media (width>=400px) and (width<=700px){.lesson-filter-group .instrument-filters,.lesson-filter-group .genre-filters{--chip-width:calc((100% - 30px) / 3.25)}}.download-dialog{box-sizing:border-box;width:min(480px,100vw - 32px);box-shadow:var(--shadow);color:var(--text);border:0;border-radius:16px;padding:28px}.download-dialog::backdrop{background:#00000073}.download-dialog p{margin:0 0 24px;line-height:1.6}.download-dialog button{width:100%;min-height:60px;font-size:1.25rem;font-weight:700}.site-heading{margin-bottom:28px}.site-heading h1{margin:0;font-weight:700}.site-heading p{color:var(--muted);margin:4px 0 0;font-size:1.15rem}.lesson-audio-download{flex-basis:26ch;width:26ch}.lesson-audio-download[aria-busy=true]{color:#194b2a;opacity:1;background:#a5b9aa}
