:root {
  --graphite: #202124; --paper: #F5F5F2; --white: #FFFFFF; --grey: #6B6D72; --grey-dark: #A0A2A7;
  --rule: #E2E2DE; --rule-dark: #3A3B3F; --exit: #F5C400; --go: #1E7D45; --stop: #C0392B; --first: #C8A24A; --ring: #FF982F;
  --zh: 'Noto Sans HK', sans-serif; --ja: 'Noto Sans JP', sans-serif;
  --ease: cubic-bezier(.2, .7, .3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #000; color: var(--graphite); font-family: 'Golos Text', 'Noto Sans HK', 'Noto Sans JP', system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
body.nocursor, body.nocursor * { cursor: none !important; }
[lang="zh-HK"] { font-family: var(--zh); }
[lang="ja"] { font-family: var(--ja); }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.dark { background: var(--graphite); color: var(--white); }
.light { background: var(--white); color: var(--graphite); }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.one { white-space: nowrap; overflow: hidden; min-width: 0; }
.num { font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; flex-shrink: 0; letter-spacing: -0.02em; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 6px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.empty span:nth-child(1) { font-size: 54px; font-weight: 500; }
.empty span:nth-child(2) { font-size: 32px; opacity: .8; }
.empty span:nth-child(3) { font-size: 22px; opacity: .6; }
.conn { position: absolute; right: 18px; bottom: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--exit); opacity: 0; transition: opacity .4s; }
.conn.on { opacity: .9; animation: blink 1.6s linear infinite; }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .25 } }
@keyframes pulse { from { transform: scale(1); opacity: .75 } to { transform: scale(2.6); opacity: 0 } }
@keyframes inUp { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes inRight { from { opacity: 0; transform: translateX(48px) } to { opacity: 1; transform: none } }
@keyframes inFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rowIn { from { opacity: 0; transform: translateY(-14px) } to { opacity: 1; transform: none } }
@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes fill { from { width: 0 } to { width: 100% } }
@keyframes nudge { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes doorL { from { transform: translateX(-28px) } to { transform: none } }
@keyframes doorR { from { transform: translateX(28px) } to { transform: none } }
@keyframes spin { to { transform: rotate(360deg) } }
.in-up { animation: inUp 520ms var(--ease) both; }
.in-right { animation: inRight 520ms var(--ease) both; }
.in-fade { animation: inFade 600ms ease both; }
.row-in { animation: rowIn 520ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
:focus-visible { outline: 3px solid var(--exit); outline-offset: 2px; }