:root {
  color-scheme: light;
  --navy: #061563;
  --blue: #0b63c7;
  --sky: #5cc9ff;
  --cyan: #00e7ff;
  --pink: #ff1bbd;
  --purple: #7111a8;
  --lime: #75ff00;
  --yellow: #fff200;
  --orange: #ff7a00;
  --red: #ff1d25;
  --paper: #fff9df;
  --chrome: #c8c8c8;
  --shadow: #00113b;
  --ink: #0b0b0b;
  --panel-radius: 4px;
  --mono: "Courier New", Courier, monospace;
  --ui: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  font-family: var(--ui);
  color: white;
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 60px 56px, rgba(255, 242, 0, 0.14) 0 2px, transparent 3px),
    linear-gradient(135deg, #104b99, #071458 44%, #4a0088 100%);
  background-size: 76px 76px, 116px 116px, auto;
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
.cta {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0.18;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 2px,
    transparent 5px
  );
  mix-blend-mode: screen;
}

.browser-window {
  width: min(1448px, calc(100vw - 16px));
  margin: 8px auto 18px;
  border: 2px solid #222;
  background: #bfbfbf;
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.browser-chrome {
  border: 2px outset #f2f2f2;
  background: #c0c0c0;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  padding: 2px 4px;
  color: white;
  background: linear-gradient(90deg, #01117a, #1745c7 54%, #071058);
  font-size: clamp(0.75rem, 2vw, 1rem);
  letter-spacing: 0;
}

.titlebar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: white;
  font-weight: 900;
  font-family: Georgia, serif;
  background: linear-gradient(135deg, #003b8e, #00c4ff);
  border: 2px outset #e9e9e9;
}

.window-controls {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.window-controls span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 20px;
  color: #050505;
  background: #d7d7d7;
  border: 2px outset white;
  font-size: 0.7rem;
  line-height: 1;
}

.menubar,
.toolbar,
.addressbar,
.personalbar,
.statusbar {
  display: flex;
  align-items: center;
  gap: 3px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #777;
  background: #c9c9c9;
}

.menubar {
  position: relative;
  flex-wrap: wrap;
  padding: 3px 7px 2px;
}

.menubar button {
  border: 0;
  background: transparent;
  padding: 1px 9px;
  text-decoration: underline;
}

.menubar button:hover,
.menubar button:focus-visible {
  background: #001b7f;
  color: white;
}

.browser-menu-popup {
  position: absolute;
  top: 100%;
  left: 8px;
  z-index: 30;
  min-width: 190px;
  padding: 3px;
  color: #111;
  background: #d7d7d7;
  border: 3px outset #fff;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, 0.35);
}

.browser-menu-popup button {
  display: block;
  width: 100%;
  min-height: 27px;
  padding: 3px 26px 3px 8px;
  border: 0;
  color: #111;
  background: transparent;
  text-align: left;
  text-decoration: none;
}

.browser-menu-popup button:hover,
.browser-menu-popup button:focus-visible {
  color: white;
  background: #001b7f;
}

.browser-menu-popup .menu-separator {
  height: 1px;
  margin: 3px 2px;
  background: #777;
  border-bottom: 1px solid #fff;
}

.toolbar {
  flex-wrap: wrap;
  min-height: 62px;
  padding: 3px 5px;
  overflow: visible;
}

.tool-button {
  position: relative;
  display: grid;
  grid-template-rows: 30px auto;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1px;
  min-width: 50px;
  min-height: 52px;
  padding: 3px 3px 2px;
  border: 1px solid transparent;
  background: transparent;
  color: #111;
  font-size: 0.72rem;
}

.tool-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px outset #f5f5f5;
  border-radius: 0;
  background: #d7d7d7;
  font-weight: 900;
  image-rendering: pixelated;
}

.icon-back,
.icon-forward,
.icon-reload,
.icon-home,
.icon-search,
.icon-guide,
.icon-print,
.icon-security,
.icon-stop {
  border: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tool-button:hover {
  border-color: #f7f7f7 #666 #666 #f7f7f7;
  background: rgba(255, 255, 255, 0.38);
}

.tool-button:active .tool-icon {
  border-style: inset;
}

.tool-button.is-disabled {
  color: #777;
  cursor: default;
  filter: grayscale(0.75);
}

.toolbar-grip {
  flex: 0 0 11px;
  align-self: stretch;
  min-height: 18px;
  border: 2px outset #ededed;
  background:
    repeating-linear-gradient(to bottom, #777 0 1px, transparent 1px 5px),
    #c9c9c9;
}

.toolbar-separator {
  flex: 0 0 1px;
  align-self: stretch;
  min-height: 42px;
  margin: 4px 1px;
  border-left: 1px solid #777;
  border-right: 1px solid #f2f2f2;
}

.icon-back {
  background-image: url("assets/toolbar-back.png");
}

.icon-forward {
  background-image: url("assets/toolbar-forward.png");
}

.icon-reload {
  background-image: url("assets/toolbar-reload.png");
}

.icon-home {
  background-image: url("assets/toolbar-home.png");
}

.icon-search {
  background-image: url("assets/toolbar-search.png");
}

.icon-guide {
  background-image: url("assets/toolbar-guide.png");
}

.icon-print {
  background-image: url("assets/toolbar-print.png");
}

.icon-security {
  background-image: url("assets/toolbar-security.png");
}

.icon-stop {
  background-image: url("assets/toolbar-stop.png");
}

.netscape-throbber {
  flex: 0 0 50px;
  align-self: stretch;
  min-height: 52px;
  margin-left: auto;
  border: 2px inset #f3f3f3;
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.75) 0 3px, transparent 4px),
    linear-gradient(135deg, #022a31 0 36%, #009e9c 37% 66%, #001f68 67%);
  position: relative;
}

.netscape-throbber::before {
  content: "N";
  position: absolute;
  inset: 5px;
  display: grid;
  place-items: center;
  color: white;
  border: 2px solid white;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-weight: 900;
  text-shadow: 2px 2px #00113b;
}

.netscape-throbber.is-loading::before {
  animation: throbberSpin 700ms steps(4, end) infinite;
}

.tool-button::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: -20px;
  z-index: 10;
  transform: translateX(-50%);
  display: none;
  padding: 2px 5px;
  color: #111;
  background: #ffffc2;
  border: 1px solid #111;
  font-size: 0.72rem;
  white-space: nowrap;
}

.tool-button:hover::after {
  display: block;
}

.addressbar {
  padding: 3px 5px;
}

.addressbar label {
  flex: 0 0 auto;
  font-weight: 700;
}

.page-proxy {
  flex: 0 0 20px;
  height: 22px;
  border: 2px outset #fff;
  background:
    linear-gradient(135deg, transparent 0 73%, #bbb 74%),
    linear-gradient(#fff, #dedede);
}

.url-combo {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.addressbar input {
  width: 100%;
  height: 26px;
  border: 2px inset #fff;
  padding: 2px 28px 2px 8px;
  background: white;
}

.combo-arrow {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 21px;
  height: 20px;
  border: 2px outset #fff;
  background: #d2d2d2;
}

.combo-arrow::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #111;
}

.addressbar button,
.statusbar {
  border: 2px outset #f5f5f5;
}

.addressbar button {
  min-height: 28px;
  padding: 2px 10px;
  background: #d4d4d4;
}

.personalbar {
  padding: 2px 5px;
  min-height: 28px;
  overflow-x: auto;
}

.personalbar button {
  flex: 0 0 auto;
  min-height: 22px;
  border: 2px outset #f2f2f2;
  color: #111;
  background: #d2d2d2;
  padding: 1px 9px;
  font-size: 0.82rem;
}

.personalbar button:active {
  border-style: inset;
}

/* Persistent top-right SaaS front door. NEW element — does not alter the canon
   Netscape chrome / window-control glyphs / personalbar stubs (rule 7 safe).
   margin-left:auto pins it to the right edge of the personalbar. */
.personalbar-deploy {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 1px 12px;
  border: 2px outset #ff7be6;
  background: linear-gradient(#ff2bc7, #c40f97 58%, #8a0a6b);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 1px 1px #57003f;
  box-shadow: 0 0 0 1px #3d002b, 0 0 10px rgba(255, 43, 199, 0.55);
  cursor: pointer;
}

.personalbar-deploy:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px #3d002b, 0 0 14px rgba(255, 43, 199, 0.8);
}

.personalbar-deploy:active {
  border-style: inset;
  transform: translateY(1px);
}

.personalbar-deploy:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.personalbar-deploy-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6dff8e;
  box-shadow: 0 0 5px #6dff8e;
  animation: personalbarDeployPulse 1.6s ease-in-out infinite;
}

.personalbar-deploy-arrow {
  font-weight: 900;
}

@keyframes personalbarDeployPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .personalbar-deploy-dot { animation: none; }
}

.site-shell {
  position: relative;
  padding: 8px 8px 10px;
  color: white;
  background:
    radial-gradient(circle at 42px 38px, rgba(255, 255, 255, 0.14) 0 20px, transparent 21px),
    radial-gradient(circle at 118px 28px, rgba(0, 0, 0, 0.18) 0 19px, transparent 20px),
    linear-gradient(135deg, rgba(0, 188, 255, 0.42), rgba(8, 33, 121, 0.9)),
    #0b61af;
  background-size: 86px 76px, 112px 82px, auto, auto;
  overflow: hidden;
}

.site-shell::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 255, 255, 0.35) 0 10px, transparent 11px),
    radial-gradient(circle at 52px 46px, rgba(0, 0, 0, 0.28) 0 11px, transparent 12px);
  background-size: 88px 76px;
}

.brand-row,
.content-grid,
.fireline,
.bottom-marquee,
.badge-row {
  position: relative;
  z-index: 1;
}

.brand-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 158px;
  align-items: center;
  gap: 12px;
  min-height: 174px;
  padding: 8px 12px 8px;
  border: 3px ridge #6fdcff;
  background:
    linear-gradient(180deg, rgba(0, 104, 202, 0.5), rgba(0, 9, 78, 0.76)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 16px);
  overflow: hidden;
}

.image-badge {
  display: block;
  image-rendering: auto;
}

.smiley-badge {
  width: clamp(72px, 8vw, 104px);
  height: auto;
  margin: auto;
  filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.5));
}

.brand-copy {
  min-width: 0;
  text-align: center;
}

.tiny-label {
  margin: 0 0 2px;
  color: var(--yellow);
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.4vw, 0.9rem);
  text-shadow: 2px 2px #000;
}

h1 {
  min-height: clamp(76px, 8.4vw, 112px);
  margin: 0;
  background: url("assets/logo-ref.png") center / contain no-repeat;
  filter: drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.48));
}

h1 span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tagline {
  margin: 4px 0 2px;
  color: #ff71ff;
  font-size: clamp(1.2rem, 3vw, 2.3rem);
  font-weight: 1000;
  font-style: italic;
  text-shadow: 3px 3px #00165c, -1px -1px #fff200;
}

.subtag {
  margin: 0;
  color: white;
  font-size: clamp(0.9rem, 1.6vw, 1.25rem);
  font-weight: 800;
  text-shadow: 2px 2px #00165c;
}

.brand-row .new-burst {
  position: relative;
  display: block;
  width: clamp(104px, 10vw, 148px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(6px 7px 0 rgba(0, 0, 0, 0.45)) saturate(1.12);
  animation: burstPulse 1200ms steps(2, end) infinite;
}

.brand-row .rainbow-cat {
  position: absolute;
  right: 146px;
  bottom: 18px;
  width: clamp(132px, 14vw, 190px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.35));
  animation: catFloat 2200ms ease-in-out infinite;
}

.content-grid {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) 312px;
  gap: 10px;
  margin-top: 8px;
  align-items: start;
}

.left-rail,
.right-rail,
.main-stage {
  display: grid;
  gap: 10px;
}

.hero-card {
  order: 1;
}

.cta-strip {
  order: 2;
}

.how-panel {
  order: 3;
}

.story-output {
  order: 4;
}

.meme-maker-panel {
  order: 5;
}

.retro-panel {
  border: 4px ridge #e9f7ff;
  border-radius: var(--panel-radius);
  background: linear-gradient(180deg, rgba(7, 34, 116, 0.96), rgba(2, 8, 42, 0.96));
  box-shadow:
    inset 0 0 0 2px rgba(0, 208, 255, 0.5),
    5px 6px 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.retro-panel h2 {
  margin: 0;
  padding: 6px 8px;
  color: var(--yellow);
  background: #040404;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px #009900;
}

.nav-panel a,
.nav-panel button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  color: white;
  border: 0;
  border-top: 1px solid #82deff;
  border-bottom: 1px solid #001a57;
  background: linear-gradient(180deg, #096be8, #062678);
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  text-decoration: underline;
  text-shadow: 2px 2px #00113b;
}

.nav-panel a span,
.nav-panel button span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  color: #0a1e68;
  background: #fff;
  border: 2px outset #fff;
  font-size: 0.74rem;
}

.nav-panel a:hover,
.nav-panel button:hover {
  filter: brightness(1.35);
  transform: translateX(2px);
}

.login-panel,
.counter-panel,
.support-panel,
.hot-panel,
.webring-panel,
.email-panel,
.vault-panel {
  padding-bottom: 10px;
}

.login-panel form,
.support-panel p,
.counter-panel p,
.email-panel p,
.vault-panel p,
.webring-panel p {
  margin: 8px 10px;
}

.login-panel label {
  display: block;
  margin: 7px 10px 2px;
  font-size: 0.85rem;
}

.login-panel input,
.login-panel button[type="submit"] {
  width: calc(100% - 20px);
  margin: 0 10px;
}

.login-panel input,
.step-card textarea,
.style-card select {
  border: 3px inset #fff;
  background: white;
  color: #080808;
}

.login-panel button[type="submit"],
.support-panel button,
.step-card button,
.share-row button,
.ring-controls button,
.hot-panel button,
.link-button,
.addressbar button,
.badge-button {
  border: 3px outset #fff;
  color: #00103e;
  background: linear-gradient(#fff, #bcbcbc);
  font-weight: 800;
}

.login-panel button[type="submit"]:active,
.support-panel button:active,
.step-card button:active,
.share-row button:active,
.ring-controls button:active,
.hot-panel button:active,
.link-button:active,
.addressbar button:active,
.badge-button:active {
  border-style: inset;
}

.link-button {
  display: block;
  width: calc(100% - 20px);
  margin: 8px auto 0;
  /* link-buttons sit inside dark navy panels — bright sky reads, #001dff did not */
  color: #6fd2ff;
  text-decoration: underline;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-align: center;
}

.counter-panel {
  position: relative;
}

.hit-counter {
  margin: 9px auto 4px;
  width: calc(100% - 22px);
  padding: 6px 5px;
  color: #8cff00;
  background: #050505;
  border: 3px inset #777;
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 0 8px #33ff00;
}

.tiny-monster {
  position: absolute;
  right: 14px;
  bottom: 8px;
  width: 38px;
  height: 28px;
  border-radius: 50% 45% 45% 50%;
  background: #76bd3a;
  border: 3px solid #111;
}

.tiny-monster span {
  position: absolute;
  background: white;
  border: 1px solid #111;
  border-radius: 50%;
}

.tiny-monster span:nth-child(1) {
  left: 8px;
  top: 7px;
  width: 7px;
  height: 7px;
}

.tiny-monster span:nth-child(2) {
  right: 8px;
  top: 7px;
  width: 7px;
  height: 7px;
}

.tiny-monster span:nth-child(3) {
  left: 15px;
  bottom: 5px;
  width: 12px;
  height: 4px;
  background: #ff2e2e;
  border-radius: 0 0 10px 10px;
}

.support-panel button {
  display: block;
  width: 70%;
  margin: 8px auto 0;
  color: #111;
  background: linear-gradient(#ffff78, #ffb400);
}

.hero-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 86px minmax(260px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 280px;
  padding: 14px;
  border: 5px ridge #f4c4ff;
  border-radius: 10px;
  background:
    radial-gradient(circle at 28% 42%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.75) 0 3px, transparent 4px),
    radial-gradient(circle at 52% 80%, rgba(255, 255, 255, 0.5) 0 2px, transparent 3px),
    linear-gradient(135deg, #6d008a, #29006d 42%, #1a0138 100%);
  background-size: 155px 110px, 180px 125px, 130px 150px, auto;
  box-shadow: inset 0 0 24px #ff5bff, 5px 6px 0 rgba(0, 0, 0, 0.5);
}

.comic-kicker {
  margin: 0 0 10px;
  color: var(--yellow);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  font-style: italic;
  text-transform: uppercase;
  text-shadow: 3px 3px #000, -1px -1px #26ff00;
}

.newspaper {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 558 / 474;
  margin: 0 auto;
  transform: rotate(-4deg);
  filter: drop-shadow(10px 13px 8px rgba(0, 0, 0, 0.5));
}

.newspaper-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.newspaper-front {
  position: absolute;
  inset: 17% 9% 15% 13%;
  min-height: 0;
  padding: 0;
  color: #111;
  background: transparent;
  border: 0;
}

.masthead {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  font-weight: 900;
  text-align: left;
}

.paper-rule {
  height: 3px;
  margin: 3px 0;
  border-top: 2px solid #111;
  border-bottom: 1px solid #111;
}

.date-line,
.paper-copy {
  margin: 0;
  font-size: 0.66rem;
  text-align: left;
}

.newspaper h2 {
  margin: 5px 88px 4px 0;
  color: #111;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 0.95;
  letter-spacing: 0;
  text-align: left;
}

.paper-photo {
  position: absolute;
  right: 2%;
  top: 18%;
  width: 27%;
  height: 44%;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.paper-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-arrow {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 112px;
}

.hero-arrow::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 16px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #fff200 0 12px, transparent 12px 22px);
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.45));
  opacity: 0.85;
  animation: arrowTrail 650ms steps(2, end) infinite;
}

.hero-arrow span {
  position: relative;
  z-index: 1;
  width: clamp(84px, 8vw, 132px);
  height: clamp(70px, 7vw, 112px);
  background: url("assets/yellow-arrow-generated.png") center / contain no-repeat;
  filter: drop-shadow(5px 7px 0 rgba(0, 0, 0, 0.48));
  animation: arrowPunch 900ms ease-in-out infinite;
}

.video-wrap {
  min-width: 0;
}

.fake-player {
  position: relative;
  min-height: 242px;
  overflow: hidden;
  border: 5px ridge #d9f2ff;
  border-radius: 8px;
  color: #111;
  background:
    linear-gradient(to bottom, #8fdcff 0 42%, #6573b8 43% 56%, #4e2c76 57% 100%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55);
}

.player-plate {
  position: absolute;
  inset: 0 0 38px;
  z-index: 0;
  width: 100%;
  height: calc(100% - 38px);
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.04);
  transition: filter 180ms ease;
}

.fake-player::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0 0 38px;
  z-index: 1;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(0, 0, 0, 0.24) 100%);
  mix-blend-mode: screen;
}

.fake-player .skyline,
.fake-player .balloons,
.fake-player .spotlight,
.fake-player .scene-prop,
.fake-player .meme-character {
  display: none;
}

.skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 43px;
  height: 74px;
}

.skyline span {
  position: absolute;
  bottom: 0;
  width: 36px;
  background: #1e2550;
  border: 2px solid #0c112c;
}

.skyline span:nth-child(1) {
  left: 8%;
  height: 42px;
}

.skyline span:nth-child(2) {
  left: 22%;
  height: 66px;
}

.skyline span:nth-child(3) {
  left: 48%;
  height: 54px;
}

.skyline span:nth-child(4) {
  left: 68%;
  height: 70px;
}

.skyline span:nth-child(5) {
  right: 7%;
  height: 46px;
}

.balloons span {
  position: absolute;
  top: 12px;
  width: 30px;
  height: 38px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: inset -5px -7px rgba(0, 0, 0, 0.2);
  animation: balloonBob 2100ms ease-in-out infinite;
}

.balloons span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 36px;
  width: 1px;
  height: 64px;
  background: #2d1c2f;
}

.balloons span:nth-child(1) {
  left: 22px;
  background: #3ef266;
}

.balloons span:nth-child(2) {
  left: 66px;
  animation-delay: -0.6s;
}

.balloons span:nth-child(3) {
  right: 26px;
  background: #ff982b;
  animation-delay: -1.2s;
}

.spotlight {
  position: absolute;
  left: 50%;
  bottom: 36px;
  width: 150px;
  height: 76px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), transparent 68%);
  animation: flicker 1300ms steps(2, end) infinite;
}

.scene-prop {
  position: absolute;
  left: 35px;
  bottom: 63px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #734400;
  background: #ffd21d;
  border: 4px solid #1b1100;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 1000;
  animation: propSpin 4s linear infinite;
}

.meme-character {
  position: absolute;
  left: 50%;
  bottom: 50px;
  width: 110px;
  height: 130px;
  transform: translateX(-50%);
  animation: mayorDance 900ms steps(2, end) infinite;
}

.meme-character .ears::before,
.meme-character .ears::after {
  content: "";
  position: absolute;
  top: 4px;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 42px solid #976d40;
  z-index: 1;
}

.meme-character .ears::before {
  left: 5px;
  transform: rotate(-18deg);
}

.meme-character .ears::after {
  right: 5px;
  transform: rotate(18deg);
}

