/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(
      .od-stack,
      .od-row,
      .od-row-top,
      .od-cluster,
      .od-grid,
      .od-field,
      .od-stat,
      .od-cell,
      .od-tile
    )
    > :where(*) {
    min-width: 0;
  }

  /* containers */
  .od-stack {
    display: flex;
    flex-direction: column;
    gap: var(--od-gap, 8px);
  }
  .od-row {
    display: flex;
    align-items: center;
    gap: var(--od-gap, 8px);
  }
  .od-row-top {
    display: flex;
    align-items: flex-start;
    gap: var(--od-gap, 8px);
  }
  .od-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--od-gap, 8px);
  }
  .od-fill {
    flex: 1 1 0;
    min-width: 0;
  }
  .od-fixed {
    flex: none;
  }
  .od-grid {
    display: grid;
    gap: var(--od-gap, 12px);
    grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr));
  }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat,
  .od-field,
  .od-cell {
    display: grid;
    gap: var(--od-gap, 2px);
  }
  :where(.od-stat, .od-field, .od-cell) > :where(*) {
    display: block;
  }
  .od-tile {
    display: grid;
    grid-template-rows: auto 1fr;
  }
  :where(.od-tile) > :where(*) {
    display: block;
  }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--od-ratio, auto);
  }
  .od-media-cover {
    object-fit: cover;
  }

  /* functional inline SVG icons opt into bounded geometry; content SVGs keep their own */
  .od-icon {
    display: inline-block;
    inline-size: var(--od-icon-size, 1em);
    block-size: var(--od-icon-size, 1em);
    flex: none;
  }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .od-clamp-2,
  .od-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .od-clamp-2 {
    -webkit-line-clamp: 2;
  }
  .od-clamp-3 {
    -webkit-line-clamp: 3;
  }
  .od-lines-2 {
    min-height: calc(2 * 1.4em);
  } /* block-level reservation for a shared baseline */
  .od-nowrap {
    white-space: nowrap;
  } /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep {
    word-break: keep-all;
    overflow-wrap: anywhere;
  } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
  }
  .od-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
  }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail {
    display: flex;
    gap: var(--od-gap, 8px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-inline: var(--od-rail-pad, 16px);
    scroll-padding-inline: var(--od-rail-pad, 16px);
  }
  .od-rail::-webkit-scrollbar {
    display: none;
  }
  :where(.od-rail) > :where(*) {
    flex: none;
    scroll-snap-align: start;
  }
  :where(.od-rail) > :where(:last-child) {
    margin-inline-end: var(--od-rail-pad, 16px);
  }

  .od-spacer {
    flex: none;
    visibility: hidden;
    pointer-events: none;
  }
  .od-touch {
    min-width: 44px;
    min-height: 44px;
  }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

@font-face {
  font-family: Manrope;
  src: url("/cafe-assets/ed335894f8d95426.ttf") format("truetype");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/cafe-assets/ea1f264039fed13f.ttf") format("truetype");
  font-weight: 650 900;
  font-display: swap;
}
:root {
  --paper: #f9f4e8;
  --ink: #30291f;
  --muted: #655e51;
  --green: #164e3d;
  --green-hover: #103e30;
  --pale: #e9eddd;
  --line: #d6ccb8;
  --soft: #f3ecde;
  --danger: #a12c2c;
  --radius: 12px;
  --space: 8px;
  --motion: 180ms;
  --font: Manrope, system-ui, sans-serif;
  --max: 1160px;
  --od-icon-size: 20px;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
summary,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
summary,
select {
  cursor: pointer;
}
button {
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #a18535;
  outline-offset: 4px;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.2;
}
h2 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -1.2px;
}
h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
[hidden] {
  display: none !important;
}
.wrap {
  width: min(var(--max), calc(100% - 64px));
  margin-inline: auto;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 13px;
  line-height: 1.5;
}
.icon {
  --od-icon-size: 20px;
  color: currentColor;
  fill: currentColor;
  vertical-align: middle;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  background: var(--green);
  color: white;
  transition:
    background var(--motion),
    transform var(--motion);
  white-space: nowrap;
}
.button.secondary {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
}
.button.quiet {
  background: transparent;
  color: var(--green);
  padding-inline: 0;
}
.button:active {
  transform: scale(0.98);
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  background: transparent;
  border-radius: 6px;
}
.text-link {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.skip {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 50;
  background: white;
  padding: 12px;
}
.skip:focus {
  top: 8px;
}
.topbar {
  border-bottom: 1px solid var(--line);
}
.nav {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.7px;
  white-space: nowrap;
}
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: transparent;
}
.nav-links {
  margin-left: auto;
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.nav-links a[aria-current] {
  color: var(--green);
}
.nav-end {
  display: flex;
  align-items: center;
  gap: 16px;
}
.balance {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.signin {
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 40px;
  padding: 8px 20px;
}
.mobile-menu {
  display: none;
}
.intro {
  text-align: center;
  padding: 36px 0 28px;
}
.intro-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.intro-label .icon {
  --od-icon-size: 16px;
}
h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.15;
}
h1 .accent {
  color: var(--green);
}
.intro p {
  margin: 12px auto 0;
  max-width: 680px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.creator {
  padding: 24px 28px;
}
.studio-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.studio-label strong {
  font-size: 16px;
  letter-spacing: -0.3px;
}
.mini-label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-label .icon {
  --od-icon-size: 16px;
}
.field-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
.field-title .optional {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
}
.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 148px;
  border: 1px dashed #b7c9bf;
  border-radius: 8px;
  background: var(--soft);
  transition:
    background var(--motion),
    border-color var(--motion);
  text-align: center;
  cursor: pointer;
  padding: 20px;
}
.dropzone input {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.dropzone:focus-within {
  outline: 3px solid #a18535;
  outline-offset: 3px;
}
.dropzone.dragging {
  background: #e2efe7;
  border-color: var(--green);
}
.upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  color: var(--green);
  --od-icon-size: 22px;
}
.dropzone strong {
  font-size: 14px;
  font-weight: 600;
}
.dropzone strong span {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--green);
}
.dropzone small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}
.uploaded {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  min-height: 148px;
  padding: 20px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.uploaded img {
  width: 64px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  border-radius: 4px;
}
.uploaded strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.uploaded p {
  font-size: 12px;
  color: var(--muted);
}
.error {
  color: var(--danger);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.scene-field {
  margin-top: 16px;
}
.scene-select {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 6px;
  text-align: left;
}
.scene-select img {
  width: 52px;
  height: auto;
  aspect-ratio: 1000 / 686;
  border-radius: 4px;
}
.scene-select .od-field {
  gap: 2px;
  flex: 1;
}
.scene-select strong {
  font-size: 13px;
}
.scene-select small {
  font-size: 11px;
  color: var(--muted);
}
.scene-menu {
  padding: 8px;
  border: 1px solid var(--line);
  margin-top: 8px;
  border-radius: 8px;
}
.scene-option {
  width: 100%;
  padding: 8px 12px;
  min-height: 44px;
  background: white;
  text-align: left;
  border-radius: 4px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scene-option[aria-selected="true"] {
  background: var(--pale);
  color: var(--green);
  font-weight: 700;
}
.settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.control-group {
  min-width: 0;
}
.control-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.segmented {
  display: flex;
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 6px;
  gap: 4px;
}
.segmented button {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  flex: 1;
  background: white;
  font-size: 12px;
  border-radius: 3px;
}
.segmented button[aria-pressed="true"] {
  background: var(--pale);
  color: var(--green);
  font-weight: 700;
}
.ratio-shape {
  display: inline-block;
  width: 9px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.ratio-shape.wide {
  width: 15px;
  height: 9px;
}
.setting-select {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
}
.advanced {
  margin-top: 12px;
  font-size: 12px;
}
.advanced summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  width: fit-content;
  color: var(--muted);
  list-style: none;
}
.advanced summary::-webkit-details-marker {
  display: none;
}
.advanced[open] summary .icon {
  transform: rotate(180deg);
}
.advanced .icon {
  --od-icon-size: 14px;
}
.advanced label {
  display: block;
  font-size: 12px;
  margin: 8px 0 4px;
  font-weight: 700;
}
.advanced textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}
.generation-bar {
  margin-top: 12px;
}
.generate {
  width: 100%;
  height: 48px;
  font-size: 14px;
}
.generate .cost {
  display: inline-flex;
  border-left: 1px solid #ffffff40;
  padding-left: 12px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  gap: 4px;
}
.under-generate {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.under-generate a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.showcase {
  background: #edf2ee;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 20px 24px;
  border-left: 1px solid var(--line);
  gap: 12px;
}
.showcase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.showcase-top strong {
  font-size: 13px;
}
.source-label {
  font-size: 10px;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  color: #526259;
  border: 1px solid #dce4df;
}
.scene-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  background: #dae5de;
  border-radius: 8px;
  padding: 16px;
  isolation: isolate;
  overflow: clip;
}
.scene-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.scene-overview .od-field {
  gap: 3px;
}
.scene-overview strong {
  font-size: 14px;
}
.scene-overview small {
  font-size: 11px;
  color: #53655a;
}
.view-story {
  font-size: 12px;
  color: var(--green);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  background: transparent;
  padding: 0;
}
.view-story .icon {
  --od-icon-size: 16px;
}
.studio-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 11px;
  flex-wrap: wrap;
}
.studio-footnote span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.studio-footnote .icon {
  --od-icon-size: 14px;
}
.section {
  padding-top: 88px;
  scroll-margin-top: 24px;
}
.section-intro {
  margin-bottom: 28px;
}
.section-intro p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
  max-width: 680px;
}
.inspiration-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.inspiration-head .section-intro {
  margin-bottom: 0;
}
.inspiration-head > a {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-height: 44px;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.template {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.template-photo {
  border-radius: 8px;
  overflow: clip;
}
.template-photo img {
  transition: transform 300ms;
  width: 100%;
  height: auto;
}
.template-info {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.template h3 {
  font-size: 17px;
}
.template .template-info > button {
  width: 40px;
  min-height: 44px;
  background: var(--soft);
  color: var(--green);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.template p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}
.how-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 96px;
}
.how-section .section-intro p {
  max-width: 360px;
}
.steps {
  display: grid;
  gap: 24px;
}
.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
}
.step-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  width: 36px;
  height: 36px;
  border: 1px solid #c5d5ca;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 {
  font-size: 17px;
}
.step p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}
.pricing-section {
  margin-top: 88px;
  padding: 64px 0;
  background: var(--soft);
  border-block: 1px solid var(--line);
}
.pricing-heading {
  text-align: center;
}
.pricing-heading p {
  margin: 12px auto 0;
  font-size: 14px;
  color: var(--muted);
}
.purchase-promise {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 12px;
  color: var(--green);
}
.purchase-promise span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.purchase-promise .icon {
  --od-icon-size: 16px;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
  align-items: stretch;
}
.plan {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.plan.featured {
  border: 2px solid var(--green);
  padding: 27px;
  background: #fafffc;
}
.plan .recommended {
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--green);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 4px;
}
.plan h3 {
  font-size: 16px;
}
.plan-tagline {
  font-size: 12px;
  margin-top: 8px;
  color: var(--muted);
}
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 24px;
}
.price strong {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.2;
}
.price small {
  font-size: 12px;
  color: var(--muted);
}
.plan-credit {
  font-weight: 700;
  font-size: 16px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-credit .icon {
  color: var(--green);
  --od-icon-size: 18px;
}
.plan-detail {
  font-size: 12px;
  color: var(--muted);
  padding-top: 12px;
  margin: 16px 0 24px;
  border-top: 1px solid var(--line);
  flex: 1;
}
.plan-detail p + p {
  margin-top: 8px;
}
.plan .button {
  width: 100%;
}
.pricing-bottom {
  font-size: 11px;
  text-align: center;
  color: var(--muted);
  margin-top: 20px;
}
.faq-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 96px;
  padding-bottom: 88px;
}
.faq-section .section-intro p {
  max-width: 320px;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  padding: 16px 0;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary .icon {
  --od-icon-size: 16px;
}
.faq-list details[open] summary .icon {
  transform: rotate(45deg);
}
.faq-list details p {
  font-size: 14px;
  color: var(--muted);
  padding: 0 24px 20px 0;
  line-height: 1.75;
}
.footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.footer .brand {
  font-size: 16px;
}
.footer .brand-mark {
  width: 40px;
  height: 40px;
}
.footer p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: var(--muted);
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: 85dvh;
  overflow: auto;
  color: var(--ink);
  box-shadow: 0 24px 80px #102c2630;
}
dialog::backdrop {
  background: #10271f80;
  backdrop-filter: blur(3px);
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.dialog-head h2 {
  font-size: 21px;
  letter-spacing: -0.5px;
}
.dialog-content {
  padding: 24px;
}
.dialog-content p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}
.dialog-content .button {
  width: 100%;
}
.dialog-content .button + .button {
  margin-top: 12px;
}
.storyline {
  display: grid;
  gap: 20px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}
