:root{--bg:#1d1a16;--panel:#2a251f;--panel2:#352e26;--ink:#f3e9d8;--muted:#a99880;--acc:#e8b33a;--red:#c8432f;--line:#4a4036}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Barlow',Arial,sans-serif;font-size:14px}
button,select,input,textarea{font-family:'Barlow',sans-serif;font-size:13px}
header{display:flex;align-items:center;gap:16px;padding:8px 14px;background:#14110e;border-bottom:2px solid var(--acc);position:sticky;top:0;z-index:5;flex-wrap:wrap}
h1{font-family:'Bangers',cursive;font-weight:400;letter-spacing:1px;margin:0;font-size:28px;color:var(--acc)}
h1 span{font-family:'Bebas Neue',sans-serif;color:var(--ink);font-size:20px;margin-left:6px}
h2{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:1px;font-size:20px;margin:14px 0 6px;color:var(--acc)}
h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:16px;margin:10px 0 4px}
.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px}
button,.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:5px 10px;cursor:pointer;display:inline-block}
button:hover,.btn:hover{border-color:var(--acc)}
button.on,button.primary{background:var(--acc);color:#1d1a16;border-color:var(--acc);font-weight:700}
button.danger{border-color:#7a2d22}
.chk{display:flex;gap:4px;align-items:center;color:var(--muted)}
.stampinfo{color:var(--muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stampinfo.active{color:var(--acc);font-weight:700}
main{display:grid;grid-template-columns:270px 1fr 290px;height:calc(100vh - 60px);min-height:560px}
#palette{background:var(--panel);overflow:auto;padding:8px;border-right:1px solid var(--line)}
#search{width:100%;padding:7px;border-radius:5px;border:1px solid var(--line);background:#1a1713;color:var(--ink)}
.group{margin-top:8px}
.group summary{cursor:pointer;font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.5px;color:var(--acc)}
.group summary .n{color:var(--muted);font-family:'Barlow';font-size:12px;margin-left:4px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:4px}
.thumb{aspect-ratio:1;background:repeating-conic-gradient(#3b342b 0 25%,#2f2922 0 50%) 0 0/12px 12px;border:2px solid transparent;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.thumb img{max-width:100%;max-height:100%;image-rendering:pixelated}
.thumb:hover{border-color:var(--muted)}
.thumb.picked{border-color:var(--acc)}
#center{display:flex;flex-direction:column;min-width:0}
#stageWrap{flex:1;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#25211c 0 25%,#1f1b17 0 50%) 0 0/24px 24px;overflow:hidden;min-height:0}
#stage{box-shadow:0 0 0 1px var(--line),0 8px 30px #0008;cursor:crosshair}
#hint{padding:5px 10px;color:var(--muted);font-size:12px;background:#14110e}
#inspector{background:var(--panel);overflow:auto;padding:4px 12px 12px;border-left:1px solid var(--line)}
.row{display:flex;gap:6px;align-items:center;margin:5px 0}
.row label{width:84px;color:var(--muted);flex:none}
.row input[type=number]{width:70px}
.row select{flex:1;min-width:0}
input,select,textarea{background:#1a1713;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:4px}
textarea{width:100%;font-size:15px}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:6px 0}
.muted{color:var(--muted)}
.selname{font-weight:700;word-break:break-all}
#layers{list-style:none;padding:0;margin:0;font-size:12px}
#layers li{padding:3px 6px;border-radius:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#layers li.sel{background:var(--acc);color:#1d1a16}
#layers li:hover{outline:1px solid var(--line)}
#capsules{padding:6px 16px 40px;border-top:2px solid var(--acc)}
.caphead{display:flex;align-items:center;gap:14px}
#capGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.cap{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px}
.cap .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cap .t b{font-family:'Bebas Neue';font-weight:400;font-size:19px;letter-spacing:.5px}
.cap .pv{margin:6px 0;background:repeating-conic-gradient(#3b342b 0 25%,#2f2922 0 50%) 0 0/16px 16px;display:flex;justify-content:center;align-items:center;height:240px;overflow:hidden}
.cap canvas{max-width:100%;max-height:240px;cursor:grab;image-rendering:auto}
.cap .ctl{display:grid;grid-template-columns:auto 1fr auto;gap:2px 6px;align-items:center;font-size:12px;color:var(--muted)}
.cap .ctl input[type=range]{width:100%}
.cap .acts{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.steamlist{background:linear-gradient(180deg,#1b2838,#16202d);padding:16px;border-radius:4px;display:flex;flex-direction:column;gap:6px;max-width:980px}
.srow{display:flex;align-items:center;gap:10px;background:#16202d;padding:4px;border-radius:2px}
.srow.me{background:#1e3a52}
.srow canvas{display:block}
.srow .nm{color:#c7d5e0;font-family:Arial,sans-serif;font-size:13px}
.srow .fake{background:#2a475e;border-radius:1px}
.srow .px{color:#beee11;font-family:Arial,sans-serif;font-size:12px;margin-left:auto;padding-right:8px}
.tinyrow{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-top:10px;color:#8f98a0;font-family:Arial,sans-serif;font-size:11px}
.tinyrow div{display:flex;flex-direction:column;gap:4px}