:root {
  --bg: #f1f1ed;
  --bg-2: #e7e7e1;
  --ink: #111;
  --mid: #6b6b66;
  --line: #c6c6bf;
  --faint: #dedfd8;
  --accent: #f0281e;
  --font: 'Martian Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.6 var(--font); font-stretch: 87.5%; -webkit-font-smoothing: antialiased; }
img.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.lbl { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--mid); font-stretch: 75%; }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.top { border-bottom: 1px solid var(--ink); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.top .wrap { display: flex; align-items: center; gap: 18px; height: 48px; }
.mark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.mark b { font-weight: 700; font-size: 14px; font-stretch: 112.5%; letter-spacing: .14em; }
.mark span { color: var(--mid); font-size: 11px; }
.top .crumb { margin-left: auto; color: var(--mid); font-size: 11px; }
.btn { border: 1px solid var(--ink); background: transparent; padding: 10px 16px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover:not([disabled]) { background: var(--ink); color: var(--bg); }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover:not([disabled]) { background: var(--accent); border-color: var(--accent); }
.btn[disabled] { opacity: .35; cursor: not-allowed; }
.sheet-h { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 14px; padding: 22px 0 14px; border-bottom: 1px solid var(--line); }
.sheet-h h1 { margin: 0; font-size: 26px; font-weight: 300; font-stretch: 112.5%; line-height: 1.2; }
.note { color: var(--mid); margin: 0; min-height: 1.4em; overflow-wrap: anywhere; }
.note.err { color: var(--accent); }
.note.ok { color: var(--ink); }
.msg { background: var(--bg-2); border: 1px solid var(--line); padding: 12px; margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 12px; }
.kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); border-top: 1px solid var(--line); }
@media (max-width: 520px) { .kv { grid-template-columns: 112px minmax(0, 1fr); } }
.kv > * { padding: 8px 0; border-bottom: 1px solid var(--line); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tier { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.tier i { width: 6px; height: 6px; border: 1px solid var(--ink); }
.tier i.on { background: var(--ink); }
.tier.legendary i.on { background: var(--accent); border-color: var(--accent); }
.tier em { font-style: normal; margin-left: 6px; font-size: 10.5px; color: var(--mid); }
.live-dot::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 8px; vertical-align: middle; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .1; } }
@media (max-width: 600px) {
  .mark span { display: none; }
  .kv { grid-template-columns: 1fr; }
  .kv > dt { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}