@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Noto+Serif+SC:wght@500;700;900&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  color-scheme: light;
  --paper: #ece4d2;
  --panel: #f5efe1;
  --ink: #191512;
  --ink-rgb: 25, 21, 18;
  --red: #c0392b;
  --red-dark: #9e2d21;
  --red-text: #f3e6cf;
  --gold: #e0a458;
  --body-text: #302a24;
  --muted: #5c5144;
  --faint: #766854;
  --hairline: #cfc4aa;
  --content-column: 820px;
  --font-body: 'Spectral', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-hanzi: 'Noto Serif SC', serif;
  --ease-ink: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms;
  --t-mid: 180ms;
  --t-arrive: 420ms;
  --bg: var(--paper);
  --bg-panel: var(--panel);
  --bg-input: var(--panel);
  --bg-raised: var(--panel);
  --border: var(--hairline);
  --border-strong: var(--ink);
  --text: var(--body-text);
  --dim: var(--muted);
  --text-primary: var(--body-text);
  --text-muted: var(--muted);
  --bone: var(--paper);
  --cinnabar: var(--red);
  --accent: var(--red);
  --focus: var(--red);
}

[data-theme='night'] {
  color-scheme: dark;
  --paper: #16120d;
  --panel: #1f1a12;
  --ink: #e7dcc4;
  --ink-rgb: 231, 220, 196;
  --body-text: #d0c3a8;
  --muted: #ac9b7c;
  --faint: #8f8066;
  --hairline: #3a3226;
  --bone: #0d0a07;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--paper); color: var(--body-text); font: 500 16.5px/1.7 var(--font-body); }
button, input { font: inherit; }
button { min-height: 44px; }
a { color: var(--red); text-decoration: none; border-bottom: 2px solid currentColor; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.primary-button, .secondary-button, .button {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center;
  padding: 10px 20px; border: 2.5px solid var(--ink); border-radius: 0;
  background: var(--red); color: var(--red-text); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; cursor: pointer; box-shadow: 4px 4px 0 var(--ink);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.secondary-button { background: var(--panel); color: var(--ink); box-shadow: none; }
.primary-button:active, .button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
button:disabled, input:disabled { opacity: .55; cursor: wait; }

.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.page-card { width: min(32rem, 100%); padding: 28px; border: 2px solid var(--ink); background: var(--panel); box-shadow: 5px 5px 0 var(--gold); }
.page-brand { width: 72px; height: 72px; object-fit: cover; }
.page-card h1 { color: var(--ink); text-transform: uppercase; }
.page-card input[type='text'] { width: 100%; min-height: 44px; padding: 10px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); }
.form-stack { display: grid; gap: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.status-error, .err { color: var(--red); }
.status-success, .ok { color: var(--ink); }
.token { display: block; padding: 14px; border: 2px solid var(--ink); overflow-wrap: anywhere; }

@keyframes wb-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes wb-stamp { 0% { opacity: 0; transform: scale(1.5) rotate(10deg); } 55% { opacity: 1; transform: scale(.94) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(6deg); } }
@keyframes wb-unfurl { from { opacity: 0; transform: translateY(10px) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes wb-reprint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes wb-spin { to { transform: rotate(360deg); } }
@keyframes wb-shimmer { 0%, 100% { box-shadow: 5px 5px 0 var(--gold); } 50% { box-shadow: 7px 7px 0 var(--gold); } }
.wb-arrive { animation: wb-rise var(--t-arrive) var(--ease-ink) both; }
.wb-reprint { animation: wb-reprint 480ms steps(24) both; }
.wb-stamp { animation: wb-stamp 380ms var(--ease-ink) both; }
.wb-unfurl { transform-origin: bottom; animation: wb-unfurl var(--t-mid) var(--ease-ink) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .wb-arrive, .wb-reprint, .wb-stamp, .wb-unfurl { animation: none !important; }
}

@media (min-width: 1440px) {
  :root { --content-column: 920px; }
}