/* Version 2: dark ground, blue to pink. Loaded after site.css. */
:root{--bg:#0C0C0D;--ink:#F1E9D9;--muted:#9C978D;--line:#2B2B2F;--accent:#F25C6C;--accent-dark:#FF8090;--blue:#8FA3DE}
body{background:radial-gradient(60% 40% at 85% 0%,rgba(242,92,108,.16),transparent 70%),radial-gradient(45% 35% at 30% 0%,rgba(118,140,205,.16),transparent 70%),var(--bg);background-repeat:no-repeat}
.top,.rule{border-color:var(--line)}
.wordmark{gap:14px}
.mark{display:block;flex:0 0 auto}
a:hover{color:var(--blue)}
.set-when,.tile-tag{color:var(--blue)}
.noimg{background:#17171A;color:var(--ink)}
.tile:hover .noimg{background:#202025}
.btn,button.btn{color:#0C0C0D}
.btn:hover,button.btn:hover{color:#0C0C0D;background:var(--accent-dark)}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{background:#151518;border-color:var(--line);color:var(--ink)}
.check input{accent-color:var(--accent)}
.err{color:var(--accent-dark)}
.back{color:var(--ink)}

/* animated logo */
@keyframes cf-wave{0%,100%{opacity:.25;transform:translateX(-1.5px)}50%{opacity:1;transform:translateX(1.5px)}}
.mark{overflow:visible}
.mark polygon{animation:cf-wave 3.4s ease-in-out infinite}
.mark polygon:nth-child(1){animation-delay:0.00s}
.mark polygon:nth-child(2){animation-delay:0.18s}
.mark polygon:nth-child(3){animation-delay:0.36s}
.mark polygon:nth-child(4){animation-delay:0.54s}
.mark polygon:nth-child(5){animation-delay:0.72s}
.mark polygon:nth-child(6){animation-delay:0.90s}
.mark polygon:nth-child(7){animation-delay:1.08s}
@media (prefers-reduced-motion:reduce){.mark polygon{animation:none}}