/* ======================================================================
   像素 identicon 头像生成器 · 独立设计（8-bit 硬边框 + 方格纸）
   浅色 = 方格纸 + 电光蓝；深色 = 复古 CRT
   ====================================================================== */
.pxi{
  --ink:#1e2430; --sub:#5c6675; --faint:#98a1b0;
  --bg:#eef1f6; --card:#ffffff; --card2:#e8edf5; --line:#c9d2e0; --line2:#dde4ee;
  --pri:#2563eb; --pri-2:#3b82f6; --pri-soft:#e3ecfd; --pri-ink:#1d4ed8;
  --pop:#f0b429;
  --ok:#15803d; --ok-soft:#e7f4ea; --err:#d23c3c; --err-soft:#fbe9e9;
  --r:0px;
  --shadow:4px 4px 0 rgba(30,36,48,.16);
  color:var(--ink);
  font-family:"Courier New",-apple-system,"PingFang SC","Microsoft YaHei",monospace,sans-serif;
  font-size:15px;line-height:1.75;
  background:
    linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px),
    var(--bg);
  background-size:26px 26px,26px 26px,auto;
  padding:0 16px 56px;
}
:root[data-theme="dark"] .pxi{
  --ink:#d7e0ee; --sub:#8d97a8; --faint:#5b6474;
  --bg:#12161e; --card:#1a202b; --card2:#222a38; --line:#334052; --line2:#27313f;
  --pri:#60a5fa; --pri-2:#93c5fd; --pri-soft:rgba(96,165,250,.14); --pri-ink:#93c5fd;
  --pop:#fbbf24;
  --ok:#4ade80; --ok-soft:rgba(74,222,128,.10); --err:#f87171; --err-soft:rgba(248,113,113,.12);
  --shadow:4px 4px 0 rgba(0,0,0,.55);
}
.pxi *{box-sizing:border-box;}
.pxi b{font-weight:700;}
.pxi-wrap{max-width:1080px;margin:0 auto;}

/* ---------- 首屏 ---------- */
.pxi-hero{margin-top:24px;border:3px solid var(--ink);background:var(--card);box-shadow:var(--shadow);padding:22px 26px;}
.pxi-hero h1{margin:0 0 6px;font-size:clamp(21px,3.2vw,28px);font-weight:900;letter-spacing:1px;}
.pxi-hero h1 i{font-style:normal;color:var(--pri);}
.pxi-hero p{margin:0;color:var(--sub);font-size:14px;max-width:800px;}
.pxi-hero p em{font-style:normal;color:var(--pri-ink);font-weight:700;}
.pxi-strip{display:flex;gap:6px;margin-top:12px;}
.pxi-strip i{width:14px;height:14px;background:var(--pri);}
.pxi-strip i:nth-child(2){background:var(--pop);}
.pxi-strip i:nth-child(3){background:var(--err);}
.pxi-strip i:nth-child(4){background:var(--ok);}

.pxi-desk{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;margin-top:20px;}
@media (max-width:900px){.pxi-desk{grid-template-columns:1fr;}}
.pxi-card{border:3px solid var(--ink);background:var(--card);box-shadow:var(--shadow);padding:18px 20px;}
.pxi-card h2{margin:0 0 12px;font-size:15px;font-weight:900;letter-spacing:1px;border-bottom:2px dashed var(--line);padding-bottom:8px;}
.pxi-lab{display:block;font-size:12.5px;font-weight:800;color:var(--sub);margin:12px 0 5px;letter-spacing:1px;}
.pxi-in{width:100%;padding:10px 12px;border:2px solid var(--line);background:var(--card2);color:var(--ink);
  font-size:15px;font-weight:700;outline:none;font-family:inherit;border-radius:0;}
.pxi-in:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft);}
.pxi-sel{width:100%;padding:8px 10px;border:2px solid var(--line);background:var(--card2);color:var(--ink);font-size:13.5px;font-family:inherit;border-radius:0;outline:none;cursor:pointer;}
.pxi-pals{display:flex;flex-wrap:wrap;gap:8px;}
.pxi-pal{border:2px solid var(--line);background:var(--card2);padding:6px 8px;cursor:pointer;display:flex;gap:4px;align-items:center;border-radius:0;}
.pxi-pal i{width:12px;height:12px;display:block;}
.pxi-pal span{font-size:12px;font-weight:700;}
.pxi-pal.sel{border-color:var(--ink);box-shadow:2px 2px 0 var(--ink);}
.pxi-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.pxi-btn{border:2px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);padding:9px 16px;
  font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:2px 2px 0 var(--ink);transition:all .1s;}
