:root{--bg:#fff;--ink:#12142b;--muted:#55587a;--card:#f3f5ff;--border:#d9ddf0;--accent:#0b5fd9;
--blue:#0b5fd9;--cherry:#c8102e;--lime:#3f8f1f;--lemon:#f5c400;--orange:#d95f0e;--grape:#6a2fb0;--strawberry:#d6336c;--cola:#4a2c1a}
@media (prefers-color-scheme:dark){:root{--bg:#0e1022;--ink:#f2f3ff;--muted:#a3a6c4;--card:#181b34;--border:#2b2f52;--accent:#7db2ff;
--blue:#7db2ff;--cherry:#ff7b8f;--lime:#8fd86b;--lemon:#ffd84d;--orange:#ff9a5c;--grape:#b99aff;--strawberry:#ff8fb8}}
body::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--blue),var(--cherry),var(--lime),var(--lemon),var(--orange),var(--grape),var(--strawberry))}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif}
header,main,footer{max-width:60rem;margin:0 auto;padding:1rem}
h1{margin:.5rem 0 0;color:var(--accent)}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem}
label{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted);gap:.25rem}
input,select,textarea,button{font:inherit;padding:.5rem;border:1px solid var(--border);border-radius:.5rem;background:var(--bg);color:var(--ink)}
button{background:#0b5fd9;color:#fff;border:0;cursor:pointer}
.card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem;margin:.75rem 0}
.card h2{margin:0}
.meta{color:var(--muted);font-size:.9rem}
.tag{display:inline-block;background:var(--bg);border:1px solid var(--border);border-radius:1rem;padding:0 .6rem;margin:.15rem .25rem .15rem 0;font-size:.85rem}
.sample{border-style:dashed}
.review{border-top:1px solid var(--border);padding-top:.5rem;margin-top:.5rem}
details{margin-top:.5rem}
form{display:grid;gap:.5rem;margin-top:.5rem}
footer{color:var(--muted);font-size:.85rem}
.warning{border-left:4px solid var(--orange);padding-left:.5rem}
.unverified{border-style:dotted}
table{border-collapse:collapse;margin:.5rem 0}
td,th{padding:.2rem .75rem .2rem 0;text-align:left;font-size:.9rem}
.inline{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
h3{margin:.75rem 0 .25rem;font-size:1rem}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1{font-size:2rem}