@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Mono:wght@400;500&family=Bodoni+Moda:wght@700;800&family=Archivo:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root {
  --bg: #100805;
  --panel: #11131c;
  --panel-2: #151827;
  --line: #74572d;
  --muted: #bca986;
  --text: #f5f1e8;
  --orange: #dfb65f;
  --orange-2: #f06c3b;
  --green: #82e1a6;
  --purple: #a78bfa;
  --blue: #72b8ff;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); }
body { overflow-x: hidden; }
button, textarea { font: inherit; }
button { cursor: pointer; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }
.app-shell { max-width: 1240px; margin: 0 auto; padding: 24px 26px 18px; position: relative; z-index: 1; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 38px; height: 38px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark span { background: var(--orange); box-shadow: 3px 3px 0 #7f3524; }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(4) { opacity: .55; }
.brand-mark span:nth-child(2) { grid-column: 2 / 4; }
.brand-mark span:nth-child(3) { grid-column: 1 / 3; grid-row: 3 / 5; background: var(--green); box-shadow: 3px 3px 0 #277756; }
.eyebrow { color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.04em; line-height: 1.05; margin-top: 7px; }
h1 span { color: var(--orange); font-weight: 400; }
.top-actions { display: flex; align-items: center; gap: 16px; }
.signal, .sound-toggle { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); }
.signal { display: flex; align-items: center; gap: 8px; }
.signal i, .live-pill i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(130,225,166,.10), 0 0 14px var(--green); animation: pulse 1.9s infinite; }
.sound-toggle { background: none; border: 0; padding: 8px 0 8px 12px; border-left: 1px solid var(--line); color: var(--text); }
.sound-icon { color: var(--orange); letter-spacing: -.14em; margin-right: 8px; }
.layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 20px; margin-top: 22px; }
.game-column, .side-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel { background: linear-gradient(140deg, rgba(25,27,39,.97), rgba(13,14,22,.98)); border: 1px solid var(--line); box-shadow: 0 18px 55px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025); }
.scene-wrap { padding: 12px 12px 0; overflow: hidden; }
.scene-label, .scene-caption, .picker-label, .input-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; font: 500 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.scene-label { padding: 2px 5px 11px; }
.scene-label span:last-child { color: var(--orange); }
#scene { display: block; width: 100%; height: auto; aspect-ratio: 960 / 390; background: #111824; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid #2b3342; object-fit: contain; }
.scene-caption { padding: 10px 5px 12px; text-transform: none; letter-spacing: 0; }
.scene-caption > span { display: inline-flex; align-items: center; gap: 6px; }
.caption-tip { margin-left: auto; color: #9a9fb3; }
.dot { width: 6px; height: 6px; display: inline-block; border-radius: 1px; }
.dot-green { background: var(--green); }.dot-orange { background: var(--orange); }
.race-panel { padding: 24px 26px 22px; }
.race-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.race-head h2 { font-size: clamp(20px, 2.5vw, 29px); letter-spacing: -.04em; margin-top: 8px; }
.race-clock { color: var(--orange); font: 500 24px var(--mono); letter-spacing: -.08em; }
.progress-track { height: 5px; background: #262a3a; margin: 20px 0 18px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--orange-2), var(--orange), var(--green)); transition: width .18s ease-out; box-shadow: 0 0 15px rgba(255,157,77,.52); }
.quote-card { min-height: 88px; padding: 10px 0 8px; border: 0; background: transparent; color: #a6acc0; font: 500 17px/1.65 var(--mono); letter-spacing: -.03em; word-break: break-word; outline: none; }
.quote-card:focus { outline: none; }
.typing-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: stretch; margin-top: 5px; }
.quote-card .correct { color: var(--green); }.quote-card .current { color: var(--text); background: rgba(255,157,77,.22); box-shadow: 0 0 0 2px rgba(255,157,77,.1); }.quote-card .wrong { color: #ff6e67; background: rgba(255,70,70,.12); }
.typing-input { display: block; width: 100%; resize: none; min-height: 86px; margin-top: 0; padding: 14px 16px; border: 1px solid #353b52; background: #0b0d14; color: var(--text); font: 500 16px/1.5 var(--mono); outline: none; caret-color: var(--orange); }
.typing-input::placeholder { color: #5e6376; }.typing-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,157,77,.1); }
.typing-row .primary-btn { min-height: 86px; width: 100%; font-size: 15px; letter-spacing: .14em; }
.input-meta { padding: 8px 1px 0; text-transform: none; letter-spacing: 0; }.input-meta b { color: var(--text); }
.race-actions { display: flex; align-items: center; gap: 11px; margin-top: 19px; }
.primary-btn, .ghost-btn { min-height: 40px; border-radius: 2px; padding: 0 17px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: transform .2s, filter .2s, background .2s; }
.primary-btn { border: 1px solid #ffb267; color: #1c110b; background: linear-gradient(135deg, #ffb361, #f07847); box-shadow: 0 5px 0 #91432c, 0 10px 25px rgba(240,108,59,.17); }.primary-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }.primary-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #91432c; }.primary-btn:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.25); box-shadow: none; }
.ghost-btn { border: 1px solid #454b61; color: #b4bbcd; background: #191c29; }.ghost-btn:hover { border-color: var(--orange); color: var(--text); }
.race-note { margin-left: auto; color: var(--muted); font: 10px var(--mono); }.kbd { color: var(--text); border: 1px solid #444a60; background: #202437; padding: 3px 5px; font-size: 9px; }
.quote-picker { padding: 13px 16px 15px; }.picker-label { margin-bottom: 11px; text-transform: none; letter-spacing: 0; }.picker-label .eyebrow { text-transform: uppercase; letter-spacing: .16em; }
.signal-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.signal-option { position: relative; border: 1px solid #30364b; padding: 11px 12px; background: #0d1019; color: #858ba0; text-align: left; min-height: 66px; }.signal-option:hover { border-color: #5d667e; }.signal-option.active { border-color: var(--orange); background: rgba(255,157,77,.07); color: var(--text); box-shadow: inset 3px 0 var(--orange); }.signal-option b { display: block; color: var(--orange); font: 500 10px var(--mono); margin-bottom: 5px; }.signal-option span { display: block; font: 12px/1.4 var(--mono); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.stat-card { position: relative; min-height: 122px; padding: 14px 13px; overflow: hidden; }.stat-label { display: block; color: var(--muted); font: 500 9px var(--mono); letter-spacing: .1em; }.stat-card strong { display: inline-block; margin-top: 18px; font: 500 31px var(--mono); letter-spacing: -.12em; }.stat-card small { color: var(--muted); font: 10px var(--mono); margin-left: 3px; }.stat-spark { position: absolute; right: 10px; bottom: 11px; width: 33px; height: 20px; opacity: .9; background: linear-gradient(135deg, transparent 47%, currentColor 48%, currentColor 53%, transparent 54%), linear-gradient(25deg, transparent 38%, currentColor 39%, currentColor 43%, transparent 44%), linear-gradient(155deg, transparent 58%, currentColor 59%, currentColor 63%, transparent 64%); }.spark-orange { color: var(--orange); }.spark-green { color: var(--green); }.spark-purple { color: var(--purple); }
.leaderboard { padding: 21px 18px 17px; flex: 1; min-height: 340px; }.leader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.leader-head h2 { margin-top: 7px; font-size: 21px; letter-spacing: -.04em; }.live-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(130,225,166,.25); padding: 6px 8px; color: var(--green); font: 500 9px var(--mono); letter-spacing: .08em; }.live-pill i { width: 5px; height: 5px; box-shadow: none; }.leader-sub { margin-top: 10px; color: var(--muted); font: 11px/1.4 var(--mono); max-width: 290px; }.leader-list { display: flex; flex-direction: column; gap: 7px; margin-top: 19px; }.leader-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 9px; padding: 9px 9px; background: rgba(255,255,255,.025); border: 1px solid transparent; }.leader-row.you { border-color: rgba(255,157,77,.55); background: rgba(255,157,77,.08); }.leader-rank { color: #686e83; font: 500 11px var(--mono); }.leader-row:nth-child(1) .leader-rank { color: var(--orange); }.leader-name { display: flex; align-items: center; gap: 8px; font: 500 12px var(--mono); }.mini-avatar { width: 21px; height: 21px; display: inline-block; border: 1px solid #566079; background: linear-gradient(135deg, #bd7b58 0 38%, #212434 39% 67%, #7bcf9d 68%); image-rendering: pixelated; }.leader-wpm { color: var(--text); font: 500 12px var(--mono); }.leader-wpm small { color: var(--muted); font-size: 9px; }.leader-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); }.leader-foot b { color: var(--orange); font-weight: 500; }
.howto { padding: 18px; }.how-row { display: flex; gap: 11px; margin-top: 17px; }.how-icon { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border: 1px solid #424960; color: var(--orange); font: 9px var(--mono); }.how-row p { color: var(--text); font: 12px/1.35 var(--mono); }.how-row p span { color: var(--muted); font-size: 10px; }
.airdrop-rule { margin-top: 20px; max-width: 360px; color: var(--text); font: 600 20px/1.25 var(--mono); letter-spacing: -.06em; }
.footer { display: flex; justify-content: space-between; gap: 16px; padding-top: 17px; color: #585e72; font: 9px var(--mono); letter-spacing: .08em; }.footer b { color: var(--orange); }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(4,5,9,.78); backdrop-filter: blur(9px); opacity: 0; pointer-events: none; transition: opacity .25s; }.modal-backdrop.open { opacity: 1; pointer-events: auto; }.result-modal { width: min(480px, 100%); padding: 34px; text-align: center; position: relative; border-color: #4b4150; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,157,77,.14); }.modal-close { position: absolute; top: 11px; right: 15px; border: 0; background: none; color: #7e8497; font-size: 24px; }.result-stamp { display: inline-block; margin-bottom: 17px; padding: 7px 11px; border: 1px solid var(--green); color: var(--green); font: 500 10px var(--mono); letter-spacing: .18em; transform: rotate(-2deg); }.result-modal h2 { margin: 13px 0 21px; font-size: 27px; letter-spacing: -.05em; }.result-score { color: var(--orange); font: 500 75px/.9 var(--mono); letter-spacing: -.13em; text-shadow: 0 0 28px rgba(255,157,77,.25); }.result-score small { color: var(--text); font-size: 14px; letter-spacing: .06em; margin-left: 9px; }.result-details { display: flex; justify-content: center; gap: 20px; margin: 20px 0 25px; color: var(--muted); font: 11px var(--mono); }.result-details b { color: var(--text); font-weight: 500; }.result-actions { display: flex; justify-content: center; gap: 10px; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* The Factory's established cream, brass and velvet visual language. */
body { background: linear-gradient(90deg,rgba(8,4,2,.88),rgba(15,5,3,.74)), url('./factory.webp') center top / cover fixed; }
.panel { background: linear-gradient(130deg,rgba(43,12,8,.96),rgba(10,6,4,.96)); border-color: var(--line); box-shadow: 0 12px 40px #0005, inset 0 0 0 5px #130b0655; }
h1 { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 800; letter-spacing: -.045em; font-size: clamp(26px,3vw,38px); }
.race-head h2,.leader-head h2,.result-modal h2 { font-family: 'Oswald',sans-serif; font-weight: 600; letter-spacing: .015em; }
.race-head h2 { font-size: clamp(25px,2.6vw,34px); }
.brand-mark { transform: none; }
.brand-mark span,.brand-mark span:nth-child(3) { background: var(--orange); box-shadow: 2px 2px 0 #6e431c; }
.primary-btn { font-family:'Oswald',sans-serif; font-size:18px; color:#fff4cf; border:2px solid #dfb65f; background:linear-gradient(#b23c2e,#751d19); box-shadow:inset 0 0 0 3px #57170f,inset 0 0 0 5px #b77e50,0 4px 15px #0005; }
.typing-row .primary-btn { font-size:24px; letter-spacing:.045em; }
.primary-btn:active:not(:disabled) { box-shadow:inset 0 0 0 3px #57170f,inset 0 0 0 5px #b77e50; }
.ghost-btn,.signal-option,.typing-input { background:#100805; border-color:#74572d; color:#f4e8ca; }
.typing-input::placeholder { color:#b19e80; }
.quote-card,.training-note,.leader-list,.live-metrics,.caption-tip { color:#cdbd9f; }
.progress-track { background:#483020; }
.progress-fill { background:linear-gradient(90deg,#8c2921,#e1bb6d); box-shadow:none; }
.footer,.leader-rank { color:#bca986; }
.how-icon,#scene { border-color:#74572d; }
.result-modal { border-color:#c59b50; }
.result-score { font-family:'Oswald',sans-serif; letter-spacing:-.04em; }
.factory-link { color: var(--text); font: 11px var(--mono); text-underline-offset: 4px; }
.sound-toggle { min-height: 44px; line-height: 1.5; }
.race-head h2 { line-height: 1.1; }
.race-clock { flex: none; font-size: 22px; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.quote-card { white-space: pre-wrap; overflow-wrap: anywhere; font-size: clamp(16px, 1.7vw, 20px); color: #b9bdd0; }
.quote-card:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.live-metrics { display: flex; gap: 18px; font: 12px var(--mono); color: #a9aec1; }
.live-metrics b { color: var(--green); font-size: 18px; }
.training-note { margin-top: 14px; color: #a9aec1; font: 13px/1.65 var(--sans); }
.leader-list { color: #a9aec1; font-size: 13px; line-height: 1.6; }
.modal-backdrop:not(.open) { visibility: hidden; }
.result-modal { max-height: calc(100dvh - 40px); overflow: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 620px) { .app-shell { padding: 16px 12px; }.topbar { gap: 12px; padding-bottom: 14px; }.eyebrow { line-height: 1.5; }.race-head { flex-wrap: wrap; gap: 12px; }.race-head h2 { font-size: 23px; }.race-clock { font-size: 20px; }.scene-caption { font-size: 9px; }.caption-tip { display: none !important; }.input-meta { align-items: flex-start; line-height: 1.6; }.input-meta > span:last-child { flex: none; }.result-modal { padding: 28px 18px; }.result-details { gap: 12px; }.result-actions { flex-wrap: wrap; }.quote-card { font-size: 16px !important; }.sound-toggle { max-width: 108px; padding: 4px 0; border: 0; }.top-actions { gap: 4px !important; } }
@media (max-width: 980px) { .app-shell { padding: 22px 18px 15px; }.layout { grid-template-columns: 1fr; }.side-column { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }.stats-grid { grid-column: 1 / -1; }.leaderboard { min-height: 0; }.howto { min-height: 0; } }
@media (max-width: 620px) { .topbar { align-items: flex-start; }.top-actions { flex-direction: column; align-items: flex-end; gap: 8px; }.signal { display: none; }.layout { margin-top: 14px; gap: 14px; }.game-column, .side-column { gap: 14px; }.scene-caption { flex-wrap: wrap; }.caption-tip { margin-left: 0; width: 100%; }.race-panel { padding: 20px 16px 18px; }.race-head h2 { font-size: 22px; }.quote-card { font-size: 14px; min-height: 94px; }.typing-row { grid-template-columns: 1fr; }.typing-input { min-height: 72px; }.typing-row .primary-btn { min-height: 58px; font-size: 13px; }.race-actions { flex-wrap: wrap; }.race-note { width: 100%; margin-left: 0; }.signal-list { grid-template-columns: 1fr; }.side-column { display: flex; }.stats-grid { gap: 6px; }.stat-card { min-height: 106px; padding: 12px 9px; }.stat-card strong { font-size: 25px; }.footer { flex-wrap: wrap; font-size: 8px; } }

/* Source stays directly beneath each passage, before the typing field. */
.quote-source { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; margin:4px 0 18px; padding-bottom:12px; border-bottom:1px solid rgba(212,170,89,.2); font:500 11px/1.5 var(--mono); }
.quote-source a { color:var(--orange); text-underline-offset:4px; }
.quote-source a:hover { color:var(--text); }
.post-navigation { display:flex; align-items:center; flex-wrap:wrap; gap:14px; color:var(--muted); }
.post-navigation button { border:0; padding:8px 0 8px 8px; background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.post-navigation button:hover { color:var(--orange); }

.original-panel { padding:22px 18px; min-width:0; }
.original-panel h2 { font:700 25px/1.15 Oswald,sans-serif; margin:9px 0 18px; color:#f6ecd2; }
.tweet-embed { min-width:0; min-height:230px; }
.tweet-mount { width:100%; min-width:0; }
.tweet-mount iframe { max-width:100%!important; }
.tweet-fallback { padding:18px; background:#0c0806; border:1px solid #49371f; font:14px/1.6 Archivo,sans-serif; }
.tweet-fallback strong { color:#f6ecd2; }
.tweet-fallback p { color:#dfd2b7; overflow-wrap:anywhere; }
.tweet-fallback a { color:#dfb65f; }
.tweet-fallback small { display:block; margin-top:16px; color:#a28b67; font-size:11px; }

/* Shared Factory framing. The canvas and its animation are unchanged. */
@font-face{font-family:Oswald;src:url('./fonts/Oswald-Bold.ttf');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('./fonts/IBMPlexMono-SemiBold.ttf');font-weight:600;font-display:swap}
:root{--text:#f6ecd2;--muted:#c8b493;--mono:'IBM Plex Mono',monospace;--orange:#dfb65f;--panel:#190b07;--line:#806036}
.app-shell{max-width:1440px;padding:0 28px 24px}
.factory-brandbar{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #74572d;background:#090604;padding:12px 24px;margin-inline:-28px}
.factory-brandbar>a:first-child{font:700 22px 'Bodoni Moda',Georgia,serif;color:#f0d293;text-decoration:none}
.factory-brandbar .employee-link{font:600 10px var(--mono);letter-spacing:1.5px;color:#dfb65f;text-decoration:none}
.topbar{padding:24px 0;border-bottom:1px solid #806036;align-items:center}
.brand-lockup h1{font:700 clamp(34px,4vw,52px)/1.1 Oswald,sans-serif;letter-spacing:-1px;margin:7px 0 0;color:#f6ecd2}
.brand-lockup h1 span{color:#dfb65f}
.eyebrow{color:#d4b270;font:600 10px/1.5 var(--mono);letter-spacing:1.6px}
.top-actions{display:flex;align-items:center;gap:28px}
.record-stat{display:flex;flex-direction:column;gap:6px;text-decoration:none;white-space:nowrap}
.record-stat span{font:600 9px var(--mono);letter-spacing:1px;color:#c8b493}
.record-stat b{font:700 27px/1.1 Oswald,sans-serif;color:#f6ecd2}
.rank-link{border-left:1px solid #614826;padding-left:24px}
.sound-toggle{color:#dfb65f;font:600 10px/1.5 var(--mono);border:1px solid #74572d;padding:10px 12px;background:#130c07}
.account-strip{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:12px 0;color:#bba380;font:600 10px/1.6 var(--mono)}
.account-strip a{color:#dfb65f;text-underline-offset:3px}
.account-strip>span:last-child{color:#947d5c}
.layout{grid-template-columns:minmax(0,1fr) 350px;gap:22px;margin-top:6px;align-items:start}
.game-column,.side-column{min-width:0;gap:22px}
.panel{border:1px solid #94703b;border-radius:0;background:linear-gradient(115deg,#230e08,#130906);box-shadow:inset 0 0 0 5px #35231955}
.scene-wrap{padding:5px}
.scene-label{border-bottom:1px solid #74572d;background:#100805;color:#d4b270;padding:10px 13px;font:600 9px var(--mono);letter-spacing:1px}
.scene-caption{font:500 9px/1.5 var(--mono);background:#100805;padding:10px 12px;border-top:1px solid #49371f}
.race-panel{padding:24px}
.race-head h2{font:700 clamp(24px,2.5vw,32px)/1.15 Oswald,sans-serif;letter-spacing:0;color:#f6ecd2}
.race-clock{font:600 22px var(--mono);letter-spacing:-1px}
.progress-track{height:3px;background:#49371f;margin:20px 0 16px}
.progress-fill{background:#dfb65f;box-shadow:none}
.quote-card{font-family:var(--mono);color:#cfbd9d;font-size:16px;line-height:1.75;letter-spacing:-.4px}
.typing-input{background:#090503;border-color:#806036;color:#f6ecd2;border-radius:0;font-size:15px}
.typing-input::placeholder{color:#9c886a}
.primary-btn{font-family:Oswald,sans-serif!important;font-weight:700!important;letter-spacing:.5px!important;color:#fff1ce;background:linear-gradient(#ac3529,#7a201a);border:1px solid #dfb65f;outline:1px solid #87672f;outline-offset:3px;border-radius:0;box-shadow:inset 0 0 0 4px #67251c}
.primary-btn:hover:not(:disabled){transform:none;filter:brightness(1.12)}
.typing-row .primary-btn{font-size:24px;min-height:74px}
.primary-btn:active:not(:disabled){transform:translateY(1px)}
.input-meta,.live-metrics,.race-note{color:#c8b493}
.kbd{border-color:#74572d;background:#100805}
.original-panel h2{font-size:27px;letter-spacing:.4px}
.original-panel{padding:22px 16px}
.typing-leaderboard{margin:26px 0 0;padding:0 24px;border:1px solid #806036;background:#100805;scroll-margin-top:20px}
.typing-leaderboard>header{padding:22px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.typing-leaderboard h2{font:700 30px/1 Oswald,sans-serif;margin:0;letter-spacing:.5px;color:#f6ecd2}
.typing-leaderboard header p{font:600 10px var(--mono);letter-spacing:1px;color:#a28b67;margin:0}
.typing-leaderboard table{border-collapse:collapse;width:100%;table-layout:fixed;font:600 14px var(--mono);font-variant-numeric:tabular-nums}
.typing-leaderboard thead{text-align:left;color:#d4b270;font:600 10px var(--mono);letter-spacing:1.3px}
.typing-leaderboard tr{height:48px;border-bottom:1px solid #382b1a}
.typing-leaderboard th,.typing-leaderboard td{padding:9px 14px}
.typing-leaderboard th:first-child,.typing-leaderboard td:first-child{width:58px;color:#d8b76e}
.typing-leaderboard th:last-child,.typing-leaderboard td:last-child{width:160px;text-align:right}
.typing-leaderboard tbody th{text-align:left;font-weight:600}
.typing-leaderboard tbody td:last-child{color:#f6ecd2}
.typing-leaderboard .profile-link{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:30px;color:#f6ecd2;text-decoration:none}
.profile-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-link svg{flex:none;color:#ad936d}
.profile-link:hover{color:#dfb65f;text-decoration:underline}
.leaderboard-you{background:#56231b;border-block:1px solid #946638!important}
.leaderboard-you small{display:inline-block;margin-left:12px;color:#efd294;font:600 9px var(--mono)}
.leaderboard-gap{height:24px!important;color:#907755}
.typing-leaderboard .leaderboard-gap td{padding-block:0;text-align:left;width:auto}
.leaderboard-scroll{max-height:400px;overflow:auto;scrollbar-color:#b78b42 #211209;scrollbar-width:thin}
.game-save-note{margin:0 0 14px;padding:10px 14px;border:1px solid #735630;background:#100805;color:#c8b493;font:11px/1.55 'IBM Plex Mono',monospace;}
.game-save-note strong{color:#dfb65f;}
.game-save-note a{color:#efd294;text-decoration:underline;text-underline-offset:3px;}
.typing-leaderboard td del{color:#ad936d;margin-right:6px;}
.typing-leaderboard .points-warning{color:#efc261;margin-left:5px;}
@media(max-width:600px){.game-save-note{font-size:10px;padding:9px 11px;}}
.leaderboard-scroll thead th{position:sticky;top:0;background:#100805;z-index:1}
.leaderboard-message{font:13px/1.6 var(--sans);color:#c8b493;margin:0;padding:12px 0}
.leaderboard-message:empty{display:none}
.typing-leaderboard>footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;color:#9c886a;font:600 10px var(--mono)}
.typing-leaderboard footer button{padding:10px;background:none;border:0;color:#e0bf7b;font:600 10px var(--mono);text-decoration:underline;text-underline-offset:4px}
[hidden]{display:none!important}
.footer{color:#9c886a;line-height:1.7}
.result-modal{border-color:#ac8445;background:#160c07}
.result-modal h2,.result-score{font-family:Oswald,sans-serif;font-weight:700}
.result-actions .primary-btn{font-size:19px;min-height:48px}
@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 310px;gap:16px}.app-shell{padding-inline:20px}.factory-brandbar{margin-inline:-20px}.race-panel{padding:20px}.top-actions{gap:20px}.caption-tip{display:none!important}.typing-row{grid-template-columns:minmax(0,1fr) 130px}.typing-row .primary-btn{font-size:21px}}
@media(max-width:850px){.layout{grid-template-columns:1fr}.side-column{display:block}.original-panel{max-width:none}.tweet-embed{max-width:550px;margin-inline:auto}.typing-row{grid-template-columns:minmax(0,1fr) 160px}.top-actions{gap:14px}.rank-link{padding-left:14px}.record-stat b{font-size:24px}}
@media(max-width:620px){.app-shell{padding:0 12px 18px}.factory-brandbar{margin-inline:-12px;padding:14px 12px;gap:12px}.factory-brandbar>a:first-child{font-size:18px}.factory-brandbar .employee-link{font-size:8px;letter-spacing:.5px}.topbar{padding:18px 0;flex-wrap:wrap;gap:18px}.brand-lockup{width:100%}.brand-lockup h1{font-size:38px}.top-actions{width:100%;flex-direction:row;justify-content:space-between;align-items:center;gap:10px}.rank-link{padding-left:12px}.record-stat b{font-size:24px}.sound-toggle{max-width:92px;padding:8px;font-size:9px;border:1px solid #74572d}.record-stat span{font-size:8px}.account-strip{font-size:9px}.race-panel{padding:18px 16px}.race-head{align-items:center}.race-head h2{font-size:25px}.race-clock{font-size:18px}.quote-card{font-size:15px!important}.typing-row{grid-template-columns:1fr}.typing-row .primary-btn{min-height:48px;font-size:23px}.scene-label{font-size:7px;letter-spacing:.5px}.scene-caption{font-size:7px}.typing-leaderboard{padding-inline:12px;margin-top:18px}.typing-leaderboard h2{font-size:26px}.typing-leaderboard header p{font-size:8px}.typing-leaderboard table{font-size:12px}.typing-leaderboard th,.typing-leaderboard td{padding:9px 5px}.typing-leaderboard th:first-child,.typing-leaderboard td:first-child{width:38px}.typing-leaderboard th:last-child,.typing-leaderboard td:last-child{width:78px}.typing-leaderboard thead{font-size:8px;letter-spacing:.5px}.leaderboard-you small{font-size:8px;margin-left:6px}.typing-leaderboard>footer{font-size:9px;gap:8px;flex-wrap:wrap}.typing-leaderboard footer button{padding:10px 4px;font-size:9px}}

.side-column{display:flex;flex-direction:column;min-width:0}.original-panel{width:100%;overflow:hidden}

.original-panel h2{font:600 11px/1.5 var(--mono);text-transform:none;letter-spacing:.5px;margin:0 0 14px;color:#c8b493}.race-head h2{text-transform:none;margin-top:0}.next-post{margin-left:auto;border:0;background:none;color:#dfb65f;font:600 11px var(--mono);padding:8px;cursor:pointer}.next-post:disabled{opacity:.4;cursor:wait}

.typing-input{font-size:16px}.next-post,.sound-toggle{min-height:44px}.typing-leaderboard footer button{min-height:44px}

.race-title-row{display:flex;align-items:center;gap:18px}.founder-loop{display:block;flex:none;width:60px;height:80px;overflow:hidden}.founder-loop img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.race-title-row h1{margin:0}@media(max-width:620px){.race-title-row{gap:14px}.founder-loop{width:48px;height:64px}}

.points-stat{border-left:1px solid #614826;padding-left:24px}.points-stat b{color:#efd294}
.typing-leaderboard th:first-child,.typing-leaderboard td:first-child{width:auto;color:inherit;text-align:left}
.typing-leaderboard th:nth-child(2),.typing-leaderboard td:nth-child(2){width:20%;text-align:right}
.typing-leaderboard th:last-child,.typing-leaderboard td:last-child{width:24%;text-align:right;color:#efd294}
.typing-leaderboard .entry-rank{display:inline-block;width:32px;margin-right:8px;font-size:11px;color:#ad936d}
.typing-leaderboard .profile-link{max-width:calc(100% - 45px)}
@media(max-width:620px){.points-stat{padding-left:12px}.typing-leaderboard .entry-rank{width:16px;margin-right:4px;font-size:9px}.typing-leaderboard .profile-link{max-width:calc(100% - 23px);font-size:11px;gap:4px}.typing-leaderboard .profile-link svg{width:10px}.typing-leaderboard .leaderboard-you small{display:none}.typing-leaderboard th:nth-child(2),.typing-leaderboard td:nth-child(2){width:18%}.typing-leaderboard th:last-child,.typing-leaderboard td:last-child{width:24%}}

/* Result image keeps the same 16:9 export framing on every screen. */
.result-modal{width:min(760px,100%);padding:28px;scrollbar-gutter:stable}
.result-modal .result-stamp{margin-bottom:8px}
.result-modal h2{font-size:24px;margin:10px 22px 16px}
.result-modal .result-score{font-size:56px;letter-spacing:-.02em}
.result-modal .result-points{margin:10px 0;font-size:18px}
.result-modal .result-details{margin:12px 0 18px}
.share-card{border-top:1px solid #5e4223;padding-top:18px;margin-bottom:20px}
.share-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid #ac8445}
.share-card img[hidden],.share-card-actions[hidden],.share-card-hint[hidden],#shareCardRetry[hidden]{display:none}
.share-card-actions{display:flex;gap:10px;margin-top:12px}
.share-card-actions a{flex:1;display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:46px;padding:10px 12px;font-family:Oswald,sans-serif;font-size:19px;letter-spacing:.03em}
.share-card-actions .ghost-btn{border:1px solid #ac8445;background:#27150d;color:#f5d78e}
#shareCardStatus,.share-card-hint{font:12px/1.55 'IBM Plex Mono',monospace;color:#bba782;margin:0 0 12px}
.share-card-hint{margin:12px 0 0}
@media(max-width:620px){.result-modal{padding:24px 16px}.result-modal h2{font-size:21px}.share-card-actions a{font-size:16px;padding:8px}.result-modal .result-details{font-size:10px}.result-modal .result-score{font-size:46px}}

.race-instruction{margin:8px 0 0;color:#e8cf97;font:400 15px/1.5 Arial,sans-serif;text-transform:none;letter-spacing:0;}

.guest-save-score { display:flex; align-items:center; justify-content:center; width:100%; margin:24px 0; padding:18px 22px; font-size:clamp(22px,4vw,32px); text-transform:none; }
.guest-save-score[hidden] { display:none; }

.guest-reward-offer { font-family:'IBM Plex Mono',monospace; }
.guest-reward-offer small { font-size:12px; }


.guest-reward-offer{text-align:center;margin:18px auto;color:#f6ecd3;max-width:480px}.guest-reward-offer[hidden]{display:none}.guest-reward-offer p{margin:10px 0;font-size:17px}.guest-reward-offer strong{display:block;font:700 clamp(30px,7vw,46px)/1.15 'Oswald',sans-serif}.guest-reward-offer strong span{white-space:nowrap}.guest-reward-offer small{display:block;color:#bda98b;line-height:1.5}.guest-reward-offer .reward-current-value{color:#dfb65f;font:400 clamp(18px,5vw,24px)/1.3 'IBM Plex Mono',monospace}.guest-reward-offer .primary-btn{display:block;margin-top:14px}.guest-save-score{width:100%;min-height:58px;border:3px solid #dfb65f;border-radius:7px;background:linear-gradient(#ad352a,#76201b);box-shadow:inset 0 0 0 3px #24100b,inset 0 0 0 5px #b96c45;font-size:24px;color:#fff0cc}

/* Keep the animation first, while leaving space for typing on desktop. */
@media(min-width:851px){
  #scene{height:clamp(120px,calc(100svh - 680px),280px);aspect-ratio:auto;object-fit:contain}
  .game-column{gap:16px}
}

.topbar{padding-block:16px}

.cheating-modal{position:relative;max-width:540px;padding:56px 36px 42px;text-align:center}.cheating-warning{display:block;font-size:36px;margin-bottom:20px}.cheating-modal h2{font-family:'Oswald',sans-serif;font-size:clamp(25px,4vw,36px);line-height:1.3;color:#f5ebd3}.cheating-modal .modal-close{position:absolute;right:14px;top:10px}