:root{--bg:#101217;--panel:#181b22;--panel2:#1e222b;--line:#2a2f3a;--text:#dfe4ec;--muted:#798292;--gold:#d8a145;--gold2:#f0bd61}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{color:inherit}.app-shell{height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr) 30px;background:radial-gradient(circle at 48% 40%,#1a1d24 0,#111319 52%,#0d0f13 100%);user-select:none}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));background:#15181e;border-bottom:1px solid var(--line);box-shadow:0 4px 18px #0005;z-index:3}.brand{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:800;letter-spacing:.13em;white-space:nowrap}.brand .accent{color:var(--gold)}.brand b{font-size:8px;color:var(--gold);border:1px solid #8e652c;border-radius:3px;padding:3px 5px;letter-spacing:.1em}.brand-mark{width:26px;height:26px;display:grid;grid-template-columns:1fr 1fr;gap:2px;transform:rotate(45deg);padding:3px;border:1px solid #805e2c;border-radius:5px}.brand-mark i{background:#394052}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:var(--gold)}.document-title{text-align:center;line-height:1.15}.document-title span{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.document-title small{color:var(--muted);font-size:9px}.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:7px}.top-actions button,.panel-title button{border:1px solid var(--line);background:#1b1f27;border-radius:6px;cursor:pointer}.icon-btn{width:34px;height:34px;font-size:18px}.icon-btn:disabled,button:disabled{opacity:.3}.save-btn,.export-btn{height:34px;padding:0 13px;font-size:11px;font-weight:650}.save-btn span{font-size:7px;color:#79a97e;margin-right:5px}.export-btn{background:var(--gold)!important;color:#151515!important;border-color:var(--gold)!important}.workspace{min-height:0;display:grid;grid-template-columns:74px minmax(0,1fr) 272px}.toolrail{background:#15181e;border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:7px;z-index:2}.toolrail button{position:relative;width:48px;height:48px;border:1px solid transparent;background:transparent;border-radius:8px;cursor:pointer}.toolrail button span{font-size:23px;font-style:normal;line-height:1}.toolrail button small{position:absolute;right:4px;bottom:3px;color:#667080;font-size:7px}.toolrail button em{display:none;position:absolute;left:58px;top:12px;background:#08090c;border:1px solid #303642;padding:6px 9px;border-radius:5px;font-size:10px;font-style:normal;white-space:nowrap;z-index:10}.toolrail button:hover em{display:block}.toolrail button:hover{background:#20242d}.toolrail button.active{background:#2c271d;border-color:#8c642c;color:var(--gold2);box-shadow:inset 0 0 0 1px #3c3020}.toolrail button.subtle{height:40px;color:#87909e}.rail-divider{width:32px;border-top:1px solid var(--line);margin:4px 0}.stage{min-width:0;min-height:0;overflow:auto;display:grid;grid-template-rows:28px minmax(0,1fr) 42px;align-items:center;justify-items:center;padding:12px 18px 0;background-image:linear-gradient(45deg,#12151a 25%,transparent 25%),linear-gradient(-45deg,#12151a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#12151a 75%),linear-gradient(-45deg,transparent 75%,#12151a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.stage-label{width:min(100%,750px);display:flex;justify-content:space-between;color:#697383;font-family:ui-monospace,monospace;font-size:9px}.canvas-frame{align-self:center;justify-self:center;padding:14px;background:#0b0c10;border:1px solid #313641;box-shadow:0 18px 55px #000b;border-radius:4px;overflow:auto;max-width:100%;max-height:100%}.pixel-canvas{--pixel:24px;display:grid;grid-template-columns:repeat(24,var(--pixel));grid-template-rows:repeat(24,var(--pixel));background-color:#252a32;background-image:linear-gradient(45deg,#2d333d 25%,transparent 25%),linear-gradient(-45deg,#2d333d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2d333d 75%),linear-gradient(-45deg,transparent 75%,#2d333d 75%);background-size:calc(var(--pixel)*2) calc(var(--pixel)*2);background-position:0 0,0 var(--pixel),var(--pixel) calc(var(--pixel)*-1),calc(var(--pixel)*-1) 0;touch-action:none}.pixel{width:var(--pixel);height:var(--pixel)}.pixel-canvas.show-grid .pixel{box-shadow:inset -1px -1px #0002}.pixel:hover{box-shadow:inset 0 0 0 1px #fff8!important}.zoom-control{align-self:end;display:flex;align-items:center;gap:8px;background:#181b22;border:1px solid var(--line);border-radius:8px 8px 0 0;padding:7px 12px;color:#87909e}.zoom-control button{background:transparent;border:0;color:#aeb5c0;cursor:pointer;font-size:17px}.zoom-control input{width:110px;accent-color:var(--gold)}.zoom-control span{font-family:ui-monospace,monospace;font-size:9px;min-width:34px}.inspector{min-height:0;overflow:auto;background:#15181e;border-left:1px solid var(--line);z-index:2}.panel{padding:16px;border-bottom:1px solid var(--line)}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-title h2{font-size:9px;letter-spacing:.16em;color:#8992a0;margin:0}.panel-title h2 span{background:#2a2f38;padding:2px 5px;border-radius:9px;color:#aeb6c2}.panel-title button{height:25px;min-width:28px;color:#8c95a2;font-size:11px}.color-current{display:flex;gap:11px;align-items:center;margin-bottom:14px}.color-current label{display:block;width:52px;height:42px;border-radius:6px;border:1px solid #ffffff26;cursor:pointer;box-shadow:inset 0 0 0 4px #1114}.color-current input{opacity:0;width:100%;height:100%}.color-current div{display:flex;flex-direction:column;gap:3px}.color-current strong{font-family:ui-monospace,monospace;font-size:12px}.color-current small{font-size:8px;color:#6f7887}.palette{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.palette button{aspect-ratio:1;border-radius:4px;border:1px solid #ffffff18;cursor:pointer}.palette button.selected{outline:2px solid var(--gold);outline-offset:2px}.palette .add-color{background:transparent;border:1px dashed #4a515e;color:#7e8794}.layers-panel{padding-left:12px;padding-right:12px}.layer{height:55px;display:grid;grid-template-columns:25px 38px 1fr 12px;align-items:center;gap:8px;padding:5px 6px;border:1px solid transparent;border-radius:6px;color:#7e8794}.active-layer{background:#222730;border-color:#343b47;color:#cfd5de}.eye{font-size:9px}.layer-thumb{width:36px;height:36px;border:1px solid #3a414c;border-radius:3px}.checker{background-color:#252a32;background-image:linear-gradient(45deg,#323844 25%,transparent 25%),linear-gradient(-45deg,#323844 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#323844 75%),linear-gradient(-45deg,transparent 75%,#323844 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.mini-art{background:linear-gradient(135deg,#1c2230 0 35%,#4c6f64 35% 65%,#d8a145 65% 75%,#763d4d 75%)}.layer div{display:flex;flex-direction:column;gap:3px}.layer strong{font-size:10px}.layer small{font-size:8px;color:#697281}.layer b{font-size:13px}.preview-panel{padding-bottom:20px}.mini-preview{height:145px;display:grid;place-items:center;background:#101218;border:1px solid #292e38;border-radius:4px}.pixel-mini{width:120px;height:120px;display:grid;grid-template-columns:repeat(24,5px);grid-template-rows:repeat(24,5px);background-color:#252a32;background-image:linear-gradient(45deg,#313742 25%,transparent 25%),linear-gradient(-45deg,#313742 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#313742 75%),linear-gradient(-45deg,transparent 75%,#313742 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.pixel-mini i{width:5px;height:5px}.statusbar{display:flex;align-items:center;gap:24px;padding:0 14px;background:#101217;border-top:1px solid #252a33;color:#687180;font-size:9px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:5px}.statusbar .tip{margin-left:auto}.statusbar>span+span{border-left:1px solid #292e36;padding-left:24px}
@media(max-width:900px){.workspace{grid-template-columns:64px minmax(0,1fr)}.inspector{display:none}.document-title{display:none}.topbar{grid-template-columns:1fr 1fr}.brand b{display:none}.stage{padding-left:8px;padding-right:8px}.pixel-canvas{--pixel:20px!important}.statusbar .tip{display:none}}
@media(max-width:600px){.app-shell{grid-template-rows:56px minmax(0,1fr) 28px}.topbar{padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}.brand{font-size:11px}.brand-mark{width:22px;height:22px}.save-btn{display:none}.export-btn{padding:0 8px}.workspace{grid-template-columns:54px minmax(0,1fr)}.toolrail{padding:9px 4px}.toolrail button{width:42px;height:44px}.canvas-frame{padding:8px}.pixel-canvas{--pixel:15px!important}.stage-label{display:none}.stage{grid-template-rows:1fr 38px}.zoom-control{display:none}.statusbar{gap:12px}.statusbar>span+span{padding-left:12px}.statusbar>span:nth-child(2){display:none}}