:root {
  --paper: #141312;
  --paper-raised: #1C1B19;
  --ink: #F4F1EB;
  --ink-soft: #A8A096;
  --ink-faint: #7C756C;
  --line: rgba(244, 241, 235, 0.10);
  --accent: #D4784A;
  --accent-press: #C4622D;
  --on-accent: #FFF8F3;
  --hover: rgba(244, 241, 235, 0.06);
  --stage: #0C0B0A;
  --stage-bezel: #10100F;
  --danger: #E07A72;
  /* YaHei UI before Segoe so CJK is not mixed through Latin metrics on Windows. */
  --font: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-display: 32px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --r-control: 8px;
  --r-clip: 6px;
  --r-card: 12px;
  --r-panel: 14px;
  --r-dialog: 18px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.36);
  --shadow-3: 0 24px 56px rgba(0, 0, 0, 0.46);
  --btn-face: linear-gradient(180deg, #242220 0%, #1a1917 100%);
  --btn-face-hover: linear-gradient(180deg, #2c2a27 0%, #201f1c 100%);
  --btn-edge: rgba(244, 241, 235, 0.12);
  --btn-edge-soft: rgba(244, 241, 235, 0.08);
  --btn-hilite: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --btn-shade: 0 1px 0 rgba(0, 0, 0, 0.32), 0 2px 5px rgba(0, 0, 0, 0.2);
  --btn-press: inset 0 1px 2px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  --btn-accent-face: linear-gradient(180deg, #D8895A 0%, #B86838 55%, #A05428 100%);
  --btn-accent-hover: linear-gradient(180deg, #E09466 0%, #C47240 55%, #A85C2E 100%);
  --btn-accent-press: linear-gradient(180deg, #9A4E24 0%, #853F1C 100%);
  --btn-accent-edge: rgba(232, 190, 150, 0.22);
  --btn-accent-hilite: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --btn-accent-shade: 0 1px 0 rgba(0, 0, 0, 0.28), 0 3px 10px rgba(120, 55, 22, 0.28);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-dialog: 280ms;
  --timeline-h: clamp(156px, 30vh, 420px);
  color-scheme: dark;
}

html[data-theme="light"] {
  --paper: #F3F0EA;
  --paper-raised: #FFFcf7;
  --ink: #1C1B19;
  --ink-soft: #5E584F;
  --ink-faint: #8A8278;
  --line: rgba(28, 27, 25, 0.12);
  --hover: rgba(28, 27, 25, 0.06);
  --stage: #121110;
  --stage-bezel: #E6E0D6;
  --btn-face: linear-gradient(180deg, #FFFEFB 0%, #F1EBE2 100%);
  --btn-face-hover: linear-gradient(180deg, #FFFFFF 0%, #EAE3D8 100%);
  --btn-edge: rgba(28, 27, 25, 0.14);
  --btn-edge-soft: rgba(28, 27, 25, 0.08);
  --btn-hilite: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --btn-shade: 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 5px rgba(28, 27, 25, 0.1);
  --btn-press: inset 0 1px 2px rgba(28, 27, 25, 0.16), inset 0 0 0 1px rgba(28, 27, 25, 0.06);
  --btn-accent-face: linear-gradient(180deg, #D8895A 0%, #B86838 55%, #A05428 100%);
  --btn-accent-hover: linear-gradient(180deg, #E09466 0%, #C47240 55%, #A85C2E 100%);
  --btn-accent-press: linear-gradient(180deg, #9A4E24 0%, #853F1C 100%);
  --btn-accent-edge: rgba(120, 48, 16, 0.18);
  --btn-accent-hilite: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --btn-accent-shade: 0 1px 0 rgba(255, 255, 255, 0.22), 0 3px 10px rgba(120, 55, 22, 0.2);
  color-scheme: light;
}

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.45;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/*
  Windows native <select> popups ignore most CSS and paint a light system list.
  Transparent selects + light ink then look ghosted / unreadable. Keep solid fills
  and option colors that survive both dark UI chrome and the OS dropdown.
*/
select {
  color-scheme: dark;
  background-color: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

select option,
select optgroup {
  background-color: #1c1b19;
  color: #f4f1eb;
}

html[data-theme="light"] select {
  color-scheme: light;
}

html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
  background-color: #fffcf7;
  color: #1c1b19;
}

button {
  cursor: pointer;
}

::selection {
  background: rgba(196, 98, 45, 0.22);
}

:focus {
  outline: none;
}

:focus-visible {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}

.viewport-gate {
  display: none;
  position: fixed;
  inset: 0;
  place-items: center;
  padding: var(--s6);
  background: var(--paper);
  text-align: center;
}

.viewport-gate strong {
  display: block;
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--s2);
}

.viewport-gate p {
  margin: 0;
  color: var(--ink-soft);
}