/* Letter banner — phosphor panels, five independent groups. */
.letter-banner-section{
  margin-top:28px;
  border:1px solid var(--line);
  background:rgba(0,59,0,.07);
  padding:16px 16px 12px;
  scroll-margin-top:84px;
}
.banner-head h2{
  font:clamp(28px,4vw,40px)/.95 'DotGothic16',sans-serif;
  margin:6px 0 8px;
  text-shadow:0 0 18px rgba(0,255,65,.25);
}
.banner-lead{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.6}
.banner-words{
  display:flex;justify-content:space-between;gap:8px;
  margin-bottom:6px;font:11px 'DotGothic16',sans-serif;letter-spacing:.6px;
}
.banner-words output.is-over{color:#ffb4b4}
#bannerText{
  width:100%;min-height:64px;resize:vertical;
  background:#020a03;border:1px solid var(--line);color:var(--g);
  font:14px/1.45 'Fragment Mono',monospace;padding:10px 12px;
}
.letter-banner-section button:focus-visible,
.letter-banner-section input:focus-visible,
.letter-banner-section textarea:focus-visible,
.letter-banner-section select:focus-visible,
.letter-banner-section summary:focus-visible,
.letter-banner-section [role="tab"]:focus-visible,
.banner-presets:focus-visible,
#bannerFontGallery button:focus-visible,
#bannerFontGallery input:focus-visible,
#bannerExportMenu button:focus-visible,
#bannerSaveForm button:focus-visible,
#bannerSaveForm input:focus-visible,
#bannerTuneDialog button:focus-visible,
#bannerTuneDialog input:focus-visible,
#bannerTuneDialog textarea:focus-visible,
#bannerTuneDialog select:focus-visible{
  outline:2px solid var(--g);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(0,255,65,.28);
}
.banner-limit{margin:8px 0 0;color:#d6ffd6;font-size:12px;line-height:1.45}
.banner-lookbar{margin-top:12px}
.banner-presets,.banner-your-list{display:flex;flex-wrap:wrap;gap:6px}
.banner-presets button.active{background:var(--g);color:var(--b);border-color:var(--g)}
.banner-yours{margin-top:8px}
.banner-save-row,.banner-save-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.banner-save-form input{
  background:#020a03;border:1px solid var(--line);color:var(--g);
  font:12px 'Fragment Mono',monospace;padding:6px 8px;width:min(220px,100%);
}
.banner-save-status{margin:4px 0 0;color:#ffb4b4;font-size:11px}
.banner-stage{
  --banner-paper:#0d0208;
  --banner-ink:#00ff41;
  position:relative;
  margin-top:12px;
  min-height:168px;
  max-height:min(52vh,420px);
  border:1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--banner-ink) 7%, transparent), transparent 62%),
    var(--banner-paper);
  overflow:auto;
  display:flex;
  align-items:center;
  padding:18px 14px;
}
.banner-stage.is-clear{
  background-color:#0d0208;
  background-image:
    linear-gradient(45deg, #1a1014 25%, transparent 25%),
    linear-gradient(-45deg, #1a1014 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1014 75%),
    linear-gradient(-45deg, transparent 75%, #1a1014 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0;
}
.banner-stage[data-align="left"]{justify-content:flex-start}
.banner-stage[data-align="right"]{justify-content:flex-end}
.banner-stage[data-align="center"]{justify-content:safe center}
.banner-stage.is-holding{cursor:grabbing}
.banner-empty{
  margin:0 auto;color:var(--muted);font:12px 'DotGothic16',sans-serif;letter-spacing:.8px;
}
.banner-stack{
  position:relative;
  display:inline-block;
  font:400 14px/1.02 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.letter-art,.letter-ghost{
  margin:0;
  font:inherit;
  letter-spacing:0;
  white-space:pre;
  color:color-mix(in srgb, var(--banner-ink) 88%, transparent);
}
.letter-art{
  position:relative;
  text-shadow:0 0 8px rgba(0,255,65,.4);
  transform:translate3d(var(--banner-motion-x, 0px), var(--banner-motion-y, 0px), 0);
  filter:hue-rotate(var(--banner-motion-hue, 0deg));
  opacity:var(--banner-motion-opacity, 1);
}
.letter-ghost{
  position:absolute;inset:0;
  text-shadow:none;
  mix-blend-mode:screen;
  pointer-events:none;
  filter:none;
  opacity:1;
}
.letter-art.is-shimmer::after{
  content:"";
  position:absolute;inset:-4%;
  background:linear-gradient(105deg, transparent var(--banner-motion-sheen-x, -120%), rgba(255,255,255,.55) calc(var(--banner-motion-sheen-x, -120%) + var(--banner-motion-sheen, 18%)), transparent calc(var(--banner-motion-sheen-x, -120%) + var(--banner-motion-sheen, 18%) + 12%));
  mix-blend-mode:screen;
  pointer-events:none;
}
.letter-art.is-scan::before{
  content:"";
  position:absolute;left:0;right:0;height:18%;
  top:var(--banner-motion-scan-y, 0%);
  background:rgba(255,255,255,var(--banner-motion-scan-a, 0));
  pointer-events:none;
}
.banner-stage.is-slamming .letter-art{animation:banner-slam 120ms linear}
@keyframes banner-slam{from{scale:1.045}to{scale:1}}
#bannerTrack{
  position:absolute;left:0;right:0;height:2px;
  background:color-mix(in srgb, var(--banner-ink) 75%, white);
  pointer-events:none;
}
.banner-scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,var(--scan-a, 0)) 0 1px, transparent 1px 3px);
}
.banner-seed{
  position:absolute;right:8px;bottom:6px;z-index:2;
  font:10px 'DotGothic16',sans-serif;letter-spacing:.5px;
  color:color-mix(in srgb, var(--g) 65%, transparent);
  pointer-events:none;
}
.banner-seed.is-flash{color:var(--g)}
.banner-note{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
.banner-now{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.banner-now button{padding:4px 8px;font:10px 'DotGothic16',sans-serif;letter-spacing:.4px}
.banner-hint{margin:0 0 8px;color:var(--muted);font-size:11px;line-height:1.45}
.banner-warn{margin:6px 0 0;color:#ffb4b4;font-size:12px;line-height:1.4}
#bannerTune{margin-top:12px}
.banner-layout,.banner-group fieldset{
  display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
}
.banner-span{grid-column:1 / -1}
.banner-group{
  border:1px solid var(--line);margin-top:8px;background:var(--panel);
}
.banner-group summary{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 10px;cursor:pointer;list-style:none;
  font:11px 'DotGothic16',sans-serif;letter-spacing:.7px;
}
.banner-group summary::-webkit-details-marker{display:none}
.banner-group summary::before{content:'▸ ';color:var(--g)}
.banner-group[open] summary::before{content:'▾ '}
.banner-group-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.banner-group-tools output{font:10px 'Fragment Mono',monospace;color:var(--muted)}
.banner-group-tools button,.banner-on{font:10px 'Fragment Mono',monospace}
.banner-on{display:flex;align-items:center;gap:4px;color:var(--muted);letter-spacing:0}
.banner-group fieldset{
  border:0;margin:0;padding:4px 10px 12px;min-inline-size:0;
}
.banner-group fieldset:disabled{opacity:.48}
.banner-choice{display:flex;flex-wrap:wrap;gap:8px 12px;margin:4px 0 8px}
.banner-choice label,.banner-check{
  display:flex;align-items:center;gap:6px;
  font:11px 'Fragment Mono',monospace;color:var(--muted);letter-spacing:0;
}
.banner-choice input,.banner-check input,.banner-on input{accent-color:var(--g)}
.banner-palettes{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px}
.banner-palettes button{padding:5px 8px;font-size:10px}
.banner-palettes button.active{background:var(--g3);border-color:var(--g)}
.banner-hex{
  display:flex;gap:6px;align-items:center;
}
.banner-hex input[type=text]{
  width:7.2em;background:#020a03;border:1px solid var(--line);color:var(--g);
  font:11px 'Fragment Mono',monospace;padding:6px 8px;
}
.banner-fx{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);
  gap:4px 10px;align-items:end;
  border-top:1px solid var(--line);padding-top:8px;margin-top:4px;
}
.banner-fx label{font:10px 'DotGothic16',sans-serif;letter-spacing:.4px}
.banner-actions-more,
.banner-actions-primary{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.banner-actions-primary #bannerPost{border-color:var(--g);color:var(--g)}
.banner-dice-all{margin:10px 0 2px}
#bannerTuneDialog{
  width:min(520px, calc(100vw - 16px));
  max-height:min(78vh, 640px);
  margin:auto auto 0;
  border:1px solid var(--line);
  background:#0d0208;
  color:var(--g);
  padding:0 0 env(safe-area-inset-bottom);
  overflow:auto;
}
#bannerTuneDialog::backdrop{background:rgba(0,0,0,.62)}
.banner-tune-bar{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  position:sticky;top:0;z-index:2;
  padding:10px 12px;background:#0d0208;border-bottom:1px solid var(--line);
}
.banner-tune-bar h2{margin:0;font:16px 'DotGothic16',sans-serif;letter-spacing:.6px}
#bannerTuneMount{padding:4px 12px 16px}
@media (min-width:901px){
  #bannerTuneOpen{display:none}
  .banner-stage{position:sticky;top:84px;z-index:3}
}
@media (max-width:900px){
  .letter-banner-section{display:flex;flex-direction:column;padding-bottom:8px}
  .banner-head{order:1}
  .banner-words{order:2}
  #bannerText{order:3}
  .banner-limit{order:4}
  .banner-lookbar{order:5}
  .banner-presets{flex-wrap:wrap;overflow:visible;padding-bottom:4px}
  .banner-stage{order:6;min-height:132px;max-height:240px}
  .banner-note{order:7}
  .banner-now{order:8}
  .banner-actions-primary{order:9}
  #bannerTune{order:10}
  .banner-actions-more{order:11}
  .banner-layout,.banner-group fieldset{grid-template-columns:1fr}
  .banner-fx{grid-template-columns:1fr}
  .banner-actions-primary{
    position:sticky;bottom:0;z-index:4;
    margin:12px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:#0d0208;border-top:1px solid var(--line);
  }
  .banner-actions-primary #bannerCopy,
  .banner-actions-primary #bannerTuneOpen,
  .banner-actions-primary #bannerPost{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .letter-art{
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }
  .letter-art::before,.letter-art::after{display:none !important}
}
.letter-banner-section.is-reduced .letter-art{
  transform:none !important;
  filter:none !important;
  animation:none !important;
}
.letter-banner-section.is-reduced .letter-art::before,
.letter-banner-section.is-reduced .letter-art::after{display:none !important}

/* Compact toolbar, tabs, and one open panel. */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.letter-banner-section{
  margin-top:12px;
  padding:8px 10px 8px;
}
.banner-head{
  display:flex;align-items:baseline;gap:10px;min-height:28px;
}
.banner-head .kicker{margin:0}
.banner-head h2{
  font:18px/1 'DotGothic16',sans-serif;
  margin:0;
  text-shadow:0 0 12px rgba(0,255,65,.25);
}
.banner-toolbar{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;
  margin-top:6px;
}
.banner-phrase{
  display:flex;align-items:center;gap:6px;
  flex:1 1 10rem;min-width:8rem;
  font:10px 'DotGothic16',sans-serif;letter-spacing:.5px;
}
#bannerText{
  width:auto;flex:1;min-width:0;min-height:32px;height:32px;max-height:96px;
  resize:none;padding:6px 8px;overflow:auto;
}
.banner-phrase output{font:10px 'Fragment Mono',monospace;color:var(--muted)}
.banner-presets{
  display:flex;flex-wrap:wrap;gap:4px;
  overflow:visible;max-width:none;flex:1 1 100%;order:3;
}
.banner-presets button{flex:0 0 auto;height:32px;padding:0 8px}
.banner-save-chip{min-width:32px}
.banner-your-list{display:flex;flex-wrap:nowrap;gap:4px}
.banner-dock{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.banner-tool{min-width:7.5rem;max-width:12rem}
#bannerFont{width:100%;height:32px}
.banner-dock > button{height:32px;padding:0 8px}
#bannerFont{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#bannerPost{border-color:var(--g);color:var(--g);background:rgba(0,255,65,.08)}
.letter-banner-section .banner-stage{
  contain:layout paint;
  margin-top:6px;
  min-height:148px;
  max-height:min(46vh, 440px);
  height:auto;
  padding:10px 12px;
  position:sticky;
  top:56px;
  z-index:3;
}
.letter-banner-section .banner-stage.is-tall{position:relative;top:auto}
.letter-banner-section .banner-stage.is-sample{
  align-items:flex-start;
  padding-bottom:32px;
}
.banner-stage.is-sample .letter-art{opacity:.5}
.banner-stage.is-sample .banner-empty{
  position:absolute;left:12px;right:12px;bottom:8px;z-index:2;
  text-align:center;
}
.banner-overflow{
  position:absolute;right:8px;bottom:8px;z-index:4;
  background:#0d0208;
}
#bannerTune{margin-top:6px}
.banner-layout{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.9fr) auto;
  gap:4px 8px;
  align-items:center;
}
.letter-banner-section .field{margin-top:0}
.banner-layout .field,
.banner-group .field{
  display:grid;
  grid-template-columns:7.5rem minmax(0,1fr) 4.5rem;
  align-items:center;
  gap:6px;
  min-height:32px;
  height:32px;
}
.banner-layout .banner-span{grid-column:1 / -1}
.banner-group fieldset{
  display:block;
  padding:4px 8px 6px;
}
.field label{font:10px 'DotGothic16',sans-serif;letter-spacing:.4px}
.field output{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
}
.banner-num{
  width:4.5rem;height:26px;padding:0 4px;
  background:#020a03;border:1px solid var(--line);color:var(--g);
  font:11px 'Fragment Mono',monospace;
}
[role="tablist"]{display:flex;margin-top:4px;border:1px solid var(--line)}
[role="tab"]{
  flex:1;height:32px;background:transparent;color:var(--muted);
  border:0;border-right:1px solid var(--line);
  font:11px 'DotGothic16',sans-serif;letter-spacing:.6px;
}
[role="tab"]:last-child{border-right:0}
[role="tab"][aria-selected="true"]{background:var(--g);color:#041208}
.banner-group{margin-top:0;border-top:0}
.banner-group-tools{justify-content:flex-start;min-height:32px;padding:4px 8px 0}
.banner-more{height:28px;margin:4px 0}
.banner-group [id$="MorePanel"]{max-height:160px;overflow:auto}
.banner-seg,.banner-choice{
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0;margin:0;
  border:1px solid var(--line);
}
.banner-seg label,.banner-choice label{
  position:relative;flex:1 0 auto;justify-content:center;
  min-height:28px;padding:4px 8px;margin:0;
}
.banner-seg input,.banner-choice input{
  position:absolute;opacity:0;width:1px;height:1px;
}
.banner-seg label:has(input:checked),
.banner-choice label:has(input:checked){
  background:var(--g);color:#041208;
}
.letter-art.is-cells{font-variant-ligatures:none}
.banner-cell{
  display:inline-block;width:1.15em;text-align:center;vertical-align:top;
}
.banner-cell.is-caret{box-shadow:inset 0 0 0 1px currentColor}
#bannerInk{
  position:absolute;left:0;top:0;pointer-events:none;
}
.letter-art.is-inked{color:transparent}
#bannerFont{anchor-name:--banner-font}
#bannerExport{anchor-name:--banner-export}
#bannerSaveLook{anchor-name:--banner-save}
#bannerFontGallery,#bannerExportMenu,#bannerSaveForm{
  background:#0d0208;color:var(--g);
  border:1px solid var(--line);padding:8px;margin:0;
}
#bannerFontGallery{
  position-anchor:--banner-font;
  position-area:bottom span-right;
  width:min(420px, calc(100vw - 16px));
  max-height:min(420px, 62vh);
  overflow:auto;
}
#bannerExportMenu:not(:popover-open),
#bannerSaveForm:not(:popover-open){
  display:none !important;
}
#bannerExportMenu:popover-open{
  position-anchor:--banner-export;
  position-area:bottom span-left;
  display:flex;flex-direction:column;gap:4px;min-width:16rem;
}
#bannerExportMenu [role="menuitem"]{text-align:left;height:32px}
.banner-gif-length{
  display:grid;gap:4px;padding-bottom:6px;margin-bottom:2px;
  border-bottom:1px solid var(--line);
  font:10px 'DotGothic16',sans-serif;letter-spacing:.4px;
}
.banner-gif-length select{
  width:100%;height:32px;background:#020a03;color:var(--g);
  border:1px solid var(--line);font:11px 'Fragment Mono',monospace;padding:0 6px;
}
.banner-gif-length output{color:var(--muted);font:10px 'Fragment Mono',monospace}
.banner-gif-job{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
}
.banner-gif-job progress{flex:1;height:8px;accent-color:var(--g)}
.banner-gif-job span{font:11px 'Fragment Mono',monospace;min-width:4.5rem}
.banner-gif-job button{height:32px}
#bannerSaveForm:popover-open{
  position-anchor:--banner-save;
  position-area:bottom span-right;
  display:flex;
}
.banner-cats{display:flex;gap:4px;overflow-x:auto;margin:6px 0}
.banner-cats button{height:26px;padding:0 6px;flex:0 0 auto;font:10px 'DotGothic16',sans-serif}
.banner-cats button.is-on{background:var(--g);color:#041208}
#bannerFontGallery search input,
#bannerFontGallery input[type="search"]{
  width:100%;height:32px;background:#020a03;border:1px solid var(--line);
  color:var(--g);font:12px 'Fragment Mono',monospace;padding:4px 8px;
}
#bannerFontGallery [role="listbox"]{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto}
.banner-font-row{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr);
  gap:6px;align-items:center;width:100%;text-align:left;
  content-visibility:auto;contain-intrinsic-size:auto 46px;
  background:transparent;color:var(--g);border:1px solid transparent;padding:2px 4px;
}
.banner-font-row.is-active,.banner-font-row[aria-selected="true"]{border-color:var(--g)}
.banner-font-row pre{
  margin:0;font:8px/1.05 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  max-height:52px;overflow:hidden;white-space:pre;color:var(--g);
}
.banner-font-row small{
  display:block;color:var(--muted);font:9px 'Fragment Mono',monospace;letter-spacing:0;
}
.banner-font-empty{margin:8px 4px;color:var(--muted);font-size:12px}
@media (min-width:901px){
  #bannerTuneOpen{display:none}
}
@media (max-width:900px){
  .letter-banner-section{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  #bannerTune{display:none}
  .banner-presets{max-width:none;flex:1 1 auto}
  .banner-toolbar{flex-wrap:wrap}
  .banner-phrase{flex:1 1 100%}
  .letter-banner-section .banner-stage{
    position:relative;top:auto;
    min-height:132px;
    max-height:min(46vh, 360px);
  }
  .banner-layout,.banner-group .field{grid-template-columns:1fr}
  .banner-layout .field,.banner-group .field{grid-template-columns:6.2rem minmax(0,1fr) 4.2rem;height:44px}
  .banner-dock{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:4px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:#0d0208;border-top:1px solid var(--line);
  }
  .banner-tool{min-width:0;max-width:none}
  .banner-dock > button,#bannerFont{height:44px;width:100%;font-size:10px;padding:0 2px;overflow:hidden;text-overflow:ellipsis}
  #bannerPost{font-size:0}
  #bannerPost::after{content:"POST";font:11px 'DotGothic16',sans-serif;letter-spacing:.4px}
  #bannerFontGallery{bottom:52px}
  .banner-gif-job{
    position:fixed;left:8px;right:8px;z-index:41;
    bottom:calc(58px + env(safe-area-inset-bottom));
    margin:0;padding:6px 8px;background:#0d0208;border:1px solid var(--line);
  }
}