:root { --bg:#101114; --panel:#181a1f; --line:#2a2d35; --text:#d8dae0; --dim:#8b909c; --accent:#7fd1ff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui, sans-serif; }
header, main, footer { max-width:1200px; margin:0 auto; padding:0 16px; }
header { display:flex; gap:12px; align-items:baseline; padding-top:18px; padding-bottom:6px;
         border-bottom:1px solid var(--line); }
header .home { font-weight:700; font-size:20px; color:var(--accent); text-decoration:none; }
header span { color:var(--dim); }
header nav { margin-left:auto; display:flex; gap:14px; font-size:14px; }
header nav a { text-decoration:none; }
h2 { font-size:17px; margin:26px 0 8px; }
.howto-box { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent);
             border-radius:8px; padding:12px 16px; margin:14px 0 18px; }
.howto-box ol { margin:0; padding-left:20px; }
.howto-box li { margin:4px 0; }
.howto-box .more-link { display:inline-block; margin-top:6px; font-size:14px; }
.cmds { display:grid; grid-template-columns:minmax(0, max-content) 1fr; gap:6px 18px; margin:0; }
.cmds dt code { color:var(--accent); white-space:nowrap; user-select:all; }
.cmds dd { margin:0; color:var(--text); }
.notes { padding-left:20px; color:var(--dim); }
@media (max-width:640px) {
  header { flex-wrap:wrap; }
  header nav { margin-left:0; width:100%; }
  .cmds { grid-template-columns:1fr; gap:2px; }
  .cmds dd { margin-bottom:8px; color:var(--dim); }
  .cmds dt code { white-space:normal; }
}
a { color:var(--accent); }
h1 { font-size:22px; margin:22px 0 4px; word-break:break-all; }
.lead, .more, .empty { color:var(--dim); }
code { background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:0 4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin:18px 0; }
.card { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
        border-radius:8px; overflow:hidden; text-decoration:none; color:var(--text); }
.card:hover { border-color:var(--accent); }
.card .thumb { text-decoration:none; flex:1; display:flex; align-items:center; justify-content:center; background:#000;
               height:220px; overflow:hidden; padding:10px; }
.card .art { margin:0; font-size:7px; line-height:1; max-width:100%; }
.card .meta { padding:8px 10px; border-top:1px solid var(--line); color:var(--dim); font-size:13px;
              word-break:break-all; }
.card .meta b { color:var(--text); }
.card .meta a { text-decoration:none; }
.card .how { display:block; margin:0; padding:7px 10px 0; border:0; border-top:1px solid var(--line);
             border-radius:0; background:none; color:var(--accent); font-size:12px;
             user-select:all; cursor:text; word-break:break-all; }
.card .how + .meta { border-top:0; padding-top:3px; }
.howto { margin:0 0 14px; color:var(--dim); }
.howto code { color:var(--accent); font-size:15px; padding:2px 6px; user-select:all; word-break:break-all; }
.art { font-family:"DejaVu Sans Mono", Menlo, Consolas, monospace; white-space:pre; background:#000; color:#fff; }
.art.big { display:inline-block; max-width:100%; overflow-x:auto; padding:12px; margin:16px 0;
           font-size:13px; line-height:1; border-radius:6px; }
.facts { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; }
.facts dt { color:var(--dim); }
.facts dd { margin:0; word-break:break-all; }
footer { color:var(--dim); font-size:13px; margin-top:30px; padding-top:12px; padding-bottom:24px;
         border-top:1px solid var(--line); }