:root{--tx:#1b1b1b;--mute:#666;--line:#e6e2dc;--acc:#c0392b;--bg:#fbfaf8;--card:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.6 system-ui,sans-serif}
main{max-width:860px;margin:auto;padding:20px 16px 80px}h1{font-size:30px;line-height:1.2;margin:.3em 0}
a{color:var(--acc)}nav.top{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;padding:10px 16px;
border-bottom:1px solid var(--line);background:#fff}nav.top a{color:var(--tx);text-decoration:none}
nav.top a.brand{font-weight:700;color:var(--acc)}.mute{color:var(--mute);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
text-decoration:none;color:var(--tx)}.card b{display:block;margin-bottom:4px}.card small{color:var(--mute)}
label{display:block;font-weight:600;margin:12px 0 4px}input,select{width:100%;padding:10px 12px;font:inherit;
border:1px solid var(--line);border-radius:8px;background:#fff}.out{background:#fff;border:1px solid var(--line);
border-left:5px solid var(--acc);border-radius:8px;padding:12px 16px;margin-top:16px}.out div{margin:4px 0}
.out b{font-size:20px}details{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;
margin:8px 0}summary{font-weight:600;cursor:pointer}footer{color:var(--mute);font-size:13px;margin-top:40px}
@media (prefers-color-scheme:dark){:root{--tx:#eceae6;--mute:#a7a29a;--line:#2e2c29;--bg:#141312;--card:#1c1b19}
nav.top{background:#1c1b19}input,select,.out,details{background:#1c1b19;color:var(--tx)}}