:root {
  --cinnabar: #b34835;
  --ink-blue: #1f4c54;
  --jade: #5f7f70;
}

.chinese-studio {
  background:
    radial-gradient(circle at 88% 4%, rgba(176, 72, 52, .09), transparent 25rem),
    radial-gradient(circle at 8% 25%, rgba(54, 93, 91, .1), transparent 30rem),
    linear-gradient(145deg, #f7f1e5, #ebe2d3);
  font-family: "Songti SC", STSong, SimSun, serif;
}

.cn-workshop-banner{display:flex;position:relative;z-index:20;align-items:center;justify-content:center;gap:18px;padding:11px 24px;color:#f9fff9;background:#165c43;font:15px/1.4 Arial,"Microsoft YaHei",sans-serif}.cn-workshop-banner strong{white-space:nowrap}.cn-workshop-banner span{opacity:.88}.cn-workshop-banner a{color:#fff;text-underline-offset:3px}@media(max-width:760px){.cn-workshop-banner{align-items:flex-start;flex-direction:column;gap:4px;padding:12px 18px}.cn-workshop-banner strong{white-space:normal}}

.chinese-studio .flow-header { width: min(1280px, calc(100% - 48px)); }
.chinese-header .flow-brand img { object-fit: contain; border-radius: 4px; }
.chinese-header .studio-switch { padding: 10px 15px; border: 1px solid rgba(31,76,84,.24); border-radius: 999px; color: var(--ink-blue); }
.chinese-studio .flow-main { width: min(1280px, calc(100% - 48px)); padding-top: 34px; }

.chinese-hero {
  display: grid;
  grid-template-columns: minmax(360px, .78fr) minmax(520px, 1.22fr);
  min-height: 680px;
  overflow: hidden;
  border: 1px solid rgba(34, 48, 43, .14);
  border-radius: 34px;
  background: #f7f0e2;
  box-shadow: 0 35px 90px rgba(50, 42, 31, .16);
}

.chinese-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5.5vw, 76px); }
.chinese-hero-copy::after { position: absolute; right: -80px; bottom: 8%; width: 180px; height: 180px; content: ""; opacity: .07; border: 28px solid var(--cinnabar); border-radius: 18px; transform: rotate(-8deg); }
.chinese-eyebrow { margin: 0; color: var(--cinnabar); font: 700 14px/1.2 Arial, "PingFang SC", sans-serif; letter-spacing: .28em; }
.chinese-hero h1 { margin: 24px 0 25px; font-size: clamp(64px, 7vw, 104px); font-weight: 700; line-height: .94; letter-spacing: -.065em; }
.chinese-hero h1 span { display: inline-block; white-space: nowrap; }
.chinese-hero h1 em { color: var(--ink-blue); font-style: normal; }
.chinese-hero-copy > p:not(.chinese-eyebrow) { max-width: 570px; margin: 0; color: #5e625d; font: 21px/1.75 Arial, "PingFang SC", sans-serif; }
.chinese-hero-art { min-height: 680px; background: linear-gradient(90deg, #f7f0e2 0%, transparent 19%), url("assets/hero-zh-wuxia-ink-v1.png") center / cover no-repeat; }
.chinese-yu-trigger { align-self: flex-start; min-height: 76px; margin-top: 27px; padding: 8px 18px 8px 8px; border-radius: 24px; }
.chinese-yu-trigger img { width: 60px; height: 60px; padding: 0; object-fit: contain; object-position: center top; border-radius: 18px; background: radial-gradient(circle at 50% 74%, #e8d9b7, #eef5ed 70%); }
.chinese-yu-trigger strong { font-size: 16px; }
.chinese-yu-trigger small { max-width: 270px; font-size: 12px; }
.chinese-promise { display: flex; flex-wrap: wrap; gap: 9px 13px; margin-top: 27px; color: #58605d; font: 700 12px/1.45 Arial, "PingFang SC", sans-serif; letter-spacing: .08em; }
.chinese-promise i { color: var(--cinnabar); font-style: normal; }
.chinese-promise strong { color: var(--ink-blue); }

.chinese-creation-paths { max-width: 1080px; margin: 58px auto 0; }
.chinese-creation-paths-heading { display: grid; gap: 8px; margin-bottom: 20px; }
.chinese-creation-paths-heading p { margin: 0; color: var(--cinnabar); font: 700 13px/1.2 Arial, "PingFang SC", sans-serif; letter-spacing: .2em; }
.chinese-creation-paths-heading h2 { margin: 0; color: #172c29; font-size: clamp(34px, 4vw, 54px); line-height: 1.12; }
.chinese-creation-paths-heading span { color: #67706a; font: 16px/1.5 Arial, "PingFang SC", sans-serif; }
.chinese-creation-path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.chinese-creation-path { display: grid; min-height: 250px; padding: 30px; border: 1px solid rgba(31,76,84,.2); border-radius: 26px; color: #173d35; box-shadow: 0 18px 42px rgba(53,45,34,.1); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.chinese-creation-path:hover { box-shadow: 0 24px 54px rgba(53,45,34,.15); transform: translateY(-4px); }
.chinese-creation-path:focus-visible { outline: 4px solid #e7bb58; outline-offset: 4px; }
.chinese-creation-path small { color: var(--cinnabar); font: 700 12px/1.2 Arial, "PingFang SC", sans-serif; letter-spacing: .16em; }
.chinese-creation-path strong { align-self: end; margin-top: 28px; font-size: clamp(34px, 4vw, 50px); line-height: 1; }
.chinese-creation-path p { margin: 13px 0 24px; color: #58645f; font: 16px/1.6 Arial, "PingFang SC", sans-serif; }
.chinese-creation-path > span { align-self: end; font: 700 14px/1.4 Arial, "PingFang SC", sans-serif; }
.path-solo { background: linear-gradient(145deg, #fffdf7, #e6efe8); }
.path-squad { background: linear-gradient(145deg, #f5ead9, #e3d1b5); }
.chinese-spark-form { max-width: 1080px; margin: 72px auto 0; scroll-margin-top: 24px; background: rgba(255,253,247,.97); }
.chinese-studio .spark-heading span,
.chinese-studio .words-heading span,
.chinese-studio .flow-kicker,
.chinese-studio .coach-progress > span,
.chinese-studio .coach-context > span { color: var(--cinnabar); }
.chinese-studio .spark-heading > b { color: var(--ink-blue); background: #e7efec; }
.chinese-start-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.chinese-start-options .chinese-upload { grid-template-rows: auto 1fr auto; min-height: 320px; margin: 0; padding: 26px; place-items: start; border-style: solid; text-align: left; background: linear-gradient(rgba(247,242,231,.76), rgba(247,242,231,.87)), url("assets/hero-zh-ink-cocreation-hd-v2.png") center / cover; }
.chinese-start-options .chinese-upload .spark-upload-icon { width: 64px; height: 64px; margin: 0; background: var(--cinnabar); font-size: 32px; }
.chinese-start-options .chinese-upload strong { align-self: end; margin: 0; font-size: clamp(31px, 3.6vw, 48px); line-height: 1.04; }
.chinese-start-options .chinese-upload small { margin: 11px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.chinese-idea-entry,
.chinese-existing-writing-entry { display: grid; grid-template-rows: auto 1fr auto; min-height: 320px; padding: 26px; border: 1px solid rgba(31,76,84,.2); border-radius: 22px; color: #163e34; box-shadow: inset 0 0 0 1px rgba(255,255,255,.62); text-align: left; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.chinese-idea-entry { background: radial-gradient(circle at 86% 14%, rgba(255,255,255,.76), transparent 35%), linear-gradient(145deg, #edf5eb, #cfe3d7); }
.chinese-existing-writing-entry { background: radial-gradient(circle at 84% 14%, rgba(255,255,255,.82), transparent 34%), linear-gradient(145deg, #f4edf8, #e4d7ed); }
.chinese-existing-writing-entry { grid-column: 1 / -1; grid-template-columns: auto minmax(0,1fr); grid-template-rows: 1fr auto; column-gap: 18px; min-height: 166px; }
.chinese-existing-writing-entry .chinese-existing-writing-icon { grid-row: 1 / 3; }
.chinese-idea-entry:hover,
.chinese-existing-writing-entry:hover { border-color: rgba(31,76,84,.52); box-shadow: 0 14px 32px rgba(31,76,84,.12); transform: translateY(-3px); }
.chinese-idea-entry:focus-visible,
.chinese-existing-writing-entry:focus-visible { outline: 4px solid #e7bb58; outline-offset: 4px; }
.chinese-idea-icon,
.chinese-existing-writing-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; color: var(--ink-blue); background: #f2ca6c; box-shadow: 0 9px 22px rgba(126,96,27,.14); }
.chinese-idea-icon { color: #fff; background: var(--ink-blue); }
.chinese-existing-writing-icon { color: #fff; background: #75538b; }
.chinese-idea-icon svg,
.chinese-existing-writing-icon svg { width: 37px; height: 31px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.chinese-idea-entry strong,
.chinese-existing-writing-entry strong { align-self: end; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.04; }
.chinese-idea-entry small,
.chinese-existing-writing-entry small { margin-top: 11px; color: #5d6963; font: 14px/1.45 Arial, "PingFang SC", sans-serif; }
.chinese-existing-writing-panel { margin-top: 18px; }
.chinese-studio .primary-action { background: var(--ink-blue); box-shadow: 0 15px 30px rgba(31,76,84,.22); }

.chinese-format-picker { margin: 38px 0 0; padding: 0; border: 0; }
.chinese-format-picker legend { width: 100%; margin-bottom: 16px; }
.chinese-format-picker legend span,
.chinese-format-picker legend small { display: block; }
.chinese-format-picker legend span { font-size: 29px; font-weight: 700; }
.chinese-format-picker legend small { margin-top: 6px; color: var(--muted); font: 14px/1.4 Arial, "PingFang SC", sans-serif; }
.chinese-format-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.format-card { position: relative; display: flex; align-items: end; min-height: 260px; overflow: hidden; border: 2px solid transparent; border-radius: 18px; background-position: center; background-size: cover; cursor: pointer; isolation: isolate; }
.format-card::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(transparent 35%, rgba(15,26,25,.9)); }
.format-card input { position: absolute; top: 14px; right: 14px; width: 23px; height: 23px; accent-color: var(--cinnabar); }
.format-card > span { display: grid; gap: 4px; padding: 20px; color: #fff; }
.format-card b { font-size: 25px; }
.format-card small { color: rgba(255,255,255,.75); font: 12px/1.4 Arial, "PingFang SC", sans-serif; }
.format-card:has(input:checked) { border-color: var(--cinnabar); box-shadow: 0 12px 30px rgba(128,54,42,.2); }
.format-ink { background-image: url("assets/outcome-zh-ink-book-v1.png"); }
.format-comic { background-image: url("assets/outcome-zh-lianhuanhua-v1.png"); }
.format-picturebook { background-image: url("assets/outcome-zh-cocreated-film-v1.png"); }
.format-film { background-image: url("assets/outcome-zh-cinematic-trailer-v1.png"); }

.chinese-creator-fields { grid-template-columns: 1.2fr .8fr; }
.chinese-profile { margin: 22px 0; overflow: hidden; border: 1px solid rgba(31,76,84,.22); border-radius: 20px; background: #f4f7f3; }
.chinese-profile summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 80px; padding: 18px 20px; list-style: none; cursor: pointer; }
.chinese-profile summary::-webkit-details-marker { display: none; }
.chinese-profile summary > span { display: grid; gap: 5px; }
.chinese-profile summary strong { font: 700 19px/1.2 Arial, "PingFang SC", sans-serif; }
.chinese-profile summary small { color: var(--muted); font: 14px/1.4 Arial, "PingFang SC", sans-serif; }
.chinese-profile summary > b { color: var(--ink-blue); font: 700 12px Arial, "PingFang SC", sans-serif; }
.chinese-profile-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 20px 22px; }
.chinese-profile-body label { display: grid; gap: 7px; color: var(--muted); font: 700 12px Arial, "PingFang SC", sans-serif; }
.chinese-profile-body select { min-height: 50px; padding: 0 12px; border: 1px solid rgba(16,24,23,.18); border-radius: 11px; background: #fff; font: 15px Arial, "PingFang SC", sans-serif; }

.chinese-studio .coach-context { background: linear-gradient(145deg, #152d31, #1f4c54); }
.chinese-studio .coach-question-card { background: #fbf6eb; }
.chinese-studio .yu-mark { background: var(--cinnabar); }
.chinese-studio .yu-mark.chinese-yu-sage { width: 126px; height: 126px; border-color: rgba(31,76,84,.2); border-radius: 34px; background: radial-gradient(circle at 50% 76%, rgba(231,204,143,.5), transparent 46%), linear-gradient(145deg, #fffaf0, #dcebe2); }
.chinese-studio .coach-question-card .yu-mark.chinese-yu-sage img { width: 122px; height: 122px; object-position: center top; transform: translateY(5px); }
.chinese-studio .story-page-art { background: linear-gradient(145deg, #21474b, #102629); }
.chinese-studio .story-page-art span { color: #e7d4ab; }

.comic-template-stage { max-width: 1120px; margin-inline: auto; }
.comic-template-intro { max-width: 820px; margin-bottom: 36px; }
.comic-template-intro h1 { margin: 14px 0 16px; font-size: clamp(48px, 6vw, 78px); line-height: 1; letter-spacing: -.055em; }
.comic-template-intro > p:last-child { color: var(--muted); font: 18px/1.65 Arial, "PingFang SC", sans-serif; }
.comic-template-picker { margin: 0; padding: 0; border: 0; }
.comic-template-picker legend { margin-bottom: 16px; color: var(--muted); font: 700 13px Arial, "PingFang SC", sans-serif; letter-spacing: .08em; }
.comic-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.comic-template-card { position: relative; display: grid; grid-template-rows: 220px 1fr; overflow: hidden; border: 1px solid rgba(31,76,84,.2); border-radius: 24px; background: #fbf8f0; box-shadow: 0 18px 45px rgba(54,45,34,.09); cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.comic-template-card:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(54,45,34,.14); }
.comic-template-card:has(input:checked) { border: 3px solid var(--ink-blue); box-shadow: 0 24px 55px rgba(31,76,84,.18); }
.comic-template-card.is-recommended::after { position: absolute; top: 15px; right: 15px; content: "推荐"; padding: 7px 10px; border-radius: 999px; color: #fff; background: var(--ink-blue); font: 700 11px Arial, "PingFang SC", sans-serif; letter-spacing: .1em; }
.comic-template-card > input { position: absolute; top: 18px; left: 18px; z-index: 3; width: 23px; height: 23px; accent-color: var(--ink-blue); }
.comic-template-preview { display: grid; gap: 8px; padding: 40px 24px 24px; background: linear-gradient(145deg, #efe6d1, #dce9df); }
.comic-template-preview i { min-height: 52px; border: 1px solid rgba(31,76,84,.25); border-radius: 5px; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(241,233,213,.8)); box-shadow: inset 0 -13px rgba(31,76,84,.08); }
.preview-classic { grid-template-columns: repeat(3, 1fr); }
.preview-classic i { min-height: 142px; }
.preview-four { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.preview-cinematic { grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(3, 1fr); }
.comic-template-copy { display: grid; align-content: start; gap: 7px; padding: 23px; }
.comic-template-copy small { min-height: 16px; color: var(--ink-blue); font: 700 11px Arial, "PingFang SC", sans-serif; letter-spacing: .12em; }
.comic-template-copy b { font-size: 28px; }
.comic-template-copy em { color: var(--ink-blue); font: 700 14px Arial, "PingFang SC", sans-serif; }
.comic-template-copy > span { color: var(--muted); font: 14px/1.55 Arial, "PingFang SC", sans-serif; }
.comic-template-actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; margin-top: 28px; }
.comic-template-actions .primary-action { width: min(100%, 430px); }
.comic-template-promise { margin: 18px 0 0; text-align: right; color: var(--muted); font: 13px/1.5 Arial, "PingFang SC", sans-serif; }
.result-format-note { margin-top: 18px !important; padding: 14px 17px; border-left: 4px solid var(--ink-blue); color: #315f56 !important; background: #edf5ed; font: 700 14px/1.55 Arial, "PingFang SC", sans-serif !important; }

@media (max-width: 960px) {
  .chinese-hero { grid-template-columns: 1fr; }
  .chinese-hero-art { min-height: 420px; order: -1; background-image: linear-gradient(0deg, #f7f0e2 0%, transparent 25%), url("assets/hero-zh-wuxia-ink-v1.png"); }
  .chinese-format-grid { grid-template-columns: repeat(2, 1fr); }
  .comic-template-grid { grid-template-columns: 1fr; }
  .comic-template-card { grid-template-columns: 42% 58%; grid-template-rows: 1fr; }
}

@media (max-width: 700px) {
  .chinese-studio .flow-header,
  .chinese-studio .flow-main { width: min(100% - 28px, 1280px); }
  .chinese-header .studio-switch { padding: 8px 10px; font-size: 12px; }
  .chinese-hero { min-height: 0; border-radius: 24px; }
  .chinese-hero-copy { padding: 28px 22px 34px; }
  .chinese-hero-art { min-height: 300px; }
  .chinese-hero h1 { font-size: clamp(48px, 14vw, 62px); letter-spacing: -.045em; }
  .chinese-hero-copy > p:not(.chinese-eyebrow) { font-size: 17px; }
  .chinese-creation-paths { margin-top: 38px; }
  .chinese-creation-path-grid { grid-template-columns: 1fr; }
  .chinese-creation-path { min-height: 220px; padding: 24px; border-radius: 21px; }
  .chinese-spark-form { margin-top: 42px; }
  .chinese-start-options { grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 22px; }
  .chinese-start-options .chinese-upload { grid-column: 1 / -1; }
  .chinese-start-options .chinese-upload,
  .chinese-idea-entry,
  .chinese-existing-writing-entry { min-height: 250px; padding: 19px; border-radius: 18px; }
  .chinese-existing-writing-entry { grid-column: 1 / -1; grid-template-columns: auto minmax(0,1fr); grid-template-rows: 1fr auto; min-height: 138px; }
  .chinese-start-options .chinese-upload .spark-upload-icon,
  .chinese-idea-icon,
  .chinese-existing-writing-icon { width: 52px; height: 52px; }
  .chinese-start-options .chinese-upload strong,
  .chinese-idea-entry strong,
  .chinese-existing-writing-entry strong { font-size: clamp(23px, 5.8vw, 31px); }
  .chinese-start-options .chinese-upload small,
  .chinese-idea-entry small,
  .chinese-existing-writing-entry small { font-size: 12px; }
  .chinese-format-grid { gap: 9px; }
  .format-card { min-height: 210px; }
  .format-card > span { padding: 14px; }
  .format-card b { font-size: 21px; }
  .chinese-creator-fields,
  .chinese-profile-body { grid-template-columns: 1fr; }
  .comic-template-intro h1 { font-size: 48px; }
  .comic-template-card { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
  .comic-template-actions { align-items: stretch; flex-direction: column-reverse; }
  .comic-template-actions .primary-action { width: 100%; }
  .comic-template-promise { text-align: left; }
}

@media (max-width: 480px) {
  .chinese-start-options { grid-template-columns: 1fr; }
  .chinese-start-options .chinese-upload { grid-column: auto; }
  .chinese-existing-writing-entry { grid-column: auto; }
  .chinese-start-options .chinese-upload,
  .chinese-idea-entry,
  .chinese-existing-writing-entry { min-height: 220px; }
  .chinese-hero h1 { font-size: clamp(44px, 13.5vw, 56px); }
}

@media (prefers-reduced-motion: reduce) {
  .chinese-creation-path,
  .chinese-idea-entry,
  .chinese-existing-writing-entry { transition: none; }
}