.banner-page.page-width{width:min(100% - 48px,1500px)}.banner-heading-actions{flex-wrap:wrap;gap:8px;display:flex}.banner-heading-actions .button{align-items:center;gap:6px;display:inline-flex}.banner-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,1fr);align-items:start;gap:12px;display:grid}.banner-layout>*{min-width:0}.banner-builder,.banner-stage,.banner-output{align-content:start;gap:16px;padding:17px;display:grid}.banner-swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;max-width:400px;display:grid}.banner-swatch{aspect-ratio:1;border:1px solid var(--border);background:var(--surface-raised);box-shadow:var(--rd-bevel);cursor:pointer;place-items:stretch stretch;padding:4px;display:grid}.banner-swatch span{display:block;box-shadow:inset 0 0 0 1px #00000040}.banner-swatch:hover{border-color:var(--border-strong)}.banner-swatch[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}.banner-swatch:focus-visible,.banner-pattern:focus-visible,.banner-layer button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.banner-brush{gap:7px;display:grid}.banner-brush>span{color:var(--text-secondary);font-size:12px;font-weight:600}.banner-swatches--brush .banner-swatch{padding:3px}.banner-patterns{grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;display:grid}.banner-pattern{aspect-ratio:1/2;border:1px solid var(--border-subtle);background:var(--surface-raised);cursor:pointer;padding:3px;transition:border-color .12s,transform .12s;display:block;position:relative}.banner-pattern canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.banner-pattern:hover:not(:disabled){border-color:var(--accent-border-soft);transform:translateY(-1px)}.banner-pattern:disabled{opacity:.45;cursor:not-allowed}.banner-pattern__item{border:1px solid var(--border);background:var(--surface);width:16px;height:16px;image-rendering:pixelated;position:absolute;bottom:-3px;right:-3px}.banner-view{grid-template-columns:repeat(2,minmax(0,1fr))}.banner-stage__frame{border:1px solid var(--border-subtle);background:radial-gradient(ellipse at 50% 20%, #ffffff0f, transparent 60%), var(--bg-deep);place-items:center;min-height:380px;padding:24px;display:grid}:root[data-theme=light] .banner-stage__frame{background:radial-gradient(ellipse at 50% 20%, #ffffffb3, transparent 60%), var(--bg-deep)}.banner-figure{--px:7px;filter:drop-shadow(0 12px 18px #00000059);position:relative}.banner-figure canvas{image-rendering:pixelated;display:block}.banner-figure--stand{width:calc(var(--px) * 20);height:calc(var(--px) * 48)}.banner-figure__stand{width:100%;height:100%}.banner-figure__cloth{top:calc(var(--px) * 2);width:100%;height:calc(var(--px) * 40);transform-origin:50% 0;position:absolute;left:0}.banner-figure--shield{--px:14px}.banner-figure__shield{width:calc(var(--px) * 12);height:calc(var(--px) * 22)}@media (prefers-reduced-motion:no-preference){.banner-figure__cloth{animation:5s ease-in-out infinite banner-sway}.banner-pattern{animation:banner-tile-in .3s var(--ease-spring,ease-out) both;animation-delay:calc(var(--i,0) * 9ms)}.banner-layer{animation:banner-layer-in .28s var(--ease-spring,ease-out) both}.banner-layer.is-base{animation:none}}@keyframes banner-sway{0%,to{transform:perspective(600px)rotateX(-3deg)}50%{transform:perspective(600px)rotateX(-17deg)}}@keyframes banner-tile-in{0%{opacity:0;scale:.8}}@keyframes banner-layer-in{0%{opacity:0;translate:0 -8px}}.banner-stage__error{color:var(--danger);align-items:center;gap:8px;display:flex}.banner-layers{gap:5px;margin:0;padding:0;list-style:none;display:grid}.banner-layer{border:1px solid var(--border-subtle);background:var(--surface-raised);grid-template-columns:22px 24px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:38px;padding:4px 6px 4px 9px;display:grid}.banner-layer.is-base{background:0 0;border-style:dashed}.banner-layer.is-command-only{border-color:var(--warning-border)}.banner-layer__index{color:var(--text-muted);font-family:var(--font-pixel);text-align:center;font-size:10px}.banner-layer__swatch{border:1px solid var(--border-strong);width:22px;height:22px;padding:0}button.banner-layer__swatch{cursor:pointer}.banner-layer__name{min-width:0;color:var(--text);overflow-wrap:anywhere;align-items:center;gap:6px;font-size:13px;display:flex}.banner-layer__name img{image-rendering:pixelated;flex:none}.banner-layer__actions{gap:2px;display:flex}.banner-layer__actions button{width:28px;height:28px;color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;place-items:center;display:grid}.banner-layer__actions button:hover:not(:disabled){border-color:var(--border);color:var(--text)}.banner-layer__actions button:disabled{opacity:.3;cursor:default}.banner-note--warning{border-color:var(--warning-border);color:var(--warning-text);background:var(--warning-panel)}.banner-command{border:1px solid var(--border-subtle);background:var(--surface-raised);gap:6px;padding:9px 10px;display:grid}.banner-command>div{justify-content:space-between;align-items:center;gap:8px;font-size:12px;display:flex}.banner-command>div span{color:var(--text-secondary);font-weight:600}.banner-command .link-button{color:var(--accent-text);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:5px;padding:4px 6px;font-size:12px;font-weight:600;display:inline-flex}.banner-command .link-button:hover{border-color:var(--border)}.banner-command code{max-height:180px;color:var(--text);word-break:break-all;font-size:12px;line-height:1.5;display:block;overflow:auto}.banner-output>.button{justify-content:center;align-items:center;gap:7px;display:inline-flex}.banner-output__title{color:var(--text);margin:4px 0 0;font-size:15px}.banner-steps{counter-reset:loom;gap:6px;margin:0;padding:0;list-style:none;display:grid}.banner-steps li{color:var(--text-secondary);counter-increment:loom;grid-template-columns:22px 38px minmax(0,1fr);align-items:center;gap:8px;font-size:13px;line-height:1.4;display:grid}.banner-steps li:before{color:var(--text-muted);content:counter(loom);font-family:var(--font-pixel);text-align:center;font-size:10px}.banner-steps li.is-command-only{color:var(--warning-text)}.banner-steps__icons{gap:3px;display:flex}.banner-steps__icons img,.banner-shopping img,.banner-icon{image-rendering:pixelated;flex:none}.banner-shopping ul{gap:8px;margin:10px 0 0;padding:0;list-style:none;display:grid}.banner-shopping li{grid-template-columns:18px minmax(0,1fr);align-items:start;gap:9px;display:grid}.banner-shopping li span{gap:2px;display:grid}.banner-shopping strong{color:var(--text);font-size:13px}.banner-shopping small{color:var(--text-muted);font-size:12px}@media (width<=1280px){.banner-layout{grid-template-columns:repeat(2,minmax(0,1fr))}.banner-output{grid-column:1/-1}}@media (width<=820px){.banner-page.page-width{width:calc(100% - 28px)}.banner-layout{grid-template-columns:minmax(0,1fr)}.banner-output{grid-column:auto}.banner-stage__frame{min-height:300px}.banner-figure--stand{--px:5.5px}.banner-figure--shield{--px:11px}}@media (width<=420px){.banner-swatches{gap:4px}.banner-swatch{padding:3px}}@media (prefers-reduced-motion:reduce){.banner-pattern{transition:none}.banner-pattern:hover:not(:disabled){transform:none}}