:root{--bg:#0d0b1e;--bg-2:#15122e;--ink:#f4f1ff;--muted:#a39fc7;--pink:#ff5d8f;--teal:#00e5c0;--yellow:#ffd23f;--violet:#7b61ff;--line:#ffffff17}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Space Grotesk,system-ui,sans-serif;overflow:hidden}#root{flex-direction:column;display:flex}.pixel{letter-spacing:.5px;font-family:"Press Start 2P",monospace;line-height:1.5}button,select{color:inherit;font-family:inherit}header{border-bottom:1px solid var(--line);background:#0d0b1ee6;flex-wrap:wrap;align-items:center;gap:14px;padding:10px 16px;display:flex}.brand{align-items:center;gap:10px;font-weight:700;display:flex}.brand .logo{grid-template-rows:repeat(2,8px);grid-template-columns:repeat(2,8px);gap:2px;display:grid}.brand .logo i{border-radius:1px;width:8px;height:8px;display:block}.brand .logo i:first-child{background:var(--pink)}.brand .logo i:nth-child(2){background:var(--teal)}.brand .logo i:nth-child(3){background:var(--yellow)}.brand .logo i:nth-child(4){background:var(--violet)}.brand-name{letter-spacing:1px;font-size:.8rem}.brand-name b{color:var(--teal)}h1{color:var(--muted);margin-left:2px;font-size:.62rem;font-weight:400}.spacer{flex:1}.hbtn{border:2px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer;box-shadow:3px 3px 0 var(--violet);padding:7px 12px;font-size:.82rem;font-weight:600;transition:transform .12s,box-shadow .12s}.hbtn:hover{box-shadow:4px 4px 0 var(--violet);transform:translate(-1px,-1px)}.hbtn.ghost{color:var(--ink);box-shadow:3px 3px 0 var(--pink);background:0 0}.hbtn:disabled{opacity:.35;cursor:default;box-shadow:3px 3px 0 var(--violet);transform:none}.hgroup{align-items:center;gap:8px;display:flex}select{background:var(--bg-2);border:1px solid var(--line);cursor:pointer;border-radius:2px;padding:7px 8px;font-size:.82rem}label.small{color:var(--muted);font-size:.72rem}.editor{flex:1;min-height:0;display:flex}.tools{border-right:1px solid var(--line);background:var(--bg-2);flex-direction:column;gap:6px;padding:12px 10px;display:flex;overflow-y:auto}.tool{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:4px;place-items:center;width:46px;height:46px;font-size:1.15rem;transition:background .15s,border-color .15s;display:grid;position:relative}.tool:hover{background:#ffffff0f}.tool.active{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);background:#00e5c01f}.tool.toggled{border-color:var(--yellow);background:#ffd23f1f}.tool .kbd{color:var(--muted);font-family:"Press Start 2P",monospace;font-size:.55rem;position:absolute;bottom:2px;right:4px}.tools hr{border:0;border-top:1px solid var(--line);margin:4px 0}.stage{background:radial-gradient(circle at 20% 10%,#7b61ff14,#0000 40%),radial-gradient(circle at 80% 90%,#ff5d8f12,#0000 40%);flex:1;place-items:center;min-width:0;min-height:0;padding:24px;display:grid;position:relative;overflow:auto}.board{box-shadow:0 0 0 1px var(--line), 8px 8px 0 #7b61ff40;background:repeating-conic-gradient(#1a1733 0% 25%,#221e42 0% 50%) 0 0/16px 16px;flex:none;position:relative}.board canvas{display:block;position:absolute;inset:0}#art{width:100%;height:100%;image-rendering:pixelated}#overlay{touch-action:none;cursor:crosshair}.coords{color:var(--muted);pointer-events:none;min-height:1em;font-size:.6rem;position:absolute;bottom:10px;left:14px}.side{border-left:1px solid var(--line);background:var(--bg-2);flex-direction:column;gap:14px;width:220px;padding:14px;display:flex;overflow-y:auto}.side h2{color:var(--muted);text-transform:uppercase;margin-bottom:10px;font-family:"Press Start 2P",monospace;font-size:.55rem}.current{align-items:center;gap:10px;display:flex}.current .swatch-big{border:1px solid var(--line);background:repeating-conic-gradient(#1a1733 0% 25%,#221e42 0% 50%) 0 0/10px 10px;border-radius:4px;flex:none;width:44px;height:44px;position:relative;overflow:hidden}.current .swatch-big i{display:block;position:absolute;inset:0}input[type=color]{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:4px;width:100%;height:34px;padding:2px}.palette{grid-template-columns:repeat(7,1fr);gap:5px;display:grid}.palette button{aspect-ratio:1;cursor:pointer;border:1px solid #ffffff26;border-radius:3px;transition:transform .1s}.palette button:hover{transform:scale(1.15)}.palette button.sel{outline:2px solid var(--teal);outline-offset:1px}.hint{color:var(--muted);margin-top:auto;font-size:.74rem;line-height:1.7}.hint b{color:var(--ink);font-weight:600}.menu{position:relative}.menu summary{-webkit-user-select:none;user-select:none;list-style:none;display:inline-block}.menu summary::-webkit-details-marker{display:none}.menu[open] .menu-items{z-index:60;background:var(--bg-2);border:1px solid var(--line);flex-direction:column;min-width:190px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:6px 6px #7b61ff59}.menu-items button{text-align:left;cursor:pointer;border:0;border-bottom:1px solid var(--line);background:0 0;padding:10px 14px;font-size:.85rem}.menu-items button:last-child{border-bottom:0}.menu-items button:hover{background:#ffffff12}.mini{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:3px;flex:none;place-items:center;width:26px;height:26px;font-size:.8rem;display:inline-grid}.mini:hover{background:#ffffff12}.mini:disabled{opacity:.3;cursor:default}.mini.toggled{border-color:var(--yellow);background:#ffd23f1f}.layers-head{justify-content:space-between;align-items:center;display:flex}.layers-head h2{margin-bottom:0}.layers-actions{gap:6px;display:flex}ul.layers{flex-direction:column;gap:4px;margin-top:10px;list-style:none;display:flex}ul.layers li{border:1px solid var(--line);border-radius:4px;align-items:center;gap:6px;padding:4px 6px;display:flex}ul.layers li.active{border-color:var(--teal);background:#00e5c01a}.layer-name{color:inherit;text-align:left;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;flex:1;min-width:0;padding:4px 2px;font-size:.85rem;overflow:hidden}.eye{font-size:.7rem}.frames-bar{border-top:1px solid var(--line);background:var(--bg-2);align-items:center;gap:12px;padding:8px 12px;display:flex}.frames-scroll{flex:1;gap:8px;min-width:0;padding:2px;display:flex;overflow-x:auto}.frame-thumb{border:1px solid var(--line);cursor:pointer;background:repeating-conic-gradient(#1a1733 0% 25%,#221e42 0% 50%) 0 0/10px 10px;border-radius:4px;flex:none;place-items:center;width:52px;height:52px;display:grid;position:relative;overflow:hidden}.frame-thumb canvas{width:100%;height:100%;image-rendering:pixelated}.frame-thumb.active{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}.frame-thumb.add{color:var(--muted);background:0 0;font-size:1.2rem}.frame-thumb.add:hover{color:var(--ink);background:#ffffff0f}.frame-num{color:var(--ink);text-shadow:0 0 3px #000,0 0 3px #000;font-size:.5rem;position:absolute;bottom:1px;right:3px}.frames-controls{flex:none;align-items:center;gap:8px;display:flex}.frames-controls label.small{align-items:center;gap:4px;display:flex}.frames-controls input[type=number]{background:var(--bg);border:1px solid var(--line);width:44px;color:inherit;border-radius:3px;padding:4px 6px;font-size:.8rem}.preview-canvas{border:1px solid var(--line);width:52px;height:52px;image-rendering:pixelated;background:repeating-conic-gradient(#1a1733 0% 25%,#221e42 0% 50%) 0 0/10px 10px;border-radius:4px}@media (width<=860px){body{overflow:auto}#root{height:auto;min-height:100%}.editor{flex-direction:column}.tools{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;order:0;padding:8px 10px;overflow:auto hidden}.tools hr{border-top:0;border-left:1px solid var(--line);height:auto;margin:0 4px}.stage{order:1;min-height:55vh;padding:14px}.side{border-left:0;border-top:1px solid var(--line);order:2;width:100%}h1{display:none}header{gap:8px}.frames-bar{flex-wrap:wrap}}.consent{z-index:1000;border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#15122ef7;border-radius:12px;flex-wrap:wrap;align-items:center;gap:16px;max-width:560px;margin:0 auto;padding:16px 18px;display:flex;position:fixed;bottom:16px;left:16px;right:16px;box-shadow:0 18px 50px -18px #000000bf}.consent-text{color:var(--muted);flex:240px;margin:0;font-size:.86rem;line-height:1.5}.consent-text b{color:var(--ink)}.consent-actions{flex-shrink:0;gap:10px;display:flex}.consent-btn{border:2px solid var(--ink);background:var(--ink);color:var(--bg);font:inherit;cursor:pointer;border-radius:6px;padding:9px 16px;font-size:.85rem;font-weight:600;transition:transform .12s}.consent-btn:hover{transform:translateY(-1px)}.consent-btn.ghost{color:var(--muted);border-color:var(--line);background:0 0}.consent-btn.ghost:hover{color:var(--ink);border-color:var(--muted)}@media (width<=520px){.consent{flex-direction:column;align-items:stretch}.consent-actions{justify-content:flex-end}}