.editor-hero{text-align:center;max-width:820px;margin:8px auto 34px}.editor-kicker{color:var(--pb-primary);letter-spacing:.08em;margin:0 0 8px;font-family:Silkscreen,monospace;font-size:10px}.editor-hero h1{letter-spacing:-.06em;margin:0;font-family:Silkscreen,monospace;font-size:clamp(30px,6vw,52px)}.editor-hero>p:not(.editor-kicker){max-width:720px;color:var(--pb-muted);margin:14px auto 20px;line-height:1.7}.pixel-editor-app{gap:10px;display:grid}.editor-status,.editor-error{border:2px solid var(--pb-border);background:var(--pb-card);color:var(--pb-muted);padding:9px 12px;font-size:12px}.editor-status:empty{display:none}.editor-error{border-color:var(--pb-primary);color:var(--pb-primary-dark)}.editor-command-bar,.editor-view-bar{border:2px solid var(--pb-border);background:#ffffffe0;justify-content:space-between;align-items:center;gap:8px;padding:10px;display:flex;box-shadow:2px 2px #3e302da6}.editor-tools,.editor-history,.editor-view-bar{flex-wrap:wrap}.editor-tools,.editor-history{gap:6px;display:flex}.editor-tool,.editor-history button,.editor-view-bar>button,.editor-view-bar label span,.editor-project-actions button,.editor-export-actions button{border:2px solid var(--pb-border);background:var(--pb-bg);min-height:34px;color:var(--pb-muted);cursor:pointer;padding:6px 10px;font-family:Silkscreen,monospace;font-size:9px}.editor-tool span{margin-right:5px;font-family:DM Mono,monospace;font-size:14px}.editor-tool.is-active,.editor-view-bar input:checked+span{border-color:var(--pb-primary);color:var(--pb-ink);background:#e658781a;box-shadow:2px 2px #3e302db8}.editor-history button{width:36px;color:var(--pb-ink);padding:0;font-size:18px}.editor-history button:disabled,.editor-view-bar label.is-disabled{cursor:not-allowed;opacity:.4}.editor-view-bar{justify-content:flex-start}.editor-view-bar label{cursor:pointer;display:inline-flex}.editor-view-bar label input{opacity:0;pointer-events:none;position:absolute}.editor-view-bar>button{color:var(--pb-ink);margin-left:auto}.editor-layout{grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:18px;display:grid}.editor-stage-card,.editor-panel{border:2px solid var(--pb-border);background:var(--pb-card);box-shadow:var(--pb-shadow)}.editor-stage-card{min-width:0;padding:14px}.editor-stage-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;display:flex}.editor-stage-head>div{gap:3px;display:grid}.editor-stage-head strong,.editor-panel-heading strong,.editor-project-panel>strong,.editor-export-panel>strong{font-family:Silkscreen,monospace;font-size:11px}.editor-stage-head span,.editor-panel-heading span{color:var(--pb-muted);font-family:DM Mono,monospace;font-size:9px}.editor-stage-head label{color:var(--pb-muted);grid-template-columns:auto 130px;align-items:center;gap:8px;font-size:10px;display:grid}.editor-canvas-scroller{border:2px solid var(--pb-border);background-color:#f8f4ed;background-image:linear-gradient(45deg,#e9e1d6 25%,#0000 25%),linear-gradient(-45deg,#e9e1d6 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e9e1d6 75%),linear-gradient(-45deg,#0000 75%,#e9e1d6 75%),none;background-position:0 0,0 8px,8px -8px,-8px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;justify-content:flex-start;align-items:flex-start;min-height:600px;max-height:720px;padding:20px;display:flex;overflow:auto}#editor-canvas{max-width:none;image-rendering:pixelated;touch-action:none;margin:auto;display:block;box-shadow:4px 4px #3e302db3}#editor-canvas[data-tool=pencil],#editor-canvas[data-tool=fill]{cursor:crosshair}#editor-canvas[data-tool=eraser]{cursor:cell}#editor-canvas[data-tool=picker]{cursor:copy}.editor-cell-readout{min-height:18px;color:var(--pb-muted);margin:10px 0 0;font-family:DM Mono,monospace;font-size:10px}.editor-sidebar{gap:14px;display:grid}.editor-panel{padding:14px}.editor-panel-heading{justify-content:space-between;gap:10px;margin-bottom:10px;display:flex}.editor-palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;display:grid}.editor-swatch{aspect-ratio:1;border:2px solid var(--pb-border);background:var(--swatch);cursor:pointer;min-width:0;padding:0;position:relative}.editor-swatch:after{content:attr(data-symbol);color:var(--symbol-color);place-items:center;font-family:DM Mono,monospace;font-size:12px;font-weight:800;display:grid;position:absolute;inset:0}.editor-swatch.is-active{border-color:var(--pb-primary);box-shadow:2px 2px 0 var(--pb-ink)}.editor-materials{border-top:1px solid var(--pb-soft);max-height:260px;overflow:auto}.editor-material-row{border-bottom:1px solid var(--pb-soft);grid-template-columns:18px 16px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:34px;font-family:DM Mono,monospace;font-size:9px;display:grid}.editor-material-row i{border:1px solid #3e302d4d;width:15px;height:15px}.editor-material-row b{font-size:12px;font-style:normal}.editor-material-row span:last-child{color:var(--pb-muted)}.editor-project-panel p{color:var(--pb-muted);margin:8px 0 10px;font-size:10px;line-height:1.5}.editor-project-actions,.editor-export-actions{gap:6px;display:grid}.editor-project-actions{grid-template-columns:1fr 1fr}.editor-project-actions button:last-child{grid-column:1/-1}.editor-export-actions button,.editor-project-actions button{color:var(--pb-ink)}.editor-export-actions .editor-primary{border-color:var(--pb-primary-dark);background:var(--pb-primary);color:#fff;box-shadow:2px 2px 0 var(--pb-primary-dark)}.editor-notes{grid-template-columns:repeat(3,1fr);gap:16px;margin:72px 0 20px;display:grid}.editor-notes article{border:2px solid var(--pb-border);background:#ffffffb8;padding:18px}.editor-notes strong{font-family:Silkscreen,monospace;font-size:11px}.editor-notes p{color:var(--pb-muted);margin:8px 0 0;font-size:11px;line-height:1.6}@media (width<=800px){.editor-layout{grid-template-columns:1fr}.editor-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-canvas-scroller{min-height:440px}}@media (width<=520px){.editor-hero{margin-bottom:24px}.editor-command-bar,.editor-stage-head{flex-direction:column;align-items:stretch}.editor-history{align-self:flex-end}.editor-view-bar>button{margin-left:0}.editor-layout,.editor-sidebar,.editor-notes{grid-template-columns:1fr}.editor-canvas-scroller{min-height:340px;max-height:520px;padding:14px}.editor-stage-head label{grid-template-columns:auto minmax(0,1fr)}}
