/*
Design read: free course site for aspiring jazz pianists, record-sleeve language, cobalt on cool paper.
Tokens: paper #EDF0F3 · surface #F8FAFB · ink #15171C · muted #4A515C · line #CDD3DA · cobalt #1F45D6
Type: Bricolage Grotesque (display), Instrument Sans (body), JetBrains Mono (durations, counts)
Signature: an 88-key keyboard; every lesson is one key and lights when you finish it.
Radius rule: buttons and chips are full pill; cards and frames 10px; thumbnails 6px.
*/
:root{
  --bg:#EDF0F3; --surface:#F8FAFB; --ink:#15171C; --muted:#4A515C; --line:#CDD3DA;
  --accent:#1F45D6; --accent-ink:#F8FAFB; --accent-soft:#D9E1FB;
  --white-key:#F8FAFB; --black-key:#1B1E24; --lit:#1F45D6; --lit-black:#3A63F0;
  --shadow:0 1px 2px rgb(21 23 28 / .06), 0 8px 24px rgb(21 23 28 / .06);
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --body:"Instrument Sans", "Avenir Next", "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter:clamp(16px, 4vw, 48px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1218; --surface:#171B23; --ink:#E8ECF1; --muted:#A3ACB8; --line:#2A303B;
    --accent:#86A0FF; --accent-ink:#0F1218; --accent-soft:#1E2A52;
    --white-key:#C9D0DA; --black-key:#0A0C10; --lit:#86A0FF; --lit-black:#5D7BFF;
    --shadow:0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .3);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.82em;letter-spacing:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 14px;border-radius:999px;z-index:20}
.skip:focus{left:12px}
[hidden]{display:none!important}

/* nav */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(10px + env(safe-area-inset-top,0px)) var(--gutter) 10px;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);min-height:60px}
.brand{display:flex;align-items:center;gap:10px;font:800 18px/1 var(--display);color:var(--ink);text-decoration:none;min-height:44px;white-space:nowrap}
.brand-sub{font:500 14px/1 var(--body);color:var(--muted)}
.brand-mark{width:22px;height:22px;border-radius:5px;background:
  linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 7px,var(--ink) 7px 9px,transparent 9px 14px,var(--ink) 14px 16px,transparent 16px),
  linear-gradient(180deg,var(--ink) 0 55%,transparent 55%);background-color:var(--accent);opacity:.95}
.nav nav{display:flex;gap:4px}
.nav nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:10px 14px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.nav nav a:hover{background:var(--surface)}
.nav nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}
@media (max-width:640px){.brand-sub{display:none}.nav nav{gap:0}.nav nav a{padding:10px 8px;font-size:14px}.nav{gap:8px}}
.topic .chip{align-self:flex-start}

main{display:block;min-height:70vh;outline:none}
.wrap{padding-inline:var(--gutter);max-width:1320px;margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;
  font:600 16px/1 var(--body);text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, color .15s ease}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn:not(.primary):hover{background:var(--surface)}
