/* DS v2 tokens — generated from kelvin-chen/design/tokens/ds-v2.tokens.css @ 66d614a.
   Do not hand-edit. Run design/check-tokens.sh after changing the source. */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/space-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/space-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2")}

:root{
  --grot:"Space Grotesk",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --song:"Songti SC","Noto Serif SC","STSong","SimSun",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --max:1120px; --radius:12px; --seal:#c3272b;
  --sage:#4e8a6e;
  --photo-rest:saturate(.6) sepia(.08) contrast(1.03);
  --photo-alive:saturate(1.02) contrast(1.02);
  --shadow:0 1px 2px color-mix(in srgb, var(--shade) 20%, transparent),
           0 20px 44px -28px color-mix(in srgb, var(--shade) 50%, transparent);
  --shadow-pop:0 2px 4px color-mix(in srgb, var(--shade) 26%, transparent),
           0 30px 60px -30px color-mix(in srgb, var(--shade) 70%, transparent);
}

/* ---- the four rooms: only the paper changes ---- */
[data-room="paper"]{ --bg:#f2f1ed; --panel:#faf9f6; --panel2:#e4e3dd; --ink:#141317; --muted:#6f6e69;
  --line:rgba(20,19,23,.16); --shade:#141317 }
[data-room="night"]{ --bg:#131215; --panel:#1a191d; --panel2:#232227; --ink:#eae8e2; --muted:#97959d;
  --line:rgba(234,232,226,.15); --shade:#000 }
[data-room="porcelain"]{ --bg:#fbfaf7; --panel:#ffffff; --panel2:#efece6; --ink:#1a1817; --muted:#7d7871;
  --line:rgba(26,24,23,.14); --shade:#1a1817 }
[data-room="stone"]{ --bg:#e7e6e1; --panel:#f1f0eb; --panel2:#dcdbd4; --ink:#141317; --muted:#67665f;
  --line:rgba(20,19,23,.17); --shade:#141317 }

::selection{background:var(--seal);color:#fff}

/* base mark primitive — the swash. Surfaces add their own sizing/placement on top of this. */
.mark{position:relative;display:inline-grid;place-items:center;line-height:1.15;
  font-family:var(--song);font-weight:700;color:var(--ink)}
.mark.under{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.swash{display:block;width:112%;height:13px;overflow:visible}
.swash path{fill:none;stroke:var(--seal);stroke-width:2.4;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.drawn .swash path{stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.swash path{transition:stroke-dashoffset .9s cubic-bezier(.55,.05,.3,1) .2s}}
@media (prefers-reduced-motion:reduce){.swash path{stroke-dashoffset:0}}