@font-face {
  font-family: "IBM Plex Mono FT";
  src: url("./assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "IBM Plex Mono FT";
  src: url("./assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

:root {
  --bg: #f1eee7;
  --paper: rgba(255, 252, 247, 0.88);
  --ink: #191714;
  --muted: #685f55;
  --line: rgba(25, 23, 20, 0.12);
  --accent: #d75e51;
  --accent-2: #78896c;
  --shadow: 0 24px 80px rgba(54, 42, 24, 0.12);
  --display: "Georgia", "Times New Roman", serif;
  --mono: "IBM Plex Mono FT", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--display);
  background:
    radial-gradient(circle at top left, rgba(215, 94, 81, 0.14), transparent 26%),
    radial-gradient(circle at right 20%, rgba(120, 137, 108, 0.18), transparent 24%),
    linear-gradient(180deg, #f8f5ef 0%, var(--bg) 100%);
}

body.locked {
  overflow: hidden;
}

body.fullscreen-lock {
  overflow: hidden;
}

html,
body {
  max-width: 100%;
}

body.locked .shell {
  visibility: hidden;
}

.gate {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  z-index: 50;
}

body.locked .gate {
  display: grid;
}

.gate-inner {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.gate-flower {
  display: block;
  width: min(220px, 58vw);
  height: auto;
  margin: 0 0 4px;
  border: 1px solid rgba(25, 23, 20, 0.1);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 52px rgba(54, 42, 24, 0.1);
}

.gate-title,
.gate-copy,
.gate-error,
.gate-form input,
.gate-form button {
  font-family: var(--mono);
}

.gate-title {
  margin: 0;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.gate-copy,
.gate-error {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.gate-error {
  color: #8b3a33;
}

.gate-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gate-form input,
.gate-form button {
  border: 1px solid rgba(25, 23, 20, 0.14);
  background: rgba(255, 252, 247, 0.66);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 0.82rem;
}

.gate-form input {
  min-width: 220px;
}

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

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #8b3a33;
  box-shadow: 0 0 0 1px #8b3a33;
}

#mainContent:focus {
  outline: none;
}

.shell {
  width: min(1500px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.hero {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: var(--ink);
}

.byline {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.byline a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(25, 23, 20, 0.16);
}

.byline a:hover {
  border-bottom-color: rgba(25, 23, 20, 0.42);
}

.lede,
.hero-copy p,
.market-note,
label,
dd,
dt,
.step-readout,
button,
input,
select,
textarea {
  font-family: var(--mono);
}

.lede {
  max-width: 720px;
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.studio-notice {
  max-width: 760px;
  margin: -2px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--accent-2);
  color: var(--muted);
  font: 0.78rem/1.55 var(--mono);
}

.studio-notice a {
  color: var(--ink);
  text-underline-offset: 0.2em;
}

.hero-copy {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.hero-copy p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.92fr) minmax(300px, 0.78fr);
  gap: 18px;
  align-items: start;
}

.stage-main {
  display: grid;
  gap: 14px;
  align-content: start;
}

.features-strip {
  margin-top: 0;
}

.ascii-panel,
.card {
  border: 1px solid var(--line);
  background: var(--paper);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.ascii-panel {
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
}

.panel-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fullscreen-info {
  display: none;
}

.fullscreen-info-top {
  display: grid;
  gap: 18px;
}

.fullscreen-actions {
  display: flex;
  justify-content: flex-start;
}

.fullscreen-titleblock {
  display: grid;
  gap: 8px;
}

.fullscreen-title {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 3.4rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.fullscreen-byline,
.fullscreen-meta {
  margin: 0;
  font-family: var(--mono);
}

.fullscreen-byline {
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fullscreen-byline a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.fullscreen-meta {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-actions button {
  border: 1px solid rgba(25, 23, 20, 0.14);
  background: rgba(255, 252, 247, 0.72);
  color: var(--ink);
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.panel-actions button:hover {
  background: rgba(255, 252, 247, 0.94);
}

.panel-actions button:active,
.panel-actions button.is-pressing {
  transform: translateY(1px);
  background: rgba(255, 252, 247, 0.98);
}

.render-surface {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
}

#asciiOutput {
  --paper-tone: #ffffff;
  --selection-highlight-fill: rgba(38, 106, 164, 0.9);
  --selection-highlight-ink: #f7f5ed;
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1972 / 2765;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid rgba(25, 23, 20, 0.08);
  background: var(--paper-tone);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 8px;
  letter-spacing: -0.03em;
  white-space: pre;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  place-self: stretch;
}

/* The paper mat stays fixed while the text stack zooms and pans beneath it.
   Its opening is measured from the original fitted grid, including any extra
   space left by the frame's aspect ratio. */
#asciiOutput::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  border-style: solid;
  border-color: var(--paper-tone);
  border-width: var(--artwork-matte-y, 0px) var(--artwork-matte-x, 0px);
  pointer-events: none;
}

/* The release artifact performs a final font-aware measurement before its
   first reveal. Later state changes retain the completed artwork while their
   replacement is composed. */
#asciiOutput.is-composing:not(.has-artwork) {
  /* Keep the complete text stack in the paint pipeline while it settles.
     visibility:hidden deferred rasterization until reveal, so large subject
     layers could visibly fill in even though their DOM was already complete. */
  opacity: 0.001;
  pointer-events: none;
  will-change: opacity;
}

.ascii-panel:fullscreen {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding: 14px 14px 18px;
  border: 0;
  background: rgba(248, 245, 239, 0.98);
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(calc(100vh - 32px), calc(100vh - 32px)) auto;
  gap: 18px;
  align-items: start;
  justify-items: center;
}

.ascii-panel.is-faux-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  height: var(--app-viewport-height, 100vh);
  padding: 14px 14px 18px;
  border: 0;
  background: rgba(248, 245, 239, 0.98);
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(calc(var(--app-viewport-height, 100vh) - 32px), calc(var(--app-viewport-height, 100vh) - 32px)) auto;
  gap: 18px;
  align-items: start;
  justify-items: center;
}

.ascii-panel:fullscreen .panel-topline {
  display: none;
}

.ascii-panel.is-faux-fullscreen .panel-topline {
  display: none;
}

.ascii-panel:fullscreen .fullscreen-info {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  align-content: start;
  gap: 10px;
  width: min(100%, 940px);
  min-width: 0;
  padding: 0 0 6px;
  justify-self: center;
}

.ascii-panel.is-faux-fullscreen .fullscreen-info {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  align-content: start;
  gap: 10px;
  width: min(100%, 940px);
  min-width: 0;
  padding: 0 0 6px;
  justify-self: center;
}

.ascii-panel:fullscreen .fullscreen-traits {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
}

.ascii-panel.is-faux-fullscreen .fullscreen-traits {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
}

.ascii-panel:fullscreen .fullscreen-traits div {
  min-height: 0;
  padding: 0;
  border-right: 0;
  border-bottom: 0;
}

.ascii-panel.is-faux-fullscreen .fullscreen-traits div {
  min-height: 0;
  padding: 0;
  border-right: 0;
  border-bottom: 0;
}

.ascii-panel:fullscreen .render-surface,
.ascii-panel.is-faux-fullscreen .render-surface {
  grid-column: 1;
  grid-row: 1;
  width: min(100%, calc(100vw - 36px));
  height: auto;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  min-width: 0;
  min-height: 0;
  place-self: center;
}

.ascii-panel:fullscreen #asciiOutput {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  min-width: 0;
  min-height: 0;
  place-self: center;
}

.ascii-panel.is-faux-fullscreen #asciiOutput {
  width: 100%;
  height: 100%;
  max-width: calc(100vw - 36px);
  max-height: calc(var(--app-viewport-height, 100vh) - 36px);
  min-width: 0;
  min-height: 0;
  place-self: center;
}

.ascii-panel:fullscreen .fullscreen-info-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  align-items: start;
}

.ascii-panel.is-faux-fullscreen .fullscreen-info-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  align-items: start;
}

.ascii-panel:fullscreen .fullscreen-actions {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: calc(14px + env(safe-area-inset-left));
  z-index: 2;
  display: grid;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 28px);
  justify-self: start;
}

.ascii-panel.is-faux-fullscreen .fullscreen-actions {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: calc(14px + env(safe-area-inset-left));
  z-index: 2;
  display: grid;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 28px);
  justify-self: start;
}

