/* Glow, glass and motion effects layered over the base styles. */
body{background:
  radial-gradient(1100px 560px at 88% -8%,color-mix(in srgb,var(--c3) 20%,transparent),transparent 62%),
  radial-gradient(900px 520px at -8% 6%,color-mix(in srgb,var(--c2) 16%,transparent),transparent 60%),
  var(--bg);background-attachment:fixed}
.brand{text-transform:uppercase;letter-spacing:.1em;font-weight:700;background:linear-gradient(90deg,var(--c2),var(--c1) 45%,var(--c5));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand span{color:inherit}
h1{letter-spacing:0;font-weight:700}
.stripe{height:3px;background:linear-gradient(90deg,var(--c2),var(--c1),var(--c3),var(--c5),var(--c4),var(--c10),var(--c6),var(--c2));background-size:200% 100%;box-shadow:0 0 18px color-mix(in srgb,var(--c1) 70%,transparent);animation:flow 9s linear infinite}
@keyframes flow{to{background-position:200% 0}}
.pill,.chip,.eyebrow{border-radius:0;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.pill{padding-inline:13px}
.board,.card,.code,.net,.mk-topic,.mk-score,.mk-opt{background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.board,.card,.mk-topic,.mk-score{box-shadow:0 0 0 1px color-mix(in srgb,var(--cat) 22%,transparent),0 18px 50px -28px color-mix(in srgb,var(--cat) 85%,transparent)}
.card{transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px color-mix(in srgb,var(--cat) 55%,transparent),0 22px 54px -24px var(--cat)}
.card header{background:linear-gradient(120deg,var(--cat),color-mix(in srgb,var(--cat) 55%,var(--c3)))}
.card h3{letter-spacing:.04em;text-transform:uppercase;font-size:14px}
.btn{border-radius:4px}
.btn.pri{background:linear-gradient(135deg,var(--cat),color-mix(in srgb,var(--cat) 55%,var(--c5)));border-color:transparent;box-shadow:0 0 20px -4px var(--cat);letter-spacing:.04em;text-transform:uppercase;font-size:13px}
.board{border-top-width:2px}
#stage{background-color:var(--stage);background-size:26px 26px;box-shadow:inset 0 0 90px -30px color-mix(in srgb,var(--cat) 60%,transparent)}
#msg{font-family:var(--mono);font-size:13.5px;border-left:3px solid var(--cat)}
#msg::before{content:"›";color:var(--cat);margin-right:10px;font-weight:700}
.cell b{border-radius:3px}
.s-cmp b,td.s-cmp{box-shadow:0 0 16px -3px var(--cmp)}
.s-act b,td.s-act{box-shadow:0 0 16px -3px var(--accent)}
.s-ok b,td.s-ok{box-shadow:0 0 16px -3px var(--ok)}
.s-piv b,td.s-piv{box-shadow:0 0 16px -3px var(--piv)}
.s-bad b,td.s-bad{box-shadow:0 0 16px -3px var(--bad)}
svg .s-cmp circle{filter:drop-shadow(0 0 6px var(--cmp))} svg .s-act circle{filter:drop-shadow(0 0 6px var(--accent))}
svg .s-ok circle{filter:drop-shadow(0 0 6px var(--ok))} svg .s-bad circle{filter:drop-shadow(0 0 6px var(--bad))}
svg .e.s-ok{filter:drop-shadow(0 0 4px var(--ok))}
.ln.on{box-shadow:inset 0 0 24px -8px var(--cmp)}
.cat{letter-spacing:.14em}
.lk.cur{box-shadow:inset 0 0 22px -10px var(--cat)}
h2{text-transform:uppercase;letter-spacing:.08em;font-size:13px}
h2 .keys{text-transform:none;letter-spacing:0}
.mk-dots i.done{box-shadow:0 0 8px var(--cat)}
@media (prefers-reduced-motion:reduce){.stripe{animation:none}.card:hover{transform:none}}