.btn.done{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.linkish{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(28px,5vw,64px) clamp(24px,4vw,40px)}
.hero h1{font-size:clamp(44px,6.4vw,92px);font-weight:800;letter-spacing:-.035em;line-height:.98}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{margin-top:20px;font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:34ch}
.hero .btn-row{margin-top:28px}
.hero-photo{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3.4;background:var(--black-key)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-photo{order:-1;aspect-ratio:16/10}}

/* keyboard */
.kb-block{padding-block:12px 8px}
.kb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.kb-head h2{font-size:clamp(20px,2vw,26px);font-weight:700}
.kb-head .count{color:var(--muted)}
.kb{position:relative;height:clamp(64px,9vw,120px);display:flex;gap:0;user-select:none;border-top:3px solid var(--ink);border-radius:3px 3px 0 0}
.kb .w{flex:1 1 0;min-width:0;background:var(--white-key);border:1px solid var(--line);border-left-width:0;border-top:0;border-radius:0 0 4px 4px;position:relative;display:block;transition:background-color .3s ease}
.kb .b{position:absolute;top:0;height:62%;background:var(--black-key);border-radius:0 0 3px 3px;z-index:2;display:block;transition:background-color .3s ease}
.kb .w.on{background:var(--lit);border-color:var(--lit)}
.kb .b.on{background:var(--lit-black)}
.kb .next{box-shadow:inset 0 -6px 0 var(--accent)}
.kb .b.next{box-shadow:inset 0 -5px 0 var(--accent-soft)}
.kb a:focus-visible{outline-offset:1px;z-index:3}
.kb-legend{margin-top:10px;color:var(--muted);font-size:15px}

/* sections */
.sec{padding-block:clamp(40px,6vw,80px) 0}
.sec > h2{font-size:clamp(30px,3.6vw,48px);font-weight:800;margin-bottom:22px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.sec-head h2{font-size:clamp(30px,3.6vw,48px);font-weight:800}

/* week rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;overscroll-behavior-x:contain}
@media (min-width:1100px){.rail{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
.wk{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:170px;transition:transform .15s ease,border-color .15s ease}
.wk:hover{transform:translateY(-2px);border-color:var(--ink)}
.wk .n{font:800 44px/0.9 var(--display);letter-spacing:-.04em}
.wk .t{font:700 19px/1.15 var(--display)}
.wk .meta{margin-top:auto;display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
.wk.complete{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.wk.complete .meta{color:var(--accent-ink)}
.wk .bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.wk .bar i{display:block;height:100%;background:var(--accent);transform-origin:left}
.wk.complete .bar{background:color-mix(in srgb,var(--accent-ink) 35%,transparent)}
.wk.complete .bar i{background:var(--accent-ink)}

/* topic grid */
.topics{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.topic{grid-column:span 4;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:150px;transition:border-color .15s ease}
.topic:hover{border-color:var(--ink)}
.topic.big{grid-column:span 6;min-height:190px}
.topic h3{font-size:clamp(21px,1.8vw,26px);font-weight:700}
.topic .meta{margin-top:auto;color:var(--muted);font-size:14px;display:flex;gap:12px;flex-wrap:wrap}
.topic .lv{align-self:flex-start}
@media (max-width:900px){.topic,.topic.big{grid-column:span 6}}
@media (max-width:560px){.topic,.topic.big{grid-column:span 12;min-height:0}}

.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font:600 12.5px/1.2 var(--body);border:1px solid var(--line);color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.chip.beginner{border-color:#2E8B57;color:#1F6B42}
.chip.intermediate{border-color:#B7791F;color:#8A5A12}
.chip.advanced{border-color:#B83A3A;color:#962D2D}
@media (prefers-color-scheme:dark){
  .chip.beginner{color:#7BD6A1;border-color:#3E8E62}
  .chip.intermediate{color:#F0C27A;border-color:#9C7330}
  .chip.advanced{color:#F29A9A;border-color:#A54848}
}

/* about */
.about{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(48px,7vw,96px);padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.about img{border-radius:10px;aspect-ratio:3/4;object-fit:cover;width:100%;max-width:380px;filter:grayscale(1)}
.about h2{font-size:clamp(28px,3.2vw,44px);font-weight:800}
.facts{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;font-size:18px}
.facts li{padding-left:18px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--accent)}
.about .btn-row{margin-top:22px}
@media (max-width:760px){.about{grid-template-columns:1fr}.about img{max-width:260px;aspect-ratio:1}}

/* page header */
.ph{padding-block:clamp(28px,4vw,52px) 18px}
.ph .crumb{font-size:15px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ph .crumb a{color:var(--muted)}
.ph h1{font-size:clamp(36px,5vw,68px);font-weight:800;letter-spacing:-.03em;margin-top:10px}
.ph .goal{margin-top:12px;font-size:clamp(18px,1.5vw,21px);color:var(--muted);max-width:52ch}

/* week tabs */
.wtabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin}
.wtabs a{flex:0 0 auto;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font:600 15px/1 var(--mono);padding:0 12px}
.wtabs a.complete{background:var(--accent-soft);border-color:var(--accent)}
.wtabs a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* lesson rows */
.lrows{display:grid;gap:12px;margin-top:8px}
.lrow{display:grid;grid-template-columns:auto 168px minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.lrow.is-done{border-color:var(--accent)}
.lrow .thumb{position:relative;display:block;border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:var(--black-key)}
.lrow .thumb img{width:100%;height:100%;object-fit:cover}
.lrow .thumb .dur{position:absolute;right:6px;bottom:6px;background:rgb(15 18 24 / .85);color:#F1F3F6;padding:2px 6px;border-radius:4px;font:500 12px/1.3 var(--mono)}
.lrow h3{font-size:20px;font-weight:700;line-height:1.2}
.lrow h3 a{color:var(--ink);text-decoration:none}
.lrow h3 a:hover{text-decoration:underline}
.lrow .one{color:var(--muted);margin-top:4px;font-size:16px}
.lrow .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center;color:var(--muted);font-size:14px}
.check{font:inherit;appearance:none;-webkit-appearance:none;width:30px;height:30px;border-radius:999px;border:2px solid var(--line);background:var(--bg);cursor:pointer;display:grid;place-items:center;margin:7px;transition:background-color .15s ease,border-color .15s ease}
.check:hover{border-color:var(--accent)}
.check:checked{background:var(--accent);border-color:var(--accent)}
.check:checked::after{content:"";width:10px;height:6px;border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:translateY(-2px) rotate(-45deg)}
@media (max-width:640px){
  .lrow{grid-template-columns:auto minmax(0,1fr);}
  .lrow .thumb{grid-column:1 / -1;grid-row:1}
  .lrow .check{grid-row:2}
}

.subhead{font:700 clamp(22px,2.2vw,28px)/1.15 var(--display);margin:40px 0 6px}
.subnote{color:var(--muted);margin-bottom:12px}

/* quick hits */
.hits{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,220px);gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.hit{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px}
.hit .frame{border-radius:10px;overflow:hidden;aspect-ratio:9/16;background:var(--black-key);position:relative}
.hit .frame img,.hit .frame iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.hit h4{margin:0;font:600 16px/1.25 var(--body)}
.play{position:absolute;inset:0;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;width:100%;padding:0}
.play span{width:58px;height:58px;border-radius:999px;background:rgb(15 18 24 / .78);display:grid;place-items:center;transition:transform .15s ease}
.play span::after{content:"";border-left:16px solid #F1F3F6;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.play:hover span{transform:scale(1.06)}
.play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play span{position:relative;z-index:1}

/* lesson page */
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(20px,3vw,40px);align-items:start;padding-bottom:24px}
@media (max-width:980px){.lesson{grid-template-columns:1fr}}
.player{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--black-key)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player.vertical{aspect-ratio:9/16;max-width:380px}
.lmeta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;color:var(--muted);font-size:15px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px}
.panel + .panel{margin-top:14px}
.panel h2{font:700 20px/1.2 var(--display);margin-bottom:10px}
.panel ul{margin:0;padding-left:20px;display:grid;gap:8px}
.panel.practice{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}
.panel.practice p{font-size:17px}
.lesson-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:0;grid-column:1}
.lesson>aside{grid-row:span 2}
.pn a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:64px}
.pn a:hover{border-color:var(--ink)}
.pn a small{color:var(--muted);font-size:13px}
.pn a.nxt{text-align:right;grid-column:2}
@media (max-width:560px){.pn{grid-template-columns:1fr}.pn a.nxt{grid-column:1;text-align:left}}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 20px}
.filters a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.filters a[aria-current="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.search{display:flex;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.search label{position:absolute;left:-999px}
.search input{flex:1 1 280px;min-height:48px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:0 18px;font:400 17px var(--body)}
.search input::placeholder{color:var(--muted)}
.empty{padding:28px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);text-align:center}

/* syllabus */
.syl{columns:2 360px;column-gap:40px}
.syl section{break-inside:avoid;margin-bottom:22px}
.syl h2{font:800 22px/1.15 var(--display);display:flex;gap:10px;align-items:baseline}
.syl h2 .mono{color:var(--accent);font-size:15px}
.syl .g{color:var(--muted);font-size:15px;margin:4px 0 6px}
.syl ol{margin:0;padding-left:22px;font-size:15.5px;display:grid;gap:3px}
.syl ol li.done{color:var(--muted)}
.syl ol li.done a{text-decoration:line-through}
.syl a{color:var(--ink)}
@media print{
  .nav,.foot,.no-print,.toast{display:none!important}
  body{background:#fff;color:#111;font-size:11px}
  .wrap{padding:0;max-width:none}
  .ph{padding:0 0 8px}.ph h1{font-size:24px}.ph .goal{font-size:12px}
  .syl{columns:2;column-gap:18px}.syl h2{font-size:13px}.syl .g{font-size:10px;margin:1px 0 2px}.syl ol{font-size:10px;gap:0}.syl section{margin-bottom:8px}
  a{color:#111;text-decoration:none}
  @page{margin:12mm}
}

/* loading skeleton */
.loading{padding:48px var(--gutter);display:grid;gap:14px;max-width:900px}
.sk{background:linear-gradient(90deg,var(--surface),var(--line),var(--surface));background-size:200% 100%;border-radius:8px;height:18px}
.sk-h{height:64px;width:70%}.sk-p.short{width:45%}
@media (prefers-reduced-motion:no-preference){.sk{animation:sh 1.4s linear infinite}@keyframes sh{to{background-position:-200% 0}}}
.err{padding:48px var(--gutter)}

/* footer + toast */
.foot{margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--line);padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px))}
.foot-inner{max-width:1320px;margin-inline:auto;display:grid;gap:8px;color:var(--muted);font-size:15px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font-weight:600;z-index:30;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
.toast button{background:none;border:0;color:var(--bg);text-decoration:underline;font:inherit;cursor:pointer;min-height:32px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}