/* The little music school: storybook paper, one live instrument per idea. Uses book.css tokens. */
.school-body{padding-bottom:40px}
.school-link{text-decoration:none;color:var(--muted);font-size:13px;min-height:48px;display:flex;align-items:center}
.school-layout{max-width:1320px;margin:auto;padding:6px 32px 40px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:34px;align-items:start}
.school-stage{min-width:0;outline:none}
.school-contents{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:6px 4px 20px 0;scrollbar-width:thin}
.school-course{margin-bottom:26px}
.school-course h2{font-size:22px;margin:0 0 6px;display:flex;align-items:baseline;gap:10px}
.school-course h2 span{font:italic 17px var(--serif);color:var(--course)}
.school-course>p{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.school-course ol{list-style:none;margin:0;padding:0;border-left:2px solid color-mix(in srgb,var(--course) 35%,transparent)}
.school-course a{display:flex;gap:10px;align-items:center;min-height:40px;padding:6px 10px;font-size:13px;color:var(--ink);text-decoration:none;border-radius:0 10px 10px 0;margin-left:-2px;border-left:2px solid transparent}
.school-course a span{font:italic 13px var(--serif);color:var(--muted);width:18px;text-align:right}
.school-course a:hover{background:#ecefe2}
.school-course a.current{border-left-color:var(--course);background:color-mix(in srgb,var(--course) 12%,var(--sheet));font-weight:600}
.school-course a.visited:not(.current) span:after{content:'✓';font-style:normal;color:var(--course);margin-left:3px;font-size:10px}

.school-cover{display:grid;grid-template-columns:1fr 1fr;background:var(--sheet);border:1px solid #e5e1d5;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);min-height:460px}
.school-cover-copy{padding:44px 44px 40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.school-cover-copy>p{color:var(--muted);font-size:15px;max-width:390px}
.school-cover-copy .opening-copy{color:var(--ink);font:20px/1.5 var(--serif)}
.school-cover-copy a.primary{text-decoration:none;display:inline-flex}
.school-cover-art{background:radial-gradient(circle at 50% 55%,#fff3d6 0,#e9e2c8 45%,#d9dfc4 100%);display:grid;place-items:center;padding:30px}
.cover-notes{position:relative;width:min(340px,80%);aspect-ratio:1}
.cover-notes span{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:var(--c);color:#fffaf0;display:grid;place-items:center;font:500 18px var(--serif);box-shadow:0 6px 0 color-mix(in srgb,var(--c) 70%,#000 12%);transform:rotate(calc(var(--i)*30deg)) translateY(-135px) rotate(calc(var(--i)*-30deg));animation:note-bob 3.6s ease-in-out calc(var(--i)*-.3s) infinite}
@keyframes note-bob{50%{margin-top:-33px}}

.lesson-page{max-width:880px}
.lesson-head{padding:10px 0 8px}
.lesson-kicker{font-size:12px;color:var(--course);font-weight:600;letter-spacing:.02em;margin-bottom:8px}
.lesson-head h1{font-size:clamp(40px,4.6vw,60px);margin-bottom:14px}
.lesson-lead{font:21px/1.5 var(--serif);letter-spacing:-.02em;max-width:680px}
.lesson-prose{max-width:680px;font-size:16px;line-height:1.75}
.lesson-prose p{margin-bottom:14px}
.lesson-prose h2{font-size:30px;margin:28px 0 12px}
.lesson-prose strong{color:var(--ink)}
.lesson-prose .note-chip{display:inline-block;min-width:26px;padding:0 7px;border-radius:13px;color:#fffaf0;font-weight:600;font-size:13px;text-align:center;line-height:24px}
.lab{margin:18px 0 30px;background:var(--sheet);border:1px solid var(--line);border-radius:20px;padding:24px 26px 22px;box-shadow:0 10px 40px #384a350a}
.lab figcaption{font:500 21px var(--serif);letter-spacing:-.02em;margin-bottom:14px}
.lab-body{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.lab-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lab-row.center{justify-content:center}
.lab-status{font-size:13px;color:var(--muted);margin:2px 0 0;min-height:20px}
.lab-play{align-self:flex-start}
.lab-choices{align-self:stretch}
.lab-choices button{flex:1}
.lab canvas,.lab svg.lab-draw{width:100%;display:block;background:#fffdf6;border:1px solid #ebe6d6;border-radius:14px}
.lab label.slider{display:grid;grid-template-columns:118px minmax(0,1fr) 80px;gap:14px;align-items:center;font-size:13px;font-weight:600}
.lab label.slider output{font-weight:400;color:var(--muted);min-width:72px;text-align:right;font-variant-numeric:tabular-nums}
.lab .big-note{font:500 44px var(--serif);text-align:center;color:var(--course)}

/* Keyboard */
.kb{position:relative;height:150px;display:flex;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.kb-key{position:relative;padding:0;min-height:0;border-radius:0 0 10px 10px;display:flex;align-items:flex-end;justify-content:center;font:600 12px var(--body);transition:background .08s,transform .06s}
.kb-key.white{height:100%;background:#fffdf5;border:1px solid #d8d4c3;border-top:0;color:var(--muted)}
.kb-key.black{position:absolute;top:0;height:60%;z-index:2;background:#33413b;border:1px solid #26312c;color:#e9e6d7;font-size:10px}
.kb-key span{padding-bottom:10px;pointer-events:none}
.kb-key.lit.white{background:color-mix(in srgb,var(--pc) 26%,#fffdf5);color:color-mix(in srgb,var(--pc) 80%,#000)}
.kb-key.lit.black{background:color-mix(in srgb,var(--pc) 75%,#33413b)}
.kb-key.lit:before{content:'';position:absolute;left:50%;bottom:34px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--pc)}
.kb-key.black.lit:before{bottom:24px;background:#fffaf0}
.kb-key.down{background:var(--flash)!important;color:#fffaf0!important;transform:translateY(2px)}
.kb-key:hover{background-color:inherit}

/* Step grid (Ableton-style, in book colours) */
.grid-lab{display:flex;flex-direction:column;gap:12px}
.grid-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.grid-tempo{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;flex:1;min-width:220px}
.grid-tempo input{flex:1}
.grid-tempo output{font-weight:400;color:var(--muted);min-width:64px;font-variant-numeric:tabular-nums}
.grid-rows{display:flex;flex-direction:column;gap:6px;overflow-x:auto;padding-bottom:4px}
.grid-row{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:center}
.grid-label{font-size:12px;font-weight:600;color:var(--row);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid-cells{display:grid;grid-template-columns:repeat(var(--steps),minmax(22px,1fr));gap:4px}
.grid-cell{min-height:40px;padding:0;border-radius:8px;border:1px solid #dcdfd0;background:#f7f5ea;min-width:0}
.grid-cell.odd{background:#eeeee0}
.grid-cell.beat{border-left:2px solid #c9ccb9}
.grid-cell.on{background:var(--row);border-color:color-mix(in srgb,var(--row) 80%,#000);box-shadow:inset 0 -3px 0 #0002}
.grid-cell.now{outline:3px solid var(--gold);outline-offset:-1px}
.grid-cell:disabled{opacity:1;cursor:default}
.grid-cell:hover{filter:brightness(.97)}

.hear-it{margin:36px 0 10px;border-top:1px solid var(--line);padding-top:24px}
.hear-it h2{font-size:26px;margin-bottom:14px}
.hear-it>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hear-it a{display:flex;gap:14px;align-items:center;background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:10px;text-decoration:none;color:var(--ink);min-height:72px}
.hear-it img{width:62px;height:62px;border-radius:12px;object-fit:cover}
.hear-it strong{display:block;font:500 17px var(--serif)}
.hear-it small{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.lesson-turn{display:flex;justify-content:space-between;gap:16px;margin-top:30px;border-top:1px solid var(--line);padding-top:20px}
.lesson-turn a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);font:500 19px var(--serif);min-height:56px;justify-content:center;max-width:48%}
.lesson-turn a small{font:600 11px var(--body);color:var(--course);letter-spacing:.03em;text-transform:uppercase;margin-bottom:3px}
.turn-next{text-align:right;align-items:flex-end}

@media(max-width:1050px){.school-layout{grid-template-columns:1fr;padding:6px 23px 40px}.school-contents{position:fixed;inset:74px 16px auto;max-height:calc(100vh - 110px);z-index:40;background:var(--sheet);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 25px 80px #243e3228;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.school-course{margin:0}}
@media(max-width:820px){.school-contents{grid-template-columns:1fr 1fr}.school-cover{grid-template-columns:1fr}.school-cover-art{min-height:300px}.school-cover-copy{padding:32px}}
@media(max-width:600px){.school-layout{padding:4px 13px 30px}.school-contents{grid-template-columns:1fr;inset:66px 10px auto}.lab{padding:18px 14px;border-radius:16px}.kb{height:120px}.grid-row{grid-template-columns:52px minmax(0,1fr)}.grid-cells{grid-template-columns:repeat(var(--steps),minmax(16px,1fr));gap:3px}.grid-cell{min-height:36px;border-radius:6px}.lesson-prose{font-size:15px}.cover-notes span{transform:rotate(calc(var(--i)*30deg)) translateY(-110px) rotate(calc(var(--i)*-30deg));width:44px;height:44px;margin:-22px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.cover-notes span{animation:none}}
/* On phones, long patterns fold into rows of eight so every cell stays finger-sized. */
@media(max-width:600px){.grid-rows.many .grid-cells{grid-template-columns:repeat(8,minmax(0,1fr));row-gap:5px}.grid-rows.many .grid-cell{min-height:40px}.grid-rows.many .grid-cell:nth-child(8n+1){border-left:2px solid #b5b9a4}}