[hidden]{display:none!important}:root{--bg: #2b2235;--panel: #382c46;--panel2: #44365a;--line: #5a4874;--fg: #fff4e0;--muted: #c9b8dd;--hot: #ffcc4d;--hot2: #ff5e7e;--font: "Trebuchet MS", system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font:13px/1.4 var(--font);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}button,select,input{font:inherit;color:var(--fg)}button{background:var(--panel2);border:2px solid var(--line);padding:4px 10px;cursor:pointer;box-shadow:0 2px #0004}button:hover{border-color:var(--hot)}button[aria-pressed=true]{background:var(--hot);color:#2b2235;border-color:var(--hot)}button.hot,.hot{background:var(--hot2);border-color:var(--hot2);color:#fff}button.small{width:100%;margin-top:6px}select,input[type=number]{background:var(--bg);border:2px solid var(--line);padding:3px 6px}input[type=number]{width:64px}.top{display:flex;align-items:center;gap:16px;padding:8px 12px;background:#221a2b;border-bottom:2px solid var(--line);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:8px;font-size:16px}.mark{width:18px;height:18px;background:conic-gradient(var(--hot) 0 25%,var(--hot2) 0 50%,var(--hot) 0 75%,var(--hot2) 0)}.menu{display:flex;gap:6px;flex-wrap:wrap}.menu label{background:var(--panel2);border:2px solid var(--line);padding:4px 10px;cursor:pointer;box-shadow:0 2px #0004}.menu label:hover{border-color:var(--hot)}.info{margin-left:auto;color:var(--muted);font-family:ui-monospace,monospace}.work{display:grid;grid-template-columns:64px 1fr 240px;min-height:0}.tools{background:var(--panel);border-right:2px solid var(--line);display:flex;flex-direction:column;gap:6px;padding:8px;align-items:center;overflow-y:auto}.tools button{width:44px;height:40px;font-size:18px;position:relative;padding:0}.tools button span{position:absolute;right:2px;bottom:0;font-size:9px;opacity:.7}.tools hr{width:100%;border:0;border-top:2px solid var(--line);margin:4px 0}.brush input{width:44px;text-align:center}.colors{display:grid;gap:4px;justify-items:center}.colors input[type=color]{width:40px;height:32px;padding:0;border:2px solid var(--line);background:none;cursor:pointer}.colors button{width:40px;height:24px;font-size:13px}.canvasArea{position:relative;overflow:hidden;background:repeating-conic-gradient(#30263c 0,#30263c 25%,#2b2235 0,#2b2235 50%) 0 0 / 24px 24px}#view{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:crosshair;outline:none}.zoom{position:absolute;left:50%;bottom:10px;transform:translate(-50%);display:flex;gap:6px;align-items:center;background:var(--panel);border:2px solid var(--line);padding:4px 8px;flex-wrap:wrap;justify-content:center}.zoom output{min-width:48px;text-align:center;font-family:ui-monospace,monospace}.side{background:var(--panel);border-left:2px solid var(--line);padding:10px;overflow-y:auto;display:grid;gap:16px;align-content:start}.side h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--hot);margin:0 0 8px;display:flex;gap:8px;align-items:center;justify-content:space-between}.side h2 select{font-size:12px;text-transform:none;letter-spacing:0;max-width:130px}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.palette button{aspect-ratio:1;padding:0;border:2px solid #0006;box-shadow:none}.palette button.on{border-color:var(--fg)}.preview{width:100%;aspect-ratio:1;image-rendering:pixelated;background:repeating-conic-gradient(#30263c 0,#30263c 25%,#2b2235 0,#2b2235 50%) 0 0 / 16px 16px;border:2px solid var(--line)}.row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:6px}.timeline{background:#221a2b;border-top:2px solid var(--line);max-height:34vh;display:grid;grid-template-rows:auto 1fr;min-height:0}.tl-bar{display:flex;gap:6px;align-items:center;padding:6px 10px;flex-wrap:wrap}.tl-bar .sep{width:16px}.tl-grid{overflow:auto;padding:0 10px 10px}.tl-grid table{border-collapse:collapse}.tl-grid th,.tl-grid td{border:1px solid var(--line);padding:0}.tl-grid th{font-weight:400;color:var(--muted);padding:2px 6px;min-width:34px;cursor:pointer}.tl-grid th.cur{color:var(--hot)}.tl-grid .lname{display:flex;gap:4px;align-items:center;padding:2px 6px;min-width:150px;cursor:pointer}.tl-grid .lname.cur{background:var(--panel2)}.tl-grid .lname input{width:100px;background:none;border:0;color:var(--fg)}.tl-grid .eye{background:none;border:0;box-shadow:none;padding:0 2px}.tl-grid td.cel{width:34px;height:30px;cursor:pointer;text-align:center}.tl-grid td.cel.cur{background:var(--hot2)}.tl-grid td.cel.filled:after{content:"●";color:var(--fg);font-size:10px}dialog{background:var(--panel);color:var(--fg);border:2px solid var(--line);padding:18px;min-width:min(380px,92vw)}dialog::backdrop{background:#000a}dialog h2{margin:0 0 12px;color:var(--hot)}dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:16px 0 0}.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.exports{display:grid;gap:6px;margin-top:10px}#toast{position:fixed;top:60px;left:50%;transform:translate(-50%);background:var(--hot);color:#2b2235;padding:6px 14px;font-weight:700;display:none;z-index:9}@media(max-width:820px){.work{grid-template-columns:56px 1fr}.side{display:none}.tools button{width:40px}}