/* Snap: a little disorder, then everything on the grid. */
@font-face{font-family:Silkscreen;src:url('./vendor/silkscreen/silkscreen-latin.woff2') format('woff2');font-weight:400;font-display:swap}
h2,.eyebrow,.private,.version small,.version::after,.voxel figcaption{font-family:Silkscreen,monospace;font-weight:400;letter-spacing:0}
.intro{gap:24px;margin-bottom:32px;min-height:176px}.intro>div{flex-shrink:0}.lede{margin:0;font-size:13px}.voxel{position:relative;width:320px;height:176px;flex:0 1 320px;margin:0}.voxel canvas,.voxel-still{position:absolute;inset:0;width:100%;height:160px;object-fit:contain}.voxel canvas{opacity:0}.voxel.is-live canvas{opacity:1}.voxel.is-live .voxel-still{opacity:0}.voxel figcaption{position:absolute;bottom:0;width:100%;text-align:center;font-size:9px;color:var(--muted)}
.workbench{border-top-color:var(--green)}.upload,.settings{padding:24px}.panel-top{padding:16px 24px}.view-tools{padding:8px 24px}.versions-heading{padding:16px 24px}.versions{gap:8px;padding-inline:24px;padding-top:8px;padding-bottom:24px;perspective:700px}.version{transition:transform .16s steps(3),border-color .16s;transform-origin:50% 80%}.version[aria-pressed=true]{animation:tile-snap .24s steps(3)}@media(hover:hover){.version:hover:not(:disabled){transform:rotateX(5deg) rotateY(-4deg) translateY(-3px)}}@keyframes tile-snap{0%{transform:translateY(-5px) scale(.96)}100%{transform:none}}
:focus-visible{outline:1px solid var(--green);outline-offset:5px;box-shadow:0 0 0 2px var(--black),0 0 0 3px var(--green)}
.dropzone{border:0;outline:1px dashed #676e5f;outline-offset:-1px}.dropzone::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--green) 0 4px,transparent 4px 8px) top left/16px 1px repeat-x,repeating-linear-gradient(90deg,var(--green) 0 4px,transparent 4px 8px) bottom left/16px 1px repeat-x,repeating-linear-gradient(0deg,var(--green) 0 4px,transparent 4px 8px) top left/1px 16px repeat-y,repeating-linear-gradient(0deg,var(--green) 0 4px,transparent 4px 8px) top right/1px 16px repeat-y;opacity:0}.dropzone.drag::after{opacity:1;animation:march .5s steps(4) infinite}@keyframes march{to{background-position:8px 0,-8px 100%,0 -8px,100% 8px}}
.working span{width:8px;height:8px;box-shadow:-12px -12px var(--cream),12px 12px var(--green),12px -12px #34392e,-12px 12px #34392e;animation:assemble .8s steps(4) infinite;margin:16px}@keyframes assemble{0%{box-shadow:-24px -20px var(--cream),20px 24px var(--green),24px -24px #34392e,-20px 24px #34392e;opacity:.4}70%,100%{box-shadow:-10px -10px var(--cream),10px 10px var(--green),10px -10px #34392e,-10px 10px #34392e;opacity:1}}
input[type=range]{appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:4px;background:#444a3c}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:24px;margin-top:-10px;border:4px solid var(--green);background:var(--black);box-shadow:-3px 0 var(--green),3px 0 var(--green)}input[type=range]::-moz-range-thumb{width:12px;height:20px;border:4px solid var(--green);border-radius:0;background:var(--black)}input[type=range]::-moz-range-track{height:4px;background:#444a3c}
#pixel-burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
@media(max-width:1100px) and (min-width:701px){.voxel{width:220px;flex-basis:220px}.lede{max-width:200px}}
@media(max-width:700px){.intro{position:relative;min-height:0;display:block}.intro>div{position:relative;z-index:1}h1{font-size:44px}.voxel{position:absolute;right:-4px;top:20px;width:112px;height:88px;opacity:.8}.voxel canvas,.voxel-still{height:72px}.voxel figcaption{font-size:6px}.lede{max-width:100%;margin-top:16px}.eyebrow{font-size:9px}.upload,.settings{padding:16px}.panel-top,.view-tools{padding-inline:16px}.versions-heading{padding:16px}.versions{padding-inline:16px}.version small{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.version:hover:not(:disabled){transform:none}.voxel canvas{display:none}.voxel .voxel-still{opacity:1}}

.voxel[data-state=snapping] canvas{animation:resolve 1.5s steps(8)}@keyframes resolve{0%{filter:blur(3px);opacity:.45}65%{filter:blur(0);opacity:1}}
/* Silkscreen is drawn on an 8px grid: only use whole multiples so letters stay crisp (10px turned C into O). */
h2,.eyebrow{font-size:16px;line-height:1.25;letter-spacing:0}.private,.voxel figcaption{font-size:8px;line-height:1.5}h2,.eyebrow,.private,.voxel figcaption{-webkit-font-smoothing:none;-moz-osx-font-smoothing:auto;font-smooth:never}.version small{font-family:inherit;font-size:11px;letter-spacing:0}
.versions-heading h2{font-size:16px}
/* Snap shadow: a stepped ground glow under the voxel mark. */
.voxel::before{content:'';position:absolute;left:50%;top:140px;width:176px;height:8px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(#84f8002e,#84f8002e) center/96px 4px no-repeat,linear-gradient(#84f8001a,#84f8001a) center/144px 8px no-repeat,linear-gradient(#84f8000d,#84f8000d) center/176px 4px no-repeat}
@media(max-width:700px){.voxel::before{top:62px;width:80px;height:4px;background-size:48px 2px,64px 4px,80px 2px}}
/* 8-bit buttons: notched corners, hard 2px lip, instant hover, press drops onto the lip. */
.primary,.paste-button,.export-secondary button{transition:none;box-shadow:0 2px 0 var(--lip)}
.primary{--lip:#3f7600;clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,calc(100% - 4px) 100%,calc(100% - 4px) calc(100% + 2px),4px calc(100% + 2px),4px 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px))}
.paste-button,.export-secondary button{--lip:#22261d;--edge:var(--line);border-color:var(--edge);background-image:linear-gradient(var(--edge),var(--edge)),linear-gradient(var(--edge),var(--edge)),linear-gradient(var(--edge),var(--edge)),linear-gradient(var(--edge),var(--edge));background-size:1px 1px;background-repeat:no-repeat;background-position:0 0,100% 0,0 100%,100% 100%;clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% 100%,calc(100% - 2px) 100%,calc(100% - 2px) calc(100% + 2px),2px calc(100% + 2px),2px 100%,0 100%)}
.paste-button:hover:not(:disabled),.export-secondary button:hover:not(:disabled){--edge:var(--green);--lip:#2c5200}
.primary:active:not(:disabled),.paste-button:active:not(:disabled),.export-secondary button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.primary:focus-visible{outline:2px solid var(--black);outline-offset:-6px;box-shadow:0 2px 0 var(--lip)}.paste-button:focus-visible,.export-secondary button:focus-visible{outline:2px solid var(--green);outline-offset:-5px;box-shadow:0 2px 0 var(--lip)}
/* Selected version: green outline draws on clockwise in steps, then a one-shot pixel sparkle. */
.version[aria-pressed=true]{border-color:transparent;box-shadow:none;background-image:linear-gradient(var(--green),var(--green)),linear-gradient(var(--green),var(--green)),linear-gradient(var(--green),var(--green)),linear-gradient(var(--green),var(--green));background-origin:border-box;background-repeat:no-repeat;background-position:0 0,100% 0,100% 100%,0 100%;background-size:100% 2px,2px 100%,100% 2px,2px 100%;animation:tile-snap .24s steps(3),tile-draw .3s steps(6)}
@keyframes tile-draw{0%{background-size:0 2px,2px 0,0 2px,2px 0}100%{background-size:100% 2px,2px 100%,100% 2px,2px 100%}}
.version::before{content:'';position:absolute;left:0;top:0;width:2px;height:2px;pointer-events:none;opacity:0;background:var(--cream)}
.version[aria-pressed=true]::before{animation:sparkle .48s steps(1) .12s}
@keyframes sparkle{0%{opacity:1;box-shadow:0 0 var(--green)}25%{opacity:1;box-shadow:0 -2px var(--green),2px 0 var(--green),0 2px var(--green),-2px 0 var(--green)}50%{opacity:1;box-shadow:0 -4px var(--green),4px 0 var(--green),0 4px var(--green),-4px 0 var(--green),0 -6px var(--cream),6px 0 var(--cream)}75%{opacity:1;box-shadow:-4px -4px var(--green),4px -4px var(--green),4px 4px var(--green),-4px 4px var(--green)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.primary:active:not(:disabled),.paste-button:active:not(:disabled),.export-secondary button:active:not(:disabled){transform:none}.version::before{display:none}}