/* Scoped banner studio. Shared site navigation, typography and colors stay intact. */
.banner-page{background:radial-gradient(ellipse at 12% 18%,#e3eadc88,transparent 50%),#f6f7ef}.banner-main{max-width:1400px;padding:28px 28px 48px}.banner-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:27px 0}.banner-intro h1{font:40px/1.15 var(--pixel-font);color:#2d4936;margin:0 0 10px}.banner-intro p{font:13px/1.6 system-ui;color:#6c7d61;margin:0}.banner-eyebrow{display:none}.banner-version{font:13px var(--pixel-font);border:1px solid #c6d2bd;background:#edf3e5;padding:8px 12px;white-space:nowrap;border-radius:4px;color:#637d52}
#bannerEditor{padding:0;background:none;border:0;box-shadow:none}.banner-workflow{display:flex;align-items:center;justify-content:center;gap:28px;margin:0 0 24px;padding:13px;background:#eaf0e2;border:1px solid #cfdbc3;border-radius:6px;font:12px/1.5 system-ui;color:#576e4b}.banner-workflow>span{display:flex;align-items:center;gap:9px}.banner-workflow b{font:16px var(--pixel-font);color:#65844e}.banner-workflow i{font-style:normal;color:#a1b591}
.banner-layout{display:grid;grid-template-columns:280px minmax(0,1fr) 260px;gap:16px;align-items:start}.banner-editor-panels{display:contents}.banner-preview-panel{grid-column:1;grid-row:1/span 2;position:sticky;top:18px;background:#fffff9;border:1px solid #c2cfb7;border-radius:7px;overflow:hidden;box-shadow:0 7px 23px #344f2b0b}.banner-preview-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px}.banner-page h2{font:22px/1.2 var(--pixel-font);color:#36523e;margin:0}.banner-history{display:flex;gap:4px}.banner-page button{font:14px/1.3 var(--pixel-font);border:1px solid #c5d2ba;border-radius:4px;background:#f2f6eb;color:#47613d;padding:9px 12px;transition:background .16s,box-shadow .16s,transform .16s}.banner-page button:hover:not(:disabled){background:#e2ecd7;border-color:#97af84}.banner-page button:disabled{opacity:.4;cursor:not-allowed}.banner-page button:focus-visible{outline:2px solid #365e43;outline-offset:3px}.banner-history button{font:20px/1 system-ui;padding:0;width:30px;height:30px}
.banner-stage{position:relative;display:grid;place-items:center;min-height:370px;padding:52px 20px 38px;background:radial-gradient(ellipse at 50% 24%,#61755d,#2c4236 85%);overflow:hidden}.banner-stage:before{content:'';position:absolute;inset:14px;border:1px solid #d7e5c51c;border-radius:4px;pointer-events:none}.banner-stage-label,.banner-stage-foot{position:absolute;left:0;right:0;top:22px;text-align:center;font:9px/1.5 system-ui;letter-spacing:.12em;color:#d0dfc3}.banner-stage-foot{top:auto;bottom:18px;letter-spacing:0}.banner-hanger{position:absolute;top:49px;width:146px;height:7px;background:linear-gradient(#ba9966,#8c6d45);box-shadow:0 2px 3px #15261d88;border-radius:2px}.banner-stage canvas{display:block;width:130px;height:260px;image-rendering:pixelated;filter:drop-shadow(10px 12px 6px #10261a50)}.banner-preview-actions{display:flex;gap:8px;padding:14px}.banner-preview-actions button{flex:1}.banner-page .banner-primary{background:#648552;color:#fffef1;border-color:#5c794d;box-shadow:inset 0 -2px #27432420}.banner-page .banner-primary:hover{background:#537547}.banner-files{padding:12px 15px;border-top:1px solid #e0e7d8;font:12px/1.5 system-ui;color:#637957}.banner-files summary{cursor:pointer}.banner-files>div{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.banner-local{font:10px/1.6 system-ui;color:#849078;text-align:center;margin:7px 12px}.banner-page .banner-reset{display:block;margin:0 auto 13px;border:0;background:none;font:11px system-ui;padding:5px}
.banner-panel{background:#fffff9;border:1px solid #c6d2bc;border-radius:7px;padding:18px;box-shadow:0 3px 12px #354e2705;min-width:0}.banner-editor-panels>.banner-panel:nth-child(1){grid-column:2;grid-row:1}.banner-editor-panels>.banner-panel:nth-child(2){grid-column:2;grid-row:2}.banner-editor-panels>.banner-panel:nth-child(3){grid-column:3;grid-row:1/span 2;position:sticky;top:18px;min-height:350px;background:#f0f4e9}.banner-section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}.banner-section-head>span{font:11px system-ui;color:#7c8e6c}.banner-page .banner-color-label{border:0;background:none!important;box-shadow:none;font:11px/1.5 system-ui;font-weight:600;padding:0 0 8px;color:#627653}.banner-swatches{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px;padding:2px}.banner-page .banner-swatch{position:relative;background:var(--dye);padding:0;aspect-ratio:1;min-height:24px;border:1px solid #0002;border-radius:3px;box-shadow:inset 0 1px #fff4}.banner-swatch[aria-pressed=true]{outline:2px solid #416442;outline-offset:2px}.banner-swatch[aria-pressed=true]:after{content:'';position:absolute;inset:5px;border:1px solid var(--check)}.banner-help{font:11px/1.65 system-ui;color:#79866e;margin:11px 0 0}.banner-ink-control{background:#f2f5eb;padding:12px;border-radius:5px;margin-bottom:14px}.banner-ink-head{display:flex;justify-content:space-between;gap:10px}.banner-ink-head>span{font:10px/1.5 system-ui;color:#7b8e6d}.banner-search{display:flex;align-items:center;gap:7px;background:#f5f7ef;border:1px solid #d1dac8;border-radius:4px;padding:0 9px;min-width:0;flex:0 1 175px}.banner-search .ui-icon{width:14px;height:14px;color:#8ca27a;flex:none}.banner-search input{font:11px system-ui;padding:8px 0;background:none;border:0;width:100%;min-width:0;color:#45603f}.banner-pattern-filters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}.banner-pattern-filters button{font-size:12px;padding:6px 9px;background:none;border-color:transparent}.banner-pattern-filters button[aria-pressed=true]{background:#e2ecd7;color:#395a36;border-color:#bacdab}.banner-pattern-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-height:370px;overflow:auto;padding:3px;scrollbar-width:thin;scrollbar-color:#b6c6aa transparent}.banner-page .banner-pattern{display:grid;place-items:center;gap:6px;position:relative;min-width:0;min-height:99px;padding:10px 4px 7px;background:#f5f6ef;border:1px solid #dbe2d3;border-radius:5px}.banner-page .banner-pattern:hover:not(:disabled){background:#e6eedc;box-shadow:0 3px 7px #38522b12;transform:translateY(-2px)}.banner-pattern canvas{width:24px;height:48px;image-rendering:pixelated;pointer-events:none}.banner-pattern-name{font:9px/1.3 system-ui;color:#6a785e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.banner-special-mark{position:absolute;right:3px;top:3px;font:7px system-ui;background:#ece2bd;color:#827343;border-radius:2px;padding:2px}.banner-layers{list-style:none;display:grid;gap:8px;margin:0;padding:2px;max-height:540px;overflow:auto;scrollbar-width:thin}.banner-layer{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:9px;background:#fffef7;border:1px solid #d3deca;border-radius:5px}.banner-layer.is-selected{border-color:#81a16b;box-shadow:inset 3px 0 #81a16b;background:#edf4e4}.banner-page .banner-layer-select{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 100%;text-align:left;border:0;background:none;padding:0}.banner-layer-select canvas{width:19px;height:38px;image-rendering:pixelated;flex:none}.banner-layer-select span{font:11px/1.5 system-ui;overflow-wrap:anywhere;color:#516449}.banner-layer-select small{display:block;font-size:9px;color:#90a17e}.banner-layer-actions{display:flex;gap:4px;margin-left:auto}.banner-layer-actions button{font:15px system-ui;width:28px;height:26px;padding:0;background:#f2f6eb}.banner-page #bannerAddMode{width:100%;margin-top:12px;font-size:12px;background:#e2ecd7;border-style:dashed}.banner-presets{margin:0 0 18px;padding:12px 16px;background:none;border:0;box-shadow:none}.banner-presets>.banner-section-head{margin-bottom:10px}.banner-presets h2{font-size:17px}.banner-presets>div:last-child{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.banner-page .banner-preset{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;font-size:13px;background:#edf2e5;border-color:#d0dcc3;border-radius:5px}.banner-preset canvas{width:16px;height:32px;image-rendering:pixelated;flex:none}
.banner-guide{margin-top:24px;padding:22px;background:#fdfef7}.banner-guide-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);gap:35px}.banner-guide ol{list-style:none;counter-reset:loom;margin:12px 0 0;padding:0}.banner-guide li{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #e2e9db;counter-increment:loom;color:#536a48;font:12px/1.6 system-ui}.banner-guide li:before{content:counter(loom,decimal-leading-zero);font:17px var(--pixel-font);color:#8da47b}.banner-step-preview{width:24px;height:48px;image-rendering:pixelated;flex:none}.banner-step-copy{min-width:0}.banner-step-copy b,.banner-step-copy small{display:block}.banner-step-copy small{font-size:10px;color:#839275}.banner-step-copy .banner-help{margin:3px 0}.banner-guide aside{padding:20px;border:1px solid #d6e0cb;border-radius:6px;background:#f0f4e8}.banner-guide h3{font:21px var(--pixel-font);color:#526d44;margin:0 0 13px}.banner-material-row{display:flex;justify-content:space-between;gap:15px;padding:8px 0;font:12px/1.5 system-ui;color:#617456;border-bottom:1px solid #e0e8d7}.banner-material-row small{font-size:10px}.banner-guide a{display:inline-block;margin-top:15px;font:13px var(--pixel-font);color:#60804e}.banner-status{min-height:22px;font:12px/1.6 system-ui;color:#577949;overflow-wrap:anywhere}.banner-status.error{color:#a44d3a}.banner-loading{padding:40px;text-align:center;border:1px solid #cbd8bf;background:#edf2e4;color:#698356;border-radius:6px}.banner-main textarea{display:block;width:100%;padding:12px;border:1px solid #c3d0b6;background:#fffef8;font:12px/1.6 monospace;color:#435b39}.banner-main [hidden]{display:none!important}
@media(max-width:1150px){.banner-layout{grid-template-columns:280px minmax(0,1fr)}.banner-editor-panels>.banner-panel:nth-child(3){grid-column:1/-1;grid-row:3;position:static;min-height:0}.banner-layers{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}.banner-swatches{grid-template-columns:repeat(8,minmax(0,1fr))}.banner-pattern-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:760px){.banner-main{padding:22px 16px 36px}.banner-intro h1{font-size:34px}.banner-version{display:none}.banner-workflow{gap:12px;font-size:10px;justify-content:space-between;padding:10px}.banner-workflow i{display:none}.banner-workflow>span{gap:5px}.banner-layout{grid-template-columns:1fr}.banner-preview-panel{grid-column:1;grid-row:auto;position:static}.banner-editor-panels>.banner-panel:nth-child(n){grid-column:1;grid-row:auto;position:static}.banner-stage{min-height:260px;padding:43px 20px 29px}.banner-stage canvas{width:90px;height:180px}.banner-hanger{top:41px;width:106px}.banner-stage-label{top:15px}.banner-stage-foot{bottom:13px}.banner-preview-actions{padding:12px}.banner-presets{padding:0;margin-bottom:16px}.banner-presets .banner-section-head>span{display:none}.banner-page .banner-preset{gap:6px;padding:8px;font-size:12px}.banner-swatches{grid-template-columns:repeat(16,minmax(0,1fr))}.banner-guide-layout{grid-template-columns:1fr;gap:20px}.banner-guide{padding:17px}.banner-layers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.banner-main{padding:20px 12px 32px}.banner-panel{padding:15px}.banner-presets{padding:0}.banner-intro h1{font-size:32px}.banner-intro p{font-size:12px}.banner-workflow b{font-size:13px}.banner-workflow{gap:9px;font-size:9px}.banner-page .banner-preset{flex-direction:column;text-align:center;font-size:11px}.banner-swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.banner-ink-head{flex-wrap:wrap;gap:0}.banner-ink-head>span{padding-bottom:10px}.banner-section-head h2{font-size:21px}.banner-search{flex-basis:100%}.banner-pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:310px}.banner-layers{grid-template-columns:1fr}.banner-layer-select{flex-basis:60%!important}.banner-layer-actions button{width:32px;height:32px}.banner-guide li{gap:10px}.banner-files>div button{flex:1}}
@media(prefers-reduced-motion:reduce){.banner-page button{transition:none!important;transform:none!important}}html[data-motion=reduce] .banner-page button{transition:none!important;transform:none!important}