/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: --theme(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: --theme(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/* Hood Theory — "Practice Paper".
   Warm newsprint, brown-black ink and one spot colour. Vermilion means one thing: you can press and hear it,
   or this is where you are. Titles and Shrey's voice are Young Serif; instructions are Atkinson Hyperlegible Next.
   Both fonts are SIL OFL 1.1 and self-hosted from /public/fonts. */

@font-face{font-family:'Young Serif';src:url('/fonts/young-serif-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Next';src:url('/fonts/atkinson-next-latin-wght.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Young Serif Fallback';src:local('Georgia');size-adjust:107%;ascent-override:88%;descent-override:24%}
@font-face{font-family:'Atkinson Fallback';src:local('Arial');size-adjust:104%;ascent-override:94%}

:root{
 --paper:#f2ecdf;--paper-2:#e8dfcc;--slip:#fbf8f1;
 --ink:#1e1a15;--ink-2:#554b3f;--rule:#cfc4af;
 --red:#e9552a;--red-text:#b2330f;--marker:#f3c9b8;
 --serif:'Young Serif','Young Serif Fallback',Georgia,serif;
 --sans:'Atkinson Next','Atkinson Fallback',Arial,sans-serif;
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
 --gutter:clamp(16px,4vw,48px);
 --frame:76rem;
 --measure:40rem;
 color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:64px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper) var(--grain);color:var(--ink);font-family:var(--sans);font-size:clamp(1.125rem,1.05rem + .35vw,1.1875rem);line-height:1.6;font-synthesis:none;text-rendering:optimizeLegibility;font-variant-numeric:lining-nums}
main{flex:1}
::selection{background:var(--marker);color:var(--ink)}
h1,h2,h3,p,ol,ul,figure,blockquote,dl,dd{margin:0}
h1,h2{font-family:var(--serif);font-weight:400;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.4rem + 3.6vw,4.25rem);line-height:1.05;letter-spacing:-.015em;max-width:18ch}
h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem);line-height:1.15;letter-spacing:-.01em}
h3{font-weight:700;font-size:1.25rem;line-height:1.3}
p{max-width:64ch}
strong,b{font-weight:700}
em,i{font-style:normal;font-weight:700}
a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--ink-2);text-decoration-thickness:1.5px;text-underline-offset:.2em;transition:text-decoration-color .15s,text-decoration-thickness .15s}
a:hover{text-decoration-color:var(--ink);text-decoration-thickness:3px}
button,input,textarea,select{font:inherit;color:inherit}
button,a,summary,label{touch-action:manipulation}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-200px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Type helpers */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,.9rem + 6.4vw,6.25rem);line-height:1;letter-spacing:-.02em;max-width:15ch;text-wrap:balance}
.home .display{max-width:19ch}
.serif{font-family:var(--serif);font-weight:400}
.lead{font-size:clamp(1.2rem,1.1rem + .5vw,1.375rem);line-height:1.5;color:var(--ink-2);max-width:34ch}
.small,.quiet-label,.hint{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.readout{font-weight:600;font-size:.8125rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}
.eyebrow{font-size:.9375rem;font-weight:600;color:var(--ink-2)} /* legacy: sentence case, never a label above a heading */
.num{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums}
kbd{display:inline-block;font:600 .9em/1.25 var(--sans);background:var(--paper-2);border:1px solid var(--ink-2);border-bottom-width:2px;border-radius:3px;padding:1px 6px;margin:0 1px;white-space:nowrap;color:var(--ink)}
.path{font-weight:600}
.path .sep{color:var(--ink-2);font-weight:400;padding:0 .18em}
code{font-family:var(--sans);font-weight:600;background:var(--paper-2);padding:1px 5px;overflow-wrap:anywhere}

/* Frame */
.frame,.masthead,.colophon,.page{width:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--gutter)}
.page{padding-block:clamp(2rem,5vw,4rem) clamp(4rem,9vw,7rem)}
.sheet{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(1.5rem,3vw,2.5rem)}
.sheet>*{grid-column:1/-1;min-width:0}
@media (min-width:600px){
 .sheet{grid-template-columns:[margin-start] 4rem [margin-end text-start] minmax(0,1fr) [text-end fig-start fig-end]}
 .sheet>*{grid-column:text-start/text-end}
 .sheet>.in-margin{grid-column:margin-start/margin-end}
 .sheet>.span-all,.sheet>.fig{grid-column:margin-start/text-end}
}
@media (min-width:1024px){
 .sheet{grid-template-columns:[margin-start] minmax(6rem,8rem) [margin-end text-start] minmax(0,var(--measure)) [text-end fig-start] minmax(12rem,1fr) [fig-end]}
 .sheet>.span-all{grid-column:margin-start/fig-end}
 .sheet>.fig,.sheet>.span-wide{grid-column:text-start/fig-end}
}
.sheet>.sub{display:grid;grid-template-columns:subgrid;grid-column:1/-1}
.sheet>.sub>*{grid-column:1/-1;min-width:0}
@media (min-width:600px){
 .sheet>.sub>*{grid-column:text-start/text-end}
 .sheet>.sub>.in-margin{grid-column:margin-start/margin-end}
 .sheet>.sub>.fig{grid-column:margin-start/text-end}
}
@media (min-width:1024px){.sheet>.sub>.fig,.sheet>.sub>.span-wide{grid-column:text-start/fig-end}}

/* Masthead */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding-block:14px;overflow-x:clip}
.wordmark{display:block;flex-shrink:0;text-decoration:none;padding:6px 0}
.wordmark svg,.wordmark img{width:132px;height:auto}
.top-nav{display:flex;align-items:center;gap:clamp(16px,3vw,28px)}
.top-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-weight:600;font-size:1rem;text-decoration:none;white-space:nowrap}
.top-nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.pen{position:absolute;inset:-4px -14px;width:calc(100% + 28px);max-width:none;height:calc(100% + 8px);overflow:visible;pointer-events:none}
.pen path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:pen .5s ease-out .1s forwards}
@keyframes pen{to{stroke-dashoffset:0}}
@media (max-width:599px){.masthead{min-height:60px}.wordmark svg,.wordmark img{width:112px}}

/* Footer */
.colophon{margin-top:auto;padding-block:28px 40px}
.running{font-family:var(--serif);font-size:1.375rem;line-height:1.3;color:var(--ink);padding-block:clamp(2rem,5vw,3rem) 0}
.colophon-inner{border-top:1px solid var(--rule);padding-top:22px;display:grid;gap:10px}
.colophon-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;font-weight:600}
.colophon-top nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.colophon p{font-size:.9375rem;color:var(--ink-2);max-width:none}
.colophon .set-in{display:flex;align-items:center;gap:10px;font-size:.875rem}
.oo{display:inline-block;width:1.4em;height:.9em;flex-shrink:0;vertical-align:-.05em}
.oo path{fill:currentColor}
.oo .lens{fill:transparent;transition:fill .06s}
.oo.lit .lens,.is-playing .oo .lens{fill:var(--red)}

/* Buttons and links */
.btn,.primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;background:var(--ink);color:var(--paper);font:600 1.0625rem/1.1 var(--sans);border:0;border-radius:0;text-decoration:none;text-align:center;transition:box-shadow .12s,transform .12s}
.btn:hover,.primary:hover{box-shadow:inset 0 -4px 0 var(--red);color:var(--paper);text-decoration:none}
.btn .arr,.primary .arr{display:inline-block;transition:transform .12s}
.btn:hover .arr,.primary:hover .arr{transform:translateX(3px)}
.btn:active,.primary:active{transform:translateY(1px)}
.btn:disabled,.primary:disabled,.play:disabled{background:var(--paper-2);color:var(--ink-2);box-shadow:none;cursor:not-allowed}
.play{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;background:var(--red);color:var(--ink);font:700 1.0625rem/1 var(--sans);border:0;border-radius:0;text-decoration:none}
.play:hover{box-shadow:inset 0 -3px 0 var(--ink)}
.play .tri{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink)}
.play[aria-pressed="true"] .tri,.play.is-on .tri{width:12px;height:12px;border:0;background:var(--ink)}
.secondary,.text-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;background:none;border:0;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--ink);text-underline-offset:.22em}
.secondary:hover,.text-btn:hover{text-decoration-color:var(--red)}
.secondary:disabled,.text-btn:disabled{color:var(--ink-2);text-decoration-color:var(--rule);cursor:not-allowed}
.quiet{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;background:none;border:0;color:var(--ink-2);font-weight:600;text-decoration:none}
.quiet:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.22em}
.quiet:disabled{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}
.back-link{display:inline-flex;min-height:44px;align-items:center;font-weight:600;text-decoration:none;color:var(--ink-2)}
.back-link:hover{color:var(--ink);text-decoration:underline}

/* Notices, no boxes: a rule on the left */
.notice,.form-error,.note-box{border-left:3px solid var(--ink);padding:4px 0 4px 16px;margin:20px 0;font-size:1rem;max-width:64ch}
.form-error{border-color:var(--red);color:var(--red-text);font-weight:600}
.form-error .actions,.notice .actions{margin-top:10px}
.note-box .small{display:block}

/* Forms */
label,.field-label{display:block;font-weight:600;font-size:1rem;margin:22px 0 8px}
input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{display:block;width:100%;max-width:34rem;min-height:52px;padding:10px 14px;background:var(--slip);border:1.5px solid var(--ink-2);border-radius:0;font-size:1.125rem;line-height:1.4}
textarea{min-height:120px;resize:vertical}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--ink);outline-offset:2px}
input[type=checkbox]{appearance:none;flex-shrink:0;width:22px;height:22px;margin:3px 0 0;border:1.5px solid var(--ink-2);background:var(--slip);border-radius:0;display:grid;place-items:center;cursor:pointer}
input[type=checkbox]:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23f2ecdf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--ink)}
input[type=radio]{accent-color:var(--ink);width:20px;height:20px}
.checkbox{display:flex;gap:12px;align-items:flex-start;font-weight:400;margin:14px 0}
fieldset{border:0;padding:0;margin:24px 0 0}
legend{font-weight:600;margin-bottom:8px;padding:0}
.form-status{min-height:1.6em;margin-top:10px;font-size:1rem}

/* Details: "Stuck?" and other drawers */
details{margin-top:18px}
summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:'+';display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--ink-2);font-weight:700;line-height:1}
details[open]>summary::before{content:'−'}
details>:not(summary){margin-top:10px}
details.drawer[open]{background:var(--paper-2);padding:6px 20px 18px;margin-inline:-20px}
@media (max-width:599px){details.drawer[open]{margin-inline:0;padding-inline:16px}}

/* Tracklists: projects, parts, lessons, the Library */
.tracklist{list-style:none;padding:0;margin:0}
.tracklist>li+li{border-top:1px solid var(--rule)}
.tracklist.airy>li+li{border-top:0}
.track{position:relative;display:grid;grid-template-columns:3.25rem minmax(0,max-content) minmax(1.5rem,1fr) minmax(0,max-content);align-items:last baseline;column-gap:14px;padding:18px 0;color:inherit;text-decoration:none}
.track .num{grid-column:1;grid-row:1}.track .t{grid-column:2;grid-row:1}.track .leader{grid-column:3;grid-row:1}.track .note{grid-column:4;grid-row:1}.track .sub{grid-row:2}
.track .num{font-size:1.5rem;line-height:1;color:var(--ink-2)}
.track .t{font-weight:600;font-size:1.1875rem;line-height:1.3;transition:transform .12s;overflow-wrap:anywhere}
.track .leader{align-self:last baseline;height:0;transform:translateY(-.32em);border-bottom:2px dotted var(--ink-2);transition:border-color .12s}
.track .note{display:inline-flex;align-items:baseline;gap:8px;color:var(--ink-2);font-size:1rem;text-align:right;white-space:nowrap}
.track .note .oo{color:var(--ink);align-self:center}
.track .sub{grid-column:2/-1;margin-top:6px;color:var(--ink-2);font-size:1rem;max-width:56ch}
a.track:hover .t,a.track:focus-visible .t{transform:translateX(4px)}
a.track:hover .leader,a.track:focus-visible .leader{border-color:var(--red)}
.track.big .num{font-size:2.5rem}
.track.big .t{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);line-height:1.05}
.track.is-muted .t{color:var(--ink-2)}
.track .tick{position:absolute;top:18px;right:calc(100% + 12px);color:var(--red-text);font-weight:700;line-height:1.3}
@media (max-width:599px){.track .tick{right:auto;left:0;top:auto;bottom:16px}}
.track .has-sound{display:inline-flex;margin-left:8px;vertical-align:middle;color:var(--ink)}
.track[aria-current] .num{position:relative;color:var(--ink)}
.track[aria-current] .num::after{content:'';position:absolute;inset:-.3em -.45em -.2em;border:2px solid var(--red);border-radius:50%;transform:rotate(-4deg);pointer-events:none}
@media (max-width:599px){
 .track{grid-template-columns:2.5rem minmax(0,1fr)}
 .track .leader{display:none}
 .track .note{grid-column:2;grid-row:2;text-align:left;white-space:normal;margin-top:4px}
 .track .sub{grid-column:2;grid-row:3}
 .track.big .num{font-size:1.75rem}
}

/* Home */
.home .cover{position:relative;display:grid;align-content:center;padding-block:clamp(1.5rem,6vh,7rem) 2rem}
@media (min-width:600px){.home .cover{min-height:min(84svh,52rem);padding-bottom:clamp(5rem,14vh,8rem)}}
.hang-quote{font-family:var(--serif);color:var(--red);font-size:clamp(4rem,2rem + 7vw,9rem);line-height:.8;margin-bottom:-.15em}
@media (min-width:1024px){.hang-quote{justify-self:end;margin:0;transform:translate(-.05em,-.02em)}.home .cover .hang-quote{grid-row:1}.home .cover h1{grid-row:1}}
.signed{font-family:var(--serif);font-size:1.5rem;margin-top:22px;padding-left:min(14vw,10rem)}
.listen{margin-top:clamp(2.5rem,6vh,4rem);display:grid;gap:16px;justify-items:start}
.listen-line{display:flex;align-items:baseline;gap:10px;font-size:1rem;color:var(--ink-2);max-width:46ch}
.listen-line .oo{color:var(--ink)}
.readouts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:28px}
@media (min-width:600px){.readouts{position:absolute;left:0;right:0;bottom:28px;margin:0}}
@media (min-width:1024px){.home .cover>.readouts{grid-column:margin-start/fig-end}}
.welcome{font-size:1.0625rem;margin:0 0 28px}
.welcome a{font-weight:600}
.index{padding-block:clamp(2rem,6vw,4rem) 0}
.index h2{margin-bottom:12px}
.ticker{margin:clamp(4rem,10vw,7rem) auto 0;max-width:60rem;text-align:center;text-wrap:balance;line-height:2}

/* First Track landing */
.landing section{padding-block:clamp(3rem,8vw,6rem) 0}
.landing .title{padding-top:clamp(1.5rem,5vw,3.5rem)}
.landing .title .lead{margin-top:18px}
.landing .title .small{margin-top:14px}
.landing h2{margin-bottom:18px}
.needs{list-style:none;padding:0;display:grid;gap:10px;max-width:56ch}
.needs li{padding-left:22px;position:relative}
.needs li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--ink)}
.rules p{font-family:var(--serif);font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem);line-height:1.35;max-width:32ch}
.rules p+p{margin-top:8px}
.rules .by{font-family:var(--sans);font-size:1rem;color:var(--ink-2);margin-top:18px}

/* Course overview */
.jump{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:22px;font-weight:600}
.jump a{min-height:44px;display:inline-flex;align-items:center}
.part{padding-top:clamp(3rem,7vw,5rem)}
.part-num{font-family:var(--serif);font-size:4rem;line-height:.9;color:var(--ink);font-variant-numeric:lining-nums;align-self:baseline}
.part>h2{align-self:baseline}
@media (max-width:599px){.part-num{font-size:2.5rem}}
.part h2{margin-bottom:8px}
.part .finish{color:var(--ink-2);margin-bottom:12px}
.part .finish strong{color:var(--ink)}
.after-list{margin-top:clamp(3rem,7vw,5rem);display:grid;gap:14px}

/* Lesson */
.running-head{position:sticky;top:0;z-index:20;background:var(--paper) var(--grain);border-bottom:1px solid var(--rule)}
.running-head .frame{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;font-size:.9375rem;color:var(--ink-2)}
.running-head .where{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.running-head .where b{color:var(--ink)}
.running-head .count{flex-shrink:0;font-variant-numeric:tabular-nums}
.running-head .progress{position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--p,0) * 100%);background:var(--ink);transition:width .18s}
.lesson-head{padding-top:clamp(2rem,5vw,3.5rem)}
.lesson-head .finish{margin-top:18px;font-size:1.125rem}
.lesson-head .meta{margin-top:10px}
.lesson-head .last-note{font-family:var(--serif);font-size:1.375rem;margin-top:18px}
.hear{margin-top:clamp(2.5rem,6vw,4rem)}
.hear h2{display:flex;align-items:center;gap:12px}
.hear>p{margin-top:8px}
.step{padding-top:4.5rem}
.step+.step,.hear+.step{margin-top:4.5rem;border-top:1px solid var(--rule)}
.step-num{font-family:var(--serif);font-size:3rem;line-height:1;font-variant-numeric:tabular-nums lining-nums;align-self:baseline}
.step>h2{align-self:baseline}
@media (min-width:600px){.step-num,.part-num{justify-self:end}}
.step.is-folded .step-num{font-size:1.6rem}
@media (max-width:599px){.step{padding-top:3rem}.step+.step,.hear+.step{margin-top:3rem}.step-num{font-size:2rem;margin-bottom:6px}}
.step h2{margin-bottom:16px}
.do{list-style:none;padding:0;margin:0;display:grid;gap:4px;max-width:52ch}
.do li{font-size:1.25rem;line-height:1.55}
.do label{display:flex;gap:14px;align-items:flex-start;margin:0;font-weight:400;font-size:inherit;padding:6px 0;cursor:pointer}
.do .n{font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:1.4em}
.prose p+p{margin-top:.9em}
.prose p{font-size:1.1875rem}
.listen-for{margin-top:18px;max-width:52ch}
.listen-for span{background:linear-gradient(transparent 38%,var(--marker) 38%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 3px}
.video{margin-top:26px;border-left:3px solid var(--rule);padding:2px 0 2px 16px;max-width:40rem}
.video .video-title{font-family:var(--serif);font-size:1.3rem;line-height:1.25}
.video .small{margin-top:2px}
.video .actions{margin-top:8px}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;margin-top:14px;background:var(--ink)}
.check{margin-top:28px}
.check .the-check{font-size:1.25rem;max-width:52ch}
.done-mark{margin-top:28px;display:grid;gap:12px;justify-items:start}
.stamp{display:inline-block;border:2px solid var(--red);color:var(--red-text);font:700 .875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;transform:rotate(-3deg);animation:stamp .15s ease-out}
@keyframes stamp{from{transform:rotate(-3deg) scale(.96);opacity:0}}
.next-link{text-wrap:balance;font-family:var(--serif);font-size:1.75rem;line-height:1.2;text-decoration:none;display:inline-block;margin-top:clamp(1.75rem,4vw,2.5rem)}
.next-link:hover{text-decoration:underline;text-decoration-thickness:2px}
.lesson-foot{margin-top:clamp(3rem,7vw,5rem);padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
.lesson-foot a{font-weight:600}
.done-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper) var(--grain);border-top:1px solid var(--rule);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom))}
.done-bar .btn{width:100%}
body.has-done-bar{padding-bottom:84px}
@media (min-width:600px){.done-bar{display:none!important}body.has-done-bar{padding-bottom:0}}

/* Focus mode (play.js): the current step open, earlier ones folded, later ones as titles */
.step.is-folded>:not(.step-num):not(h2):not(.fold-note){display:none}
.step.is-folded h2{font-size:1.4rem;margin:0}
.step.is-folded{padding-top:1.5rem}
.step+.step.is-folded,.step.is-folded+.step{margin-top:1.5rem}
.step .fold-note{color:var(--ink-2);font-size:1rem}
.step h2 button.unfold{all:unset;cursor:pointer}
.step h2 button.unfold:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Reading pages: Library, Privacy, account */
.reading{max-width:calc(64ch + 2 * var(--gutter))}
.reading h2{margin-top:clamp(2.5rem,6vw,3.5rem);margin-bottom:12px}
.reading p+p{margin-top:.9em}
.reading .intro,.intro{margin-top:16px;font-size:clamp(1.2rem,1.1rem + .5vw,1.375rem);line-height:1.5;color:var(--ink-2);max-width:40ch}
.auth-wrap{width:100%;max-width:calc(30rem + 2 * var(--gutter));margin-inline:auto;padding:clamp(2rem,6vw,4rem) var(--gutter) 5rem}
.auth-wrap h1{font-size:clamp(2.25rem,1.6rem + 2.6vw,3.5rem)}
.auth-wrap>p{margin-top:14px}
.auth-form .primary{width:100%;margin-top:28px}
.auth-form input:not([type=checkbox]){max-width:none}
.auth-switch{margin-top:14px}
.account-actions{margin-top:36px;display:grid;gap:10px;justify-items:start}
.account-actions details{width:100%}
.pw-row{position:relative;max-width:34rem}
.pw-row input{padding-right:72px!important}
.pw-row .show{position:absolute;right:6px;top:4px;min-height:44px;padding:0 10px;background:none;border:0;font-weight:600;text-decoration:underline;text-underline-offset:.2em}

/* Small pages */
.small-page{padding-block:clamp(3rem,10vw,7rem)}
.small-page .display{margin-bottom:18px}
.small-page .lead{margin-bottom:28px}
.qe-mark{width:min(60vw,360px);height:auto;color:var(--ink);margin:clamp(2rem,6vw,3rem) 0}

/* Private pages still use a few shared pieces */
.table-scroll{overflow-x:auto;margin-top:12px}
table{border-collapse:collapse;width:100%;font-size:1rem}
th,td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule)}
th{font-weight:600;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-delay:0s!important}
 .pen path{stroke-dashoffset:0}
}
@media print{body{background:#fff}.masthead nav,.colophon,.done-bar,.running-head{display:none!important}}
.step-note{margin-top:14px;color:var(--ink-2);max-width:52ch}
.wav{margin-top:4.5rem;padding-top:4.5rem;border-top:1px solid var(--rule)}
.wav h2{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.wav audio{margin-top:16px;width:100%;max-width:34rem}
.os-choice{margin-top:22px}
.os-choice .checkbox{margin:6px 0}
.wm{display:block;width:132px;height:auto;color:var(--ink)}
.wm .lens{fill:transparent;transition:fill .06s}
.wm.lit .lens,.is-playing .wm .lens{fill:var(--red)}
@media (max-width:599px){.wm{width:112px}}
@media (min-width:1024px){.home .cover>h1,.home .cover>.listen{grid-column:text-start/fig-end}}
/* Signed-in practice */
.practice{max-width:calc(var(--measure) + 2 * var(--gutter))}
.practice-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.practice-home .lead{margin-top:14px}
.practice .last-note{font-family:var(--serif);font-size:1.375rem;margin-top:18px}
.timer-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-bottom:10px}
.step-bars{display:flex;gap:6px;margin-bottom:22px}
.step-bars span{flex:1;max-width:64px;height:3px;background:var(--rule)}
.step-bars span.done{background:var(--ink)}
.practice-step h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem);margin-bottom:18px}
.do.plain li{display:flex;gap:10px;padding:6px 0}
.tutor-section{margin-top:clamp(2.5rem,6vw,3.5rem);padding-top:24px;border-top:1px solid var(--rule)}
.tutor-panel{margin-top:14px}
.tutor-open{font-size:1.5rem;line-height:1.3;margin-bottom:6px}
.answer{border-left:3px solid var(--ink);padding-left:16px;margin:20px 0;white-space:pre-wrap}
.practice-status{margin-top:28px}
.unit-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule)}

