:root{--bg:#14121f;--panel:#1f1c30;--line:#34304d;--ink:#f3efe6;--dim:#a39cbf;--hot:#ffcd75;--accent:#ef7d57;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,#2a2244 0,transparent 45%),var(--bg)}canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}button{font:inherit;color:inherit;cursor:pointer;border:0}.wrap{max-width:1100px;margin:0 auto;padding:18px 16px 120px}header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.logo{font-family:Silkscreen,monospace;font-size:30px;letter-spacing:1px;margin:0;color:var(--hot);text-shadow:3px 3px 0 #b13e53}.tag{color:var(--dim);margin:2px 0 0;font-weight:600}.controls{margin:18px 0 14px;display:grid;gap:10px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row .lbl{font-family:Silkscreen,monospace;font-size:12px;color:var(--dim);width:64px}.chip{background:var(--panel);border:2px solid var(--line);padding:7px 12px;border-radius:10px;font-weight:800;font-size:14px;display:inline-flex;gap:6px;align-items:center}.chip.on{border-color:var(--hot);background:#2e2740;box-shadow:0 3px #b13e53}.chip .sw{display:inline-flex}.chip .sw i{width:8px;height:12px;display:block}.forge{background:var(--accent);color:#1a1c2c;font-weight:900;padding:10px 18px;border-radius:12px;box-shadow:0 4px #b13e53;font-size:15px}.forge:active{transform:translateY(3px);box-shadow:0 1px #b13e53}.ghost{background:transparent;border:2px solid var(--line);padding:8px 14px;border-radius:12px;font-weight:800}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.card{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:12px;display:grid;place-items:center;gap:6px;position:relative;transition:transform .12s}.card:hover{transform:translateY(-3px);border-color:#5a5280}.card.sel{border-color:var(--hot)}.card canvas{width:100%;max-width:128px;aspect-ratio:1;background:repeating-conic-gradient(#2a263f 0,#2a263f 25%,#24213a 0,#24213a 50%) 0 0 / 16px 16px;border-radius:6px}.card small{color:var(--dim);font-family:Silkscreen,monospace;font-size:10px}.sheet-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:none;z-index:5}.sheet{position:fixed;z-index:6;background:var(--panel);border:2px solid var(--line);display:none;flex-direction:column;gap:12px;padding:16px}.open .sheet,.open .sheet-bg{display:flex}@media(min-width:860px){.sheet{right:20px;top:20px;bottom:20px;width:400px;border-radius:18px;overflow:auto}}@media(max-width:859px){.sheet{left:0;right:0;bottom:0;max-height:92vh;border-radius:20px 20px 0 0;overflow:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom))}}.stage{position:relative;align-self:center;width:min(100%,352px);aspect-ratio:1;background:repeating-conic-gradient(#2a263f 0,#2a263f 25%,#24213a 0,#24213a 50%) 0 0 / 22px 22px;border-radius:10px;touch-action:none}.stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.stats{font-family:Silkscreen,monospace;font-size:11px;color:var(--dim);display:flex;gap:10px;flex-wrap:wrap;align-items:center}.stats b{color:#a7f070;font-weight:400}.native{background:#0004;padding:6px;border-radius:6px;display:flex;gap:8px;align-items:center}.paint{display:flex;flex-wrap:wrap;gap:6px}.paint button{width:28px;height:28px;border-radius:6px;border:2px solid #0000}.paint button.on{border-color:var(--ink);transform:scale(1.1)}.paint .erase{background:repeating-conic-gradient(#555 0,#555 25%,#888 0,#888 50%) 0 0 / 10px 10px}.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.acts button{background:#2b2742;border:2px solid var(--line);padding:10px;border-radius:10px;font-weight:800;font-size:14px}.acts .primary{background:var(--hot);color:#1a1c2c;border-color:var(--hot)}.top{display:flex;justify-content:space-between;align-items:center}.top h2{margin:0;font-family:Silkscreen,monospace;font-size:18px;font-weight:400}.x{background:#2b2742;width:34px;height:34px;border-radius:10px;font-size:18px}.hint{color:var(--dim);font-size:13px;margin:0}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:var(--hot);color:#1a1c2c;padding:10px 16px;border-radius:12px;font-weight:900;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9}.toast.show{opacity:1}.toggles{display:flex;gap:8px;flex-wrap:wrap}.toggles .chip{padding:5px 10px;font-size:13px}footer{margin-top:28px;color:var(--dim);font-size:13px}footer a{color:var(--hot)}
