:root {
  --start-paper: #f4efe6;
  --start-paper-deep: #e8dfd2;
  --start-ink: #101817;
  --start-muted: #646964;
  --start-leaf: #16845b;
  --start-leaf-deep: #0f6244;
  --start-gold: #f4cb70;
  --start-line: rgba(16, 24, 23, 0.16);
  --start-serif: "Times New Roman", Times, serif;
  --start-sans: Arial, Helvetica, sans-serif;
}

html[lang] body.start-page {
  min-height: 100vh;
  color: var(--start-ink);
  background:
    radial-gradient(circle at 15% 4%, rgba(255, 255, 255, 0.92), transparent 31rem),
    linear-gradient(135deg, var(--start-paper), #f8f5ee 55%, var(--start-paper-deep));
  font-family: var(--start-serif);
  font-size: 18px;
}

body.start-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.start-header { border-bottom: 1px solid var(--start-line); }
.start-header .nav-shell { width: min(1240px, calc(100% - 64px)); min-height: 100px; grid-template-columns: 1fr auto; }

html[lang="en"] .start-header .brand,
.start-header .brand {
  gap: 14px;
  color: var(--start-ink);
  font-family: var(--start-sans);
  font-size: clamp(27px, 2.1vw, 36px);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: none;
}

html[lang="en"] .start-header .brand-mark,
.start-header .brand-mark {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 98, 68, 0.16);
  border-radius: 14px;
  background: rgba(255, 252, 245, 0.92);
  box-shadow: 0 8px 22px rgba(15, 98, 68, 0.12);
}

html[lang="en"] .start-header .brand-mark::before { content: none; }
html[lang="en"] .start-header .brand-mark img,
.start-header .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.start-header-actions { display: flex; align-items: center; gap: 12px; font-family: var(--start-sans); }

html[lang] .start-header .language-switcher {
  padding: 4px;
  border: 1px solid var(--start-line);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 8px 22px rgba(34, 31, 27, 0.06);
}

html[lang] .start-header .language-switcher button { min-width: 52px; min-height: 36px; color: var(--start-muted); font-size: 15px; }
html[lang] .start-header .language-switcher button.is-active,
html[lang] .start-header .language-switcher button[aria-pressed="true"] { color: #fff; background: var(--start-ink); box-shadow: none; }

.back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 17px;
  color: #fff;
  border-radius: 999px;
  background: var(--start-leaf-deep);
  font-size: 16px;
  font-weight: 700;
}
.back-link:hover,
.back-link:focus-visible { color: #fff; background: var(--start-leaf); }
.back-link:focus-visible { outline: 3px solid var(--start-gold); outline-offset: 2px; }

.start-main {
  display: grid;
  width: min(1240px, calc(100% - 64px));
  min-height: calc(100vh - 100px);
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  align-items: start;
  gap: clamp(28px, 4vw, 52px);
  margin-inline: auto;
  padding-block: clamp(36px, 5vw, 68px);
}

.start-panel,
.start-visual {
  border: 1px solid var(--start-line);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 34px 80px rgba(55, 45, 34, 0.14);
}
.start-panel { padding: clamp(30px, 4vw, 54px); backdrop-filter: blur(16px); }

.start-progress { display: grid; gap: 12px; margin-bottom: 38px; padding-bottom: 18px; border-bottom: 1px solid var(--start-line); }
.start-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--start-muted); font-family: var(--start-sans); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.start-progress strong { color: var(--start-leaf-deep); }
.progress-track { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: #e7e0d5; }
.progress-track i { display: block; width: 33.333%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--start-leaf), var(--start-gold)); transition: width 240ms ease; }

.start-panel .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--start-leaf-deep); font-family: var(--start-sans); font-size: 14px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; }
.start-panel .eyebrow span { width: 25px; height: 2px; background: var(--start-gold); }
.start-panel h1 { max-width: 720px; margin: 0 0 15px; color: var(--start-ink); font-family: var(--start-serif); font-size: clamp(50px, 5.2vw, 74px); line-height: 0.96; letter-spacing: -0.05em; }
.start-panel h1:focus { outline: 0; }
.start-lede { max-width: 650px; margin: 0 0 34px; color: #454b47; font-size: clamp(20px, 1.65vw, 24px); line-height: 1.45; }
.carried-spark { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 15px; margin: -10px 0 28px; padding: 12px 15px 12px 12px; color: var(--start-leaf-deep); border: 1px solid rgba(22,132,91,.3); border-radius: 18px; background: linear-gradient(135deg,#edf7ef,#fffaf0); box-shadow: 0 12px 28px rgba(24,74,55,.08); }
.carried-spark[hidden] { display: none; }
.carried-spark img { display: block; width: 82px; height: 68px; object-fit: cover; border-radius: 12px; background: #e9e3d7; }
.carried-spark div { display: grid; gap: 4px; min-width: 0; font-family: var(--start-sans); }
.carried-spark strong { color: var(--start-ink); font-size: 17px; }
.carried-spark small { color: var(--start-muted); font-size: 14px; line-height: 1.4; }
.carried-spark > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; border-radius: 50%; background: var(--start-leaf); font-family: var(--start-sans); font-weight: 800; }

.choice-fieldset { margin: 0 0 28px; padding: 0; border: 0; }
.step-panel { animation: step-in 220ms ease both; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.choice-fieldset legend { width: 100%; margin-bottom: 12px; color: var(--start-ink); font-family: var(--start-sans); font-size: 16px; font-weight: 700; }
.choice-fieldset legend.choice-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choice-read-button { min-height: 38px; padding-inline: 13px; }
.start-mode-grid,
.story-origin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.story-origin-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-file-field[hidden] { display: none; }
.story-theme-entry { display: grid; gap: 12px; margin-top: 18px; font-family: var(--start-sans); }
.story-theme-entry > div:first-child { display: grid; gap: 3px; }
.story-theme-entry > div:first-child strong { color: var(--start-ink); font-size: 20px; }
.story-theme-entry > div:first-child small { color: var(--start-muted); font-size: 14px; }
.story-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.story-theme-grid button { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; min-height: 78px; align-items: center; padding: 12px; color: var(--start-ink); text-align: left; border: 1px solid var(--start-line); border-radius: 15px; background: #fff; cursor: pointer; }
.story-theme-grid button:hover { border-color: var(--start-leaf); background: #eef7ef; }
.story-theme-grid button > span { grid-row: 1 / 3; }
.story-theme-grid .theme-icon { display: grid; width: 46px; aspect-ratio: 1; place-items: center; font-size: 25px; border: 2px solid #9d3328; border-radius: 8px 5px 9px 6px; background: linear-gradient(145deg, #fffdf4, #f5e8c8); box-shadow: inset 0 0 0 3px #fff8e8, inset 0 0 0 4px rgba(157, 51, 40, .58), 0 3px 8px rgba(86, 49, 26, .12); transform: rotate(-2deg); }
.story-theme-grid button:nth-child(even) .theme-icon { transform: rotate(2deg); }
.story-theme-grid b { font-size: 16px; }
.story-theme-grid small { color: var(--start-muted); font-size: 12px; line-height: 1.3; }

.start-choice,
.origin-choice { display: grid; text-align: left; color: var(--start-ink); border: 1px solid var(--start-line); background: #fbf8f1; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.start-choice { min-height: 178px; align-content: start; gap: 9px; padding: 22px; border-radius: 20px; }
.origin-choice { min-height: 106px; align-content: center; gap: 6px; padding: 18px; border-radius: 16px; }
.start-choice:hover,
.origin-choice:hover { border-color: rgba(22, 132, 91, 0.58); box-shadow: 0 13px 28px rgba(24, 74, 55, 0.09); transform: translateY(-2px); }
.start-choice.is-selected,
.origin-choice.is-selected { border-color: var(--start-leaf); background: #e9f4ed; box-shadow: inset 0 0 0 1px var(--start-leaf), 0 10px 24px rgba(22, 132, 91, 0.1); }
.start-choice:focus-visible,
.origin-choice:focus-visible,
.setup-fields input:focus,
.setup-fields select:focus,
.setup-fields textarea:focus { outline: 3px solid rgba(244, 203, 112, 0.78); outline-offset: 2px; }
.choice-kicker { width: fit-content; padding: 6px 9px; color: var(--start-leaf-deep); border: 1px solid rgba(15, 98, 68, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.55); font-family: var(--start-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.start-choice strong { font-family: var(--start-serif); font-size: 29px; line-height: 1.05; }
.origin-choice strong { font-family: var(--start-sans); font-size: 18px; }
.start-choice small,
.origin-choice small,
.setup-fields label > small { color: var(--start-muted); font-family: var(--start-sans); font-size: 15px; line-height: 1.45; }

.setup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.setup-fields label { display: grid; gap: 8px; color: var(--start-ink); font-family: var(--start-sans); font-size: 16px; font-weight: 700; }
.setup-fields label.wide { grid-column: 1 / -1; }
.field-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.field-title > span { min-width: 0; }
.yu-listen-intro { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(22, 132, 91, 0.25); border-radius: 18px; background: linear-gradient(135deg, #eef7ef, #fffaf0); font-family: var(--start-sans); }
.yu-listen-mark { display: grid; width: 45px; height: 45px; place-items: center; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: 0 6px 16px rgba(15, 98, 68, 0.11); }
.yu-listen-mark img { width: 100%; height: 100%; object-fit: contain; }
.yu-listen-intro div { display: grid; gap: 3px; }
.yu-listen-intro strong { font-size: 17px; }
.yu-listen-intro small { color: var(--start-muted); font-size: 14px; line-height: 1.35; }
.yu-listen-intro button,
.yu-read-button { flex: 0 0 auto; min-height: 34px; padding: 0 11px; color: var(--start-leaf-deep); border: 1px solid rgba(22, 132, 91, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.88); cursor: pointer; font-family: var(--start-sans); font-size: 13px; font-weight: 800; }
.yu-listen-intro button:hover,
.yu-read-button:hover { border-color: var(--start-leaf); background: #e0f1e5; }
.yu-listen-intro button.is-speaking,
.yu-read-button.is-speaking { color: #fff; border-color: var(--start-leaf-deep); background: var(--start-leaf-deep); }
.yu-listen-intro button:focus-visible,
.yu-read-button:focus-visible { outline: 3px solid rgba(244, 203, 112, 0.78); outline-offset: 2px; }
.theme-mentor { display: grid; grid-column: 1 / -1; grid-template-columns: 112px 1fr auto; align-items: center; gap: 16px; overflow: hidden; padding: 14px 18px 14px 10px; border: 1px solid rgba(157, 51, 40, .28); border-radius: 20px; background: linear-gradient(135deg, #fff8e8, #e9f3e9); font-family: var(--start-sans); }
.theme-mentor[hidden] { display: none; }
.theme-mentor > img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(32, 72, 54, .18)); }
.theme-mentor > div { display: grid; gap: 4px; }
.theme-mentor span { color: #9d3328; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.theme-mentor strong { color: var(--start-ink); font-family: var(--start-serif); font-size: 24px; line-height: 1.12; }
.theme-mentor p { margin: 0; color: var(--start-muted); font-size: 14px; line-height: 1.45; }
.wuxia-style-choices { display: grid; grid-column: 1 / -1; gap: 12px; font-family: var(--start-sans); }
.wuxia-style-choices[hidden] { display: none; }
.wuxia-style-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wuxia-style-heading span { color: var(--start-ink); font-family: var(--start-serif); font-size: 24px; font-weight: 800; }
.wuxia-style-heading strong { color: var(--start-muted); font-size: 14px; }
.wuxia-style-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wuxia-style-grid button { position: relative; display: grid; overflow: hidden; padding: 0 0 12px; text-align: left; border: 2px solid transparent; border-radius: 16px; background: #fff; cursor: pointer; }
.wuxia-style-grid button:hover { border-color: rgba(22, 132, 91, .42); }
.wuxia-style-grid button.is-selected { border-color: var(--start-leaf); box-shadow: 0 8px 22px rgba(15, 98, 68, .16); }
.wuxia-style-grid button.is-selected::after { position: absolute; top: 8px; right: 8px; display: grid; width: 26px; height: 26px; place-items: center; color: #fff; border-radius: 7px; background: var(--start-leaf-deep); content: "✓"; font-weight: 900; }
.wuxia-style-preview { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 10px; background-image: url("assets/wuxia-cinematic-choices-v2.png"); background-repeat: no-repeat; background-size: 200% 200%; }
.preview-ink { background-position: 0 0; }
.preview-blue-green { background-position: 100% 0; }
.preview-gongbi { background-position: 0 100%; }
.preview-cinematic { background-position: 100% 100%; }
.wuxia-style-grid b, .wuxia-style-grid small { margin-inline: 12px; }
.wuxia-style-grid b { color: var(--start-ink); font-size: 16px; }
.wuxia-style-grid small { margin-top: 3px; color: var(--start-muted); font-size: 12px; line-height: 1.35; }
.wuxia-style-grid button:focus-visible { outline: 3px solid rgba(244, 203, 112, .78); outline-offset: 2px; }
.wuxia-photo-callout { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid rgba(180, 139, 56, .38); border-radius: 14px; background: #fff8e7; font-family: var(--start-sans); }
.wuxia-photo-callout > div { display: grid; gap: 3px; }
.wuxia-photo-callout strong { color: var(--start-ink); font-size: 15px; }
.wuxia-photo-callout small { color: var(--start-muted); font-size: 12px; line-height: 1.45; }
.wuxia-photo-callout button { flex: 0 0 auto; min-height: 40px; padding: 0 13px; color: #fff; border: 0; border-radius: 10px; background: var(--start-leaf-deep); cursor: pointer; font-weight: 800; }
.wuxia-story-hints { display: grid; grid-column: 1 / -1; gap: 10px; padding: 16px; border: 1px solid rgba(22, 132, 91, .24); border-radius: 18px; background: #f3f8f2; font-family: var(--start-sans); }
.wuxia-story-hints[hidden] { display: none; }
.wuxia-story-hints > div:first-child { display: grid; gap: 2px; }
.wuxia-story-hints > div:first-child span { color: var(--start-leaf-deep); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.wuxia-story-hints > div:first-child strong { color: var(--start-ink); font-size: 17px; }
.wuxia-hint-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wuxia-hint-grid button { display: grid; gap: 3px; padding: 12px; text-align: left; border: 1px solid var(--start-line); border-radius: 12px; background: #fff; cursor: pointer; }
.wuxia-hint-grid button:hover, .wuxia-hint-grid button[aria-pressed="true"] { border-color: var(--start-leaf); background: #e7f2e9; }
.wuxia-hint-grid b { color: var(--start-ink); font-size: 15px; }
.wuxia-hint-grid small { color: var(--start-muted); font-size: 12px; line-height: 1.35; }
.wuxia-hint-grid button:focus-visible { outline: 3px solid rgba(244, 203, 112, .78); outline-offset: 2px; }
.squad-create-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px; border: 1px solid rgba(22, 132, 91, 0.23); border-radius: 18px; background: #eef6ef; }
.squad-create-fields[hidden] { display: none; }
.squad-create-heading { display: grid; grid-column: 1 / -1; gap: 4px; padding-bottom: 4px; }
.squad-create-heading strong { color: var(--start-ink); font-family: var(--start-serif); font-size: 26px; }
.squad-create-heading small { color: var(--start-muted); font-family: var(--start-sans); font-size: 15px; line-height: 1.45; }
.collaboration-mode-picker { display: grid; gap: 10px; margin-top: 18px; }
.collaboration-mode-grid .origin-choice { min-height: 88px; }
.squad-create-fields label > small:first-child { display: inline; margin-left: 5px; font-weight: 400; }
.visual-style-field { display: grid; min-width: 0; align-content: start; gap: 8px; color: var(--start-ink); font-family: var(--start-sans); font-size: 16px; font-weight: 700; }
.visual-style-picker { overflow: hidden; border: 1px solid var(--start-line); border-radius: 14px; background: rgba(255, 255, 255, 0.88); }
.visual-style-picker summary { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 8px 8px; cursor: pointer; list-style: none; }
.visual-style-picker summary::-webkit-details-marker { display: none; }
.style-summary-preview { display: flex; min-width: 0; align-items: center; gap: 10px; }
.style-summary-preview img { width: 58px; height: 54px; flex: 0 0 auto; object-fit: cover; border-radius: 10px; }
.style-summary-preview span { display: grid; min-width: 0; gap: 3px; }
.style-summary-preview small { color: var(--start-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.style-summary-preview strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.style-summary-action { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; color: var(--start-leaf-deep); font-size: 13px; }
.style-summary-action b { font-size: 17px; transition: transform 160ms ease; }
.visual-style-picker[open] .style-summary-action b { transform: rotate(180deg); }
.visual-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 10px; border-top: 1px solid var(--start-line); background: #f8f7f1; }
.visual-style-card { position: relative; display: grid; min-width: 0; overflow: hidden; padding: 0; text-align: left; color: var(--start-ink); border: 2px solid transparent; border-radius: 12px; background: #fff; cursor: pointer; }
.visual-style-card img { width: 100%; height: 92px; object-fit: cover; }
.visual-style-card > span { display: grid; gap: 2px; padding: 9px; }
.visual-style-card strong { font-size: 14px; line-height: 1.15; }
.visual-style-card small { color: var(--start-muted); font-size: 12px; font-weight: 500; line-height: 1.25; }
.visual-style-card:hover { border-color: rgba(22, 132, 91, 0.42); }
.visual-style-card.is-selected { border-color: var(--start-leaf); box-shadow: 0 7px 18px rgba(15, 98, 68, 0.14); }
.visual-style-card.is-selected::after { position: absolute; top: 7px; right: 7px; display: grid; width: 23px; height: 23px; place-items: center; color: #fff; border-radius: 50%; background: var(--start-leaf-deep); content: "✓"; font-size: 13px; }
.visual-style-card:focus-visible,
.visual-style-picker summary:focus-visible { outline: 3px solid rgba(244, 203, 112, 0.78); outline-offset: -2px; }
.style-reference-upload { display: grid; gap: 8px; padding: 11px; border: 1px dashed rgba(22, 132, 91, .36); border-radius: 13px; background: rgba(255, 255, 255, .64); }
.style-reference-copy { display: grid; gap: 3px; }
.style-reference-copy strong { font-size: 14px; }
.style-reference-copy small { color: var(--start-muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
.style-reference-button { display: block !important; position: relative; width: fit-content; overflow: hidden; }
.style-reference-button > span { display: inline-flex; min-height: 38px; align-items: center; padding: 0 11px; color: var(--start-leaf-deep); border: 1px solid rgba(22, 132, 91, .34); border-radius: 9px; background: #eef7ef; cursor: pointer; font-size: 13px; }
.style-reference-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.style-reference-preview { position: relative; display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 9px; padding: 8px; border-radius: 11px; background: #edf5ed; }
.style-reference-preview[hidden] { display: none; }
.style-reference-preview > img { width: 66px; height: 66px; object-fit: cover; border-radius: 9px; }
.style-reference-preview > div { display: grid; min-width: 0; gap: 3px; }
.style-reference-preview strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.style-reference-preview small { color: var(--start-muted); font-size: 11px; font-weight: 500; }
.style-reference-preview label { display: flex; grid-template-columns: none; align-items: flex-start; gap: 5px; color: var(--start-muted); font-size: 11px; font-weight: 600; line-height: 1.3; }
.style-reference-preview input[type="checkbox"] { width: 14px; min-height: 14px; flex: 0 0 14px; padding: 0; accent-color: var(--start-leaf-deep); }
.style-reference-preview > button { width: 28px; height: 28px; color: var(--start-muted); border: 0; border-radius: 50%; background: #fff; cursor: pointer; font-size: 18px; }
.character-builder { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(210px, .84fr); gap: 14px; padding: 14px; border: 1px solid rgba(22, 132, 91, 0.25); border-radius: 16px; background: rgba(255, 255, 255, 0.65); }
.character-input-panel { display: grid; min-width: 0; align-content: start; gap: 9px; }
.character-input-panel > small { color: var(--start-muted); font-family: var(--start-sans); font-size: 13px; font-weight: 500; line-height: 1.4; }
.character-rules-box { position: relative; }
.character-rules-box textarea { min-height: 134px; padding-right: 128px; }
.character-speak { position: absolute; top: 10px; right: 10px; min-height: 38px; padding: 0 10px; color: var(--start-leaf-deep); border: 1px solid rgba(22, 132, 91, .32); border-radius: 999px; background: #e9f4ed; cursor: pointer; font-family: var(--start-sans); font-size: 13px; font-weight: 800; }
.character-speak.is-listening { color: #fff; background: var(--start-leaf-deep); animation: start-listening 700ms ease-in-out infinite alternate; }
.character-upload { display: block !important; position: relative; width: fit-content; overflow: hidden; }
.character-upload > span { display: inline-flex; min-height: 41px; align-items: center; padding: 0 13px; color: var(--start-leaf-deep); border: 1px dashed rgba(22, 132, 91, .48); border-radius: 10px; background: #f5fbf5; cursor: pointer; font-size: 14px; }
.character-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.character-photo-consent { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(180, 139, 56, .36); border-radius: 12px; background: #fff8e7; font-family: var(--start-sans); }
.character-photo-consent > strong { font-size: 15px; }
.character-photo-consent > p { margin: 0; color: var(--start-muted); font-size: 13px; line-height: 1.4; }
.character-photo-consent > label { display: flex; grid-template-columns: none; align-items: flex-start; gap: 7px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.character-photo-consent input[type="checkbox"] { width: 16px; min-height: 16px; flex: 0 0 16px; padding: 0; accent-color: var(--start-leaf-deep); }
.character-photo-consent > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.character-photo-consent > div label { display: grid; gap: 5px; font-size: 12px; }
.character-photo-consent > div input { min-height: 42px; font-size: 14px; }
.character-preview-panel { display: grid; min-width: 0; align-content: start; gap: 9px; padding: 11px; border-radius: 13px; background: #133f35; color: #fff; font-family: var(--start-sans); }
.character-preview-kicker { color: #bde1c8; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.character-preview-frame { position: relative; min-height: 168px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 11px; background: radial-gradient(circle at 50% 25%, #e9cf87, #7eb79d 45%, #0d2f28); }
.character-preview-frame > img { width: 100%; height: 100%; min-height: 168px; max-height: 230px; object-fit: cover; }
.character-preview-frame > div { position: absolute; inset: 0; display: grid; place-content: center; gap: 5px; padding: 14px; text-align: center; }
.character-preview-frame > div span { font-size: 28px; }
.character-preview-frame > div strong { font-family: var(--start-serif); font-size: 20px; }
.character-preview-frame > div small { color: rgba(255, 255, 255, .72); font-size: 12px; }
.character-preview-panel > p { margin: 0; color: rgba(255, 255, 255, .74); font-size: 13px; line-height: 1.4; }
.character-generate { display: grid; min-height: 52px; place-content: center; gap: 2px; padding: 8px 10px; color: #103a30; border: 0; border-radius: 11px; background: var(--start-gold); cursor: pointer; font-family: var(--start-sans); font-size: 14px; font-weight: 900; }
.character-generate span { font-size: 11px; font-weight: 700; opacity: .72; }
.character-preview-panel > small { color: rgba(255, 255, 255, .58); font-size: 11px; font-weight: 500; line-height: 1.35; }
.setup-fields input,
.setup-fields select,
.setup-fields textarea { width: 100%; color: var(--start-ink); border: 1px solid var(--start-line); border-radius: 14px; background: rgba(255, 255, 255, 0.86); }
.setup-fields input,
.setup-fields select { min-height: 56px; padding: 0 15px; font-size: 18px; }
.setup-fields input { font-size: 18px; }
.setup-fields textarea { min-height: 104px; padding: 14px 15px; resize: vertical; font-size: 18px; line-height: 1.5; }
.setup-fields input::placeholder,
.setup-fields textarea::placeholder { color: #989b96; }
.title-voice-box { position: relative; }
.title-voice-box input { padding-right: 150px; }
.title-speak { position: absolute; top: 7px; right: 8px; min-height: 42px; padding: 0 13px; color: var(--start-leaf-deep); border: 1px solid rgba(22, 132, 91, .34); border-radius: 999px; background: #e9f4ed; cursor: pointer; font-family: var(--start-sans); font-size: 14px; font-weight: 800; }
.title-speak:hover { border-color: var(--start-leaf); background: #dceee2; }
.title-speak.is-listening { color: #fff; border-color: var(--start-leaf); background: var(--start-leaf); animation: start-listening 700ms ease-in-out infinite alternate; }
.story-spark-box { position: relative; }
.story-spark-box textarea { padding-right: 132px; }
.spark-speak { position: absolute; top: 12px; right: 12px; min-height: 42px; padding: 0 14px; color: var(--start-leaf-deep); border: 1px solid rgba(22, 132, 91, 0.34); border-radius: 999px; background: #e9f4ed; cursor: pointer; font-family: var(--start-sans); font-size: 15px; font-weight: 700; }
.spark-speak:hover { border-color: var(--start-leaf); background: #dceee2; }
.spark-speak.is-listening { color: #fff; border-color: var(--start-leaf); background: var(--start-leaf); animation: start-listening 700ms ease-in-out infinite alternate; }
@keyframes start-listening { from { box-shadow: 0 0 0 0 rgba(22,132,91,.15); } to { box-shadow: 0 0 0 8px rgba(22,132,91,.1); } }
.setup-fields .work-file-picker { position: relative; display: inline-flex; align-items: center; width: fit-content; min-height: 48px; padding: 10px 16px; color: #fff; border-radius: 10px; background: var(--start-leaf-deep); font-weight: 700; cursor: pointer; }
.setup-fields .work-file-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.supervision-panel { display: grid; grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: 10px 13px; padding: 17px; border: 1px solid rgba(180, 139, 56, 0.34); border-radius: 16px; background: #fff8e7; }
.supervision-panel[hidden] { display: none; }
.supervision-icon { display: grid; width: 34px; height: 34px; grid-row: 1; place-items: center; color: var(--start-ink); border-radius: 50%; background: var(--start-gold); font-family: var(--start-sans); font-weight: 900; }
.supervision-panel strong { color: var(--start-ink); font-family: var(--start-sans); }
.supervision-panel p { margin: 4px 0 0; color: var(--start-muted); font-family: var(--start-sans); font-size: 16px; line-height: 1.5; }
.supervision-panel > label { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 9px; padding-top: 8px; color: var(--start-ink); font-size: 16px; }
.supervision-panel input { width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--start-leaf); }

.form-error { min-height: 22px; margin: 14px 0 0; color: #a64031; font-family: var(--start-sans); font-size: 16px; }
.start-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--start-line); }
.step-back { min-height: 50px; padding: 0 9px; color: var(--start-muted); border: 0; background: transparent; cursor: pointer; font-family: var(--start-sans); font-weight: 700; }
.step-back:hover,
.step-back:focus-visible { color: var(--start-leaf-deep); }
.start-actions .button-primary { color: #fff; border: 0; border-radius: 14px; background: var(--start-leaf-deep); box-shadow: 0 14px 28px rgba(15, 98, 68, 0.18); font-family: var(--start-sans); font-weight: 700; }
.start-actions .button-primary:hover { background: var(--start-leaf); box-shadow: 0 17px 34px rgba(15, 98, 68, 0.24); }
.start-actions p { margin: 0 0 0 auto; color: var(--start-muted); font-family: var(--start-sans); font-size: 14px; }
.start-actions p span { color: var(--start-leaf); }

.start-visual { position: sticky; top: 28px; align-self: start; min-height: calc(100vh - 156px); overflow: hidden; background: linear-gradient(160deg, #e3efe8, #f7f0df); }
.outcome-showcase { display: grid; align-content: center; gap: 22px; padding: clamp(24px, 3vw, 38px); }
.outcome-showcase header { display: grid; gap: 8px; }
.outcome-showcase header > span { color: var(--start-leaf); font-family: var(--start-sans); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.outcome-showcase h2 { margin: 0; color: var(--start-ink); font-family: var(--start-serif); font-size: clamp(30px, 3vw, 45px); line-height: 1.05; }
.outcome-showcase header p { margin: 0; color: var(--start-muted); font-family: var(--start-sans); line-height: 1.55; }
.outcome-cover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.outcome-cover { min-width: 0; margin: 0; color: inherit; text-decoration: none; }
.outcome-cover:focus-visible { outline: 4px solid rgba(15, 98, 68, .35); outline-offset: 5px; border-radius: 18px; }
.outcome-cover-art { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 18px; background: #16392f; box-shadow: 0 20px 36px rgba(29, 48, 39, .2); transition: transform .18s ease, box-shadow .18s ease; }
.outcome-cover:hover .outcome-cover-art { transform: translateY(-3px); box-shadow: 0 24px 42px rgba(29, 48, 39, .27); }
.outcome-cover-art::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 19, 22, .66), transparent 34%, rgba(4, 19, 22, .78)); content: ""; }
.outcome-cover-art img { width: 100%; height: 100%; object-fit: cover; }
.outcome-book-cover img { object-position: center; }
.outcome-film-poster img { object-position: 52% center; }
.outcome-cover-copy { position: absolute; inset: 16px 14px 14px; z-index: 1; display: flex; flex-direction: column; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.outcome-cover-copy small { font-family: var(--start-sans); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.outcome-cover-copy strong { margin-top: auto; font-family: var(--start-serif); font-size: clamp(26px, 3vw, 40px); line-height: .95; }
.outcome-cover-copy span { margin-top: 8px; font-family: var(--start-sans); font-size: 10px; font-weight: 700; }
.outcome-cover-caption { display: grid; gap: 2px; padding: 11px 4px 0; color: var(--start-ink); font-family: var(--start-sans); }
.outcome-cover-caption b { font-size: 15px; }
.outcome-cover-caption span { color: var(--start-muted); font-size: 12px; }

/* Travel challenge: ask only for what is needed to begin; the rest stays editable inside the squad. */
.travel-quick-mode .start-main { grid-template-columns: minmax(0, 780px); justify-content: center; }
.travel-quick-mode .start-panel { padding-block: clamp(28px, 4vw, 46px); }
.travel-quick-mode .start-progress,
.travel-quick-mode .start-panel .eyebrow,
.travel-quick-mode .start-visual,
.travel-quick-mode .yu-listen-intro,
.travel-quick-mode .squad-create-fields,
.travel-quick-mode .theme-mentor,
.travel-quick-mode .wuxia-story-hints { display: none !important; }
.travel-quick-mode.wuxia-quick-mode .wuxia-style-choices { display: grid !important; }
.wuxia-quick-mode [data-work-file-field] { display: none !important; }
.travel-quick-mode .start-panel h1 { max-width: 680px; font-size: clamp(42px, 5vw, 62px); line-height: 1.04; }
.travel-quick-mode .start-lede { margin-bottom: 24px; }
.travel-quick-mode .setup-fields { margin-top: 0; }
.travel-output-choice { display: grid; grid-column: 1 / -1; gap: 12px; order: -1; }
.travel-output-choice > strong { font-family: var(--start-sans); font-size: 19px; }
.travel-output-choice > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.travel-output-choice button { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; min-height: 82px; padding: 14px 16px; color: var(--start-ink); text-align: left; border: 1px solid var(--start-line); border-radius: 16px; background: #fff; cursor: pointer; }
.travel-output-choice button span { grid-row: 1 / 3; font-size: 30px; }
.travel-output-choice button b { font-size: 18px; }
.travel-output-choice button small { color: var(--start-muted); font-size: 14px; }
.travel-output-choice button.is-selected { border: 2px solid var(--start-leaf); background: #eaf5ec; box-shadow: 0 8px 18px rgba(15, 98, 68, .12); }
.travel-quick-mode .age-gate-field { padding: 15px; border: 1px solid var(--start-line); border-radius: 16px; background: #fbf8f1; }
.travel-quick-mode .setup-fields > label:has([data-display-name]),
.travel-quick-mode.wuxia-quick-mode [data-character-builder],
.travel-quick-mode.wuxia-quick-mode .wuxia-photo-callout { display: none !important; }
.travel-quick-mode [data-work-file-field],
.travel-quick-mode [data-idea-field] { padding: 18px; border: 1px solid rgba(22, 132, 91, .24); border-radius: 18px; background: #eef6ef; }
.travel-quick-mode [data-work-file-field] { order: 1; }
.travel-quick-mode [data-idea-field] { order: 2; }
.travel-quick-mode .start-actions { margin-top: 18px; }
.travel-quick-mode .step-back { display: none; }
[hidden] { display: none !important; }

@media (max-width: 1020px) {
  .start-main { grid-template-columns: 1fr; }
  .start-visual { position: relative; top: auto; min-height: 520px; }
}

@media (max-width: 700px) {
  .travel-output-choice > div { grid-template-columns: 1fr; }
  .wuxia-style-heading { display: grid; gap: 2px; }
  .wuxia-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wuxia-photo-callout { display: grid; }
  .wuxia-photo-callout button { width: 100%; }
  .wuxia-hint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-mentor { grid-template-columns: 88px 1fr; padding: 12px; }
  .theme-mentor > img { width: 88px; height: 88px; }
  .theme-mentor > button { grid-column: 1 / -1; width: 100%; }
  .start-header .nav-shell { width: min(100% - 32px, 1240px); min-height: 80px; gap: 12px; }
  html[lang="en"] .start-header .brand,
  .start-header .brand { gap: 9px; font-size: 23px; }
  html[lang="en"] .start-header .brand-mark,
  .start-header .brand-mark { width: 43px; height: 43px; border-radius: 12px; }
  .start-header-actions { gap: 7px; }
  html[lang] .start-header .language-switcher button { min-width: 40px; padding-inline: 7px; }
  .back-link { width: 44px; padding: 0; justify-content: center; overflow: hidden; font-size: 0; }
  .back-link::before { content: "←"; font-size: 22px; }
  .start-main { width: min(100% - 32px, 1240px); padding-block: 22px 34px; }
  .start-panel,
  .start-visual { border-radius: 23px; }
  .start-panel { padding: 25px 19px; }
  .start-progress { margin-bottom: 28px; }
  .start-progress > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .start-panel h1 { font-size: clamp(45px, 13vw, 60px); }
  .start-lede { font-size: 20px; }
  .carried-spark { grid-template-columns: 68px 1fr; }
  .carried-spark img { width: 68px; height: 62px; }
  .carried-spark > span { display: none; }
  .story-spark-box textarea { min-height: 150px; padding-right: 15px; padding-top: 64px; }
  .spark-speak { left: 12px; right: auto; }
  .title-voice-box input { min-height: 112px; padding: 58px 14px 14px; }
  .title-speak { top: 9px; left: 10px; right: auto; }
  .yu-listen-intro { grid-template-columns: auto 1fr; }
  .yu-listen-intro > button { grid-column: 1 / -1; width: 100%; min-height: 42px; }
  .field-title { align-items: flex-start; }
  .yu-read-button { min-height: 36px; }
  .visual-style-grid { grid-template-columns: 1fr; }
  .visual-style-card { grid-template-columns: 112px 1fr; align-items: center; }
  .visual-style-card img { height: 86px; }
  .style-reference-preview { grid-template-columns: 58px 1fr auto; }
  .style-reference-preview > img { width: 58px; height: 58px; }
  .character-builder { grid-template-columns: 1fr; }
  .character-rules-box textarea { padding-right: 15px; padding-top: 58px; }
  .character-speak { left: 10px; right: auto; }
  .character-photo-consent > div { grid-template-columns: 1fr; }
  .start-mode-grid,
  .story-origin-grid,
  .story-origin-grid.two-up,
  .setup-fields,
  .squad-create-fields { grid-template-columns: 1fr; }
  .story-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-fields label.wide { grid-column: auto; }
  .squad-create-heading { grid-column: auto; }
  .squad-create-fields { grid-column: auto; }
  .start-choice { min-height: 142px; }
  .start-actions { align-items: stretch; flex-direction: column; }
  .start-actions p { margin-left: 0; text-align: center; }
  .step-back { order: 2; }
  .start-actions .button { width: 100%; }
  .start-visual { min-height: 420px; }
  .outcome-showcase { padding: 22px; }
  .choice-fieldset legend.choice-legend { align-items: flex-start; }
}