.ascii-panel:fullscreen .fullscreen-actions button,
.ascii-panel.is-faux-fullscreen .fullscreen-actions button {
  width: auto;
  min-width: 128px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ascii-panel:fullscreen .fullscreen-titleblock {
  min-width: 0;
}

.ascii-panel.is-faux-fullscreen .fullscreen-titleblock {
  min-width: 0;
}

@media (max-width: 860px) {
  .ascii-panel:fullscreen,
  .ascii-panel.is-faux-fullscreen {
    padding: 12px 12px 16px;
    grid-template-rows: minmax(calc(var(--app-viewport-height, 100vh) - 28px), calc(var(--app-viewport-height, 100vh) - 28px)) auto;
    gap: 16px;
  }

  .ascii-panel:fullscreen .render-surface,
  .ascii-panel.is-faux-fullscreen .render-surface,
  .ascii-panel:fullscreen #asciiOutput,
  .ascii-panel.is-faux-fullscreen #asciiOutput {
    max-width: calc(100vw - 24px);
    max-height: calc(var(--app-viewport-height, 100vh) - 24px);
  }

  .ascii-panel:fullscreen .fullscreen-info,
  .ascii-panel.is-faux-fullscreen .fullscreen-info {
    width: 100%;
  }

  .ascii-panel:fullscreen .fullscreen-info-top,
  .ascii-panel.is-faux-fullscreen .fullscreen-info-top {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ascii-panel:fullscreen .fullscreen-actions,
  .ascii-panel.is-faux-fullscreen .fullscreen-actions {
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
  }

  .ascii-panel:fullscreen .fullscreen-traits,
  .ascii-panel.is-faux-fullscreen .fullscreen-traits {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px 14px;
  }
}

#asciiOutput.render-frame {
  background: var(--paper-tone);
  color: #222;
  border-color: rgba(25, 23, 20, 0.3);
}

#asciiOutput.render-scanline {
  line-height: 6px;
}

#asciiOutput.render-stipple {
  line-height: 7px;
}

/* Text selection is part of the work. Every edition supplies these inks from
   its own semantic palette, with a rare seed-owned nocturnal variant, instead
   of accepting the operating system's generic blue selection treatment. */
#asciiOutput ::selection {
  background: var(--selection-highlight-fill);
  color: var(--selection-highlight-ink);
  text-shadow: none;
}

#asciiOutput ::-moz-selection {
  background: var(--selection-highlight-fill);
  color: var(--selection-highlight-ink);
  text-shadow: none;
}

/* Chromium exposes only one native Selection range. These companion ranges
   use the browser's text-highlighting pipeline to let the lead selection form
   a broken, curved gesture across several real passages of ASCII. */
#asciiOutput .ascii-layer.base::highlight(artwork-selection-fragments) {
  background: var(--selection-highlight-fill);
  color: var(--selection-highlight-ink);
  text-shadow: none;
}

/* Touch browsers turn selection into a magnifier/callout gesture and animate
   the system highlight independently from the artwork. Keep the authored
   selection tide and manual glyph selection as a desktop-only interaction. */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  #asciiOutput,
  #asciiOutput .ascii-layer,
  #asciiOutput .ascii-layer.subject .subject-ink {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none;
  }

  #asciiOutput {
    -webkit-tap-highlight-color: transparent;
  }
}

.ascii-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: max-content;
  max-width: none;
  max-height: none;
  margin: 0;
  padding-bottom: 0.08em;
  contain: layout paint style;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--artwork-pan-x, 0px), var(--artwork-pan-y, 0px), 0);
  transform-origin: center;
}

.ascii-layer {
  white-space: pre;
  /* Typography is part of the artwork's geometry. Presentation pages may
     redefine --mono for their UI, but the character grid must always use the
     exact bundled face that the sizing pass waits for and measures. */
  font-family: "IBM Plex Mono FT", monospace;
  font-weight: 400;
  direction: ltr;
  unicode-bidi: bidi-override;
  font-variant-ligatures: none;
  font-kerning: none;
  font-optical-sizing: none;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  contain: paint style;
}

.ascii-layer b {
  font-weight: 700;
}

