:root {
  --bg: #0f0f0d;
  --bg-2: #151513;
  --ink: #e9e4d6;
  --ink-2: #8d887b;
  --rule: #26251f;
  --accent: #e0a44a;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --w: 1280px;
  --gutter: 48px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
}
@media (hover: hover) { body, a, button { cursor: none; } }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, .row:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
p { margin: 0 0 16px; }
h1 { font: 400 clamp(48px, 7vw, 104px)/0.95 var(--serif); letter-spacing: -0.01em; margin: 0 0 24px; }
h2 { font: 400 clamp(36px, 4vw, 56px)/1 var(--serif); margin: 0 0 16px; }
h3 { font: 500 13px/1.4 var(--mono); text-transform: none; color: var(--ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
code { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
pre { margin: 0; font-family: var(--mono); white-space: pre; overflow-x: auto; }
.muted { color: var(--ink-2); }
dl, ol, ul { margin: 0; padding: 0; }
b { font-weight: 500; }

#cursor { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; font-size: 7px; line-height: 7px; color: var(--accent); will-change: transform; }
#cursor pre { font-size: inherit; line-height: inherit; overflow: visible; transition: transform 160ms; }
@media (hover: none) { #cursor, .hint { display: none; } }
@media (prefers-reduced-motion: reduce) { #cursor pre { transition: none; } html { scroll-behavior: auto; } }

.top {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 20px var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.wordmark { font: 400 24px/1 var(--serif); }
nav { display: flex; gap: 32px; color: var(--ink-2); font-size: 14px; }
.top-status { justify-self: end; display: flex; gap: 24px; font-size: 13px; color: var(--ink-2); }
.top-status b { color: var(--ink); }

.hero {
  position: relative; min-height: calc(100vh - 65px); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  padding: 0 var(--gutter) 56px;
}
.scene { position: relative; }
.scene pre { user-select: none; overflow: visible; }
.scene .base { color: var(--ink-2); }
.scene .hot, .scene .over { position: absolute; left: 0; top: 0; pointer-events: none; }
.scene .hot { color: var(--accent); }
.scene .over { color: var(--ink); }
.field { position: absolute; top: 0; bottom: 0; left: 22%; right: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.field pre { font-size: 12px; line-height: 12px; }
.field .base { color: #5a5748; }
.hero-copy { position: relative; z-index: 1; max-width: 560px; }
.hero-copy p { font-size: 17px; max-width: 46ch; }
.hint { color: var(--ink-2); }
.cta { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.cta:hover { color: var(--ink); border-color: var(--ink); }
.status {
  position: relative; z-index: 1; justify-self: end;
  display: grid; grid-template-columns: repeat(4, auto); gap: 40px;
  padding: 16px 20px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--bg) 80%, transparent);
}
.status dt { font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.status dd { margin: 0; font-size: 20px; color: var(--ink); }

.board {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;
  background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.cell { background: var(--bg); padding: 32px var(--gutter); min-width: 0; }
.span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.cell .muted { font-size: 13px; max-width: 60ch; }
.data { font-size: 13px; line-height: 1.7; color: var(--ink); padding: 16px 0 0; }
.cell .data { margin-bottom: 16px; }
#walk { color: var(--ink-2); }
#stats { color: var(--ink); }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 16px; }
.tbl th { text-align: left; font-weight: 400; color: var(--ink-2); padding: 8px 16px 8px 0; border-bottom: 1px solid var(--rule); }
.tbl td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }

.chapter { padding: 96px var(--gutter); }
.chapter + .chapter { border-top: 1px solid var(--rule); }
.chapter-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 64px; }
.chapter-head p { font-size: 17px; color: var(--ink-2); max-width: 52ch; margin: 0; }

.loop { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 96px; }
.ring pre { font-size: 13px; line-height: 13px; }
.phases { list-style: none; counter-reset: p; }
.phases li { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.phases li:last-child { border-bottom: 1px solid var(--rule); }
.phases b { color: var(--accent); font-weight: 400; }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-bottom: 96px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: 14px; }
.kv dt { color: var(--accent); }
.kv dd { margin: 0; color: var(--ink); }
.kv + .muted { margin-top: 16px; font-size: 13px; }
.prompt { padding: 0 0 16px; color: var(--ink); }
.three .muted { font-size: 13px; }

.wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.wallet .muted { font-size: 14px; max-width: 48ch; }
#gauge { padding: 0; }

.filter { display: flex; gap: 24px; font-size: 13px; margin-bottom: 16px; }
.filter button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); }
.filter button:hover { color: var(--ink); }
.filter button[aria-pressed="true"] { color: var(--accent); }
.log-table td.tick { color: var(--ink-2); width: 72px; }
.log-table td.action { width: 110px; }
.log-table .row:hover td { background: var(--bg-2); }
.log-table tr.detail td { background: var(--bg-2); padding: 12px 16px; }
.log-table tr.detail pre { font-size: 13px; color: var(--ink-2); line-height: 1.7; }

.rules { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 96px; }
.rules li { background: var(--bg); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rules b { font: 400 24px/1.1 var(--serif); }
.rules code { white-space: pre-wrap; word-break: break-word; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.btn { background: var(--accent); color: var(--bg); border: 0; padding: 12px 20px; font: 500 14px var(--mono); }
.btn:disabled { opacity: 0.5; }
.input { width: 100%; background: var(--bg-2); color: var(--ink); border: 1px solid var(--ink-2); padding: 10px 12px; font: 400 14px var(--mono); }
.input::placeholder { color: var(--ink-2); }
.input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.fields label, .checks label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.checks { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 16px; }
.checks label { flex-direction: row; align-items: center; color: var(--ink); }
.checks input { accent-color: var(--accent); }
.controls .two { gap: 64px; }
.btn:hover { background: var(--ink); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tile { background: var(--bg); padding: 24px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tile h3 { margin: 0; padding: 0; border: 0; color: var(--accent); }
.tile p { font-size: 14px; margin: 0; flex: 1; }
.tile code { white-space: pre-wrap; word-break: break-all; font-size: 12px; }
.two .data { margin-bottom: 48px; }
.two h3 + .data { padding-top: 8px; }

footer { padding: 48px var(--gutter) 64px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; font-size: 13px; color: var(--ink-2); }
footer p { max-width: 64ch; margin: 0; }
footer code { color: var(--ink); }

@media (max-width: 1000px) {
  :root { --gutter: 24px; }
  .top { grid-template-columns: 1fr auto; }
  .top-status { display: none; }
  .hero { grid-template-columns: 1fr; align-items: end; min-height: 0; padding-top: 24px; gap: 24px; }
  .field { position: relative; inset: auto; margin-bottom: 24px; }
  .field pre { font-size: 9px; line-height: 9px; }
  .status { justify-self: stretch; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
  .board { grid-template-columns: 1fr; }
  .span-7, .span-5, .span-6 { grid-column: span 1; }
  .chapter { padding: 64px var(--gutter); }
  .chapter-head, .loop, .three, .wallet, .two, footer { grid-template-columns: 1fr; gap: 32px; }
  .rules, .grid4 { grid-template-columns: 1fr; }
  nav { gap: 16px; font-size: 13px; }
}