:root{color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;--color-scout-blue:#21497b;--color-thinker-orange:#eb7114;--color-builder-green:#47a036;--color-auditor-red:#971607;--color-core-graphite:#443a3b;--color-black:#000;--color-white:#fff;--color-palette-citron:#ddd605;--color-palette-porcelain:#e3d4d1;--color-palette-fog:#cecaca;--color-palette-warm-graphite:var(--color-core-graphite);--color-palette-carmine:var(--color-auditor-red);--color-palette-clay:#b4684d;--color-palette-saffron:#deb12d;--color-palette-leaf:var(--color-builder-green);--color-palette-lagoon:#2cbaa8;--color-palette-deep-blue:var(--color-scout-blue);--color-palette-violet:#9a5cc6;--color-palette-tangerine:var(--color-thinker-orange);--color-palette-sky:#8bb3ff;--color-palette-amber:#fa0;--color-palette-citron-shade:#373501;--color-palette-porcelain-shade:#383534;--color-palette-fog-shade:#333232;--color-palette-warm-graphite-shade:#110e0e;--color-palette-carmine-shade:#250501;--color-palette-clay-shade:#2d1a13;--color-palette-saffron-shade:#372c0b;--color-palette-leaf-shade:#04280d;--color-palette-lagoon-shade:#0b2e2a;--color-palette-deep-blue-shade:#08121e;--color-palette-violet-shade:#261731;--color-palette-tangerine-shade:#3b1d05;--color-palette-sky-shade:#232d40;--color-palette-amber-olive-shade:#2a2a00;--color-palette-amber-brown-shade:#402a00;--color-scout-blue-soft:#eaf0f6;--color-scout-blue-border:#bdcddd;--color-scout-blue-strong:#17375f;--color-thinker-orange-soft:#fff1df;--color-thinker-orange-border:#f2d3ad;--color-thinker-orange-strong:#70420f;--color-thinker-orange-light:#efb47c;--color-builder-green-soft:#edf5ea;--color-builder-green-border:#bfd9b8;--color-builder-green-strong:#287523;--color-auditor-red-soft:#f8eae8;--color-auditor-red-border:#dfbcb6;--color-auditor-red-strong:#7b1105;--color-info:var(--color-scout-blue-strong);--color-info-accent:var(--color-scout-blue);--color-info-background:var(--color-scout-blue-soft);--color-info-border:var(--color-scout-blue-border);--color-success:var(--color-builder-green-strong);--color-success-accent:var(--color-builder-green);--color-success-background:var(--color-builder-green-soft);--color-success-border:var(--color-builder-green-border);--color-warning:var(--color-thinker-orange-strong);--color-warning-accent:var(--color-thinker-orange);--color-warning-background:var(--color-thinker-orange-soft);--color-warning-border:var(--color-thinker-orange-border);--color-error:var(--color-auditor-red-strong);--color-error-accent:var(--color-auditor-red);--color-error-background:var(--color-auditor-red-soft);--color-error-border:var(--color-auditor-red-border);--color-canvas:#f7f6f4;--color-surface:#fff;--color-surface-inverse:#292526;--color-surface-muted:#f1efed;--color-surface-hover:#f2edeb;--color-text:#292526;--color-text-muted:#70696a;--color-text-inverse:#f7f4f1;--color-text-on-dark-muted:#e3dcda;--color-border:#e1dedd;--color-border-strong:#bfb7b5;--color-focus:var(--color-scout-blue);--font-size-small:.875rem;--font-size-body:1rem;--font-size-lead:1.0625rem;--font-size-heading-small:1.125rem;--font-size-heading:1.5rem;--font-size-title:2.75rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--radius-sm:.5rem;--radius-md:.875rem;--radius-lg:1.25rem;--radius-pill:999px;--shadow-soft:0 18px 48px #29252612;font-family:Space Grotesk,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}:root{--motion-fast:.16s;--motion-standard:.24s;--motion-reveal:.44s;--motion-ease:cubic-bezier(.2, .7, .2, 1)}html{background:var(--color-canvas)}body{color:var(--color-text);background:var(--color-canvas);font-size:var(--font-size-body);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}button,input{font:inherit}button{cursor:pointer}a{color:var(--color-info);text-underline-offset:.2em}button:focus-visible,a:focus-visible,summary:focus{outline:3px solid var(--color-focus);outline-offset:4px}.page-shell{width:min(960px,100% - 48px);margin-inline:auto}.skip-link{z-index:1;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--color-surface);position:fixed;top:8px;left:8px;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.site-header{justify-content:space-between;align-items:center;gap:var(--space-4);padding-block:var(--space-6);border-bottom:1px solid var(--color-border);flex-wrap:wrap;display:flex}.brand{align-items:center;gap:var(--space-4);min-width:0;display:flex}.brand-link{flex-shrink:0;align-items:center;min-height:44px;display:inline-flex}.brand-link img{width:162px;height:auto;display:block}.product-name{padding-left:var(--space-4);border-left:1px solid var(--color-border-strong);color:var(--color-text-muted)}.source-link{align-items:center;gap:var(--space-1);min-height:44px;font-size:var(--font-size-small);flex-shrink:0;font-weight:600;text-decoration:none;display:inline-flex}.source-link:hover{text-decoration:underline}.source-link svg{transition:transform var(--motion-fast) var(--motion-ease)}.intro{padding-block:var(--space-8) var(--space-6)}.intro h1{letter-spacing:-.03em;margin:0;font-size:2rem;line-height:1.2}.intro p{margin:var(--space-2) 0 0;color:var(--color-text-muted);font-size:var(--font-size-lead)}.workspace{margin-bottom:var(--space-12);padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.drop-zone{justify-content:center;align-items:center;gap:var(--space-4);width:100%;min-height:180px;padding:var(--space-6);border:1px dashed var(--color-info-border);border-radius:var(--radius-sm);color:var(--color-text);background:var(--color-info-background);text-align:left;transition:border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);display:flex}.drop-zone:hover,.drop-zone.is-dragging{border-color:var(--color-info-accent)}.drop-zone.is-dragging{outline:2px solid var(--color-info-accent);outline-offset:-2px}.drop-zone:disabled{cursor:wait}.drop-icon{border:1px solid var(--color-info-border);border-radius:var(--radius-sm);width:48px;height:48px;color:var(--color-info-accent);background:var(--color-surface);transition:transform var(--motion-standard) var(--motion-ease);flex:0 0 48px;place-items:center;display:grid}.drop-copy,.drop-title,.drop-subtitle{display:block}.drop-copy{max-width:400px}.drop-title{font-size:var(--font-size-heading-small);font-weight:600}.drop-subtitle{margin-top:var(--space-1);color:var(--color-info);font-size:var(--font-size-small)}.privacy-note{justify-content:center;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 0;color:var(--color-text-muted);font-size:var(--font-size-small);display:flex}.privacy-note svg{color:var(--color-success);flex-shrink:0}.error-message{margin:var(--space-4) 0 0;padding:var(--space-3) var(--space-4);border:1px solid var(--color-error-border);border-radius:var(--radius-sm);color:var(--color-error);background:var(--color-error-background);overflow-wrap:anywhere}.result-panel{margin-top:var(--space-8)}.result-header h2{font-size:var(--font-size-heading);letter-spacing:-.02em;margin:0;line-height:1.3}.preview-layout{gap:var(--space-6);margin-top:var(--space-4);grid-template-columns:224px minmax(0,1fr);display:grid}.source-preview,.generated-previews{min-width:0}.preview-label{margin-bottom:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-small);font-weight:500}.source-frame,.output-surface{border:1px solid var(--color-border);border-radius:var(--radius-sm)}.source-frame{aspect-ratio:1;place-items:center;width:100%;display:grid}.source-frame img{object-fit:contain;width:100%;height:100%;display:block}.checkerboard{background-color:var(--color-surface);background-image:linear-gradient(45deg, var(--color-surface-muted) 25%, transparent 25%), linear-gradient(-45deg, var(--color-surface-muted) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-surface-muted) 75%), linear-gradient(-45deg, transparent 75%, var(--color-surface-muted) 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px}.file-meta{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-small);overflow-wrap:anywhere}.output-surface{padding:var(--space-3)}.preview-grid{--preview-columns:3;gap:var(--space-3);font-size:var(--font-size-small);grid-template-columns:repeat(auto-fit, minmax(min(100%, max(80px, 8ch, calc((100% - (var(--preview-columns) - 1) * var(--space-3)) / var(--preview-columns)))), 1fr));display:grid}.preview-card{align-items:center;gap:var(--space-2);min-width:0;padding-block:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-small);flex-direction:column;display:flex}.icon-frame{width:80px;height:80px;transition:transform var(--motion-standard) var(--motion-ease);place-items:center;display:grid}.icon-frame img{object-fit:contain;width:80px;height:80px;display:block}.source-frame img.pixelated,.preview-grid.pixel-mode .icon-frame img{image-rendering:pixelated}.download-button{justify-content:center;align-items:center;gap:var(--space-3);width:100%;min-height:48px;margin-top:var(--space-6);padding:var(--space-3) var(--space-4);border:1px solid var(--color-info-accent);border-radius:var(--radius-sm);color:var(--color-white);background:var(--color-info-accent);transition:background var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);font-weight:600;display:inline-flex}.download-button:hover{background:var(--color-scout-blue-strong)}.download-button:disabled{cursor:wait}.download-icon{transition:transform var(--motion-fast) var(--motion-ease);flex-shrink:0}.package-note{margin:var(--space-3) 0 0;color:var(--color-text-muted);font-size:var(--font-size-small);text-align:center}.help{max-width:72ch;margin:0 auto var(--space-12);border-top:1px solid var(--color-border);overflow-wrap:anywhere}.help section{padding-top:var(--space-6)}.help h2{margin:0 0 var(--space-4);font-size:var(--font-size-heading-small);line-height:1.3}.help p{margin:0 0 var(--space-4)}.setup-steps{margin:0 0 var(--space-4);padding-inline-start:var(--space-6)}.setup-steps li+li{margin-top:var(--space-3)}.help code{font-family:inherit;font-size:inherit;font-weight:500}.help details{border-bottom:1px solid var(--color-border)}.help details>p:first-of-type{margin-top:var(--space-2)}.help summary{min-height:44px;padding-block:var(--space-4);cursor:pointer;font-weight:500}.help summary::marker{color:var(--color-info-accent)}.help-reference{font-size:var(--font-size-small)}.spinner{border:2px solid var(--color-info-border);border-top-color:var(--color-white);border-radius:50%;flex-shrink:0;width:20px;height:20px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes reveal{0%{opacity:0;transform:translateY(var(--reveal-distance,4px))}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:no-preference){.site-header{animation:fade-in .28s var(--motion-ease) backwards}.intro{animation:reveal .36s var(--motion-ease) 40ms backwards}.workspace{--reveal-distance:6px;animation:reveal var(--motion-reveal) var(--motion-ease) 80ms backwards}.result-panel{--reveal-distance:4px;animation:reveal .3s var(--motion-ease) backwards}.source-frame{animation:fade-in var(--motion-standard) var(--motion-ease) backwards}.preview-card{--reveal-distance:2px;animation:reveal var(--motion-standard) var(--motion-ease) backwards}.preview-card:nth-child(2){animation-delay:20ms}.preview-card:nth-child(3){animation-delay:40ms}.preview-card:nth-child(4){animation-delay:60ms}.preview-card:nth-child(5){animation-delay:80ms}.preview-card:nth-child(6){animation-delay:.1s}.error-message,.download-button:not(.is-loading) .download-icon{animation:fade-in var(--motion-fast) ease-out backwards}.drop-zone:focus-visible:not(:disabled) .drop-icon,.drop-zone.is-dragging:not(:disabled) .drop-icon{transform:translateY(-2px)}.drop-zone:active:not(:disabled) .drop-icon{transform:translateY(0)}.download-button:active:not(:disabled){transform:translateY(1px)}@media (hover:hover) and (pointer:fine){.source-link:hover svg{transform:translate(2px,-2px)}.drop-zone:hover:not(:disabled) .drop-icon{transform:translateY(-2px)}.drop-zone:active:not(:disabled) .drop-icon{transform:translateY(0)}.preview-card:hover .icon-frame{transform:translateY(-2px)}.download-button:hover:not(:disabled){transform:translateY(-1px)}.download-button:hover:not(:disabled) .download-icon,.download-button:active:not(:disabled){transform:translateY(1px)}}}@media (width<=720px){.preview-layout{grid-template-columns:1fr}.source-frame{max-width:224px}}@media (width<=520px){.page-shell{width:calc(100% - 32px)}.site-header{padding-block:var(--space-4)}.brand{align-items:flex-start;gap:var(--space-1);flex-direction:column}.brand-link img{width:140px}.product-name{font-size:var(--font-size-small);border:0;padding:0}.intro{padding-top:var(--space-6)}.intro h1{font-size:1.75rem}.workspace{padding:var(--space-4)}.drop-zone{padding:var(--space-4);text-align:center;flex-direction:column}.drop-icon{flex-basis:48px}.drop-title{font-size:var(--font-size-body)}.privacy-note{align-items:flex-start}.privacy-note svg{margin-top:1px}.preview-grid{--preview-columns:2}.file-meta{max-width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}