.page{max-width:68ch;margin:0 auto;padding:12vh 24px 64px}
.mark{display:flex;align-items:baseline;gap:14px}
.mark img{width:22px;height:22px;opacity:.9;align-self:center}
.mark h1{font-size:15px;font-weight:700;margin:0;letter-spacing:.02em}
.mark .cur{display:inline-block;width:.6em;height:1.1em;background:var(--primary);vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tag{color:var(--white-dim);margin:6px 0 0}
.rule{color:var(--gray);margin:40px 0 18px;white-space:pre;overflow:hidden;user-select:none}
.rule b{color:var(--white-muted);font-weight:500}
section h2{font-size:12px;font-weight:500;color:var(--white-muted);margin:0 0 14px;letter-spacing:.08em}
section h2 i{font-style:normal;color:var(--primary)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{border:1px solid var(--border);background:var(--void-light);padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s}
a.card{border-bottom:1px solid var(--border);color:var(--white)}
a.card:hover{border-color:var(--primary);color:var(--white)}
.card .top{display:flex;justify-content:space-between;font-size:12px}
.card .name{font-weight:700;font-size:14px}
.card .st{color:var(--primary)}
.card p{margin:0;color:var(--white-dim);font-size:13px}
.card dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:11px;color:var(--white-muted)}
.card dd{margin:0;color:var(--white-dim)}
.card .go{font-size:12px;color:var(--white-muted);margin-top:auto}
a.card:hover .go{color:var(--primary)}
.swatch{display:flex;height:6px;margin-top:2px}
.swatch span{flex:1}
.card.soon{background:transparent;border-style:dashed;color:var(--white-muted)}
.card.soon .name{color:var(--gray);letter-spacing:.1em;font-weight:400}
.card.soon p{color:var(--white-muted)}
.links{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.links li{display:flex;gap:14px}
.links .k{color:var(--white-muted);width:9ch}
.links button{font:inherit;color:var(--white-muted);background:none;border:0;padding:0;cursor:pointer}
.links button:hover{color:var(--primary)}
footer{margin-top:72px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--white-muted);gap:12px;flex-wrap:wrap}
.pal{display:flex;gap:0}
.pal span{width:14px;height:14px;display:block}
.mode{font:inherit;background:none;border:1px solid var(--border);color:var(--white-dim);padding:2px 8px;cursor:pointer}
.mode:hover{border-color:var(--primary);color:var(--primary)}
.mode b{color:var(--primary);font-weight:500}
.dot{cursor:default;user-select:none;padding:0 4px;color:var(--gray-dark)}
#door{position:fixed;inset:auto 0 24px;margin:auto;width:min(360px,90vw);background:var(--void-light);border:1px solid var(--primary);padding:10px 12px;display:none;gap:8px;align-items:center}
#door.on{display:flex}
#door span{color:var(--primary)}
#door input{flex:1;font:inherit;background:transparent;border:0;color:var(--white);outline:none}
#door.no{animation:shake .25s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}