/* WebKit can recompute a preformatted line box from the ascent/descent of the
   many coloured and weighted inline runs inside it. Give every logical grid
   row its authored height so live Safari, Chromium, and exported PNGs share
   the same vertical geometry. */
.ascii-live-row {
  display: block;
  height: 0.78em;
  line-height: 0.78em;
  white-space: pre;
}

.ascii-layer.detail {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 1;
  pointer-events: none;
}

.ascii-layer.weather {
  position: absolute;
  inset: 0;
  z-index: 4;
  /* Weather is an authored feature, not a translucent UI effect. Its color is
     already paper-aware, so retain the complete ink value in every Studio,
     fullscreen, Gallery, and export presentation. */
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: normal;
}

.ascii-layer.subject {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Keep the full transparent subject grid click-through so background text is
   still selectable. Only painted flower runs participate in hit-testing. */
.ascii-layer.subject .subject-ink {
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.ascii-layer.occlusion {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* A sub-cell feather lets the paper core dissolve into the surrounding
     field while the sharper foreground glyphs retain the botanical edge. */
  filter: blur(0.06em);
}

.occlusion-fill {
  background-color: var(--paper-tone);
}

.controls {
  display: grid;
  gap: 16px;
}

.card {
  padding: 16px;
}

.card h2 {
  margin: 0 0 14px;
  font-size: 1.05rem;
}

.traits-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.traits-list-wide {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.traits-list div {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(25, 23, 20, 0.08);
}

.traits-list-wide div {
  min-height: 76px;
  padding: 0 10px 0 0;
  border-bottom: 0;
  border-right: 1px solid rgba(25, 23, 20, 0.08);
}

.traits-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.traits-list-wide div:last-child {
  border-right: 0;
}

.traits-list dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.traits-list dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink);
}

label {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.label-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}

.label-row output {
  color: var(--ink);
  font-family: var(--mono);
}

input,
select,
textarea,
button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
}

button,
input:not([type="range"]),
textarea {
  min-height: 44px;
}

.card > input:not([type="range"]),
.card > textarea {
  margin-bottom: 12px;
}

.card > input[type="range"] {
  margin: 0 0 16px;
}

input[type="range"] {
  padding: 0;
  min-height: 44px;
  background: transparent;
}

.control-note {
  margin: -2px 0 0;
  color: var(--muted);
  font: 0.72rem/1.45 var(--mono);
}

#maturityValue {
  color: var(--ink);
  font-family: var(--mono);
}

.field-help,
.field-error {
  margin: -2px 0 12px;
  font: 0.7rem/1.5 var(--mono);
}

.field-help {
  color: var(--muted);
}

.field-error {
  color: #8b3a33;
}

