.banner-page{--banner-line: rgba(var(--contrast-rgb), .08);--banner-line-soft: rgba(var(--contrast-rgb), .05)}.banner-studio{display:grid;grid-template-columns:292px minmax(0,1fr);align-items:start;gap:14px}.banner-studio__sidebar,.banner-studio__main{display:flex;flex-direction:column;gap:14px;min-width:0}.banner-studio__sidebar{position:sticky;top:calc(var(--header-height, 64px) + 14px)}.banner-panel{padding:17px}.banner-panel__head{margin-bottom:14px}.banner-panel__head--compact{align-items:center}.banner-preview-panel .generator-section-head__aside,.banner-base-panel .generator-section-head__aside,.banner-pattern-panel .generator-section-head__aside{flex:0 0 auto}[data-banner-base-name],.banner-selected-layer,.banner-layer-count{flex:0 0 auto;color:var(--text-muted);font-size:.68rem;font-weight:650}.banner-layer-count,.banner-selected-layer{padding:4px 8px;border:1px solid var(--banner-line);border-radius:999px;background:var(--bg-elevated)}.banner-preview-mode{margin:-3px 0 10px}.banner-preview-stage{--banner-preview-scale: 8;display:grid;place-items:center;min-height:365px;padding:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06);border-radius:12px;background-color:#242424;background-image:linear-gradient(180deg,#0000000a,#0000004d),url(/assets/img/server-motd/minecraft-background-dark.png);background-repeat:no-repeat,repeat;background-size:auto,80px}.banner-preview-skew{position:relative;perspective:1400px;perspective-origin:200% 20%;transform:rotateY(-7deg);transform-origin:100% 50%;transform-style:preserve-3d}.banner-preview-wave{position:relative;width:calc(20px * var(--banner-preview-scale));height:calc(40px * var(--banner-preview-scale));border-right:3px solid rgba(163,163,162,.5);animation:banner-wave 5s ease-in-out infinite;transform-origin:50% 0}.banner-preview-stage canvas{display:block;width:calc(20px * var(--banner-preview-scale));height:calc(40px * var(--banner-preview-scale));image-rendering:pixelated}@keyframes banner-wave{0%,to{transform:rotateX(1deg)}50%{transform:rotateX(-6deg)}}.banner-preview-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.banner-preview-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:42px;padding:9px 11px;border:1px solid var(--banner-line);border-radius:10px;background:var(--bg-elevated);color:var(--text-muted);font-family:inherit;font-size:.72rem;font-weight:680;line-height:1.2;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease}.banner-preview-action--wide{grid-column:1 / -1}.banner-preview-action:hover{border-color:rgba(var(--primary-rgb),.42);background:rgba(var(--primary-rgb),.07);color:var(--text)}.banner-preview-action:focus-visible{outline:0;border-color:rgba(var(--primary-rgb),.55);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14)}.banner-preview-action .icon{flex:0 0 auto;color:var(--primary)}.banner-download{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:43px;margin:7px 0 0;padding:10px 14px;border:1px solid var(--primary);border-radius:10px;background:var(--primary);color:var(--on-primary);font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:filter .15s ease}.banner-download:hover{filter:brightness(1.06)}.banner-download:focus-visible{outline:2px solid rgba(var(--primary-rgb),.45);outline-offset:4px;border-radius:4px}.banner-color-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.banner-color-grid button{position:relative;aspect-ratio:1;min-width:0;padding:0;border:2px solid var(--bg-card);border-radius:8px;outline:1px solid var(--banner-line);background:var(--banner-dye);cursor:pointer;transition:outline-color .14s ease,transform .14s ease}.banner-color-grid button:hover{outline-color:rgba(var(--contrast-rgb),.34);transform:translateY(-1px)}.banner-color-grid button.is-active{outline:2px solid var(--primary);outline-offset:1px}.banner-color-grid button.is-active:after{content:"";position:absolute;inset:50% auto auto 50%;width:7px;height:4px;border:solid #ffffff;border-width:0 0 2px 2px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));transform:translate(-50%,-65%) rotate(-45deg)}.banner-color-grid button:focus-visible{outline:3px solid rgba(var(--primary-rgb),.55);outline-offset:2px}.banner-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px}.banner-presets button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:102px;padding:8px 5px 7px;border:1px solid var(--banner-line);border-radius:10px;background:var(--bg-elevated);color:var(--text-muted);font-size:.62rem;font-weight:650;cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.banner-presets button:hover,.banner-presets button.is-active{border-color:rgba(var(--primary-rgb),.45);background:rgba(var(--primary-rgb),.07);color:var(--text)}.banner-presets button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15)}.banner-presets canvas{display:block;width:34px;height:62px;border:1px solid rgba(var(--contrast-rgb),.11);image-rendering:pixelated}.banner-layer-list{display:flex;flex-direction:column;gap:7px;max-height:296px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.banner-layer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0;padding:7px 8px;border:1px solid var(--banner-line);border-radius:11px;background:var(--bg-elevated);transition:border-color .14s ease,background .14s ease}.banner-layer:hover{border-color:rgba(var(--primary-rgb),.27)}.banner-layer.is-active{border-color:rgba(var(--primary-rgb),.55);background:rgba(var(--primary-rgb),.07)}.banner-layer__select{display:grid;grid-template-columns:24px 36px minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:0;border:0;outline:0;background:transparent;text-align:left;cursor:pointer}.banner-layer__select:focus-visible{border-radius:8px;box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15)}.banner-layer__number{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--bg-card);color:var(--text-muted);font-size:.64rem;font-weight:750}.banner-layer canvas{display:block;width:25px;height:46px;border:1px solid var(--banner-line);background:#5d6068;image-rendering:pixelated}.banner-layer__body{min-width:0}.banner-layer__body strong,.banner-layer__body span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.banner-layer__body strong{color:var(--text);font-size:.77rem;line-height:1.3}.banner-layer__body span{margin-top:2px;color:var(--text-muted);font-size:.65rem}.banner-layer__actions{display:flex;gap:3px}.banner-layer__actions button{display:grid;place-items:center;width:31px;height:31px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font-size:.9rem;cursor:pointer}.banner-layer__actions button:hover:not(:disabled){background:var(--bg-card);color:var(--text)}.banner-layer__actions button[data-banner-remove]:hover{background:#da45451a;color:#d84545}.banner-layer__actions button:disabled{cursor:not-allowed;opacity:.25}.banner-layer__actions button:focus-visible{outline:2px solid rgba(var(--primary-rgb),.45);outline-offset:1px}.banner-layer-empty{display:grid;place-items:center;min-height:96px;padding:16px;border:1px dashed var(--banner-line);border-radius:11px;color:var(--text-muted);font-size:.74rem;text-align:center}.banner-add-layer{width:100%;min-height:42px;margin-top:9px;justify-content:center}.banner-add-layer:disabled{cursor:not-allowed;opacity:.45}.banner-subsection+.banner-subsection{margin-top:17px;padding-top:17px;border-top:1px solid var(--banner-line-soft)}.banner-subsection h3{margin:0 0 10px;color:var(--text);font-size:.77rem}.banner-subsection__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}.banner-subsection__head h3{margin:0}.banner-subsection__head span{color:var(--text-muted);font-size:.64rem}.banner-color-grid--layer{grid-template-columns:repeat(16,minmax(0,1fr))}.banner-pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}.banner-pattern-grid button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:91px;padding:7px 5px;border:1px solid var(--banner-line);border-radius:10px;background:var(--bg-elevated);color:var(--text-muted);font-size:.59rem;line-height:1.25;cursor:pointer;transition:border-color .14s ease,color .14s ease,background .14s ease}.banner-pattern-grid button:hover,.banner-pattern-grid button.is-active{border-color:rgba(var(--primary-rgb),.46);background:rgba(var(--primary-rgb),.07);color:var(--text)}.banner-pattern-grid button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14)}.banner-pattern-grid canvas{display:block;width:25px;height:46px;border:1px solid var(--banner-line);background:#656870;image-rendering:pixelated}.banner-pattern-grid button>span{display:-webkit-box;min-height:2.5em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.banner-pattern-grid button>i{position:absolute;top:5px;right:6px;color:var(--primary);font-size:.5rem;font-style:normal}.banner-editor-empty{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:90px;padding:16px;border:1px dashed var(--banner-line);border-radius:11px;color:var(--text-muted);font-size:.75rem}.banner-editor-empty[hidden]{display:none}.banner-command-list{display:flex;flex-direction:column;gap:9px}.banner-command-list article{display:grid;grid-template-columns:130px minmax(0,1fr) auto;align-items:center;gap:11px;min-width:0;padding:11px;border:1px solid var(--banner-line);border-radius:11px;background:var(--bg-elevated)}.banner-command-list strong,.banner-command-list article>div>span{display:block}.banner-command-list strong{color:var(--text);font-size:.76rem}.banner-command-list article>div>span{margin-top:2px;color:var(--text-muted);font-size:.61rem;line-height:1.35}.banner-command-value{min-width:0}.banner-command-list code{display:block;min-width:0;max-height:88px;overflow:auto;padding:9px 10px;border:1px solid var(--banner-line-soft);border-radius:8px;background:var(--bg-card);color:var(--text);font:500 .68rem/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;overflow-wrap:anywhere;white-space:pre-wrap}.banner-command-warning{display:flex;align-items:flex-start;gap:7px;margin:7px 0 0;padding:8px 10px;border:1px solid rgba(var(--warning-rgb),.25);border-radius:8px;background:rgba(var(--warning-rgb),.08);color:var(--warning);font-size:.66rem;line-height:1.4}.banner-command-warning[hidden]{display:none}.banner-command-warning .icon{flex:0 0 auto;margin-top:1px}.banner-command-list button.is-copied{border-color:#3abe696b;background:#3abe691f;color:#24a75a}@media(max-width:1050px){.banner-color-grid--layer{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(max-width:820px){.banner-studio{grid-template-columns:1fr}.banner-studio__sidebar{position:static;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr)}.banner-preview-panel{grid-row:span 2}.banner-preview-stage{min-height:330px}}@media(max-width:620px){.banner-studio__sidebar{display:flex}.banner-panel{padding:14px}.banner-panel__head .generator-section-head__aside>p{display:none}.banner-preview-stage{--banner-preview-scale: 7;min-height:310px}.banner-color-grid button{min-height:36px}.banner-presets{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}.banner-presets button{flex:0 0 76px;scroll-snap-align:start}.banner-layer{grid-template-columns:1fr}.banner-layer__select{grid-template-columns:24px 34px minmax(0,1fr);gap:8px}.banner-layer__actions{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding-top:6px;border-top:1px solid var(--banner-line-soft)}.banner-layer__actions button{width:100%;min-height:38px;background:var(--bg-card)}.banner-subsection__head span{display:none}.banner-pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.banner-pattern-grid button{min-height:96px}.banner-editor-empty{align-items:stretch;flex-direction:column}.banner-command-list article{grid-template-columns:minmax(0,1fr) auto}.banner-command-value{grid-column:1 / -1;grid-row:2}.banner-command-list button{width:42px;min-height:42px;padding:0}.banner-command-list button span{display:none}}@media(max-width:390px){.banner-color-grid{gap:5px}.banner-color-grid button{min-height:34px}.banner-pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.banner-preview-wave{animation:none;transform:rotateX(1deg)}.banner-color-grid button,.banner-presets button,.banner-layer,.banner-pattern-grid button{transition:none}}