@font-face{font-family:PixelDisplay;src:url(/assets/PressStart2P-Regular-2BZhbCiP.ttf) format("truetype");font-display:swap}@font-face{font-family:PixelMono;src:url(/assets/VT323-Regular-DICElq-Y.ttf) format("truetype");font-display:swap}:root{--bg-0: #11161b;--bg-1: #1a2429;--bg-2: #24333a;--panel: #243138;--panel-hi: #2f4048;--text-main: #f2eec9;--text-dim: #c5bf99;--accent-0: #f3a712;--accent-1: #f8cc5f;--accent-2: #71c3b2;--danger: #ff6b6b;--line-dark: #0a0f12;--line-mid: #32444d}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--text-main);font-family:PixelMono,Consolas,monospace;background:radial-gradient(circle at 20% 10%,rgb(243 167 18 / 10%) 0,transparent 28%),radial-gradient(circle at 80% 0,rgb(113 195 178 / 10%) 0,transparent 20%),linear-gradient(180deg,var(--bg-0),#080b0d 65%)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgb(255 255 255 / 2%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 2%) 1px,transparent 1px);background-size:8px 8px;opacity:.5}.pixel-shell{position:relative;max-width:1240px;margin:0 auto;padding:1.2rem 1rem 1rem}.hero{margin-bottom:.95rem;padding:1rem;border:2px solid var(--line-mid);background:linear-gradient(180deg,#1a2429f2,#151e23e5);box-shadow:0 0 0 2px var(--line-dark) inset,0 8px #00000042}.hero h1{margin:0;font-family:PixelDisplay,PixelMono,monospace;font-size:clamp(1.2rem,2vw + .5rem,2rem);letter-spacing:.08em;color:var(--accent-1)}.hero p{margin:.5rem 0 0;color:var(--text-dim);font-size:1.08rem}.layout-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:.9rem}.left-column,.right-column{display:grid;gap:.9rem;align-content:start}.pixel-panel{border:2px solid var(--line-mid);background:linear-gradient(180deg,#243138f5,#1c272deb);box-shadow:0 0 0 2px var(--line-dark) inset,0 6px #0000003d;padding:.75rem}.sprite-card,.compare-card{min-height:470px}.sprite-card{display:grid;grid-template-rows:auto 1fr}.sprite-card .dropzone,.sprite-card .input-preview{align-self:stretch}.sprite-card .input-preview{grid-template-rows:1fr auto}.sprite-card .input-preview img{width:100%;max-height:350px;object-fit:contain}.compare-card{display:grid;grid-template-rows:auto 1fr auto auto}.panel-title{margin:0 0 .65rem;font-family:PixelDisplay,PixelMono,monospace;letter-spacing:.06em;font-size:.9rem;color:var(--accent-1)}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.65rem}.panel-title-row .panel-title{margin:0}.dropzone{display:grid;place-items:center;min-height:140px;border:2px dashed var(--line-mid);background:#0000002e;cursor:pointer;transition:border-color .12s ease,transform .12s ease}.dropzone:hover,.dropzone:focus-within,.dropzone.is-drag-active{border-color:var(--accent-0);transform:translateY(-1px)}.dropzone-label{font-size:1.08rem;color:var(--text-dim);text-align:center}.input-preview{margin-top:.65rem;display:grid;gap:.5rem}.input-preview img{width:min(100%,360px);image-rendering:pixelated;border:2px solid var(--line-mid);background:linear-gradient(45deg,rgb(255 255 255 / 10%) 25%,transparent 25%),linear-gradient(-45deg,rgb(255 255 255 / 10%) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgb(255 255 255 / 10%) 75%),linear-gradient(-45deg,transparent 75%,rgb(255 255 255 / 10%) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.65rem}.pixel-toggle{border:2px solid var(--line-mid);background:#1a252b;color:var(--text-dim);font-family:PixelMono,monospace;font-size:1.05rem;line-height:1.1;padding:.42rem .4rem;cursor:pointer}.pixel-toggle.is-active{background:var(--accent-0);border-color:#b47909;color:#161108}.stacked-field{display:grid;gap:.35rem}.field-grid{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}.field-label{font-size:.98rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em}.pixel-input,.pixel-select,.pixel-textarea,.pixel-slider{width:100%;border:2px solid var(--line-mid);background:#10171b;color:var(--text-main);padding:.45rem .5rem;font-family:PixelMono,monospace;font-size:1.08rem}.pixel-textarea{min-height:128px;resize:vertical}.pixel-input:focus-visible,.pixel-select:focus-visible,.pixel-textarea:focus-visible,.pixel-slider:focus-visible,.pixel-button:focus-visible,.pixel-toggle:focus-visible{outline:2px solid var(--accent-0);outline-offset:2px}.check-row{display:grid;gap:.42rem;margin-top:.65rem}.pixel-check{display:flex;align-items:center;gap:.45rem;font-size:1.08rem}.pixel-check input{accent-color:var(--accent-0)}.zoom-row,.action-row{margin-top:.65rem;display:flex;flex-wrap:wrap;gap:.5rem}.pixel-button{border:2px solid #a06d08;background:var(--accent-0);color:#171107;padding:.4rem .7rem;font-family:PixelDisplay,PixelMono,monospace;font-size:.75rem;letter-spacing:.03em;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none}.pixel-button:hover{filter:brightness(1.08)}.pixel-button:disabled,.pixel-button.is-disabled{opacity:.45;pointer-events:none}.pixel-button.ghost{border-color:var(--line-mid);background:#162127;color:var(--text-main)}.pixel-button.ghost.is-active{background:#2d3f46;border-color:var(--accent-2)}.compare-frame{min-height:320px;border:2px solid var(--line-mid);padding:.45rem;background:linear-gradient(45deg,rgb(255 255 255 / 10%) 25%,transparent 25%),linear-gradient(-45deg,rgb(255 255 255 / 10%) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgb(255 255 255 / 10%) 75%),linear-gradient(-45deg,transparent 75%,rgb(255 255 255 / 10%) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;display:grid;place-items:center}.compare-placeholder{text-align:center;color:var(--text-dim);font-size:1.15rem}.canvas-stack{position:relative;border:2px solid var(--line-dark);overflow:hidden}.compare-canvas{position:absolute;inset:0;image-rendering:pixelated}.compare-canvas.overlay{z-index:2}.split-indicator{position:absolute;top:0;bottom:0;width:2px;background:var(--accent-1);box-shadow:0 0 0 1px #0000007f;z-index:3;transform:translate(-1px)}.chip-group+.chip-group{margin-top:.65rem}.chip-heading{margin:0 0 .45rem;font-size:1.05rem;color:var(--text-dim);font-weight:400}.chip-toggle{width:100%;border:2px solid var(--line-mid);background:#162127;color:var(--text-main);padding:.38rem .45rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.chip-toggle .chip-heading{margin:0}.chip-toggle-state{font-size:.95rem;color:var(--text-dim)}.chip-toggle:focus-visible{outline:2px solid var(--accent-0);outline-offset:2px}.chip-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.35rem}.chip-item{border:2px solid var(--line-mid);background:#151f24;padding:.28rem;display:grid;gap:.2rem}.chip-swatch{display:block;height:20px;border:1px solid rgb(0 0 0 / 55%)}.chip-copy{font-size:.95rem;color:var(--text-main)}.chip-meta{font-size:.9rem;color:var(--text-dim)}.micro-copy{margin:0;color:var(--text-dim);font-size:.95rem}.error-copy{margin:0;color:var(--danger);font-size:.98rem}.status-bar{margin-top:.9rem;border:2px solid var(--line-mid);background:#121b20;box-shadow:0 0 0 2px var(--line-dark) inset;padding:.52rem .62rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.status-label{font-family:PixelDisplay,PixelMono,monospace;font-size:.62rem;color:var(--accent-1);letter-spacing:.04em}.status-message{font-size:1.05rem}.status-code{margin-left:auto;font-size:.95rem;color:var(--text-dim)}.status-bar.is-error{border-color:#7d2f2f}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:980px){.layout-grid{grid-template-columns:1fr}.compare-frame{min-height:250px}.sprite-card,.compare-card{min-height:420px}}