.mtool-page .mtool{font-variant-emoji:text;--text:var(--ink);--muted:var(--dim);--accent:var(--cyan);--danger:var(--danger);--panel-width:320px;color-scheme:dark;background:var(--bg);color:var(--text);font-family:var(--display);font-size:var(--type-secondary)}.mtool-page .mtool *{box-sizing:border-box}.mtool-page{display:flex;flex-direction:column;height:calc(100dvh - 57px - 64px);min-height:520px;overflow:hidden;border:1px solid #26262c;border-radius:12px;background:var(--bg)}@media (max-width:899px){.mtool-page{height:calc(100dvh - 57px - 52px);min-height:480px}}.mtool-page .mtool{flex:1 1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.mtool-page .mtool>header.topbar{display:none}.mtool-page main.tool{flex:1 1;display:grid;grid-template-columns:1fr var(--panel-width);grid-gap:12px;gap:12px;padding:12px;min-height:0}.mtool-page .canvas-wrap{background:var(--bg);border:2px solid var(--line);overflow:hidden;position:relative;min-height:0;min-width:0;touch-action:none}.mtool-page .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(114,95,249,.28);box-shadow:0 6px 30px rgba(0,0,0,.55);will-change:transform}.mtool-page .canvas-wrap.empty .view,.mtool-page .canvas-wrap.empty canvas{display:none}.mtool-page .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}.mtool-page .canvas-wrap.panning{cursor:-webkit-grabbing;cursor:grabbing}.mtool-page .canvas-wrap.pannable{cursor:-webkit-grab;cursor:grab}.mtool-page .view-controls{position:absolute;bottom:10px;right:10px;display:flex;gap:6px;z-index:2}.mtool-page .view-controls button{font-size:var(--type-caption);padding:4px 8px;background:rgba(17,17,20,.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:none}.mtool-page main.home{flex:1 1;padding:32px;overflow-y:auto;display:flex;flex-direction:column;gap:24px}.mtool-page .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));grid-gap:16px;gap:16px;max-width:1100px}.mtool-page .tool-card{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--panel);border:1px solid var(--border-card);border-radius:var(--radius-card,16px);box-shadow:none;text-decoration:none;color:var(--text);transition:border-color .1s,transform .1s}.mtool-page .tool-card:hover{border-color:var(--pink);transform:translate(-1px,-1px)}.mtool-page .card-icon{font-size:var(--type-heading);line-height:1}.mtool-page .card-title{font-size:var(--type-body);font-weight:700}.mtool-page .card-desc{font-size:var(--type-caption);color:var(--muted);line-height:1.5;flex:1 1}.mtool-page .card-cta{font-size:var(--type-caption);color:var(--accent);margin-top:4px}.mtool-page .home-footer{font-size:var(--type-caption);color:var(--muted);max-width:640px;line-height:1.6}.mtool-page main.tool.perspective{grid-template-columns:1fr 1fr var(--panel-width)}.mtool-page main.tool.perspective .wh-row{display:grid;grid-template-columns:auto 1fr auto 1fr;grid-gap:6px;gap:6px;align-items:center}.mtool-page main.tool.perspective .wh-row label{color:var(--muted);font-size:var(--type-caption)}.mtool-page main.tool.perspective .wh-row input{width:100%;min-width:0}.mtool-page main.tool.perspective #preview-stage canvas{image-rendering:auto}.mtool-page .canvas-wrap.pv-empty canvas{display:none}.mtool-page .canvas-wrap.pv-empty:after{content:"preview appears once an image is loaded";inset:0;display:flex;align-items:center;justify-content:center}.mtool-page .canvas-wrap.pv-empty:after,.mtool-page .pane-label{color:var(--muted);position:absolute;pointer-events:none;font-size:var(--type-caption)}.mtool-page .pane-label{top:8px;left:10px;font-family:var(--pixel);letter-spacing:1px;background:rgba(17,17,20,.75);border:1px solid var(--line);padding:4px 7px;z-index:2;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mtool-page main.tool.sprite{grid-template-columns:1fr var(--panel-width);grid-template-rows:1fr auto;grid-template-areas:"stage panel" "strip panel"}.mtool-page main.tool.sprite .canvas-wrap{grid-area:stage}.mtool-page main.tool.sprite aside.panel{grid-area:panel}.mtool-page 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}.mtool-page .timeline .empty-msg{color:var(--muted);font-size:var(--type-caption);padding:24px 12px}.mtool-page .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}.mtool-page .timeline .frame-thumb canvas{width:80px;height:60px;background:repeating-conic-gradient(var(--panel-2) 0 25%,var(--panel) 0 50%) 0 0 /10px 10px;border:2px solid var(--line);object-fit:contain;image-rendering:pixelated}.mtool-page .timeline .frame-thumb.selected canvas{border-color:var(--accent)}.mtool-page .timeline .frame-thumb .label{text-align:center;font-size:var(--type-caption);color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.mtool-page .timeline .frame-thumb.selected .label{color:var(--accent)}.mtool-page .timeline .frame-thumb.dragging{opacity:.4}.mtool-page .timeline .frame-thumb.drop-before canvas{box-shadow:-3px 0 0 var(--pink)}.mtool-page .timeline .frame-thumb.drop-after canvas{box-shadow:3px 0 0 var(--pink)}.mtool-page .view{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.mtool-page .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(114,95,249,.28);box-shadow:0 6px 30px rgba(0,0,0,.55);image-rendering:pixelated}.mtool-page .view svg.overlay{position:absolute;top:0;left:0;overflow:visible}.mtool-page .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)}.mtool-page .palette-swatch{width:14px;height:14px;border:1px solid rgba(0,0,0,.4);flex-shrink:0}.mtool-page textarea.custom-palette{width:100%;min-height:96px;font:var(--type-caption) var(--font-mono),ui-monospace,SF Mono,monospace;background:var(--bg);color:var(--text);border:2px solid var(--line);padding:6px;resize:vertical}.mtool-page textarea.custom-palette:focus{outline:none;border-color:var(--pink)}.mtool-page .mtool select{font:inherit;background:var(--bg);color:var(--text);border:2px solid var(--line);padding:6px 8px}.mtool-page .mtool select:focus{outline:none;border-color:var(--pink)}.mtool-page .crop-dim{fill:rgba(0,0,0,.55);pointer-events:none}.mtool-page .crop-rect{fill:rgba(55,179,208,.05);stroke:var(--accent);stroke-width:2;cursor:move}.mtool-page .frame-rect{fill:rgba(55,179,208,.05);stroke:rgba(55,179,208,.7);stroke-width:1.5;cursor:move}.mtool-page .frame-rect.selected{fill:rgba(55,179,208,.15);stroke:var(--accent);stroke-width:2}.mtool-page .frame-rect.drawing{fill:rgba(254,165,60,.1);stroke:var(--orange);stroke-width:2;stroke-dasharray:4 3;pointer-events:none}.mtool-page .frame-label{fill:var(--accent);font-size:var(--type-caption);font-family:var(--display);pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:3}.mtool-page .handle{fill:var(--accent);stroke:var(--bg);stroke-width:1}.mtool-page .anchor-mark line{stroke:var(--pink);stroke-width:2;stroke-linecap:round;pointer-events:none}.mtool-page .anchor-presets{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:4px;gap:4px}.mtool-page .anchor-presets button{font-family:var(--display);padding:4px 0;font-size:var(--type-secondary)}.mtool-page .handle.nw,.mtool-page .handle.se{cursor:nwse-resize}.mtool-page .handle.ne,.mtool-page .handle.sw{cursor:nesw-resize}.mtool-page .handle.n,.mtool-page .handle.s{cursor:ns-resize}.mtool-page .handle.e,.mtool-page .handle.w{cursor:ew-resize}.mtool-page .playback-preview{width:100%;height:180px;background:repeating-conic-gradient(var(--panel-2) 0 25%,var(--panel) 0 50%) 0 0 /16px 16px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center}.mtool-page .playback-preview canvas{max-width:100%;max-height:100%;image-rendering:pixelated}.mtool-page .zoom-indicator{position:absolute;bottom:10px;left:10px;font-size:var(--type-caption);color:var(--muted);background:rgba(17,17,20,.75);border:1px solid var(--line);padding:3px 7px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;pointer-events:none;z-index:2}.mtool-page aside.panel{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--border-card);border-radius:var(--radius-card,16px);box-shadow:none;padding:14px;overflow-y:auto;position:relative;min-width:0}.mtool-page .panel-resizer{position:absolute;top:0;bottom:0;left:-8px;width:12px;cursor:ew-resize;z-index:5;background:transparent}.mtool-page .panel-resizer:after{content:"";position:absolute;top:0;bottom:0;left:6px;width:2px;background:transparent;transition:background .1s}.mtool-page .panel-resizer.dragging:after,.mtool-page .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}.mtool-page .section{display:flex;flex-direction:column;gap:8px}.mtool-page .section h2{font-family:var(--pixel);font-size:var(--type-caption);font-weight:400;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0}.mtool-page .mtool button{font:inherit;color:var(--btn-text-on-dark);background:var(--btn-fill-secondary);border:1px solid var(--btn-border);border-radius:var(--radius-control);padding:7px 12px;cursor:pointer;transition:border-color .1s,color .1s}.mtool-page .mtool button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.mtool-page .mtool button:disabled{opacity:.45;cursor:not-allowed}.mtool-page .mtool button.primary{background:var(--btn-fill-primary);color:var(--btn-text-on-primary);border:none;border-radius:var(--radius-control);font-weight:700;transition:filter .12s}.mtool-page .mtool button.primary:hover:not(:disabled){filter:brightness(.92)}.mtool-page button.tool-btn{display:flex;align-items:center;gap:8px;justify-content:flex-start;width:100%}.mtool-page .mtool button.tool-btn.active{border-color:var(--accent);color:var(--accent)}.mtool-page .mtool input[type=range]{width:100%;accent-color:var(--cyan)}.mtool-page .mtool input[type=number],.mtool-page .mtool input[type=text]{font:inherit;background:var(--bg);color:var(--text);border:2px solid var(--line);padding:5px 8px;min-width:0}.mtool-page .mtool input[type=number]:focus,.mtool-page .mtool input[type=text]:focus{outline:none;border-color:var(--cyan)}.mtool-page input[type=file]{display:none}.mtool-page .row{display:flex;gap:8px;align-items:center}.mtool-page .row label{color:var(--muted);font-size:var(--type-caption);min-width:70px}.mtool-page .row .value{color:var(--muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:32px;text-align:right;font-size:var(--type-caption)}.mtool-page .swatch{width:22px;height:22px;border:1px solid var(--line);flex-shrink:0}.mtool-page .status{font-size:var(--type-caption);color:var(--muted);min-height:16px}.mtool-page .status.error{color:var(--danger)}.mtool-page .send-bar{display:flex;gap:8px;flex-wrap:wrap}.mtool-page .send-bar button{flex:1 1;min-width:100px}@media (pointer:coarse){.mtool-page .mtool .tool-btn,.mtool-page .mtool button,.mtool-page .mtool button.primary{min-height:44px}}@media (max-width:720px){.mtool-page main.tool,.mtool-page main.tool.perspective{grid-template-columns:1fr;grid-auto-rows:min-content;overflow-y:auto}.mtool-page main.tool.sprite{grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"stage" "strip" "panel"}.mtool-page main.tool .canvas-wrap{height:48vh;min-height:260px}.mtool-page main.tool aside.panel{overflow-y:visible}.mtool-page .panel-resizer{display:none}}