.meme-character .face {
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 2;
  width: 86px;
  height: 76px;
  transform: translateX(-50%);
  border: 5px solid #1c1308;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 56%, #fff 0 6px, transparent 7px),
    radial-gradient(circle at 62% 56%, #fff 0 6px, transparent 7px),
    #c99756;
}

.meme-character .eye {
  position: absolute;
  top: 28px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111;
}

.meme-character .eye.left {
  left: 24px;
}

.meme-character .eye.right {
  right: 24px;
}

.meme-character .mouth {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 24px;
  height: 12px;
  transform: translateX(-50%);
  border: 3px solid #111;
  border-top: 0;
  border-radius: 0 0 20px 20px;
}

.meme-character .suit {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 88px;
  height: 62px;
  transform: translateX(-50%);
  background:
    linear-gradient(115deg, transparent 0 36%, #fff 37% 46%, transparent 47%),
    linear-gradient(245deg, transparent 0 36%, #fff 37% 46%, transparent 47%),
    #1a2c68;
  border: 5px solid #111;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

.speech-bubble {
  position: absolute;
  right: 14px;
  top: 42px;
  z-index: 2;
  max-width: min(190px, 42%);
  padding: 10px 12px;
  color: #0a0a0a;
  background: white;
  border: 4px solid #111;
  border-radius: 14px;
  font-weight: 1000;
  text-align: center;
  transform: rotate(-5deg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -18px;
  border-top: 18px solid #111;
  border-right: 18px solid transparent;
}

.caption-bar {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 43px;
  z-index: 2;
  min-height: 28px;
  padding: 5px 8px;
  color: white;
  background: rgba(0, 0, 0, 0.74);
  border: 2px solid rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px #000;
}

.player-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 34px 42px minmax(80px, 1fr) 50px 44px;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 4px 6px;
  background: linear-gradient(#f1f1f1, #b9b9b9);
  border-top: 3px ridge #fff;
}

.player-controls button {
  min-width: 0;
  height: 28px;
  border: 2px outset #fff;
  color: #111;
  background: #d5d5d5;
  font-weight: 900;
  font-size: 0.78rem;
}

.scrubber {
  height: 12px;
  padding: 0;
  border: 2px inset #fff;
  background: white;
  overflow: hidden;
  touch-action: none;
}

.scrubber span {
  display: block;
  width: 18%;
  height: 100%;
  background: linear-gradient(90deg, #1414ff, #00e7ff);
  transition: width 240ms ease;
}

.scrubber.is-scrubbing span,
.scrubber:focus-visible span {
  background: repeating-linear-gradient(90deg, #1414ff 0 8px, #00e7ff 8px 16px, #fff200 16px 22px);
}

.generation-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  color: var(--yellow);
  background: rgba(0, 0, 0, 0.74);
  text-align: center;
  font-family: var(--mono);
  text-shadow: 2px 2px #000;
}

.generation-overlay strong {
  font-size: clamp(1.4rem, 4vw, 2.5rem);
}

.fake-player.generating .generation-overlay {
  display: grid;
}

.fake-player.paused .meme-character,
.fake-player.paused .balloons span,
.fake-player.paused .spotlight,
.fake-player.paused .scene-prop,
.fake-player.paused + * {
  animation-play-state: paused;
}

.fake-player.muted {
  filter: saturate(0.7);
}

.cta-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 74px;
  padding: 10px;
  color: white;
  border: 5px ridge #e8f7ff;
  border-radius: 10px;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  /* full dark halo + drop so white labels stay legible over the bright tops of
     the lime/cyan/pink gradients (was a single drop that failed at the light band) */
  text-shadow: 1px 1px 0 #00113b, -1px 1px 0 #00113b, 1px -1px 0 #00113b, -1px -1px 0 #00113b, 3px 3px 0 #00113b;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.5);
  transition: transform 160ms ease, filter 160ms ease;
}

.cta span {
  min-width: 0;
}

.cta:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.14);
}

.cta:active {
  transform: translateY(1px);
}

.cta-pink {
  background: linear-gradient(#ff72ff, #b80087 54%, #85005d);
}

.cta-green {
  background: linear-gradient(#94ff50, #23b200 54%, #0b5b00);
}

.cta-blue {
  background: linear-gradient(#4ecbff, #075fe8 54%, #00187d);
}

/* C-2: the "🎲 Surprise me" roulette is the fastest path to a finished meme, so
   it gets a warmer, more inviting fill than the plain blue CTAs around it —
   still inside the retro chrome (beveled border + monospace inherited). */
.maker-surprise-cta {
  background: linear-gradient(#ffd76a, #ff8a2b 55%, #d43d00);
}
.maker-surprise-cta span {
  color: #2a0f00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hero-start {
  margin: 14px 0 4px;
}

.hero-start-cta {
  display: inline-flex;
  min-height: 56px;
  padding: 8px 22px;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
}

.hero-start-fine {
  margin: 8px 0 0;
  font-family: var(--mono, "Courier New", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  /* sits on the dark navy hero — #1c0d4f was dark-on-dark; light periwinkle reads */
  color: #b9cdff;
  text-transform: uppercase;
}

/* Two-lane hero: "Make a meme — free" (fun) beside "Deploy your AI meme agent"
   (SaaS), so a visitor reads both identities in one glance. */
.hero-start--dual {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.hero-lane {
  display: inline-flex;
  min-height: 56px;
  padding: 8px 22px;
  font-size: clamp(1rem, 2.1vw, 1.4rem);
}

.hero-start--dual .hero-start-fine {
  flex-basis: 100%;
  margin-top: 4px;
}

.cta b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 42px;
  min-height: 42px;
  padding: 4px;
  color: #020202;
  background: var(--yellow);
  border: 4px solid #111;
  border-radius: 50%;
  font-family: var(--ui);
  font-size: 0.82rem;
  transform: rotate(-13deg);
  text-shadow: none;
}

.cta-pink b,
.cta-blue b {
  width: 58px;
  height: 52px;
  min-width: 58px;
  min-height: 52px;
  padding: 0;
  color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
}

.cta-pink b {
  background-image: url("assets/go-burst-generated.png");
}

.cta-blue b {
  background-image: url("assets/upload-generated.png");
}

.how-panel {
  padding-bottom: 10px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.step-card {
  position: relative;
  min-height: 190px;
  padding: 10px 10px 12px 50px;
  color: #111;
  border: 3px ridge #fff;
  border-radius: 8px;
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.6);
}

.input-card {
  background: linear-gradient(135deg, #eef0ff, #ddd8ff);
}

.style-card {
  background: linear-gradient(135deg, #ffe3fa, #ffc4ed);
}

.output-card {
  background: linear-gradient(135deg, #e0ffd8, #bcff99);
}

.step-number {
  position: absolute;
  left: 10px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: white;
  border-radius: 50%;
  border: 3px solid #0b0b0b;
  background: linear-gradient(#2de4ff, #003ec7);
  font-size: 1.55rem;
  font-weight: 1000;
  box-shadow: 2px 2px 0 #fff;
}

.step-card h3 {
  margin: 0 0 8px;
  color: #0832a1;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 1px 1px #fff;
}

.step-card textarea {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 82px;
  padding: 8px;
}

.input-actions,
.share-row,
.quality-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.style-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.style-option {
  min-width: 0;
  min-height: 72px;
  padding: 4px;
  border: 3px outset #fff;
  background: linear-gradient(#fff, #dddddd);
  color: #111;
  font-size: 0.72rem;
}

.style-option.active {
  color: white;
  background: linear-gradient(#005eff, #041b7e);
  border-style: inset;
}

.style-option .thumb {
  display: grid;
  place-items: center;
  min-height: 54px;
  margin-bottom: 3px;
  border: 2px solid #222;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.55), transparent),
    #ffd24c;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(0.7rem, 1.4vw, 1rem);
  overflow: hidden;
  text-indent: -999px;
}

.style-option.active .thumb {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px #001b7f;
}

.style-option[data-style="doge"] .thumb {
  background-image: url("assets/thumb-doge.png");
}

.style-option[data-style="rickroll"] .thumb {
  background-image: url("assets/thumb-rickroll.png");
}

.style-option[data-style="nyan"] .thumb {
  background-image: url("assets/thumb-nyan.png");
}

.style-option[data-style="vapor"] .thumb {
  background-image: url("assets/thumb-vapor.png");
}

.style-card select {
  width: 100%;
  min-height: 30px;
}

.output-card button,
.share-row button,
.input-actions button {
  min-height: 32px;
  padding: 4px 10px;
}

.output-card #generateButton {
  width: 100%;
  min-height: 54px;
  color: #071900;
  background: linear-gradient(#fff990, #ffd500 42%, #ff8b00);
  text-transform: uppercase;
}

.quality-row input {
  min-width: 120px;
  flex: 1;
}

#generationNote {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 0.9rem;
}

.story-output {
  padding-bottom: 12px;
}

.story-output ol {
  margin: 10px 18px 8px 34px;
  padding: 0;
  color: #111;
  background: #fffbd9;
  border: 3px inset #fff;
}

.story-output li {
  padding: 7px 8px;
  border-bottom: 1px dashed #777;
  font-weight: 800;
}

.story-output li:last-child {
  border-bottom: 0;
}

.share-row {
  padding: 0 10px;
}

.meme-maker-panel,
.hof-panel,
.trend-panel,
.agent-panel {
  margin-top: 10px;
}

.meme-maker-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(280px, 1.05fr);
  gap: 10px;
  padding: 10px;
}

.maker-preview,
.maker-controls {
  min-width: 0;
}

.maker-canvas-shell {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 10px;
  border: 4px inset #fff;
  background:
    linear-gradient(45deg, rgba(0, 0, 0, 0.12) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.12) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.12) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.12) 75%),
    #f4f4f4;
  background-position: 0 0, 14px 14px, 0 0;
  background-size: 28px 28px;
}

#memeCanvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border: 5px ridge #e9f7ff;
  background: #111;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, 0.42);
}

.maker-actions,
.maker-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.maker-actions button,
.maker-upload-button,
.maker-upload-row button {
  min-height: 34px;
  padding: 6px 10px;
  border: 3px outset #fff;
  color: #111;
  background: linear-gradient(#fffaa8, #ffc400);
  font-weight: 900;
}

.maker-controls {
  display: grid;
  gap: 9px;
  padding: 10px;
  color: #111;
  border: 4px ridge #fff;
  background: linear-gradient(135deg, #ddf7ff, #ffddfb 56%, #fff7b8);
}

.maker-controls label {
  display: block;
  margin-bottom: 3px;
  color: #071566;
  font-weight: 900;
}

.maker-controls textarea,
.maker-controls input,
.maker-controls select {
  width: 100%;
  min-height: 34px;
  padding: 7px;
  border: 3px inset #fff;
  background: white;
  color: #111;
  font-weight: 800;
}

.maker-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.maker-template-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.maker-template {
  min-width: 0;
  min-height: 86px;
  padding: 5px;
  border: 3px outset #fff;
  color: #111;
  background: linear-gradient(#ffffff, #d5d5d5);
}

.maker-template.active {
  color: white;
  background: linear-gradient(#0f64ff, #061563);
  border-style: inset;
}

.maker-template span {
  display: grid;
  place-items: center;
  min-height: 44px;
  margin-bottom: 4px;
  border: 2px solid #111;
  color: white;
  background: linear-gradient(135deg, #ff00c8, #00b7ff);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.1rem;
  text-shadow: 2px 2px #000;
}

.maker-template[data-template="doge"] span {
  background-image: url("assets/thumb-doge.png");
  background-size: cover;
  color: transparent;
}

.maker-template[data-template="cat"] span {
  background-image: url("assets/vault-cat.png");
  background-size: cover;
  color: transparent;
}

.maker-template[data-template="troll"] span {
  background-image: url("assets/vault-troll.png");
  background-size: cover;
  color: transparent;
}

.maker-template[data-template="frog"] span {
  background-image: url("assets/vault-frog.png");
  background-size: cover;
  color: transparent;
}

.maker-template strong {
  display: block;
  font-size: 0.72rem;
}

.format-library-tools {
  display: grid;
  gap: 5px;
}

.format-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.format-search-row span {
  min-width: 92px;
  padding: 7px;
  color: white;
  background: #061563;
  border: 2px inset #fff;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.format-library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-height: 306px;
  overflow: auto;
  padding: 6px;
  border: 3px inset #fff;
  background: rgba(255, 255, 255, 0.54);
  -webkit-overflow-scrolling: touch;
}

.format-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 112px;
  padding: 30px 6px 7px;
  color: #111;
  border: 3px outset #fff;
  background: linear-gradient(#ffffff, #dbeafe);
  text-align: left;
}

.format-card.active {
  color: white;
  background: linear-gradient(#005eff, #061563);
  border-style: inset;
}

.format-card-year {
  position: absolute;
  left: 5px;
  top: 5px;
  padding: 3px 5px;
  color: #fff;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.72);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 900;
}

.format-card strong,
.format-card small,
.format-card em {
  min-width: 0;
}

.format-card strong {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.format-card small {
  color: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
}

.format-card em {
  color: inherit;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-style: normal;
  opacity: 0.78;
}

.maker-note {
  margin: 0;
  padding: 6px 8px;
  color: #111;
  background: rgba(255, 255, 255, 0.72);
  border: 2px inset #fff;
  font-family: var(--mono);
  font-size: 0.82rem;
}

.format-archive {
  padding: 0 10px 12px;
}

.format-library-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
  align-items: end;
  gap: 10px;
  margin: 2px 0 10px;
  padding: 9px 10px;
  color: #111;
  background:
    linear-gradient(90deg, #fffbd1, #dff7ff 56%, #ffdff5),
    #fffbd1;
  border: 3px ridge #fff;
}

.format-eyebrow {
  margin: 0 0 2px;
  color: #061563;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.format-archive h3 {
  margin: 0;
  color: #061563;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.format-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.format-stats span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 5px;
  color: white;
  background: linear-gradient(180deg, #0c6eff, #061563);
  border: 2px solid #111;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.format-stats strong {
  display: block;
  color: var(--yellow);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.28rem;
  line-height: 0.95;
  text-shadow: 2px 2px #00113b;
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}

.format-card.hof-card {
  display: grid;
  grid-template-rows: auto auto minmax(54px, 1fr) auto;
  min-height: 184px;
  padding: 9px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent 58%),
    linear-gradient(135deg, #ffffff, #d2e6ff);
}

.format-card.hof-card:nth-child(4n + 2) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 58%),
    linear-gradient(135deg, #fff0fb, #ffd1ed);
}

.format-card.hof-card:nth-child(4n + 3) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 58%),
    linear-gradient(135deg, #efffdc, #c5ff99);
}

.format-card.hof-card:nth-child(4n) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 58%),
    linear-gradient(135deg, #fff9d5, #ffd16f);
}

.format-card .format-tag {
  justify-self: start;
  max-width: 100%;
  margin-bottom: 7px;
  padding: 4px 6px;
  overflow: hidden;
  color: white;
  background: #061563;
  border: 2px solid #111;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.format-card.hof-card strong {
  min-height: 2.08em;
  margin-bottom: 6px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.format-card.hof-card p {
  margin-bottom: 8px;
  font-size: 0.86rem;
  line-height: 1.22;
}

.format-card.hof-card small {
  align-self: end;
  padding-top: 6px;
  border-top: 1px dashed rgba(6, 21, 99, 0.42);
  font-size: 0.72rem;
}

.hof-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: #111;
  background: linear-gradient(90deg, #fffbd1, #ddf4ff);
  border-bottom: 3px ridge #fff;
}

.hof-summary p {
  margin: 0;
  font-weight: 800;
}

.hof-summary button {
  min-height: 36px;
  color: #111;
  background: linear-gradient(#b8ff7e, #17ad00);
}

.hof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.hof-card {
  position: relative;
  min-height: 172px;
  padding: 44px 9px 9px;
  color: #111;
  border: 3px ridge #fff;
  border-radius: 8px;
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.85) 0 12px, transparent 13px),
    linear-gradient(135deg, #ffffff, #d2e6ff);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.65);
  cursor: pointer;
}

.hof-card:nth-child(3n + 2) {
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.85) 0 12px, transparent 13px),
    linear-gradient(135deg, #fff0fb, #ffd1ed);
}

.hof-card:nth-child(3n) {
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.85) 0 12px, transparent 13px),
    linear-gradient(135deg, #efffdc, #c5ff99);
}

.hof-card:hover,
.hof-card:focus-within {
  outline: 3px solid var(--yellow);
  transform: translateY(-2px);
}

.hof-year {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 5px 7px;
  color: white;
  background: #061563;
  border: 2px solid #111;
  font-family: var(--mono);
  font-weight: 1000;
}

.hof-card strong {
  display: block;
  margin-bottom: 7px;
  color: #061563;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hof-card p {
  margin: 0 0 8px;
  font-weight: 800;
}

.hof-card small {
  display: block;
  color: #343434;
  font-family: var(--mono);
  line-height: 1.25;
}

.trend-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.72fr);
  gap: 10px;
  padding: 10px;
}

.trend-stack {
  display: grid;
  gap: 8px;
}

.trend-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 4px 10px;
  min-height: 74px;
  padding: 8px;
  color: #111;
  border: 3px ridge #fff;
  background: linear-gradient(135deg, #fff, #fff3b9);
  text-align: left;
}

.trend-item span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  color: white;
  background: #e6007e;
  border: 2px solid #111;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.trend-item:nth-child(2) span {
  background: #004bda;
}

.trend-item:nth-child(3) span {
  background: #128500;
}

.trend-item:nth-child(4) span {
  background: #6d6d6d;
}

.trend-item strong,
.trend-item small {
  min-width: 0;
}

.trend-item strong {
  font-size: 1.02rem;
}

.trend-item small {
  color: #333;
  font-weight: 800;
  line-height: 1.25;
}

.trend-playbook {
  min-width: 0;
  padding: 10px;
  color: #dfffe5;
  border: 4px inset #fff;
  background: #04140a;
  font-family: var(--mono);
}

.trend-playbook h3 {
  margin: 0 0 8px;
  color: var(--yellow);
  font-size: 1rem;
  text-transform: uppercase;
}

.trend-playbook ol {
  margin: 0 0 0 22px;
  padding: 0;
}

.trend-playbook li {
  margin-bottom: 8px;
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.agent-lab {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(300px, 1.28fr);
  gap: 10px;
  padding: 10px;
}

.agent-controls,
.agent-console {
  min-width: 0;
  padding: 10px;
  border: 4px ridge #fff;
}

.agent-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  color: #111;
  background: linear-gradient(135deg, #fffbd1, #dff7ff 52%, #ffdff5);
}

.agent-field {
  min-width: 0;
}

.agent-field--wide,
.agent-run-row {
  grid-column: 1 / -1;
}

.agent-controls label {
  display: block;
  margin-bottom: 3px;
  color: #061563;
  font-weight: 900;
}

.agent-controls input,
.agent-controls textarea,
.agent-controls select {
  width: 100%;
  min-height: 34px;
  padding: 7px;
  border: 3px inset #fff;
  background: white;
  color: #111;
  font-weight: 800;
}

.agent-controls textarea {
  min-height: 88px;
  resize: vertical;
}

.agent-run-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agent-run-row button {
  min-height: 38px;
  padding: 7px 10px;
  border: 3px outset #fff;
  color: #111;
  background: linear-gradient(#b8ff7e, #17ad00);
  font-weight: 1000;
}

.agent-run-row button:disabled {
  color: #555;
  background: linear-gradient(#eee, #aaa);
  cursor: wait;
}

.agent-console {
  color: #dfffe5;
  background: #04140a;
  font-family: var(--mono);
}

.agent-chat-log {
  display: grid;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding: 8px;
  border: 2px inset #fff;
  background: #020b05;
}

.agent-message {
  max-width: 92%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}

.agent-message strong {
  display: block;
  color: var(--yellow);
  font-size: 0.74rem;
}

.agent-message p {
  margin: 4px 0 0;
  line-height: 1.35;
}

.agent-message--user {
  justify-self: end;
  color: #04140a;
  background: #b8ff7e;
}

.agent-message--user strong {
  color: #061563;
}

.agent-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  margin-top: 8px;
}

.agent-chat-form input {
  min-width: 0;
  min-height: 34px;
  padding: 7px;
  border: 2px inset #fff;
  font-weight: 800;
}

.agent-chat-form button {
  min-height: 34px;
  padding: 6px 8px;
  border: 3px outset #fff;
  color: #111;
  background: linear-gradient(#b8ff7e, #17ad00);
  font-weight: 1000;
}

.agent-trends {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.agent-trends__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--yellow);
}

.agent-trends__header span {
  padding: 3px 6px;
  color: #061563;
  background: #7cffc4;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.agent-trend-card {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 8px;
  border: 2px outset #fff;
  color: #111;
  background: linear-gradient(135deg, #fffbd1, #dff7ff);
  text-align: left;
}

.agent-trend-card:hover,
.agent-trend-card:focus-visible {
  outline: 3px solid var(--yellow);
}

.agent-trend-card span,
.agent-trend-card small {
  color: #061563;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.agent-trend-card strong {
  color: #061563;
  font-size: 0.9rem;
  line-height: 1.05;
}

.agent-trend-card p,
.agent-trend-card em {
  margin: 0;
  color: #111;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.agent-status {
  min-height: 34px;
  margin-top: 8px;
  padding: 8px;
  border: 2px inset #fff;
  color: var(--yellow);
  background: #001b0a;
  font-weight: 900;
}

.agent-brief {
  margin-top: 8px;
  padding: 8px;
  border: 2px solid rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.08);
}

.agent-brief strong {
  color: #ffffff;
}

.agent-brief p {
  margin: 6px 0;
  line-height: 1.3;
}

.agent-provider-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.agent-provider-row span {
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-provider-row .on {
  color: #061563;
  background: #7cffc4;
}

.agent-provider-row .off {
  color: #fff;
  background: #6d6d6d;
}

.agent-evidence {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.agent-evidence p {
  margin: 0;
  font-size: 0.68rem;
}

.agent-evidence span {
  display: block;
  color: #7cffc4;
  overflow-wrap: anywhere;
}

.agent-candidate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

.agent-candidate {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 420px;
  padding: 34px 10px 10px;
  border: 3px outset #fff;
  color: #111;
  background: linear-gradient(135deg, #ffffff, #dfffea);
  text-align: left;
}

.agent-candidate:first-child .agent-meme-preview {
  max-height: 560px;
}

.agent-meme-preview {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  border: 1px solid rgba(17, 24, 39, 0.24);
  border-radius: 6px;
  background: #111827;
}

.agent-taste-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.agent-taste-row i {
  padding: 3px 6px;
  color: #0f1512;
  border-radius: 999px;
  background: #b8ff7e;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.agent-candidate:hover,
.agent-candidate:focus-visible {
  outline: 3px solid var(--yellow);
}

.agent-candidate__rank,
.agent-score {
  justify-self: start;
  padding: 3px 6px;
  color: #fff;
  background: #061563;
  border: 1px solid #111;
  font-size: 0.68rem;
  font-weight: 1000;
}

.agent-candidate__rank {
  position: absolute;
  left: 6px;
  top: 6px;
}

.agent-score {
  align-self: end;
  background: #128500;
}

.agent-candidate strong {
  color: #061563;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.agent-candidate small,
.agent-candidate em {
  color: #222;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.agent-candidate b {
  display: block;
  padding: 5px 6px;
  color: white;
  background: #111;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.agent-candidate.policy-warn {
  background: linear-gradient(135deg, #fff, #fff3b9);
}

.agent-candidate.policy-review {
  background: linear-gradient(135deg, #fff, #ffd1ed);
}

.agent-candidate.policy-block {
  color: #fff;
  background: linear-gradient(135deg, #3b0a0a, #8b0000);
}

.agent-candidate.policy-block strong,
.agent-candidate.policy-block small,
.agent-candidate.policy-block em {
  color: #fff;
}

.agent-empty {
  margin: 8px 0 0;
  padding: 8px;
  color: #111;
  background: #fffbd1;
  border: 2px inset #fff;
  font-weight: 900;
}

.agent-workbench {
  padding: 0;
  overflow: hidden;
  color: #171717;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  background: #f6f7f8;
  box-shadow: 0 18px 42px rgba(7, 20, 88, 0.24);
}

.agent-workbench h2 {
  margin: 0;
  padding: 14px 16px;
  color: #111827;
  border-bottom: 1px solid #d5d7da;
  background: #ffffff;
  font-family: var(--ui);
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
}

.agent-workbench .agent-lab {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.agent-workbench .agent-controls,
.agent-workbench .agent-console {
  border: 0;
  border-radius: 0;
}

.agent-workbench .agent-controls {
  align-content: start;
  padding: 16px;
  border-right: 1px solid #d5d7da;
  background: #fbfbfc;
}

.agent-workbench .agent-controls label {
  color: #374151;
  font-size: 0.78rem;
  text-transform: none;
}

.agent-workbench .agent-controls input,
.agent-workbench .agent-controls textarea,
.agent-workbench .agent-controls select,
.agent-workbench .agent-chat-form input,
.agent-workbench .agent-chat-form textarea,
.agent-context-composer input,
.agent-context-composer textarea {
  border: 1px solid #c9ced6;
  border-radius: 6px;
  background: #ffffff;
  color: #111827;
  font-weight: 700;
}

.agent-workbench .agent-run-row button,
.agent-workbench .agent-chat-form button {
  border: 1px solid #111827;
  border-radius: 6px;
  color: #ffffff;
  background: #111827;
  font-weight: 800;
}

.agent-workbench .agent-run-row button:hover,
.agent-workbench .agent-chat-form button:hover {
  background: #243043;
}

.agent-workbench .agent-run-row button:disabled,
.agent-workbench .agent-chat-form button:disabled {
  color: #6b7280;
  border-color: #d1d5db;
  background: #e5e7eb;
}

.agent-workbench .agent-console {
  min-height: 620px;
  padding: 16px;
  color: #dff5e7;
  background: #0f1512;
  font-family: var(--ui);
}

.agent-workbench .agent-chat-log {
  max-height: 260px;
  border: 1px solid rgba(223, 245, 231, 0.18);
  border-radius: 8px;
  background: #0a0f0d;
}

.agent-workbench .agent-chat-log.is-dragging,
.agent-workbench .agent-chat-form.is-dragging {
  outline: 3px solid #8df7bd;
  outline-offset: 2px;
}

.agent-context-composer.is-dragging,
.agent-chat-form.is-dragging {
  outline: 3px solid #8df7bd;
  outline-offset: 2px;
}

.agent-workbench .agent-message {
  border: 1px solid rgba(223, 245, 231, 0.16);
  border-radius: 8px;
  background: #151d19;
}

.agent-workbench .agent-message strong,
.agent-workbench .agent-trends__header {
  color: #8df7bd;
}

.agent-workbench .agent-message--user {
  color: #0f1512;
  background: #c7f9d4;
}

.agent-workbench .agent-message--user strong {
  color: #111827;
}

.agent-workbench .agent-chat-form {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.agent-workbench .agent-chat-form textarea {
  min-height: 46px;
  resize: vertical;
}

.agent-workbench .agent-trends__header span,
.agent-workbench .agent-provider-row .on {
  color: #0f1512;
  border-radius: 999px;
  background: #8df7bd;
}

.agent-workbench .agent-trend-card,
.agent-workbench .agent-candidate {
  border: 1px solid #d6dde5;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.agent-workbench .agent-meme-preview {
  border-color: #cbd5e1;
}

.agent-workbench .agent-trend-card:hover,
.agent-workbench .agent-trend-card:focus-visible,
.agent-workbench .agent-candidate:hover,
.agent-workbench .agent-candidate:focus-visible {
  outline: 3px solid #8df7bd;
}

.agent-workbench .agent-trend-card strong,
.agent-workbench .agent-trend-card span,
.agent-workbench .agent-trend-card small,
.agent-workbench .agent-candidate strong {
  color: #111827;
}

.agent-workbench .agent-status,
.agent-workbench .agent-brief,
.agent-workbench .agent-empty {
  border: 1px solid rgba(223, 245, 231, 0.18);
  border-radius: 8px;
  color: #dff5e7;
  background: #101a15;
}

.agent-workbench .agent-candidate b {
  border-radius: 6px;
  background: #111827;
}

.operator-intel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.operator-intel-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(223, 245, 231, 0.18);
  border-radius: 8px;
  background: #151d19;
}

.operator-intel-card span,
.operator-intel-card small {
  display: block;
  color: #b7c8bf;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.operator-intel-card strong {
  display: block;
  margin: 3px 0;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-transform: capitalize;
}

.operator-intel-card.ok {
  border-color: rgba(141, 247, 189, 0.35);
}

.operator-intel-card.warning {
  border-color: rgba(251, 191, 36, 0.48);
  background: #211b0d;
}

.operator-signal-strip,
.operator-library-panel,
.agent-context-composer {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(223, 245, 231, 0.18);
  border-radius: 8px;
  background: #0a0f0d;
}

.operator-signal-strip__header,
.operator-library-panel header,
.agent-context-composer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.operator-signal-strip__header strong,
.operator-library-panel h3,
.agent-context-composer h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 0.95rem;
}

.operator-signal-strip__header span,
.operator-library-panel header > strong,
.agent-context-composer header > span {
  color: #0f1512;
  border-radius: 999px;
  background: #8df7bd;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.agent-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
  gap: 8px;
}

.agent-context-composer label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #b7c8bf;
  font-size: 0.72rem;
  font-weight: 900;
}

.agent-context-note {
  margin-top: 8px;
}

.agent-context-composer textarea {
  min-height: 86px;
  resize: vertical;
}

.agent-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.agent-attachment-chip {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  max-width: 272px;
  min-height: 54px;
  padding: 6px;
  border: 1px solid #d6dde5;
  border-radius: 8px;
  color: #111827;
  background: #ffffff;
  text-align: left;
}

.agent-attachment-chip img,
.agent-attachment-icon {
  width: 44px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  background: #111827;
}

.agent-attachment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8df7bd;
  font-size: 0.68rem;
  font-weight: 1000;
}

.agent-attachment-icon--video {
  color: #bae6fd;
  background: #082f49;
}

.agent-attachment-icon--audio {
  color: #fef08a;
  background: #713f12;
}

.agent-attachment-icon--pdf {
  color: #fecaca;
  background: #7f1d1d;
}

.agent-attachment-icon--document {
  color: #d8b4fe;
  background: #581c87;
}

.agent-attachment-icon--text {
  color: #bbf7d0;
  background: #14532d;
}

.agent-attachment-copy {
  min-width: 0;
}

.agent-attachment-chip strong,
.agent-attachment-chip small {
  display: block;
  overflow: hidden;
  color: #111827;
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-attachment-chip small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #536071;
}

.agent-attachment-type {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #111827;
  background: #f8fafc;
  font-size: 0.62rem;
  font-weight: 1000;
  line-height: 1.25;
}

.agent-context-brief {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(141, 247, 189, 0.28);
  border-radius: 8px;
  background: rgba(141, 247, 189, 0.08);
}

.agent-context-brief > span,
.agent-context-brief small {
  color: #8df7bd;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-context-brief .agent-context-warning {
  color: #fbbf24;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.agent-context-brief p {
  margin: 0;
}

.agent-context-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.agent-context-tags em {
  padding: 3px 6px;
  border-radius: 999px;
  color: #0f1512;
  background: #dff5e7;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.operator-signal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.operator-signal-card,
.operator-library-card {
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 9px;
  border: 1px solid #d6dde5;
  border-radius: 8px;
  color: #111827;
  background: #ffffff;
  text-align: left;
}

.operator-signal-card:hover,
.operator-signal-card:focus-visible,
.operator-library-card:hover,
.operator-library-card:focus-visible {
  outline: 3px solid #8df7bd;
}

.operator-signal-card span,
.operator-library-card span,
.operator-library-card em {
  color: #4b5563;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.operator-signal-card strong,
.operator-library-card strong {
  color: #111827;
  font-size: 0.9rem;
  line-height: 1.08;
}

.operator-signal-card small,
.operator-library-card small {
  color: #273142;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.operator-library-search {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.operator-library-search label {
  color: #b7c8bf;
  font-size: 0.72rem;
  font-weight: 900;
}

.operator-library-search input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #c9ced6;
  border-radius: 6px;
  padding: 7px;
  color: #111827;
  background: #ffffff;
  font-weight: 750;
}

.operator-library-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  padding-right: 3px;
}

.operator-library-card.active {
  border-color: #8df7bd;
  box-shadow: 0 0 0 2px rgba(141, 247, 189, 0.22);
}

.agent-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.agent-run-meta span,
.agent-candidate__policy {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #0f1512;
  background: #8df7bd;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.agent-warning-list,
.agent-reason-list {
  display: grid;
  gap: 4px;
  margin: 8px 0;
}

.agent-warning-list p,
.agent-reason-list p {
  margin: 0;
  padding: 6px 7px;
  border-radius: 6px;
  color: #f8fafc;
  background: rgba(251, 191, 36, 0.16);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
}

.agent-reason-list p {
  color: #273142;
  background: #eef2f7;
}

.agent-candidate__policy {
  position: absolute;
  top: 6px;
  right: 6px;
  max-width: calc(100% - 74px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-evidence em {
  display: block;
  color: #dff5e7;
  font-style: normal;
  opacity: 0.82;
}

.agent-workbench .agent-candidate.policy-warn {
  border-left: 5px solid #d97706;
  background: #fffaf0;
}

.agent-workbench .agent-candidate.policy-review {
  border-left: 5px solid #db2777;
  background: #fff5fb;
}

.agent-workbench .agent-candidate.policy-block {
  border-left: 5px solid #ef4444;
  color: #f8fafc;
  background: #2a1212;
}

.agent-workbench .agent-candidate.policy-block strong,
.agent-workbench .agent-candidate.policy-block small,
.agent-workbench .agent-candidate.policy-block em,
.agent-workbench .agent-candidate.policy-block .agent-reason-list p {
  color: #f8fafc;
}

.agent-workbench .agent-candidate.policy-block .agent-reason-list p {
  background: rgba(239, 68, 68, 0.24);
}

.agent-candidate.is-gated .agent-candidate__policy {
  color: #ffffff;
  background: #b91c1c;
}

.agent-action-row button:disabled {
  color: #6b7280;
  border-color: #d1d5db;
  background: #e5e7eb;
  cursor: not-allowed;
}

.operator-console {
  border-color: #c8d0d9;
  background: #f4f6f8;
}

.operator-console__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #d5dbe3;
  background: #ffffff;
}

.operator-console__header h2 {
  padding: 0;
  border: 0;
}

.operator-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #556070;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.operator-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 6px;
}

.operator-status-grid span,
.agent-format-radar span,
.agent-quality-bar span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #111827;
  background: #f8fafc;
  font-size: 0.72rem;
  font-weight: 850;
}

.operator-console .agent-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operator-console .agent-candidate {
  min-height: 0;
  padding-bottom: 12px;
}

.agent-format-radar,
.agent-quality-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.agent-format-radar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.agent-format-radar strong {
  grid-column: 1 / -1;
}

.agent-format-radar span {
  justify-content: space-between;
  gap: 8px;
  background: #111827;
  color: #f8fafc;
}

.agent-format-radar span b,
.agent-format-radar span em {
  color: inherit;
  font-size: 0.72rem;
  font-style: normal;
}

.agent-quality-bar span {
  max-width: 100%;
  color: #dff5e7;
  border-color: rgba(141, 247, 189, 0.36);
  background: #16231d;
}

.agent-action-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.agent-action-row button {
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #111827;
  background: #f8fafc;
  font-size: 0.76rem;
  font-weight: 850;
}

.agent-action-row button:hover,
.agent-action-row button:focus-visible {
  border-color: #111827;
  background: #e9eef5;
}

.agent-candidate.is-approved {
  border-color: #22c55e;
}

.agent-candidate.is-rejected {
  opacity: 0.58;
}

@media (max-width: 920px) {
  .agent-workbench .agent-lab,
  .agent-workbench .agent-chat-form,
  .agent-workbench .agent-run-row {
    grid-template-columns: 1fr;
  }

  .agent-workbench .agent-controls {
    border-right: 0;
    border-bottom: 1px solid #d5d7da;
  }

  .agent-workbench .agent-console {
    min-height: 0;
  }

  .operator-console__header,
  .operator-status-grid,
  .operator-intel-grid,
  .agent-context-grid,
  .agent-action-row {
    grid-template-columns: 1fr;
  }

  .operator-console__header {
    display: grid;
  }
}

.agent-grid article {
  min-width: 0;
  min-height: 178px;
  padding: 9px;
  color: #111;
  border: 3px ridge #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #dfffea);
}

.agent-grid article span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  color: white;
  background: #061563;
  border: 2px solid #111;
  font-weight: 1000;
}

.agent-grid article strong {
  display: block;
  color: #061563;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.agent-grid article p {
  margin: 7px 0 0;
  font-weight: 800;
  line-height: 1.25;
}

.pricing-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.pricing-strip div {
  min-width: 0;
  padding: 9px;
  color: #111;
  border: 3px outset #fff;
  background: linear-gradient(#ffffb6, #ffcc37);
  text-align: center;
}

.pricing-strip strong,
.pricing-strip span {
  display: block;
}

.pricing-strip strong {
  color: #001b7f;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hot-panel {
  border-color: #fff0aa;
  background: linear-gradient(#fffde5, #fff8c7);
  color: #111;
}

.hot-panel h2 {
  background: #040404;
  color: #ffea00;
}

.hot-panel ul {
  margin: 8px;
  padding: 0;
  list-style: none;
}

.hot-panel li {
  border-bottom: 1px dotted #aaa;
}

.hot-panel li:last-child {
  border-bottom: 0;
}

.hot-panel li button {
  position: relative;
  width: 100%;
  min-height: 35px;
  padding: 5px 4px 5px 54px;
  color: #001dcb;
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: underline;
  font-weight: 700;
}

.hot-panel li button::before {
  content: "NEW!";
  position: absolute;
  left: 6px;
  top: 8px;
  color: var(--red);
  font-weight: 1000;
  text-decoration: none;
  animation: blink 700ms steps(2, end) infinite;
}

.hot-panel li:nth-child(n + 4) button::before {
  content: ">";
  color: #2ca700;
  animation: none;
}

.hot-panel li button:hover {
  background: #fff29d;
}

.webring-panel,
.email-panel,
.vault-panel {
  text-align: center;
}

.globe {
  width: 72px;
  height: 66px;
  margin: 9px auto 2px;
  border: 0;
  background: url("assets/globe-generated.png") center / contain no-repeat;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.38));
  animation: catFloat 2500ms ease-in-out infinite;
}

.ring-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px;
}

.ring-controls button:nth-child(3) {
  grid-column: 1 / -1;
}

.email-panel a,
.vault-panel .link-button {
  color: #72eaff;
  font-weight: 800;
}

.email-panel::before {
  content: "";
  display: block;
  width: 76px;
  height: 56px;
  margin: 8px auto 0;
  background: url("assets/email-generated.png") center / contain no-repeat;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.35));
}

.vault-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px;
}

.vault-grid button {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 3px ridge #e7f7ff;
  color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0.78rem;
  font-weight: 1000;
  overflow: hidden;
  text-shadow: none;
}

.vault-grid button::after {
  content: attr(data-label);
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  padding: 2px 1px;
  color: white;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-family: var(--mono);
  font-size: 0.62rem;
  text-shadow: 1px 1px #000;
}

.vault-grid button[data-vault="troll"] {
  background-image: url("assets/vault-troll.png");
}

.vault-grid button[data-vault="cat"] {
  background-image: url("assets/vault-cat.png");
}

.vault-grid button[data-vault="baby"] {
  background-image: url("assets/vault-kid.png");
}

.vault-grid button[data-vault="frog"] {
  background-image: url("assets/vault-frog.png");
}

.fireline {
  height: 42px;
  margin: 9px 0 0;
  border-bottom: 3px solid #fffc00;
  background: url("assets/fireline-generated.png") left bottom / auto 100% repeat-x;
  animation: fireDance 380ms steps(2, end) infinite;
}

.bottom-marquee {
  overflow: hidden;
  margin-top: 0;
  border: 4px ridge #c9fbff;
  background: #050505;
}

.bottom-marquee div {
  width: max-content;
  padding: 7px 0;
  color: #00ff40;
  font-family: var(--mono);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 1000;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #00ff40;
  animation: marquee 16s linear infinite;
}

.badge-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.badge {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  min-height: 68px;
  padding: 6px;
  color: #111;
  border: 3px ridge #e6f7ff;
  background: linear-gradient(#fff, #d7d7d7);
  text-align: center;
}

.badge strong,
.badge small {
  min-width: 0;
}

.badge small {
  display: block;
  font-size: 0.77rem;
}

.badge-button {
  position: relative;
  width: 100%;
}

.construction-badge {
  position: relative;
}

.construction-badge::after,
.badge-button[data-progress]::after {
  content: attr(data-progress);
  position: absolute;
  right: 6px;
  bottom: 4px;
  color: #001b7f;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 900;
}

.construction-badge.bump .barrier {
  animation: barrierWork 520ms steps(3, end);
}

.crt-icon {
  display: block;
  width: 42px;
  height: 35px;
  margin: auto;
  border: 5px solid #222;
  background: radial-gradient(circle, #64ffb4, #005d53);
  box-shadow: inset 0 0 10px #fff;
}

.netscape-badge span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: auto;
  color: white;
  background: linear-gradient(135deg, #005a68, #002e63);
  border: 3px outset #fff;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 900;
}

.barrier {
  display: block;
  width: 58px;
  height: 48px;
  margin: auto;
  border: 0;
  background: url("assets/construction-generated.png") center / contain no-repeat;
}

.tiny-smile {
  display: block;
  width: 42px;
  height: 42px;
  margin: auto;
  border-radius: 50%;
  border: 4px solid #111;
  background: radial-gradient(circle at 35% 35%, white 0 3px, transparent 4px), #fff200;
}

.statusbar {
  justify-content: space-between;
  min-height: 28px;
  padding: 2px 8px;
  border-left: 2px solid #eee;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
}

.statusbar #statusText {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-progress {
  flex: 0 0 min(170px, 28vw);
  height: 12px;
  margin-inline: 8px;
  border: 2px inset #fff;
  background: #f2f2f2;
  overflow: hidden;
}

.status-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #001b7f 0 8px, #00d5ff 8px 16px);
  transition: width 160ms ease;
}

.security-indicator {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: 16px auto;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 1px 6px;
  border: 2px inset #fff;
  background: #d7d7d7;
  font-size: 0.78rem;
}

.security-indicator::before {
  content: "";
  width: 12px;
  height: 10px;
  border: 2px solid #111;
  border-top: 0;
  background: #efefef;
  box-shadow: 0 -5px 0 -2px #111;
}

body.security-locked .security-indicator::before {
  background: #ffdd27;
  box-shadow: 0 -7px 0 -2px #111;
}

.component-bar {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.component-bar button {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 2px outset #fff;
  color: white;
  background: linear-gradient(135deg, #004c5a, #001b7f);
  font-family: Georgia, serif;
  font-size: 0.78rem;
  font-weight: 900;
}

.component-bar button:active {
  border-style: inset;
}

.retro-modal {
  width: min(620px, calc(100vw - 30px));
  padding: 0;
  border: 4px ridge #e9f7ff;
  background: #c7c7c7;
  color: #111;
  box-shadow: 12px 14px 0 rgba(0, 0, 0, 0.45);
}

.retro-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1px);
}

.retro-modal form {
  margin: 0;
}

.retro-modal header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  color: white;
  background: linear-gradient(90deg, #01117a, #1745c7);
}

.retro-modal header strong {
  flex: 1;
}

.retro-modal header button {
  width: 28px;
  height: 24px;
  border: 2px outset #fff;
  background: #d7d7d7;
  font-weight: 900;
}

.modal-body {
  padding: 14px;
  color: #111;
  background: #f2f2f2;
}

.modal-body a {
  color: #001dcb;
}

.modal-reference {
  max-width: 100%;
  border: 3px ridge #999;
}

.source-view {
  overflow: auto;
  margin: 0;
  padding: 12px;
  color: #00ff40;
  background: #050505;
  border: 3px inset #777;
  font-family: var(--mono);
  white-space: pre-wrap;
}

.guestbook-list {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow: auto;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.guestbook-list li {
  padding: 8px;
  border: 2px inset #fff;
  background: white;
}

.modal-body textarea,
.modal-body input {
  width: 100%;
  margin: 4px 0 8px;
  border: 3px inset #fff;
  padding: 7px;
}

.modal-body button {
  min-height: 34px;
  border: 3px outset #fff;
  background: linear-gradient(#fff, #bcbcbc);
  font-weight: 800;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 100;
  transform: translate(-50%, 20px);
  width: min(520px, calc(100vw - 26px));
  padding: 12px 16px;
  color: var(--yellow);
  background: #050505;
  border: 4px ridge #e9f7ff;
  font-family: var(--mono);
  font-weight: 900;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.mobile-meme-dock {
  display: none;
}

.rickroll-portal {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px),
    rgba(0, 0, 0, 0.68);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.rickroll-portal.show {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.rickroll-window {
  width: min(620px, calc(100vw - 28px));
  color: #111;
  background: #c9c9c9;
  border: 4px ridge #f1f1f1;
  box-shadow: 14px 16px 0 rgba(0, 0, 0, 0.52);
}

.rickroll-window header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px;
  color: white;
  background: linear-gradient(90deg, #01117a, #1745c7 58%, #071058);
  font-weight: 900;
}

.rickroll-window header span {
  color: #fff200;
  font-family: var(--mono);
  font-size: 0.82rem;
  animation: blink 700ms steps(2, end) infinite;
}

.rickroll-body {
  padding: 14px;
  background:
    linear-gradient(180deg, #efefef, #d0d0d0);
}

.rickroll-kicker {
  margin: 0 0 4px;
  color: #001b7f;
  font-family: var(--mono);
  font-weight: 900;
  text-transform: uppercase;
}

.rickroll-target {
  margin: 0 0 12px;
  padding: 8px;
  overflow-wrap: anywhere;
  color: #00ff40;
  background: #050505;
  border: 3px inset #fff;
  font-family: var(--mono);
  font-weight: 900;
}

.rickroll-progress {
  height: 22px;
  margin-bottom: 10px;
  border: 3px inset #fff;
  background: white;
  overflow: hidden;
}

.rickroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #001b7f 0 14px, #00e7ff 14px 28px, #fff200 28px 42px);
  transition: width 280ms steps(3, end);
}

.rickroll-body ol {
  display: grid;
  gap: 4px;
  min-height: 158px;
  margin: 0;
  padding: 8px 8px 8px 34px;
  color: #111;
  background: #fffbd9;
  border: 3px inset #fff;
  font-family: var(--mono);
  font-weight: 900;
}

.rickroll-body li::marker {
  color: #001b7f;
}

.rickroll-boom {
  margin: 10px 0 0;
  color: #ff1d25;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.35rem, 4vw, 2.4rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px #fff200, 4px 4px #00113b;
}

body.motion-off *,
body.motion-off *::before,
body.motion-off *::after {
  animation-play-state: paused !important;
  scroll-behavior: auto !important;
}

body.motion-off .scanlines {
  display: none;
}

body.style-doge .fake-player {
  background: linear-gradient(to bottom, #9bddff 0 42%, #7580bf 43% 56%, #553472 57% 100%);
}

body.style-doge .player-plate {
  filter: saturate(1.08) contrast(1.04);
}

body.style-rickroll .fake-player {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0 4px, transparent 4px 16px),
    linear-gradient(to bottom, #ffb457 0 42%, #ff4f9a 43% 63%, #2d005e 64% 100%);
}

body.style-rickroll .player-plate {
  filter: hue-rotate(318deg) saturate(1.28) contrast(1.08);
}

body.style-nyan .fake-player {
  background:
    linear-gradient(
      to bottom,
      #ff4f4f 0 16%,
      #ffb347 16% 32%,
      #fff65e 32% 48%,
      #65ff70 48% 64%,
      #4ac9ff 64% 80%,
      #7956ff 80% 100%
    );
}

body.style-nyan .player-plate {
  filter: hue-rotate(42deg) saturate(1.45) brightness(1.06);
}

body.style-vapor .fake-player {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, #ff7df3 0 42%, #5ddcff 43% 56%, #170052 57% 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

body.style-vapor .player-plate {
  filter: hue-rotate(205deg) saturate(1.38) contrast(1.1);
}

@keyframes burstPulse {
  0%,
  100% {
    transform: rotate(4deg) scale(1);
  }

  50% {
    transform: rotate(-3deg) scale(1.06);
  }
}

@keyframes catFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes arrowPunch {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(8px);
  }
}

@keyframes arrowTrail {
  50% {
    transform: translate(8px, -50%);
    opacity: 0.58;
  }
}

@keyframes balloonBob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 0.65;
  }

  50% {
    opacity: 1;
  }
}

@keyframes propSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mayorDance {
  0%,
  100% {
    transform: translateX(-50%) rotate(-2deg);
  }

  50% {
    transform: translateX(-50%) rotate(2deg) translateY(-4px);
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes globeTurn {
  to {
    background-position: 58px 0, -38px 0, 0 0, 0 0;
  }
}

@keyframes fireDance {
  50% {
    background-position: 12px bottom;
  }
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes throbberSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(8deg) scale(1.08);
  }

  100% {
    transform: rotate(-8deg) scale(1);
  }
}

@keyframes barrierWork {
  0%,
  100% {
    transform: translateX(0);
  }

  33% {
    transform: translateX(-5px) rotate(-2deg);
  }

  66% {
    transform: translateX(5px) rotate(2deg);
  }
}

@media (max-width: 1180px) {
  .content-grid {
    grid-template-columns: 195px minmax(0, 1fr);
  }

  .right-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .brand-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .brand-copy {
    padding-right: 104px;
  }

  .brand-row .new-burst {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 98px;
  }

  .brand-row .rainbow-cat {
    right: 90px;
    bottom: 13px;
    width: 124px;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .left-rail,
  .right-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-card {
    grid-template-columns: 1fr;
  }

  .hero-arrow {
    transform: rotate(90deg);
  }

  .newspaper {
    transform: rotate(-3deg);
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .meme-maker-grid,
  .agent-lab,
  .trend-layout {
    grid-template-columns: 1fr;
  }

  .format-library-header {
    grid-template-columns: 1fr;
  }

  .hof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-candidate-grid {
    grid-template-columns: 1fr;
  }

  .agent-candidate {
    min-height: 176px;
  }

  .badge-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 168px;
  }

  body {
    width: 100%;
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 18px 18px, rgba(255, 255, 255, 0.2) 0 2px, transparent 3px),
      linear-gradient(135deg, #104b99, #071458 44%, #4a0088 100%);
    background-size: 72px 72px, auto;
    overflow-x: hidden;
  }

  .browser-window {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-left: 0;
    border-right: 0;
    overflow-x: hidden;
  }

  .browser-chrome {
    position: sticky;
    top: 0;
    z-index: 35;
  }

  .site-shell {
    max-width: 100vw;
    overflow: hidden;
  }

  .brand-copy {
    min-width: 0;
    overflow: hidden;
  }

  h1 {
    width: 100%;
    max-width: 100%;
    background-size: contain;
  }

  .titlebar {
    min-height: 26px;
    gap: 5px;
    padding: 2px 3px;
    font-size: 0.78rem;
  }

  .window-mark {
    width: 17px;
    height: 17px;
    font-size: 0.8rem;
  }

  .window-controls span {
    width: 21px;
    height: 18px;
    font-size: 0.62rem;
  }

  .menubar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 4px;
    -webkit-overflow-scrolling: touch;
  }

  .menubar button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 2px 10px;
  }

  .toolbar {
    flex-wrap: nowrap;
    min-height: 54px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .toolbar-grip,
  .toolbar-separator,
  .page-proxy {
    display: none;
  }

  .tool-button {
    grid-template-rows: 32px;
    flex: 0 0 48px;
    min-width: 48px;
    min-height: 46px;
    justify-items: center;
    padding: 3px;
    scroll-snap-align: start;
  }

  .tool-button > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tool-icon {
    width: 32px;
    height: 32px;
  }

  .netscape-throbber {
    flex: 0 0 48px;
    min-height: 46px;
    margin-left: 0;
  }

  .addressbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px;
    padding: 4px;
  }

  .addressbar label {
    align-self: center;
    font-size: 0.82rem;
  }

  .url-combo {
    flex: none;
  }

  .addressbar input {
    height: 32px;
    font-size: 16px;
  }

  .addressbar button {
    min-height: 32px;
    padding: 2px 8px;
  }

  #linksButton {
    grid-column: 1 / -1;
  }

  .personalbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 3px 4px;
    -webkit-overflow-scrolling: touch;
  }

  .personalbar button {
    min-height: 30px;
  }

  .brand-row {
    grid-template-columns: 70px minmax(0, 1fr);
    min-height: 178px;
    padding: 8px 8px 54px;
  }

  .brand-copy {
    padding-right: 82px;
  }

  .smiley-badge {
    position: relative;
    left: auto;
    top: auto;
    width: 70px;
  }

  h1 {
    min-height: clamp(54px, 18vw, 74px);
  }

  .tagline {
    font-size: clamp(1.1rem, 8vw, 1.55rem);
  }

  .brand-row .new-burst {
    right: 8px;
    top: auto;
    bottom: 6px;
    width: 92px;
  }

  .brand-row .rainbow-cat {
    display: block;
    right: 86px;
    bottom: 14px;
    width: 118px;
  }

  .left-rail,
  .right-rail,
  .cta-strip,
  .badge-row {
    grid-template-columns: 1fr;
  }

  .content-grid {
    display: flex;
    flex-direction: column;
  }

  .main-stage {
    order: 1;
  }

  .left-rail {
    order: 2;
  }

  .right-rail {
    order: 3;
  }

  .nav-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-panel h2 {
    grid-column: 1 / -1;
  }

  .nav-panel a,
  .nav-panel button {
    min-height: 42px;
    padding: 7px 8px;
    font-size: 0.84rem;
  }

  .hero-card {
    padding: 10px;
    min-height: 0;
    gap: 4px;
    border-radius: 6px;
  }

  .comic-kicker {
    margin-bottom: 5px;
    font-size: 1.35rem;
    text-align: center;
  }

  .newspaper {
    width: min(94vw, 360px);
    transform: rotate(-2deg);
  }

  .newspaper h2 {
    margin-right: 0;
    padding-right: 84px;
    font-size: 1.45rem;
  }

  .paper-copy {
    max-height: 2.3em;
    overflow: hidden;
  }

  .hero-arrow {
    min-height: 54px;
    margin: -4px 0;
  }

  .hero-arrow span {
    width: 90px;
    height: 76px;
  }

  .fake-player {
    min-height: 214px;
    border-width: 4px;
    border-radius: 6px;
  }

  .speech-bubble {
    right: 8px;
    top: 24px;
    max-width: 48%;
    padding: 7px 8px;
    border-width: 3px;
    border-radius: 10px;
    font-size: 0.74rem;
  }

  .caption-bar {
    left: 6px;
    right: 6px;
    min-height: 34px;
    padding: 5px 6px;
    font-size: 0.74rem;
    line-height: 1.15;
  }

  .player-controls {
    grid-template-columns: 36px 40px minmax(88px, 1fr) 44px 42px;
    gap: 4px;
    min-height: 42px;
    padding: 4px;
  }

  .player-controls button {
    height: 32px;
    font-size: 0.72rem;
  }

  .scrubber {
    height: 18px;
  }

  .cta {
    min-height: 64px;
    border-width: 4px;
    border-radius: 6px;
    font-size: 1.55rem;
  }

  .steps {
    gap: 10px;
  }

  .step-card {
    min-height: 0;
    padding: 10px 10px 12px 50px;
  }

  .step-card textarea,
  .login-panel input,
  .style-card select,
  .maker-controls textarea,
  .maker-controls input,
  .maker-controls select,
  .modal-body textarea,
  .modal-body input {
    font-size: 16px;
  }

  .maker-canvas-shell {
    min-height: 260px;
    padding: 7px;
  }

  #memeCanvas {
    max-width: 360px;
  }

	  .maker-row,
	  .maker-template-strip,
	  .agent-controls,
	  .agent-chat-form,
	  .agent-run-row,
	  .pricing-strip {
	    grid-template-columns: 1fr;
  }

  .format-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 360px;
  }

  .operator-signal-strip__header,
  .operator-library-panel header,
  .operator-library-search {
    display: grid;
    grid-template-columns: 1fr;
  }

  .operator-signal-list,
  .operator-library-list {
    grid-template-columns: 1fr;
  }

  .maker-row--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .format-archive {
    padding: 0 8px 10px;
  }

  .format-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .format-card.hof-card {
    min-height: 168px;
  }

  .hof-summary {
    grid-template-columns: 1fr;
  }

  .hof-card {
    min-height: 150px;
  }

  .trend-item {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .style-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-option {
    min-height: 86px;
  }

  .style-option .thumb {
    min-height: 62px;
  }

  .vault-grid {
    max-width: 360px;
    margin-inline: auto;
  }

  .ring-controls {
    grid-template-columns: 1fr;
  }

  .badge {
    min-height: 60px;
  }

  .statusbar {
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    font-size: 0.78rem;
  }

  .status-progress {
    flex-basis: 72px;
    margin-inline: 4px;
  }

  .component-bar button {
    width: 22px;
  }

  .mobile-meme-dock {
    position: fixed;
    left: 8px;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 95;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 6px;
    border: 3px outset #f5f5f5;
    background:
      linear-gradient(#efefef, #ababab),
      #c9c9c9;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.42);
  }

  .mobile-meme-dock button {
    min-width: 0;
    min-height: 48px;
    padding: 4px;
    color: #07103c;
    border: 3px outset #fff;
    background: linear-gradient(#fff6a2, #ffbf00 48%, #ff7a00);
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: 1rem;
    letter-spacing: 0;
    text-shadow: 1px 1px white;
  }

  .mobile-meme-dock button:nth-child(2) {
    background: linear-gradient(#9ee9ff, #1578ff 48%, #001d8f);
    color: white;
    text-shadow: 2px 2px #00113b;
  }

  .mobile-meme-dock button:nth-child(3) {
    background: linear-gradient(#ff9eff, #d10099 48%, #7e005d);
    color: white;
    text-shadow: 2px 2px #00113b;
  }

  .mobile-meme-dock button:nth-child(4) {
    background: linear-gradient(#9cff74, #25b800 48%, #0b6400);
    color: white;
    text-shadow: 2px 2px #00113b;
  }

  .mobile-meme-dock button:active {
    border-style: inset;
    transform: translate(1px, 1px);
  }

  .toast {
    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .rickroll-portal {
    padding: 10px;
  }

  .rickroll-window {
    width: calc(100vw - 20px);
  }

  .rickroll-body {
    padding: 10px;
  }

  .rickroll-body ol {
    min-height: 132px;
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  .browser-menu-popup {
    max-width: calc(100vw - 24px);
  }

  .brand-row {
    display: block;
    min-height: 228px;
    padding: 8px 8px 64px;
  }

  .brand-copy {
    padding-right: 0;
  }

  .smiley-badge {
    position: absolute;
    left: 10px;
    bottom: 12px;
    width: 54px;
  }

  h1 {
    min-height: 54px;
  }

  .tagline {
    font-size: 1.18rem;
    line-height: 1.05;
  }

  .subtag {
    font-size: 0.82rem;
  }

  .brand-row .new-burst {
    width: 74px;
  }

  .brand-row .rainbow-cat {
    right: 72px;
    width: 100px;
  }

  .newspaper-front {
    inset: 18% 8% 16% 13%;
  }

  .masthead {
    font-size: 0.96rem;
  }

  .newspaper h2 {
    padding-right: 72px;
    font-size: 1.22rem;
  }

  .date-line,
  .paper-copy {
    font-size: 0.58rem;
  }

  .fake-player {
    min-height: 196px;
  }

  .speech-bubble {
    top: 18px;
    max-width: 52%;
    font-size: 0.68rem;
  }

  .caption-bar {
    font-size: 0.68rem;
  }

  .player-controls {
    grid-template-columns: 34px 38px minmax(68px, 1fr) 42px 40px;
  }

  .nav-panel {
    grid-template-columns: 1fr;
  }

  .style-options {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
    -webkit-overflow-scrolling: touch;
  }

  .hof-grid,
  .agent-grid,
  .maker-row--compact {
    grid-template-columns: 1fr;
  }

  .format-stats {
    grid-template-columns: 1fr;
  }

  .format-stats span {
    min-height: 42px;
  }

  .format-grid {
    grid-template-columns: 1fr;
  }

  .format-card.hof-card {
    grid-template-rows: auto auto auto auto;
    min-height: 0;
  }

  .maker-template-strip {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
    -webkit-overflow-scrolling: touch;
  }

  .maker-template {
    flex: 0 0 86px;
  }

  .format-search-row,
  .format-library {
    grid-template-columns: 1fr;
  }

  .format-search-row span {
    min-width: 0;
  }

  .format-card {
    min-height: 94px;
  }

  .trend-item {
    grid-template-columns: 1fr;
  }

  .trend-item span {
    grid-row: auto;
    min-height: 28px;
  }

  .style-option {
    flex: 0 0 76px;
  }

  .vault-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 240px;
  }

  .bottom-marquee div {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

.cta {
  text-decoration: none;
}

.cta-strip {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cta-platform {
  background: linear-gradient(#272f3d, #111827 54%, #06080d);
}

.cta-free {
  background: linear-gradient(#ffe27a, #d48d00 54%, #7c3f00);
}

body[data-ui-route="landing"] #agentLab {
  display: none;
}

/* Surface the working free maker ON the landing page, pulled to the top of the
   main-stage grid so "make a meme" is the first thing a visitor can DO (the
   maker used to be hidden on landing and buried at /free). main-stage is a
   grid, so `order` reflows it without moving any DOM. */
body[data-ui-route="landing"] #memeMaker {
  order: -1;
  margin-bottom: 10px;
}

body[data-ui-route="free-generator"] .left-rail,
body[data-ui-route="free-generator"] .right-rail,
body[data-ui-route="free-generator"] .brand-row,
body[data-ui-route="free-generator"] #memeOfTheDay,
body[data-ui-route="free-generator"] .main-stage > :not(#memeMaker),
body[data-ui-route="free-generator"] .fireline,
body[data-ui-route="free-generator"] .bottom-marquee,
body[data-ui-route="free-generator"] .badge-row {
  display: none !important;
}

body[data-ui-route="free-generator"] .content-grid {
  grid-template-columns: minmax(0, 1fr);
}

body[data-ui-route="free-generator"] .main-stage {
  max-width: 1180px;
  margin: 0 auto;
}

body[data-ui-route="free-generator"] #memeMaker {
  display: block;
}

body[data-ui-route="agent"] {
  min-height: 100vh;
  color: #e7edf6;
  background:
    linear-gradient(90deg, rgba(87, 113, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #07090d 0%, #0b0f16 46%, #05070a 100%);
}

body[data-ui-route="agent"] .scanlines,
body[data-ui-route="agent"] .browser-chrome,
body[data-ui-route="agent"] .statusbar,
body[data-ui-route="agent"] .brand-row,
body[data-ui-route="agent"] .left-rail,
body[data-ui-route="agent"] .right-rail,
body[data-ui-route="agent"] #memeOfTheDay,
body[data-ui-route="agent"] .main-stage > :not(#agentLab),
body[data-ui-route="agent"] .fireline,
body[data-ui-route="agent"] .bottom-marquee,
body[data-ui-route="agent"] .badge-row,
body[data-ui-route="agent"] .mobile-meme-dock {
  display: none !important;
}

body[data-ui-route="agent"] .browser-window {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  color: #e7edf6;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-ui-route="agent"] .site-shell {
  min-height: 100vh;
  padding: 0;
}

body[data-ui-route="agent"] .content-grid,
body[data-ui-route="agent"] .main-stage {
  display: block;
  min-height: 100vh;
}

body[data-ui-route="agent"] #agentLab {
  display: block;
  min-height: 100vh;
  color: #e7edf6;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-ui-route="agent"] .agent-platform__layout {
  display: grid;
  grid-template-columns: 286px minmax(420px, 1fr) 360px;
  gap: 0;
  min-height: 100vh;
  padding: 0;
}

body[data-ui-route="agent"] .agent-platform__sidebar,
body[data-ui-route="agent"] .agent-platform__inspector,
body[data-ui-route="agent"] .agent-platform__main {
  min-width: 0;
}

body[data-ui-route="agent"] .agent-platform__sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100vh;
  padding: 18px;
  border-right: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(8, 11, 17, 0.94);
}

body[data-ui-route="agent"] .agent-platform__brand {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #f8fafc;
  text-decoration: none;
}

body[data-ui-route="agent"] .agent-platform__brand span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 8px;
  color: #0f172a;
  background: #a7f3d0;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-ui-route="agent"] .agent-platform__brand strong {
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

body[data-ui-route="agent"] .agent-platform__nav {
  display: grid;
  gap: 6px;
}

body[data-ui-route="agent"] .agent-platform__nav a,
body[data-ui-route="agent"] .agent-platform__top-actions a,
body[data-ui-route="agent"] .agent-platform__top-actions button,
body[data-ui-route="agent"] .agent-prompt-chips button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  color: #cbd5e1;
  background: #111827;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  text-decoration: none;
}

body[data-ui-route="agent"] .agent-platform__nav a.is-active,
body[data-ui-route="agent"] .agent-platform__top-actions button {
  color: #07100c;
  border-color: rgba(167, 243, 208, 0.72);
  background: #a7f3d0;
}

body[data-ui-route="agent"] .agent-platform__nav a:hover,
body[data-ui-route="agent"] .agent-platform__nav a:focus-visible,
body[data-ui-route="agent"] .agent-platform__top-actions a:hover,
body[data-ui-route="agent"] .agent-platform__top-actions button:hover,
body[data-ui-route="agent"] .agent-prompt-chips button:hover {
  border-color: #7dd3fc;
  color: #f8fafc;
  background: #172033;
}

body[data-ui-route="agent"] .operator-status-grid {
  grid-template-columns: 1fr;
}

body[data-ui-route="agent"] .operator-status-grid span,
body[data-ui-route="agent"] .agent-format-radar span,
body[data-ui-route="agent"] .agent-quality-bar span {
  min-height: 30px;
  border-color: rgba(148, 163, 184, 0.22);
  color: #dbeafe;
  background: #101826;
}

body[data-ui-route="agent"] .agent-platform__settings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  flex: 1;
  overflow: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-ui-route="agent"] .agent-field,
body[data-ui-route="agent"] .agent-field--wide,
body[data-ui-route="agent"] .agent-run-row {
  grid-column: auto;
}

body[data-ui-route="agent"] .agent-controls label,
body[data-ui-route="agent"] .agent-context-composer label,
body[data-ui-route="agent"] .operator-library-search label {
  color: #93a4b8;
  font-size: 0.72rem;
  font-weight: 760;
}

body[data-ui-route="agent"] .agent-controls input,
body[data-ui-route="agent"] .agent-controls textarea,
body[data-ui-route="agent"] .agent-controls select,
body[data-ui-route="agent"] .agent-chat-form textarea,
body[data-ui-route="agent"] .agent-context-composer input,
body[data-ui-route="agent"] .agent-context-composer textarea,
body[data-ui-route="agent"] .operator-library-search input {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  color: #e7edf6;
  background: #0b1220;
  font-weight: 650;
}

body[data-ui-route="agent"] .agent-controls textarea {
  min-height: 92px;
}

body[data-ui-route="agent"] .agent-run-row {
  grid-template-columns: 1fr;
}

body[data-ui-route="agent"] .agent-run-row button,
body[data-ui-route="agent"] .agent-chat-form button {
  min-height: 38px;
  border: 1px solid rgba(167, 243, 208, 0.72);
  border-radius: 8px;
  color: #07100c;
  background: #a7f3d0;
  font-weight: 850;
}

body[data-ui-route="agent"] .agent-platform__main {
  display: grid;
  grid-template-rows: auto minmax(180px, auto) auto auto minmax(260px, 1fr) auto auto;
  gap: 12px;
  min-height: 100vh;
  padding: 18px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(7, 10, 15, 0.96)),
    #080b11;
  font-family: var(--ui);
}

body[data-ui-route="agent"] .operator-console__header {
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: transparent;
}

body[data-ui-route="agent"] .operator-console__header h2 {
  padding: 0;
  color: #f8fafc;
  border: 0;
  background: transparent;
  font-size: 1.04rem;
}

body[data-ui-route="agent"] .operator-eyebrow {
  color: #7dd3fc;
}

body[data-ui-route="agent"] .agent-platform__top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body[data-ui-route="agent"] .agent-chat-log {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  max-height: none;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #070b12;
}

body[data-ui-route="agent"] .agent-message {
  max-width: min(720px, 94%);
  border-color: rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: #101826;
}

body[data-ui-route="agent"] .agent-message strong {
  color: #a7f3d0;
}

body[data-ui-route="agent"] .agent-message--user {
  color: #07100c;
  background: #bae6fd;
}

body[data-ui-route="agent"] .agent-message--user strong {
  color: #0f172a;
}

body[data-ui-route="agent"] .agent-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body[data-ui-route="agent"] .agent-prompt-chips button {
  justify-content: flex-start;
  color: #dbeafe;
  background: #0b1220;
}

body[data-ui-route="agent"] .agent-trends,
body[data-ui-route="agent"] .agent-strategy,
body[data-ui-route="agent"] .agent-candidate-grid {
  margin-top: 0;
}

body[data-ui-route="agent"] .agent-candidate-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  align-content: start;
  overflow: auto;
  padding-right: 2px;
}

body[data-ui-route="agent"] .agent-candidate {
  min-height: 0;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 8px;
}

body[data-ui-route="agent"] .agent-platform__composer {
  position: sticky;
  bottom: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(8, 13, 23, 0.96);
}

body[data-ui-route="agent"] .agent-platform__composer textarea {
  min-height: 54px;
  resize: vertical;
}

body[data-ui-route="agent"] .agent-status,
body[data-ui-route="agent"] .agent-brief,
body[data-ui-route="agent"] .agent-empty {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #dbeafe;
  background: #101826;
}

body[data-ui-route="agent"] .agent-platform__inspector {
  display: grid;
  align-content: start;
  gap: 12px;
  max-height: 100vh;
  overflow: auto;
  padding: 18px;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(6, 9, 15, 0.94);
}

body[data-ui-route="agent"] .operator-signal-strip,
body[data-ui-route="agent"] .operator-library-panel,
body[data-ui-route="agent"] .agent-context-composer {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #0b1220;
}

body[data-ui-route="agent"] .operator-intel-grid {
  grid-template-columns: 1fr;
  margin: 0;
}

body[data-ui-route="agent"] .operator-intel-card {
  border-color: rgba(148, 163, 184, 0.18);
  background: #101826;
}

body[data-ui-route="agent"] .operator-library-list {
  grid-template-columns: 1fr;
  max-height: 360px;
}

body[data-ui-route="agent"] .operator-library-card,
body[data-ui-route="agent"] .operator-signal-card {
  border-color: rgba(203, 213, 225, 0.18);
  border-radius: 8px;
  background: #f8fafc;
}

@media (max-width: 1180px) {
  body[data-ui-route="agent"] .agent-platform__layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  body[data-ui-route="agent"] .agent-platform__inspector {
    grid-column: 1 / -1;
    max-height: none;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 0;
  }

  body[data-ui-route="agent"] .operator-intel-grid,
  body[data-ui-route="agent"] .operator-library-list {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-ui-route="free-generator"] .site-shell {
    padding: 8px;
  }

  body[data-ui-route="agent"] .agent-platform__layout {
    grid-template-columns: 1fr;
  }

  body[data-ui-route="agent"] .agent-platform__sidebar,
  body[data-ui-route="agent"] .agent-platform__main,
  body[data-ui-route="agent"] .agent-platform__inspector {
    min-height: 0;
    padding: 14px;
    border-right: 0;
    border-left: 0;
  }

  body[data-ui-route="agent"] .agent-platform__sidebar {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }

  body[data-ui-route="agent"] .agent-platform__topbar,
  body[data-ui-route="agent"] .agent-platform__composer {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-ui-route="agent"] .agent-platform__top-actions {
    justify-content: stretch;
  }

  body[data-ui-route="agent"] .agent-platform__top-actions a,
  body[data-ui-route="agent"] .agent-platform__top-actions button,
  body[data-ui-route="agent"] .agent-platform__composer button {
    width: 100%;
  }
}

body[data-ui-route="agent"] {
  --agent-bg: #000000;
  --agent-panel: #080808;
  --agent-panel-2: #0f0f10;
  --agent-panel-3: #151516;
  --agent-border: #262626;
  --agent-border-soft: #1f1f1f;
  --agent-text: #fafafa;
  --agent-muted: #a1a1aa;
  --agent-faint: #71717a;
  --agent-primary: #ffffff;
  --agent-primary-text: #09090b;
  --agent-radius: 8px;
  color: var(--agent-text);
  background: var(--agent-bg);
  font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-ui-route="agent"] * {
  letter-spacing: 0;
}

body[data-ui-route="agent"] .agent-platform__layout {
  grid-template-columns: 264px minmax(0, 1fr) 328px;
  background: var(--agent-bg);
}

body[data-ui-route="agent"] .agent-platform__sidebar,
body[data-ui-route="agent"] .agent-platform__inspector {
  background: var(--agent-panel);
}

body[data-ui-route="agent"] .agent-platform__sidebar {
  gap: 12px;
  padding: 16px;
  border-right-color: var(--agent-border-soft);
}

body[data-ui-route="agent"] .agent-platform__inspector {
  gap: 10px;
  padding: 16px;
  border-left-color: var(--agent-border-soft);
}

body[data-ui-route="agent"] .agent-platform__brand {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  min-height: 36px;
}

body[data-ui-route="agent"] .agent-platform__brand span {
  width: 32px;
  height: 32px;
  color: var(--agent-primary-text);
  border-color: transparent;
  border-radius: 7px;
  background: var(--agent-primary);
  font-size: 0.68rem;
}

body[data-ui-route="agent"] .agent-platform__brand strong {
  color: var(--agent-text);
  font-size: 0.82rem;
  font-weight: 650;
}

body[data-ui-route="agent"] .agent-platform__nav {
  gap: 4px;
}

body[data-ui-route="agent"] .agent-platform__nav a,
body[data-ui-route="agent"] .agent-platform__top-actions a,
body[data-ui-route="agent"] .agent-platform__top-actions button,
body[data-ui-route="agent"] .agent-prompt-chips button,
body[data-ui-route="agent"] .agent-run-row button,
body[data-ui-route="agent"] .agent-chat-form button,
body[data-ui-route="agent"] .agent-action-row button {
  min-height: 34px;
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-radius);
  color: var(--agent-text);
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 520;
  text-shadow: none;
}

body[data-ui-route="agent"] .agent-platform__nav a.is-active,
body[data-ui-route="agent"] .agent-platform__top-actions button,
body[data-ui-route="agent"] .agent-chat-form button[type="submit"],
body[data-ui-route="agent"] .agent-run-row button[type="submit"] {
  color: var(--agent-primary-text);
  border-color: var(--agent-primary);
  background: var(--agent-primary);
}

body[data-ui-route="agent"] .agent-platform__nav a:hover,
body[data-ui-route="agent"] .agent-platform__nav a:focus-visible,
body[data-ui-route="agent"] .agent-platform__top-actions a:hover,
body[data-ui-route="agent"] .agent-platform__top-actions button:hover,
body[data-ui-route="agent"] .agent-prompt-chips button:hover,
body[data-ui-route="agent"] .agent-run-row button:hover,
body[data-ui-route="agent"] .agent-chat-form button:hover,
body[data-ui-route="agent"] .agent-action-row button:hover {
  border-color: #3f3f46;
  color: var(--agent-text);
  background: var(--agent-panel-3);
}

body[data-ui-route="agent"] .agent-platform__top-actions button:hover,
body[data-ui-route="agent"] .agent-chat-form button[type="submit"]:hover,
body[data-ui-route="agent"] .agent-run-row button[type="submit"]:hover {
  color: var(--agent-primary-text);
  background: #e4e4e7;
}

body[data-ui-route="agent"] .operator-status-grid {
  gap: 5px;
}

body[data-ui-route="agent"] .operator-status-grid span,
body[data-ui-route="agent"] .agent-run-meta span,
body[data-ui-route="agent"] .agent-candidate__policy,
body[data-ui-route="agent"] .operator-signal-strip__header span,
body[data-ui-route="agent"] .operator-library-panel header > strong,
body[data-ui-route="agent"] .agent-context-composer header > span,
body[data-ui-route="agent"] .agent-trends__header span {
  min-height: 24px;
  padding: 3px 7px;
  color: var(--agent-muted);
  border: 1px solid var(--agent-border);
  border-radius: 999px;
  background: #0b0b0c;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 520;
  text-transform: none;
}

body[data-ui-route="agent"] .agent-platform__settings {
  scrollbar-color: #3f3f46 transparent;
}

body[data-ui-route="agent"] .agent-controls label,
body[data-ui-route="agent"] .agent-context-composer label,
body[data-ui-route="agent"] .operator-library-search label {
  color: var(--agent-muted);
  font-size: 0.72rem;
  font-weight: 500;
}

body[data-ui-route="agent"] .agent-controls input,
body[data-ui-route="agent"] .agent-controls textarea,
body[data-ui-route="agent"] .agent-controls select,
body[data-ui-route="agent"] .agent-chat-form textarea,
body[data-ui-route="agent"] .agent-context-composer input,
body[data-ui-route="agent"] .agent-context-composer textarea,
body[data-ui-route="agent"] .operator-library-search input {
  min-height: 34px;
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-radius);
  color: var(--agent-text);
  background: #050505;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 450;
}

body[data-ui-route="agent"] .agent-controls input:focus,
body[data-ui-route="agent"] .agent-controls textarea:focus,
body[data-ui-route="agent"] .agent-controls select:focus,
body[data-ui-route="agent"] .agent-chat-form textarea:focus,
body[data-ui-route="agent"] .agent-context-composer input:focus,
body[data-ui-route="agent"] .agent-context-composer textarea:focus,
body[data-ui-route="agent"] .operator-library-search input:focus {
  border-color: #52525b;
  outline: 2px solid rgba(255, 255, 255, 0.12);
  outline-offset: 1px;
}

body[data-ui-route="agent"] .agent-platform__main {
  grid-template-rows: auto minmax(160px, auto) auto auto auto auto auto;
  gap: 12px;
  padding: 16px;
  background: var(--agent-bg);
}

body[data-ui-route="agent"] .operator-console__header {
  min-height: 42px;
  padding: 0 0 12px;
  border-bottom-color: var(--agent-border-soft);
}

body[data-ui-route="agent"] .operator-console__header h2 {
  color: var(--agent-text);
  font-size: 1rem;
  font-weight: 560;
}

body[data-ui-route="agent"] .operator-eyebrow {
  color: var(--agent-faint);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 520;
}

body[data-ui-route="agent"] .agent-chat-log {
  min-height: 190px;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-ui-route="agent"] .agent-message {
  max-width: min(760px, 92%);
  padding: 13px 14px;
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-radius);
  color: var(--agent-text);
  background: var(--agent-panel-2);
}

body[data-ui-route="agent"] .agent-message strong {
  color: var(--agent-text);
  font-size: 0.78rem;
  font-weight: 560;
}

body[data-ui-route="agent"] .agent-message p {
  color: #d4d4d8;
  font-size: 0.9rem;
  line-height: 1.48;
}

body[data-ui-route="agent"] .agent-message--user {
  color: var(--agent-primary-text);
  background: var(--agent-primary);
}

body[data-ui-route="agent"] .agent-message--user strong,
body[data-ui-route="agent"] .agent-message--user p {
  color: var(--agent-primary-text);
}

body[data-ui-route="agent"] .agent-prompt-chips {
  gap: 6px;
  margin-top: 12px;
}

body[data-ui-route="agent"] .agent-prompt-chips button {
  color: #d4d4d8;
  background: #09090b;
}

body[data-ui-route="agent"] .agent-trends {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

body[data-ui-route="agent"] .agent-candidate-grid:empty,
body[data-ui-route="agent"] .agent-strategy:empty {
  display: none;
}

body[data-ui-route="agent"] .agent-trends__header {
  grid-column: 1 / -1;
  color: var(--agent-muted);
}

body[data-ui-route="agent"] .agent-trends__header strong,
body[data-ui-route="agent"] .operator-signal-strip__header strong,
body[data-ui-route="agent"] .operator-library-panel h3,
body[data-ui-route="agent"] .agent-context-composer h3 {
  color: var(--agent-text);
  font-size: 0.86rem;
  font-weight: 560;
}

body[data-ui-route="agent"] .agent-trend-card,
body[data-ui-route="agent"] .operator-signal-card,
body[data-ui-route="agent"] .operator-library-card {
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-radius);
  color: var(--agent-text);
  background: var(--agent-panel-2);
  box-shadow: none;
}

body[data-ui-route="agent"] .agent-trend-card:hover,
body[data-ui-route="agent"] .agent-trend-card:focus-visible,
body[data-ui-route="agent"] .operator-signal-card:hover,
body[data-ui-route="agent"] .operator-signal-card:focus-visible,
body[data-ui-route="agent"] .operator-library-card:hover,
body[data-ui-route="agent"] .operator-library-card:focus-visible {
  border-color: #52525b;
  outline: none;
  background: var(--agent-panel-3);
}

body[data-ui-route="agent"] .agent-trend-card span,
body[data-ui-route="agent"] .operator-signal-card span,
body[data-ui-route="agent"] .operator-library-card span,
body[data-ui-route="agent"] .operator-library-card em {
  color: var(--agent-faint);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 520;
  text-transform: none;
}

body[data-ui-route="agent"] .agent-trend-card strong,
body[data-ui-route="agent"] .operator-signal-card strong,
body[data-ui-route="agent"] .operator-library-card strong {
  color: var(--agent-text);
  font-size: 0.86rem;
  font-weight: 560;
}

body[data-ui-route="agent"] .agent-trend-card p,
body[data-ui-route="agent"] .agent-trend-card em,
body[data-ui-route="agent"] .agent-trend-card small,
body[data-ui-route="agent"] .operator-signal-card small,
body[data-ui-route="agent"] .operator-library-card small {
  color: #b4b4bd;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 430;
  line-height: 1.35;
}

body[data-ui-route="agent"] .agent-platform__composer {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 8px;
  border-color: var(--agent-border);
  border-radius: 12px;
  background: var(--agent-panel-2);
}

body[data-ui-route="agent"] .agent-platform__composer textarea {
  min-height: 50px;
  border: 0;
  background: transparent;
}

body[data-ui-route="agent"] .agent-platform__composer textarea:focus {
  outline: none;
}

body[data-ui-route="agent"] .agent-status,
body[data-ui-route="agent"] .agent-brief,
body[data-ui-route="agent"] .agent-empty,
body[data-ui-route="agent"] .agent-context-brief {
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-radius);
  color: #d4d4d8;
  background: var(--agent-panel-2);
}

body[data-ui-route="agent"] .agent-status {
  margin-top: 0;
  color: var(--agent-faint);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
}

body[data-ui-route="agent"] .agent-context-composer,
body[data-ui-route="agent"] .operator-signal-strip,
body[data-ui-route="agent"] .operator-library-panel,
body[data-ui-route="agent"] .operator-intel-card {
  border-color: var(--agent-border);
  background: var(--agent-panel-2);
}

body[data-ui-route="agent"] .agent-attachment-chip {
  border-color: var(--agent-border);
  color: var(--agent-text);
  background: #09090b;
}

body[data-ui-route="agent"] .agent-attachment-chip strong {
  color: var(--agent-text);
}

body[data-ui-route="agent"] .agent-attachment-chip small {
  color: var(--agent-muted);
}

body[data-ui-route="agent"] .agent-attachment-type {
  color: var(--agent-text);
  border-color: #3f3f46;
  background: #18181b;
}

body[data-ui-route="agent"] .operator-intel-card strong {
  color: var(--agent-text);
  font-size: 0.95rem;
  font-weight: 560;
}

body[data-ui-route="agent"] .operator-intel-card span,
body[data-ui-route="agent"] .operator-intel-card small {
  color: var(--agent-muted);
  font-size: 0.7rem;
  font-weight: 450;
}

body[data-ui-route="agent"] .operator-library-list {
  gap: 6px;
}

body[data-ui-route="agent"] .agent-candidate {
  border-color: var(--agent-border);
  border-radius: var(--agent-radius);
  background: #fafafa;
  box-shadow: none;
}

body[data-ui-route="agent"] .agent-candidate strong {
  color: #09090b;
}

body[data-ui-route="agent"] .agent-reason-list p {
  color: #3f3f46;
  background: #f4f4f5;
}

@media (max-width: 1180px) {
  body[data-ui-route="agent"] .agent-platform__layout {
    grid-template-columns: 248px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body[data-ui-route="agent"] .agent-platform__composer {
    grid-template-columns: 1fr;
  }
}

body:not([data-ui-route="agent"]) {
  --vault-blue: #071b8f;
  --vault-cyan: #00d7ff;
  --vault-green: #5cff42;
  --vault-pink: #ff2fcf;
  --vault-yellow: #fff266;
  --vault-paper: #fffbe0;
  --vault-ink: #07103c;
}

body:not([data-ui-route="agent"]) .vault-panel {
  position: relative;
  overflow: hidden;
  border-color: #dffbff;
  background:
    linear-gradient(90deg, rgba(255, 242, 102, 0.2), transparent 18% 82%, rgba(0, 215, 255, 0.2)),
    linear-gradient(180deg, #081568 0%, #142caa 54%, #071052 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 -20px 32px rgba(0, 0, 0, 0.24);
}

body:not([data-ui-route="agent"]) .vault-panel h2 {
  position: relative;
  color: var(--vault-yellow);
  background: linear-gradient(90deg, #00145c, #0a7dff 48%, #00145c);
  text-shadow: 2px 2px #00113b;
}

body:not([data-ui-route="agent"]) .vault-panel p {
  position: relative;
  color: #f5fbff;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.28;
}

body:not([data-ui-route="agent"]) .vault-panel .link-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 20px);
  min-height: 36px;
  margin: 2px 10px 0;
  padding: 7px 10px;
  color: #00113b;
  background: linear-gradient(#ffffc6, #ffc400 54%, #ff8a00);
  text-shadow: 1px 1px rgba(255, 255, 255, 0.76);
  white-space: normal;
}

body:not([data-ui-route="agent"]) .vault-grid {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px;
}

body:not([data-ui-route="agent"]) .vault-grid button {
  min-height: 86px;
  border: 3px outset #f8fdff;
  background-color: #fff;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.42),
    3px 4px 0 rgba(0, 0, 0, 0.34);
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

body:not([data-ui-route="agent"]) .vault-grid button:hover,
body:not([data-ui-route="agent"]) .vault-grid button:focus-visible {
  filter: saturate(1.22) contrast(1.05);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.56),
    5px 7px 0 rgba(0, 0, 0, 0.36);
}

body:not([data-ui-route="agent"]) .vault-grid button:active {
  border-style: inset;
  transform: translate(1px, 1px);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.36);
}

body:not([data-ui-route="agent"]) .vault-grid button::after {
  left: 5px;
  right: 5px;
  bottom: 5px;
  min-height: 20px;
  padding: 4px 2px;
  overflow: hidden;
  color: var(--vault-yellow);
  background: rgba(0, 8, 38, 0.84);
  font-size: 0.68rem;
  line-height: 1;
  text-overflow: ellipsis;
}

body:not([data-ui-route="agent"]) .format-archive,
body:not([data-ui-route="agent"]) .public-vault,
body:not([data-ui-route="agent"]) .public-vault-view,
body:not([data-ui-route="agent"]) .meme-vault,
body:not([data-ui-route="agent"]) .vault-experience,
body:not([data-ui-route="agent"]) .vault-shell {
  min-width: 0;
  margin-top: 10px;
  color: var(--vault-ink);
}

body[data-ui-route="vault"] .left-rail,
body[data-ui-route="vault"] .right-rail,
body[data-ui-route="vault"] .main-stage > :not(#publicVault),
body[data-ui-route="vault"] .fireline,
body[data-ui-route="vault"] .bottom-marquee,
body[data-ui-route="vault"] .badge-row {
  display: none !important;
}

body[data-ui-route="memes"] .left-rail,
body[data-ui-route="memes"] .right-rail,
body[data-ui-route="memes"] .main-stage > :not(#hostedGallery),
body[data-ui-route="memes"] .fireline,
body[data-ui-route="memes"] .bottom-marquee,
body[data-ui-route="memes"] .badge-row,
body[data-ui-route="meme-permalink"] .left-rail,
body[data-ui-route="meme-permalink"] .right-rail,
body[data-ui-route="meme-permalink"] .main-stage > :not(#hostedGallery),
body[data-ui-route="meme-permalink"] .fireline,
body[data-ui-route="meme-permalink"] .bottom-marquee,
body[data-ui-route="meme-permalink"] .badge-row {
  display: none !important;
}

body[data-ui-route="vault"] .content-grid,
body[data-ui-route="memes"] .content-grid,
body[data-ui-route="meme-permalink"] .content-grid {
  grid-template-columns: minmax(0, 1fr);
}

body[data-ui-route="vault"] .main-stage,
body[data-ui-route="memes"] .main-stage,
body[data-ui-route="meme-permalink"] .main-stage {
  max-width: 1240px;
  margin: 0 auto;
}

body[data-ui-route="vault"] #publicVault,
body[data-ui-route="memes"] #hostedGallery,
body[data-ui-route="meme-permalink"] #hostedGallery {
  display: block;
}

body:not([data-ui-route="agent"]) .format-library-header,
body:not([data-ui-route="agent"]) .vault-hero,
body:not([data-ui-route="agent"]) .vault-header {
  position: relative;
  overflow: hidden;
  border: 4px ridge #f8fdff;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.76), transparent 38%),
    linear-gradient(135deg, #fffbe0 0%, #dffbff 43%, #ffdcf6 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 116, 255, 0.18);
}

body:not([data-ui-route="agent"]) .format-library-header::after,
body:not([data-ui-route="agent"]) .vault-hero::after,
body:not([data-ui-route="agent"]) .vault-header::after {
  content: "NEW";
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #00113b;
  background: radial-gradient(circle, #fff 0 28%, var(--vault-yellow) 29% 54%, #ff6b00 55%);
  border: 2px solid #111;
  border-radius: 50%;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 0.92rem;
  text-shadow: 1px 1px #fff;
  transform: rotate(12deg);
}

body:not([data-ui-route="agent"]) .format-library-header > *,
body:not([data-ui-route="agent"]) .vault-hero > *,
body:not([data-ui-route="agent"]) .vault-header > * {
  min-width: 0;
}

body:not([data-ui-route="agent"]) .format-eyebrow,
body:not([data-ui-route="agent"]) .vault-eyebrow,
body:not([data-ui-route="agent"]) .vault-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  color: white;
  background: var(--vault-blue);
  border: 2px solid #111;
  font-family: var(--mono);
  line-height: 1;
}

body:not([data-ui-route="agent"]) .format-archive h3,
body:not([data-ui-route="agent"]) .vault-title,
body:not([data-ui-route="agent"]) .vault-hero h2,
body:not([data-ui-route="agent"]) .vault-header h2 {
  max-width: calc(100% - 70px);
  color: var(--vault-blue);
  text-shadow: 2px 2px #fff, 4px 4px var(--vault-cyan);
  overflow-wrap: anywhere;
}

body:not([data-ui-route="agent"]) .format-stats,
body:not([data-ui-route="agent"]) .vault-stats {
  align-items: stretch;
}

body:not([data-ui-route="agent"]) .format-stats span,
body:not([data-ui-route="agent"]) .vault-stat {
  border: 3px outset #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(180deg, #0982ff, #061563);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.18);
}

body:not([data-ui-route="agent"]) .format-search-row,
body:not([data-ui-route="agent"]) .vault-search,
body:not([data-ui-route="agent"]) .vault-filterbar,
body:not([data-ui-route="agent"]) .vault-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  color: var(--vault-ink);
  border: 3px ridge #fff;
  background: linear-gradient(90deg, #dffbff, #fffbe0 48%, #ffe2f6);
}

body:not([data-ui-route="agent"]) .format-library-tools input,
body:not([data-ui-route="agent"]) .vault-search input,
body:not([data-ui-route="agent"]) .vault-filterbar input,
body:not([data-ui-route="agent"]) .vault-toolbar input,
body:not([data-ui-route="agent"]) .vault-filterbar select,
body:not([data-ui-route="agent"]) .vault-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 3px inset #fff;
  color: #111;
  background: #fff;
  font-weight: 800;
}

body:not([data-ui-route="agent"]) .public-vault-view .format-library-tools {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-bottom: 3px ridge #fff;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent),
    linear-gradient(180deg, #081568, #06103f);
}

body:not([data-ui-route="agent"]) .public-vault-view .format-library-tools .maker-row {
  margin: 0;
}

body:not([data-ui-route="agent"]) .public-vault-view .format-library-tools .maker-row label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  margin: 0;
  color: #f5fbff;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 900;
}

body:not([data-ui-route="agent"]) .public-vault-view .format-library-tools select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 3px inset #fff;
  color: #111;
  background: #fff;
  font-weight: 800;
}

body:not([data-ui-route="agent"]) .public-vault-view .meme-maker-grid {
  align-items: start;
}

body:not([data-ui-route="agent"]) #publicVaultGrid {
  min-height: 330px;
  max-height: 640px;
}

body:not([data-ui-route="agent"]) #publicVaultGrid .maker-note {
  align-self: start;
}

body:not([data-ui-route="agent"]) #publicVaultDetail {
  position: sticky;
  top: 10px;
  border-color: #f8fdff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 42%),
    linear-gradient(135deg, #e5fbff, #fffbe0 52%, #ffe0f5);
}

body:not([data-ui-route="agent"]) #publicVaultDetail h3 {
  margin: 0 0 8px;
  color: var(--vault-blue);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.02;
  text-shadow: 2px 2px #fff, 4px 4px var(--vault-cyan);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body:not([data-ui-route="agent"]) .vault-filters,
body:not([data-ui-route="agent"]) .vault-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

body:not([data-ui-route="agent"]) .vault-filter,
body:not([data-ui-route="agent"]) .vault-chip,
body:not([data-ui-route="agent"]) .vault-filterbar button,
body:not([data-ui-route="agent"]) .vault-toolbar button {
  min-height: 32px;
  max-width: 100%;
  padding: 6px 9px;
  overflow: hidden;
  color: #00113b;
  border: 3px outset #fff;
  background: linear-gradient(#fff, #cfeeff);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not([data-ui-route="agent"]) .vault-filter[aria-pressed="true"],
body:not([data-ui-route="agent"]) .vault-chip.is-active,
body:not([data-ui-route="agent"]) .vault-filter.is-active,
body:not([data-ui-route="agent"]) .vault-filterbar button.is-active,
body:not([data-ui-route="agent"]) .vault-toolbar button.is-active {
  color: #00113b;
  border-style: inset;
  background: linear-gradient(#b7ff84, #55e934);
}

body:not([data-ui-route="agent"]) .format-library,
body:not([data-ui-route="agent"]) .format-grid,
body:not([data-ui-route="agent"]) .vault-card-grid,
body:not([data-ui-route="agent"]) .vault-results,
body:not([data-ui-route="agent"]) .vault-grid-results {
  gap: 10px;
  min-width: 0;
  border-color: #f8fdff;
  background:
    linear-gradient(45deg, rgba(6, 21, 99, 0.06) 25%, transparent 25% 75%, rgba(6, 21, 99, 0.06) 75%),
    #fffdf0;
  background-size: 18px 18px;
}

body:not([data-ui-route="agent"]) .format-card,
body:not([data-ui-route="agent"]) .hof-card,
body:not([data-ui-route="agent"]) .vault-card {
  min-width: 0;
  border: 3px outset #fff;
  border-radius: 6px;
  color: #111;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    4px 5px 0 rgba(0, 0, 0, 0.18);
  transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

body:not([data-ui-route="agent"]) .format-card:hover,
body:not([data-ui-route="agent"]) .format-card:focus-visible,
body:not([data-ui-route="agent"]) .hof-card:hover,
body:not([data-ui-route="agent"]) .hof-card:focus-visible,
body:not([data-ui-route="agent"]) .vault-card:hover,
body:not([data-ui-route="agent"]) .vault-card:focus-visible {
  filter: saturate(1.08) contrast(1.02);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.76),
    6px 8px 0 rgba(0, 0, 0, 0.22);
}

body:not([data-ui-route="agent"]) .format-card.active,
body:not([data-ui-route="agent"]) .vault-card.is-active,
body:not([data-ui-route="agent"]) .vault-card[aria-selected="true"] {
  color: white;
  border-style: inset;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 46%),
    linear-gradient(135deg, #0a73ff, #061563);
}

body:not([data-ui-route="agent"]) .format-card strong,
body:not([data-ui-route="agent"]) .format-card small,
body:not([data-ui-route="agent"]) .format-card em,
body:not([data-ui-route="agent"]) .hof-card strong,
body:not([data-ui-route="agent"]) .hof-card p,
body:not([data-ui-route="agent"]) .hof-card small,
body:not([data-ui-route="agent"]) .vault-card strong,
body:not([data-ui-route="agent"]) .vault-card p,
body:not([data-ui-route="agent"]) .vault-card small,
body:not([data-ui-route="agent"]) .vault-card em {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body:not([data-ui-route="agent"]) .vault-card img,
body:not([data-ui-route="agent"]) .vault-card__media,
body:not([data-ui-route="agent"]) .vault-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 3px inset #fff;
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 8px, transparent 8px 16px),
    linear-gradient(135deg, #ffd8f3, #d3f4ff 50%, #fff5b8);
}

body:not([data-ui-route="agent"]) .vault-layout,
body:not([data-ui-route="agent"]) .vault-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

body:not([data-ui-route="agent"]) .vault-detail,
body:not([data-ui-route="agent"]) .vault-detail-panel,
body:not([data-ui-route="agent"]) .vault-preview,
body:not([data-ui-route="agent"]) .vault-inspector {
  min-width: 0;
  padding: 10px;
  color: #111;
  border: 4px ridge #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent 45%),
    linear-gradient(135deg, #dffbff, #fffbe0);
}

body:not([data-ui-route="agent"]) .vault-detail h3,
body:not([data-ui-route="agent"]) .vault-detail-panel h3,
body:not([data-ui-route="agent"]) .vault-preview h3,
body:not([data-ui-route="agent"]) .vault-inspector h3 {
  margin: 0 0 8px;
  color: var(--vault-blue);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.18rem, 2.2vw, 1.7rem);
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body:not([data-ui-route="agent"]) .vault-detail p,
body:not([data-ui-route="agent"]) .vault-detail-panel p,
body:not([data-ui-route="agent"]) .vault-preview p,
body:not([data-ui-route="agent"]) .vault-inspector p {
  margin: 0 0 8px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body:not([data-ui-route="agent"]) .vault-meta,
body:not([data-ui-route="agent"]) .vault-detail-list {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

body:not([data-ui-route="agent"]) .vault-meta span,
body:not([data-ui-route="agent"]) .vault-detail-list li {
  min-width: 0;
  padding: 6px 7px;
  color: #111;
  border: 2px inset #fff;
  background: rgba(255, 255, 255, 0.72);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body:not([data-ui-route="agent"]) .vault-generation,
body:not([data-ui-route="agent"]) .vault-lead-magnet,
body:not([data-ui-route="agent"]) .generation-lead-magnet,
body:not([data-ui-route="agent"]) .lead-magnet {
  min-width: 0;
  padding: 12px;
  color: #fff;
  border: 4px ridge #f8fdff;
  background:
    linear-gradient(135deg, rgba(255, 47, 207, 0.7), transparent 46%),
    linear-gradient(180deg, #081568, #06103f);
  box-shadow: inset 0 0 0 2px rgba(255, 242, 102, 0.18);
}

body:not([data-ui-route="agent"]) .vault-generation h3,
body:not([data-ui-route="agent"]) .vault-lead-magnet h3,
body:not([data-ui-route="agent"]) .generation-lead-magnet h3,
body:not([data-ui-route="agent"]) .lead-magnet h3 {
  margin: 0 0 7px;
  color: var(--vault-yellow);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.78rem);
  line-height: 1.02;
  text-transform: uppercase;
  text-shadow: 2px 2px #00113b;
  overflow-wrap: anywhere;
}

body:not([data-ui-route="agent"]) .vault-generation p,
body:not([data-ui-route="agent"]) .vault-lead-magnet p,
body:not([data-ui-route="agent"]) .generation-lead-magnet p,
body:not([data-ui-route="agent"]) .lead-magnet p {
  margin: 0 0 10px;
  color: #f5fbff;
  line-height: 1.38;
}

body:not([data-ui-route="agent"]) .vault-generation form,
body:not([data-ui-route="agent"]) .vault-lead-magnet form,
body:not([data-ui-route="agent"]) .generation-lead-magnet form,
body:not([data-ui-route="agent"]) .lead-magnet form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

body:not([data-ui-route="agent"]) .vault-generation input,
body:not([data-ui-route="agent"]) .vault-lead-magnet input,
body:not([data-ui-route="agent"]) .generation-lead-magnet input,
body:not([data-ui-route="agent"]) .lead-magnet input {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 3px inset #fff;
  color: #111;
  background: #fff;
  font-weight: 800;
}

body:not([data-ui-route="agent"]) .vault-generation button,
body:not([data-ui-route="agent"]) .vault-lead-magnet button,
body:not([data-ui-route="agent"]) .generation-lead-magnet button,
body:not([data-ui-route="agent"]) .lead-magnet button,
body:not([data-ui-route="agent"]) .vault-primary-action {
  min-height: 38px;
  padding: 8px 12px;
  color: #00113b;
  border: 3px outset #fff;
  background: linear-gradient(#f8ff98, #4fff4c 52%, #13a800);
  font-weight: 1000;
  text-shadow: 1px 1px #fff;
  white-space: nowrap;
}

body:not([data-ui-route="agent"]) .vault-empty,
body:not([data-ui-route="agent"]) .vault-status {
  min-width: 0;
  padding: 10px;
  color: #111;
  border: 3px inset #fff;
  background: var(--vault-paper);
  font-family: var(--mono);
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  body:not([data-ui-route="agent"]) .format-library-header,
  body:not([data-ui-route="agent"]) .vault-hero,
  body:not([data-ui-route="agent"]) .vault-header,
  body:not([data-ui-route="agent"]) .format-search-row,
  body:not([data-ui-route="agent"]) .vault-search,
  body:not([data-ui-route="agent"]) .vault-filterbar,
  body:not([data-ui-route="agent"]) .vault-toolbar,
  body:not([data-ui-route="agent"]) .vault-layout,
  body:not([data-ui-route="agent"]) .vault-main {
    grid-template-columns: 1fr;
  }

  body:not([data-ui-route="agent"]) .format-library-header::after,
  body:not([data-ui-route="agent"]) .vault-hero::after,
  body:not([data-ui-route="agent"]) .vault-header::after {
    width: 42px;
    height: 42px;
    font-size: 0.78rem;
  }

  body:not([data-ui-route="agent"]) .format-archive h3,
  body:not([data-ui-route="agent"]) .vault-title,
  body:not([data-ui-route="agent"]) .vault-hero h2,
  body:not([data-ui-route="agent"]) .vault-header h2 {
    max-width: calc(100% - 54px);
  }

  body:not([data-ui-route="agent"]) .vault-generation form,
  body:not([data-ui-route="agent"]) .vault-lead-magnet form,
  body:not([data-ui-route="agent"]) .generation-lead-magnet form,
  body:not([data-ui-route="agent"]) .lead-magnet form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  body:not([data-ui-route="agent"]) .vault-panel .link-button,
  body:not([data-ui-route="agent"]) .vault-filter,
  body:not([data-ui-route="agent"]) .vault-chip,
  body:not([data-ui-route="agent"]) .vault-filterbar button,
  body:not([data-ui-route="agent"]) .vault-toolbar button,
  body:not([data-ui-route="agent"]) .vault-generation button,
  body:not([data-ui-route="agent"]) .vault-lead-magnet button,
  body:not([data-ui-route="agent"]) .generation-lead-magnet button,
  body:not([data-ui-route="agent"]) .lead-magnet button {
    width: 100%;
    white-space: normal;
  }

  body:not([data-ui-route="agent"]) .vault-grid {
    max-width: none;
  }
}

/* ============================================================
   agent-next: AI-product UI for the paid agent surface.
   Aesthetic target: Claude.ai / ChatGPT — clean, modern, calm.
   The retro Netscape look stays on /, /free, /vault, /memes.
   ============================================================ */

/* Override the route-level dark theme set earlier (~line 5162) */
body[data-ui-route="agent"] {
  color: #1f1f23;
  background: #fafaf6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-ui-route="agent"] #agentLab.agent-next {
  background: #fafaf6;
  color: #1f1f23;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
}
/* ID-prefixed overrides (specificity 1,X,Y) to beat the route-level
   .agent-chat-form / .agent-prompt-chips / button selectors at lines
   5680-5726 which would otherwise dark-theme our composer. */
#agentLab .agent-next__chip {
  min-height: auto;
  background: #fafaf6;
  border: 1px solid #ece9df;
  color: #6b6b70;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
#agentLab .agent-next__chip strong { color: #1f1f23; font-weight: 600; }
#agentLab .agent-next__chip:hover {
  background: #fff;
  border-color: #c8c3b4;
  color: #1f1f23;
}
#agentLab .agent-next__chip--add {
  background: transparent;
  border-style: dashed;
  color: #615e57;
}

#agentLab .agent-next__send {
  min-height: auto;
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 10px;
  letter-spacing: -0.005em;
}
#agentLab .agent-next__send:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

#agentLab .agent-next__attach {
  min-height: auto;
  background: #fafaf6;
  border: 1px solid #ece9df;
  color: #404048;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
}
#agentLab .agent-next__attach:hover {
  background: #f4f0e9;
  border-color: #c8c3b4;
  color: #1f1f23;
}

#agentLab .agent-next__brand-actions button {
  min-height: auto;
  background: #fff;
  border: 1px solid #ece9df;
  color: #1f1f23;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 8px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
#agentLab .agent-next__brand-actions button:hover {
  background: #faf7f0;
  border-color: #d4cfbe;
  color: #1f1f23;
}
#agentLab .agent-next__brand-actions button[type="submit"] {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  font-weight: 600;
}
#agentLab .agent-next__brand-actions button[type="submit"]:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

#agentLab .agent-next__msg .agent-prompt-chips button {
  min-height: auto;
  background: #fff;
  border: 1px solid #ece9df;
  color: #404048;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
}
#agentLab .agent-next__msg .agent-prompt-chips button:hover {
  background: #faf7f0;
  border-color: #d4cfbe;
  color: #1f1f23;
}

/* Tool-toggle, icon-btn, chrome-btn (also caught by legacy button rules) */
#agentLab .agent-next__tool-toggle {
  min-height: auto;
  background: transparent;
  border: 1px solid #ece9df;
  color: #6b6b70;
  width: 26px;
  height: 22px;
  font-size: 11px;
  border-radius: 6px;
  padding: 0;
  font-weight: 500;
}
#agentLab .agent-next__tool-toggle:hover {
  background: #faf7f0;
  border-color: #c8c3b4;
  color: #1f1f23;
}
#agentLab .agent-next__icon-btn {
  min-height: auto;
  background: transparent;
  border: 1px solid #e0dccf;
  color: #6b6b70;
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 500;
}
#agentLab .agent-next__icon-btn:hover {
  background: #faf7f0;
  border-color: #c8c3b4;
  color: #1f1f23;
}
#agentLab .agent-next__chrome-btn {
  min-height: auto;
  background: transparent;
  border: 1px solid transparent;
  color: #404048;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
}
#agentLab .agent-next__chrome-btn:hover {
  background: #f1ede4;
  border-color: transparent;
  color: #1f1f23;
}

/* Variant gallery + action buttons (also affected) */
#agentLab .agent-next__variants button {
  min-height: auto;
  font-size: 16px;
  font-weight: 600;
  padding: 6px;
  background: #fff;
  border: 1px solid #ece9df;
  color: #1f1f23;
  border-radius: 10px;
}
#agentLab .agent-next__variants button.is-active {
  border-color: #ff1bbd;
  background: #fdf2f8;
  box-shadow: 0 0 0 2px rgba(255, 27, 189, 0.18);
}
#agentLab .agent-next__act {
  min-height: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 8px;
  border-radius: 8px;
}
#agentLab .agent-next__act-thin {
  min-height: auto;
  font-size: 11px;
  padding: 7px 6px;
}
#agentLab .agent-next__act--pin { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
#agentLab .agent-next__act--regen { color: #92400e; border-color: #fde68a; background: #fffbeb; }
#agentLab .agent-next__act--reject { color: #991b1b; border-color: #fecaca; background: #fef2f2; }

.agent-next.agent-platform,
.agent-platform.agent-next {
  display: block;
  padding: 0;
  margin: 0;
  background: #fafaf6;
  border: 0;
  border-radius: 0;
  color: #1f1f23;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

.agent-next *,
.agent-next *::before,
.agent-next *::after { box-sizing: border-box; }

.agent-next a { color: #db2777; text-decoration: none; }
.agent-next a:hover { text-decoration: underline; }
/* Override link color for navigation-style chrome buttons */
.agent-next a.agent-next__chrome-btn { color: #404048; text-decoration: none; }
.agent-next a.agent-next__chrome-btn:hover { color: #1f1f23; text-decoration: none; }

/* Top chrome — Claude-style minimal sticky bar */
.agent-next__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(250, 250, 246, 0.92);
  border-bottom: 1px solid #ece9df;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.agent-next__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1f1f23;
  flex-wrap: wrap;
}
.agent-next__brand strong {
  color: #1f1f23;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.agent-next__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b6b70;
  font-size: 13px;
}
.agent-next__crumb-sep { color: #c0bdb1; font-size: 11px; }
.agent-next__crumb-thread { color: #1f1f23; font-weight: 500; }

.agent-next__throbber {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
  animation: agent-next-pulse 1.6s ease-in-out infinite;
}
@keyframes agent-next-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.agent-next__chrome-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.agent-next__chrome-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 7px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #404048;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.agent-next__chrome-btn:hover {
  background: #f1ede4;
  color: #1f1f23;
  text-decoration: none;
}

/* Three-pane layout */
.agent-next__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 440px;
  height: calc(100vh - 60px);
  min-height: 600px;
  background: #fafaf6;
}
.agent-next__main { min-height: 0; }
.agent-next__thread { min-height: 0; }

/* Rails */
.agent-next__rail {
  background: #f4f0e9;
  border-right: 1px solid #ece9df;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.agent-next__rail--right {
  background: #f9f7f1;
  border-right: none;
  border-left: 1px solid #ece9df;
  padding: 18px;
}

/* Panels */
.agent-next__panel {
  border: 1px solid #ece9df;
  background: #fff;
  border-radius: 12px;
  font-size: 13px;
  color: #1f1f23;
  box-shadow: 0 1px 2px rgba(20, 20, 0, 0.02);
}
.agent-next__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.agent-next__panel > summary.agent-next__panel-head {
  border-bottom: 1px solid transparent;
}
details.agent-next__panel[open] > summary.agent-next__panel-head {
  border-bottom-color: #f0ece2;
}
summary.agent-next__panel-head::-webkit-details-marker { display: none; }
summary.agent-next__panel-head::marker { display: none; }
summary.agent-next__panel-head::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid #615e57;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: 6px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
details[open] > summary.agent-next__panel-head::before {
  transform: rotate(90deg);
}

.agent-next__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #615e57;
}

.agent-next__icon-btn {
  background: transparent;
  border: 1px solid #e0dccf;
  color: #6b6b70;
  font-family: inherit;
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.4;
}
.agent-next__icon-btn:hover {
  background: #faf7f0;
  border-color: #c8c3b4;
  color: #1f1f23;
}

/* Threads list */
.agent-next__threads {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.agent-next__threads li {
  list-style: none;
}
.agent-next__thread-link {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.agent-next__thread-link:hover { background: #faf7f0; }
.agent-next__threads li.is-active .agent-next__thread-link {
  background: #fff;
  border-color: #ece9df;
  box-shadow: 0 1px 2px rgba(20, 20, 0, 0.04);
}
.agent-next__thread-link strong {
  font-size: 13px;
  color: #1f1f23;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.agent-next__thread-link span {
  font-size: 11px;
  color: #615e57;
  font-weight: 400;
}

/* Brand context */
.agent-next__brand-tag {
  font-size: 11px;
  color: #db2777;
  font-weight: 500;
  text-transform: lowercase;
}
.agent-next__brand-form {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}
.agent-next__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.agent-next__field--wide { grid-column: 1 / -1; }
.agent-next__field > span {
  font-size: 11px;
  font-weight: 600;
  color: #6b6b70;
  text-transform: none;
  letter-spacing: 0;
}
.agent-next__field input,
.agent-next__field select,
.agent-next__field textarea {
  background: #fff;
  color: #1f1f23;
  border: 1px solid #ece9df;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 8px;
  width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.agent-next__field input:hover,
.agent-next__field select:hover,
.agent-next__field textarea:hover { border-color: #d4cfbe; }
.agent-next__field input:focus,
.agent-next__field select:focus,
.agent-next__field textarea:focus {
  outline: none;
  border-color: #ff1bbd;
  box-shadow: 0 0 0 3px rgba(255, 27, 189, 0.12);
}
.agent-next__field textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

.agent-next__brand-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.agent-next__brand-actions button {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px;
  border: 1px solid #ece9df;
  background: #fff;
  color: #1f1f23;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.agent-next__brand-actions button:hover {
  background: #faf7f0;
  border-color: #d4cfbe;
}
.agent-next__brand-actions button[type="submit"] {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
  font-weight: 600;
}
.agent-next__brand-actions button[type="submit"]:hover {
  background: #000;
  border-color: #000;
}

/* Readiness */
.agent-next__readiness .operator-status-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  margin: 0;
}
.agent-next__readiness .operator-status-grid span {
  font-size: 12px;
  color: #404048;
  background: #faf7f0;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 2px solid #d97706;
  font-weight: 500;
}

/* Library */
.agent-next__library {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-next__library input {
  background: #fff;
  border: 1px solid #ece9df;
  color: #1f1f23;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 8px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.agent-next__library input:focus {
  outline: none;
  border-color: #ff1bbd;
  box-shadow: 0 0 0 3px rgba(255, 27, 189, 0.12);
}
.agent-next .operator-library-list {
  font-size: 12px;
  color: #615e57;
  max-height: 180px;
  overflow-y: auto;
}

/* Center pane */
.agent-next__main {
  display: flex;
  flex-direction: column;
  background: #fff;
  min-width: 0;
  overflow: hidden;
}

/* Plan card — Claude-style subtle box */
.agent-next__plan {
  margin: 18px 24px 0;
  padding: 14px 18px;
  border: 1px solid #ece9df;
  background: #faf7f0;
  border-radius: 12px;
}
.agent-next__plan header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.agent-next__plan ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agent-next__plan li {
  font-size: 13px;
  color: #6b6b70;
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.45;
}
.agent-next__plan li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8c3b4;
  align-self: center;
  flex-shrink: 0;
}
.agent-next__plan li.is-done { color: #1f1f23; }
.agent-next__plan li.is-done::before { background: #16a34a; }
.agent-next__plan li.is-running { color: #1f1f23; font-weight: 500; }
.agent-next__plan li.is-running::before {
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
  animation: agent-next-pulse 1.6s ease-in-out infinite;
}

/* Chat thread */
.agent-next__thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  background: #fff;
  scroll-behavior: smooth;
}
.agent-next__msg {
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid transparent;
  color: #1f1f23;
  max-width: 760px;
}
.agent-next__msg header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.agent-next__msg header strong {
  font-size: 13px;
  font-weight: 600;
  color: #1f1f23;
  letter-spacing: -0.005em;
}
.agent-next__msg header span {
  font-size: 11px;
  color: #615e57;
}
.agent-next__msg p {
  margin: 0;
  line-height: 1.55;
  font-size: 15px;
  color: #1f1f23;
}
.agent-next__msg--user {
  background: #faf7f0;
  border-color: #ece9df;
  margin-left: auto;
}
.agent-next__msg--agent {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  border: none;
  max-width: none;
}

/* Tool-call cards — ChatGPT/Claude-style */
.agent-next__tool {
  border: 1px solid #ece9df;
  background: #fff;
  border-radius: 12px;
  font-size: 13px;
  max-width: 720px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 20, 0, 0.02);
}
.agent-next__tool[data-state="thinking"] { border-left: 2px solid #d97706; }
.agent-next__tool[data-state="block"] { border-left: 2px solid #dc2626; }

.agent-next__tool > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 13px;
  background: #fafaf6;
  border-bottom: 1px solid #f0ece2;
}
.agent-next__tool > header strong {
  color: #1f1f23;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.agent-next__tool-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8c3b4;
  display: inline-block;
  flex-shrink: 0;
}
.agent-next__tool[data-state="thinking"] .agent-next__tool-icon,
.agent-next__tool-icon[data-state="thinking"] {
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
  animation: agent-next-pulse 1.6s ease-in-out infinite;
}
.agent-next__tool[data-state="done"] .agent-next__tool-icon,
.agent-next__tool-icon[data-state="done"] { background: #16a34a; }
.agent-next__tool[data-state="block"] .agent-next__tool-icon,
.agent-next__tool-icon[data-state="block"] { background: #dc2626; }
.agent-next__tool-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid #ece9df;
  color: #6b6b70;
  width: 26px;
  height: 22px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.agent-next__tool-toggle:hover {
  background: #faf7f0;
  border-color: #c8c3b4;
  color: #1f1f23;
}
.agent-next__tool-body {
  padding: 12px 16px 14px;
  font-size: 13px;
  color: #404048;
}
.agent-next__sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agent-next__sources li {
  display: grid;
  grid-template-columns: 22px 130px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.45;
}
.agent-next__sources li > span {
  font-size: 10px;
  color: #615e57;
  border: 1px solid #ece9df;
  border-radius: 4px;
  padding: 1px 4px;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
}
.agent-next__sources a {
  color: #1f1f23;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #d4cfbe;
}
.agent-next__sources a:hover {
  color: #db2777;
  border-bottom-color: #db2777;
  text-decoration: none;
}
.agent-next__sources em {
  color: #6b6b70;
  font-style: normal;
}
.agent-next__templates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-next__templates li {
  padding: 5px 10px;
  border: 1px solid #ece9df;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fafaf6;
  font-size: 12px;
  color: #1f1f23;
  font-weight: 500;
}
.agent-next__templates small {
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.agent-next__streaming {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: #1f1f23;
  white-space: pre-wrap;
  background: #faf7f0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #f0ece2;
  line-height: 1.55;
}
.agent-next__cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #d97706;
  vertical-align: text-bottom;
  animation: agent-next-blink 0.9s steps(2) infinite;
  margin-left: 1px;
  border-radius: 1px;
}
@keyframes agent-next-blink { 50% { opacity: 0.2; } }

/* State pills */
.agent-next__pill {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  border: none;
}
.agent-next__pill[data-state="thinking"] { color: #92400e; background: #fef3c7; }
.agent-next__pill[data-state="done"] { color: #166534; background: #dcfce7; }
.agent-next__pill[data-state="needs-review"] { color: #9d174d; background: #fce7f3; }
.agent-next__pill[data-state="block"] { color: #991b1b; background: #fee2e2; }

/* Follow-up chips */
.agent-next__msg .agent-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.agent-next__msg .agent-prompt-chips button {
  background: #fff;
  border: 1px solid #ece9df;
  color: #404048;
  font-size: 13px;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.agent-next__msg .agent-prompt-chips button:hover {
  background: #faf7f0;
  border-color: #d4cfbe;
  color: #1f1f23;
}

/* Composer — Claude-style floating input */
.agent-next__composer {
  border-top: 1px solid #ece9df;
  padding: 14px 24px 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.agent-next__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-next__chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #6b6b70;
  padding: 4px 10px;
  border: 1px solid #ece9df;
  background: #fafaf6;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s, border-color 0.12s;
  text-transform: none;
  letter-spacing: 0;
}
.agent-next__chip:hover {
  background: #fff;
  border-color: #c8c3b4;
  color: #1f1f23;
}
.agent-next__chip strong { color: #1f1f23; font-weight: 600; }
.agent-next__chip--add {
  color: #615e57;
  border-style: dashed;
  background: transparent;
}
.agent-next__composer textarea {
  background: #fff;
  color: #1f1f23;
  border: 1px solid #d4cfbe;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  border-radius: 12px;
  resize: vertical;
  min-height: 62px;
  width: 100%;
  line-height: 1.55;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-shadow: 0 1px 2px rgba(20, 20, 0, 0.03);
}
.agent-next__composer textarea:focus {
  outline: none;
  border-color: #ff1bbd;
  box-shadow: 0 0 0 3px rgba(255, 27, 189, 0.12);
}
.agent-next__composer textarea::placeholder { color: #615e57; }
.agent-next__composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.agent-next__attach {
  background: #fafaf6;
  border: 1px solid #ece9df;
  color: #404048;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
}
.agent-next__attach:hover {
  background: #f4f0e9;
  border-color: #c8c3b4;
}
.agent-next__hint {
  flex: 1;
  font-size: 11px;
  color: #615e57;
  text-align: center;
  font-family: inherit;
  letter-spacing: 0;
}
.agent-next__send {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, transform 0.06s;
  letter-spacing: -0.005em;
}
.agent-next__send:hover {
  background: #000;
  border-color: #000;
}
.agent-next__send:active { transform: translateY(1px); }

/* Status */
.agent-next__status {
  padding: 8px 24px;
  font-size: 11px;
  color: #615e57;
  background: #fafaf6;
  border-top: 1px solid #ece9df;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
}

/* Right rail / artifact */
.agent-next__artifact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.agent-next__meme {
  margin: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 20, 0, 0.06), 0 1px 3px rgba(20, 20, 0, 0.04);
  border: 1px solid #ece9df;
}
.agent-next__meme-canvas {
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agent-next__meme-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
  background: #f9f7f1;
  padding: 14px 12px;
  border: 1px solid #f0ece2;
  border-radius: 8px;
}
.agent-next__meme-face {
  width: 90px;
  height: 90px;
  background: #fce7f3;
  border: 1px solid #f9a8d4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agent-next__meme-glyph { font-size: 48px; line-height: 1; }
.agent-next__meme-face[data-face="approve"] {
  background: #dcfce7;
  border-color: #86efac;
}
.agent-next__meme-cap {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 17px;
  color: #1f1f23;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.agent-next__meme figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  background: #fafaf6;
  border-top: 1px solid #f0ece2;
  font-size: 12px;
  color: #6b6b70;
  font-family: inherit;
}
.agent-next__meme figcaption strong { color: #1f1f23; font-weight: 600; }

/* Variants gallery */
.agent-next__variants {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.agent-next__variants button {
  aspect-ratio: 1;
  border: 1px solid #ece9df;
  background: #fff;
  color: #1f1f23;
  font-size: 16px;
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px;
  font-weight: 600;
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.agent-next__variants button small {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #615e57;
  font-weight: 600;
}
.agent-next__variants button:hover { border-color: #c8c3b4; }
.agent-next__variants button.is-active {
  border-color: #ff1bbd;
  background: #fdf2f8;
  box-shadow: 0 0 0 2px rgba(255, 27, 189, 0.18);
}
.agent-next__variants button.is-active small { color: #db2777; }

/* Policy */
.agent-next__policy {
  border: 1px solid #f0ece2;
  border-left: 3px solid #db2777;
  padding: 12px 14px;
  background: #fdf2f8;
  border-radius: 10px;
  font-size: 13px;
  color: #1f1f23;
}
.agent-next__policy[data-policy="warn"] { border-left-color: #db2777; background: #fdf2f8; }
.agent-next__policy[data-policy="allow"] { border-left-color: #16a34a; background: #f0fdf4; }
.agent-next__policy[data-policy="block"] { border-left-color: #dc2626; background: #fef2f2; }
.agent-next__policy strong {
  display: block;
  margin: 4px 0;
  color: #1f1f23;
  font-size: 13px;
  font-weight: 600;
}
.agent-next__policy p {
  margin: 4px 0 0;
  line-height: 1.5;
  font-size: 12px;
  color: #404048;
}

/* Actions */
.agent-next__actions { display: flex; gap: 6px; }
.agent-next__act {
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 9px 8px;
  border: 1px solid #ece9df;
  background: #fff;
  color: #1f1f23;
  cursor: pointer;
  border-radius: 8px;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.12s, border-color 0.12s;
}
.agent-next__act:hover { border-color: #c8c3b4; background: #faf7f0; }
.agent-next__act--pin {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.agent-next__act--pin:hover { background: #dcfce7; border-color: #86efac; }
.agent-next__act--regen {
  color: #92400e;
  border-color: #fde68a;
  background: #fffbeb;
}
.agent-next__act--regen:hover { background: #fef3c7; border-color: #fcd34d; }
.agent-next__act--reject {
  color: #991b1b;
  border-color: #fecaca;
  background: #fef2f2;
}
.agent-next__act--reject:hover { background: #fee2e2; border-color: #fca5a5; }

.agent-next__actions--secondary { gap: 6px; }
.agent-next__act-thin {
  flex: 1;
  font-family: inherit;
  font-size: 11px;
  padding: 7px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b6b70;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.agent-next__act-thin:hover {
  color: #1f1f23;
  background: #faf7f0;
  border-color: #ece9df;
}

/* History */
.agent-next__history { font-size: 13px; }
.agent-next__history summary {
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
}
.agent-next__history summary::-webkit-details-marker { display: none; }
.agent-next__history summary::marker { display: none; }
.agent-next__history summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid #615e57;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: 6px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.agent-next__history[open] summary::before { transform: rotate(90deg); }
.agent-next__history ol {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.agent-next__history li {
  padding: 6px 10px;
  margin: 2px 0;
  font-size: 12px;
  color: #6b6b70;
  border-left: 2px solid #ece9df;
  background: #fafaf6;
  border-radius: 0 6px 6px 0;
  font-family: inherit;
  letter-spacing: 0;
}
.agent-next__history li:first-child {
  border-left-color: #ff1bbd;
  color: #1f1f23;
  font-weight: 500;
}

/* Trend radar */
.agent-next__panel--rail { background: #fff; }
.agent-next__intel {
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.agent-next__intel article {
  background: #fafaf6;
  border: 1px solid #f0ece2;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-next__intel span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #615e57;
}
.agent-next__intel strong { font-size: 13px; color: #1f1f23; font-weight: 600; }
.agent-next__intel small { font-size: 10px; color: #6b6b70; line-height: 1.35; }
.agent-next__signals {
  padding: 10px 14px 14px;
  font-size: 12px;
  color: #6b6b70;
}
.agent-next__empty { font-size: 12px; color: #615e57; margin: 0; }

/* Hide legacy compat containers */
.agent-next .agent-next__legacy[hidden] { display: none !important; }
.agent-next .agent-next__legacy-context[hidden] { display: none !important; }

/* Responsive */
@media (max-width: 1280px) {
  .agent-next__layout { grid-template-columns: 260px minmax(0, 1fr) 400px; }
}
@media (max-width: 1080px) {
  .agent-next__layout { grid-template-columns: 240px minmax(0, 1fr) 360px; }
  .agent-next__brand-form { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .agent-next__layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .agent-next__rail {
    border-right: none;
    border-bottom: 1px solid #ece9df;
    max-height: 360px;
  }
  .agent-next__rail--right {
    border-left: none;
    border-top: 1px solid #ece9df;
    max-height: none;
  }
  .agent-next__chrome { padding: 10px 14px; }
  .agent-next__plan, .agent-next__thread { padding-left: 16px; padding-right: 16px; }
  .agent-next__composer { padding: 12px 16px; }
}

/* Scrollbar — cream theme */
.agent-next *::-webkit-scrollbar { width: 10px; height: 10px; }
.agent-next *::-webkit-scrollbar-track { background: transparent; }
.agent-next *::-webkit-scrollbar-thumb {
  background: #e0dccf;
  border-radius: 6px;
  border: 2px solid #fafaf6;
}
.agent-next *::-webkit-scrollbar-thumb:hover { background: #c8c3b4; }

.agent-next .operator-eyebrow {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #615e57;
}

/* Focus-visible — strong, consistent across all interactive elements */
.agent-next button:focus-visible,
.agent-next a:focus-visible,
.agent-next summary:focus-visible {
  outline: 2px solid #ff1bbd;
  outline-offset: 2px;
  border-radius: 8px;
}
.agent-next__thread-link:focus-visible,
.agent-next__chip:focus-visible,
.agent-next__variants button:focus-visible,
.agent-next__act:focus-visible,
.agent-next__act-thin:focus-visible,
.agent-next__act-thin:focus-visible,
.agent-next__msg .agent-prompt-chips button:focus-visible,
.agent-next__chrome-btn:focus-visible,
.agent-next__icon-btn:focus-visible,
.agent-next__send:focus-visible,
.agent-next__attach:focus-visible,
.agent-next__brand-actions button:focus-visible,
.agent-next__tool-toggle:focus-visible {
  outline: 2px solid #ff1bbd;
  outline-offset: 2px;
}
.agent-next__send:focus-visible {
  outline-color: #1a1a1a;
}
/* Inputs already have ring-style focus via box-shadow; reinforce with offset */
.agent-next__field input:focus-visible,
.agent-next__field select:focus-visible,
.agent-next__field textarea:focus-visible,
.agent-next__library input:focus-visible,
.agent-next__composer textarea:focus-visible {
  outline: none;
}

/* 768px breakpoint — tablet portrait */
@media (max-width: 768px) {
  .agent-next__chrome {
    padding: 10px 14px;
    gap: 10px;
  }
  .agent-next__chrome-actions {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    margin: 0 -4px;
  }
  .agent-next__chrome-btn { flex-shrink: 0; }
  .agent-next__brand-form { grid-template-columns: 1fr; }
  .agent-next__plan, .agent-next__thread, .agent-next__composer {
    padding-left: 14px;
    padding-right: 14px;
  }
  .agent-next__msg { padding: 12px 14px; }
  .agent-next__msg p { font-size: 14px; }
  .agent-next__variants { gap: 6px; }
  .agent-next__actions, .agent-next__actions--secondary { flex-wrap: wrap; }
  .agent-next__rail { max-height: 320px; padding: 12px; }
  .agent-next__rail--right { padding: 14px; }
  .agent-next__hint { display: none; }
}

/* High-specificity overrides for the route-scoped legacy rules
   ([data-ui-route="agent"] .agent-message at lines 5825+) which would
   otherwise dark-theme our messages and prompt-chips. */
body[data-ui-route="agent"] .agent-next__msg--agent {
  max-width: none;
  padding: 14px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #1f1f23;
}
body[data-ui-route="agent"] .agent-next__msg--user {
  max-width: 760px;
  padding: 14px 18px;
  border: 1px solid #ece9df;
  border-radius: 12px;
  background: #faf7f0;
  color: #1f1f23;
  margin-left: auto;
}
body[data-ui-route="agent"] .agent-next__msg strong {
  color: #1f1f23;
  font-size: 13px;
  font-weight: 600;
}
body[data-ui-route="agent"] .agent-next__msg p {
  color: #1f1f23;
  font-size: 15px;
  line-height: 1.55;
}
body[data-ui-route="agent"] .agent-next__msg .agent-prompt-chips {
  margin-top: 14px;
  gap: 6px;
}
body[data-ui-route="agent"] .agent-next__msg .agent-prompt-chips button {
  background: #fff;
  border: 1px solid #ece9df;
  color: #404048;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 500;
}
body[data-ui-route="agent"] .agent-next__msg .agent-prompt-chips button:hover {
  background: #faf7f0;
  border-color: #d4cfbe;
  color: #1f1f23;
}

/* 480px — phone */
@media (max-width: 480px) {
  .agent-next__chrome { padding: 8px 12px; }
  .agent-next__brand strong { font-size: 13px; }
  .agent-next__breadcrumb { font-size: 12px; }
  .agent-next__plan { margin: 14px 12px 0; padding: 12px 14px; }
  .agent-next__thread { padding: 14px 12px 18px; }
  .agent-next__composer { padding: 12px; }
  .agent-next__send { padding: 9px 16px; }
  .agent-next__variants { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .agent-next__variants button { font-size: 14px; }
}

/* ==========================================================================
   Meme of the Day — featured drop panel between brand-row and content-grid.
   ========================================================================== */
.meme-of-day-panel {
  display: grid;
  gap: 10px;
  margin: 10px 6px 12px;
  padding: 10px 12px 12px;
  background:
    linear-gradient(135deg, #ffe7fb 0%, #d2f1ff 56%, #fffacc 100%);
}

.meme-of-day-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.meme-of-day-head h2 {
  margin: 0;
  /* the header sits on a near-black bar — navy fill was nearly invisible; bright
     cyan matches the other panel title bars and reads cleanly */
  color: var(--cyan);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0;
}

.meme-of-day-date {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--pink);
}

.meme-of-day-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 220px;
}

.meme-of-day-stats span {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 6px;
  color: white;
  background: linear-gradient(180deg, #0c6eff, #061563);
  border: 2px solid #111;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

/* display:grid above beats the UA [hidden] rule — the zero-count hide in
   updateTodayStat() needs this to actually take effect. */
.meme-of-day-stats span[hidden],
.format-stats span[hidden] {
  display: none;
}

.meme-of-day-stats strong {
  display: block;
  color: var(--yellow);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.32rem;
  line-height: 0.95;
  text-shadow: 2px 2px #00113b;
}

.meme-of-day-body {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.meme-of-day-image {
  display: block;
  min-height: 180px;
  border: 4px ridge #fff;
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 8px, transparent 8px 16px),
    linear-gradient(135deg, #ffd8f3, #d3f4ff 50%, #fff5b8);
  box-shadow: 7px 8px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.meme-of-day-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: contain;
}

.meme-of-day-copy {
  display: grid;
  gap: 8px;
}

.meme-of-day-topic {
  margin: 0;
  color: var(--navy);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.meme-of-day-template {
  margin: 0;
  padding: 5px 7px;
  color: #fff;
  background: var(--navy);
  border: 2px inset #fff;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  align-self: start;
  width: max-content;
  max-width: 100%;
}

.meme-of-day-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 760px) {
  .meme-of-day-head {
    grid-template-columns: 1fr;
  }
  .meme-of-day-body {
    grid-template-columns: 1fr;
  }
  .meme-of-day-stats {
    min-width: 0;
  }
}

/* ==========================================================================
   Meme Maker v2 — template-picker + multi-slot editor + server-rendered preview.
   ========================================================================== */
.meme-maker-panel.maker-v2 {
  padding-bottom: 14px;
}

.maker-v2-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.05fr);
  gap: 12px;
  padding: 10px;
}

.maker-v2-picker {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border: 4px ridge #fff;
  background: linear-gradient(135deg, #fff7d4, #ddf7ff 56%, #ffdff5);
  color: var(--ink);
  min-height: 360px;
}

.maker-v2-picker-head {
  display: grid;
  gap: 6px;
}

.maker-v2-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  /* Without an explicit auto-row size, the cards' overflow:hidden collapses each
     row to ~28px, clipping the thumbnail and hiding the name. Pin a real minimum. */
  grid-auto-rows: minmax(136px, max-content);
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  border: 3px inset #fff;
  background: rgba(255, 255, 255, 0.62);
}

.maker-v2-picker-foot {
  display: flex;
  justify-content: center;
}

.maker-v2-card {
  display: grid;
  grid-template-rows: 78px auto auto;
  gap: 4px;
  padding: 5px;
  border: 3px outset #fff;
  background: linear-gradient(#ffffff, #d6e8ff);
  color: #111;
  text-align: left;
  min-width: 0;
  min-height: 136px;
  overflow: hidden;
}

.maker-v2-card.is-active {
  border-style: inset;
  background: linear-gradient(#005eff, #061563);
  color: white;
}

.maker-v2-card.is-active strong,
.maker-v2-card.is-active small {
  color: white;
}

.maker-v2-card:hover {
  transform: translate(-1px, -1px);
}

.maker-v2-card:active {
  transform: translate(1px, 1px);
}

.maker-v2-card-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 78px;
  border: 2px solid #111;
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.14) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, #fff200, #ff1bbd 50%, #00e7ff);
  overflow: hidden;
  cursor: zoom-in;
}

/* The image is overlaid on top of the always-present labeled fallback tile. If it
   fails to load, JS adds .is-hidden and the labeled fallback shows through.
   object-fit: contain (not cover) so tall/wide templates show whole — no clipped
   captions — while the checkerboard-tinted card behind it keeps the tile filled
   and the grid uniform (same letterbox idiom as .maker-v2-preview-frame). */
.maker-v2-card-thumb-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.12s ease;
}

.maker-v2-card-thumb:hover .maker-v2-card-thumb-img {
  transform: scale(1.03);
}

.motion-off .maker-v2-card-thumb-img,
.motion-off .maker-v2-card-thumb:hover .maker-v2-card-thumb-img {
  transition: none;
  transform: none;
}

.maker-v2-card-thumb-img.is-hidden {
  display: none;
}

.maker-v2-card-thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.6rem;
  text-shadow: 2px 2px #000;
  letter-spacing: 0;
}

.maker-v2-card strong {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 0.86rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.maker-v2-card small {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.86;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Retry chip shown in the preview bay when a render fails (timeout / error). */
.maker-v2-retry {
  margin-top: 8px;
  align-self: start;
  padding: 4px 14px;
  font-size: 0.82rem;
}

/* "Develop into frame" reveal — the finished meme resolves like a Polaroid
   instead of a hard cut. Respects prefers-reduced-motion. */
.maker-v2-develop {
  animation: makerV2Develop 520ms ease-out;
}

@keyframes makerV2Develop {
  0% { opacity: 0; filter: brightness(2.2) saturate(0.2) blur(6px); transform: scale(0.97); }
  60% { opacity: 1; filter: brightness(1.1) saturate(1.05) blur(0); }
  100% { opacity: 1; filter: none; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .maker-v2-develop { animation: none; }
  .maker-v2-card-thumb-img,
  .maker-v2-card-thumb:hover .maker-v2-card-thumb-img {
    transition: none;
    transform: none;
  }
}

.maker-v2-editor {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 4px ridge #fff;
  background: linear-gradient(135deg, #ddf7ff, #ffddfb 56%, #fff7b8);
  color: #111;
}

.maker-v2-selected-head {
  display: grid;
  gap: 4px;
}

.maker-v2-selected-head strong {
  display: block;
  color: var(--navy);
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.65rem);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.04;
}

.maker-v2-slots {
  display: grid;
  gap: 8px;
}

.maker-v2-slot-row {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.62);
  border: 3px inset #fff;
}

.maker-v2-slot-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.maker-v2-slot-name {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0;
  color: var(--navy);
}

.maker-v2-slot-key {
  padding: 1px 4px;
  background: var(--navy);
  color: var(--yellow);
  border: 1px solid #111;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: lowercase;
}

.maker-v2-slot-input {
  width: 100%;
  min-height: 42px;
  padding: 7px;
  border: 3px inset #fff;
  background: white;
  color: #111;
  font-weight: 800;
  font-family: var(--ui);
  resize: vertical;
}

.maker-v2-slot-counter {
  justify-self: end;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--navy);
  opacity: 0.7;
}

.maker-v2-preview-shell {
  display: grid;
  gap: 6px;
}

.maker-v2-preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 12px;
  border: 4px inset #fff;
  background:
    linear-gradient(45deg, rgba(0, 0, 0, 0.12) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.12) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.12) 25%, transparent 25% 75%, rgba(0, 0, 0, 0.12) 75%),
    #f4f4f4;
  background-position: 0 0, 14px 14px, 0 0;
  background-size: 28px 28px;
}

.maker-v2-preview-image {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border: 5px ridge #e9f7ff;
  background: #111;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, 0.42);
  cursor: zoom-in;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.maker-v2-preview-image:hover {
  transform: translate(-1px, -1px);
  box-shadow: 8px 9px 0 rgba(0, 0, 0, 0.42);
}

.motion-off .maker-v2-preview-image,
.motion-off .maker-v2-preview-image:hover {
  transition: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .maker-v2-preview-image,
  .maker-v2-preview-image:hover {
    transition: none;
    transform: none;
  }
}

.maker-v2-preview-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px 12px;
  color: var(--navy);
  font-family: var(--mono);
}

.maker-v2-preview-placeholder strong {
  display: block;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.maker-v2-preview-spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  background: rgba(255, 251, 209, 0.84);
  border: 3px ridge #fff;
}

.maker-v2-preview-spinner p {
  margin: 0;
  font-family: var(--mono);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 0;
}

.maker-v2-spinner-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 3px;
  background: var(--pink);
  border: 2px solid #111;
  border-radius: 0;
  animation: makerSpinner 900ms infinite ease-in-out;
}

.maker-v2-spinner-dot:nth-child(2) {
  background: var(--cyan);
  animation-delay: 150ms;
}

.maker-v2-spinner-dot:nth-child(3) {
  background: var(--lime);
  animation-delay: 300ms;
}

@keyframes makerSpinner {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.maker-v2-preview-status {
  margin: 0;
  padding: 5px 8px;
  border: 2px inset #fff;
  background: var(--navy);
  color: var(--yellow);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.maker-v2-preview-status.is-error {
  color: var(--yellow);
  background: #8a0010;
}

.maker-v2-export-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.maker-v2-export-bar .cta {
  flex: 1 1 130px;
  min-height: 48px;
}

.maker-v2-export-bar .cta:disabled,
.maker-v2-export-bar button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ==========================================================================
   W2.1 — "let the agent take a swing" CTA + side-by-side result panel.
   ========================================================================== */
.maker-v2-swing-row {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.maker-v2-swing-cta {
  width: 100%;
  min-height: 52px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.maker-v2-swing-cta:disabled {
  opacity: 0.65;
  cursor: wait;
  filter: grayscale(0.3);
}

.maker-v2-swing-cta.is-loading span::after {
  content: "…";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: makerSwingDialingDots 1100ms steps(4) infinite;
}

@keyframes makerSwingDialingDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

.motion-off .maker-v2-swing-cta.is-loading span::after {
  animation: none;
  content: "...";
}

@media (prefers-reduced-motion: reduce) {
  .maker-v2-swing-cta.is-loading span::after {
    animation: none;
    content: "...";
  }
}

.maker-v2-swing-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 4px ridge #fff;
  background: linear-gradient(135deg, #101526, #1c2338 60%, #0b0e18);
  color: #f4f6ff;
}

.maker-v2-swing-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.maker-v2-swing-col {
  display: grid;
  gap: 6px;
  align-content: start;
}

.maker-v2-swing-col .format-eyebrow {
  color: var(--yellow);
  margin: 0;
}

.maker-v2-swing-media {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 6px;
  border: 3px inset #333;
  background: #05070d;
}

.maker-v2-swing-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.maker-v2-swing-textfallback {
  display: grid;
  gap: 4px;
  padding: 8px;
  color: #f4f6ff;
  font-family: var(--ui);
  font-weight: 700;
  text-align: center;
}

.maker-v2-swing-textfallback p {
  margin: 0;
}

.maker-v2-swing-caption {
  margin: 0;
  padding: 8px 10px;
  border: 2px inset #333;
  background: rgba(255, 255, 255, 0.06);
  color: #d7deff;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.4;
}

.maker-v2-swing-deploy {
  justify-self: start;
  min-height: 48px;
  padding: 10px 18px;
}

@media (max-width: 620px) {
  .maker-v2-swing-cols {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   W2.2 — post-render "APPROVED BY YOU" approval-ritual stamp (first render
   per browser only; localStorage-gated in JS).
   ========================================================================== */
.maker-v2-approval-stamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px;
  text-align: center;
  pointer-events: none;
  z-index: 3;
  animation: makerV2StampIn 480ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.maker-v2-approval-stamp.is-leaving {
  animation: makerV2StampOut 420ms ease-in both;
}

.maker-v2-approval-stamp-badge {
  padding: 10px 20px;
  border: 4px solid #7a5c00;
  border-radius: 6px;
  background: rgba(255, 242, 0, 0.92);
  color: #061563;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(1.3rem, 4vw, 2rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 0 0 3px rgba(6, 21, 99, 0.55), 4px 6px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-8deg);
}

.maker-v2-approval-stamp-note {
  max-width: 320px;
  margin: 0;
  padding: 6px 10px;
  background: rgba(6, 21, 99, 0.88);
  color: var(--yellow);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

@keyframes makerV2StampIn {
  0% { opacity: 0; transform: scale(1.9) rotate(-24deg); }
  60% { opacity: 1; transform: scale(0.94) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes makerV2StampOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.maker-v2-approval-stamp.is-static {
  animation: none;
}

.maker-v2-approval-stamp.is-static .maker-v2-approval-stamp-badge {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .maker-v2-approval-stamp {
    animation: none;
  }
  .maker-v2-approval-stamp.is-leaving {
    animation: none;
  }
  .maker-v2-approval-stamp-badge {
    transform: none;
  }
}

.maker-v2-legacy {
  margin: 10px;
  padding: 0;
  border: 3px dashed #555;
  background: rgba(255, 255, 255, 0.4);
}

.maker-v2-legacy[open] {
  background: rgba(255, 255, 255, 0.78);
}

.maker-v2-legacy > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--navy);
  background: #ffe9a0;
  list-style: none;
  text-transform: uppercase;
}

.maker-v2-legacy > summary::-webkit-details-marker { display: none; }
.maker-v2-legacy > summary::before { content: "▸ "; }
.maker-v2-legacy[open] > summary::before { content: "▾ "; }

@media (max-width: 760px) {
  .maker-v2-grid {
    grid-template-columns: 1fr;
  }
  .maker-v2-template-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    max-height: 320px;
  }
  .maker-v2-export-bar .cta {
    flex: 1 1 calc(50% - 8px);
  }
}

/* ==========================================================================
   Hosted Gallery — agent-made memes via /api/gallery + lightbox modal.
   ========================================================================== */
.hosted-gallery-view {
  padding-bottom: 16px;
}

.hosted-gallery-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.hosted-gallery-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.hosted-gallery-chip {
  padding: 4px 9px;
  border: 2px outset #fff;
  background: linear-gradient(#ffffff, #cfeaff);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hosted-gallery-chip.is-active {
  border-style: inset;
  background: linear-gradient(#005eff, #061563);
  color: white;
}

.hosted-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 3px inset #fff;
  background: rgba(255, 255, 255, 0.32);
}

.hosted-gallery-card {
  display: grid;
  grid-template-rows: 180px auto;
  gap: 0;
  padding: 0;
  border: 3px outset #fff;
  background: white;
  color: #111;
  text-align: left;
  overflow: hidden;
  min-width: 0;
}

.hosted-gallery-card:hover {
  transform: translate(-1px, -1px);
}

.hosted-gallery-card:active {
  transform: translate(1px, 1px);
  border-style: inset;
}

.hosted-gallery-card-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 180px;
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 8px, transparent 8px 16px),
    linear-gradient(135deg, #ffd8f3, #d3f4ff 50%, #fff5b8);
  overflow: hidden;
  border-bottom: 3px solid #111;
  cursor: zoom-in;
}

/* C-3: "Fresh Off The Press" badge on user-minted community memes. Sits over the
   thumbnail corner; monospace + hard black border keeps it in the retro chrome. */
.hosted-gallery-fresh-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  padding: 2px 7px;
  font-family: var(--mono, "Courier New", monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2a0f00;
  background: linear-gradient(#ffe08a, #ff9d2b);
  border: 2px solid #111;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.hosted-gallery-card.is-fresh {
  outline: 2px solid #ff9d2b;
  outline-offset: -2px;
}

/* C-4: reaction bar under each gallery card. In-frame retro chrome — beveled
   pill buttons, monospace counts, chunky black borders. */
.hosted-gallery-card-wrap {
  display: flex;
  flex-direction: column;
}
.hosted-gallery-reactions {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.04) 0 6px, transparent 6px 12px), #f3efe4;
  border-top: 2px solid #111;
}
.hosted-gallery-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--mono, "Courier New", monospace);
  font-size: 0.82rem;
  line-height: 1;
  color: #111;
  background: linear-gradient(#fff, #e7e2d4);
  border: 2px solid #111;
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
}
.hosted-gallery-react:hover {
  transform: translateY(-1px);
}
.hosted-gallery-react:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.35);
}
.hosted-gallery-react.is-reacted {
  background: linear-gradient(#ffe08a, #ff9d2b);
  border-color: #a24a00;
}
.hosted-gallery-react-emoji {
  font-size: 1rem;
}
.hosted-gallery-react-count {
  font-weight: 700;
  min-width: 0.7em;
  text-align: center;
}

/* object-fit: contain (not cover) so the finished meme — captions included —
   is never clipped; the tinted checkerboard behind (see .hosted-gallery-card-thumb)
   fills the fixed-height card so the grid still stays tidy and uniform. */
.hosted-gallery-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.12s ease;
}

.hosted-gallery-card:hover .hosted-gallery-card-thumb img {
  transform: scale(1.03);
}

.motion-off .hosted-gallery-card-thumb img,
.motion-off .hosted-gallery-card:hover .hosted-gallery-card-thumb img {
  transition: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hosted-gallery-card-thumb img,
  .hosted-gallery-card:hover .hosted-gallery-card-thumb img {
    transition: none;
    transform: none;
  }
}

.hosted-gallery-card-thumb-fallback {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 2.4rem;
  color: white;
  text-shadow: 3px 3px #000;
  letter-spacing: 0;
}

.hosted-gallery-card-meta {
  display: grid;
  gap: 4px;
  padding: 8px 10px 10px;
}

.hosted-gallery-card-template {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  background: var(--navy);
  color: white;
  border: 1px solid #111;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hosted-gallery-card-meta strong {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--navy);
}

.hosted-gallery-card-meta small {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink);
  opacity: 0.78;
}

.hosted-gallery-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.hosted-gallery-tag {
  padding: 1px 5px;
  background: #ffe9a0;
  border: 1px solid #111;
  color: #111;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: lowercase;
}

.hosted-gallery-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding: 0 10px;
}

.hosted-gallery-foot .cta {
  min-height: 44px;
  flex: 0 0 auto;
}

.chrome-warn {
  background: var(--yellow);
  color: #6b1500;
  border: 2px solid #6b1500;
  font-weight: 900;
}

.hosted-lightbox {
  width: min(880px, calc(100vw - 30px));
}

.hosted-lightbox-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: #f6f6f6;
}

/* Image-only mode: reused by the template-picker + maker-preview zoom (W1.2) —
   there's no gallery metadata (topic/captions/permalink) for those sources, so
   the meta pane is hidden and the image column takes the full width. */
.hosted-lightbox-body.is-image-only {
  grid-template-columns: minmax(0, 1fr);
}

.hosted-lightbox-body.is-image-only .hosted-lightbox-meta {
  display: none;
}

.hosted-lightbox-body.is-image-only .hosted-lightbox-image-wrap img {
  max-height: min(78vh, 720px);
}

.hosted-lightbox-image-wrap {
  display: grid;
  place-items: center;
  padding: 10px;
  border: 4px inset #fff;
  background: #1a1a1a;
}

.hosted-lightbox-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
}

.hosted-lightbox-meta {
  display: grid;
  gap: 9px;
  color: #111;
}

.hosted-lightbox-meta .format-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  color: var(--pink);
}

.hosted-lightbox-template {
  margin: 0;
  padding: 4px 6px;
  background: var(--navy);
  color: white;
  border: 1px solid #111;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 900;
  width: max-content;
  max-width: 100%;
}

.hosted-lightbox-date {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--navy);
  opacity: 0.86;
}

.hosted-lightbox-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hosted-lightbox-captions {
  display: grid;
  gap: 5px;
  padding: 7px;
  background: white;
  border: 3px inset #fff;
  max-height: 200px;
  overflow-y: auto;
}

.hosted-lightbox-caption-row {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 4px;
  background: #fafafa;
  border: 2px inset #ddd;
}

.hosted-lightbox-caption-row span {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--navy);
}

.hosted-lightbox-caption-row p {
  margin: 0;
  font-weight: 800;
  color: #111;
  word-break: break-word;
}

.hosted-lightbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.hosted-lightbox-actions .cta {
  flex: 1 1 calc(50% - 8px);
  min-height: 44px;
}

@media (max-width: 760px) {
  .hosted-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hosted-gallery-card {
    grid-template-rows: 140px auto;
  }
  .hosted-gallery-card-thumb {
    height: 140px;
  }
  .hosted-gallery-card-thumb-fallback {
    font-size: 1.8rem;
  }
  .hosted-lightbox-body {
    grid-template-columns: 1fr;
  }
  .hosted-lightbox-image-wrap img {
    max-height: 340px;
  }
}

@media (max-width: 420px) {
  .hosted-gallery-grid {
    grid-template-columns: 1fr;
  }
  .hosted-gallery-card {
    grid-template-rows: 200px auto;
  }
  .hosted-gallery-card-thumb {
    height: 200px;
  }
}

/* ==========================================================================
   T8b (2026-07-07, FOUNDER-CHOSEN "label + reorder + re-theme"):
   the fake demo panels (newspaper→video story, 1-2-3 generator, storyboard)
   are beloved canon FICTION — but they sat dressed as the product. Three
   moves, all additive:
     1. REORDER — made explicit here: the real maker leads (order -1 on
        landing, set in the route section above), the hosted gallery + vault
        follow (order 0), and the demo-tape fiction keeps its base order 1-4
        below them. No DOM moves.
     2. LABELS — every fiction panel wears a "DEMO TAPE" plate so no visitor
        mistakes the joke layer for the meme engine.
     3. RE-THEME — the fiction copy itself moved to the AI-dev wedge
        (index.html + script.js data arrays; cat-mayor-class content retired).
   Canon behavior (rickroll, styles, animations) untouched.
   ========================================================================== */
body[data-ui-route="landing"] .main-stage > .hosted-gallery-view,
body[data-ui-route="landing"] .main-stage > .public-vault-view {
  order: 0; /* explicit: real product surfaces before the fiction (1-4) */
}

.hero-card::before,
.how-panel::before,
.story-output::before {
  content: "▚ DEMO TAPE — 100% fake, click anyway";
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 3px 10px;
  font-family: var(--mono, "Courier New", monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #0b0b0b);
  background: var(--yellow, #fff200);
  border: 2px solid var(--shadow, #04102f);
  border-left: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #111 0 6px, var(--yellow, #fff200) 6px 12px) 10;
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--shadow, #04102f);
}

/* hero-card is a grid — the plate must span the full row, not one column. */
.hero-card::before {
  grid-column: 1 / -1;
}

/* ── L1 "watch it work" splice (2026-07-07) — the /platform teaser between the
   free maker and the hosted gallery. Real artifacts, no invented numbers. ── */
body[data-ui-route="landing"] .main-stage > #watchItWork { order: -1; }
/* free-generator view hides everything but the maker; keep the splice out too
   (covered by the existing :not(#memeMaker) rule — noted here for readers). */

.watch-it-work .wiw-strip {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.watch-it-work .wiw-strip li {
  padding: 8px 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  background: #fff;
  border: 2px solid var(--shadow, #04102f);
  border-left: 8px solid var(--cyan, #00e7ff);
  border-radius: 4px;
  color: var(--ink, #0b0b0b);
}
.watch-it-work .wiw-strip code {
  font-family: var(--mono, "Courier New", monospace);
  font-weight: 700;
  color: var(--navy, #061563);
}
.watch-it-work .wiw-stamp {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: #061563;
  background: rgba(255, 242, 0, 0.94);
  border: 2px solid #7a5c00;
  border-radius: 4px;
  transform: rotate(-4deg);
}
.watch-it-work .wiw-pack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 8px;
}
@media (max-width: 700px) {
  .watch-it-work .wiw-pack { grid-template-columns: 1fr; }
}
.watch-it-work .wiw-pack img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--shadow, #04102f);
  border-radius: 4px;
  background: #0f1117;
}
.watch-it-work .wiw-pack a:focus-visible {
  outline: 3px solid #fff200;
  outline-offset: 2px;
}