.storyline li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
}
.storyline li > span {
  color: var(--green);
  font-size: 12px;
  padding-top: 2px;
}
.storyline strong {
  display: block;
  font-size: 14px;
}
.storyline p {
  font-size: 13px;
  margin-top: 4px;
}
.order-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.order-line.total {
  font-weight: 700;
  border-bottom: 0;
  font-size: 18px;
  margin-bottom: 16px;
}
.order-line span:last-child {
  white-space: nowrap;
}
.order-terms {
  font-size: 12px !important;
}
.status-panel {
  padding: 24px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  width: 100%;
}
.status-panel .status-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--pale);
  color: var(--green);
  border-radius: 50%;
  margin-bottom: 12px;
  --od-icon-size: 24px;
}
.status-panel h3 {
  font-size: 18px;
}
.status-panel p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
.status-panel progress {
  width: 100%;
  height: 6px;
  margin-top: 20px;
  accent-color: var(--green);
}
.status-panel .button {
  margin-top: 16px;
}
.result-video {
  width: 100%;
  max-height: 420px;
  background: #17231d;
  border-radius: 8px;
}
.result-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  background: var(--green);
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px #0002;
  font-size: 13px;
  text-align: center;
}
.legal-copy h3 {
  font-size: 16px;
  margin: 20px 0 8px;
}
.legal-copy p {
  font-size: 13px;
}
.no-script {
  background: #fff0ee;
  color: #8b2424;
  padding: 16px;
  text-align: center;
}
@media (hover: hover) {
  .button:hover {
    background: var(--green-hover);
  }
  .button.secondary:hover {
    background: var(--pale);
  }
  .button.quiet:hover {
    background: transparent;
    color: var(--green-hover);
  }
  .nav-links a:hover,
  .footer-links button:hover {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 6px;
  }
  .dropzone:hover {
    border-color: var(--green);
    background: #eef4f0;
  }
  .icon-button:hover {
    background: var(--pale);
  }
  .template:hover .template-photo img {
    transform: scale(1.025);
  }
  .scene-option:hover,
  .segmented button:hover {
    background: var(--pale);
  }
  .template-info > button:hover {
    background: #dce9df;
  }
  .view-story:hover {
    text-decoration: underline;
  }
}
@media (min-width: 1440px) {
  .wrap {
    --max: 1160px;
  }
  .intro {
    padding-top: 40px;
  }
}
@media (max-width: 1023px) {
  .wrap {
    width: calc(100% - 48px);
  }
  .nav-links {
    gap: 20px;
  }
  .nav {
    gap: 16px;
  }
  .balance {
    display: none;
  }
  .creator {
    padding: 24px;
  }
  .showcase {
    padding: 20px;
  }
  .scene-poster {
    width: 180px;
    min-height: 312px;
  }
  .how-section,
  .faq-section {
    gap: 48px;
    grid-template-columns: 0.9fr 1.1fr;
  }
  .plan {
    padding: 24px;
  }
  .plan.featured {
    padding: 23px;
  }
}
@media (max-width: 767px) {
  .wrap {
    width: calc(100% - 32px);
  }
  .nav {
    height: 68px;
  }
  .brand {
    font-size: 17px;
    gap: 8px;
  }
  .brand-mark {
    width: 40px;
    height: 40px;
  }
  .nav-links {
    display: none;
  }
  .signin {
    padding: 8px 12px;
    font-size: 12px;
  }
  .nav-end {
    gap: 8px;
  }
  .mobile-menu {
    display: flex;
  }
  .mobile-links {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 16px 20px;
    gap: 24px;
    border-top: 1px solid var(--line);
    font-size: 13px;
  }
  .intro {
    padding: 28px 0 24px;
  }
  .intro-label {
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  h1 {
    font-size: 34px;
    letter-spacing: -1.2px;
    max-width: 470px;
    margin: auto;
  }
  .intro p {
    font-size: 14px;
    max-width: 420px;
  }
  .studio {
    grid-template-columns: 1fr;
  }
  .creator {
    padding: 20px;
  }
  .showcase {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 20px;
    gap: 16px;
  }
  .scene-stage {
    min-height: 300px;
  }
  .scene-poster {
    width: 168px;
    min-height: 288px;
  }
  .scene-poster.wide {
    max-width: 100%;
    width: 100%;
  }
  .studio-footnote {
    gap: 12px;
    font-size: 10px;
  }
  .section {
    padding-top: 56px;
  }
  .template-grid {
    gap: 16px;
    grid-template-columns: 1fr;
  }
  .template {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    align-items: center;
  }
  .template-info {
    margin-top: 0;
  }
  .template-photo img {
    border-radius: 6px;
  }
  .template h3 {
    font-size: 15px;
  }
  .template p {
    font-size: 12px;
  }
  .template-info > button {
    min-width: 36px;
  }
  .inspiration-head {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .how-section,
  .faq-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .steps {
    gap: 24px;
  }
  .how-section .section-intro p,
  .faq-section .section-intro p {
    max-width: none;
  }
  .pricing-section {
    margin-top: 56px;
    padding: 48px 0;
  }
  .plans {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 440px;
    margin-inline: auto;
  }
  .plan,
  .plan.featured {
    padding: 24px;
  }
  .price {
    margin-top: 16px;
  }
  .plan-credit {
    margin-top: 12px;
  }
  .plan-detail {
    margin: 12px 0 20px;
  }
  .pricing-heading h2 {
    max-width: 350px;
    margin: auto;
  }
  .purchase-promise {
    gap: 12px;
    font-size: 11px;
  }
  .faq-section {
    padding-bottom: 56px;
  }
  .footer-inner {
    align-items: start;
    flex-direction: column;
    gap: 20px;
  }
  .footer-links {
    gap: 20px;
  }
  .under-generate {
    font-size: 10px;
  }
  .dialog-head,
  .dialog-content {
    padding: 20px;
  }
  .scene-overview {
    gap: 8px;
  }
  .scene-overview strong {
    font-size: 13px;
  }
}
@media (max-width: 374px) {
  .brand {
    font-size: 15px;
  }
  .nav {
    gap: 8px;
  }
  .nav-end {
    gap: 0;
  }
  .creator {
    padding: 16px;
  }
  .settings {
    gap: 8px;
  }
  .intro h1 {
    font-size: 30px;
  }
  .template {
    grid-template-columns: 96px 1fr;
  }
  .view-story {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
.cafe-faq-item {
  border-bottom: 1px solid var(--line);
}
.cafe-faq-item button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: transparent;
  padding: 20px 0;
  font-weight: 700;
  font-size: 14px;
}
.cafe-faq-item button svg {
  flex: none;
  color: var(--green);
}
.cafe-faq-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  padding: 0 32px 20px 0;
}
.recent-videos {
  margin: 12px 0;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.recent-videos summary {
  cursor: pointer;
  font-weight: 600;
}
.recent-videos ul {
  list-style: none;
  padding: 0;
}
.recent-videos li {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 8px;
}
.recent-videos li a,
.recent-videos li button {
  text-decoration: underline;
  color: var(--ink);
}

/* Café film club: a casting desk alongside an illustrated scene board. */
.topbar {
  background: #faf6eb;
}
.nav {
  height: 65px;
}
.brand,
.intro h1,
.section-intro h2,
.pricing-heading h2,
.template h3,
.plan h3,
.price strong {
  font-family: Georgia, "Times New Roman", serif;
}
.brand {
  font-size: 24px;
}
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: 18px;
  padding-top: 34px;
}
.hero-layout::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 65px;
  left: 0;
  right: 0;
  height: 700px;
  background: radial-gradient(ellipse at 86% 13%, #eed4a4 0%, transparent 61%);
  pointer-events: none;
}
.intro {
  grid-column: 1;
  text-align: left;
  padding: 3px 0 0;
}
.intro-label,
.chapter {
  font:
    700 11px/1.4 ui-monospace,
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #94512e;
}
.intro-label i {
  background: #bc6335;
  width: 24px;
  height: 3px;
}
.intro h1 {
  font-size: clamp(46px, 4.7vw, 70px);
  line-height: 0.97;
  letter-spacing: -0.054em;
  font-weight: 500;
  margin: 0;
}
.intro h1 .accent {
  color: var(--green);
}
.intro p {
  margin: 13px 0 0;
  max-width: 46ch;
  line-height: 1.48;
}
.tool-card {
  grid-column: 1;
  scroll-margin-top: 18px;
  border: 1px solid #d1c4a9;
  background: #fffaf0;
  border-radius: 15px;
  box-shadow: 0 10px 24px #5c421212;
}
.creator {
  padding: 19px 23px;
}
.studio-label {
  margin-bottom: 12px;
}
.studio-label strong {
  font:
    600 23px Georgia,
    serif;
  letter-spacing: -0.04em;
}
.dropzone {
  min-height: 92px;
  background: #f4eddd;
  border-color: #aa9877;
}
.scene-select,
.setting-select,
.segmented {
  background-color: #fffdf7;
}
.showcase {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid #29473b;
  border-radius: 14px;
  overflow: hidden;
  background: #224638;
  color: #fff4d9;
  box-shadow: 0 12px 26px #5341221c;
}
.showcase-top {
  padding: 15px 22px;
  border-bottom: 1px solid #ffffff29;
}
.showcase-top strong,
.source-label,
.poster-caption,
.poster-bottom small,
.scene-strip span {
  font:
    650 10px/1.4 ui-monospace,
    monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.source-label {
  background: none;
  color: #f1dec3;
  border: 0;
  padding: 0;
}
.scene-stage {
  border-radius: 0;
  min-height: 0;
  padding: 27px 32px 20px;
  background-color: #e1bb81;
  background-image: repeating-linear-gradient(
    92deg,
    transparent 0 36px,
    #915b2f0d 37px 38px
  );
}
.scene-poster {
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  position: relative;
  display: block;
  isolation: isolate;
  border: 1px solid #aa8a62;
  border-radius: 1px;
  background: #fff5da;
  color: var(--ink);
  padding: 12px 12px 16px;
  transform: rotate(-2deg);
  box-shadow:
    4px 7px 0 #8d694545,
    0 9px 20px #4a331936;
}
.scene-poster.wide {
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
}
.poster-caption {
  display: flex;
  justify-content: space-between;
  color: #74543d;
  padding: 0 1px 8px;
  font-size: 9px;
}
.poster-art {
  width: 100%;
  aspect-ratio: 1.65;
  background: var(--poster-image, url("/assets/table-mixup.svg")) center/cover;
}
.scene-poster.wide .poster-art {
  aspect-ratio: 16/9;
}
.poster-bottom {
  display: flex;
  flex-direction: column;
  padding: 12px 5px 0;
  gap: 0;
}
.poster-bottom small {
  font-size: 8px;
  color: #a04729;
}
.poster-bottom strong {
  font:
    italic 500 clamp(29px, 3.5vw, 48px)/1.09 Georgia,
    serif;
  letter-spacing: -0.055em;
  color: #273d2f;
}
.scene-strip {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 14px 22px;
  background: #edd7ae;
}
.scene-strip button {
  flex: 1;
  min-width: 0;
  max-width: 147px;
  padding: 5px;
  background: #fff8e9;
  color: #59432f;
  border: 2px solid transparent;
  box-shadow: 1px 3px 5px #59411f25;
  transition: transform 0.18s;
}
.scene-strip button:hover {
  transform: translateY(-3px);
}
.scene-strip button[aria-pressed="true"] {
  border-color: #8c431f;
}
.scene-strip img {
  width: 100%;
  aspect-ratio: 2.7;
  object-fit: cover;
}
.scene-strip span {
  display: block;
  padding-top: 5px;
  font-size: 9px;
  letter-spacing: 0.01em;
}
.scene-overview {
  padding: 15px 22px;
}
.scene-overview strong {
  font:
    600 22px Georgia,
    serif;
}
.scene-overview small {
  color: #e5d6bb;
}
.view-story {
  color: #fff2cf;
}
.status-panel,
#resultPanel {
  color: var(--ink);
  width: 100%;
  min-height: 280px;
}
.studio-footnote,
.hero-layout > .recent-videos {
  grid-column: 1/-1;
}
.studio-footnote {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.chapter {
  display: block;
  margin-bottom: 8px;
}
.section-intro h2,
.pricing-heading h2 {
  font-weight: 500;
  letter-spacing: -0.055em;
  font-size: clamp(35px, 4vw, 58px);
  line-height: 1.02;
}
.section {
  padding-top: 62px;
}
.template-grid {
  grid-template-columns: 1.25fr 1fr 1fr;
}
.template-photo {
  padding: 6px;
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 3px 7px #4b34100d;
}
.template-photo img {
  width: 100%;
  aspect-ratio: 1.65;
  object-fit: cover;
}
.template h3,
.plan h3 {
  font-size: 24px;
}
.plan {
  background: #fffaf0;
}
.plan.featured {
  background: #e4ecde;
}
.pricing-section {
  background: #efe4cf;
}
@media (max-width: 820px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 22px;
  }
  .showcase {
    grid-column: 1;
    grid-row: auto;
  }
  .intro h1 {
    font-size: clamp(42px, 8vw, 61px);
  }
  .intro h1 br {
    display: none;
  }
  .intro h1 .accent {
    margin-right: 0.14em;
  }
  .intro {
    padding: 0;
  }
  .intro p {
    margin-top: 9px;
  }
  .creator {
    padding: 17px;
  }
  .scene-stage {
    padding: 22px 24px 16px;
  }
  .scene-strip {
    gap: 8px;
    padding: 12px;
  }
  .scene-strip span {
    font-size: 8px;
  }
  .template-grid {
    grid-template-columns: 1fr;
  }
  .template h3 {
    font-size: 19px;
  }
}
.pocket-print {
  display: none;
}

.intro h1 .hero-title-kind {
  display: block;
  margin-top: 12px;
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.guide-link a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (min-width: 821px) and (max-height: 820px) {
  .hero-layout {
    padding-top: 20px;
    row-gap: 12px;
  }
  .intro h1 {
    font-size: clamp(44px, 4vw, 58px);
  }
  .creator {
    padding: 14px 20px;
  }
  .dropzone {
    padding: 8px;
    min-height: 84px;
  }
}
@media (max-width: 600px) {
  .intro {
    position: relative;
  }
  .intro h1 {
    max-width: calc(100% - 84px);
    font-size: clamp(32px, 9.4vw, 47px);
    line-height: 1.02;
  }
  .intro h1 br {
    display: initial;
  }
  .studio-label strong {
    font-size: 20px;
  }
  .mini-label {
    white-space: nowrap;
  }
  .pocket-print {
    position: absolute;
    top: 23px;
    right: 4px;
    display: block;
    width: 76px;
    padding: 4px 4px 2px;
    border: 1px solid #cab189;
    background: #fff6db;
    box-shadow: 1px 3px 5px #593f1624;
    transform: rotate(5deg);
  }
  .pocket-print img {
    width: 100%;
    height: 54px;
    object-fit: cover;
  }
  .pocket-print span {
    display: block;
    font:
      italic 12px Georgia,
      serif;
    text-align: center;
    color: var(--green);
  }
}

/* Fancy Café v2 — casting desk and illustrated story */
body:has(.hero-layout) { background: #f7efe0; color: #30271f; }
.wrap { max-width: 1160px; }
.hero-layout { grid-template-columns: minmax(0, 585fr) minmax(0, 459fr); column-gap: 51px; row-gap: 16px; padding-top: 26px; }
.hero-layout::before { background: radial-gradient(ellipse at 85% 8%, #f3dbb5, transparent 65%); }
.intro h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.035em; font-weight: 700; }
.intro h1 .accent { color: inherit; }
.intro p { max-width: 52ch; font-size: 16.5px; }
.watch-story { display: inline-block; color: #234633; text-decoration: underline; font-weight: 700; margin-top: 12px; }
.cast-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.cast-heading > div { display: grid; gap: 3px; padding: 12px; background: #eee5d2; border: 1px solid #dfcfae; border-radius: 7px; }
.cast-heading > div:first-child { background: #f5e7ca; border: 1px dashed #b4864b; }
.cast-heading span { font-size: 12px; color: #695a4d; }
.showcase { background: #eed9b5; color: #3a3025; border: 0; box-shadow: none; border-radius: 14px; }
.showcase-top { border-color: #cdb68f; }
.source-label { color: #66523e; }
.scene-stage { background: #e8d2ac; padding: 20px 44px 14px; }
.scene-poster { max-width: 300px; margin: auto; transform: none; padding: 8px; border: 8px solid #a77246; box-shadow: 0 5px 0 #865936; }
.poster-art { aspect-ratio: 9/13; background-size: cover; }
.scene-overview { color: #3a3025; border-top: 10px solid #a87547; }
.scene-overview small { color: #594637; }
.view-story { color: #244a37; }
.story-section, .origin-section { position: relative; border-top: 12px solid #aa784e; margin-top: 40px; padding-top: 55px; }
.story-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.story-cards article { min-width: 0; }
.story-image { height: 310px; overflow: hidden; border: 9px solid #a5754c; background: #efe3cf; }
.story-image img { width: 100%; height: 100%; object-fit: cover; }
.story-image.second img { object-position: 72% center; transform: scale(1.12); }
.story-image.third img { object-position: 25% center; transform: scale(1.25); }
.story-cards h3 { margin: 14px 0 3px; font: 700 21px Georgia,serif; }
.story-cards p, .illustration-note { font-size: 14px; color: #67584c; }
.origin-section { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.origin-links { display: grid; gap: 12px; align-content: center; }
.origin-links a { display: flex; justify-content: space-between; gap: 15px; padding: 22px; background: #f0e3ce; border: 1px solid #ddcbaa; color: #244a37; font-weight: 700; }
.origin-links span { font-weight: 400; }
@media(max-width: 800px) {
 .hero-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; padding-top: 20px; }
 .intro, .tool-card, .showcase { grid-column: 1; grid-row: auto; }
 .intro h1 { font-size: 28px; line-height: 1.1; }
 .intro h1 br { display: none; }
 .showcase { margin-top: 4px; }
 .scene-stage { padding: 18px 28px; }
 .story-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
 .story-cards article { flex: 0 0 76%; scroll-snap-align: start; }
 .story-image { height: 290px; }
 .origin-section { grid-template-columns: 1fr; gap: 20px; }
}
.poster-art { background-size: contain; background-repeat: no-repeat; background-color: #e7c997; }
.hero-layout [hidden] { display: none !important; }
.illustration-frames { position:relative; width:100%; height:100%; aspect-ratio:9/13; overflow:hidden; }
.illustration-frames img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation: scene-beat 12s infinite; }
.illustration-frames img:nth-child(2) { animation-delay:4s; }
.illustration-frames img:nth-child(3) { animation-delay:8s; }
[data-illustration].is-paused img { animation-play-state:paused; }
@keyframes scene-beat { 0%, 30% { opacity:1; } 33%, 100% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .illustration-frames img { animation:none; } .illustration-frames img:first-child { opacity:1; } }
.illustration-toggle { display:block; margin:8px auto 0; color:#264939; background:transparent; border:0; text-decoration:underline; cursor:pointer; }
.story-image img { object-fit:cover; object-position:center!important; transform:none!important; }
[data-tiktok-embed] { display:grid; gap:8px; }
[data-tiktok-id] { justify-self:start; border:1px solid #48624d; background:transparent; color:#244a37; padding:8px 12px; border-radius:5px; cursor:pointer; }
@media(max-width:800px) { body:has(.hero-layout) { overflow-x:clip; } .hero-layout, .nav, .wrap { width:100%; min-width:0; } .intro, .tool-card, .showcase, .creator { min-width:0; } }
/* v2 casting cards and story sequence */
.cast-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px auto 12px; max-width:350px; }
.cast-item { min-width:0; text-align:center; font-size:13px; }
.cast-item strong,.cast-item small { display:block; }
.cast-item small { color:#766552; font-size:11px; }
.cast-photo-upload,.cast-regular { height:112px; border:4px solid #fffaf1; background:#efe4d0; box-shadow:0 2px 7px #674e2d35; border-radius:5px; overflow:hidden; margin-bottom:8px; }
.cast-regular img { height:100%; width:100%; object-fit:cover; object-position:center 27%; }
.cast-photo-upload .dropzone { min-height:0; height:100%; border:1px dashed #b98b58; padding:7px; }
.cast-photo-upload .dropzone strong { font-size:12px; line-height:1.3; }
.cast-photo-upload .dropzone small { font-size:10px; }
.cast-photo-upload .upload-icon { width:30px; height:30px; margin:0 auto 5px; }
.cast-photo-upload .uploaded { height:100%; padding:4px; gap:4px; }
.cast-photo-upload .uploaded img { width:45px; height:65px; object-fit:cover; }
.cast-photo-upload .uploaded p { display:none; }
.cast-photo-upload .uploaded strong { overflow-wrap:anywhere; font-size:10px; }
.studio-label { margin-bottom:8px; }
.scene-stage { padding:16px 24px 8px 100px; }
.scene-poster { padding:5px; max-width:260px; position:relative; }
.poster-caption,.poster-bottom { display:none; }
.poster-art,.illustration-frames { aspect-ratio:9/16; }
.illustration-frames img { object-fit:cover; }
.cast-polaroids { position:absolute; z-index:3; right:calc(100% + 12px); top:34px; width:97px; display:grid; gap:12px; }
.cast-polaroids figure { margin:0; padding:5px; background:#fffaf0; box-shadow:0 3px 8px #6043264a; transform:rotate(-5deg); }
.cast-polaroids figure:nth-child(2) { transform:rotate(4deg); }
.cast-polaroids img { width:100%; height:104px; object-fit:cover; }
.cast-polaroids figcaption { font:700 8px/1.3 sans-serif; color:#51483d; text-align:center; padding:5px 0 2px; }
.illustration-toggle { font-size:11px; margin:5px auto; }
.scene-overview { padding:12px 18px; }
.sequence-section { border-top:10px solid #aa784e; margin-top:45px; padding-top:50px; }
.sequence-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:28px; align-items:center; }
.sequence-frames { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.sequence-frames figure { margin:0; min-width:0; }
.sequence-frames img { width:100%; aspect-ratio:9/16; object-fit:cover; border:4px solid #fffbf1; box-shadow:0 3px 8px #775c3a35; }
.sequence-frames figcaption { font-size:11px; margin-top:7px; line-height:1.3; }
.sequence-copy h3 { font:700 24px Georgia,serif; }
.sequence-copy p { padding:10px 0; border-bottom:1px solid #ddc9a7; }
.photo-tips { background:#efe3cb; border:1px solid #d7c3a2; padding:22px; margin-top:24px; box-shadow:3px 4px 0 #d2bc98; }
.photo-tips h3 { font:700 21px Georgia,serif; margin:0 0 12px; }
.photo-tips p { margin:6px 0; font-size:14px; }
[data-tiktok-player] { aspect-ratio:9/16; max-height:300px; background:#e8dac1; border:6px solid #a87547; }
[data-tiktok-player] iframe { display:block; width:100%; height:100%; border:0; }
.origin-links { grid-template-columns:1fr 1fr; }
.origin-links a { display:block; padding:8px 0; background:none; border:0; }
.origin-links a span { display:block; }
.story-image { height:auto; aspect-ratio:9/16; max-height:380px; }
.story-image img { object-fit:cover; }
@media (max-width:800px) {
 .wrap,.hero-layout,.nav { width:calc(100% - 32px); }
 .hero-layout { margin-inline:auto; }
 .nav { gap:8px; }
 .brand { font-size:17px; }
 .scene-stage { padding-left:88px; }
 .cast-polaroids { width:75px; right:calc(100% + 8px); }
 .cast-polaroids img { height:84px; }
 .sequence-grid { grid-template-columns:1fr; gap:22px; }
 .origin-links { grid-template-columns:1fr 1fr; }
}

.illustration-frames img { object-fit:contain; background:#e8d8bd; }
.cast-hint { margin:4px 0 12px; text-align:center; color:#655749; font-size:12px; line-height:1.45; }
.cast-item .error { margin:6px 0 0; text-align:left; }
/* Steps and notes share the same reading row on wider screens. */
@media (min-width: 1000px) {
 .how-section { grid-template-columns: .8fr 1.35fr; gap:52px; }
 .how-section .steps { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,.75fr); column-gap:30px; align-items:start; }
 .how-section .steps .step { grid-column:1; }
 .how-section .photo-tips { grid-column:2; grid-row:1 / span 3; margin-top:0; }
}
/* Original illustrated story, displayed as three panels of the same image. */
.poster-art, .illustration-frames { aspect-ratio:1/2; }
.illustration-frames img { object-fit:cover; width:100%; height:100%; }
.illustration-frames img:nth-child(1) { object-position:0% center; }
.illustration-frames img:nth-child(2) { object-position:50% center; }
.illustration-frames img:nth-child(3) { object-position:100% center; }
.story-image { aspect-ratio:1/2; }
.story-image img { object-fit:cover; width:100%; height:100%; }
.story-cards article:nth-child(1) .story-image img { object-position:0% center!important; }
.story-cards article:nth-child(2) .story-image img { object-position:50% center!important; }
.story-cards article:nth-child(3) .story-image img { object-position:100% center!important; }
.cast-polaroids figure:first-child img { object-position:0% center; }
.cast-polaroids figure:nth-child(2) img { object-position:87% center; }
.cast-crop { display:block; height:104px; overflow:hidden; }
.cast-polaroids .cast-crop img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(2.25); }
.cast-polaroids figure:first-child img { transform-origin:18% 32%; }
.cast-polaroids figure:nth-child(2) img { transform-origin:88% 36%; }
@media (max-width:800px) { .cast-crop { height:84px; } }
.cast-crop { background-image:url('/assets/cafe-story-triptych-v2.webp'); background-repeat:no-repeat; background-size:600% auto; }
.cast-polaroids .cast-crop img { opacity:0; }
.cast-polaroids figure:first-child .cast-crop { background-position:0% 27%; }
.cast-polaroids figure:nth-child(2) .cast-crop { background-position:100% 37%; }

/* Source credits have a visible poster before the optional external player loads. */
[data-tiktok-player] { position:relative; }
.source-poster { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:16px; padding:16px; text-align:center; color:#f5ead5; background:#264b3a; }
.source-poster>span { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.source-poster>strong { font:italic 24px Georgia,serif; overflow-wrap:anywhere; }
.source-poster>small { font-size:11px; line-height:1.6; opacity:.8; }

@media (max-width:800px) { .studio-label strong { font-size:20px; line-height:1.2; } .studio-label .mini-label { font-size:10px; } }

/* Keep adjacent panels overlapping so the old poster never flashes between beats. */
.poster-art { background-image:none; }
@keyframes scene-beat { 0%, 33.333% { opacity:1; } 36%, 100% { opacity:0; } }
/* Public trend clip and source stills */
.scene-poster { max-width:260px; }
.poster-art { aspect-ratio:9/16; background:none; }
.poster-art video { display:block; width:100%; height:100%; object-fit:contain; background:#211c17; }
.cast-polaroids .video-still { display:block; height:104px; overflow:hidden; }
.cast-polaroids .video-still img { display:block; width:100%; height:100%; object-fit:cover; }
.example-sound { display:block; margin:7px auto 0; color:#264939; background:transparent; border:0; text-decoration:underline; cursor:pointer; }
.story-image { aspect-ratio:9/16; }
.story-cards .story-image img { object-fit:contain; object-position:center!important; background:#2e271f; }
.sequence-frames img { object-fit:contain; background:#2e271f; }
@media(max-width:800px) { .cast-polaroids .video-still { height:84px; } }

/* Free image preview shares the café palette and existing result controls. */
.free-preview-button {
  width: 100%;
  justify-content: center;
  gap: 12px;
  background: var(--green, #164e3d);
  color: #fff;
}
.preview-free-tag {
  font-size: 10px;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 2px 5px;
}
.preview-promise {
  margin: 8px 0 14px;
  text-align: center;
  font-size: 12px;
  color: #625e55;
  line-height: 1.5;
}
.preview-elapsed {
  display: block;
  margin: 10px 0;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: #164e3d;
}
.image-preview-panel {
  padding: 16px;
}
.image-preview-panel > img {
  display: block;
  width: 100%;
  max-height: 550px;
  object-fit: contain;
  border-radius: 8px;
  background: #f5f0e5;
}
.image-preview-copy {
  margin: 14px 0;
}
.image-preview-copy strong {
  font-family: inherit;
  font-size: 17px;
  color: #164e3d;
}
.image-preview-copy p {
  font-size: 12px;
  line-height: 1.6;
  color: #625e55;
  margin: 6px 0 0;
}
.image-preview-panel .result-actions {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .image-preview-panel {
    padding: 12px;
  }
  .image-preview-panel .result-actions > button {
    flex: 1 1 140px;
  }
}

/* Example portraits and native, keyboard-accessible role replacement. */
.cast-photo-upload { position: relative; }
.cast-photo-upload .cast-portrait { padding: 0; border: 0; border-radius: 0; overflow: hidden; }
.cast-sample-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
.cast-example-badge { position: absolute; top: 6px; left: 6px; border-radius: 3px; padding: 2px 5px; color: #fffaf1; background: #164e3d; font-size: 9px; line-height: 1.4; letter-spacing: .03em; pointer-events: none; }
.cast-upload-action { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: max-content; max-width: calc(100% - 10px); border: 1px solid #164e3d; border-radius: 999px; padding: 4px 7px; background: #fffaf1; color: #164e3d; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.cast-upload-action .icon { --od-icon-size: 13px; flex: none; }
.cast-photo-upload .uploaded { position: relative; display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; }
.cast-photo-upload .uploaded > img { display: block; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; object-position: center 20%; }
.cast-photo-upload .uploaded > .od-field { position: absolute; inset: 0; }
.cast-photo-upload .uploaded .od-field > strong { display: none; }
.cast-replace-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cast-photo-upload .dropzone > input { z-index: 2; }
.cast-photo-upload .uploaded > .icon-button { position: absolute; top: 5px; right: 5px; z-index: 3; width: 24px; height: 24px; min-height: 24px; border: 1px solid #164e3d; border-radius: 50%; background: #fffaf1; color: #164e3d; padding: 3px; }
.cast-photo-upload .uploaded > .icon-button .icon { --od-icon-size: 14px; }
.cast-photo-upload:focus-within { outline: 3px solid #164e3d; outline-offset: 3px; }
.cast-photo-upload .dropzone:focus-within { outline: none; }
.cast-photo-upload .dropzone.dragging { outline: 3px solid #164e3d; outline-offset: -3px; }
.cast-photo-upload:has(input:disabled) { opacity: .65; }

/* Approved mascot: contain the full seated-cup silhouette. */
.brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }