/* Reading shell styles adapted from Readest (AGPL-3.0), rebuilt framework-free.
   Ordered cascade layers keep shared rules predictable and let bespoke article
   overrides stay scoped under [data-article='<slug>']. */
@layer reset, tokens, shell, reader, article, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
  }

  button,
  select,
  input {
    font: inherit;
  }

  a {
    color: inherit;
  }

  [hidden] {
    display: none !important;
  }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --reader-bg: #ffffff;
    --reader-surface: #f2f2f2;
    --reader-surface-strong: #dedede;
    --reader-text: #171717;
    --reader-muted: #686868;
    --reader-primary: #0066cc;
    --reader-font-size: 19px;
    --reader-line-height: 1.75;
    --reader-measure: 68ch;
    --reader-margin: 20px;
    --reader-paragraph-margin: 1.1em;
    --reader-letter-spacing: 0em;
    --reader-word-spacing: 0em;
    --reader-font-family: Georgia, serif;
    --chrome-height: 4rem;
    --micro-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@layer shell {
  body {
    background: var(--reader-bg);
    color: var(--reader-text);
  }

  .reader-shell {
    min-height: 100vh;
    transition:
      background-color 180ms ease,
      color 180ms ease;
  }

  .site-chrome {
    position: fixed;
    z-index: 20;
    inset: 0 0 auto;
    display: flex;
    min-height: var(--chrome-height);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem clamp(1rem, 4vw, 4rem);
    border-bottom: 1px solid color-mix(in srgb, var(--reader-text) 15%, transparent);
    background: color-mix(in srgb, var(--reader-bg) 88%, transparent);
    backdrop-filter: blur(14px);
    transition:
      opacity 220ms var(--micro-ease),
      transform 220ms var(--micro-ease);
  }

  .reader-shell[data-focus='true'][data-chrome-visible='false'] .site-chrome,
  .reader-shell[data-focus='true'][data-chrome-visible='false'] .toc-panel,
  .reader-shell[data-focus='true'][data-chrome-visible='false'] .page-counter {
    pointer-events: none;
    opacity: 0;
    transform: translateY(-0.75rem);
  }

  .reader-shell[data-focus='true'][data-chrome-visible='false'] {
    cursor: none;
  }

  .wordmark {
    font: 700 0.72rem/1 ui-monospace, monospace;
    letter-spacing: 0.16em;
    text-decoration: none;
  }

  .chrome-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  button,
  select {
    min-height: 2.25rem;
    border: 1px solid var(--reader-surface-strong);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    background: var(--reader-surface);
    color: var(--reader-text);
    cursor: pointer;
    transition:
      transform 120ms var(--micro-ease),
      background-color 120ms ease,
      border-color 120ms ease,
      box-shadow 120ms ease;
  }

  button:active {
    transform: scale(0.94);
  }

  button:hover,
  button:focus-visible,
  select:focus-visible,
  a:focus-visible,
  input:focus-visible {
    outline: 2px solid var(--reader-primary);
    outline-offset: 2px;
  }

  .reading-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--reader-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ----- Settings: scrim + panel / bottom sheet ----- */
  .settings-scrim {
    position: fixed;
    z-index: 28;
    inset: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 200ms ease;
  }

  .settings-scrim[data-open='true'] {
    opacity: 1;
  }

  .settings-panel {
    position: fixed;
    z-index: 30;
    top: calc(var(--chrome-height) + 0.75rem);
    right: clamp(1rem, 4vw, 4rem);
    display: grid;
    width: min(24rem, calc(100vw - 2rem));
    max-height: calc(100dvh - var(--chrome-height) - 2rem);
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.1rem;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--reader-surface-strong);
    border-radius: 1rem;
    background: var(--reader-bg);
    box-shadow: 0 1rem 3rem color-mix(in srgb, #000 24%, transparent);
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.985);
    transition:
      opacity 200ms var(--micro-ease),
      transform 200ms var(--micro-ease);
  }

  .settings-panel[data-open='true'] {
    opacity: 1;
    transform: none;
  }

  .settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .settings-head strong {
    font-size: 0.95rem;
  }

  .settings-close {
    min-height: 2rem;
    padding: 0.15rem 0.65rem;
    font-size: 1.05rem;
    line-height: 1;
  }

  .settings-section {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem 0 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--reader-text) 10%, transparent);
  }

  .settings-section h3 {
    margin: 0;
    color: var(--reader-muted);
    font: 600 0.68rem/1 ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .settings-label {
    color: var(--reader-text);
    font-size: 0.85rem;
  }

  /* Segmented control */
  .segmented {
    display: inline-flex;
    padding: 0.15rem;
    border: 1px solid var(--reader-surface-strong);
    border-radius: 999px;
    background: var(--reader-surface);
  }

  .segmented button {
    min-height: 1.75rem;
    border: none;
    padding: 0.25rem 0.75rem;
    background: transparent;
    color: var(--reader-muted);
    font-size: 0.8rem;
  }

  .segmented button[aria-pressed='true'] {
    background: var(--reader-bg);
    color: var(--reader-text);
    box-shadow: 0 1px 4px color-mix(in srgb, #000 18%, transparent);
  }

  /* Switch */
  .switch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
  }

  .switch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .switch-track {
    display: block;
    width: 2.4rem;
    height: 1.35rem;
    border: 1px solid var(--reader-surface-strong);
    border-radius: 999px;
    background: var(--reader-surface);
    transition: background-color 160ms ease, border-color 160ms ease;
  }

  .switch-track::after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 0.11rem;
    border-radius: 50%;
    background: var(--reader-muted);
    transition:
      transform 180ms var(--micro-ease),
      background-color 160ms ease;
  }

  .switch input:checked + .switch-track {
    border-color: var(--reader-primary);
    background: color-mix(in srgb, var(--reader-primary) 25%, var(--reader-surface));
  }

  .switch input:checked + .switch-track::after {
    background: var(--reader-primary);
    transform: translateX(1.05rem);
  }

  .switch input:focus-visible + .switch-track {
    outline: 2px solid var(--reader-primary);
    outline-offset: 2px;
  }

  /* Range rows */
  .settings-range {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    align-items: center;
    color: var(--reader-text);
    font-size: 0.85rem;
  }

  .settings-range output {
    color: var(--reader-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
  }

  .settings-range input {
    grid-column: 1 / -1;
    width: 100%;
    accent-color: var(--reader-primary);
  }

  /* Theme swatch grid */
  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
    gap: 0.55rem;
  }

  .swatch {
    display: grid;
    min-height: 0;
    border: none;
    padding: 0;
    background: none;
    place-items: center;
  }

  .swatch:active {
    transform: none;
  }

  .swatch-chip {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid;
    border-radius: 50%;
    font-size: 0.82rem;
    font-family: Georgia, serif;
    place-items: center;
    transition:
      transform 150ms var(--micro-ease),
      box-shadow 150ms var(--micro-ease);
  }

  .swatch:hover .swatch-chip {
    transform: translateY(-2px) scale(1.06);
  }

  .swatch:active .swatch-chip {
    transform: scale(0.92);
  }

  .swatch[data-selected='true'] .swatch-chip {
    box-shadow:
      0 0 0 2px var(--reader-bg),
      0 0 0 4px var(--swatch-ring, var(--reader-primary));
  }

  .settings-advanced {
    border-top: 1px dashed color-mix(in srgb, var(--reader-text) 14%, transparent);
    padding-top: 0.5rem;
  }

  .settings-advanced summary {
    color: var(--reader-muted);
    font-size: 0.8rem;
    cursor: pointer;
  }

  .settings-advanced > * + * {
    margin-top: 0.65rem;
  }

  .settings-reset {
    margin-top: 0.75rem;
    justify-self: start;
    font-size: 0.82rem;
  }

  /* Resume card + toast */
  .resume-card {
    position: fixed;
    z-index: 25;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--reader-surface-strong);
    border-radius: 1rem;
    background: var(--reader-bg);
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, #000 18%, transparent);
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
      opacity 220ms var(--micro-ease),
      transform 220ms var(--micro-ease);
  }

  .resume-card[data-open='true'] {
    opacity: 1;
    transform: none;
  }

  .reader-toast {
    position: fixed;
    z-index: 60;
    bottom: 4.25rem;
    left: 50%;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 0.55rem 1rem;
    border: 1px solid var(--reader-surface-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--reader-bg) 94%, transparent);
    box-shadow: 0 0.5rem 1.6rem color-mix(in srgb, #000 20%, transparent);
    color: var(--reader-muted);
    font-size: 0.8rem;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 0.5rem);
    transition:
      opacity 260ms var(--micro-ease),
      transform 260ms var(--micro-ease);
    pointer-events: none;
  }

  .reader-toast[data-open='true'] {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@layer reader {
  .reading-progress {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    height: 3px;
    background: var(--reader-surface-strong);
  }

  .reading-progress span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--reader-primary);
    transition: transform 140ms linear;
  }

  .toc-panel {
    position: fixed;
    z-index: 10;
    top: calc(var(--chrome-height) + 3rem);
    left: clamp(1rem, 3vw, 3rem);
    width: min(15rem, 20vw);
    color: var(--reader-muted);
    font: 0.8rem/1.4 ui-sans-serif, system-ui, sans-serif;
    transition:
      opacity 220ms var(--micro-ease),
      transform 220ms var(--micro-ease);
  }

  .toc-panel ol {
    display: grid;
    max-height: 60vh;
    gap: 0.1rem;
    margin: 0.75rem 0 0;
    padding: 0;
    overflow: auto;
    list-style: none;
  }

  .toc-panel li[data-level='3'] a {
    padding-left: 1.4rem;
  }

  .toc-panel a {
    display: block;
    padding: 0.2rem 0 0.2rem 0.65rem;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition:
      color 140ms ease,
      border-color 140ms ease;
  }

  .toc-panel a:hover {
    color: var(--reader-text);
  }

  .toc-panel a[aria-current='location'] {
    border-left-color: var(--reader-primary);
    color: var(--reader-primary);
    font-weight: 600;
  }

  /* Auto-scroll pill (scrolled flow only) */
  .auto-scroll-control {
    position: fixed;
    z-index: 25;
    left: 50%;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem;
    border: 1px solid var(--reader-surface-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--reader-bg) 90%, transparent);
    box-shadow: 0 0.5rem 1.8rem color-mix(in srgb, #000 18%, transparent);
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
    transition:
      opacity 200ms ease,
      transform 200ms var(--micro-ease);
  }

  .reader-shell[data-flow='paged'] .auto-scroll-control {
    display: none;
  }

  .reader-shell[data-focus='true'][data-chrome-visible='false'] .auto-scroll-control[data-active='true'] {
    opacity: 0.18;
  }

  .auto-scroll-control[data-active='true'][data-visible='false'] {
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 0.5rem);
  }

  .auto-scroll-control:hover,
  .auto-scroll-control:focus-within {
    pointer-events: auto;
    opacity: 1 !important;
    transform: translateX(-50%);
  }

  .auto-scroll-control input[type='range'] {
    width: 6.5rem;
    accent-color: var(--reader-primary);
  }

  .auto-scroll-control output,
  .auto-scroll-control kbd {
    min-width: 2.9rem;
    text-align: center;
    font: 0.75rem/1 ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
  }

  .auto-scroll-control kbd {
    color: var(--reader-muted);
  }

  /* Middle-click autoscroll anchor (upstream AutoscrollIndicator). */
  .autoscroll-anchor {
    position: fixed;
    z-index: 60;
    width: 26px;
    height: 26px;
    border: 2px solid var(--reader-primary);
    border-radius: 50%;
    background: color-mix(in srgb, var(--reader-primary) 15%, transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .autoscroll-anchor::before,
  .autoscroll-anchor::after {
    content: '';
    position: absolute;
    left: 50%;
    border: 4px solid transparent;
    transform: translateX(-50%);
  }

  .autoscroll-anchor::before {
    top: 3px;
    border-bottom-color: var(--reader-primary);
  }

  .autoscroll-anchor::after {
    bottom: 3px;
    border-top-color: var(--reader-primary);
  }

  /* Paged-mode furniture */
  .reader-shell[data-flow='scroll'] .page-counter,
  .reader-shell[data-flow='scroll'] .page-zone {
    display: none;
  }

  .page-counter {
    position: fixed;
    z-index: 25;
    bottom: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--reader-muted);
    font: 0.75rem/1 ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    transition: opacity 220ms ease;
  }

  .page-zone {
    position: fixed;
    z-index: 15;
    top: var(--chrome-height);
    bottom: 3rem;
    display: grid;
    width: clamp(3rem, 10vw, 6.5rem);
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    place-items: center;
    color: var(--reader-muted);
    font-size: 2.2rem;
    opacity: 0;
    transition: opacity 180ms ease, background-color 180ms ease;
  }

  .page-zone:hover,
  .page-zone:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, var(--reader-text) 4%, transparent);
    outline: none;
  }

  .page-zone:active {
    transform: none;
  }

  .page-zone:active span {
    transform: scale(0.8);
  }

  .page-zone span {
    display: block;
    transition: transform 140ms var(--micro-ease);
  }

  .page-zone[data-dir='prev'] {
    left: 0;
  }

  .page-zone[data-dir='next'] {
    right: 0;
  }

  /* Section flash when navigating via TOC or arrow keys */
  .article h2.section-flash,
  .article h3.section-flash {
    animation: section-flash 900ms var(--micro-ease);
  }

  @keyframes section-flash {
    0% {
      background: color-mix(in srgb, var(--reader-primary) 22%, transparent);
      box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--reader-primary) 22%, transparent);
    }
    100% {
      background: transparent;
      box-shadow: 0 0 0 0.4rem transparent;
    }
  }
}

