/* Learning tools share Vibel's semantic palette. No component owns a second
   theme or a second music layer. Page content remains still while reading. */
:root {
  --study-canvas: var(--paper-0, #fff);
  --study-surface: var(--cc-surface, #fff);
  --study-soft: var(--cc-soft, #f6f4f1);
  --study-ink: var(--cc-ink, #1a1613);
  --study-body: var(--ink-2, #302a25);
  --study-muted: var(--cc-muted, #4f4740);
  --study-accent: var(--cc-accent, #9a3412);
  --study-selected: var(--cc-selected, #fff0e6);
  --study-line: var(--cc-line, #dedbd7);
  --study-error: #a32b20;
  --study-success: #216442;
  --study-action-fill: #ef6e27;
  --study-action-ink: #211207;
  --study-radius: 14px;
}
:root[data-theme="dark"] { --study-error: #ffb3a9; --study-success: #a3dcb9; }
.sf-workspace { width: min(100%, 1000px); margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 40px; color: var(--study-body); }
.sf-workspace *, .sf-dialog *, .sf-lesson-tools *, .sf-home-space * { box-sizing: border-box; }
.sf-workspace :is(h1,h2,h3,p,ul,ol), .sf-dialog :is(h2,h3,p), .sf-lesson-tools :is(h2,h3,p) { margin-top: 0; }
.sf-workspace :is(h1,h2,h3), .sf-dialog :is(h2,h3), .sf-lesson-tools :is(h2,h3) { color: var(--study-ink); }
.sf-workspace h1 { font: 600 clamp(36px,5vw,62px)/1.08 var(--font-display, sans-serif); letter-spacing: -.04em; margin-bottom: 14px; }
.sf-workspace h2 { font: 600 clamp(23px,2.5vw,30px)/1.25 var(--font-display, sans-serif); letter-spacing: -.025em; margin-bottom: 12px; }
.sf-workspace h3, .sf-dialog h3 { font: 650 18px/1.4 var(--font-body,sans-serif); margin-bottom: 10px; }
.sf-workspace p, .sf-dialog p, .sf-lesson-tools p { font: 400 15px/1.7 var(--font-body,sans-serif); margin-bottom: 16px; }
.sf-work-head { margin: 25px 0 28px; max-width: 740px; }
.sf-work-head > p { font-size: clamp(17px,2vw,21px); color: var(--study-muted); margin-bottom: 0; }
.sf-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--study-muted); font: 500 13px/1.4 var(--font-body,sans-serif); text-decoration: none; }
.sf-work-nav { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-inline: contain; margin-bottom: 32px; padding: 4px 2px 16px; border-bottom: 1px solid var(--study-line); scrollbar-width: thin; }
.sf-work-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 44px; padding: 10px 14px; border-radius: 12px; color: var(--study-muted); text-decoration: none; font: 600 13px/1.4 var(--font-body,sans-serif); }
.sf-work-nav a[aria-current="page"] { background: var(--study-selected); color: var(--study-accent); }
.sf-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: none; }
.sf-button, .sf-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 10px 14px; border: 1px solid var(--study-line); border-radius: 12px; background: var(--study-surface); color: var(--study-ink); font: 600 13px/1.4 var(--font-body,sans-serif); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-button > span { min-width: 0; }
.sf-button.sf-primary { color: var(--study-action-ink); background: var(--study-action-fill); border-color: var(--study-action-fill); }
.sf-button[aria-pressed="true"] { color: var(--study-accent); border-color: var(--study-accent); background: var(--study-selected); }
.sf-button:disabled { opacity: .5; cursor: not-allowed; }
.sf-icon-button { padding: 10px; width: 44px; flex: none; border-color: transparent; background: var(--study-soft); }
:is(.sf-workspace,.sf-dialog,.sf-lesson-tools,.sf-home-space,.sf-home-links) :is(button,a,input,select,textarea,summary):focus-visible,
.sf-section-tool:focus-visible, .sf-shell-link:focus-visible { outline: 2px solid var(--study-accent); outline-offset: 3px; }
:is(.sf-workspace,.sf-dialog,.sf-lesson-tools,.sf-home-space) [hidden] { display: none !important; }
:is(.sf-workspace,.sf-dialog,.sf-lesson-tools,.sf-home-space) :is(input,select,textarea,button) { font-family: var(--font-body,sans-serif); }
.sf-actions, .sf-note-actions, .sf-state-row, .sf-control-links, .sf-context-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sf-control-links { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--study-line); }
.sf-control-links .sf-button { flex: 1; min-width: 120px; }
.sf-shell-link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; color: var(--ink-2); font: 600 12px/1.4 var(--font-body,sans-serif); text-decoration: none; }
.rail__foot:has(.sf-shell-link) { flex-wrap: wrap; gap: 4px 12px; }
.sf-muted, .sf-workspace .sf-muted, .sf-dialog .sf-muted { color: var(--study-muted); font-size: 12px; line-height: 1.65; }
.sf-error, .sf-workspace .sf-error { color: var(--study-error); }
.sf-success, .sf-workspace .sf-success { color: var(--study-success); }
.sf-work-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--study-line); color: var(--study-muted); font: 400 12px/1.6 var(--font-body,sans-serif); }
.sf-work-foot a { color: var(--study-accent); }
.sf-label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; color: var(--study-ink); font: 600 13px/1.5 var(--font-body,sans-serif); }
.sf-input, .sf-label select, .sf-start select { width: 100%; max-width: 100%; min-height: 46px; padding: 12px; color: var(--study-ink); background: var(--study-surface); border: 1px solid var(--study-line); border-radius: 10px; font: 400 16px/1.5 var(--font-body,sans-serif); accent-color: var(--study-accent); }
textarea.sf-input { resize: vertical; }
.sf-input::placeholder, .sf-search-label input::placeholder { color: var(--study-muted); opacity: 1; }
.sf-input:read-only { background: var(--study-soft); }
.sf-file-label { display: block; }
.sf-file-label input, .sf-label input[type="file"] { width: 100%; font-size: 13px; color: var(--study-muted); }
.sf-check-label { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/1.6 var(--font-body,sans-serif); margin: 12px 0; }
.sf-check-label input { width: 20px; height: 20px; flex: none; accent-color: var(--study-accent); }
.sf-search-label { display: flex; align-items: center; gap: 10px; min-width: 0; border: 1px solid var(--study-line); border-radius: 12px; padding: 0 12px; color: var(--study-muted); background: var(--study-surface); }
.sf-search-label input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 0; border: 0; outline-offset: 1px; background: transparent; color: var(--study-ink); font-size: 16px; }
.sf-notebook-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.sf-notebook-toolbar .sf-search-label { flex: 1; }
.sf-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.sf-filter-row .sf-button { min-height: 44px; padding-inline: 12px; font-size: 12px; }
.sf-note { border-top: 1px solid var(--study-line); padding: 24px 0; }
.sf-note:first-child { margin-top: 12px; }
.sf-note h2 { margin-bottom: 14px; }
.sf-note-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--study-muted); font: 500 11px/1.5 var(--font-body,sans-serif); margin-bottom: 12px; }
.sf-note-meta span { color: var(--study-accent); }
.sf-note blockquote, .sf-source-quote { margin: 16px 0; padding: 4px 0 4px 17px; border-left: 2px solid var(--study-accent); color: var(--study-muted); font: 400 14px/1.7 var(--font-body,sans-serif); overflow-wrap: anywhere; }
.sf-personal-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-source-change { padding: 12px 14px; background: var(--study-selected); border-radius: 10px; color: var(--study-accent); font-size: 12px !important; }
.sf-callout { margin-top: 26px; padding: 20px; border-radius: var(--study-radius); background: var(--study-soft); }
.sf-callout p { margin: 8px 0 14px; color: var(--study-muted); font-size: 13px; }
.sf-empty { padding: 44px 18px; text-align: center; margin: 20px 0; border: 1px dashed var(--study-line); border-radius: 16px; }
.sf-empty > .sf-icon { width: 36px; height: 36px; margin-bottom: 20px; color: var(--study-accent); }
.sf-empty > p { max-width: 540px; margin-inline: auto; color: var(--study-muted); }
.sf-empty .sf-actions { justify-content: center; }
.sf-empty-small { padding: 15px 0; color: var(--study-muted); font-size: 13px; }
.sf-home-space { margin: 8px 0 28px; }
.sf-home-links { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; }
.sf-home-links .sf-button { border-color: transparent; background: transparent; color: var(--study-muted); padding-inline: 9px; font-size: 13px; }
.sf-home-links .sf-icon { color: var(--study-accent); }
.sf-start { border-top: 1px solid var(--study-line); padding: 12px 0; }
.sf-start summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; color: var(--study-ink); font: 500 14px/1.5 var(--font-body,sans-serif); }
.sf-start summary span { color: var(--study-muted); font-size: 12px; }
.sf-start form { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 16px; margin: 18px 0; }
.sf-start label { display: grid; gap: 8px; font: 600 13px/1.5 var(--font-body,sans-serif); }
.sf-start form p { margin: 0; }
.sf-lesson-tools { margin: 22px 0; color: var(--study-body); font-family: var(--font-body,sans-serif); }
.sf-lesson-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.sf-lesson-tabs { display: inline-flex; padding: 4px; border: 1px solid var(--study-line); border-radius: 13px; background: var(--study-soft); }
.sf-lesson-tabs button { border: 0; border-radius: 9px; padding: 8px 12px; min-height: 44px; font: 600 12px/1.4 var(--font-body,sans-serif); color: var(--study-muted); background: transparent; cursor: pointer; }
.sf-lesson-tabs button[aria-pressed="true"] { color: var(--study-accent); background: var(--study-surface); }
.sf-lesson-actions { display: flex; gap: 6px; }
.sf-lesson-actions .sf-button { font-size: 12px; }
.sf-trust { margin: 16px 0 0; border-block: 1px solid var(--study-line); }
.sf-lesson-tools .sf-trust summary { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 48px; padding: 12px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; transform: none; cursor: pointer; color: var(--study-muted); font: 500 13px/1.6 var(--font-body,sans-serif); }
.sf-lesson-tools .sf-trust summary::before { content: none; }
.sf-lesson-tools .sf-trust summary::after { content: '›'; margin-left: auto; font-size: 22px; line-height: 1; }
.sf-lesson-tools .sf-trust details[open] > summary::after, .sf-lesson-tools .sf-trust[open] > summary::after { transform: rotate(90deg); }
.sf-lesson-tools .sf-trust summary:hover { color: var(--study-ink); }
.sf-trust-content { padding-bottom: 12px; }
.sf-trust-content p, .sf-trust-content li { color: var(--study-muted); font-size: 12px; line-height: 1.75; }
.sf-trust-content p { margin-bottom: 8px; }
.sf-trust-content a, .sf-orientation a { color: var(--study-accent); }
.sf-trust-content ul { padding-left: 20px; }
.sf-trust-content a { overflow-wrap: anywhere; }
.sf-orientation { padding: 24px 22px; margin-top: 18px; border-radius: 0 16px 16px 0; border-left: 2px solid var(--study-accent); background: var(--study-soft); }
.sf-orientation h2 { font: 600 24px/1.25 var(--font-display,sans-serif); margin-bottom: 15px; }
.sf-orientation h3 { font: 600 16px/1.5 var(--font-body,sans-serif); margin-top: 20px; }
.sf-orientation p, .sf-orientation li { font-size: 14px; line-height: 1.8; }
.sf-orientation .sf-muted { font-size: 12px; margin-top: 16px; margin-bottom: 0; }
.sf-section-tool { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: 8px; padding: 0; flex: none; background: transparent; color: var(--study-muted); border: 0; border-radius: 12px; cursor: pointer; vertical-align: middle; }
.sf-section-tool .sf-icon { width: 18px; height: 18px; }
.sf-try { min-height: 40px; font-size: 12px; padding: 8px 10px; color: var(--study-accent); }
.reader-code-tools:has(.sf-try) { flex-wrap: wrap; gap: 6px; }
.sf-dialog { width: min(700px,calc(100vw - 32px)); max-width: none; max-height: min(90dvh,900px); padding: 0; border: 1px solid var(--study-line); border-radius: 22px; background: var(--study-surface); color: var(--study-body); box-shadow: 0 24px 90px #0006; overflow: hidden; }
.sf-dialog[open] { display: flex; flex-direction: column; }
.sf-dialog::backdrop { background: #0007; }
.sf-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; padding: 20px 22px; border-bottom: 1px solid var(--study-line); }
.sf-dialog-head h2 { font: 600 22px/1.3 var(--font-display,sans-serif); letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; outline: none; }
.sf-dialog-body { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 24px; }
.sf-dialog-status { flex: none; margin: 0 !important; padding: 10px 22px; border-top: 1px solid var(--study-line); min-height: 35px; color: var(--study-muted); font-size: 12px !important; }
.sf-dialog-status:empty { display: none; }
.sf-dialog :is(details,.sf-help-search) { margin-block: 18px; }
.sf-dialog summary { min-height: 44px; padding: 10px 0; font: 600 13px/1.7 var(--font-body,sans-serif); cursor: pointer; color: var(--study-ink); }
.sf-help-search > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.sf-help-search > div { display: flex; gap: 8px; }
.sf-help-search .sf-input { min-width: 0; flex: 1; }
.sf-concept { padding-block: 20px; border-top: 1px solid var(--study-line); }
.sf-concept-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sf-concept-tabs button { min-height: 44px; padding: 8px 12px; color: var(--study-muted); border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-surface); cursor: pointer; font-size: 12px; }
.sf-concept-tabs button[aria-pressed="true"] { border-color: var(--study-accent); color: var(--study-accent); background: var(--study-selected); }
.sf-source-link { font: 500 12px/1.6 var(--font-body,sans-serif); color: var(--study-accent); }
.sf-example { padding: 14px 16px; background: var(--study-selected); border-radius: 10px; color: var(--study-ink); }
.sf-code-editor.sf-input { min-height: 240px; padding: 16px; resize: vertical; tab-size: 4; white-space: pre; overflow: auto; font: 400 14px/1.75 var(--font-mono,monospace); }
.sf-code-output, .sf-worked-solution pre { min-height: 90px; max-height: 320px; overflow: auto; margin: 16px 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--study-line); border-radius: 12px; background: var(--study-soft); color: var(--study-ink); font: 400 13px/1.65 var(--font-mono,monospace); }
.sf-code-output code, .sf-worked-solution code { background: none; color: inherit; font: inherit; padding: 0; }
.sf-run-status { margin: 12px 0 !important; color: var(--study-muted); font-size: 12px !important; }
.sf-check-result { font-size: 13px !important; color: var(--study-accent); }
.sf-runtime-options { border: 1px solid var(--study-line); border-radius: 12px; padding: 0 14px; background: var(--study-soft); }
.sf-practice-select { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 24px; }
.sf-practice-select label { flex: 1; min-width: 0; margin: 0; }
.sf-practice-intro { border-left: 2px solid var(--study-accent); padding: 2px 0 2px 18px; margin-bottom: 24px; }
.sf-practice-intro p { margin-bottom: 12px; color: var(--study-muted); }
.sf-exercise { border-top: 1px solid var(--study-line); padding: 26px 0; }
.sf-exercise h3 { font: 600 24px/1.3 var(--font-display,sans-serif); letter-spacing: -.02em; }
.sf-exercise-prompt { white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-exercise details { margin-top: 16px; }
.sf-exercise summary { min-height: 44px; cursor: pointer; padding: 10px 0; font-size: 13px; color: var(--study-muted); }
.sf-exercise details > p { padding: 14px 16px; background: var(--study-soft); border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.sf-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; padding: 0; border: 0; }
.sf-choices label { display: flex; align-items: flex-start; gap: 10px; min-height: 50px; padding: 14px; color: var(--study-ink); background: var(--study-surface); border: 1px solid var(--study-line); border-radius: 12px; font: 400 14px/1.5 var(--font-body,sans-serif); cursor: pointer; }
.sf-choices label:has(input:checked) { background: var(--study-selected); border-color: var(--study-accent); }
.sf-choices input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--study-accent); }
.sf-review-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; }
.sf-review-toolbar p { margin: 0; }
.sf-review-card { max-width: 780px; padding: 30px; margin-inline: auto; border-radius: 18px; background: var(--study-soft); border: 1px solid var(--study-line); }
.sf-review-card > h2 { margin-top: 16px; }
.sf-review-card > textarea { margin-bottom: 18px; background: var(--study-surface); }
.sf-review-answer { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--study-line); }
.sf-review-answer .sf-muted { margin-top: 20px; }
.sf-review-ratings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.sf-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 20px 0 36px; }
.sf-preset { min-width: 0; padding: 20px; border-radius: 16px; border: 1px solid var(--study-line); background: var(--study-soft); }
.sf-preset-mark { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--study-line); border-radius: 12px; color: var(--study-accent); background: var(--study-surface); }
.sf-preset h3 { font-family: var(--font-display,sans-serif); font-size: 23px; letter-spacing: -.02em; }
.sf-preset p { color: var(--study-muted); font-size: 12px; }
.sf-preset .sf-button { flex: 1; }
.sf-session-now { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 18px 0 24px; border-bottom: 1px solid var(--study-line); }
.sf-session-now p { margin: 5px 0 0; font-size: 13px; color: var(--study-muted); }
.sf-section-title { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 30px 0 16px; }
.sf-section-title h2 { margin-bottom: 0; }
.sf-sound-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--study-line); min-width: 0; }
.sf-sound-row > div { flex: 1; min-width: 0; }
.sf-sound-row strong { display: block; font-size: 14px; line-height: 1.5; }
.sf-sound-row small { color: var(--study-muted); font-size: 11px; }
.sf-sound-row .sf-button { flex: none; }
.sf-sound-row [data-study-action="play-station"] { border-color: transparent; }
.sf-queue { margin-block: 28px; padding: 22px; border: 1px solid var(--study-line); border-radius: 16px; }
.sf-queue-list { padding-left: 20px; }
.sf-queue-list li { padding-block: 8px; }
.sf-queue-list button { margin-left: 8px; }
.sf-music-saved-link { display: flex; justify-content: space-between; margin: 12px 0 18px; }
.sf-music-saved-link .sf-button { width: 100%; }
.sf-offline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sf-offline-card { min-width: 0; padding: 24px; border: 1px solid var(--study-line); border-radius: 16px; }
.sf-offline-card h2 { font-size: 25px; }
.sf-offline-card p { font-size: 13px; color: var(--study-muted); }
.sf-offline-card label { font-size: 13px; }
.sf-download-form { margin: 32px 0; padding: 24px; border: 1px solid var(--study-line); border-radius: 16px; background: var(--study-soft); }
.sf-download-form progress { width: 100%; height: 10px; accent-color: var(--study-accent); margin: 15px 0; }
.sf-lesson-row.sf-download { padding: 15px 0; border-bottom: 1px solid var(--study-line); }
.sf-lesson-row.sf-download > div:first-child { min-width: 0; flex: 1; }
.sf-data-lab { border-top: 1px solid var(--study-line); margin-top: 28px; padding-top: 28px; }
.sf-data-explorer { padding: 24px; border: 1px solid var(--study-line); border-radius: 16px; background: var(--study-soft); }
.sf-data-explorer input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--study-accent); }
.sf-data-plot { display: block; width: 100%; max-height: 230px; color: var(--study-accent); margin: 18px 0; }
.sf-data-plot text { fill: var(--study-muted); font: 12px var(--font-body,sans-serif); }
.sf-data-plot circle { fill: var(--study-action-fill); stroke: var(--study-ink); stroke-width: 1; }
.sf-plot-axis { stroke: var(--study-muted); stroke-width: 1; }
.sf-lab-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }
.sf-lab-values div { padding-top: 12px; border-top: 1px solid var(--study-line); }
.sf-lab-values strong { display: block; color: var(--study-ink); font: 600 28px/1.25 var(--font-display,sans-serif); margin-top: 8px; font-variant-numeric: tabular-nums; }
.sf-lab-values span { font: 500 12px/1.5 var(--font-body,sans-serif); color: var(--study-muted); }
.sf-design > h2:not(:first-child) { margin-top: 32px; }
.sf-design .sf-state-row { margin-block: 20px; }
.sf-design > details { padding: 12px 0; border-block: 1px solid var(--study-line); margin-block: 20px; }
.sf-design summary { padding: 10px 0; cursor: pointer; }
.sf-toast { position: fixed; left: 50%; bottom: calc(var(--reading-dock-height,60px) + 35px + env(safe-area-inset-bottom,0px)); transform: translateX(-50%); max-width: min(520px,calc(100vw - 28px)); width: max-content; display: flex; align-items: center; gap: 12px; z-index: 95; padding: 12px 16px; background: var(--study-surface); color: var(--study-ink); border: 1px solid var(--study-line); border-radius: 14px; box-shadow: 0 8px 30px #0003; font: 500 13px/1.6 var(--font-body,sans-serif); }
.sf-toast[hidden] { display: none; }
.sf-toast button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; color: var(--study-accent); background: var(--study-selected); font: 600 13px var(--font-body,sans-serif); cursor: pointer; }
.sf-match { color: var(--study-accent); background: var(--study-selected); border-radius: 3px; font-weight: 650; }
.sf-search-commands button { width: 100%; text-align: left; font: 500 14px/1.5 var(--font-body,sans-serif); border: 0; cursor: pointer; }
@media (hover:hover) {
  .sf-button:not(:disabled):hover, .sf-icon-button:hover, .sf-section-tool:hover { color: var(--study-accent); background: var(--study-selected); border-color: var(--study-accent); }
  .sf-button.sf-primary:not(:disabled):hover { color: #211207; background: #ff975a; border-color: #ff975a; }
  .sf-work-nav a:hover, .sf-home-links a:hover { color: var(--study-accent); background: var(--study-soft); }
}
@media (max-width:940px) {
  .sf-workspace { padding-top: 12px; }
  .sf-work-nav { margin-bottom: 24px; }
  .sf-presets { grid-template-columns: 1fr 1fr; }
}
@media (max-width:600px) {
  .sf-work-head { margin-top: 20px; }
  .sf-workspace h1 { font-size: 38px; }
  .sf-work-nav { margin-inline: -4px; padding-inline: 4px; gap: 2px; }
  .sf-work-nav a { padding-inline: 12px; font-size: 12px; }
  .sf-home-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .sf-home-links .sf-button { justify-content: flex-start; padding-inline: 6px; }
  .sf-start form, .sf-offline-grid { grid-template-columns: 1fr; }
  .sf-notebook-toolbar { flex-wrap: wrap; }
  .sf-notebook-toolbar .sf-search-label { flex-basis: 100%; }
  .sf-notebook-toolbar > .sf-button { margin-left: auto; }
  .sf-filter-row { gap: 5px; }
  .sf-filter-row .sf-button { font-size: 11px; padding-inline: 10px; }
  .sf-dialog { position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-height: calc(100dvh - max(12px,env(safe-area-inset-top,0px))); border-radius: 22px 22px 0 0; border-bottom: 0; }
  .sf-dialog-head { padding: 16px; }
  .sf-dialog-head h2 { font-size: 20px; }
  .sf-dialog-body { padding: 20px 18px max(24px,env(safe-area-inset-bottom,0px)); }
  .sf-dialog-status { padding-bottom: max(12px,env(safe-area-inset-bottom,0px)); }
  .sf-help-search > div { flex-wrap: wrap; }
  .sf-help-search .sf-input { flex-basis: 100%; }
  .sf-help-search .sf-button { margin-left: auto; }
  .sf-lesson-row { align-items: flex-start; }
  .sf-lesson-tabs { flex: 1; }
  .sf-lesson-tabs button { flex: 1; padding-inline: 10px; }
  .sf-lesson-actions { flex-basis: 100%; }
  .sf-lesson-actions > * { flex: 1; }
  .sf-choices { grid-template-columns: 1fr; }
  .sf-practice-select { flex-wrap: wrap; }
  .sf-practice-select label { flex-basis: 100%; }
  .sf-review-card { padding: 22px 18px; }
  .sf-review-ratings { grid-template-columns: 1fr; }
  .sf-session-now { flex-wrap: wrap; }
  .sf-session-now > div:first-child { flex-basis: 100%; }
  .sf-presets { grid-template-columns: 1fr; }
  .sf-preset { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; }
  .sf-preset-mark { grid-row: 1/3; grid-column: 2; margin: 0; }
  .sf-preset h3, .sf-preset p { grid-column: 1; }
  .sf-preset > .sf-actions { grid-column: 1/-1; }
  .sf-preset h3 { margin-bottom: 5px; }
  .sf-sound-row { gap: 5px; flex-wrap: wrap; }
  .sf-sound-row > div { flex-basis: calc(100% - 55px); }
  .sf-sound-row > .sf-button { font-size: 11px; padding-inline: 10px; }
  .sf-sound-row > .sf-button:last-child { margin-left: auto; }
  .sf-offline-card, .sf-download-form { padding: 20px 18px; }
  .sf-data-explorer { padding: 20px 16px; }
  .sf-lab-values { gap: 8px; }
  .sf-lab-values strong { font-size: 23px; }
  .sf-queue { padding: 20px 16px; }
  .sf-code-editor.sf-input { font-size: 13px; min-height: 220px; }
}
@media (max-width:360px) {
  .sf-workspace h1 { font-size: 34px; }
  .sf-button { padding-inline: 10px; font-size: 12px; }
  .sf-lesson-tabs button { font-size: 11px; padding-inline: 8px; }
  .sf-lab-values strong { font-size: 21px; }
}
@media (max-height:520px) { .sf-dialog { inset: 8px; margin: auto; max-height: calc(100dvh - 16px); width: min(700px,calc(100vw - 16px)); border-radius: 18px; } }
@media (prefers-reduced-motion:reduce) { :is(.sf-workspace,.sf-dialog,.sf-lesson-tools,.sf-home-space) * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
html[data-motion="off"] :is(.sf-workspace,.sf-dialog,.sf-lesson-tools,.sf-home-space) *, html[data-motion="reduced"] :is(.sf-workspace,.sf-dialog,.sf-lesson-tools,.sf-home-space) * { animation: none !important; transition: none !important; }
@media (forced-colors:active) { .sf-button, .sf-input, .sf-dialog { border-color: ButtonText; } .sf-button[aria-pressed="true"], .sf-work-nav a[aria-current="page"] { outline: 2px solid Highlight; } }
@media print { .sf-dialog, .sf-toast, .sf-work-nav, .sf-section-tool, .sf-lesson-actions, .sf-control-links, .sf-try { display: none !important; } .sf-lesson-tools { break-inside: avoid; } }

.sf-icon-button[aria-pressed="true"] { color: var(--study-accent); background: var(--study-selected); border-color: var(--study-accent); }
.sf-data-plot [data-mean] { stroke: var(--study-accent); stroke-width: 3; }
.sf-data-plot [data-median] { stroke: var(--study-ink); stroke-width: 2; stroke-dasharray: 4 4; }
.sf-trust-content dl { margin: 4px 0 14px; }
.sf-trust-content dl > div { padding-block: 8px; }
.sf-trust-content dt { font: 650 12px/1.5 var(--font-body,sans-serif); color: var(--study-ink); }
.sf-trust-content dd { margin: 4px 0 0; font: 400 12px/1.7 var(--font-body,sans-serif); color: var(--study-muted); }
.sf-download { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--study-line); }
.sf-download > div { flex: 1; min-width: 200px; }
.sf-download h3 { font-size: 17px; margin-bottom: 6px; }
.sf-download p { color: var(--study-muted); font-size: 12px; margin-bottom: 0; }
.sf-exercise > pre { max-height: 280px; overflow: auto; padding: 16px; border: 1px solid var(--study-line); border-radius: 12px; background: var(--study-soft); color: var(--study-ink); font: 400 13px/1.7 var(--font-mono,monospace); }
.sf-music-saved-link { align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--study-line); border-radius: 12px; color: var(--study-accent); font: 600 12px/1.5 var(--font-body,sans-serif); text-decoration: none; }
.sf-music-saved-link span { flex: 1; }
@media(max-width:600px) { .sf-preset > .sf-button { grid-column: 1 / -1; margin-top: 7px; } }

/* One visible content-search entry, distinct from the title-list filter. */
.sf-home-search{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;border:1px solid var(--study-line);border-radius:14px;background:var(--study-surface);color:var(--study-muted);font:500 14px/1.4 var(--font-body);padding:13px 16px;text-align:left;cursor:pointer;margin-bottom:16px;}
.sf-home-search>span{flex:1}.sf-home-search svg{width:20px;height:20px;flex:none}.sf-home-search:focus-visible{outline:2px solid var(--study-accent);outline-offset:3px}.sf-home-search:hover{color:var(--study-ink)}
.home-page[data-returning="true"] .home-hero{padding-top:clamp(28px,5vw,64px)}