/* ATLAS BETS · the shared skin of the six finders: the lab's dark ground, Fraunces and Plex Mono, one large search, red only for the thread. */
:root { --bg: #0b0a09; --panel: #141210; --ink: #ece6da; --dim: #b3ab9e; --faint: #7b7468; --rule: #2a2621; --red: #e0483a; --gold: #f2c14e; --lime: #c4f46a;
  --serif: 'Fraunces', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--serif); }
a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
mark { background: #f2c14e33; color: var(--ink); border-bottom: 2px solid var(--gold); padding: 0 1px; }
.top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 22px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rule); background: var(--bg); position: relative; z-index: 5; }
.top .who { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.top .who b { display: block; font-size: 23px; font-weight: 600; line-height: 1.05; } .top .who small { display: block; font: 600 11px var(--mono); letter-spacing: .14em; color: var(--dim); margin-top: 4px; text-transform: uppercase; }
.find { position: relative; min-width: 0; }
.find input { width: 100%; background: var(--panel); border: 1px solid #3a352e; border-radius: 10px; color: var(--ink); font: 19px var(--serif); padding: 13px 160px 13px 46px; outline: none; }
.find input:focus { border-color: var(--ink); }
.find svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
.find .n { position: absolute; right: 48px; pointer-events: none; top: 50%; transform: translateY(-50%); font: 13px var(--mono); color: var(--faint); }
.top nav { display: flex; gap: 8px; }
.top nav a { font: 600 12.5px var(--mono); letter-spacing: .1em; text-decoration: none; color: var(--dim); border: 1px solid var(--rule); border-radius: 99px; padding: 9px 14px; white-space: nowrap; }
.top nav a:hover { color: var(--ink); border-color: var(--dim); }
.hint { font: 12.5px/1.6 var(--mono); color: var(--faint); }
.kbd { font: 11.5px var(--mono); border: 1px solid #3a352e; border-radius: 4px; padding: 1px 6px; color: var(--dim); }
.pill { display: inline-block; font: 600 11px var(--mono); letter-spacing: .1em; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; color: #000; background: var(--c, var(--dim)); }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font: 600 13px var(--mono); letter-spacing: .08em; text-decoration: none; border: 1px solid var(--dim); border-radius: 99px; padding: 8px 16px; }
.btn:hover { background: var(--ink); color: var(--bg); }
.shot { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #000; }
@media (max-width: 760px) { .top { grid-template-columns: minmax(0, 1fr); } .top nav { overflow-x: auto; } }
