:root{--color-pixel-1:#feffff;--color-pixel-2:#a0a0a0;--color-pixel-3:#525252;--color-pixel-4:#bed6fd;--color-pixel-5:#699efc;--color-pixel-6:#1e4a9d;--color-pixel-7:#011a51;--color-pixel-8:#ccf;--color-pixel-9:#8987ff;--color-pixel-10:#3837bc;--color-pixel-11:#0f0f65;--color-pixel-12:#ddc4ff;--color-pixel-13:#ae76ff;--color-pixel-14:#5828b8;--color-pixel-15:#230663;--color-pixel-16:#eac0f9;--color-pixel-17:#ce6df1;--color-pixel-18:#752194;--color-pixel-19:#36034b;--color-pixel-20:#f2c1df;--color-pixel-21:#e070b2;--color-pixel-22:#84235c;--color-pixel-23:#400426;--color-pixel-24:#f1c7c2;--color-pixel-25:#de7c70;--color-pixel-26:#822e24;--color-pixel-27:#3f0904;--color-pixel-28:#e8d0aa;--color-pixel-29:#c8913e;--color-pixel-30:#6f3f00;--color-pixel-31:#321300;--color-pixel-32:#d9da9d;--color-pixel-33:#a6a725;--color-pixel-34:#515200;--color-pixel-35:#1f2000;--color-pixel-36:#c9e29e;--color-pixel-37:#81ba28;--color-pixel-38:#316300;--color-pixel-39:#0b2a00;--color-pixel-40:#bce6ae;--color-pixel-41:#63c446;--color-pixel-42:#1a6b05;--color-pixel-43:#002f00;--color-pixel-44:#b4e5c7;--color-pixel-45:#54c17d;--color-pixel-46:#0e692e;--color-pixel-47:#002e0a;--color-pixel-48:#b5dfe4;--color-pixel-49:#56b3c0;--color-pixel-50:#105c68;--color-pixel-51:#00262d;--color-pixel-52:#a9a9a9;--color-pixel-53:#3c3c3c;--color-pixel-54:#000;--bg-primary:var(--color-pixel-28);--text-primary:var(--color-pixel-54);--text-secondary:var(--color-pixel-39);--text-accent:var(--color-pixel-41);--text-accent-secondary:var(--color-pixel-41);--link-color:var(--color-pixel-31);--link-hover:var(--color-pixel-30);--success-color:var(--color-pixel-42);--warning-color:var(--color-pixel-29);--error-color:var(--color-pixel-26);--font-size:16px;--font-size-small:calc(var(--font-size)*.8);--font-size-medium:calc(var(--font-size)*1.2);--font-size-l:calc(var(--font-size)*1.5);--font-size-xl:calc(var(--font-size)*2);--font-size-2xl:calc(var(--font-size)*3);--font-size-3xl:calc(var(--font-size)*4);--pixel-icon-size:32px;--gap-small:.5rem;--gap-medium:1rem;--gap-large:2rem;--padding-small:.5rem;--padding-medium:1rem;--padding-large:2rem;--margin-small:.5rem;--margin-medium:1rem;--margin-large:2rem}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}h1{color:var(--text-secondary);font-size:var(--font-size-2xl)}a{color:var(--link-color);text-decoration:none}a:hover{color:var(--link-hover)}img{width:100%;height:auto}.btn{background-color:var(--color-pixel-10);color:var(--color-pixel-1);text-decoration:none;border:1px solid var(--color-pixel-14);padding:.5rem 1rem}.app{display:grid;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "main" "footer";overflow:hidden;height:100dvh}.app-main{position:relative;height:100%}.app-main>*{position:absolute;inset:0}.app-header{grid-area:header}.app-main{grid-area:main}.app-footer{grid-area:footer;text-align:center;padding:1rem}.app-name{font-size:var(--font-size-l);text-align:center;color:var(--color-pixel-19);margin:0;font-weight:700}.app-name-accent{color:var(--color-pixel-18)}.crafter-page{display:grid;grid-template-rows:1fr 2fr auto;grid-template-areas:"canvas" "stepper" "controls";gap:1rem;height:100%}.crafter-canvas-container{grid-area:canvas;position:relative;width:100%;height:100%}.crafter-canvas{position:absolute;object-fit:cover;inset:0}.crafter-controls{grid-area:controls;display:flex;gap:var(--gap-large);justify-content:center;align-items: center}.crafter-stepper{grid-area:stepper;padding:var(--padding-medium)}.crafter-stepper-button{position:relative;text-decoration:none;cursor:pointer;width:var(--pixel-icon-size);height:var(--pixel-icon-size);object-fit:contain;border-bottom:3px solid #0000;transition:all .3s}.crafter-stepper-button[aria-current=true]{filter:grayscale(100%);opacity:.7;transform:translateY(-5px)}