/* Mactoro — shared world. Tokens follow TradeStage BRAND.md (Places.). */
:root {
  --stage: #0b0c0e;
  --chalk: #f0f0eb;
  --chalk-2: rgba(240, 240, 235, 0.72);
  --chalk-3: rgba(240, 240, 235, 0.54);
  --rim: rgba(240, 240, 235, 0.12);
  --rim-strong: rgba(240, 240, 235, 0.22);
  --glass: rgba(255, 255, 255, 0.06);
  --cue: #2f86ff;
  --cue-hot: #78c2ff;
  --cue-deep: #1d6ae0; /* Cue Blue under white text: 5.0:1 */
  --cue-deep-hover: #1a63cc;
  --bell: #ffb84d;
  --done: #3ddc84;

  --display: -apple-system, "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --text: -apple-system, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  /* spring with a small overshoot, used only where something lands */
  --land: linear(0, 0.22 7%, 0.64 16%, 0.96 26%, 1.07 34%, 1.09 39%, 1.06 47%, 1.01 58%, 0.99 70%, 1);

  --gutter: clamp(20px, 4vw, 56px);
  --measure: 62ch;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--stage);
  color: var(--chalk);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--cue);
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
::selection { background: var(--cue); color: #fff; }
:focus-visible { outline: 2px solid var(--cue-hot); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: #2a2c31 var(--stage); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--stage); }
::-webkit-scrollbar-thumb { background: #2a2c31; border-radius: 8px; border: 3px solid var(--stage); }

h1, h2, h3 { font-family: var(--display); font-weight: 750; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---- the mark (stage frame open to the wing, three cues, middle lit) ---- */
.mark { display: inline-block; width: 1.6em; height: 1.6em; flex: none; }

/* ---- top bar ---- */
.topbar {
  position: absolute; inset: 0 0 auto 0; z-index: 30;
  height: 68px; display: flex; align-items: center; gap: 28px;
  padding: 0 var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 650 17px/1 var(--display); letter-spacing: -0.01em; text-decoration: none; }
.brand .by { color: var(--chalk-3); font-weight: 500; }
/* BRAND.md wordmark: SF Pro Display Semibold, −3.5%, "Trade" at 62% Chalk */
.wordmark { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; color: var(--chalk); }
.wordmark .w-trade { color: rgba(240, 240, 235, 0.62); }
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.nav a { color: var(--chalk-2); text-decoration: none; transition: color 0.2s var(--ease-out); }
.nav a:hover { color: var(--chalk); }
.clock { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--chalk-3); white-space: nowrap; }
.clock.open { color: var(--bell); }

/* ---- buttons ---- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; gap: 10px; height: var(--h); padding: 0 26px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 650 17px/1 var(--display); letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.2s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--cue-deep); color: #fff; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.btn-primary:hover { background: var(--cue-deep-hover); transform: translateY(-1px); box-shadow: 0 18px 34px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.26); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-quiet { background: var(--glass); color: var(--chalk); border: 1px solid var(--rim-strong); }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.1); }
.btn-small { --h: 40px; padding: 0 18px; font-size: 15px; }

/* ---- keycaps are type ---- */
.keys { display: inline-flex; gap: 5px; align-items: center; vertical-align: middle; }
kbd {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font: 600 15px/1 var(--display); color: var(--chalk);
  background: #1c1d21; border: 1px solid rgba(255, 255, 255, 0.16);
}
kbd.lit { background: var(--cue-deep); color: #fff; border-color: rgba(120, 194, 255, 0.6); }
.keys.small kbd { min-width: 24px; height: 24px; font-size: 12.5px; border-radius: 6px; padding: 0 6px; }

/* ---- section rhythm ---- */
.section { padding: clamp(96px, 14vw, 180px) 0 0; }
.section-head { max-width: 760px; }
.section-head h2 { font-size: clamp(40px, 5.4vw, 72px); }
.section-head p { margin-top: 22px; font-size: clamp(18px, 1.6vw, 21px); color: var(--chalk-2); max-width: var(--measure); }
.lede { font-size: clamp(19px, 1.7vw, 22px); color: var(--chalk-2); }

/* ---- footer ---- */
.footer { margin-top: clamp(96px, 12vw, 160px); border-top: 1px solid var(--rim); padding: 40px 0 56px; color: var(--chalk-3); font-size: 14px; }
.footer .row { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }
.footer a { color: var(--chalk-2); text-decoration: none; }
.footer a:hover { color: var(--chalk); }
.footer .legal { margin-top: 18px; font-size: 13px; }

@media (max-width: 760px) {
  .nav { display: none; }
  .topbar { gap: 14px; justify-content: space-between; }
  .clock .phase { display: none; }
}
@media (max-width: 420px) {
  .brand .by { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- legal pages (Read mode): plain, calm, readable ---- */
.doc { padding: 120px 0 0; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(40px, 5vw, 60px); }
.doc .updated { margin-top: 14px; color: var(--chalk-3); font-size: 15px; }
.doc h2 { font-size: 24px; letter-spacing: -0.02em; margin: 48px 0 12px; }
.doc p, .doc li { color: var(--chalk-2); max-width: var(--measure); }
.doc p + p { margin-top: 14px; }
.doc ul { padding-left: 20px; margin: 12px 0 0; display: grid; gap: 8px; }
.doc a { color: var(--cue-hot); }