:root{--bg:#fbfaf7;--fg:#1d1b18;--mut:#6b655c;--card:#fff;--line:#e4dfd6;--acc:#b4531f;--acc2:#8a3c12;--ok:#1f7a3d;--bad:#b3261e;--code:#f3f0ea;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--bg:#161512;--fg:#ece8e1;--mut:#a39d93;--card:#1f1d1a;--line:#36322c;--acc:#e8844a;--acc2:#f0a374;--ok:#5cc983;--bad:#ff7b72;--code:#26231f}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--acc)}a:hover{color:var(--acc2)}
header.top{border-bottom:1px solid var(--line);background:var(--card)}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
header.top .wrap{display:flex;align-items:center;gap:18px;height:56px}
.logo{font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--fg);letter-spacing:-.02em}.logo span{color:var(--acc)}
header nav{margin-left:auto;display:flex;gap:16px;font-size:.92rem}header nav a{color:var(--mut);text-decoration:none}header nav a:hover{color:var(--fg)}
main{padding:22px 0 40px}
h1{font-size:1.75rem;line-height:1.2;margin:.2em 0 .3em;letter-spacing:-.02em}h2{font-size:1.2rem;margin:1.6em 0 .5em}h3{font-size:1rem;margin:1.2em 0 .3em}
.lead{color:var(--mut);margin:0 0 18px;max-width:760px}
.crumbs{font-size:.85rem;color:var(--mut)}.crumbs a{color:var(--mut)}
.tool{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width:760px){.cols{grid-template-columns:1fr}}
label{font-size:.85rem;color:var(--mut);display:block;margin:6px 0 4px}
textarea,input[type=text],input[type=number],input[type=password],input[type=datetime-local],select{width:100%;font:14px/1.45 var(--mono);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:9px 10px}
textarea{min-height:220px;resize:vertical}textarea.short{min-height:90px}
input[type=checkbox]{accent-color:var(--acc)}.row label{display:inline-flex;gap:5px;align-items:center;margin:0;color:var(--fg)}
.row input[type=text],.row input[type=number],.row select{width:auto;flex:1;min-width:120px}
button{font:600 14px system-ui,sans-serif;background:var(--acc);color:#fff;border:0;border-radius:7px;padding:9px 14px;cursor:pointer}button:hover{background:var(--acc2)}
button.sec{background:transparent;color:var(--fg);border:1px solid var(--line)}button.sec:hover{border-color:var(--acc)}
.out{font:13.5px/1.5 var(--mono);background:var(--code);border-radius:7px;padding:10px;white-space:pre-wrap;word-break:break-word;min-height:44px;margin:0}
.err{color:var(--bad);font-size:.9rem;min-height:1.2em}.ok{color:var(--ok)}.bad{color:var(--bad)}.mut{color:var(--mut)}
table{border-collapse:collapse;width:100%;font-size:.9rem}td,th{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}th{color:var(--mut);font-weight:600}td code,td.m{font-family:var(--mono);font-size:13px;word-break:break-all}
code{font-family:var(--mono);font-size:.9em;background:var(--code);padding:1px 4px;border-radius:4px}
mark{background:#f6c76a;color:#000;border-radius:2px}
.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;text-decoration:none;color:var(--fg)}.card:hover{border-color:var(--acc)}.card b{display:block;margin-bottom:3px}.card small{color:var(--mut);font-size:.86rem;line-height:1.4;display:block}
.prose{max-width:760px}.prose li{margin:.25em 0}
.ad{margin:22px 0;text-align:center;min-height:0}
.xsell{border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin:22px 0;font-size:.92rem;color:var(--mut)}
footer{border-top:1px solid var(--line);color:var(--mut);font-size:.85rem;padding:22px 0 40px}footer a{color:var(--mut)}
.swatch{width:100%;height:90px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700}
.pill{display:inline-block;font-size:.78rem;padding:1px 8px;border-radius:99px;border:1px solid var(--line)}.pill.ok{border-color:var(--ok)}.pill.bad{border-color:var(--bad)}