input[type="color"] {
  min-height: 44px;
  padding: 6px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-row input {
  width: auto;
  margin: 0;
}

textarea {
  resize: vertical;
  min-height: 144px;
}

button {
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    transform 80ms ease;
  touch-action: manipulation;
}

button:active,
button.is-pressing {
  transform: translateY(1px);
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.curation-card {
  border-top: 2px solid var(--accent);
  background:
    linear-gradient(135deg, rgba(215, 94, 81, 0.055), transparent 42%),
    var(--paper);
}

.curation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.curation-heading h2 {
  margin: 0;
}

.curation-kicker,
.curation-count,
.curation-status,
.learning-profile,
.optional-label {
  font-family: var(--mono);
}

.curation-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.curation-count {
  flex: 0 0 auto;
  padding-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
}

.rating-scale {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rating-options {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.rating-options input {
  position: absolute;
  width: 1px;
  min-height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.rating-options label {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 54px;
  place-items: center;
  align-content: center;
  gap: 2px;
  margin: 0;
  padding: 6px 2px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.rating-options label strong {
  color: var(--ink);
  font: 700 1rem/1 var(--mono);
}

.rating-options label span {
  overflow: hidden;
  max-width: 100%;
  font: 0.54rem/1.2 var(--mono);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
}

.rating-options input:checked + label {
  border-color: var(--ink);
  background: var(--ink);
  color: rgba(255, 252, 247, 0.74);
}

.rating-options input:checked + label strong {
  color: #fffdf8;
}

.rating-options input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rating-help {
  margin: 8px 0 14px;
}

.optional-label {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.curation-card #curationNote {
  min-height: 92px;
}

.curation-actions button:last-child {
  border-color: var(--ink);
  background: var(--ink);
  color: #fffdf8;
}

.curation-actions button:disabled {
  cursor: wait;
  opacity: 0.5;
}

.curation-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.curation-status[data-tone="saved"] {
  color: #4f6645;
}

.curation-status[data-tone="error"] {
  color: #8b3a33;
}

.learning-profile {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.blind-review-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.blind-review-link:hover {
  color: var(--accent);
}

.blind-review-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.learning-profile summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.learning-profile summary::-webkit-details-marker {
  display: none;
}

.learning-profile summary::before {
  content: "+";
  color: var(--accent);
}

.learning-profile[open] summary::before {
  content: "−";
}

.learning-profile summary span:first-child {
  margin-right: auto;
}

.learning-profile p {
  margin: 10px 0 0;
}

.learning-active-need {
  color: var(--ink);
}

.learning-guardrail {
  color: var(--muted);
  opacity: 0.78;
}

.export-buttons {
  margin-bottom: 14px;
}

kbd {
  display: inline-grid;
  min-width: 1.8em;
  min-height: 1.8em;
  place-items: center;
  padding: 0.12em 0.38em;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  font: 0.72rem/1 var(--mono);
}

.randomize-feedback {
  --progress: 0%;
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
}

.randomize-feedback[hidden] {
  display: none;
}

.randomize-feedback-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.randomize-feedback-percent {
  flex: 0 0 auto;
  color: var(--ink);
}

.randomize-progress {
  height: 5px;
  overflow: hidden;
  border: 1px solid rgba(25, 23, 20, 0.16);
  background: rgba(255, 252, 247, 0.62);
}

.randomize-progress-fill {
  display: block;
  width: var(--progress);
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 180ms ease;
}

.step-readout {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.market-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.market-card div {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

dt {
  margin-bottom: 4px;
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.market-note {
  margin: 16px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.documentation-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.documentation-card img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  .shell {
    width: min(100%, calc(100vw - 20px));
    padding-top: 20px;
  }

  .stage {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stage-main,
  .controls {
    display: contents;
  }

  .ascii-panel {
    order: 1;
  }

  .curation-card {
    order: 2;
  }

  .lineage-card {
    order: 3;
  }

  .artwork-state-card {
    order: 4;
  }

  .features-strip {
    order: 5;
  }

  .controls > .card:not(.curation-card):not(.lineage-card):not(.artwork-state-card) {
    order: 6;
  }

  #asciiOutput {
    width: 100%;
  }

  .traits-list-wide {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .shell {
    width: 100%;
    padding: max(14px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .hero {
    gap: 10px;
    margin-bottom: 18px;
  }

  .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  h1 {
    font-size: clamp(2.65rem, 13vw, 3.2rem);
    line-height: 0.9;
    white-space: nowrap;
  }

  .byline {
    font-size: 0.72rem;
    line-height: 1.5;
  }

  .lede {
    max-width: 34rem;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .studio-notice {
    font-size: 0.72rem;
  }

  .stage-main {
    gap: 10px;
  }

  .ascii-panel {
    gap: 8px;
    padding: 7px;
  }

  .panel-topline {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 0.65rem;
    letter-spacing: 0.09em;
  }

  .panel-actions {
    min-width: 0;
    gap: 7px;
  }

  #renderMeta {
    max-width: min(52vw, 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel-actions button {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 0.66rem;
  }

  #asciiOutput {
    padding: 6px;
  }

  .controls {
    gap: 12px;
  }

  .card {
    padding: 14px;
  }

  .card h2 {
    margin-bottom: 12px;
  }

  input,
  textarea {
    font-size: 1rem;
  }

  textarea {
    min-height: 132px;
  }

  .traits-list-wide {
    grid-template-columns: 1fr;
  }

  .traits-list-wide div {
    min-height: auto;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(25, 23, 20, 0.08);
  }
}

@media (max-width: 360px) {
  .gate-form {
    width: min(100%, 280px);
    flex-direction: column;
  }

  .gate-form input,
  .gate-form button {
    width: 100%;
    min-width: 0;
  }

  .lineage-card .button-row {
    grid-template-columns: 1fr;
  }
}

.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;
}

html[data-view="gallery"],
html[data-view="gallery"] body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #f8f5ef;
}

html[data-view="gallery"] .gate,
html[data-view="gallery"] .hero,
html[data-view="gallery"] .features-strip,
html[data-view="gallery"] .controls,
html[data-view="gallery"] .panel-topline,
html[data-view="gallery"] .fullscreen-info {
  display: none !important;
}

html[data-view="gallery"] .shell,
html[data-view="gallery"] .stage,
html[data-view="gallery"] .stage-main,
html[data-view="gallery"] .ascii-panel,
html[data-view="gallery"] .render-surface {
  width: 100vw;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

html[data-view="gallery"] .shell {
  visibility: visible !important;
}

html[data-view="gallery"] .stage {
  display: block;
}

html[data-view="gallery"] .stage-main,
html[data-view="gallery"] .ascii-panel,
html[data-view="gallery"] .render-surface {
  display: grid;
  place-items: center;
}

html[data-view="gallery"] .ascii-panel {
  grid-template: 1fr / 1fr;
  gap: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-view="gallery"] #asciiOutput {
  width: min(100vw, calc(100dvh * 0.7132007233)) !important;
  height: min(100dvh, calc(100vw / 0.7132007233)) !important;
  max-width: 100vw;
  max-height: 100dvh;
  aspect-ratio: 1972 / 2765;
  place-self: center;
  border: 0;
}

.gallery-shortcuts {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 100;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  background: color-mix(in srgb, #f8f5ef 88%, transparent);
  color: #242720;
  box-shadow: 0 8px 28px rgb(24 28 21 / 12%);
  opacity: 0.42;
  transition: opacity 180ms ease;
  backdrop-filter: blur(8px);
}

.gallery-shortcuts:hover,
.gallery-shortcuts:focus-within {
  opacity: 1;
}

.gallery-shortcuts button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 600 10px/1 "IBM Plex Mono FT", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.gallery-shortcuts button:hover,
.gallery-shortcuts button:focus-visible {
  background: #242720;
  color: #f8f5ef;
  outline: none;
}

.gallery-shortcuts kbd {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid currentColor;
  font: inherit;
}

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

/* Fullscreen is a single artwork plane. These state-scoped overrides outrank
   both the public catalogue columns and the installation wrapper. */
.ascii-panel[data-fullscreen="true"] {
  --fullscreen-gutter: clamp(8px, 1.5vmin, 20px);
  display: grid !important;
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: var(--app-viewport-height, 100dvh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: calc(var(--fullscreen-gutter) + env(safe-area-inset-top))
    calc(var(--fullscreen-gutter) + env(safe-area-inset-right))
    calc(var(--fullscreen-gutter) + env(safe-area-inset-bottom) + 44px)
    calc(var(--fullscreen-gutter) + env(safe-area-inset-left)) !important;
  box-sizing: border-box;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  gap: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  background: var(--bg, #f1f0ec) !important;
  border: 0;
  box-shadow: none;
}
.ascii-panel[data-fullscreen="true"] > :is(.art-card-heading, .art-card-controls, .panel-topline, .fullscreen-info) { display: none !important; }
.ascii-panel[data-fullscreen="true"] .render-surface {
  grid-area: 1 / 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  place-self: center !important;
}
.ascii-panel[data-fullscreen="true"] .render-surface::after { display: none; }
.ascii-panel[data-fullscreen="true"] #asciiOutput {
  grid-area: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  border: 0;
  place-self: center !important;
}
.fullscreen-toolbar { display: none; }
.ascii-panel[data-fullscreen="true"] > .fullscreen-toolbar {
  display: flex;
  position: absolute;
  bottom: calc(var(--fullscreen-gutter) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  height: 36px;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.fullscreen-toolbar button {
  width: auto;
  min-height: 36px;
  padding: 8px 0;
  background: transparent;
  color: var(--ink, #181815);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: 10px/1.4 var(--mono);
  letter-spacing: .02em;
  text-transform: none;
  cursor: pointer;
}
.fullscreen-toolbar button:hover { background: transparent; color: var(--muted, #70706a); transform: none; }
.fullscreen-toolbar button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }