.home-pixel-editor{--home-pixel-ink:var(--disc-ink,#46384f);--home-pixel-paper:var(--disc-paper,#fff8e6);--home-pixel-edge:var(--disc-edge,#9a8b8d);--home-pixel-soft:var(--disc-soft,#eee5d3);--home-pixel-accent:var(--disc-accent,#715678);--home-pixel-muted:var(--disc-muted,#756975);box-sizing:border-box;min-width:0;max-width:100%;color:var(--home-pixel-ink);font:inherit;line-height:1.6}
.home-pixel-editor *{box-sizing:border-box}
.home-pixel-heading,.home-pixel-color-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:3px 12px;margin:0 0 8px}
.home-pixel-heading strong{font-size:14px}.home-pixel-heading>span,.home-pixel-color-heading>span{font-size:11px;color:var(--home-pixel-muted)}
.home-pixel-color-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 9px}.home-pixel-editor .home-pixel-transparent .home-pixel-swatch{width:24px;height:24px;flex:0 0 24px}.home-pixel-custom-color{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700}.home-pixel-editor input[type=color]{display:block;width:56px!important;max-width:56px;min-width:56px;height:44px;min-height:44px;padding:3px!important;border:2px solid var(--home-pixel-edge);border-radius:0;background:var(--home-pixel-paper);cursor:pointer}.home-pixel-editor input[type=color]::-webkit-color-swatch-wrapper{padding:0}.home-pixel-editor input[type=color]::-webkit-color-swatch{border:1px solid var(--home-pixel-ink);border-radius:0}.home-pixel-palette-count{margin-left:auto;font-size:10px;color:var(--home-pixel-muted)}
.home-pixel-palette-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 5px;max-width:644px}.home-pixel-editor .home-pixel-palette-tabs button{min-height:40px;padding:7px 10px;border:2px solid var(--home-pixel-edge);border-radius:0;color:var(--home-pixel-ink);background:var(--home-pixel-paper);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}.home-pixel-editor .home-pixel-palette-tabs button[aria-selected=true]{color:var(--home-pixel-paper);background:var(--home-pixel-ink);border-color:var(--home-pixel-ink)}
.home-pixel-palette-scroll{max-width:644px;max-height:190px;min-height:52px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:6px;margin:0 0 12px;border:2px solid var(--home-pixel-edge);background:var(--home-pixel-soft);scrollbar-width:auto;scrollbar-color:var(--home-pixel-accent) var(--home-pixel-soft)}
.home-pixel-tools{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.home-pixel-editor .home-pixel-button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 12px;border:2px solid var(--home-pixel-edge);border-radius:0;color:var(--home-pixel-ink);background:var(--home-pixel-paper);box-shadow:2px 2px 0 var(--home-pixel-edge);font:inherit;font-weight:700;line-height:1.4;cursor:pointer;touch-action:manipulation}
.home-pixel-editor .home-pixel-button[aria-pressed=true]{border-color:var(--home-pixel-ink);background:var(--home-pixel-ink);color:var(--home-pixel-paper);box-shadow:2px 2px 0 var(--home-pixel-accent)}
.home-pixel-editor .home-pixel-button:hover:not(:disabled):not([aria-pressed=true]){background:var(--home-pixel-soft)}
.home-pixel-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin:0 0 12px;max-width:640px}
.home-pixel-palette-scroll .home-pixel-palette{max-width:none;margin:0}
.home-pixel-editor .home-pixel-color{position:relative;display:grid;place-items:center;width:100%;height:42px;min-width:40px;min-height:42px;padding:4px;border:2px solid var(--home-pixel-edge);border-radius:0;background:var(--home-pixel-paper);box-shadow:1px 1px 0 var(--home-pixel-edge);cursor:pointer;touch-action:manipulation}
.home-pixel-swatch{display:block;width:100%;height:100%;border:1px solid #46384f66;pointer-events:none}.home-pixel-swatch.is-transparent{background-color:#f6efdf;background-image:linear-gradient(45deg,#cfc5b9 25%,transparent 25%),linear-gradient(-45deg,#cfc5b9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfc5b9 75%),linear-gradient(-45deg,transparent 75%,#cfc5b9 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
.home-pixel-color-mark{position:absolute;right:2px;bottom:2px;display:none;width:14px;height:14px;border:2px solid #fff9e4;background:#46384f;box-shadow:0 0 0 1px #46384f;pointer-events:none}.home-pixel-color-mark:after{content:'';position:absolute;left:2px;top:2px;width:5px;height:5px;background:#fff9e4}
.home-pixel-editor .home-pixel-color[aria-pressed=true]{border-color:var(--home-pixel-ink);box-shadow:0 0 0 2px var(--home-pixel-ink)}.home-pixel-color[aria-pressed=true] .home-pixel-color-mark{display:block}
.home-pixel-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0 0 10px}.home-pixel-grid-option{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:700}.home-pixel-grid-option input{width:20px!important;height:20px!important;min-height:20px!important;margin:0;padding:0!important;accent-color:var(--home-pixel-accent);cursor:pointer}
.home-pixel-help{font-size:11px;color:var(--home-pixel-muted);line-height:1.8;margin:0 0 10px}
.home-pixel-viewport{display:block;width:100%;max-width:644px;min-width:0;height:360px;min-height:240px;max-height:55vh;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;border:2px solid var(--home-pixel-ink);border-radius:0;background:var(--home-pixel-soft);scrollbar-width:auto;scrollbar-color:var(--home-pixel-accent) var(--home-pixel-soft);isolation:isolate}
@supports selector(::-webkit-scrollbar){.home-pixel-viewport,.home-pixel-palette-scroll{scrollbar-color:auto;scrollbar-width:auto}.home-pixel-viewport::-webkit-scrollbar,.home-pixel-palette-scroll::-webkit-scrollbar{width:12px;height:12px}.home-pixel-viewport::-webkit-scrollbar-track,.home-pixel-palette-scroll::-webkit-scrollbar-track{background:var(--home-pixel-soft);border:1px solid var(--home-pixel-edge)}.home-pixel-viewport::-webkit-scrollbar-thumb,.home-pixel-palette-scroll::-webkit-scrollbar-thumb{background:var(--home-pixel-ink);border:3px solid var(--home-pixel-soft);border-radius:0}.home-pixel-viewport::-webkit-scrollbar-corner,.home-pixel-palette-scroll::-webkit-scrollbar-corner{background:var(--home-pixel-soft)}}
.home-pixel-editor .home-pixel-canvas{display:block!important;flex:none;max-width:none!important;min-width:640px!important;width:640px!important;height:576px!important;margin:0;padding:0;border:0;border-radius:0;image-rendering:pixelated;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.home-pixel-editor[data-tool=pan] .home-pixel-canvas{cursor:grab}.home-pixel-editor[data-tool=pan].is-panning .home-pixel-canvas{cursor:grabbing}.home-pixel-editor[data-tool=pick] .home-pixel-canvas{cursor:copy}.home-pixel-editor[data-disabled=true] .home-pixel-canvas{cursor:default;opacity:.7}
.home-pixel-caption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;max-width:644px;margin:6px 0 0;font-size:11px;color:var(--home-pixel-muted)}.home-pixel-door-note{font-weight:700;color:var(--home-pixel-ink)}
.home-pixel-status{min-height:42px;margin:10px 0 0;padding:8px 10px;border:2px solid var(--home-pixel-edge);border-radius:0;background:var(--home-pixel-soft);font-size:12px;line-height:1.65}
.home-pixel-editor :is(button,input,canvas):focus-visible{outline:3px solid var(--home-pixel-accent);outline-offset:3px}.home-pixel-editor .home-pixel-canvas:focus-visible{outline:3px solid #e4c47b;outline-offset:-3px}.home-pixel-editor :is(button,input):disabled{opacity:.5;cursor:default}
@media(max-width:520px){.home-pixel-tools{gap:6px}.home-pixel-editor .home-pixel-button{padding:8px 10px;flex:1 0 62px}.home-pixel-options .home-pixel-button,.home-pixel-color-controls .home-pixel-button{flex:0 0 auto}.home-pixel-palette{gap:6px}.home-pixel-palette-scroll{max-height:160px}.home-pixel-palette-count{flex:1 1 100%;margin-left:0}.home-pixel-heading{align-items:flex-start}.home-pixel-heading>span{width:100%}.home-pixel-caption{font-size:10px}.home-pixel-viewport{height:340px;max-height:52vh}.home-pixel-help{font-size:11px}}
@media(prefers-reduced-motion:reduce){.home-pixel-editor *{scroll-behavior:auto}}