.mtool{font-variant-emoji:text;--bg:#0b0416;--deep:#0e0620;--panel:#140826;--panel-2:#1c0d33;--line:#3a1f63;--btn-line:#4d2a7d;--text:#f3ecff;--muted:#8b78b5;--accent:#00e5ff;--pink:#ff2e97;--pink-lt:#ff8dc7;--yellow:#ffe14d;--danger:#ff2e97;--panel-width:320px;color-scheme:dark;background:var(--bg);color:var(--text);font-family:var(--font-mono),ui-monospace,var(--cjk-sans);font-size:13px}.mtool *{box-sizing:border-box}.mtool-page{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg,#0b0416)}.mtool{flex:1 1;display:flex;flex-direction:column;min-height:0;overflow:hidden}header.topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:2px solid var(--line);background:var(--panel)}header.topbar h1{font-family:var(--pixel);font-size:11px;font-weight:400;margin:0;letter-spacing:1.5px;color:var(--accent);text-shadow:0 0 10px rgba(0,229,255,.55)}.home-link{color:inherit;text-decoration:none;transition:color .1s,text-shadow .1s}.home-link:hover{color:var(--pink);text-shadow:0 0 10px rgba(255,46,151,.55)}header.topbar .crumb{font-family:var(--pixel);color:var(--muted);font-size:9px;letter-spacing:1px}main.tool{flex:1 1;display:grid;grid-template-columns:1fr var(--panel-width);grid-gap:12px;gap:12px;padding:12px;min-height:0}.canvas-wrap{background:var(--deep);border:2px solid var(--line);overflow:hidden;position:relative;min-height:0;min-width:0;touch-action:none}.canvas-wrap canvas{position:absolute;top:0;left:0;transform-origin:0 0;image-rendering:pixelated;background-color:var(--panel);background-image:linear-gradient(45deg,#221238 25%,transparent 0),linear-gradient(-45deg,#221238 25%,transparent 0),linear-gradient(45deg,transparent 75%,#221238 0),linear-gradient(-45deg,transparent 75%,#221238 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,10px 0;outline:1px solid rgba(160,107,255,.28);box-shadow:0 6px 30px rgba(0,0,0,.55);will-change:transform}.canvas-wrap.empty canvas{display:none}.canvas-wrap.empty:after{content:"drop an image, paste, or click upload";color:var(--muted);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.canvas-wrap.panning{cursor:-webkit-grabbing;cursor:grabbing}.canvas-wrap.pannable{cursor:-webkit-grab;cursor:grab}.view-controls{position:absolute;bottom:10px;right:10px;display:flex;gap:6px;z-index:2}.view-controls button{font-size:11px;padding:4px 8px;background:rgba(11,4,22,.85);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:none}main.home{flex:1 1;padding:32px;overflow-y:auto;display:flex;flex-direction:column;gap:24px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-gap:16px;gap:16px;max-width:1100px}.tool-card{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--panel);border:2px solid var(--line);box-shadow:4px 4px 0 rgba(0,0,0,.5);text-decoration:none;color:var(--text);transition:border-color .1s,transform .1s}.tool-card:hover{border-color:var(--pink);transform:translate(-1px,-1px)}.card-icon{font-size:28px;line-height:1}.card-title{font-size:15px;font-weight:700}.card-desc{font-size:12px;color:var(--muted);line-height:1.5;flex:1 1}.card-cta{font-size:12px;color:var(--accent);margin-top:4px}.home-footer{font-size:12px;color:var(--muted);max-width:640px;line-height:1.6}main.tool.perspective{grid-template-columns:1fr 1fr var(--panel-width)}main.tool.perspective .wh-row{display:grid;grid-template-columns:auto 1fr auto 1fr;grid-gap:6px;gap:6px;align-items:center}main.tool.perspective .wh-row label{color:var(--muted);font-size:12px}main.tool.perspective .wh-row input{width:100%;min-width:0}main.tool.perspective #preview-stage canvas{image-rendering:auto}.canvas-wrap.pv-empty canvas{display:none}.canvas-wrap.pv-empty:after{content:"preview appears once an image is loaded";inset:0;display:flex;align-items:center;justify-content:center;font-size:12px}.canvas-wrap.pv-empty:after,.pane-label{color:var(--muted);position:absolute;pointer-events:none}.pane-label{top:8px;left:10px;font-family:var(--pixel);font-size:8px;letter-spacing:1px;background:rgba(11,4,22,.75);border:1px solid var(--line);padding:4px 7px;z-index:2;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}main.tool.sprite{grid-template-columns:1fr var(--panel-width);grid-template-rows:1fr auto;grid-template-areas:"stage panel" "strip panel"}main.tool.sprite .canvas-wrap{grid-area:stage}main.tool.sprite aside.panel{grid-area:panel}main.tool.sprite .timeline{grid-area:strip;display:flex;gap:6px;padding:8px;background:var(--panel);border:2px solid var(--line);overflow-x:auto;min-height:96px;align-items:stretch}.timeline .empty-msg{color:var(--muted);font-size:12px;padding:24px 12px}.timeline .frame-thumb{display:flex;flex-direction:column;align-items:stretch;gap:4px;flex-shrink:0;width:80px;cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.timeline .frame-thumb canvas{width:80px;height:60px;background:repeating-conic-gradient(#1c0d33 0 25%,#140826 0 50%) 0 0 /10px 10px;border:2px solid var(--line);object-fit:contain;image-rendering:pixelated}.timeline .frame-thumb.selected canvas{border-color:var(--accent)}.timeline .frame-thumb .label{text-align:center;font-size:11px;color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.timeline .frame-thumb.selected .label{color:var(--accent)}.timeline .frame-thumb.dragging{opacity:.4}.timeline .frame-thumb.drop-before canvas{box-shadow:-3px 0 0 var(--pink)}.timeline .frame-thumb.drop-after canvas{box-shadow:3px 0 0 var(--pink)}.view{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.view canvas.bitmap{display:block;background-color:var(--panel);background-image:linear-gradient(45deg,#221238 25%,transparent 0),linear-gradient(-45deg,#221238 25%,transparent 0),linear-gradient(45deg,transparent 75%,#221238 0),linear-gradient(-45deg,transparent 75%,#221238 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,10px 0;outline:1px solid rgba(160,107,255,.28);box-shadow:0 6px 30px rgba(0,0,0,.55);image-rendering:pixelated}.view svg.overlay{position:absolute;top:0;left:0;overflow:visible}.palette-swatches{display:flex;flex-wrap:wrap;gap:2px;max-height:96px;overflow-y:auto;padding:4px;background:var(--bg);border:1px solid var(--line)}.palette-swatch{width:14px;height:14px;border:1px solid rgba(0,0,0,.4);flex-shrink:0}textarea.custom-palette{width:100%;min-height:96px;font:12px var(--font-mono),ui-monospace,SF Mono,monospace;background:var(--bg);color:var(--text);border:2px solid var(--line);padding:6px;resize:vertical}textarea.custom-palette:focus{outline:none;border-color:var(--pink)}.mtool select{font:inherit;background:var(--bg);color:var(--text);border:2px solid var(--line);padding:6px 8px}.mtool select:focus{outline:none;border-color:var(--pink)}.crop-dim{fill:rgba(0,0,0,.55);pointer-events:none}.crop-rect{stroke:var(--accent);stroke-width:2}.crop-rect,.frame-rect{fill:rgba(0,229,255,.05);cursor:move}.frame-rect{stroke:rgba(0,229,255,.7);stroke-width:1.5}.frame-rect.selected{fill:rgba(0,229,255,.15);stroke:var(--accent);stroke-width:2}.frame-rect.drawing{fill:rgba(255,225,77,.1);stroke:var(--yellow);stroke-width:2;stroke-dasharray:4 3;pointer-events:none}.frame-label{fill:var(--accent);font-size:11px;font-family:monospace;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:3}.handle{fill:var(--accent);stroke:#0b0416;stroke-width:1}.anchor-mark line{stroke:var(--pink);stroke-width:2;stroke-linecap:round;pointer-events:none}.anchor-presets{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:4px;gap:4px}.anchor-presets button{font-family:var(--font-mono),ui-monospace,"SF Mono",monospace;padding:4px 0;font-size:14px}.handle.nw,.handle.se{cursor:nwse-resize}.handle.ne,.handle.sw{cursor:nesw-resize}.handle.n,.handle.s{cursor:ns-resize}.handle.e,.handle.w{cursor:ew-resize}.playback-preview{width:100%;height:180px;background:repeating-conic-gradient(#1c0d33 0 25%,#140826 0 50%) 0 0 /16px 16px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center}.playback-preview canvas{max-width:100%;max-height:100%;image-rendering:pixelated}.zoom-indicator{position:absolute;bottom:10px;left:10px;font-size:11px;color:var(--muted);background:rgba(11,4,22,.75);border:1px solid var(--line);padding:3px 7px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;pointer-events:none;z-index:2}aside.panel{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:2px solid var(--line);box-shadow:4px 4px 0 rgba(0,0,0,.5);padding:14px;overflow-y:auto;position:relative;min-width:0}.panel-resizer{left:-8px;width:12px;cursor:ew-resize;z-index:5}.panel-resizer,.panel-resizer:after{position:absolute;top:0;bottom:0;background:transparent}.panel-resizer:after{content:"";left:6px;width:2px;transition:background .1s}.panel-resizer.dragging:after,.panel-resizer:hover:after{background:var(--pink)}body.panel-resizing,body.panel-resizing *{cursor:ew-resize!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.section{display:flex;flex-direction:column;gap:8px}.section h2{font-family:var(--pixel);font-size:8px;font-weight:400;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0}.mtool button{font:inherit;color:var(--text);background:var(--panel-2);border:2px solid var(--btn-line);box-shadow:2px 2px 0 rgba(0,0,0,.5);padding:7px 12px;cursor:pointer;transition:border-color .1s,color .1s}.mtool button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.mtool button:disabled{opacity:.45;cursor:not-allowed}.mtool button.primary{background:var(--pink);color:var(--bg);border-color:var(--pink-lt);box-shadow:3px 3px 0 rgba(0,0,0,.55);font-weight:700;transition:transform .12s,box-shadow .12s}.mtool button.primary:hover:not(:disabled){color:var(--bg);border-color:var(--pink-lt);transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(0,0,0,.55)}button.tool-btn{display:flex;align-items:center;gap:8px;justify-content:flex-start;width:100%}.mtool button.tool-btn.active{border-color:var(--accent);color:var(--accent)}.mtool input[type=range]{width:100%;accent-color:var(--pink)}.mtool input[type=number],.mtool input[type=text]{font:inherit;background:var(--bg);color:var(--text);border:2px solid var(--line);padding:5px 8px;min-width:0}.mtool input[type=number]:focus,.mtool input[type=text]:focus{outline:none;border-color:var(--pink)}input[type=file]{display:none}.row{display:flex;gap:8px;align-items:center}.row label{color:var(--muted);font-size:12px;min-width:70px}.row .value{color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:32px;text-align:right;font-size:12px}.swatch{width:22px;height:22px;border:1px solid var(--line);flex-shrink:0}.status{font-size:12px;color:var(--muted);min-height:16px}.status.error{color:var(--danger)}.send-bar{display:flex;gap:8px;flex-wrap:wrap}.send-bar button{flex:1 1;min-width:100px}@media (pointer:coarse){.mtool button{min-height:40px}.mtool .tool-btn,.mtool button.primary{min-height:44px}}