* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #0b0c0e; color: #e9e5da; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: #9db7ff; }
code, pre, select, input, button { font-family: ui-monospace, Consolas, monospace; }
.muted { color: #8b897f; }
header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #222; }
h1 { margin: 0; font-size: 28px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 12px; }
.logo { width: 42px; height: 42px; border-radius: 9px; }
#brainmap { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #07080a; border-radius: 8px; }
.small { font-size: 12px; margin: 8px 0 0; }
.k { font-style: normal; font-family: ui-monospace, Consolas, monospace; }
.k::before { content: "●"; margin-right: 3px; }
.k.eye { color: #6d95ff; } .k.mot { color: #ff6b3d; } .k.oth { color: #d4f24a; }
.tag { margin: 4px 0 0; color: #b5b1a6; max-width: 60ch; }
.status { display: flex; gap: 22px; align-items: center; }
.status span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #8b897f; }
.status b { font-family: ui-monospace, Consolas, monospace; font-size: 16px; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; padding: 20px 24px; }
.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
select, input, button { background: #15171a; color: #e9e5da; border: 1px solid #2c2e33; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
button { cursor: pointer; }
button:hover { border-color: #555; }
#scrub { flex: 1; min-width: 120px; padding: 0; }
.canvas-wrap { position: relative; width: 100%; max-width: 760px; aspect-ratio: 1; }
#arena { width: 100%; height: 100%; display: block; border-radius: 10px; }
.empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #8b897f; padding: 20px; }
.dn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 760px; margin-top: 12px; }
.dn span { display: block; font-size: 11px; color: #8b897f; text-transform: uppercase; letter-spacing: 0.08em; }
.dn i { display: block; height: 6px; width: 0; background: #ffd166; border-radius: 3px; transition: width 0.15s; }
.note { max-width: 760px; color: #8b897f; font-size: 13px; }
.demo-btn { border-color: #ffd166; color: #ffd166; }
.demo-banner { max-width: 760px; margin-bottom: 10px; padding: 8px 12px; border: 1px dashed #ffd166; border-radius: 8px; color: #ffd166; font-size: 13px; }
.card { background: #111215; border: 1px solid #222; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.card h2 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13px; }
.kv dt { color: #8b897f; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv code { font-size: 11.5px; }
#me { width: 100%; }
.winners { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.winners th { text-align: left; color: #8b897f; font-weight: 500; border-bottom: 1px solid #222; padding: 4px; }
.winners td { padding: 4px; border-bottom: 1px solid #1a1b1e; }
.winners tr.me td { background: rgba(109, 149, 255, 0.15); }
.winners tbody { display: block; max-height: 380px; overflow: auto; }
.winners thead, .winners tbody tr { display: table; width: 100%; table-layout: fixed; }
.rules { margin: 0 24px 20px; }
.rules li { margin-bottom: 6px; }
pre { background: #0b0c0e; border: 1px solid #222; border-radius: 6px; padding: 10px; overflow-x: auto; }
footer { padding: 10px 24px 30px; font-size: 12px; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } .status { gap: 14px; } }