:root{--glass:#10141cb8;--glass-strong:#12161ff0;--line:#ffffff1a;--text:#eef1f6;--muted:#9aa3b2;--accent:#ffb547;--accent-ink:#2a1a00;--warn:#ff8a7a;--radius:12px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;color:var(--text);background:#bcd9f2;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}canvas#view{width:100%;height:100%;display:block;position:fixed;inset:0}body.free-cursor canvas#view{cursor:grab}body.free-cursor canvas#view.dragging{cursor:grabbing}.hidden{display:none!important}.small{font-size:12px}.muted{color:var(--muted)}.warn{color:var(--warn)}.glass{background:var(--glass);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius)}kbd{text-align:center;min-width:1.7em;color:var(--text);background:#ffffff14;border:1px solid #ffffff29;border-bottom-width:2px;border-radius:5px;margin:0 2px;padding:1px 6px;font:600 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-block}.btn{font:inherit;color:var(--text);cursor:pointer;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);border-radius:10px;padding:8px 14px;font-weight:600;transition:background .15s,transform .1s}.btn:hover{background:#282e3ce6}.btn:active{transform:translateY(1px)}.btn kbd{margin-left:6px}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}.btn.primary:hover{background:#ffc66e}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.wide{width:100%;padding:11px}.grow{flex:1}.icon-btn{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:4px 8px;font:20px/1 system-ui}.icon-btn:hover{color:var(--text);background:#ffffff14}.icon-btn.small{padding:0 6px;font-size:16px}input:not([type]),input[type=number]{font:inherit;color:var(--text);border:1px solid var(--line);background:#0000004d;border-radius:8px;outline:none;padding:8px 10px}input:not([type]):focus,input[type=number]:focus{border-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}input[type=color]{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;width:44px;height:36px;padding:0}#crosshair{pointer-events:none;mix-blend-mode:difference;width:18px;height:18px;margin:-9px 0 0 -9px;position:fixed;top:50%;left:50%}#crosshair:before,#crosshair:after{content:"";background:#fff;position:absolute}#crosshair:before{width:2px;height:18px;top:0;left:8px}#crosshair:after{width:18px;height:2px;top:8px;left:0}#hud{pointer-events:none;position:fixed;inset:0}#hud button,#hud input,#hotbar,#brush{pointer-events:auto}#stats{font-variant-numeric:tabular-nums;padding:8px 12px;line-height:1.55;position:absolute;top:12px;left:12px}#top-actions{gap:8px;display:flex;position:absolute;top:12px;right:12px}#status{color:var(--accent);padding:8px 14px;position:absolute;top:12px;left:50%;transform:translate(-50%)}#toasts{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:60px;left:50%;transform:translate(-50%)}.toast{text-align:center;max-width:min(560px,90vw);padding:8px 14px;transition:opacity .4s,transform .4s;animation:.2s ease-out pop}.toast.out{opacity:0;transform:translateY(-6px)}@keyframes pop{0%{opacity:0;transform:translateY(-6px)}}#mode-hint{white-space:nowrap;padding:8px 14px;position:absolute;bottom:112px;left:50%;transform:translate(-50%)}#bottom{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.bottom-row{align-items:stretch;gap:8px;display:flex}#brush{cursor:pointer;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;min-width:58px;padding:4px 8px;display:flex}#brush b{font-size:16px}#hotbar{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);border-radius:14px;gap:6px;padding:6px;display:flex}.slot{cursor:pointer;background:var(--c);border-radius:9px;width:44px;height:44px;transition:transform .12s;position:relative;box-shadow:inset 0 -6px #00000038,inset 0 0 0 1px #00000040}.slot span{color:#fff;text-shadow:0 1px 2px #000c;font:700 10px/1 system-ui;position:absolute;top:2px;left:4px}.slot.sel{outline-offset:2px;outline:2px solid #fff;transform:translateY(-4px)}#hint{color:#ffffffd9;text-shadow:0 1px 2px #0009}#chat{flex-direction:column;gap:6px;width:min(420px,40vw);display:flex;position:absolute;bottom:14px;left:12px}#chat-log{flex-direction:column;gap:2px;display:flex}.chat-line{word-wrap:break-word;background:#0a0c128c;border-radius:6px;width:-moz-fit-content;width:fit-content;max-width:100%;padding:3px 8px;transition:opacity 1s}.chat-line.old{opacity:0}#chat.open .chat-line.old{opacity:1}#chat-input{width:100%}.modal{-webkit-backdrop-filter:blur(3px);background:#080a1073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.card{background:var(--glass-strong);border:1px solid var(--line);-webkit-user-select:text;user-select:text;border-radius:16px;max-height:calc(100vh - 32px);padding:20px;overflow:auto;box-shadow:0 30px 80px #00000073}.card header{align-items:center;gap:10px;margin:-4px 0 14px;display:flex}.card header h2{margin:0;font-size:18px}.card header .icon-btn{margin-left:auto}.label{color:var(--muted);margin:14px 0 6px;font-size:12px;display:block}.label b{color:var(--text)}.row{align-items:center;gap:8px;display:flex}.row input:not([type]){flex:1}.start-card{width:min(520px,100%)}.logo{letter-spacing:-.02em;align-items:center;gap:12px;font-size:30px;font-weight:800;display:flex}.cube{background:linear-gradient(135deg, #ffd08a 0 50%, var(--accent) 50% 100%);border-radius:6px;width:30px;height:30px;transform:rotate(45deg)scale(.8);box-shadow:inset -6px -6px #0000002e}.controls{border-top:1px solid var(--line);color:var(--muted);grid-template-columns:1fr 1fr;gap:6px 16px;margin-top:18px;padding-top:14px;font-size:12.5px;display:grid}.palette-card{width:min(440px,100%)}.swatches{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.swatch{aspect-ratio:1;background:var(--c);cursor:pointer;border:0;border-radius:7px;box-shadow:inset 0 0 0 1px #00000059}.swatch:hover{transform:scale(1.08)}.swatch.sel{outline-offset:2px;outline:2px solid #fff}#palette-hex{width:100px;font-family:ui-monospace,Menlo,monospace}.sprites-card{flex-direction:column;width:min(1080px,100%);height:min(720px,100vh - 32px);display:flex}.sprites-body{flex:1;grid-template-columns:minmax(300px,1fr) 380px;gap:18px;min-height:0;display:grid}.sp-library,.sp-editor{min-height:0;overflow:hidden auto}.sp-editor{flex-direction:column;display:flex}.sp-library{flex-direction:column;gap:10px;padding-right:4px;display:flex}.drop{cursor:pointer;text-align:center;color:var(--muted);border:1.5px dashed #ffffff38;border-radius:12px;flex-direction:column;gap:2px;padding:16px;transition:border-color .15s,background .15s;display:flex}.drop strong{color:var(--text)}.drop:hover,.drop.over{border-color:var(--accent);background:#ffb54712}#sp-sheets{flex-direction:column;gap:8px;display:flex}.sheet{border:1px solid var(--line);background:#ffffff08;border-radius:10px;padding:8px 10px}.sheet-head{cursor:pointer;align-items:center;gap:8px;display:flex}.chev{color:var(--muted);font-size:11px;transition:transform .15s}.sheet.open .chev{transform:rotate(90deg)}.sheet .tiles{margin-top:10px}.sheet-name{text-overflow:ellipsis;white-space:nowrap;max-width:55%;font-weight:600;overflow:hidden}.sheet-head .icon-btn{margin-left:auto}.sheet-cfg{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px;font-size:12px;display:flex}.sheet-cfg input[type=number]{width:52px;margin:0 3px;padding:3px 6px}.check{cursor:pointer;align-items:center;gap:4px;display:inline-flex}.tiles{flex-wrap:wrap;align-content:flex-start;gap:6px;display:flex}.tile{cursor:pointer;border:1px solid var(--line);background:repeating-conic-gradient(#2a303c 0 25%, #222731 0 50%) 0 0 / 12px 12px;border-radius:9px;place-items:center;width:60px;height:60px;padding:0;display:grid}.tile canvas{image-rendering:pixelated}.tile:hover{border-color:#fff6}.tile.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.preview-wrap{background:radial-gradient(circle at 50% 30%,#2b3446,#151a24);border-radius:12px;height:260px;position:relative;overflow:hidden}#sp-preview{cursor:grab;width:100%;height:100%;display:block}#sp-info{text-shadow:0 1px 2px #000;position:absolute;bottom:8px;left:10px;right:10px}.preview-hint{color:#ffffff73;position:absolute;top:8px;right:10px}#sp-help{min-height:3em;margin:10px 0 0}.field{margin-top:8px}.field .label{margin:0 0 5px}.seg{border:1px solid var(--line);background:#0000004d;border-radius:9px;flex-wrap:wrap;gap:2px;padding:2px;display:inline-flex}.seg button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:5px 10px;font-size:12.5px}.seg button:hover{color:var(--text)}.seg button.on{color:var(--text);background:#ffffff1f}.seg.small button{padding:3px 8px;font-size:12px}#sp-place{box-shadow:0 -12px 16px var(--glass-strong);margin-top:auto;position:sticky;bottom:0}#sp-controls{padding-bottom:14px}.preview-wrap{flex:none}@media (max-width:820px){.sprites-body{grid-template-columns:1fr}.sprites-card{height:auto}#top-actions .btn kbd,#hint{display:none}}