.pxi-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.pxi-btn-go{background:var(--pri);color:#fff;border-color:var(--pri);}
.pxi-stage{display:flex;flex-direction:column;align-items:center;gap:12px;}
.pxi-canvasbox{border:3px solid var(--ink);box-shadow:var(--shadow);padding:14px;background:
  repeating-conic-gradient(var(--card2) 0 25%,var(--card) 0 50%) 0 0/22px 22px;}
#pxiCanvas{display:block;image-rendering:pixelated;}
.pxi-hash{font-size:12.5px;color:var(--sub);word-break:break-all;text-align:center;}
.pxi-hash b{color:var(--pri-ink);}
.pxi-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:700;}
.pxi-msg.err{color:var(--err);}
.pxi-msg.ok{color:var(--ok);}

.pxi-faq{margin-top:32px;border:3px solid var(--ink);background:var(--card);box-shadow:var(--shadow);padding:22px 24px;}
.pxi-faq h2{margin:0 0 10px;font-size:19px;font-weight:900;}
.pxi-faq h3{margin:18px 0 4px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.pxi-faq p{margin:0;color:var(--sub);font-size:14px;}
.pxi-faq p b{color:var(--ink);}

/* ===== ③ 网格参数与候选画廊 ===== */
.pxix-panel{margin-top:20px;border:3px solid var(--ink);background:var(--card);box-shadow:var(--shadow);padding:22px 24px;}
.pxix-head h2{margin:0 0 6px;font-size:17px;font-weight:900;color:var(--ink);}
.pxix-head p{margin:0 0 16px;font-size:13.5px;color:var(--sub);line-height:1.7;}
.pxix-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pxix-card{border:2px solid var(--line);background:var(--card2);padding:15px 17px;min-width:0;}
.pxix-card h3{margin:0 0 10px;font-size:14px;font-weight:900;color:var(--ink);}
.pxix-lab{display:block;font-size:12.5px;font-weight:800;color:var(--sub);margin:10px 0 5px;}
.pxix-lab b{color:var(--pri-ink);}
.pxix-range{width:100%;accent-color:var(--pri);cursor:pointer;}
.pxix-sel{width:100%;padding:8px 10px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-size:13px;font-family:inherit;outline:none;}
.pxix-sel:focus{border-color:var(--ink);}
.pxix-stage2{display:flex;justify-content:center;margin-top:12px;border:3px solid var(--ink);padding:10px;background:
  repeating-conic-gradient(var(--card2) 0 25%,var(--card) 0 50%) 0 0/20px 20px;}
#pxixCanvas{display:block;width:100%;max-width:240px;height:auto;image-rendering:pixelated;}
.pxix-stat{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.pxix-st{font-size:11.5px;color:var(--sub);background:var(--card);border:1px solid var(--line);padding:2px 8px;}
.pxix-st b{color:var(--pri-ink);}
.pxix-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.pxix-btn{border:2px solid var(--ink);background:var(--card);color:var(--ink);padding:8px 14px;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:2px 2px 0 var(--ink);transition:all .1s;}
.pxix-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.pxix-btn-ghost{background:var(--card);}
.pxix-msg{margin-top:9px;font-size:12.5px;font-weight:700;min-height:18px;color:var(--sub);word-break:break-all;}
.pxix-msg.err{color:var(--err);}
.pxix-msg.ok{color:var(--ok);}
.pxix-note{margin:0 0 10px;font-size:12.5px;color:var(--sub);line-height:1.7;}
.pxix-note code{background:var(--card);border:1px solid var(--line);padding:0 4px;font-size:11.5px;}
.pxix-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
.pxix-thumb{position:relative;border:2px solid var(--line);background:var(--card);padding:4px;cursor:pointer;font-family:inherit;transition:all .1s;}
.pxix-thumb:hover{border-color:var(--pri-2);}
.pxix-thumb.on{border-color:var(--ink);box-shadow:2px 2px 0 var(--ink);}
.pxix-thumb canvas{display:block;width:100%;height:auto;image-rendering:pixelated;}
.pxix-thumb span{display:block;text-align:center;font-size:10.5px;color:var(--sub);font-weight:800;margin-top:2px;}
.pxix-var{margin-top:10px;font-size:12.5px;color:var(--sub);word-break:break-all;min-height:20px;}
.pxix-empty{grid-column:1 / -1;color:var(--faint);font-size:13px;text-align:center;padding:22px 0;}

@media (max-width:760px){
  .pxix-panel{padding:18px 16px;}
  .pxix-grid{grid-template-columns:1fr;}
  .pxix-gallery{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}
  #pxixCanvas{max-width:200px;}
}