:root{--tile:#EEF1EE;--grout:#C9D2D3;--drain:#16222A;--flush:#12B5CB;--plunger:#E5372E;--ink:#14212B}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
background:var(--tile) linear-gradient(var(--grout) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--grout) 1px,transparent 1px) 0 0/48px 48px}
.top{background:var(--drain);color:#fff;padding:20px 16px;border-bottom:6px solid var(--flush)}
.logo{font:900 clamp(2rem,8vw,3.6rem)/1 "Arial Black",Impact,sans-serif;color:#fff;text-decoration:none;letter-spacing:-.03em;display:inline-block;transform:rotate(-2deg)}
.logo span{color:var(--flush);margin-left:.1em}
.tag{margin:6px 0 0;color:#9fb4bb}
.wrap{max-width:1000px;margin:0 auto;padding:16px;display:grid;gap:16px;grid-template-columns:200px 1fr}
.cats{display:flex;flex-direction:column;gap:6px;align-self:start}
.cats button{text-align:left;padding:10px 12px;border:2px solid var(--drain);background:#fff;font:inherit;font-weight:600;cursor:pointer;border-radius:8px}
.cats button[aria-current=true]{background:var(--drain);color:#fff}
.bar{display:flex;justify-content:space-between;align-items:center;gap:8px}
h1{font:900 1.6rem "Arial Black",Impact,sans-serif;margin:0}
.btn{background:var(--plunger);color:#fff;border:0;padding:10px 16px;font:inherit;font-weight:700;border-radius:8px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
:focus-visible{outline:3px solid var(--flush);outline-offset:2px}
.card,.threads li{background:#fff;border:2px solid var(--drain);border-radius:10px;padding:14px;margin-top:12px}
.card label{display:block;margin-bottom:10px;font-weight:600}
.card input,.card select,.card textarea{display:block;width:100%;padding:8px;font:inherit;border:2px solid var(--grout);border-radius:6px;margin-top:4px}
.threads{list-style:none;margin:0;padding:0}
.threads li{cursor:pointer}
.threads li:hover{border-color:var(--flush)}
.threads b{display:block}
.meta{font-size:.85rem;color:#52656d}
.reply{border-top:1px dashed var(--grout);margin-top:10px;padding-top:10px;white-space:pre-wrap}
.post{white-space:pre-wrap}
.foot{text-align:center;padding:24px 16px;color:#52656d;font-size:.85rem}
@media(max-width:700px){.wrap{grid-template-columns:1fr}.cats{flex-direction:row;overflow-x:auto}.cats button{white-space:nowrap}}
@media(prefers-reduced-motion:no-preference){.logo{transition:transform .2s}.logo:hover{transform:rotate(2deg) scale(1.04)}}