.notes-hero { background: linear-gradient(145deg, var(--paper, #f6f4ef) 0%, color-mix(in srgb, var(--gold, #b38a2e) 8%, var(--paper, #f6f4ef)) 100%); }
.notes-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.notes-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.notes-stat-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.notes-stat-panel div { padding: 1.2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.notes-stat-panel div:nth-child(2n) { border-right: 0; }
.notes-stat-panel div:nth-last-child(-n+2) { border-bottom: 0; }
.notes-stat-panel strong { display: block; font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1; color: var(--red); }
.notes-stat-panel span { display: block; margin-top: .35rem; color: var(--muted); font-size: .82rem; }
.notes-purpose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.notes-purpose-grid article { background: var(--surface); padding: 1.4rem; }
.notes-purpose-grid span { color: var(--gold-dark); font: 700 .76rem/1 var(--font-mono); }
.notes-purpose-grid h3 { margin: .8rem 0 .45rem; font-size: 1.05rem; }
.notes-purpose-grid p { margin: 0; color: var(--muted); font-size: .91rem; }
.notes-controls { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(145px, 1fr)) auto; gap: .7rem; align-items: end; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.notes-controls label { display: grid; gap: .34rem; font-size: .75rem; font-weight: 700; color: var(--muted); }
.notes-controls input, .notes-controls select { min-height: 43px; width: 100%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); padding: .65rem .72rem; font: inherit; }
.notes-controls input:focus, .notes-controls select:focus { outline: 3px solid color-mix(in srgb, var(--gold) 28%, transparent); border-color: var(--gold-dark); }
.notes-library-status { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem .1rem; color: var(--muted); font-size: .84rem; }
.notes-library-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 1rem; align-items: start; }
.notes-volume-panel { position: sticky; top: 88px; max-height: calc(100vh - 105px); overflow: hidden; border: 1px solid var(--line); background: var(--surface); display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.notes-volume-panel header, .notes-browser-head { padding: 1rem; border-bottom: 1px solid var(--line); }
.notes-volume-panel header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.notes-volume-panel header h3, .notes-browser-head h2 { margin: 0; }
.notes-volume-panel header span { color: var(--muted); font-size: .76rem; }
.notes-volume-search { padding: .65rem; border-bottom: 1px solid var(--line); }
.notes-volume-search input { width: 100%; min-height: 40px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: .55rem .65rem; }
.notes-volume-list { overflow: auto; padding: .35rem; }
.notes-volume-item { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .55rem; text-align: left; border: 0; border-bottom: 1px solid var(--line-soft, var(--line)); background: transparent; color: inherit; padding: .7rem .6rem; cursor: pointer; }
.notes-volume-item:hover, .notes-volume-item.is-current { background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.notes-volume-item > span:first-child { color: var(--red); font: 700 .72rem/1.5 var(--font-mono); }
.notes-volume-item strong { display: block; font-size: .82rem; line-height: 1.28; }
.notes-volume-item small { display: block; margin-top: .22rem; color: var(--muted); font-size: .7rem; }
.notes-browser-panel { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.notes-breadcrumbs { display: flex; gap: .42rem; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .77rem; margin-bottom: .6rem; }
.notes-breadcrumbs a { text-decoration: none; color: var(--red); }
.notes-browser-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.notes-browser-head p { margin: .5rem 0 0; color: var(--muted); max-width: 72ch; }
.notes-browser-head code { display: inline-block; margin-bottom: .35rem; color: var(--gold-dark); font-size: .75rem; }
.notes-results-scroll { overflow-x: auto; }
.notes-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.notes-table th { text-align: left; padding: .72rem .8rem; background: var(--paper); color: var(--muted); border-bottom: 1px solid var(--line); font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.notes-table td { padding: .78rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.notes-table tbody tr:last-child td { border-bottom: 0; }
.notes-row:hover { background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
.notes-row.is-unwritten, .notes-row.is-draft { color: color-mix(in srgb, var(--ink) 55%, var(--surface)); background: color-mix(in srgb, var(--muted) 3%, var(--surface)); }
.notes-address-cell code { color: var(--red); font-size: .72rem; white-space: nowrap; }
.notes-title-cell > a, .notes-title-cell > button, .notes-disabled-title { display: block; color: inherit; text-align: left; text-decoration: none; }
.notes-title-cell > button { border: 0; padding: 0; background: none; cursor: pointer; width: 100%; }
.notes-title-cell strong { display: block; font-size: .92rem; line-height: 1.3; }
.notes-title-cell small { display: block; margin-top: .25rem; color: var(--muted); font-size: .72rem; max-width: 65ch; }
.notes-disabled-title { cursor: not-allowed; opacity: .75; }
.notes-state { display: inline-flex; align-items: center; min-height: 25px; padding: .25rem .55rem; border: 1px solid var(--line); font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .035em; white-space: nowrap; }
.notes-state.is-published { color: #1d643c; border-color: color-mix(in srgb, #1d643c 40%, var(--line)); background: color-mix(in srgb, #1d643c 8%, var(--surface)); }
.notes-state.is-unwritten, .notes-state.is-draft { color: var(--muted); background: var(--paper); }
.notes-state.is-category { color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--surface)); }
.notes-count-cell strong, .notes-count-cell small { display: block; white-space: nowrap; }
.notes-count-cell strong { font-size: .78rem; }
.notes-count-cell small { margin-top: .2rem; color: var(--muted); font-size: .68rem; }
.notes-open-control { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: .4rem .7rem; text-decoration: none; font: 700 .72rem/1 var(--font-body); cursor: pointer; }
.notes-open-control:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.notes-open-control:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.notes-browser-footer { display: flex; justify-content: center; padding: 1rem; border-top: 1px solid var(--line); }
.notes-empty { margin: 1rem; }
.notes-volume-empty { padding: 1rem; color: var(--muted); }
/* Allow the note reader to fit narrow windows with a non-overlay scrollbar. */
html:has(> body[data-page="note"]) { min-width: 0; }
.note-reading-progress-track { position: fixed; z-index: 120; inset: 0 0 auto; height: 3px; background: transparent; }
.note-reading-progress { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--red); }
.note-hero { padding-bottom: 2.2rem; }
.note-header { max-width: 930px; }
.note-kicker { display: flex; gap: .75rem; flex-wrap: wrap; color: var(--muted); font-size: .78rem; margin-bottom: 1rem; }
.note-kicker code { color: var(--red); }
.note-header h1 { max-width: 22ch; }
.note-header .lead { max-width: 70ch; }
.note-byline { margin-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.note-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.note-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.note-article { min-width: 0; }
.note-article img[src$="/rounding-nearest.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/rationals-between-subdivision.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/comparing-positive-rationals.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/fraction-decimal-percent-conversions.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/equivalent-fractions.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/rational-three-names.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/magnitude-factor-ladder.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/converting-expanded-standard.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/expanded-place-value.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/positive-powers-of-ten.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/place-value-natural-numbers.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/unique-prime-factorisation.svg"] { display: block; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/products-of-prime-powers.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/hcf-lcm-prime-counts.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/reasonableness-check-path.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/exact-and-approximate-values.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/adding-fractions-number-line.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/terminating-decimal-operations.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-article img[src$="/order-of-operations-rational.svg"] { display: block; width: 100%; max-width: 420px; margin-inline: auto; }
.note-path-card { margin-bottom: 1.4rem; padding: 1rem 1.15rem; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.note-path-card span { display: block; color: var(--muted); font-size: .73rem; text-transform: uppercase; letter-spacing: .05em; }
.note-path-card strong { display: block; margin-top: .35rem; font-size: .92rem; }
.note-aside { position: sticky; top: 94px; display: grid; gap: 1rem; }
.note-aside-card { border: 1px solid var(--line); background: var(--surface); padding: 1rem; }
.note-aside-card > strong { display: block; margin-bottom: .7rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.note-toc { display: grid; }
.note-toc a { padding: .4rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .77rem; }
.note-toc a.is-h3 { padding-left: .75rem; color: var(--muted); }
.note-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.note-tags span { padding: .3rem .5rem; background: var(--paper); border: 1px solid var(--line); font-size: .68rem; }
.note-series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.note-series-nav a { display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--line); text-decoration: none; color: inherit; }
.note-series-nav a.is-next { text-align: right; }
.note-series-nav span { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.note-keyboard-nav { display: flex; justify-content: center; gap: .8rem 1.2rem; flex-wrap: wrap; margin: .8rem 0 0; color: var(--muted); font-size: .72rem; }
.note-keyboard-nav span { display: inline-flex; align-items: center; gap: .38rem; }
.note-keyboard-nav kbd { min-width: 1.7rem; padding: .18rem .35rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .7rem/1 var(--font-mono); text-align: center; box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent); }
.related-notes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.related-notes-grid > a { display: grid; align-content: start; gap: .45rem; min-height: 160px; padding: 1rem; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; }
.related-notes-grid > a span { color: var(--red); font: 700 .7rem/1.4 var(--font-mono); }
.related-notes-grid > a small { color: var(--muted); }
.note-unavailable { min-height: 360px; align-content: center; justify-items: start; }
@media (max-width: 1180px) {
  .notes-controls { grid-template-columns: minmax(240px, 2fr) repeat(2, 1fr); }
  .notes-controls .notes-clear-button { align-self: stretch; }
  .related-notes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .notes-hero-grid, .note-layout { grid-template-columns: 1fr; }
  .notes-purpose-grid { grid-template-columns: repeat(2, 1fr); }
  .notes-library-layout { grid-template-columns: 1fr; }
  .notes-volume-panel { position: static; max-height: 330px; }
  .note-aside { position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .notes-stat-panel, .notes-purpose-grid, .notes-controls, .note-aside, .related-notes-grid, .note-series-nav { grid-template-columns: 1fr; }
  .notes-stat-panel div { border-right: 0; }
  .notes-stat-panel div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .notes-stat-panel div:last-child { border-bottom: 0; }
  .notes-library-status, .note-byline { align-items: flex-start; flex-direction: column; }
  .notes-browser-title-row { flex-direction: column; }
}
@media print {
  .notes-controls, .notes-volume-panel, .notes-library-status, .note-actions, .note-aside, .note-series-nav, .related-notes-section, .note-reading-progress-track { display: none !important; }
  .notes-library-layout, .note-layout { display: block; }
  .notes-browser-panel { border: 0; }
}