:root { color-scheme:light; --bg:#f4f2eb; --fg:#242b27; --muted:#656b61; --panel:#fbfaf6; --line:#d9dcd2; --accent:#245541; --accent-fg:#fff; --mark:#d7ef83; --code-bg:#eceee6; font:16px/1.65 "Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media(prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --bg:#111a16; --fg:#f2f3e9; --muted:#a6b3a8; --panel:#19241e; --line:#354339; --accent:#d7ef83; --accent-fg:#172319; --code-bg:#0d1611; } }
:root[data-theme="light"] { color-scheme:light; --bg:#f4f2eb; --fg:#242b27; --muted:#656b61; --panel:#fbfaf6; --line:#d9dcd2; --accent:#245541; --accent-fg:#fff; --code-bg:#eceee6; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#111a16; --fg:#f2f3e9; --muted:#a6b3a8; --panel:#19241e; --line:#354339; --accent:#d7ef83; --accent-fg:#172319; --code-bg:#0d1611; }
*,*::before,*::after { box-sizing:border-box; }
/* Bound the page, then let nested flex/grid content shrink; never hide page overflow. */
html,body { width:100%; min-width:0; }
body { margin:0; background:var(--bg); color:var(--fg); }
[hidden] { display:none !important; }
a { color:var(--accent); text-underline-offset:.22em; }
button,input,textarea { font:inherit; }
button,.button { min-height:48px; border:1px solid var(--line); border-radius:7px; padding:.6rem 1rem; font-weight:700; cursor:pointer; }
button { color:var(--fg); background:var(--panel); }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.masthead,main,footer { width:100%; max-width:980px; min-width:0; margin:auto; padding-inline:24px; }
main > *,section,.prose,.code-block,.table-scroll { min-width:0; max-width:100%; }
h1,h2,h3,h4,h5,h6,p { overflow-wrap:anywhere; }
.brand,.brand > span,.record-link > span,.call-meta > span,.call-links > a,.resource-list > li,.prediction-list > li { min-width:0; overflow-wrap:anywhere; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:92px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg); font-weight:800; font-size:15px; line-height:1.3; overflow-wrap:anywhere; }
.brand small { display:block; font:600 9px/1.5 "Manrope",sans-serif; letter-spacing:.16em; color:var(--muted); margin-top:5px; }
.brand-mark { display:flex; justify-content:center; align-items:center; width:42px; height:42px; flex-shrink:0; border-radius:3px; background:var(--mark); color:#213428; font:800 28px/1 Georgia,serif; letter-spacing:-.12em; }
.brand-mark > span { align-self:flex-start; font:600 18px/1 sans-serif; padding-top:7px; letter-spacing:0; }
#theme { flex-shrink:0; padding:.5rem .65rem; font-size:12px; border:0; background:transparent; white-space:nowrap; }
.hero { padding:36px 0 30px; }
.eyebrow,.card-meta { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
h1 { font-size:clamp(38px,8.2vw,68px); font-weight:800; line-height:1.07; letter-spacing:-.065em; margin:19px 0 18px; overflow-wrap:anywhere; }
h1 > span { color:var(--accent); }
h2 { font-size:20px; letter-spacing:-.025em; line-height:1.35; }
.hero > p:not(.eyebrow),.promise { color:var(--muted); max-width:550px; font-size:15px; line-height:1.7; margin-bottom:0; }
#search { margin-top:28px; }
#search label { display:block; font-size:14px; font-weight:800; margin-bottom:10px; letter-spacing:-.015em; }
.search-row { display:flex; align-items:stretch; background:var(--panel); border:2px solid var(--accent); border-radius:9px; padding:6px; box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 8%,transparent); }
.search-row:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.search-symbol { align-self:center; padding-left:10px; font:32px/1 sans-serif; color:var(--accent); }
input[type="search"] { flex:1 1 0%; min-width:0; width:100%; max-width:100%; min-height:62px; border:0; background:transparent; color:var(--fg); padding:8px 12px; font-size:22px; font-weight:600; letter-spacing:.03em; border-radius:5px; }
input[type="search"]::placeholder { color:var(--muted); opacity:.8; }
input[type="search"]:focus-visible { outline:none; }
.search-row button { flex:0 0 auto; border:0; background:var(--accent); color:var(--accent-fg); padding-inline:18px; font-size:14px; display:flex; align-items:center; gap:14px; }
.search-row button span { font-size:21px; }
#search-help { margin:11px 0 0; color:var(--muted); font-size:11px; }
.section-head { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); padding:10px 0 15px; }
.section-head h2 { margin:0; font-size:16px; }
#result-count { font-size:11px; color:var(--muted); }
.resource-list { list-style:none; padding:0; margin:0; }
.resource-card { display:flex; gap:16px; align-items:center; min-height:109px; padding:21px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg); }
.resource-card:hover .card-title { color:var(--accent); }
.code { display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:62px; min-height:62px; text-align:center; font:600 24px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.06em; color:var(--accent); background:var(--code-bg); border:1px solid var(--line); border-radius:5px; }
.code small { font:700 8px/1 "Manrope",sans-serif; letter-spacing:.15em; }
.card-content { flex:1; min-width:0; }
.card-meta,.card-title { display:block; }
.card-meta { font-size:9px; letter-spacing:.075em; }
.card-title { margin-top:7px; font-size:16px; font-weight:700; letter-spacing:-.025em; line-height:1.4; overflow-wrap:anywhere; }
.card-arrow { font-size:23px; color:var(--muted); padding-right:3px; }
.record-link { display:flex; justify-content:space-between; gap:20px; margin-top:36px; padding:23px; background:var(--code-bg); border:1px solid var(--line); border-radius:7px; text-decoration:none; color:var(--fg); }
.record-link strong,.record-link > span > span { display:block; }
.record-link strong { font-size:17px; margin-top:9px; letter-spacing:-.025em; }
.record-link > span > span:last-child { color:var(--muted); font-size:12px; margin-top:5px; }
.record-link > span:last-child { font-size:24px; }
.back { display:inline-flex; align-items:center; min-height:48px; font-size:12px; margin-top:18px; }
.resource-heading { margin:26px 0 32px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.resource-heading h1 { font-size:clamp(34px,7vw,56px); }
article { width:100%; max-width:760px; min-width:0; margin:auto; }
video { display:block; width:100%; max-height:70svh; background:#000; border-radius:8px; margin:24px 0 36px; }
.prose { overflow-wrap:anywhere; font-size:16px; line-height:1.8; }
.prose h1 { font-size:36px; }
.prose h2,.prose h3 { margin-top:34px; font-weight:800; }
.prose li { margin:8px 0; }
.prose ul,.prose ol { padding-left:24px; }
.prose input[type="checkbox"] { accent-color:var(--accent); width:16px; height:16px; vertical-align:middle; }
blockquote { border-left:3px solid var(--accent); margin:24px 0; padding:1px 18px; color:var(--muted); background:var(--code-bg); }
code { font:.86em/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--code-bg); padding:2px 5px; border-radius:3px; }
.code-block { position:relative; background:var(--code-bg); border:1px solid var(--line); border-radius:7px; margin:24px 0; padding-top:62px; }
.code-block::before { content:"COPY / PASTE / MAKE IT YOURS"; position:absolute; top:24px; left:18px; color:var(--muted); font:700 8px/1 "Manrope",sans-serif; letter-spacing:.08em; }
.copy { position:absolute; top:7px; right:7px; font-size:12px; min-width:78px; }
.copy[data-copied="true"] { background:var(--accent); color:var(--accent-fg); }
pre { width:100%; max-width:100%; min-width:0; overflow-x:auto; white-space:pre; margin:0; padding:18px; border-top:1px solid var(--line); }
pre code { padding:0; background:none; }
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th,td { padding:12px; text-align:left; border-bottom:1px solid var(--line); min-width:100px; }
th { background:var(--panel); }
hr { border:0; border-top:1px solid var(--line); margin:32px 0; }
.downloads { border-top:1px solid var(--line); margin-top:32px; padding:16px 0; }
.button { display:inline-flex; align-items:center; text-decoration:none; margin:5px 0; background:var(--panel); }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:60px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; padding-top:20px; padding-bottom:30px; }
footer a { min-height:44px; display:inline-flex; align-items:center; margin-top:-12px; }
.copy-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--accent-fg); padding:12px 22px; border-radius:7px; box-shadow:0 4px 24px #0002; font-size:13px; z-index:10; max-width:90vw; }
.bonus-found { padding:24px; background:var(--code-bg); border:2px solid var(--accent); border-radius:8px; margin:8px 0 20px; }
.bonus-found h2 { margin:12px 0; }
.bonus-found p,.empty-note { color:var(--muted); font-size:14px; }
.bonus-found .button { background:var(--accent); color:var(--accent-fg); }
.scoreboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.scoreboard > div { min-width:0; overflow-wrap:anywhere; padding:18px 5px; text-align:center; border-right:1px solid var(--line); }
.scoreboard > div:last-child { border:0; }
.scoreboard strong { display:block; font-size:clamp(25px,6vw,40px); font-weight:800; line-height:1.3; letter-spacing:-.06em; }
.scoreboard span { font-size:11px; color:var(--muted); }
.score-note { color:var(--muted); font-size:11px; margin:12px 0 30px; }
.prediction-list { list-style:none; margin:0; padding:0; }
.prediction-card { padding:24px 0; border-bottom:1px solid var(--line); }
.call-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; }
.status { padding:5px 11px; border:1px solid var(--line); border-radius:4px; text-transform:uppercase; font-weight:800; letter-spacing:.1em; font-size:10px; }
.status-right { background:#d7ef83; color:#254332; border-color:#86a45f; }
.status-wrong { background:#f6d2bc; color:#793a28; border-color:#c49b7d; }
.call-dates { color:var(--muted); font-size:12px; }
.call-links { display:flex; flex-wrap:wrap; gap:20px; }
.call-links a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
.skip { position:fixed; left:16px; top:-100px; padding:12px; background:var(--panel); z-index:10; }
.skip:focus { top:16px; }
@media(min-width:640px) { .masthead,main,footer { padding-inline:40px; } .home-hero { padding-top:52px; padding-bottom:46px; } .home-hero h1 { max-width:700px; } #search { max-width:720px; margin-top:36px; } input[type="search"] { min-height:72px; font-size:28px; } .search-row button { padding-inline:28px; } .resource-card { gap:24px; min-height:115px; } .card-title { font-size:19px; } .code { min-width:72px; min-height:66px; } .card-meta { font-size:10px; } .record-link { padding:28px; } .record-link strong { font-size:22px; } }
@media(max-width:639px) {
  .search-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; min-width:0; }
  .scoreboard { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scoreboard > div:nth-child(2n) { border-right:0; }
  .scoreboard > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .call-meta { flex-wrap:wrap; }
}
@media(max-width:360px) { .masthead,main,footer { padding-inline:18px; } #theme span { display:none; } .brand { font-size:13px; } .search-row button { padding-inline:12px; gap:7px; } .code-block::before { content:"PROMPT"; } }
@media(prefers-reduced-motion:no-preference) { a,button { transition:color .15s,background .15s,border-color .15s; } .bonus-found { animation:found .25s ease-out; } @keyframes found { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } }