:root {
  --ink: #102842;
  --ink-deep: #071727;
  --ink-soft: #3c5871;
  --paper: #f3f0e9;
  --paper-bright: #fffdf9;
  --paper-deep: #e6dfd1;
  --line: rgba(16, 40, 66, 0.15);
  --line-strong: rgba(16, 40, 66, 0.31);
  --lime: #c9edb5;
  --coral: #ff7555;
  --sky: #b9e3eb;
  --success: #28734e;
  --danger: #a93a32;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", "Noto Serif KR", serif;
  --sans: "Pretendard", "SUIT", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  --gutter: clamp(1.1rem, 4vw, 4rem);
  --content: 1240px;
  --radius: 1.35rem;
  --shadow: 0 18px 46px rgba(7, 23, 39, 0.09);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  content: "";
  opacity: 0.42;
  pointer-events: none;
  background-image: linear-gradient(rgba(16, 40, 66, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 40, 66, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.65; }
input, select, textarea { color: inherit; }
textarea { resize: vertical; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 50;
  top: -4rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink);
  background: var(--paper-bright);
}

.skip-link:focus { top: 1rem; }

.site-header,
main,
.site-footer {
  width: min(100%, calc(var(--content) + var(--gutter) * 2));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--gutter);
}

.wordmark { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; }
.wordmark-mark { display: grid; flex: 0 0 auto; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: 50%; background: var(--coral); color: var(--ink-deep); font-family: var(--serif); font-size: 1.25rem; font-weight: 800; }
.wordmark-copy { display: grid; min-width: 0; gap: 0.08rem; line-height: 1; }
.wordmark-copy strong { font-size: 0.75rem; letter-spacing: 0.1em; }
.wordmark-copy small { color: var(--ink-soft); font-size: 0.52rem; font-weight: 750; letter-spacing: 0.13em; }

.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; min-width: 0; }
.quiet-link, .text-button { border: 0; background: none; color: var(--ink-soft); font-size: 0.79rem; font-weight: 750; }
.quiet-link:hover, .text-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25rem; }
.session-chip { max-width: 13rem; overflow: hidden; color: var(--ink-soft); font-size: 0.72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.session-chip.is-active { display: inline-flex; align-items: center; gap: 0.38rem; color: var(--success); }
.session-chip.is-active::before { width: 0.45rem; height: 0.45rem; border-radius: 50%; content: ""; background: currentColor; }

main { padding-inline: var(--gutter); }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  min-height: auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.4rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius);
  color: #fff9ee;
  background: radial-gradient(circle at 83% 20%, rgba(60, 167, 182, 0.66), transparent 29rem), linear-gradient(130deg, #071727 8%, #102d50 62%, #15445d);
  overflow: hidden;
}

.intro-copy { min-width: 0; max-width: 44rem; }
.eyebrow, .section-label { margin: 0 0 0.65rem; font-size: 0.66rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.eyebrow { color: var(--lime); }
.eyebrow span { display: inline-block; width: 0.48rem; height: 0.48rem; margin-right: 0.45rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(201, 237, 181, 0.16); }
.intro h1, .card-heading h2, .guide-card h2, .project-heading h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.065em; line-height: 1.05; }
.intro h1 { max-width: 22ch; font-size: clamp(2.25rem, 3.7vw, 4rem); line-height: 1.12; text-wrap: balance; word-break: keep-all; }
.intro-copy > p:last-child { max-width: 41rem; margin: 1.4rem 0 0; color: rgba(255, 249, 238, 0.78); font-size: clamp(0.95rem, 1.4vw, 1.1rem); overflow-wrap: anywhere; word-break: keep-all; }
.intro-copy strong { color: var(--lime); }

.intro-note { display: grid; max-width: 19rem; padding: 1.4rem 1.5rem; border: 1px solid rgba(255, 249, 238, 0.26); border-radius: 1rem; background: rgba(7, 23, 39, 0.25); backdrop-filter: blur(8px); }
.intro-note strong { margin-top: 0.2rem; font-size: 1.12rem; }
.intro-note p { margin: 0.28rem 0 0; color: rgba(255, 249, 238, 0.72); font-size: 0.78rem; line-height: 1.65; word-break: keep-all; }
.note-index { color: var(--lime); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.11em; }
.note-divider { display: block; height: 1px; margin: 1rem 0; background: rgba(255, 249, 238, 0.25); }

.login-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.65fr);
  gap: 2rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 249, 0.78);
}

.login-copy { min-width: 0; }
.login-copy .section-label, .card-heading .section-label, .guide-card .section-label, .project-heading .section-label, .sidebar-heading .section-label { color: var(--coral); }
.login-copy h2 { max-width: 24ch; margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.06em; line-height: 1.12; }
.login-copy > p:last-child { max-width: 34rem; margin: 0.8rem 0 0; color: var(--ink-soft); font-size: 0.91rem; word-break: keep-all; }
.login-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; justify-content: flex-end; min-width: 0; }
.login-provider { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1rem; border: 1px solid var(--line-strong); border-radius: 0.65rem; background: var(--paper-bright); color: var(--ink); font-size: 0.85rem; font-weight: 800; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.login-provider:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 0 10px 24px rgba(7, 23, 39, .11); }
.login-provider.google::before, .login-provider.kakao::before, .login-provider.naver::before { display: grid; width: 1.35rem; height: 1.35rem; margin-right: .5rem; place-items: center; border-radius: 50%; content: attr(data-mark); font-size: .66rem; }
.login-provider.google::before { color: #fff; background: #4285f4; }
.login-provider.kakao::before { color: #2c2512; background: #fee500; }
.login-provider.naver::before { color: #fff; background: #03c75a; }
.muted { margin: 0; color: var(--ink-soft); font-size: 0.86rem; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .38fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: start; margin-top: 2rem; }
.creator-column, .guide-column { min-width: 0; }
.form-card, .project-result, .projects-sidebar { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 253, 249, 0.87); box-shadow: var(--shadow); }
.form-card { padding: clamp(1.3rem, 4vw, 3.25rem); }
.card-heading { max-width: 40rem; }
.card-heading h2 { font-size: clamp(1.75rem, 2.7vw, 2.7rem); line-height: 1.16; text-wrap: balance; word-break: keep-all; }
.card-heading > p:last-child { max-width: 36rem; margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.96rem; word-break: keep-all; }

form { margin-top: 2.5rem; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(12rem, .65fr); gap: 1rem; }
.field { display: grid; gap: .45rem; min-width: 0; }
.field > span, .choice-group legend { font-size: .78rem; font-weight: 800; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line-strong); border-radius: .65rem; outline: none; background: var(--paper-bright); font-size: .94rem; line-height: 1.5; transition: border-color .18s ease, box-shadow .18s ease; }
.field input, .field select { min-height: 3.15rem; padding: .7rem .88rem; }
.field textarea { min-height: 12rem; padding: .85rem .9rem; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16, 40, 66, .1); }
.field small { color: var(--ink-soft); font-size: .72rem; line-height: 1.65; }

.choice-group { min-width: 0; margin: 2rem 0 0; padding: 0; border: 0; }
.choice-group legend { padding: 0; }
.group-help { margin: .35rem 0 0; color: var(--ink-soft); font-size: .78rem; word-break: keep-all; }
.choice-cards { display: grid; gap: .7rem; margin-top: .8rem; }
.duration-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.production-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-card { position: relative; display: grid; min-width: 0; min-height: 7.45rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(243, 240, 233, .5); cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.choice-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.choice-card:has(input:checked) { border-color: var(--ink); background: #edf4e8; box-shadow: 0 9px 18px rgba(7, 23, 39, .08); }
.choice-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-card:has(input:focus-visible) { outline: 3px solid rgba(16, 40, 66, .3); outline-offset: 3px; }
.choice-title { display: block; padding-right: .3rem; font-size: .94rem; font-weight: 850; letter-spacing: -.03em; }
.choice-copy { display: block; margin-top: .38rem; color: var(--ink-soft); font-size: .73rem; line-height: 1.55; overflow-wrap: anywhere; word-break: keep-all; }
.is-recommended { border-color: rgba(40, 115, 78, .45); }
.recommend-badge { justify-self: start; margin-bottom: .55rem; padding: .14rem .42rem; border-radius: 999px; background: var(--lime); color: var(--ink-deep); font-size: .59rem; font-weight: 850; line-height: 1.2; }
.production-card { min-height: 9.5rem; }
.production-card .recommend-badge + .choice-title { margin-top: 0; }
.production-card:not(.is-recommended) .choice-title { margin-top: 1.66rem; }

.story-field { margin-top: 2rem; }
.narration-field { margin-top: 1.15rem; max-width: 36rem; }
.asset-picker { margin-top: 1.2rem; overflow: hidden; border: 1px solid rgba(16, 40, 66, .22); border-radius: .85rem; background: #f0f7f4; }
.asset-picker-summary { display: grid; gap: .18rem; padding: .82rem 1rem; cursor: pointer; list-style: none; color: var(--ink); }
.asset-picker-summary::-webkit-details-marker { display: none; }
.asset-picker-summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; color: var(--success); font-size: 1.2rem; font-weight: 800; transform: translateY(-50%); }
.asset-picker-summary { position: relative; padding-right: 2.7rem; }
.asset-picker[open] .asset-picker-summary { border-bottom: 1px solid rgba(16, 40, 66, .16); }
.asset-picker[open] .asset-picker-summary::after { content: "−"; }
.asset-picker-summary strong { max-width: 43rem; font-size: .82rem; letter-spacing: -.02em; line-height: 1.35; }
.asset-picker-summary small { color: var(--ink-soft); font-size: .69rem; line-height: 1.45; word-break: keep-all; }
.asset-picker-body { padding: .95rem 1rem 1rem; }
.asset-picker-heading { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.field-label { display: block; color: var(--success); font-size: .64rem; font-weight: 850; letter-spacing: .09em; }
.asset-picker h3 { max-width: 22ch; margin: .18rem 0 0; font-size: 1rem; letter-spacing: -.035em; line-height: 1.35; }
.asset-picker-heading p { max-width: 42rem; margin: .38rem 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.6; word-break: keep-all; }
.asset-manage-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .3rem; min-height: 2.35rem; padding: .48rem .68rem; border: 1px solid var(--line-strong); border-radius: .55rem; background: var(--paper-bright); color: var(--ink); font-size: .7rem; font-weight: 850; transition: transform .18s ease, background .18s ease; }
.asset-manage-link:hover { background: var(--ink); color: #fff9ee; transform: translateY(-1px); }
.asset-picker-status, .asset-picker-help { margin: .85rem 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.6; word-break: keep-all; }
.asset-picker-status.is-ready { color: var(--success); font-weight: 750; }
.asset-picker-status.is-error { color: var(--danger); font-weight: 750; }
.asset-generation-note { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin: .75rem 0 0; padding: .7rem .78rem; border: 1px dashed rgba(16, 40, 66, .25); border-radius: .6rem; background: rgba(255, 253, 249, .64); color: var(--ink-soft); font-size: .68rem; line-height: 1.55; word-break: keep-all; }
.asset-generation-note strong { color: var(--ink); font-size: .69rem; }
.story-asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-top: .9rem; }
.story-asset { position: relative; display: grid; min-width: 0; min-height: 8.35rem; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: .65rem; background: var(--paper-bright); color: var(--ink); text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.story-asset:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.story-asset.is-selected { border-color: var(--success); box-shadow: 0 0 0 2px rgba(40, 115, 78, .14); }
.story-asset img { display: block; width: 100%; height: 6rem; object-fit: cover; background: #e1e9e0; }
.story-asset-copy { display: grid; min-width: 0; gap: .1rem; padding: .5rem .55rem; }
.story-asset-copy strong { overflow: hidden; font-size: .66rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.story-asset-copy small { color: var(--ink-soft); font-size: .58rem; line-height: 1.25; }
.story-asset-check { position: absolute; z-index: 1; top: .38rem; right: .38rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid rgba(255, 253, 249, .78); border-radius: 50%; color: transparent; background: rgba(7, 23, 39, .6); font-size: .7rem; font-weight: 900; }
.story-asset.is-selected .story-asset-check { color: var(--ink-deep); border-color: var(--lime); background: var(--lime); }
.story-asset:focus-visible { outline: 3px solid rgba(16, 40, 66, .34); outline-offset: 3px; }

.premium-options { display: grid; grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr); gap: 1rem; align-items: end; margin-top: 1.2rem; padding: 1rem; border: 1px solid rgba(255, 117, 85, .38); border-radius: .75rem; background: #fff4eb; }
.premium-options p { margin: 0 0 .2rem; color: var(--ink-soft); font-size: .76rem; line-height: 1.6; word-break: keep-all; }
.consent-row { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1.7rem; color: var(--ink-soft); font-size: .76rem; line-height: 1.65; cursor: pointer; }
.consent-row input { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .2rem; accent-color: var(--ink); }
.form-footer { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.form-status { max-width: 28rem; margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.6; word-break: keep-all; }
.form-status.is-error { color: var(--danger); font-weight: 700; }
.form-status.is-ready { color: var(--success); font-weight: 700; }
.primary-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .8rem; min-height: 3.2rem; padding: .8rem 1.05rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff9ee; font-size: .86rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button:hover { transform: translateY(-2px); background: #1b4269; box-shadow: 0 12px 24px rgba(7, 23, 39, .2); }
.primary-button b { color: var(--lime); font-size: 1.15rem; line-height: 1; }

.guide-column { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.guide-card { border-radius: var(--radius); padding: 1.5rem; }
.dark-guide { color: #fff9ee; background: var(--ink-deep); }
.dark-guide .section-label { color: var(--lime); }
.guide-card h2 { max-width: 22ch; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.18; text-wrap: balance; word-break: keep-all; }
.guide-steps { display: grid; gap: 1rem; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.guide-steps li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .7rem; padding-top: 1rem; border-top: 1px solid rgba(255, 249, 238, .18); }
.guide-steps span { color: var(--lime); font-size: .64rem; font-weight: 850; letter-spacing: .08em; }
.guide-steps p { margin: 0; }
.guide-steps strong, .guide-steps small { display: block; }
.guide-steps strong { font-size: .82rem; }
.guide-steps small { margin-top: .18rem; color: rgba(255, 249, 238, .62); font-size: .7rem; line-height: 1.55; word-break: keep-all; }
.soft-guide { border: 1px solid rgba(255, 117, 85, .32); background: #fff0e8; }
.soft-guide p:last-child { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.7; word-break: keep-all; }

.project-area { margin-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 5rem; }
.project-heading { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; margin-bottom: 1.25rem; }
.project-heading h2 { font-size: clamp(1.75rem, 2.6vw, 2.7rem); line-height: 1.14; text-wrap: balance; word-break: keep-all; }
.refresh-button { flex: 0 0 auto; padding: .68rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font-size: .73rem; font-weight: 780; }
.refresh-button:hover { background: var(--paper-bright); }
.project-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, .34fr); gap: 1rem; align-items: start; }
.project-result { min-width: 0; min-height: 25rem; padding: clamp(1.2rem, 3vw, 2.2rem); }
.projects-sidebar { padding: 1.2rem; }
.sidebar-heading { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.sidebar-heading .section-label { margin-bottom: 0; }
.sidebar-heading > span { color: var(--ink-soft); font-size: .72rem; font-weight: 800; }
.project-list { display: grid; gap: .55rem; margin-top: .85rem; }
.list-empty { margin: 0; color: var(--ink-soft); font-size: .76rem; }
.project-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: stretch; }
.project-item { display: grid; min-width: 0; width: 100%; gap: .22rem; padding: .75rem; border: 1px solid transparent; border-radius: .7rem; background: transparent; color: var(--ink); text-align: left; transition: background .2s ease, border-color .2s ease; }
.project-item:hover, .project-item.is-active { border-color: var(--line); background: #f0f4ea; }
.project-item:focus-visible, .project-delete-button:focus-visible { outline: 3px solid rgba(255, 117, 85, .38); outline-offset: 2px; }
.project-item strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.project-item span { color: var(--ink-soft); font-size: .66rem; }
.project-delete-button { align-self: stretch; padding: .45rem .5rem; border: 1px solid rgba(184, 69, 58, .36); border-radius: .62rem; background: #fffafa; color: #ae4d43; font-size: .64rem; font-weight: 820; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.project-delete-button:hover:not(:disabled) { border-color: #b84f45; background: #fff0ee; color: #8e352d; }
.project-delete-button:disabled { cursor: wait; opacity: .62; }
.project-list-actions { display:flex; gap:.3rem; align-items:stretch; }
.project-archive-button { padding:.45rem .5rem; font-size:.64rem; }
.story-archive-tools { margin-top:1rem; padding-top:1rem; border-top:1px solid #cbd5dc; font-size:.8rem; }
.story-archive-tools .secondary-button { font-size:.75rem; padding:.5rem .6rem; }
.story-archive-row { display:flex; gap:.5rem; align-items:center; justify-content:space-between; padding:.65rem 0; }
.story-archive-row span { overflow-wrap:anywhere; }
.story-delete-dialog { width:min(560px,calc(100% - 32px)); max-height:85vh; box-sizing:border-box; overflow-y:auto; border:1px solid #c8d2dc; border-radius:18px; padding:clamp(20px,4vw,32px); color:#142b40; background:#fffdf9; }
.story-delete-dialog::backdrop { background:#071b2bcc; }
.story-delete-dialog h2 { margin:0 0 1rem; font-size:1.4rem; }
.story-delete-dialog p { font-size:.9rem; line-height:1.7; }
.story-delete-dialog label { display:block; margin:1rem 0; font-size:.9rem; }
.story-delete-dialog input[type=text] { box-sizing:border-box; width:100%; margin-top:.5rem; padding:.7rem; border:1px solid #a8b8c7; border-radius:8px; font:inherit; }
.story-delete-dialog .gate-check { display:flex; align-items:flex-start; gap:.5rem; }
.delete-warning,[data-delete-blockers] { color:#a7362a; }
.delete-dialog-actions { display:flex; gap:.7rem; justify-content:flex-end; flex-wrap:wrap; }
.delete-dialog-actions button { padding:.7rem 1rem; font-size:.9rem; }

.empty-project { max-width: 27rem; padding: 1rem 0; }
.empty-number { display: block; margin-bottom: 2rem; color: var(--coral); font-family: var(--serif); font-size: 3rem; line-height: 1; }
.empty-project h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.55rem, 2.35vw, 2.25rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.15; text-wrap: balance; word-break: keep-all; }
.empty-project p { margin: .9rem 0 0; color: var(--ink-soft); font-size: .91rem; word-break: keep-all; }

.plan-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.plan-kicker { margin: 0 0 .6rem; color: var(--coral); font-size: .64rem; font-weight: 850; letter-spacing: .12em; }
.plan-title { max-width: 26ch; margin: 0; font-family: var(--serif); font-size: clamp(1.65rem, 2.4vw, 2.5rem); font-weight: 500; letter-spacing: -.065em; line-height: 1.15; overflow-wrap: anywhere; text-wrap: balance; word-break: keep-all; }
.status-pill { display: inline-flex; flex: 0 0 auto; align-items: center; padding: .42rem .65rem; border-radius: 999px; background: #e5f2e7; color: var(--success); font-size: .67rem; font-weight: 850; }
.status-pill.is-approval { background: #fff0e8; color: #a24c31; }
.status-pill.is-error { background: #fff0f1; color: var(--danger); }
.plan-notice { margin: 1.1rem 0 0; padding: .85rem 1rem; border-left: 3px solid var(--lime); background: #f2f7ed; color: var(--ink-soft); font-size: .82rem; line-height: 1.7; word-break: keep-all; }
.progress-panel { margin-top: 1.2rem; padding: 1rem; border: 1px solid var(--line); border-radius: .85rem; background: #f8f7f1; }
.progress-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.progress-heading .section-label { margin-bottom: .28rem; color: var(--coral); }
.progress-heading h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.15rem, 2.1vw, 1.52rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.12; }
.progress-status, .scope-pill { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 1.8rem; padding: .3rem .55rem; border-radius: 999px; background: #e7f2e8; color: var(--success); font-size: .65rem; font-weight: 850; }
.progress-status.is-error { color: var(--danger); background: #fff0f1; }
.production-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.production-progress li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .45rem; min-width: 0; padding: .65rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--paper-bright); }
.progress-index { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; color: var(--ink-soft); background: var(--paper-deep); font-size: .56rem; font-weight: 850; letter-spacing: .04em; }
.production-progress strong, .production-progress small { display: block; min-width: 0; }
.production-progress strong { font-size: .72rem; line-height: 1.35; letter-spacing: -.025em; }
.production-progress small { margin-top: .14rem; color: var(--ink-soft); font-size: .6rem; line-height: 1.42; overflow-wrap: anywhere; word-break: keep-all; }
.production-progress .is-done { border-color: rgba(40, 115, 78, .32); background: #eef7ed; }
.production-progress .is-done .progress-index { color: #fff; background: var(--success); }
.production-progress .is-active { border-color: rgba(16, 40, 66, .5); box-shadow: inset 0 0 0 1px rgba(16, 40, 66, .08); }
.production-progress .is-active .progress-index { color: var(--ink-deep); background: var(--lime); }
.production-progress .is-pending { opacity: .62; }
.production-progress .is-error { border-color: rgba(169, 58, 50, .42); background: #fff6f5; }
.production-progress .is-error .progress-index { color: #fff; background: var(--danger); }
.progress-message { margin: .85rem 0 0; color: var(--ink-soft); font-size: .73rem; line-height: 1.55; word-break: keep-all; }
.story-bible { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 1.35rem; overflow: hidden; border: 1px solid var(--line); border-radius: .75rem; background: var(--line); }
.story-bible > div { min-width: 0; padding: .9rem; background: var(--paper-bright); }
.story-bible dt { color: var(--ink-soft); font-size: .65rem; font-weight: 850; letter-spacing: .08em; }
.story-bible dd { margin: .3rem 0 0; font-size: .83rem; line-height: 1.6; overflow-wrap: anywhere; word-break: keep-all; }
.story-bible dd small { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .68rem; font-weight: 500; line-height: 1.5; }
.series-plan { margin-top: 1.1rem; padding: 1.05rem; border: 1px solid rgba(31, 89, 66, .24); border-radius: .75rem; background: linear-gradient(135deg, #f2f8f0, #fffdf6); }
.series-plan-heading { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.series-plan-heading .section-label { margin-bottom: .28rem; color: var(--success); }
.series-plan-heading h3 { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -.045em; line-height: 1.18; }
.series-plan-heading > span { flex: 0 0 auto; padding: .34rem .5rem; border-radius: 999px; background: rgba(40, 115, 78, .12); color: var(--success); font-size: .66rem; font-weight: 850; }
.series-plan > p { margin: .7rem 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.62; word-break: keep-all; }
.episode-list { display: grid; gap: .5rem; margin: .85rem 0 .7rem; padding: 0; list-style: none; }
.episode-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .16rem .7rem; padding: .7rem .75rem; border-radius: .58rem; background: rgba(255,255,255,.74); }
.episode-list strong { min-width: 0; font-size: .8rem; overflow-wrap: anywhere; }
.episode-list span { color: var(--ink-soft); font-size: .65rem; font-weight: 750; white-space: nowrap; }
.episode-list p { grid-column: 1 / -1; margin: .05rem 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.5; word-break: keep-all; }
.series-plan > small { color: var(--ink-soft); font-size: .65rem; line-height: 1.45; }
.plan-subheading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin: 2rem 0 .85rem; }
.plan-subheading h3 { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; letter-spacing: -.05em; }
.plan-subheading span { color: var(--ink-soft); font-size: .7rem; font-weight: 750; }
.visual-screenplay { margin-top: 1.45rem; padding: 1rem; border: 1px solid rgba(31, 89, 66, .25); border-radius: .8rem; background: linear-gradient(135deg, #eef7ed, #fffdf6); }
.visual-screenplay .plan-subheading { margin: 0 0 .45rem; }
.visual-screenplay .plan-subheading h3 { font-size: clamp(1.15rem, 2.1vw, 1.42rem); }
.visual-screenplay-intro { max-width: 48rem; margin: 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.62; word-break: keep-all; }
.visual-screenplay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .85rem; }
.visual-screenplay-card { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); gap: .55rem; min-width: 0; padding: .76rem; border: 1px solid rgba(16, 40, 66, .15); border-radius: .62rem; background: rgba(255, 255, 255, .78); }
.visual-screenplay-card > span { display: grid; align-self: start; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; color: var(--ink-deep); background: var(--lime); font-size: .57rem; font-weight: 900; letter-spacing: .04em; }
.visual-screenplay-card > div { min-width: 0; }
.visual-screenplay-card strong { display: block; font-size: .77rem; line-height: 1.48; letter-spacing: -.025em; overflow-wrap: anywhere; word-break: keep-all; }
.visual-screenplay-card p { margin: .26rem 0 0; color: var(--ink-soft); font-size: .67rem; line-height: 1.53; overflow-wrap: anywhere; word-break: keep-all; }
.visual-screenplay-card ul { display: flex; flex-wrap: wrap; gap: .26rem; margin: .48rem 0 0; padding: 0; list-style: none; }
.visual-screenplay-card li { padding: .14rem .34rem; border-radius: 999px; color: #245d48; background: #e3f0e3; font-size: .58rem; font-weight: 760; line-height: 1.36; word-break: keep-all; }
.beat-list { display: grid; gap: .7rem; }
.beat-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.beat-index { display: grid; align-self: start; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: .67rem; font-weight: 850; }
.beat-body { min-width: 0; }
.beat-meta { display: flex; flex-wrap: wrap; gap: .4rem .65rem; align-items: baseline; }
.beat-body h4 { margin: 0; font-size: 1rem; letter-spacing: -.035em; overflow-wrap: anywhere; }
.beat-role { color: var(--coral); font-size: .64rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.beat-caption { display: inline-block; margin-top: .55rem; padding: .18rem .42rem; border-radius: .28rem; background: var(--paper-deep); font-size: .72rem; font-weight: 750; }
.beat-body p { margin: .58rem 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.65; overflow-wrap: anywhere; word-break: keep-all; }
.beat-direction { color: rgba(16, 40, 66, .63) !important; font-size: .72rem !important; }
.plan-warning-list { display: grid; gap: .38rem; margin: 1.25rem 0 0; padding: .9rem 1rem; border: 1px solid rgba(255, 117, 85, .4); border-radius: .7rem; background: #fff5ee; list-style: none; }
.plan-warning-list li { color: #88422e; font-size: .76rem; line-height: 1.55; word-break: keep-all; }
.production-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1.3rem; overflow: hidden; border-radius: .75rem; background: var(--ink); }
.production-summary > div { min-width: 0; padding: .85rem; background: #102842; color: #fff9ee; }
.production-summary small { display: block; color: rgba(255, 249, 238, .57); font-size: .6rem; font-weight: 800; letter-spacing: .06em; }
.production-summary strong { display: block; margin-top: .27rem; font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.render-gate { margin-top: 1.2rem; padding: clamp(1rem, 2.6vw, 1.35rem); border: 1px solid rgba(40, 115, 78, .28); border-radius: .85rem; background: #f0f7ed; }
.render-gate.is-error { border-color: rgba(169, 58, 50, .34); background: #fff4f3; }
.visual-engine-upgrade { border-color: rgba(36, 103, 151, .3); background: #eef7fb; }
.render-loading { display: grid; grid-template-columns: minmax(8.5rem, .42fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 1.5rem); overflow: hidden; padding: clamp(1rem, 2.7vw, 1.35rem); border-radius: .72rem; color: #f9f5e9; background:
  radial-gradient(circle at 12% 15%, rgba(119, 222, 194, .28), transparent 35%),
  radial-gradient(circle at 90% 100%, rgba(255, 116, 85, .25), transparent 42%),
  linear-gradient(135deg, #0a2540 0%, #103f57 56%, #155465 100%); }
.render-loading-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: .38rem; align-self: stretch; min-height: 10.75rem; padding: .52rem; border: 1px solid rgba(255,255,255,.18); border-radius: .6rem; background: rgba(3, 20, 36, .3); }
.render-loading-frames i { position: relative; display: block; min-height: 4rem; overflow: hidden; border: 1px solid rgba(229, 255, 241, .35); border-radius: .28rem; background: linear-gradient(150deg, rgba(126,220,193,.92) 0 22%, rgba(33,101,123,.95) 22% 58%, rgba(255,117,85,.86) 58% 100%); box-shadow: 0 0 0 1px rgba(4, 24, 41, .3) inset; }
.render-loading-frames i::after { position: absolute; inset: -20% -100%; content: ""; background: linear-gradient(105deg, transparent 37%, rgba(255,255,255,.6) 50%, transparent 63%); transform: translateX(-45%); animation: render-frame-sweep 2.8s ease-in-out infinite; }
.render-loading-frames i:nth-child(2) { margin-top: 1.1rem; background: linear-gradient(150deg, rgba(255,117,85,.9) 0 26%, rgba(233,242,224,.94) 26% 55%, rgba(22,78,98,.94) 55% 100%); }
.render-loading-frames i:nth-child(2)::after { animation-delay: .45s; }
.render-loading-frames i:nth-child(3) { margin-top: .36rem; background: linear-gradient(150deg, rgba(31,91,111,.96) 0 28%, rgba(183,232,174,.9) 28% 56%, rgba(255,195,133,.88) 56% 100%); }
.render-loading-frames i:nth-child(3)::after { animation-delay: .9s; }
.render-loading-body { min-width: 0; }
.render-loading-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; }
.render-loading-heading .section-label { margin-bottom: .32rem; color: #aaf2d2; }
.render-loading-heading h3 { margin: 0; color: #fffaf0; font-family: var(--serif); font-size: clamp(1.32rem, 2.45vw, 1.75rem); font-weight: 500; letter-spacing: -.052em; line-height: 1.12; }
.render-loading-heading > span { flex: 0 0 auto; padding: .32rem .52rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: rgba(255,250,240,.88); background: rgba(255,255,255,.1); font-size: .62rem; font-weight: 850; }
.render-loading-copy { max-width: 45rem; margin: .72rem 0 0; color: rgba(245,250,245,.82); font-size: .76rem; line-height: 1.62; word-break: keep-all; }
.render-loading-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .38rem; margin: .95rem 0 0; padding: 0; list-style: none; }
.render-loading-stages li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .42rem; min-width: 0; padding: .52rem; border: 1px solid rgba(255,255,255,.12); border-radius: .45rem; background: rgba(0, 17, 30, .22); opacity: .58; }
.render-loading-stages li > span { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; color: rgba(255,255,255,.73); background: rgba(255,255,255,.13); font-size: .5rem; font-weight: 900; letter-spacing: .04em; }
.render-loading-stages strong, .render-loading-stages small { display: block; min-width: 0; }
.render-loading-stages strong { color: #fffaf0; font-size: .66rem; line-height: 1.35; letter-spacing: -.025em; }
.render-loading-stages small { margin-top: .1rem; color: rgba(245,250,245,.65); font-size: .55rem; line-height: 1.38; word-break: keep-all; }
.render-loading-stages .is-active { border-color: rgba(157,242,208,.72); background: rgba(132,226,195,.16); opacity: 1; box-shadow: 0 0 0 1px rgba(157,242,208,.14) inset; }
.render-loading-stages .is-active > span { color: #0f4353; background: #aaf2d2; animation: render-stage-pulse 1.7s ease-in-out infinite; }
.render-loading-stages .is-past { border-color: rgba(170,242,210,.34); background: rgba(132,226,195,.09); opacity: .82; }
.render-loading-stages .is-past > span { color: #113e4d; background: #c5f1bd; }
.render-loading-rail { position: relative; height: .34rem; margin-top: .9rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.render-loading-rail i { position: absolute; top: 0; bottom: 0; left: -34%; width: 34%; border-radius: inherit; background: linear-gradient(90deg, transparent, #aaf2d2 45%, #fff5bd 75%, transparent); animation: render-rail-move 1.9s ease-in-out infinite; }
.render-loading-note { margin: .55rem 0 0; color: rgba(245,250,245,.62); font-size: .62rem; line-height: 1.48; word-break: keep-all; }
.render-refresh-button { border-color: rgba(16, 40, 66, .38); background: rgba(255,255,255,.68); }
@keyframes render-frame-sweep { 0%, 20% { transform: translateX(-65%) rotate(8deg); } 62%, 100% { transform: translateX(205%) rotate(8deg); } }
@keyframes render-stage-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(170,242,210,.4); } 50% { box-shadow: 0 0 0 .32rem rgba(170,242,210,0); } }
@keyframes render-rail-move { 0% { transform: translateX(0); } 100% { transform: translateX(390%); } }
.gate-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.gate-heading .section-label, .render-gate > .section-label { margin-bottom: .32rem; color: var(--success); }
.visual-engine-upgrade .gate-heading .section-label { color: #21678e; }
.render-gate.is-error > .section-label { color: var(--danger); }
.gate-heading h3, .render-gate > h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.28rem, 2.4vw, 1.7rem); font-weight: 500; letter-spacing: -.052em; line-height: 1.12; }
.scope-pill { color: var(--ink); background: var(--paper-bright); border: 1px solid var(--line); }
.render-gate > p { max-width: 48rem; margin: .72rem 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.68; word-break: keep-all; }
.gate-check { display: flex; gap: .62rem; align-items: flex-start; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(16, 40, 66, .12); color: var(--ink-soft); font-size: .74rem; line-height: 1.62; cursor: pointer; }
.gate-check input { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .17rem; accent-color: var(--ink); }
.gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .9rem; }
.secondary-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 2.7rem; padding: .65rem .85rem; border: 1px solid var(--ink); border-radius: .55rem; color: var(--ink); background: var(--paper-bright); font-size: .75rem; font-weight: 850; transition: transform .18s ease, background .18s ease, color .18s ease; }
.secondary-button:hover:not(:disabled) { color: #fff9ee; background: var(--ink); transform: translateY(-1px); }
.secondary-button:disabled { cursor: not-allowed; opacity: .55; }
.gate-feedback { flex: 1 1 18rem; max-width: 44rem; margin: 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.55; word-break: keep-all; }
.motion-preview { display: grid; gap: .8rem; margin-top: 1.15rem; padding: .85rem; border: 1px solid rgba(40, 115, 78, .28); border-radius: .75rem; background: var(--paper-bright); }
.motion-preview-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.motion-preview-heading strong { font-size: .82rem; }
.motion-preview-heading span { color: var(--success); font-size: .66rem; font-weight: 850; }
.motion-preview video { display: block; width: min(100%, 23rem); max-height: 39rem; margin-inline: auto; border-radius: .55rem; background: #071727; }
.motion-preview.is-landscape video { width: min(100%, 56rem); max-height: none; aspect-ratio: 16 / 9; }
.motion-preview-note { margin: 0; color: var(--ink-soft); font-size: .68rem; line-height: 1.55; word-break: keep-all; }
.motion-preview-missing { margin: 1rem 0 0; padding: .8rem; border: 1px dashed var(--line-strong); border-radius: .65rem; color: var(--ink-soft); font-size: .73rem; line-height: 1.55; }
.premium-disclosure { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .62rem .85rem; align-items: start; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(255, 117, 85, .4); border-radius: .7rem; background: #fff8f2; }
.disclosure-badge { align-self: start; padding: .22rem .43rem; border-radius: 999px; color: #88422e; background: #ffe3d7; font-size: .58rem; font-weight: 850; white-space: nowrap; }
.premium-disclosure strong { display: block; font-size: .78rem; letter-spacing: -.02em; }
.premium-disclosure p { margin: .25rem 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.6; word-break: keep-all; }
.premium-disclosure .gate-check, .premium-disclosure .secondary-button { grid-column: 1 / -1; }
.premium-disclosure .gate-check { margin-top: .15rem; padding-top: .8rem; }
.premium-disclosure .secondary-button { justify-self: start; }
.no-premium-note { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: baseline; margin-top: 1rem; padding: .72rem .85rem; border: 1px dashed rgba(16, 40, 66, .24); border-radius: .65rem; color: var(--ink-soft); font-size: .72rem; line-height: 1.55; }
.no-premium-note strong { color: var(--ink); font-size: .73rem; }
.next-stage { margin: 1.2rem 0 0; padding: 1rem; border-radius: .75rem; background: #e8f0e3; color: var(--ink); font-size: .8rem; line-height: 1.65; word-break: keep-all; }
.next-stage.is-pending { border: 1px solid rgba(36, 103, 151, .24); background: #eef7fb; color: #1e536f; }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem var(--gutter) 2rem; color: var(--ink-soft); font-size: .68rem; }
.site-footer p { margin: 0; }

@media (max-width: 980px) {
  .intro { grid-template-columns: 1fr; min-height: 0; }
  .intro-note { max-width: 27rem; }
  .workspace-grid, .project-layout { grid-template-columns: 1fr; }
  .guide-column { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-area { grid-template-columns: 1fr; }
  .login-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .site-header { align-items: flex-start; }
  .quiet-link { display: none; }
  .top-actions { flex-wrap: wrap; }
  .session-chip { max-width: 9rem; }
  .intro { padding: 3.3rem 1.35rem 2rem; border-radius: 1rem; }
  .intro h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .field-grid, .duration-cards, .production-cards, .premium-options, .story-bible, .production-summary, .production-progress { grid-template-columns: 1fr; }
  .series-plan-heading { display: grid; }
  .series-plan-heading > span { justify-self: start; }
  .story-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-card { min-height: auto; }
  .production-card { min-height: 8.5rem; }
  .form-footer, .project-heading, .gate-heading, .gate-actions { align-items: stretch; flex-direction: column; }
  .primary-button, .refresh-button, .secondary-button { width: 100%; }
  .premium-disclosure { grid-template-columns: 1fr; }
  .premium-disclosure .gate-check, .premium-disclosure .secondary-button { grid-column: auto; }
  .premium-disclosure .secondary-button { justify-self: stretch; }
  .guide-column { grid-template-columns: 1fr; }
  .visual-screenplay-grid { grid-template-columns: 1fr; }
  .render-loading { grid-template-columns: 1fr; }
  .render-loading-frames { min-height: 5.5rem; }
  .render-loading-frames i { min-height: 3.9rem; }
  .render-loading-stages { grid-template-columns: 1fr; }
  .project-result { min-height: 0; }
  .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .render-loading-frames i::after, .render-loading-stages .is-active > span, .render-loading-rail i { animation: none; }
}

@media (max-width: 420px) {
  .wordmark-copy small { font-size: .46rem; }
  .wordmark-copy strong { font-size: .68rem; }
  .session-chip { display: none; }
  .login-provider { width: 100%; }
  .beat-card { grid-template-columns: 2.1rem minmax(0, 1fr); gap: .55rem; }
}
:root { --episode-accent: #206674; }
.episode-production { padding: 28px; margin: 24px 0; background: #f1f8f7; border: 1px solid #a2c8ca; border-radius: 20px; }
.episode-production h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.4; }
.episode-production p { line-height: 1.8; }
.episode-production .gate-actions { flex-wrap: wrap; gap: 12px; }
.episode-production .primary-button { background: #153d4e; color: #fff; padding: 13px 22px; border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.episode-production button:disabled { opacity: .5; cursor: default; }
.episode-production select { width: 100%; padding: 12px; font: inherit; border: 1px solid #aac7cc; border-radius: 10px; }
.episode-plan-info { font-weight: 700; color: #205665; }
.episode-progress { background: linear-gradient(125deg,#113248,#23616d); border-radius: 16px; padding: 24px; color: #fff; margin: 20px 0; }
.episode-progress strong { display: block; margin-bottom: 14px; }
.episode-progress progress { width: 100%; height: 12px; accent-color: #b7e7c9; }
.episode-film { display: flex; gap: 7px; height: 44px; margin-bottom: 14px; }
.episode-film i { width: 30px; border-radius: 5px; background: linear-gradient(145deg,#a9d9ce 35%,#3b8794 35% 65%,#efb092 65%); animation: episode-pulse 2s ease-in-out infinite; }
.episode-film i:nth-child(2) { animation-delay: .25s; }.episode-film i:nth-child(3) { animation-delay: .5s; }
.episode-outputs article { background: #fff; border: 1px solid #d0e2e4; border-radius: 14px; padding: 20px; margin: 16px 0; }
.episode-outputs h4 { font-size: 19px; }.episode-outputs video { display: block; width: 100%; aspect-ratio: 16/9; background: #102b3d; border-radius: 9px; margin: 12px 0; }
.episode-cost-note { font-size: 13px; color: #526b75; }.previous-scene-test { margin-top: 24px; }.previous-scene-test summary { cursor: pointer; padding: 14px; }
@keyframes episode-pulse { 50% { opacity: .45; transform: translateY(-5px); } }
@media(prefers-reduced-motion:reduce) { .episode-film i { animation: none; } }
@media(max-width:650px) { .episode-production { padding: 19px; }.episode-production .gate-actions button { width: 100%; } }
.cinema-workbench { margin: 24px 0; padding: 28px; border: 1px solid #a9b6ca; border-radius: 20px; background: linear-gradient(135deg,#f4f5f9,#eef5f2); }
.cinema-workbench h3 { font-size: clamp(22px,2.1vw,30px); line-height: 1.4; }.cinema-workbench h4 { font-size: 18px; line-height: 1.6; }
.cinema-workbench p,.cinema-workbench dd { line-height: 1.8; word-break: keep-all; }
.cinema-selectors { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 16px; margin: 22px 0; }.cinema-selectors label { display: grid; gap: 8px; font-weight: 700; }.cinema-selectors select { width: 100%; padding: 12px; font: inherit; border: 1px solid #aab9ca; border-radius: 10px; }
.cinema-design { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; padding: 20px; background: #fff; border-radius: 14px; }.cinema-design figure { margin: 0; }.cinema-design img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #142639; border-radius: 8px; }.cinema-design figcaption,.cinema-note { font-size: 13px; color: #486075; line-height: 1.7; }.cinema-design dt { font-weight: 750; margin-top: 10px; }.cinema-design dd { margin: 3px 0; }.cinema-placeholder { padding: 40px 15px; background: #eef2f6; border-radius: 8px; }
.cinema-realism { padding: 18px; border: 1px solid #c7d3e0; border-radius: 12px; margin: 18px 0; }.cinema-realism summary { cursor: pointer; font-weight: 750; }.cinema-price { padding: 18px; border-radius: 12px; background: #e2ebf1; margin: 18px 0; }.cinema-price p { margin: 6px 0; font-size: 13px; }.cinema-workbench button:disabled { opacity: .45; cursor: default; }.cinema-workbench .primary-button { margin-top: 12px; }
.cinema-results article { margin-top: 18px; padding: 20px; border: 1px solid #c6d3df; border-radius: 14px; background: #fff; }.cinema-results video { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 9px; background: #142639; margin: 14px 0; }.cinema-loading { display: flex; align-items: center; gap: 12px; padding: 18px; color: #eff8ff; background: #16364a; border-radius: 10px; }.cinema-loading i { width: 22px; height: 22px; border: 3px solid #6893a1; border-top-color: #e4fbc1; border-radius: 50%; animation: cinema-spin 1s linear infinite; }@keyframes cinema-spin { to { transform: rotate(360deg); } }
@media(max-width:800px) { .cinema-design,.cinema-selectors { grid-template-columns: 1fr; }.cinema-workbench { padding: 19px; } }
@media(prefers-reduced-motion:reduce) { .cinema-loading i { animation: none; } }
.scene-board,.scene-render { margin:24px 0; padding:26px; border:1px solid #b4cdd1; border-radius:20px; background:#f6faf8; }
.scene-board h3,.scene-render h3,.scene-editor h3 { font-size:clamp(21px,1.7vw,28px); line-height:1.45; word-break:keep-all; margin:6px 0 12px; }
.scene-board p,.scene-render p,.scene-editor p { line-height:1.75; }
.scene-board button:disabled,.scene-render button:disabled,.scene-editor button:disabled { opacity:.45; cursor:default; }
.scene-workflow { display:flex; flex-wrap:wrap; padding:0; margin:0 0 24px; list-style:none; gap:8px; font-size:13px; }
.scene-workflow li { padding:8px 12px; border-radius:20px; background:#e7eeed; color:#385360; }.scene-workflow .is-current { background:#183f4c; color:#fff; }
.scene-toolbar,.scene-page-actions,.scene-pagination,.scene-editor-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:18px 0; }
.scene-board label,.scene-editor label { display:grid; gap:8px; }.scene-board label.gate-check,.scene-editor label.gate-check { display:flex; align-items:flex-start; }
.scene-board select,.scene-editor select,.scene-editor textarea { width:100%; padding:11px; font:inherit; color:#153547; background:#fff; border:1px solid #afc6cb; border-radius:9px; }
.scene-batch { margin:20px 0; padding:18px; background:#e9f1f0; border-radius:12px; }.scene-batch p,.scene-page-actions span { color:#405e69; font-size:13px; }
.scene-request-warning { margin:18px 0; padding:16px 18px; border:1px solid #d5ac6c; border-radius:12px; background:#fff5e5; color:#61431d; font-size:14px; }.scene-request-warning p { margin:8px 0 0; }
.scene-realistic-guide { margin:20px 0; padding:20px; border:1px solid #a9c7c4; border-radius:12px; background:#eff7f4; color:#173f45; }.scene-realistic-guide p { font-size:14px; }.scene-realistic-count { font-weight:700; }
.scene-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.scene-card { overflow:hidden; min-width:0; background:#fff; border:1px solid #c9d9dc; border-radius:14px; }.scene-card.is-approved { border-color:#398270; }
.scene-image { position:relative; display:block; padding:0; width:100%; aspect-ratio:16/9; background:#e0e9e8; border:0; text-align:center; cursor:pointer; overflow:hidden; }
.scene-image img { display:block; width:100%; height:100%; object-fit:contain; background:#183441; }.scene-image span { display:block; padding:20px; color:#405c66; font:14px/1.8 sans-serif; }
.scene-image b { position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:6px; background:#173a49e8; color:white; font-size:12px; }
.scene-card-copy { padding:16px; }.scene-card h4 { font-size:16px; line-height:1.55; word-break:keep-all; margin:8px 0; }.scene-card p,.scene-card details { font-size:13px; }.scene-card details { margin:12px 0; }.scene-card summary { cursor:pointer; }
.scene-status { color:#385c62; font-size:12px; font-weight:700; }.is-approved .scene-status { color:#216854; }.scene-card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }.scene-card-actions button { font-size:13px; padding:9px 11px; }
.scene-pagination { justify-content:center; font-size:13px; }.scene-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }.scene-methods label { display:grid; align-content:start; gap:9px; padding:17px; border:1px solid #b5c8cc; border-radius:12px; background:#fff; cursor:pointer; }.scene-methods label:has(input:checked) { border-color:#1b635f; box-shadow:inset 0 0 0 1px #1b635f; background:#e7f3ed; }.scene-methods span { font-size:13px; line-height:1.7; }.scene-methods strong { font-size:15px; }.scene-readiness { color:#37665e; font-size:13px; }
.scene-cinema-picks { display:grid; gap:12px; border:1px solid #b9ccd3; padding:18px; border-radius:12px; }.scene-cinema-picks label { font-size:14px; }
.scene-editor { box-sizing:border-box; width:min(860px,94vw); max-height:92vh; border:1px solid #aec6cb; border-radius:18px; padding:26px; color:#153547; background:#fcfdfb; }.scene-editor::backdrop { background:#071e2bc9; }.scene-editor-image { display:block; width:100%; max-height:43vh; object-fit:contain; background:#17313e; border-radius:10px; }.scene-editor label { margin:18px 0; }.scene-editor blockquote { font-size:14px; line-height:1.8; }.scene-editor-heading { margin-top:0; align-items:flex-start; }.scene-editor-heading h3 { font-size:21px; max-width:640px; }.scene-editor .primary-button { margin-top:12px; }
.scene-generation-status { margin:12px 0; padding:14px; border:1px solid #8cb5be; border-radius:12px; background:linear-gradient(135deg,#edf7f5,#e6f0f6); color:#123b4b; }
.scene-generation-heading { display:flex; align-items:center; gap:9px; font-size:14px; line-height:1.55; }
.scene-generation-heading strong { min-width:0; word-break:keep-all; overflow-wrap:anywhere; }
.scene-generation-indicator { display:grid; place-items:center; flex:0 0 20px; width:20px; height:20px; box-sizing:border-box; border-radius:50%; font-weight:800; }
.scene-generation-status.is-active .scene-generation-indicator { border:3px solid #bed8dc; border-top-color:#1f7180; animation:scene-image-spin 1.1s linear infinite; }
.scene-generation-meter { display:block; width:100%; height:8px; margin:12px 0 8px; accent-color:#2c7b79; border:0; border-radius:8px; overflow:hidden; }
.scene-generation-meter:indeterminate { background:linear-gradient(100deg,#cce0e3 25%,#418e99 45%,#cce0e3 65%); background-size:240% 100%; animation:scene-image-shimmer 2s ease-in-out infinite; }
.scene-generation-meter:indeterminate::-webkit-progress-bar { background:transparent; }
.scene-generation-status p { margin:7px 0 0; font-size:12px; line-height:1.65; color:#365e68; }
.scene-generation-status.is-ready { border-color:#90bda5; background:#edf6ee; }.scene-generation-status.is-ready .scene-generation-indicator { background:#286e52; color:white; }
.scene-generation-status.is-warning { border-color:#d4b68b; background:#fff5e7; }.scene-generation-status.is-warning .scene-generation-indicator { background:#95642b; color:white; }
.scene-editor { overscroll-behavior:contain; }.scene-editor [data-editor-generation] { scroll-margin-block:18px; }
.scene-editor-base { padding:10px 14px; background:#e8f2ed; border:1px solid #afcbbd; border-radius:10px; font-weight:700; }
.scene-version-picker { margin:20px 0 12px; padding:16px; border:1px solid #b4c9cd; border-radius:12px; background:#f1f6f5; }
.scene-version-picker h4 { margin:0 0 8px; font-size:18px; }.scene-version-picker p { margin:0; font-size:14px; }.scene-version-picker label { margin:12px 0; }
.scene-version-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:10px; max-height:290px; overflow:auto; padding:3px; }
.scene-version-choice { min-width:0; padding:4px; background:#fff; border:2px solid transparent; border-radius:10px; color:#153547; cursor:pointer; text-align:left; font:inherit; }
.scene-version-choice img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:#17313e; }.scene-version-choice span { display:block; padding:7px 4px; font-size:13px; line-height:1.5; }
.scene-version-choice[aria-pressed="true"] { border-color:#236b58; background:#e2f0e9; }.scene-version-choice:focus-visible { outline:3px solid #236b58; outline-offset:2px; }
.scene-reference-picker { margin:20px 0; padding:18px; border:1px solid #a4c9c0; background:#edf6f2; border-radius:12px; }
.scene-reference-picker h4 { margin:0 0 8px; font-size:18px; }.scene-reference-picker p { font-size:14px; }
.scene-reference-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:14px; }
.scene-reference-grid figure { margin:0; padding:8px; background:#fff; border:1px solid #b7cfc6; border-radius:10px; }
.scene-reference-grid img { width:100%; aspect-ratio:16/9; object-fit:contain; background:#17313e; border-radius:6px; }
.scene-reference-grid figcaption { display:grid; gap:5px; padding:8px 3px; font-size:13px; line-height:1.6; }.scene-reference-error { color:#9c2f2b; font-weight:700; }
.drama-full-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:20px 0; }
.drama-full-fields label { display:grid; gap:8px; }.drama-full-fields input,.drama-full-fields select { padding:12px; border:1px solid #afc6cb; border-radius:8px; font:inherit; width:100%; box-sizing:border-box; }
.drama-full-quote { padding:20px; margin:20px 0; background:#edf5f1; border:1px solid #accbbd; border-radius:12px; }.drama-full-quote h4 { font-size:20px; margin:0 0 12px; }.drama-full-quote dl { display:grid; gap:8px; }.drama-full-quote dt { font-weight:700; margin-top:10px; }.drama-full-quote dd { margin-left:0; line-height:1.8; }
.drama-full-loading { display:grid; gap:13px; margin-top:18px; padding:22px; color:#f3f7f0; background:linear-gradient(120deg,#153e4e,#1f605b); border-radius:13px; }.drama-full-loading progress { width:100%; height:11px; accent-color:#b7e1bb; }.drama-full-loading small { line-height:1.7; }.drama-film-strip { height:8px; background:repeating-linear-gradient(90deg,#b8dfc2 0 19px,transparent 19px 28px); background-size:56px; animation:drama-film-scroll 2s linear infinite; opacity:.7; }@keyframes drama-film-scroll { to{background-position:56px 0} }@media(prefers-reduced-motion:reduce){.drama-film-strip{animation:none}}
.drama-production-order{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style-position:inside;padding:0;margin:18px 0;font-size:.8rem;color:var(--ink-soft);}.drama-production-order li{border:1px solid var(--line);padding:10px;border-radius:9px;background:#f4f7f2;word-break:keep-all;}
@keyframes scene-image-spin { to { transform:rotate(360deg); } }
@keyframes scene-image-shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media(prefers-reduced-motion:reduce) { .scene-generation-status.is-active .scene-generation-indicator,.scene-generation-meter:indeterminate { animation:none; } }
@media(max-width:900px) { .scene-methods { grid-template-columns:1fr; } }
@media(max-width:600px) { .scene-board,.scene-render,.scene-editor { padding:17px; }.scene-card-grid { grid-template-columns:1fr; }.scene-pagination { gap:7px; }.scene-pagination button { padding:10px; } }
.scene-card.is-held { border-color:#548b96; background:#f1f8fa; }.scene-card.is-held .scene-status { color:#236477; }.scene-held-note { padding:10px; background:#e1f0f4; border-radius:8px; }
.scene-card.is-omitted { border-style:dashed; background:#f3f3f1; }.scene-card.is-omitted .scene-image { opacity:.5; }.scene-card.is-omitted .scene-status { color:#795b51; }
.scene-playback-summary { font-size:13px; color:#46636b; }.scene-playback-options { display:grid; gap:12px; margin:20px 0; }.scene-playback-options label { display:flex; align-items:flex-start; gap:12px; border:1px solid #bfd1d5; border-radius:12px; padding:16px; margin:0; cursor:pointer; }.scene-playback-options label:has(input:checked) { background:#e9f3f1; border-color:#376e72; }.scene-playback-options label:has(input:disabled) { opacity:.5; cursor:default; }.scene-playback-options input { margin-top:5px; flex-shrink:0; }.scene-playback-options small { display:block; font-size:13px; line-height:1.8; margin-top:6px; color:#476570; }
.auto-cinematic-panel,.auto-cinematic-status { margin:20px 0; padding:22px; border:1px solid #a7c6c4; border-radius:14px; background:#eff7f4; }
.auto-cinematic-panel h4,.auto-cinematic-status h4 { margin:0 0 12px; font-size:20px; line-height:1.5; word-break:keep-all; }
.auto-cinematic-panel p,.auto-cinematic-status p { font-size:13px; line-height:1.9; }
.auto-cinematic-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.auto-cinematic-fields label { display:grid; gap:9px; font-size:13px; font-weight:700; }
.auto-cinematic-fields input,.auto-cinematic-fields select { width:100%; min-width:0; padding:12px; background:white; border:1px solid #a7c2c4; border-radius:9px; color:#173846; font:inherit; }
.auto-cinematic-quote { padding:12px 15px; border-radius:9px; background:#dfeee8; font-weight:700; }
.auto-cinematic-status { background:#123e4e; color:#f4fcf8; }.auto-cinematic-status progress { width:100%; height:10px; accent-color:#b5e4bc; }
.auto-cinematic-status.is-awaiting { background:#f2f6ed; color:#173c39; border-color:#8ba89c; }
.auto-cinematic-status.is-awaiting .auto-cinematic-decisions span { color:#396c56; }
.cinematic-cost-card { padding:20px; margin:18px 0; background:#fffdf6; border:1px solid #b7c6ae; border-radius:10px; }
.cinematic-cost-card>strong { display:block; font-size:20px; line-height:1.6; overflow-wrap:anywhere; }
.cinematic-cost-card .gate-check { color:#173c39; }
.cinematic-review-note { padding:14px; border-left:4px solid #b96b3f; background:#fff5eb; }
.auto-cinematic-status summary { cursor:pointer; margin:14px 0; font-size:14px; font-weight:700; }
.auto-cinematic-decisions { display:grid; gap:12px; }.auto-cinematic-decisions article { padding:14px; border-radius:10px; background:#ffffff0e; }.auto-cinematic-decisions strong { display:block; font-size:14px; }.auto-cinematic-decisions span { display:inline-block; margin-top:8px; color:#cae7b5; font-size:12px; }
.auto-cinematic-film { display:flex; gap:8px; height:35px; margin:14px 0; }.auto-cinematic-film i { width:20px; border-radius:5px; background:#bfe3bd; animation:auto-cinematic-pulse 1.5s ease-in-out infinite; }.auto-cinematic-film i:nth-child(2) { animation-delay:.2s; background:#f28a6f; }.auto-cinematic-film i:nth-child(3) { animation-delay:.4s; background:#83c4c4; }
@keyframes auto-cinematic-pulse { 0%,100% { opacity:.35; transform:scaleY(.5); } 50% { opacity:1; transform:scaleY(1); } }
@media(max-width:600px) { .auto-cinematic-fields { grid-template-columns:1fr; }.auto-cinematic-panel,.auto-cinematic-status { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .auto-cinematic-film i { animation:none; } }
.story-variants,.director-panel { margin:24px 0; padding:24px; background:#eef5f1; border:1px solid #adc5bb; border-radius:15px; color:#163d3b; }
.story-variants h3,.director-panel h3 { font-size:22px; line-height:1.5; margin:8px 0 12px; word-break:keep-all; }
.story-variants p,.director-panel p { font-size:14px; line-height:1.85; }.director-panel summary { cursor:pointer; font-weight:700; margin:18px 0; }.director-panel article { padding:16px; margin-top:14px; border-radius:10px; background:#fffdf7; border:1px solid #c5d4cc; }.director-panel h4 { font-size:17px; line-height:1.6; margin:0 0 12px; }.director-panel strong { color:#285e57; }.presentation-first { margin-bottom:24px; }.presentation-first legend { font-size:17px; font-weight:700; }
@media(max-width:600px) { .story-variants,.director-panel { padding:16px; } }
/* Remembered settings are optional, readable, and never oversized headlines. */
.story-memory,.story-memory-new{margin:1.3rem 0;padding:1.3rem;border:1px solid #bed0c9;border-radius:18px;background:#f2f7f3;}
.story-memory h3{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;margin:.5rem 0;}
.story-memory p,.story-memory-new p{line-height:1.8;font-size:.93rem;}
.story-memory-new summary{cursor:pointer;font-weight:700;line-height:1.6;}
.memory-fields{display:grid;grid-template-columns:1fr;gap:1rem;margin:1rem 0;min-width:0;}
.memory-fields .field{margin:0;min-width:0;}
.memory-fields input,.memory-fields textarea{width:100%;min-width:0;box-sizing:border-box;font-family:inherit;font-size:1rem;line-height:1.6;}
.memory-fields .field textarea{min-height:6rem;resize:vertical;}
.drama-workbench{margin-top:24px;}
.drama-shot-picker{display:grid;gap:10px;margin:20px 0;}
.drama-shot-picker label,.drama-review>label{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid #c4d4ce;border-radius:10px;background:#f4f8f3;}
.drama-shot-picker input,.drama-review input{flex:0 0 auto;margin-top:5px;}
.drama-shot-picker small{display:block;margin-top:5px;color:#49675f;}
.drama-shot-previews,.drama-result-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:20px 0;}
.drama-shot-previews article{padding:12px;border:1px solid #c4d4ce;border-radius:12px;min-width:0;background:#fffdf7;}
.drama-shot-previews img,.drama-results video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:8px;background:#102a33;}
.drama-shot-previews p{font-size:14px;line-height:1.75;}
.drama-shot-previews strong,.drama-result-shots strong{display:block;font-size:14px;line-height:1.6;margin:10px 0;}
.drama-shot-previews summary{cursor:pointer;font-size:14px;}
.drama-results>article{padding:20px 0;border-top:1px solid #b8c8c0;margin-top:24px;}
.drama-results h4{font-size:19px;line-height:1.6;}
.drama-results>.secondary-button,.drama-results video+a{margin-top:12px;}
.drama-review{display:grid;gap:10px;margin:20px 0;padding:16px;border:1px solid #b8c8c0;border-radius:12px;min-width:0;}
.drama-review legend{font-size:15px;font-weight:700;padding:0 6px;}
.drama-review>label:has(textarea){display:block;}
.drama-review textarea{width:100%;box-sizing:border-box;margin-top:8px;font:inherit;}
@media(max-width:600px){.drama-shot-previews,.drama-result-shots{grid-template-columns:1fr;}.drama-review{padding:12px;}}

/* One task at a time. The step tabs never start generation or approve costs. */
body[data-studio-active="true"] .intro{padding-block:1.1rem;grid-template-columns:1fr;min-height:0;}
body[data-studio-active="true"] .intro-copy h1{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.35;margin-block:.35rem;max-width:none;}
body[data-studio-active="true"] .intro-copy>p:not(.eyebrow),body[data-studio-active="true"] .intro-note{display:none;}
.studio-flow-layout{margin-block:1.5rem;}
body[data-studio-active="true"] .studio-flow-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.5rem;align-items:start;}
.studio-flow-content{min-width:0;}
.studio-flow-nav{position:sticky;top:16px;align-self:start;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;z-index:3;margin:0;padding:1rem;border:1px solid var(--line);border-radius:18px;background:rgba(255,253,249,.98);box-shadow:0 8px 26px rgba(7,23,39,.06);}
.studio-flow-toggle{display:none;}
.studio-step-heading{display:grid;gap:.35rem;margin-bottom:.85rem;}
.studio-step-heading h2{font-family:var(--sans);font-size:1rem;line-height:1.4;margin:.2rem 0;word-break:keep-all;}
.studio-step-heading .section-label{font-size:.62rem;margin:0;}
.studio-step-heading>span{color:var(--ink-soft);font-size:.78rem;white-space:nowrap;}
.studio-step-tabs{display:grid;grid-template-columns:1fr;gap:.45rem;}
.studio-step-tabs button{display:flex;align-items:center;gap:.65rem;text-align:left;border:1px solid transparent;border-radius:11px;min-height:52px;padding:.8rem .6rem;background:transparent;color:var(--ink-soft);font-size:.88rem;font-weight:750;line-height:1.4;min-width:0;}
.studio-step-tabs button:not(:disabled):hover{background:#edf2ee;border-color:var(--line);}
.studio-step-tabs button>span:last-child{min-width:0;word-break:keep-all;}
.studio-step-tabs small{display:block;font-size:.62rem;font-weight:500;margin-top:.15rem;}
.studio-step-number{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:50%;font-size:.65rem;background:var(--paper-deep);color:var(--ink);}
.studio-step-tabs [aria-selected="true"],.studio-step-tabs [aria-selected="true"]:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.studio-step-tabs [aria-selected="true"] .studio-step-number{background:var(--lime);color:var(--ink);}
.studio-step-tabs button:disabled{cursor:not-allowed;opacity:.45;}
.studio-step-tabs button:focus-visible,.studio-flow-stage:focus-visible{outline:3px solid #287b86;outline-offset:3px;}
.studio-flow-stage,[data-flow-panel="register"]{min-width:0;scroll-margin-top:20px;}
.studio-stage-heading{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);}
.studio-stage-heading .section-label{margin:0;color:#467069;font-size:.7rem;}
.studio-stage-heading h3{font-family:var(--sans);font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.4;margin:.35rem 0;word-break:keep-all;}
.studio-stage-heading p:last-child{margin:.3rem 0 0;color:var(--ink-soft);font-size:.92rem;}
.studio-flow-stage .scene-workflow{display:none;}
.studio-flow-stage .scene-board{margin-top:0;}
[data-flow-panel="review"] .scene-batch{display:none;}
[data-flow-panel="analysis"] .scene-card-grid,[data-flow-panel="analysis"] .scene-batch,[data-flow-panel="analysis"] .scene-page-actions,[data-flow-panel="analysis"] .scene-pagination{display:none;}
.flow-optional{border:1px solid var(--line);border-radius:12px;background:var(--paper-bright);padding:1rem;margin-block:1rem;}
.flow-optional>summary{font-size:.9rem;font-weight:750;cursor:pointer;word-break:keep-all;}
.flow-optional:not([open])>summary{margin:0;}
.flow-scope-note{border-left:3px solid #448078;padding:.75rem 1rem;background:#eef6f1;color:var(--ink-soft);font-size:.88rem;}
.flow-stage-footer{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:1.5rem;}
.flow-stage-footer .primary-button,.flow-stage-footer .secondary-button{font-size:.88rem;}
.flow-project-picker{display:grid;gap:.65rem;padding-top:1rem;margin-top:1rem;border-top:1px solid var(--line);}
.flow-project-picker label{display:grid;gap:.4rem;font-size:.75rem;color:var(--ink-soft);min-width:0;}
.flow-project-picker select{width:100%;min-width:0;max-width:100%;padding:.5rem .55rem;border:1px solid var(--line);border-radius:7px;background:white;font-size:.8rem;}
.flow-project-picker .text-button{font-size:.8rem;white-space:nowrap;}
.studio-flow-stage .drama-shot-picker{max-height:300px;overflow:auto;overscroll-behavior:contain;}
body[data-studio-active="true"] .project-area{margin-top:0;}
body[data-studio-active="true"] .workspace-grid{margin-top:0;grid-template-columns:1fr;}
body[data-studio-active="true"] .project-layout{grid-template-columns:1fr;}
body[data-studio-active="true"] .project-heading h2{font-size:clamp(1.5rem,2vw,2rem);}
body[data-studio-active="true"] .project-result{padding:clamp(1rem,2vw,1.6rem);}
body[data-studio-active="true"] .projects-sidebar{max-height:300px;overflow:auto;overscroll-behavior:contain;}
.studio-flow-stage .scene-render h3{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.45;word-break:keep-all;}
@media(max-width:800px){body[data-studio-active="true"] .studio-flow-layout{grid-template-columns:1fr;gap:1rem;}.studio-flow-nav{position:static;max-height:none;padding:.75rem;}.studio-flow-toggle{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;border:0;background:transparent;color:var(--ink);padding:.3rem;font-size:.85rem;font-weight:750;text-align:left;}.studio-flow-toggle>span:last-child{font-size:.72rem;white-space:nowrap;color:var(--ink-soft);}.studio-flow-nav[data-menu-open="false"] .studio-flow-menu{display:none;}.studio-flow-menu{padding-top:1rem;}.studio-step-heading .section-label{display:none;}.studio-step-tabs{grid-template-columns:1fr;}.studio-step-heading h2{font-size:.9rem;}.studio-step-tabs button{padding:.6rem;}.flow-project-picker{margin-top:.7rem;padding-top:.7rem;}.studio-flow-nav:focus-within{outline-offset:2px;}}
@media(max-width:600px){body[data-studio-active="true"] .projects-sidebar{max-height:35vh;}.flow-stage-footer{gap:.5rem;}}
.visual-bible-intro{padding:1.4rem;background:#eaf1ec;border:1px solid #cdded2;border-radius:16px;margin-bottom:1.4rem;}
.visual-bible-intro h4{font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.45;margin:.4rem 0;word-break:keep-all;}
.visual-bible-preserve{font-size:.85rem;color:#365644;}.visual-master-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0;}
.visual-master-grid article,.visual-bindings article{min-width:0;background:#fffdf8;border:1px solid #d5ded8;border-radius:14px;padding:1.1rem;}
[data-visual-bible][data-master-kind="character"] [data-master]:not([data-kind="character"]),[data-visual-bible][data-master-kind="location"] [data-master]:not([data-kind="location"]),[data-visual-bible][data-master-kind="prop"] [data-master]:not([data-kind="prop"]){display:none;}[data-master-kind][aria-pressed="true"]{background:#173d38;color:#fffdf8;}
.visual-world-summary{margin:1rem 0;padding:1rem 1.15rem;background:#eaf2f8;border:1px solid #c5d9e7;border-radius:12px;color:#183e55}.visual-world-summary p{margin:.5rem 0 0;line-height:1.65}.visual-usage-count{display:inline-block;margin:.4rem 0;padding:.2rem .55rem;border-radius:20px;background:#e5eee1;color:#325339;font-size:.78rem;font-weight:700}.visual-usage,.visual-group-tools{margin-top:.8rem;padding:.7rem;background:#f2f5ef;border-radius:9px}.visual-usage summary,.visual-group-tools summary{cursor:pointer;font-weight:650}.visual-usage p{font-size:.82rem;line-height:1.6;margin:.55rem 0}.visual-usage small{display:block;color:#5d7273}.visual-connected-source{padding:.8rem;border:1px dashed #aabec9;background:#edf3f5;border-radius:10px;margin:.8rem 0}.visual-connected-source img{display:block;max-width:100%;max-height:190px;object-fit:contain;margin:.6rem auto}.visual-connected-source small{display:block;line-height:1.5}.visual-group-tools select{width:100%;margin:.6rem 0}.visual-prop-bindings{padding:.8rem;background:#eff2e7;border-radius:10px;margin:.7rem 0}.visual-prop-bindings p{font-size:.8rem;margin:.35rem 0}
.studio-flow-nav .studio-step-tabs button[aria-selected="true"],.studio-flow-nav .studio-step-tabs button[aria-selected="true"]:hover{background:#112c44;color:#fffdf5;}
[data-vb-form] fieldset{border:0;padding:0;min-width:0;}[data-vb-form] label{display:grid;gap:.45rem;margin:.8rem 0;font-size:.85rem;font-weight:650;}[data-vb-form] textarea,[data-vb-form] input:not([type=checkbox]),[data-vb-form] select{width:100%;min-width:0;box-sizing:border-box;padding:.7rem;border:1px solid #bdcfc6;border-radius:8px;font:inherit;background:white;color:#173d38;}[data-vb-form] small{font-weight:400;color:#526a65;}
.visual-master-preview{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#edf1ed;color:#587166;}.visual-master-preview img{width:100%;height:100%;object-fit:contain;}.visual-master-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem;margin-top:.8rem;}.visual-master-actions button{font-size:.82rem;}.visual-master-actions select{flex:1;max-width:340px;}.visual-bindings{margin:1.4rem 0;}.visual-bindings summary{font-weight:750;cursor:pointer;padding:1rem;background:#eef2f4;border-radius:10px;}.visual-bindings article{margin:.8rem 0;}.visual-bindings h5{font-size:.95rem;margin:0 0 .75rem;line-height:1.5;}.visual-bible-controls{padding:1rem;border-top:1px solid #d3dfd9;margin-top:1.5rem;}[data-vb-form] .gate-check{display:flex;align-items:flex-start;font-weight:400;}[data-vb-progress] progress{width:100%;accent-color:#286c58;}[data-vb-message]{color:#295647;line-height:1.6;}.visual-engine-note{margin-top:1.5rem;font-size:.85rem;color:#4c6263;}.visual-engine-note summary{cursor:pointer;font-weight:650;}
@media(max-width:850px){.visual-master-grid{grid-template-columns:1fr;}.visual-master-actions>*{max-width:100%;}.visual-bible-intro{padding:1rem;}}
.visual-master-gallery{margin:20px 0;padding:18px;border:1px solid #c6d8ce;border-radius:16px;background:#f3f7ef}
.visual-master-gallery summary{cursor:pointer;font-weight:800;color:#163f38}
.visual-master-gallery>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.visual-master-gallery figure{margin:0;border:1px solid #d5dfd7;border-radius:12px;overflow:hidden;background:#fff}
.visual-master-gallery img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#e9ece8}
.visual-master-gallery figcaption{padding:9px;font-size:13px;font-weight:700;color:#173b38}
@media(max-width:640px){.visual-master-gallery>div{grid-template-columns:repeat(2,minmax(0,1fr))}}