/* ============ shared tokens — dark ocean, soft ============ */
:root {
  --bg: #0A141A;
  --bg2: #0D1A21;
  --bg3: #10222B;
  --fg: #D9E6E1;
  --dim: rgba(217, 230, 225, .62);
  --faint: rgba(217, 230, 225, .36);
  --line: rgba(217, 230, 225, .13);
  --line2: rgba(217, 230, 225, .42);
  --aqua: #7FCDB8;
  --aqua-dim: rgba(127, 205, 184, .12);
  --coral: #E8956D;
  --coral-dim: rgba(232, 149, 109, .12);
  --sand: #D8C08A;
  --sea: #8FC9A9;
  --serif: 'Merriweather', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============ base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* natural writing spacing everywhere — no tracked-out text, site-wide */
* { letter-spacing: normal !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--aqua); color: #071013; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
::-webkit-scrollbar { width: 10px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1B3140; border: 2px solid var(--bg); }
/* Firefox: same colors through the standard properties (standard width —
   `thin` renders rounded/with buttons on some setups, so we don't use it).
   Scoped to non-Chromium: Chromium reads these too and they fight the
   ::-webkit rules above. */
@supports not selector(::-webkit-scrollbar) {
  html, .modal-card { scrollbar-width: auto; scrollbar-color: #1B3140 var(--bg); }
  html.has-custom-sb { scrollbar-width: none; }
}
/* custom square thumb (Firefox only — created by JS, so Chromium never sees it) */
.sb-track { position: fixed; top: 0; right: 0; bottom: 0; width: 6px; background: var(--bg); z-index: 100; }
.sb-thumb { width: 6px; border-radius: 0; background: #1B3140; cursor: default; }
button { font-family: var(--mono); cursor: pointer; background: none; border: none; color: inherit; }
input, textarea { font-family: var(--mono); }
a { color: var(--aqua); }

/* ============ buttons — few, but styled ============ */
.btn {
  font: 600 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--aqua); border: 1px solid var(--aqua); background: transparent;
  padding: 15px 32px; transition: all .15s;
}
.btn:hover:not(:disabled) { background: var(--aqua); color: #08131A; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--coral); }
.btn:active:not(:disabled) { transform: none; box-shadow: none; }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.ghost { color: var(--dim); border-color: var(--line2); }
.btn.ghost:hover:not(:disabled) { background: var(--bg3); color: var(--fg); box-shadow: 4px 4px 0 var(--line); transform: translate(-2px, -2px); }
.btn.mini { padding: 6px 11px; font-size: 9px; letter-spacing: .14em; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ============ masthead frame ============ */
.topstrip {
  text-align: center; font: 500 9.5px var(--mono); letter-spacing: .34em; color: var(--faint);
  padding: 18px 16px; border-bottom: 1px solid var(--line);
}
.rule { width: 56px; height: 1px; background: var(--line2); margin: 30px auto; }

/* ============ footer ============ */
footer {
  border-top: 1px solid var(--line); text-align: center;
  font: 400 9px/2.2 var(--mono); letter-spacing: .18em; color: var(--faint);
  padding: 34px 20px 44px;
}