@layer article {
  main {
    padding: calc(var(--chrome-height) + 4rem) calc(1.25rem + var(--reader-margin)) 9rem;
  }

  .page-viewport {
    display: contents;
  }

  .article {
    width: min(100%, var(--reader-measure));
    margin-inline: auto;
    font-family: var(--reader-font-family);
    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);
    letter-spacing: var(--reader-letter-spacing);
    word-spacing: var(--reader-word-spacing);
    hanging-punctuation: first allow-end;
  }

  /* Font features: kerning, ligatures, oldstyle figures */
  [data-features='true'] .article {
    font-feature-settings:
      'kern' 1,
      'liga' 1,
      'calt' 1,
      'onum' 1;
    font-variant-numeric: oldstyle-nums;
    text-rendering: optimizeLegibility;
  }

  .article-kicker {
    display: flex;
    gap: 0.75rem;
    color: var(--reader-muted);
    font: 0.72rem/1.4 ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .article h1 {
    max-width: 18ch;
    margin: 0.7em 0 0.25em;
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
    text-wrap: balance;
  }

  .article .dek {
    max-width: 42ch;
    margin: 1rem 0 4rem;
    color: var(--reader-muted);
    font-size: 1.12em;
  }

  .article h2,
  .article h3 {
    scroll-margin-top: calc(var(--chrome-height) + 2rem);
    line-height: 1.15;
    text-wrap: balance;
  }

  .article h2 {
    margin-top: 3.2em;
    font-size: 1.75em;
  }

  .article h3 {
    margin-top: 2.4em;
    font-size: 1.25em;
  }

  .article p,
  .article li {
    text-wrap: pretty;
  }

  .article p {
    margin-block: var(--reader-paragraph-margin);
  }

  /* Justification + hyphenation (typesetting attributes set on <body>) */
  [data-justify='true'] .article p,
  [data-justify='true'] .article li {
    text-align: justify;
    text-justify: inter-word;
  }

  [data-hyphenate='true'] .article p,
  [data-hyphenate='true'] .article li {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }

  /* Paragraph style: book-like indents instead of spacing */
  [data-paragraph='indented'] .article p {
    margin-block: 0;
  }

  [data-paragraph='indented'] .article p + p {
    text-indent: 1.6em;
  }

  [data-paragraph='indented'] .article .dek {
    margin: 1rem 0 4rem;
    text-indent: 0;
  }

  /* Drop cap on the first prose paragraph */
  [data-drop-cap='true'] .article p[data-first-paragraph]::first-letter {
    float: left;
    margin: 0.08em 0.12em 0 0;
    color: var(--reader-primary);
    font-size: 3.1em;
    font-weight: 600;
    line-height: 0.82;
  }

  @supports (initial-letter: 3) {
    [data-drop-cap='true'] .article p[data-first-paragraph]::first-letter {
      float: none;
      margin: 0 0.12em 0 0;
      font-size: inherit;
      line-height: inherit;
      initial-letter: 3;
    }
  }

  .article blockquote {
    margin: 2.5em 0;
    padding: 0.25em 0 0.25em 1.25em;
    border-left: 3px solid var(--reader-primary);
    color: var(--reader-muted);
    font-size: 1.15em;
  }

  .article-footer {
    margin-top: 6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--reader-surface-strong);
    color: var(--reader-muted);
    font: 0.82rem/1.5 ui-sans-serif, system-ui, sans-serif;
  }

  .article-footer nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .article-footer nav :last-child {
    text-align: right;
  }

  /* ----- Paged flow: viewport-sized CSS columns sliding horizontally ----- */
  .reader-shell[data-flow='paged'] {
    height: 100dvh;
    overflow: hidden;
  }

  .reader-shell[data-flow='paged'] main {
    height: 100dvh;
    padding: calc(var(--chrome-height) + 1.75rem) calc(1.25rem + var(--reader-margin)) 3.25rem;
    overflow: hidden;
  }

  .reader-shell[data-flow='paged'] .page-viewport {
    position: relative;
    display: block;
    width: min(100%, var(--reader-measure));
    height: 100%;
    margin-inline: auto;
    overflow: hidden;
  }

  .reader-shell[data-flow='paged'] .article {
    position: relative;
    width: auto;
    margin: 0;
    column-fill: auto;
    transition: transform 300ms var(--micro-ease);
  }

  .reader-shell[data-flow='paged'] .article[data-instant='true'] {
    transition: none;
  }

  .reader-shell[data-flow='paged'] .article h1 {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
  }

  .reader-shell[data-flow='paged'] .article h2,
  .reader-shell[data-flow='paged'] .article h3 {
    break-after: avoid;
  }

  .reader-shell[data-flow='paged'] .article blockquote,
  .reader-shell[data-flow='paged'] .article figure {
    break-inside: avoid;
  }

  /* Example of a per-article override that cannot leak to other posts. */
  [data-article='building-the-garden'] blockquote {
    border-left-style: dashed;
  }
}