/* Review fixes */
.home .index{grid-column:1/-1}
@media (min-width:600px){.home .index{grid-column:text-start/text-end}}
@media (min-width:1024px){.home .index,.span-wide{grid-column:text-start/fig-end}.sheet>.sub>.tracklist{grid-column:text-start/fig-end}}
.ticker .ph{white-space:nowrap}
.has-player .home .cover [data-readout-bar]{visibility:hidden}
html:has(body.has-done-bar){scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
html:has(body.has-player){scroll-padding-bottom:80px}
html:has(body.has-done-bar.has-player){scroll-padding-bottom:calc(160px + env(safe-area-inset-bottom))}
.landing .welcome{margin-top:14px}
.phone-only{margin-top:12px}
@media (min-width:600px){.phone-only{display:none}}
input[type=file]{font-size:1rem;max-width:100%}
input[type=file]::file-selector-button{margin-right:14px;min-height:48px;padding:0 20px;background:var(--ink);color:var(--paper);border:0;border-radius:0;font:600 1rem var(--sans);cursor:pointer}
input[type=file]::file-selector-button:hover{box-shadow:inset 0 -4px 0 var(--red)}
.kbd-mac{display:none;color:var(--ink-2);font-size:.9em}
@media (scripting:none){.kbd-mac{display:inline}}
.step h2 button.unfold{display:inline-flex;align-items:center;min-height:44px}
.colophon-top nav a,.lesson-foot a{display:inline-flex;align-items:center;min-height:44px}
.os-choice .checkbox{min-height:44px;align-items:center}
.small-page .sheet>*{grid-column:1/-1}
@media (min-width:600px){.small-page .sheet>*{grid-column:text-start/text-end}}
@media (min-width:1024px){.small-page .sheet>.display{grid-column:text-start/fig-end}}
.auth{max-width:30rem}
.auth h1{font-size:clamp(2.25rem,1.6rem + 2.6vw,3.5rem)}
.auth>.lead{margin-top:14px}
@media (forced-colors:active){
 input[type=checkbox]{appearance:auto;background:none;width:22px;height:22px}
 .play .tri{forced-color-adjust:none;border-color:transparent transparent transparent ButtonText}
 .play[aria-pressed="true"] .tri,.play.is-on .tri{background:ButtonText}
 .track .leader{border-bottom-color:CanvasText}
}
/* Playable figures ("Fig. n"), the player strip and the few states /public/play.js adds.
   The static diagram comes first: with JS off every cell is drawn and disabled, and the controls stay hidden.
   Vermilion (--red) only ever sits on --slip, --paper or --ink, and every on-state also has an ink ring and aria-pressed. */

/* Fig panel: the slip is the only surface; the caption sits below it on paper */
.fig{--pad:clamp(16px,3vw,28px);margin-top:32px}
.fig-panel{position:relative;background:var(--slip);padding:var(--pad);container-type:inline-size}
.fig-readout{max-width:none;margin:0 0 10px;text-align:right}
.fig-readout [data-fig-count]:not(:empty)::before{content:'\00a0·\00a0'}
.fig figcaption{display:grid;gap:6px;margin-top:12px;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.fig figcaption strong{color:var(--ink);font-weight:700}
.fig figcaption .handoff{font-size:1rem;color:var(--ink)}
@media (max-width:599px){.fig-panel{margin-inline:calc(var(--gutter) * -1);padding-inline:12px}}

/* Cells: a 40px circle inside a 44px target. Off is an ink-2 ring, a suggestion is a vermilion ring,
   on is a vermilion fill with a 2px ink ring, soft is half a dot, and the playhead is a 3px ink ring. */
.fig .cell{position:relative;display:grid;place-items:center;width:var(--cell);height:var(--cell);margin:0;padding:0;background:none;border:0;border-radius:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fig .cell:disabled{cursor:default}
.fig .cell::before{content:'';box-sizing:border-box;width:91%;height:91%;border:1.5px solid var(--ink-2);border-radius:50%;background:transparent;transition:background-color .12s,border-color .12s}
.fig .cell.is-suggest::before{border:2px solid var(--red)}
.fig .cell[aria-pressed=true]::before{border:2px solid var(--ink);background:var(--red)}
.fig .cell[aria-pressed=mixed]::before{border:2px solid var(--ink);background:linear-gradient(0deg,var(--red) 50%,transparent 50%)}
.fig .cell.is-head::before{outline:3px solid var(--ink);outline-offset:2px}
@media (hover:hover){.fig .cell:not(:disabled):hover::before{border-color:var(--ink);border-width:2px}}

/* Steps (Fig. 1): 16 per row in four groups of four, step numbers underneath.
   Wide: the name sits beside the row. Medium: above it. Narrow (phones): each row wraps to 2 × 8, and every
   8-cell line carries its own numbers (the .n spans in each group) so 9 sits right under the ninth cell. */
.fig .steps{--g:clamp(8px,2.2cqi,16px);--cell:min(44px,calc((100cqi - var(--g)) / 8));display:grid;gap:14px}
.fig .srow{display:grid;gap:2px;min-width:0}
.fig .sname{font-weight:600;font-size:1rem;line-height:1.3}
.fig .scells{display:flex;flex-wrap:wrap;gap:10px var(--g);max-width:calc(8 * var(--cell) + var(--g))}
.fig .grp{display:grid;grid-template-columns:repeat(4,var(--cell))}
.fig .grp .n,.fig .snums .grp span{display:block;font-size:.8125rem;line-height:1.4;text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fig .grp .n:nth-of-type(1),.fig .snums .grp span:first-child{color:var(--ink);font-weight:700}
.fig .steps>.snums{display:none;margin-top:-6px}
@container (min-width:640px){
 .fig .steps{--cell:min(44px,calc((100cqi - 3 * var(--g)) / 16));gap:10px}
 .fig .scells{flex-wrap:nowrap;max-width:none}
 .fig .grp .n{display:none}
 .fig .steps>.snums{display:grid}
}
@container (min-width:840px){.fig .srow{grid-template-columns:4.5rem auto;align-items:center;column-gap:12px}}

/* Key strips: white keys in a row, black keys as ink bars (C sits just left of the pair) */
.fig .keys{--n:5;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,calc(var(--n) * 64px));height:clamp(104px,24cqi,136px);border:1.5px solid var(--ink);background:var(--slip)}
.fig .keys .key{position:relative;display:flex;align-items:flex-end;justify-content:center;margin:0;padding:0 0 10px;background:none;border:0;border-left:1.5px solid var(--ink);border-radius:0;color:var(--ink);font:600 .9375rem/1 var(--sans);transition:box-shadow .12s}
.fig .keys .key:first-child{border-left:0}
.fig .keys button.key:disabled{cursor:default}
.fig .keys .key:focus-visible{z-index:1}
.fig .keys .black{position:absolute;top:0;left:calc(var(--x) / var(--n) * 100%);width:calc(56% / var(--n));height:60%;transform:translateX(-50%);background:var(--ink);pointer-events:none}
.fig .keys .key.is-on::after{content:'';position:absolute;left:50%;bottom:30px;box-sizing:border-box;width:16px;height:16px;margin-left:-8px;border:2px solid var(--ink);border-radius:50%;background:var(--red)}
.fig .keys .key.is-lit{box-shadow:inset 0 -5px 0 var(--red)}
@media (hover:hover){.fig .keys button.key:not(:disabled):hover{box-shadow:inset 0 -5px 0 var(--ink)}}
.fig-chords .keys{width:min(100%,32rem)}
.fig-phrase .keys{width:100%}
.fig-line{margin-top:14px;font-size:1rem}

/* Piano roll (Fig. 2): pitch rows by beat columns, one note per column; an empty column is a silent beat.
   --cols comes from the figure (Figure.tsx), so the slip can be cut to the roll. */
.fig-phrase{--cols:8;--rh:1.75rem}
.fig .roll,.fig .bnums{--cell:min(44px,calc((100cqi - var(--rh)) / var(--cols)))}
.fig .roll{display:grid;gap:2px;margin-top:20px}
.fig .rrow,.fig .bnums{display:grid;grid-template-columns:var(--rh) repeat(var(--cols),var(--cell));align-items:center}
.fig .rrow>[role=gridcell]{display:block}
.fig .rname{font-weight:600;font-size:.9375rem}
.fig .roll .cell::before{width:8px;height:8px;border:0;background:var(--ink-2)}
.fig .roll .cell[aria-pressed=true]::before{width:88%;height:60%;border:2px solid var(--ink);border-radius:0;background:var(--red)}
.fig .roll .cell.is-head::before{outline:0}
.fig .roll .cell.is-head[aria-pressed=true]::before{outline:3px solid var(--ink);outline-offset:2px}
.fig .bnums{margin-top:2px;font-size:.8125rem;line-height:1.6;text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fig .bnums .is-head{color:var(--ink);font-weight:700;box-shadow:inset 0 -3px 0 var(--ink)}

/* Phrase and chords: the slip is cut to its instrument (the roll, or the eight-key strip) like a printed plate,
   instead of a wide box with the drawing in one corner. Steps grids already fill theirs. Phones keep the full bleed. */
.fig-phrase .fig-panel{max-width:calc(var(--rh) + var(--cols) * 44px + 2 * var(--pad))}
.fig-chords .fig-panel{max-width:calc(32rem + 2 * var(--pad))}

/* Controls (hidden until play.js runs) */
.fig-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:22px}
.fig-status{min-height:1.5em;font-size:.9375rem;color:var(--ink-2)}
.fig-status:empty{min-height:0}
.fig .pick{display:flex;flex-wrap:wrap;gap:0 18px;margin:0;padding:0;border:0}
.fig .pick label,.fig .pick-box{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;font-weight:600;font-size:1rem;color:var(--ink-2);cursor:pointer}
.fig .pick input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.fig .pick label:has(:checked){color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.fig .pick label:has(:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.fig .pick-box{color:var(--ink)}
.fig .pick-box input{margin:0}

/* Sound state: while a pattern with a kick plays, the oo lens lights on each kick instead of staying lit */
body.is-playing.has-kick .oo:not(.lit) .lens,body.is-playing.has-kick .wm:not(.lit) .lens{fill:transparent}

/* Player strip: ink, fixed to the bottom, only after the first Play */
.player{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:var(--paper);padding-bottom:env(safe-area-inset-bottom,0px);animation:rise .18s ease-out}
.player-in{display:flex;align-items:center;gap:14px;max-width:var(--frame);min-height:48px;margin-inline:auto;padding:2px var(--gutter)}
.pl-stop{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:1.5px solid var(--paper);border-radius:0;color:var(--paper)}
.pl-ico{width:0;height:0;margin-left:3px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
.pl-stop.is-on .pl-ico{width:12px;height:12px;margin:0;border:0;background:currentColor}
.pl-cr{display:grid;min-width:0;max-width:none;line-height:1.25}
.pl-a,.pl-b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pl-a{font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
.pl-b{font-size:.875rem;color:var(--rule)}
.player .pl-ro{flex-shrink:0;margin-left:auto;color:var(--paper)}
.pl-hide{flex-shrink:0;min-height:44px;padding:0 2px;background:none;border:0;color:var(--rule);font-weight:600;font-size:.9375rem;text-decoration:underline;text-underline-offset:.2em}
.pl-hide:hover{color:var(--paper)}
.player :focus-visible{outline-color:var(--paper)}
.pl-head{position:absolute;left:0;top:0;width:100%;height:2px;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--p,0))}
body.has-player{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@media (max-width:599px){
 .player-in{min-height:56px;gap:10px}
 body.has-player{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
 /* The phone's "Done. Next step" bar keeps its place; the strip sits on top of it */
 body.has-done-bar .player{bottom:calc(73px + env(safe-area-inset-bottom,0px));padding-bottom:0}
 body.has-player.has-done-bar{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}

/* After "Hide", focus can land on <main> (tabindex -1): no ring round the whole page */
main[tabindex="-1"]:focus{outline:0}

/* Lesson focus mode: folded titles open on tap; the step that opens fades in */
.step h2 button.unfold[aria-expanded=false]{text-decoration:underline dotted 2px var(--ink-2);text-underline-offset:.22em}
.step h2 button.unfold[aria-expanded=false]:hover{text-decoration:underline solid 2px var(--ink)}
.step h2 button.unfold[aria-disabled=true]{cursor:default}
.step.is-arriving{animation:arrive .18s ease-out}
@keyframes arrive{from{opacity:0}}

/* Video facade: the player loads only after "Play video here" */
.video .btn{margin:16px 24px 0 0}
@media (max-width:399px){.player .pl-ro{display:none}}

/* Windows High Contrast (forced-colors): system colours only, but on, soft and off must still differ.
   The drawings opt out of colour forcing and use CanvasText/Canvas; buttons keep their forced focus rings. */
@media (forced-colors:active){
 .fig .cell::before,.fig .keys .black,.fig .keys .key.is-on::after,.fig .play .tri,.pl-ico,.pl-head{forced-color-adjust:none}
 .fig .cell::before{border-color:CanvasText;background:Canvas}
 .fig .cell.is-suggest::before{border:2px dashed CanvasText}
 .fig .cell[aria-pressed=true]::before{border:2px solid CanvasText;background:CanvasText}
 .fig .cell[aria-pressed=mixed]::before{border:2px solid CanvasText;background:linear-gradient(0deg,CanvasText 50%,Canvas 50%)}
 .fig .cell.is-head::before,.fig .roll .cell.is-head[aria-pressed=true]::before{outline:3px solid Highlight}
 .fig .roll .cell::before{background:CanvasText}
 .fig .roll .cell[aria-pressed=true]::before{background:CanvasText}
 .fig .keys .black,.fig .keys .key.is-on::after{background:CanvasText;border-color:CanvasText}
 .fig .keys .key.is-lit{outline:3px solid Highlight;outline-offset:-6px}
 .fig .bnums .is-head{text-decoration:underline 3px}
 .fig .play .tri,.pl-ico{border-color:transparent transparent transparent ButtonText}
 .fig .play.is-on .tri,.pl-stop.is-on .pl-ico{background:ButtonText}
 .pl-head{background:Highlight}
 .player{border-top:1px solid CanvasText}
}
/* Private SJ studio: Today (one card), the Notebook and Admin. Paper by day; "Lamp off" at night.
   Every SJ page renders <main class="sj" data-lamp="auto|on|off">; an inline script applies the device setting before paint. */

/* SJ pages carry no site footer. On a phone, Today is the whole screen: its own top line replaces the masthead. */
body:has(main.sj) .colophon{display:none}
@media (max-width:599px){body:has(main.sj-today) .masthead{display:none}}

/* Lamp off: warm ink, not black. Follows the system unless the Notebook setting says otherwise. */
html:has(main.sj[data-lamp="off"]){--paper:#1c1915;--paper-2:#27231d;--slip:#221e19;--ink:#ede5d4;--ink-2:#b3a895;--rule:#3d362d;--red:#ff6f42;--red-text:#ff6f42;--marker:#4a2a1e;color-scheme:dark}
html:has(main.sj[data-lamp="off"]) input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%231c1915' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html:has(main.sj[data-lamp="off"]) .wordmark svg{mix-blend-mode:normal}
html:has(main.sj[data-lamp="off"]) .stuck-sheet::backdrop{background:rgb(0 0 0 / .6)}
@media (prefers-color-scheme:dark){
 html:has(main.sj[data-lamp="auto"]){--paper:#1c1915;--paper-2:#27231d;--slip:#221e19;--ink:#ede5d4;--ink-2:#b3a895;--rule:#3d362d;--red:#ff6f42;--red-text:#ff6f42;--marker:#4a2a1e;color-scheme:dark}
 html:has(main.sj[data-lamp="auto"]) input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%231c1915' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
 html:has(main.sj[data-lamp="auto"]) .wordmark svg{mix-blend-mode:normal}
 html:has(main.sj[data-lamp="auto"]) .stuck-sheet::backdrop{background:rgb(0 0 0 / .6)}
}

/* ---- Today ---------------------------------------------------------------- */
main.sj-today{display:flex;flex-direction:column}
.today{display:flex;flex-direction:column;flex:1;width:100%;max-width:calc(34rem + 2 * var(--gutter));margin-inline:auto;padding:clamp(1.25rem,4vw,2.75rem) var(--gutter) 0}
@media (max-width:599px){
 main.sj-today{background:var(--slip);min-height:100svh}
 .today{padding:12px 16px 0}
}
.today-top{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.today-top .where{min-width:0;max-width:none}
.today-top .quiet{flex-shrink:0;font-size:.9375rem}
.working{margin-top:2px;font-size:1rem;line-height:1.5;color:var(--ink-2);max-width:none}
.working b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.working .copy{margin-left:14px;padding-block:0;min-height:44px;vertical-align:middle}
.today .form-error{margin:16px 0 0}
.today-step{margin-top:clamp(1.5rem,6vw,2.75rem);animation:sj-in .18s ease-out}
@keyframes sj-in{from{opacity:0}}

.hint-line{font-weight:600;font-size:1.0625rem;line-height:1.45;border-left:3px solid var(--ink);padding:2px 0 2px 14px;margin-bottom:20px}
.warm{font-size:1rem;line-height:1.5;color:var(--ink-2);margin-bottom:18px}
.warm b{color:var(--ink)}
.warm-actions{display:flex;flex-wrap:wrap;gap:0 20px}
.note-line{font-family:var(--serif);font-size:1.375rem;line-height:1.3;margin-bottom:18px;overflow-wrap:anywhere}

.progress-line{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.9375rem;color:var(--ink-2);font-variant-numeric:tabular-nums;max-width:none}
.progress-line .back{margin-left:auto}
.progress-line .timer{margin-left:auto;font-weight:600;color:var(--ink-2)}
.tick{width:22px;height:22px;flex-shrink:0}
.tick path{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:sj-tick .3s ease-out forwards}
@keyframes sj-tick{to{stroke-dashoffset:0}}

.step-title{font-size:clamp(2rem,8vw,3rem);line-height:1.08;letter-spacing:-.015em;max-width:none;margin-top:2px;overflow-wrap:break-word}
.why{margin-top:14px;font-size:1.125rem;line-height:1.5;color:var(--ink-2);max-width:42ch}
.cue,.action-line{margin-top:18px;font-size:1.25rem;line-height:1.55;max-width:52ch}
.arrow{color:var(--ink-2)}
.clicks-drawer{margin-top:22px}
.clicks-drawer .cue{margin-top:8px}
.clicks{list-style:decimal;margin:12px 0 0;padding-left:1.6em;display:grid;gap:12px;max-width:56ch}
.clicks li{font-size:1.125rem;line-height:1.55;padding-left:4px}
.clicks li::marker{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.short-steps{margin-top:22px}
.counts{margin-top:20px;font-size:1.125rem;max-width:52ch}
.plan-saved{margin-top:24px;margin-bottom:0}
.today .listen-for{margin-top:20px}
.today .video{margin-top:24px}
.today .video .then{margin-top:12px;font-size:1rem}

/* A drum pattern, printed: ink squares are hits, outlined squares are rests, a bar is a held note. */
.pattern{margin-top:22px;background:var(--slip);padding:clamp(14px,3vw,20px);max-width:34rem}
@media (max-width:599px){main.sj-today .pattern{background:var(--paper)}}
.pattern-row{display:grid;grid-template-columns:3.4rem minmax(0,1fr);align-items:center;gap:8px}
.pattern-row+.pattern-row{margin-top:6px}
.pattern-label{font-size:.875rem;font-weight:600;color:var(--ink-2)}
.cells{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}
.cells i{display:block;aspect-ratio:1;border:1.5px solid var(--ink-2)}
.cells i:nth-child(4n+1){border-color:var(--ink)}
.cells i.on{background:var(--ink);border-color:var(--ink)}
.cells i.hold{background:linear-gradient(var(--ink-2),var(--ink-2)) center/100% 36% no-repeat}
.pattern figcaption{margin-top:10px}

.choices{margin-top:22px}
.choices legend{font-size:1.0625rem;margin-bottom:2px}
.choice{padding:4px 0 10px;border-bottom:1px solid var(--rule)}
.choice .checkbox{margin:10px 0 4px;align-items:flex-start}
.choice .checkbox input{margin-top:5px}
.choice .pattern{margin-top:8px}
.done-list{margin-top:18px}
.done-list legend{font-weight:400}
.proof{margin-top:22px}
.proof legend{font-size:1rem}
.today-step>.field-label:first-of-type{margin-top:26px}

.quiet-row{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:30px;padding-top:4px;border-top:1px solid var(--rule)}
.park .field-label{margin-top:8px}
.park .actions{margin-top:14px}
.parked{font-weight:600;margin-top:4px}
.parked:empty{display:none}
.today-status{min-height:1.5em;margin-top:16px;font-size:.9375rem;color:var(--ink-2)}

/* The one primary action: a full-width ink slab that stays in reach. */
.slab-bar{position:sticky;bottom:0;z-index:5;margin-top:22px;padding:12px 0 calc(16px + env(safe-area-inset-bottom));background:var(--paper) var(--grain)}
@media (max-width:599px){.slab-bar{margin-top:auto;background:var(--slip)}}
.slab{width:100%;min-height:60px;font-size:1.125rem}

/* End of a session: saved output, next action, and an optional if-then plan */
.stage-done{margin-top:16px}
.if-then{margin-top:26px}
.if-then-line{font-size:1.25rem;line-height:1.5;max-width:none}
main.sj .if-then-line input:not([type=radio]):not([type=checkbox]){display:inline-block;width:min(100%,15ch);min-height:44px;margin:4px 0;padding:6px 10px;vertical-align:baseline;font-size:1.125rem}
.if-then .small{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}

/* The Stuck sheet: a bottom sheet on --paper-2 */
.stuck-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:min(40rem,100%);max-height:85svh;padding:0;border:0;border-top:3px solid var(--ink);background:var(--paper-2);color:var(--ink);overflow-y:auto;overscroll-behavior:contain}
.stuck-sheet::backdrop{background:rgb(30 26 21 / .45)}
.sheet-body{padding:0 20px calc(24px + env(safe-area-inset-bottom))}
.sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;background:var(--paper-2)}
.sheet-head h2{font-size:1.6rem}
.help{margin-top:12px;font-size:1.0625rem;max-width:60ch}
.stuck-sheet .obstacle .field-label{margin-top:18px}
.stuck-sheet .obstacle .actions{margin-top:12px}

.studio-tutor{margin-top:30px;padding-top:18px;border-top:1px solid var(--rule)}
.studio-tutor h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2}
.tutor-actions{display:grid;justify-items:start;margin-top:8px}
.tutor-choice{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;background:none;border:0;text-align:left;font-weight:600;color:var(--ink-2)}
.tutor-choice::before{content:'';flex-shrink:0;width:16px;height:16px;border:1.5px solid var(--ink-2);border-radius:50%}
.tutor-choice:hover{color:var(--ink)}
.tutor-choice.on{color:var(--ink)}
.tutor-choice.on::before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper-2)}
.tutor-more{margin-top:2px}
.tutor-more>.tutor-actions{margin-top:0}
.studio-tutor .field-label{margin-top:16px}
.tutor-needs{margin-bottom:8px}
.studio-tutor textarea{min-height:96px}
.studio-tutor .answer{margin-top:16px;padding:14px 16px;background:var(--slip);white-space:pre-wrap}
.tutor-sees{margin-top:18px}
.tutor-sees .small+.small{margin-top:8px}

/* ---- Notebook -------------------------------------------------------------- */
.sj-notebook h1,.sj-admin h1{margin-top:4px}
.nb-tabs{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:26px;border-bottom:1px solid var(--rule)}
.nb-tabs [role=tab]{min-height:44px;padding:8px 0;margin-bottom:-1px;background:none;border:0;border-bottom:3px solid transparent;font-weight:600;color:var(--ink-2)}
.nb-tabs [role=tab]:hover{color:var(--ink)}
.nb-tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
.nb-status{min-height:1.5em;margin-top:10px;font-size:.9375rem;color:var(--ink-2)}
.nb-panel{padding-top:4px}
.nb-panel:focus-visible{outline-offset:6px}
.nb-panel h2{margin:14px 0 12px}
.nb-panel h3{margin:36px 0 6px}
.nb-panel>p+p{margin-top:.8em}
.nb-list{list-style:none;padding:0;margin:14px 0 0}
.nb-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--rule)}
.nb-row:last-child{border-bottom:1px solid var(--rule)}
.nb-row.editing{display:block}
.nb-row .quiet{flex-shrink:0;padding-block:0}
.nb-text{min-width:0}
.nb-text p{overflow-wrap:anywhere}
.nb-title{font-weight:600}
.nb-row.resolved .nb-text>p:first-child{color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1px}
.nb-add .field-label{margin-top:12px}
.nb-add .actions{margin-top:12px}
.stages{margin-top:18px}
.stages .track{padding:16px 0 12px}
.stages .track .sub{font-size:1rem}
.sessions{margin:0 0 14px;padding-left:calc(3.25rem + 14px)}
.long-plan{margin:0 0 16px;padding-left:calc(3.25rem + 14px)}
@media (max-width:599px){.sessions,.long-plan{padding-left:calc(2.5rem + 14px)}}
.session-list{list-style:none;padding:0;margin:6px 0 0}
.session-list li{display:grid;grid-template-columns:1.2rem minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;padding:2px 0;font-size:1.0625rem}
.session-list .quiet{padding-block:0}
.s-mark{font-weight:700;color:var(--ink-2)}
.s-mark.done{color:var(--red)}
.session-list .confirm{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.long-plan p,.songs{font-size:1rem;color:var(--ink-2)}
.songs{list-style:decimal;padding-left:1.3em;margin-top:8px;display:grid;gap:6px}
.checked{margin-top:26px}
.lamp{margin-top:34px}
.lamp legend{font-size:1.25rem;font-weight:700}
.lamp .checkbox{margin:4px 0;align-items:center;min-height:44px}
.lamp .checkbox input{margin:0}
.sj-notebook .account-actions{margin-top:8px}
.nb-admin{margin-top:clamp(3rem,8vw,5rem);padding-top:14px;border-top:1px solid var(--rule);font-weight:600}
.nb-admin a{display:inline-flex;align-items:center;min-height:44px}

/* ---- Admin: learners and tutor ------------------------------------------------ */
.sj-admin h2{margin-top:clamp(2.5rem,6vw,3.5rem);margin-bottom:12px}
.sj-admin p+p{margin-top:.9em}
.figures{margin-top:22px}
.track.no-num{grid-template-columns:minmax(0,max-content) minmax(1.5rem,1fr) minmax(0,max-content);padding:14px 0}
.track.no-num .note{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:599px){
 .track.no-num{grid-template-columns:minmax(0,1fr) auto}
 .track.no-num .leader{display:none}
 .track.no-num .note{grid-column:2;margin-top:0;text-align:right}
}
.tutor-settings{margin-top:24px}
.sj-admin .table-scroll{margin-top:16px}