:root {
  color-scheme: light;
  --page: #f6f5ed; --panel: #fff; --surface: #e5eadc; --tint-a: #e5eadc; --tint-b: #e9e5d6; --tint-c: #f0e5d8;
  --ink: #293d2f; --muted: #596550; --accent: #386046; --action: #386046; --action-hover: #294a34; --on-action: #fff;
  --line: #bbc7af; --control-border: #69795f; --selection: #c7d6b9; --success: #346348; --on-success: #fff; --note: #e8e0ba; --on-note: #3f452d;
  --warning: #72530a; --danger: #943743; --info: #2d5871;
  --panel-radius: 32px 8px 32px 8px; --control-radius: 22px 6px 22px 6px; --panel-shadow: 0 18px 35px -25px #293d2f55;
  --body-font: 'Manrope', 'Segoe UI', sans-serif; --display-font: 'DM Serif Display', Georgia, serif; --mono-font: 'JetBrains Mono', Consolas, monospace;
  --feedback: 360ms; --curve: cubic-bezier(.2, 0, 0, 1); --specimen-inset: 24px;
  font-family: var(--body-font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --page: #101d17; --panel: #192b21; --surface: #23392c; --tint-a: #243c2d; --tint-b: #343729; --tint-c: #3e3026;
  --ink: #f3edda; --muted: #b7c9b6; --accent: #abd0a1; --action: #abd0a1; --action-hover: #c6e0be; --on-action: #14291a;
  --line: #425d48; --control-border: #8aab89; --selection: #425d43; --success: #afd4bc; --on-success: #14251a; --note: #d7cd9c; --on-note: #30321d;
  --warning: #e4ca85; --danger: #f0b0b5; --info: #abcbd8; --panel-shadow: 0 20px 45px -24px #00000099;
}
@media (prefers-color-scheme: dark) {
  :root[data-appearance="system"] {
    color-scheme: dark;
    --page: #101d17; --panel: #192b21; --surface: #23392c; --tint-a: #243c2d; --tint-b: #343729; --tint-c: #3e3026;
    --ink: #f3edda; --muted: #b7c9b6; --accent: #abd0a1; --action: #abd0a1; --action-hover: #c6e0be; --on-action: #14291a;
    --line: #425d48; --control-border: #8aab89; --selection: #425d43; --success: #afd4bc; --on-success: #14251a; --note: #d7cd9c; --on-note: #30321d;
    --warning: #e4ca85; --danger: #f0b0b5; --info: #abcbd8; --panel-shadow: 0 20px 45px -24px #00000099;
  }
}
:root[data-density="compact"] { --specimen-inset: 16px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); }
::selection { background: var(--selection); color: var(--ink); }
a { color: var(--ink); text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-skip-ink: auto; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
button:disabled { opacity: .68; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
button, input, select, summary, .button { min-block-size: 44px; }
input, select { width: 100%; min-inline-size: 0; border: 1px solid var(--control-border); border-radius: var(--control-radius); padding: .65rem .9rem; color: var(--ink); background: var(--panel); font-size: 1rem; }
input::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { width: 18px; height: 18px; min-block-size: 18px; margin: 0; accent-color: var(--action); flex-shrink: 0; }
label { font-size: .875rem; font-weight: 600; }
svg { display: block; max-inline-size: 100%; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { line-height: 1.14; font-weight: 400; text-wrap: balance; }
h1, h2, .studio-principles > p:nth-child(2), .note-detail h3, .display-sample { font-family: var(--display-font); }
h2 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); letter-spacing: -.025em; }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.2rem; }
p { text-wrap: pretty; }
em { font-weight: 400; }
section[id], div[id], footer[id] { scroll-margin-block-start: 2rem; }
.container { width: min(100% - 5rem, 1240px); margin-inline: auto; }
.support { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.eyebrow, .small-label { font-size: .8125rem; font-weight: 600; line-height: 1.5; }
.eyebrow { letter-spacing: .075em; text-transform: uppercase; }
.small-label { color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; padding: .6rem 1.1rem; border: 1px solid var(--control-border); border-radius: var(--control-radius); font-size: .875rem; line-height: 1.45; font-weight: 600; text-align: center; text-decoration: none; }
.button.primary { background: var(--action); color: var(--on-action); border-color: var(--action); }
.button.primary:not(:disabled):hover { background: var(--action-hover); border-color: var(--action-hover); text-decoration: none; }
.button.secondary, .keep-button { background: var(--panel); color: var(--ink); }
.button.secondary:not(:disabled):hover, .keep-button:not(:disabled):hover { background: var(--surface); }
.keep-button[aria-pressed="true"] { background: var(--selection); color: var(--ink); border-color: var(--ink); }
.keep-button[aria-pressed="true"]::before { content: '✓'; }
.checkbox-label { display: flex; align-items: center; gap: .75rem; min-block-size: 44px; padding-block: .5rem; }
.field { display: grid; gap: .4rem; min-inline-size: 0; }
.skip-link { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10; padding: .8rem 1.2rem; background: var(--panel); border: 1px solid var(--ink); border-radius: var(--control-radius); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.75rem; }
.atlas-brand { display: inline-flex; align-items: center; gap: .75rem; min-block-size: 44px; font-size: .9rem; font-weight: 650; text-decoration: none; }
.atlas-mark { width: 30px; height: 30px; fill: currentColor; }
.draft-label { font-size: .75rem; color: var(--muted); }
.draft-label span { margin-inline: .45rem; }
.preview-intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; padding-block: 3rem; border-block-start: 1px solid var(--line); }
.preview-intro h1 { font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -.025em; margin-block: .75rem 1rem; }
.intro-description { max-inline-size: 52ch; }
.preview-settings { align-self: center; padding: 1.4rem 1.5rem; background: var(--surface); border-radius: var(--panel-radius); }
.preference-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.preview-settings .support + .support { margin-block-start: .25rem; }
.section-nav { display: flex; flex-wrap: wrap; gap: .7rem 2rem; border-block: 1px solid var(--line); padding-block: .65rem; }
.section-nav a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; font-size: .875rem; text-decoration: none; }
.section-nav a:hover { text-decoration: underline; }
.section-block { margin-block-start: 5.5rem; }
.section-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-end: 2rem; }
.studio-hero { display: grid; grid-template-columns: .95fr 1fr; gap: 4rem; align-items: center; }
.studio-wordmark { font-family: var(--display-font); font-size: 1.55rem; }
.studio-wordmark span { display: block; font-family: var(--body-font); font-size: .75rem; font-weight: 400; margin-block-start: .25rem; color: var(--muted); }
.hero-copy h2 { font-size: clamp(3.4rem, 7.6vw, 6.4rem); line-height: .98; margin-block: 2.2rem 1.8rem; }
.hero-copy h2 em { color: var(--accent); }
.hero-description { max-inline-size: 41ch; font-size: 1.05rem; }
.hero-copy .button { margin-block-start: 1.8rem; }
.fictional-note { margin-block-start: .9rem; }
.landscape-figure { min-inline-size: 0; }
.landscape-art { position: relative; background: var(--tint-b); border-radius: 120px 8px 100px 8px; overflow: hidden; box-shadow: var(--panel-shadow); }
.landscape-art svg { width: 100%; }
.art-sun { fill: var(--page); }
.art-far { fill: var(--tint-a); }
.art-mid { fill: var(--surface); }
.art-near { fill: var(--tint-c); }
.contours { stroke: var(--control-border); stroke-width: 1.5px; opacity: .65; }
.art-stem { stroke: var(--ink); stroke-width: 2px; stroke-linejoin: round; }
.art-coordinate { position: absolute; inset-inline-start: 2rem; inset-block-end: 1.6rem; font-family: var(--mono-font); font-size: .7rem; }
figcaption { font-size: .8125rem; color: var(--muted); margin-block-start: 1rem; max-inline-size: 45ch; }
.studio-principles { display: grid; grid-template-columns: .7fr 1.2fr 1.4fr; gap: 2rem; padding-block: 3.5rem; margin-block-start: 3rem; border-block: 1px solid var(--line); align-items: start; }
.studio-principles > p:nth-child(2) { font-size: clamp(1.8rem, 2.6vw, 2.8rem); line-height: 1.18; }
.studio-principles div p { max-inline-size: 48ch; }
.text-link { display: inline-flex; align-items: center; gap: .8rem; min-block-size: 44px; margin-block-start: .65rem; font-size: .875rem; }
.studio-briefs { margin-block-start: 3.5rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-end: 1.8rem; }
.section-heading h3 { font-family: var(--display-font); font-size: 2rem; }
.brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.brief-card { background: var(--panel); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); overflow: hidden; min-inline-size: 0; }
.brief-art { position: relative; padding: 1.7rem 1rem 1.1rem; background: var(--tint-a); }
.terrace-art { background: var(--tint-c); }
.path-art { background: var(--tint-b); }
.art-index { position: absolute; inset-inline-start: 1.5rem; inset-block-start: 1rem; font-family: var(--mono-font); font-size: .75rem; }
.art-caption { display: block; font-size: .75rem; text-align: end; }
.plan-fill { fill: var(--selection); }
.plan-line { stroke: var(--ink); stroke-width: 1.5px; }
.plan-path { stroke: var(--ink); stroke-width: 9px; stroke-linecap: round; opacity: .7; }
.brief-body { padding: 1.5rem; }
.brief-body h4 { font-family: var(--display-font); font-size: 1.6rem; margin-block: .7rem; }
.brief-body > p:not(.small-label) { font-size: .9375rem; }
.brief-body details { border-block-start: 1px solid var(--line); margin-block-start: 1.2rem; }
summary { display: list-item; padding-block: .8rem; padding-inline-start: .2rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
details p { font-size: .9375rem; padding-block: .3rem .8rem; }
.reading-room { padding-block-start: 3.5rem; border-block-start: 1px solid var(--line); }
.reading-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 4rem; }
.reading-intro p { max-inline-size: 45ch; }
.note-filters { display: grid; grid-template-columns: 1fr 230px auto; gap: 1.2rem; align-items: end; margin-block-start: 2.2rem; padding: 1.5rem; background: var(--surface); border-radius: var(--panel-radius); }
.note-filters button { margin-block-end: 0; }
.reading-meta { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1rem; }
#note-count { font-size: .875rem; font-weight: 600; }
.interaction-status:empty { display: none; }
#reading-status:not(:empty) { padding-block-end: 1rem; }
.reading-grid { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.4fr); gap: 2.5rem; align-items: start; }
.note-index { min-inline-size: 0; }
.note-index > h3 { margin-block-end: 1rem; }
.note-cards { display: grid; gap: 1rem; }
.note-card { padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--panel); }
.note-card[data-selected="true"] { background: var(--selection); border-color: var(--ink); }
.note-card[data-selected="true"] .note-number, .note-card[data-selected="true"] .note-number span, .note-card[data-selected="true"] .note-summary { color: var(--ink); }
.note-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font-family: var(--mono-font); font-size: .75rem; color: var(--muted); }
.note-card[data-selected="true"] .note-number::after { content: 'Reading'; color: var(--ink); font-family: var(--body-font); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.note-number span { font-family: var(--body-font); font-size: .75rem; }
.note-card h4 { font-family: var(--display-font); font-size: 1.6rem; margin-block: .85rem .7rem; }
.note-card h4 a { display: block; min-block-size: 44px; text-decoration: none; }
.note-card h4 a:hover { text-decoration: underline; }
.note-card[data-selected="true"] h4 a { color: var(--ink); text-decoration: underline; }
.note-summary { font-size: .9375rem; color: var(--muted); }
.note-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; margin-block-start: 1rem; }
.read-link { display: inline-flex; align-items: center; gap: .7rem; min-block-size: 44px; font-size: .875rem; }
.keep-button { font-size: .875rem; }
.note-details { min-inline-size: 0; }
.note-detail { padding: 2.5rem; background: var(--panel); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); margin-block-end: 2rem; }
.detail-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.back-button { padding: .5rem .75rem; border: 1px solid var(--control-border); border-radius: var(--control-radius); font-size: .875rem; color: var(--ink); background: var(--panel); }
.back-button:hover { background: var(--surface); }
.note-detail h3 { font-size: clamp(2.1rem, 3.8vw, 3.3rem); letter-spacing: -.025em; margin-block: 1.5rem; }
.note-detail .detail-lead { font-size: 1.1rem; color: var(--muted); }
.note-detail > p { max-inline-size: 65ch; margin-block: 1.4rem; }
.article-art { background: var(--tint-b); border-radius: 22px 6px 22px 6px; margin-block: 1.8rem; }
.note-detail blockquote { font-family: var(--display-font); font-size: 1.6rem; line-height: 1.35; max-inline-size: 28ch; padding-inline-start: 1.2rem; border-inline-start: 2px solid var(--control-border); margin-block: 2rem; }
.detail-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; margin-block-start: 2rem; }
.empty-state { padding: 1.5rem; background: var(--tint-b); border-radius: var(--panel-radius); }
.reading-list { margin-block-start: 2.5rem; background: var(--tint-a); border-radius: var(--panel-radius); padding: 2rem; }
.list-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-block-end: 1rem; }
.list-heading h3 { font-family: var(--display-font); font-size: 2rem; margin-block-start: .5rem; }
#kept-count { display: inline-block; font-family: var(--body-font); font-size: .875rem; color: var(--muted); margin-inline-start: .75rem; }
.list-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.kept-list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.kept-list li { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.2rem; border-block-start: 1px solid var(--line); }
.kept-list h4 { font-family: var(--display-font); font-size: 1.4rem; margin-block: .4rem; }
.kept-list p { font-size: .9375rem; max-inline-size: 65ch; }
.kept-list .button { flex-shrink: 0; }
.sample-tag { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.list-empty { padding-block: 1.5rem .25rem; max-inline-size: 65ch; }
#list-status:not(:empty) { padding-block-start: 1rem; }
.specimen { padding-block-start: 3rem; border-block-start: 1px solid var(--line); }
.specimen-panel { background: var(--panel); border-radius: var(--panel-radius); padding: var(--specimen-inset); box-shadow: var(--panel-shadow); }
.specimen-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-block-end: 2rem; }
.specimen-intro p { max-inline-size: 48ch; }
.specimen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.button-samples { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-end: .75rem; }
.specimen .field { margin-block-start: 1.5rem; }
.specimen .field + .support { margin-block: .5rem; }
.message { padding: 1rem; border-radius: var(--control-radius); margin-block-start: 1rem; font-size: .9375rem; }
.message strong { display: block; }
.message.success { background: var(--success); color: var(--on-success); }
.message.note { background: var(--note); color: var(--on-note); }
.semantic-samples { display: grid; gap: .5rem; margin-block-start: 1.25rem; font-size: .875rem; }
.warning { color: var(--warning); } .danger { color: var(--danger); } .info { color: var(--info); }
.display-sample { font-size: 2.6rem; line-height: 1.2; margin-block: .75rem 1.2rem; }
.type-study > p + p { margin-block-start: 1rem; }
.mono-sample, .mono-value { font-family: var(--mono-font); overflow-wrap: anywhere; }
.mono-sample { font-size: .8125rem; }
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-block-start: 1.5rem; }
.swatch { padding: 2rem .65rem .65rem; border: 1px solid var(--line); border-radius: var(--control-radius); color: var(--ink); font-size: .75rem; }
.swatch-page { background: var(--page); } .swatch-a { background: var(--tint-a); } .swatch-b { background: var(--tint-b); } .swatch-c { background: var(--tint-c); }
.table-wrap { margin-block-start: 2.5rem; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: start; font-size: .875rem; }
caption { text-align: start; margin-block-end: .75rem; font-size: .8125rem; color: var(--muted); }
th, td { border-block-end: 1px solid var(--line); padding: .8rem .5rem; vertical-align: top; overflow-wrap: anywhere; font-weight: 400; }
thead th { background: var(--surface); font-weight: 600; }
th:first-child, td:first-child { padding-inline-start: .8rem; }
.preview-footer { display: grid; grid-template-columns: 1.3fr .8fr; gap: 5rem; padding-block: 3.5rem; margin-block-start: 5.5rem; border-block-start: 1px solid var(--line); }
.preview-footer h2 { font-size: clamp(2.1rem, 4vw, 3.7rem); margin-block: 1rem 1.5rem; }
.preview-footer p:not(.eyebrow) { max-inline-size: 65ch; }
.preview-footer p + p { margin-block-start: 1rem; }
.preview-footer code { font-family: var(--mono-font); font-size: .8125rem; overflow-wrap: anywhere; }
.preview-footer nav { display: grid; align-content: start; gap: .3rem; padding-block-start: .5rem; }
.preview-footer nav a { display: flex; justify-content: space-between; gap: 1rem; min-block-size: 44px; align-items: center; font-size: .875rem; border-block-end: 1px solid var(--line); text-decoration: none; }
.preview-footer nav a:hover { text-decoration: underline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-motion="on"] button, :root[data-motion="on"] input, :root[data-motion="on"] select, :root[data-motion="on"] .button, :root[data-motion="on"] .note-card { transition: color var(--feedback) var(--curve), background-color var(--feedback) var(--curve), border-color var(--feedback) var(--curve); }
}
@media (max-width: 68rem) {
  .container { width: min(100% - 3rem, 1240px); }
  .preview-intro { gap: 2rem; }
  .studio-hero { gap: 2.5rem; }
  .studio-principles { grid-template-columns: .8fr 1.2fr; }
  .studio-principles > .eyebrow { grid-column: 1 / -1; }
  .brief-grid { gap: 1rem; }
  .brief-body { padding: 1.2rem; }
  .reading-grid { gap: 1.5rem; }
  .note-detail { padding: 1.75rem; }
  .note-filters { grid-template-columns: 1fr 190px auto; }
  .preview-footer { gap: 3rem; }
}
@media (max-width: 51rem) {
  .preview-intro, .studio-hero, .reading-intro, .reading-grid, .specimen-intro, .specimen-grid, .preview-footer { grid-template-columns: 1fr; }
  .preview-intro { padding-block: 2rem; }
  .preview-settings { max-inline-size: 35rem; }
  .studio-hero { gap: 2rem; }
  .hero-copy h2 { font-size: clamp(3.4rem, 13vw, 6rem); }
  .landscape-figure { width: min(100%, 540px); justify-self: end; }
  .landscape-art svg { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
  .brief-grid { grid-template-columns: 1fr; }
  .brief-card { display: grid; grid-template-columns: .8fr 1fr; }
  .brief-art { display: flex; flex-direction: column; justify-content: center; }
  .note-filters { grid-template-columns: 1fr 1fr; }
  .note-filters .field:first-child { grid-column: 1 / -1; }
  .reading-intro, .specimen-intro, .specimen-grid { gap: 1.8rem; }
  .note-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .reading-grid { gap: 2rem; }
  .note-detail { max-inline-size: none; }
  .section-block { margin-block-start: 4rem; }
  .preview-footer { margin-block-start: 4rem; }
}
@media (max-width: 35rem) {
  .container { width: calc(100% - 2rem); }
  .preview-header { align-items: start; flex-direction: column; gap: .5rem; padding-block: 1rem; }
  .preview-intro h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .preview-settings { padding: 1.2rem; }
  .preference-fields { grid-template-columns: 1fr; gap: .75rem; }
  .section-nav { gap: .2rem 1.4rem; }
  .section-caption { gap: .5rem; margin-block-end: 1.5rem; }
  .studio-wordmark { font-size: 1.4rem; }
  .studio-principles { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 2rem; margin-block-start: 2rem; }
  .landscape-art { border-radius: 70px 8px 70px 8px; }
  .art-coordinate { inset-inline-start: 1.3rem; inset-block-end: 1.1rem; }
  .brief-card { display: block; }
  .brief-art { padding-inline: 1.5rem; }
  .brief-body { padding: 1.5rem; }
  .reading-room { padding-block-start: 2rem; }
  .note-filters { grid-template-columns: 1fr; padding: 1.2rem; gap: 1rem; }
  .note-filters .field:first-child { grid-column: auto; }
  .note-cards { grid-template-columns: 1fr; }
  .note-card { padding: 1.35rem; }
  .note-detail { padding: 1.5rem; }
  .detail-top { gap: .8rem; }
  .note-detail h3 { font-size: 2.2rem; }
  .note-detail blockquote { font-size: 1.4rem; }
  .reading-list { padding: 1.5rem; }
  .list-heading h3 { font-size: 1.85rem; }
  #kept-count { display: block; margin-inline-start: 0; margin-block-start: .5rem; }
  .list-actions { width: 100%; gap: .75rem; }
  .kept-list li { align-items: start; flex-direction: column; gap: 1rem; }
  .display-sample { font-size: 2.1rem; }
  .palette { grid-template-columns: 1fr 1fr; }
  th, td { padding-inline: .35rem; font-size: .8125rem; }
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .button, input, select, .back-button, .note-card, .message { border: 1px solid ButtonText; }
  .keep-button[aria-pressed="true"], .note-card[data-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}