@layer utilities {
  /* ----- E-ink mode: no motion, no translucency, hard edges ----- */
  html:has(body[data-eink='true']) {
    scroll-behavior: auto;
  }

  .reader-shell[data-eink='true'] *,
  .reader-shell[data-eink='true'] *::before,
  .reader-shell[data-eink='true'] *::after {
    transition: none !important;
    animation: none !important;
  }

  .reader-shell[data-eink='true'] .site-chrome,
  .reader-shell[data-eink='true'] .settings-panel,
  .reader-shell[data-eink='true'] .resume-card,
  .reader-shell[data-eink='true'] .auto-scroll-control,
  .reader-shell[data-eink='true'] .reader-toast {
    background: var(--reader-bg);
    border-color: var(--reader-text);
    box-shadow: none;
    backdrop-filter: none;
  }

  .reader-shell[data-eink='true'] button,
  .reader-shell[data-eink='true'] .segmented {
    border-color: var(--reader-text);
    box-shadow: none;
  }

  .reader-shell[data-eink='true'] .reading-progress span {
    background: var(--reader-text);
  }

  .reader-shell[data-eink='true'] .swatch[data-selected='true'] .swatch-chip {
    box-shadow:
      0 0 0 2px var(--reader-bg),
      0 0 0 4px var(--reader-text);
  }

  /* ----- Tablet ----- */
  @media (max-width: 1100px) {
    .toc-panel {
      width: 13rem;
    }
  }

  @media (max-width: 900px) {
    .toc-panel {
      display: none;
    }

    .settings-panel {
      right: 1rem;
    }
  }

  /* ----- Phone: settings become a bottom sheet ----- */
  @media (max-width: 640px) {
    .auto-scroll-control kbd {
      display: none;
    }

    .counter-time,
    .counter-sep {
      display: none;
    }

    .site-chrome {
      padding-inline: 1rem;
    }

    .chrome-actions {
      gap: 0.4rem;
    }

    .settings-scrim {
      background: color-mix(in srgb, #000 42%, transparent);
    }

    .settings-panel {
      inset: auto 0 0 0;
      width: 100%;
      max-height: 80dvh;
      border-radius: 1.25rem 1.25rem 0 0;
      border-bottom: none;
      padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
      transform: translateY(100%);
    }

    .settings-panel[data-open='true'] {
      transform: translateY(0);
    }

    .swatch-grid {
      grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    }

    .swatch-chip {
      width: 2.85rem;
      height: 2.85rem;
    }

    .resume-card {
      right: 0.5rem;
      bottom: 4.75rem;
      left: 0.5rem;
      flex-wrap: wrap;
    }

    .page-zone {
      width: 3.25rem;
      font-size: 1.8rem;
    }
  }

  @media (max-width: 420px) {
    .auto-scroll-control input[type='range'] {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }
}