:root {
  color-scheme: light;
  --paper: #f3f0e7;
  --surface: #fffdf7;
  --surface-muted: #e9ede6;
  --ink: #172521;
  --muted: #65716c;
  --line: #d5dbd3;
  --accent: #176b63;
  --accent-strong: #0f514b;
  --accent-soft: #dcebe6;
  --danger: #a13f35;
  --danger-soft: #f7e4df;
  --warning: #8b6418;
  --warning-soft: #f4ead1;
  --success: #2d6b45;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(34, 48, 43, 0.08);
  --header-height: 64px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid rgba(23, 107, 99, 0.28);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  color: white;
  background: var(--ink);
  border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

.app-header {
  position: sticky;
  z-index: 40;
  top: 0;
  height: calc(var(--header-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--line);
  background: rgba(243, 240, 231, .96);
}

.header-inner {
  width: min(1440px, 100%);
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: "Songti SC", "STSong", serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.brand-copy { display: grid; line-height: 1.05; }
.brand-name {
  font-family: "Iowan Old Style", "Songti SC", "STSong", serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.brand-tagline { margin-top: .23rem; color: var(--muted); font-size: .68rem; }

.top-nav, .guest-nav { display: flex; align-items: center; gap: .25rem; }
.nav-link, .nav-button {
  min-height: 40px;
  padding: .6rem .85rem;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}
.nav-link:hover, .nav-button:hover, .nav-link[aria-current="page"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.app-main {
  min-height: calc(100svh - var(--header-height) - env(safe-area-inset-top));
  animation: page-enter .24s ease-out both;
}

.page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2.5rem) 1rem calc(5.8rem + env(safe-area-inset-bottom));
}

.page-narrow { width: min(620px, 100%); }
.page-heading { margin-bottom: 1.5rem; }
.eyebrow {
  margin: 0 0 .55rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, .display-title {
  margin-bottom: .55rem;
  font-family: "Iowan Old Style", "Songti SC", "STSong", serif;
  font-size: clamp(2rem, 6vw, 3.35rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -.035em;
}
h2 { margin-bottom: .75rem; font-size: 1.18rem; }
h3 { margin-bottom: .5rem; font-size: 1rem; }
.lead { max-width: 48rem; color: var(--muted); line-height: 1.7; }
.fine-print { color: var(--muted); font-size: .78rem; line-height: 1.6; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel-body { padding: clamp(1rem, 3vw, 1.5rem); }
.panel-flat { box-shadow: none; }
.section-rule { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.stack { display: grid; gap: 1rem; }
.stack-sm { display: grid; gap: .65rem; }
.cluster { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-main-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; }

.field { display: grid; gap: .42rem; }
.field-label { color: var(--ink); font-size: .8rem; font-weight: 700; }
.field-hint { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
}
.textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.input:hover, .select:hover, .textarea:hover { border-color: #aab7b1; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(23, 107, 99, .12);
}
.checkbox-row { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.45; }
.checkbox-row input { width: 18px; height: 18px; margin-top: .12rem; accent-color: var(--accent); }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .68rem 1rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: white;
  background: var(--accent);
  font-weight: 720;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.button:hover { background: var(--accent-strong); }
.button:active { transform: translateY(1px); }
.button:disabled { cursor: not-allowed; opacity: .48; }
.button-secondary { color: var(--ink); border-color: var(--line); background: var(--surface); }
.button-secondary:hover { background: var(--surface-muted); }
.button-quiet { color: var(--accent-strong); border-color: transparent; background: transparent; }
.button-quiet:hover { background: var(--accent-soft); }
.button-danger { color: var(--danger); border-color: #e7bcb4; background: var(--danger-soft); }
.button-danger:hover { background: #efd0c8; }
.button-small { min-height: 36px; padding: .48rem .72rem; font-size: .78rem; }
.button-block { width: 100%; }

.status {
  min-height: 1.5rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-muted);
  font-size: .8rem;
  line-height: 1.5;
}
.status:empty { display: none; }
.status[data-kind="error"] { color: var(--danger); border-color: #e7bcb4; background: var(--danger-soft); }
.status[data-kind="warning"] { color: var(--warning); border-color: #dfc98d; background: var(--warning-soft); }
.status[data-kind="success"] { color: var(--success); border-color: #b8d6c3; background: #e4f0e7; }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-muted);
  font-size: .68rem;
  font-weight: 700;
}
.badge-accent { color: var(--accent-strong); background: var(--accent-soft); }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.badge-warning { color: var(--warning); background: var(--warning-soft); }

.list { margin: 0; padding: 0; list-style: none; }
.list-row {
  min-height: 56px;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: 0; }
.list-action {
  width: 100%;
  border: 0;
  text-align: left;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.list-action:hover .list-title { color: var(--accent); }
.list-title { font-weight: 720; }
.list-meta { margin-top: .22rem; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.empty { padding: 1.6rem 0; color: var(--muted); font-size: .85rem; text-align: center; }

.auth-layout {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
}
.auth-story {
  padding: clamp(2rem, 7vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
}
.auth-story blockquote {
  max-width: 32rem;
  margin: 2.4rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-family: "Songti SC", "STSong", serif;
  line-height: 1.8;
}
.auth-form-wrap { padding: 2rem; display: grid; place-items: center; background: var(--surface); }
.auth-form { width: min(420px, 100%); }

.bottom-nav {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  padding: .35rem .35rem max(.35rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 247, .98);
}
.bottom-link {
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  font-size: .73rem;
  text-decoration: none;
}
.bottom-link[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); font-weight: 750; }

.chat-page { width: min(1440px, 100%); padding-top: .75rem; }
.chat-shell {
  min-height: calc(100dvh - var(--header-height) - 1.5rem - env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 300px;
  overflow: hidden;
}
.chat-sidebar {
  min-width: 0;
  padding: 1.15rem 1rem;
  border-right: 1px solid var(--line);
  background: #f6f3ea;
}
.chat-sidebar-head { margin-bottom: .85rem; }
.chat-sidebar-head h2 { margin-bottom: 0; font-family: "Songti SC", "STSong", serif; font-size: 1.35rem; }
.conversation-list { max-height: calc(100dvh - 315px); overflow: auto; }
.conversation-button[aria-current="true"] { color: var(--accent-strong); }
.conversation-button[aria-current="true"] .list-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: .12rem;
}
.chat-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--surface);
}
.chat-toolbar {
  min-height: 62px;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 247, .96);
}
.assistant-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-family: "Songti SC", "STSong", serif;
  font-weight: 750;
}
.assistant-heading { display: grid; gap: .12rem; }
.assistant-heading strong { font-family: "Songti SC", "STSong", serif; font-size: .98rem; }
.assistant-heading span { color: var(--muted); font-size: .68rem; }
.chat-toolbar-status { justify-content: flex-end; }
.readiness-pill {
  min-height: 28px;
  padding: .3rem .65rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-muted);
  font-size: .68rem;
  font-weight: 720;
  white-space: nowrap;
}
.readiness-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.readiness-pill[data-kind="ready"] { color: var(--success); border-color: #b8d6c3; background: #e4f0e7; }
.readiness-pill[data-kind="limited"] { color: var(--warning); border-color: #dfc98d; background: var(--warning-soft); }
.readiness-pill[data-kind="error"] { color: var(--danger); border-color: #e7bcb4; background: var(--danger-soft); }
.chat-stream {
  min-height: 0;
  overflow: auto;
  padding: clamp(1rem, 3vw, 2.2rem);
  background: #fffdf8;
  scroll-behavior: smooth;
}
.welcome { max-width: 780px; margin: clamp(1rem, 5vh, 3.6rem) auto 2rem; }
.welcome-heading { position: relative; padding-left: 1.05rem; border-left: 2px solid var(--accent); }
.welcome-heading .display-title { margin-bottom: .8rem; font-size: clamp(2.1rem, 4.2vw, 3.65rem); line-height: 1.08; }
.welcome-heading .lead { max-width: 44rem; margin-bottom: 0; }
.welcome-mark {
  margin-bottom: .6rem;
  color: var(--accent);
  font-family: "Songti SC", "STSong", serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.knowledge-banner { margin-top: 1.2rem; }
.prompt-label { margin: 1.2rem 0 .55rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.prompt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.prompt-chip {
  min-height: 78px;
  padding: .75rem .8rem;
  display: grid;
  align-content: center;
  gap: .35rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #faf8f1;
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.prompt-chip:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.prompt-source { color: var(--accent-strong); font-size: .66rem; font-weight: 750; }
.message { max-width: 800px; margin: 0 auto 1.3rem; animation: message-enter .2s ease-out both; }
.message-user { display: flex; justify-content: flex-end; }
.message-body {
  max-width: min(88%, 680px);
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  white-space: pre-wrap;
  line-height: 1.65;
}
.message-user .message-body { color: white; border-color: var(--ink); background: var(--ink); }
.message-emergency .message-body { color: #6d251f; border-color: #e3a79d; background: var(--danger-soft); }
.message-service .message-body { color: #674b15; border-color: #dfc98d; background: var(--warning-soft); }
.message-meta { margin-bottom: .35rem; color: var(--muted); font-size: .68rem; font-weight: 700; }
.message-user .message-meta { text-align: right; }
.citation-group { max-width: min(88%, 680px); margin-top: .5rem; }
.citation {
  margin-top: .45rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8f7f1;
}
.citation summary { padding: .65rem .75rem; cursor: pointer; font-size: .76rem; font-weight: 700; }
.citation-content { padding: 0 .75rem .75rem; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.chat-composer { padding: .65rem 1rem max(.75rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.composer-mode {
  max-width: 840px;
  margin: 0 auto .45rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
}
.composer-mode[data-kind="limited"] { color: var(--warning); }
.composer-mode[data-kind="ready"] { color: var(--success); }
.composer-row { max-width: 840px; margin: 0 auto; display: flex; align-items: flex-end; gap: .55rem; }
.composer-row .textarea { min-height: 48px; max-height: 150px; }
.composer-notice { margin: .42rem auto 0; max-width: 840px; color: var(--muted); font-size: .65rem; text-align: center; }
.typing { display: inline-flex; gap: .25rem; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite alternate; }
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
.chat-inspector {
  min-width: 0;
  padding: 1.15rem 1rem;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: #f8f6ef;
}
.inspector-head { margin-bottom: 1rem; }
.inspector-head h2 { margin-bottom: 0; font-family: "Songti SC", "STSong", serif; font-size: 1.22rem; }
.inspector-fields { gap: .8rem; }
.inspector-fields .select { min-height: 42px; padding: .58rem .65rem; font-size: .76rem; }
.consent-card {
  padding: .75rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.consent-card input { width: 18px; height: 18px; flex: 0 0 auto; margin: .05rem 0 0; accent-color: var(--accent); }
.consent-card span { display: grid; gap: .25rem; }
.consent-card strong { font-size: .75rem; }
.consent-card small { color: var(--muted); font-size: .68rem; line-height: 1.5; }
.inspector-section { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.inspector-section h3 { margin-bottom: .65rem; font-family: "Songti SC", "STSong", serif; }
.inspector-section-head h3 { margin-bottom: 0; }
.context-summary { display: grid; gap: .55rem; margin: 0; }
.context-summary div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .45rem; font-size: .72rem; line-height: 1.45; }
.context-summary dt { color: var(--muted); }
.context-summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.status-orb { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); }
.status-orb[data-kind="ready"] { background: var(--success); box-shadow: 0 0 0 4px rgba(45, 107, 69, .12); }
.status-orb[data-kind="limited"] { background: var(--warning); box-shadow: 0 0 0 4px rgba(139, 100, 24, .12); }
.status-orb[data-kind="error"] { background: var(--danger); box-shadow: 0 0 0 4px rgba(161, 63, 53, .12); }
.boundary-list { margin: 0; padding-left: 1rem; color: var(--muted); font-size: .72rem; line-height: 1.7; }
.mobile-history-toggle, .mobile-context-toggle { display: none; }

.tabs { display: flex; gap: .25rem; padding: .25rem; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tab {
  min-height: 42px;
  padding: .55rem .8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--accent-strong); border-color: var(--accent); font-weight: 750; }
.tab-panel { padding: 1rem; }

.metric { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.metric:last-child { border-bottom: 0; }
.metric-value { font-size: 1.4rem; font-weight: 760; }
.metric-label { margin-top: .2rem; color: var(--muted); font-size: .72rem; }

.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;
}

.offline-page { min-height: 100svh; display: grid; place-items: center; padding: 1rem; }
.offline-card { width: min(520px, 100%); text-align: center; }
.offline-card .lead { margin-right: auto; margin-left: auto; }

@keyframes page-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes message-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { from { opacity: .25; transform: translateY(1px); } to { opacity: 1; transform: translateY(-1px); } }

@media (max-width: 1180px) {
  .chat-shell { grid-template-columns: 238px minmax(0, 1fr); }
  .mobile-context-toggle { display: inline-flex; }
  .chat-inspector {
    position: fixed;
    z-index: 55;
    top: calc(var(--header-height) + env(safe-area-inset-top));
    right: 0;
    bottom: 0;
    width: min(360px, 100vw);
    display: none;
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 45px rgba(34, 48, 43, .14);
  }
  .chat-inspector[data-open="true"] { display: block; }
}

@media (max-width: 820px) {
  .top-nav { display: none !important; }
  .bottom-nav[data-ready="true"] { display: grid; }
  .grid-main-aside, .grid-2 { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-story { min-height: 34svh; padding: 2rem 1.25rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-story blockquote { display: none; }
  .auth-form-wrap { padding: 1.5rem 1rem 5rem; place-items: start center; }
  .chat-page {
    height: calc(100dvh - var(--header-height) - env(safe-area-inset-top));
    padding: 0 0 calc(4.3rem + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .chat-shell { width: 100%; height: 100%; min-height: 0; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .chat-sidebar {
    position: fixed;
    z-index: 35;
    top: calc(var(--header-height) + env(safe-area-inset-top));
    right: 0;
    bottom: calc(4.3rem + env(safe-area-inset-bottom));
    left: 0;
    display: none;
    border-right: 0;
    overflow: auto;
  }
  .chat-sidebar[data-open="true"] { display: block; }
  .chat-main { height: 100%; grid-column: 1 / -1; overflow: hidden; }
  .chat-toolbar { min-height: 58px; padding: .55rem .7rem; }
  .chat-stream { padding: 1rem .8rem; }
  .welcome { margin-top: 1.2rem; }
  .welcome-heading .display-title { font-size: clamp(2rem, 8vw, 3rem); }
  .prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-history-toggle { display: inline-flex; }
  .chat-inspector { bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
  .message-body, .citation-group { max-width: 92%; }
  h1, .display-title { font-size: clamp(1.85rem, 10vw, 2.65rem); }
}

@media (max-width: 480px) {
  .brand-tagline { display: none; }
  .guest-nav .nav-link:first-child { display: none; }
  .page { padding-right: .75rem; padding-left: .75rem; }
  .chat-page { padding-right: 0; padding-left: 0; }
  .auth-story h1 { font-size: clamp(2rem, 9vw, 2.25rem); letter-spacing: -.045em; }
  .assistant-heading span, .readiness-pill { display: none; }
  .prompt-grid { grid-template-columns: 1fr; }
  .prompt-chip { min-height: 66px; }
  .chat-composer { padding-right: .65rem; padding-left: .65rem; }
  .composer-row { align-items: stretch; }
  .composer-row .button { min-width: 48px; padding: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}