:root { color-scheme: dark; --bg:#091126; --panel:#101b33; --text:#f6f5fb; --muted:#acb8cc; --line:#ffffff24; --accent:#d2c3ff; --blue:#a7d8ee; font-family:ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { min-width:320px; margin:0; color:var(--text); background:radial-gradient(ellipse at 85% 10%,#27234780,transparent 38%),var(--bg); line-height:1.75; }
a { color:inherit; text-underline-offset:.22em; }
img { display:block; max-width:100%; height:auto; }
button,textarea { font:inherit; }
button,a,textarea,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
[hidden] { display:none !important; }
.site-header { border-bottom:1px solid var(--line); background:#091126e8; position:sticky; top:0; z-index:10; backdrop-filter:blur(15px); }
.header-inner,.hero,.journey,.starter,.questions,.site-footer { width:min(1100px,calc(100% - 48px)); margin-inline:auto; }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:15px; font-weight:800; letter-spacing:.07em; }
.brand span { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#e4d5ff; color:var(--bg); font-size:11px; letter-spacing:0; }
.quiet-link { text-decoration:none; color:var(--muted); font-size:13px; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; padding-block:58px 70px; }
.eyebrow { margin:0 0 18px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(36px,4.2vw,58px); line-height:1.2; letter-spacing:-.025em; font-weight:760; }
.mobile-break { display:none; }
.hero-lead { margin:26px 0 28px; color:#c6cfdf; font-size:18px; line-height:1.9; }
.primary { display:inline-flex; justify-content:center; align-items:center; gap:28px; min-height:50px; border:1px solid transparent; border-radius:12px; padding:12px 22px; background:var(--accent); color:#18132c; font-size:15px; font-weight:750; text-decoration:none; cursor:pointer; }
.primary:hover { background:#e1d7ff; }
.primary:disabled { opacity:.5; cursor:default; }
.hero-note { color:var(--muted); font-size:12px; margin-top:13px; }
.shared-note { font-size:12px; color:var(--muted); max-width:380px; }
.shared-note a { color:var(--blue); }
.hero-art { margin:0; position:relative; max-width:430px; width:100%; justify-self:end; }
.hero-art > img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:24px; border:1px solid var(--line); }
.hero-art figcaption { position:absolute; bottom:0; inset-inline:0; padding:45px 22px 20px; background:linear-gradient(transparent,#060c1df2); border-radius:0 0 24px 24px; }
.hero-art figcaption span { display:block; font-size:19px; font-weight:700; }
.hero-art small { display:block; margin-top:2px; color:#c3cbda; font-size:11px; }
.journey { padding-block:48px 40px; border-top:1px solid var(--line); }
.journey-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }
h2 { margin:0; font-size:clamp(24px,3vw,34px); line-height:1.35; letter-spacing:-.02em; }
.journey-heading .eyebrow { margin-bottom:10px; }
.demo-badge { flex-shrink:0; color:var(--muted); border:1px solid var(--line); border-radius:50px; padding:5px 12px; font-size:11px; }
.progress { display:grid; grid-template-columns:repeat(4,1fr); padding:0; margin:30px 0 20px; gap:10px; list-style:none; }
.progress li { color:#8f9bb2; font-size:13px; padding:10px 0; border-bottom:2px solid #ffffff16; }
.progress span { margin-right:9px; font-size:11px; }
.progress li[aria-current="step"] { color:var(--accent); border-color:var(--accent); font-weight:700; }
.journey-panel { display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:46px; padding:32px; min-height:480px; border:1px solid var(--line); background:linear-gradient(125deg,#17243f,#101a32); border-radius:22px; margin-bottom:18px; }
.journey-panel:focus { outline:none; }
.journey-panel:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.step-number { color:var(--accent); letter-spacing:.12em; font-size:12px; margin:0 0 18px; }
.panel-copy h3 { margin:0 0 22px; font-size:clamp(25px,3vw,36px); line-height:1.35; letter-spacing:-.02em; }
.panel-copy > p:not(.step-number) { font-size:17px; color:#e0e4ed; }
.panel-copy p.muted { color:var(--muted); font-size:14px; max-width:390px; }
.muted { color:var(--muted); font-size:14px; }
.idea-card { border:1px solid #d2c3ff36; border-radius:18px; padding:28px; background:#0b152c; transform:rotate(1deg); }
.card-label { margin:0 0 12px; color:var(--blue); font-size:12px; }
.idea-card h4 { font-size:22px; margin:0 0 24px; }
.traits { list-style:none; padding:0; margin:0; }
.traits li { border-bottom:1px solid var(--line); padding:15px 0; color:#e0e4ef; font-size:15px; }
.traits li::before { content:"✓"; color:var(--accent); margin-right:10px; }
.idea-card > p:last-child { color:var(--muted); font-size:12px; margin-top:25px; }
.panel-art { margin:0; max-width:340px; width:100%; justify-self:center; }
.panel-art img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:15px; }
.panel-art figcaption { color:var(--muted); text-align:center; margin-top:8px; font-size:12px; }
.small-memory { display:flex; flex-direction:column; gap:7px; border-left:2px solid var(--accent); padding:8px 0 8px 16px; margin-top:24px; font-size:12px; color:var(--muted); }
.small-memory strong { color:var(--text); font-size:13px; }
.small-memory .new-trait { color:#b1e6ce; }
blockquote { margin:0 0 20px; padding:16px; border:1px solid var(--line); border-radius:12px; color:#eee6ff; background:#0b1428; font-size:16px; }
.finish-card { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0b1428; }
.finish-card > img { aspect-ratio:8/5; object-fit:cover; width:100%; }
.finish-card > div { padding:22px; }
.finish-card h4 { font-size:22px; line-height:1.5; margin:0; }
.finish-card p:last-child { color:var(--muted); font-size:12px; }
.journey-controls { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.back-link { border:0; padding:12px 0; background:none; color:var(--muted); cursor:pointer; font-size:13px; }
.back-link:disabled { visibility:hidden; }
.takeaways { margin-top:18px; }
.takeaways details { background:#ffffff04; border:1px solid var(--line); border-radius:12px; padding:0 18px; }
details summary { cursor:pointer; padding:18px 0; font-size:14px; color:#d6deed; }
details p { color:var(--muted); font-size:14px; }
.takeaways a { display:inline-block; color:var(--blue); font-size:13px; margin:0 24px 18px 0; }
.starter { max-width:720px; text-align:center; padding-block:58px; border-bottom:1px solid var(--line); }
.starter label { display:block; text-align:left; margin:26px 0 10px; font-size:14px; }
#oc-idea { width:100%; min-height:114px; resize:vertical; padding:16px; border:1px solid #b4a0ee70; border-radius:14px; background:#101a30; color:var(--text); font-size:16px; line-height:1.7; }
#oc-idea::placeholder { color:#94a0b6; }
#idea-help { color:var(--muted); font-size:13px; text-align:left; margin:10px 0 20px; }
.starter .primary { width:100%; }
#idea-status { min-height:1.75em; font-size:13px; color:var(--blue); margin:12px 0 6px; }
.privacy-note { color:#96a4ba; font-size:12px; max-width:520px; margin:0 auto; }
.questions { max-width:720px; padding-block:38px 56px; }
.questions h2 { font-size:20px; margin-bottom:16px; }
.questions details { border-bottom:1px solid var(--line); }
.questions details > a { display:inline-block; margin-bottom:18px; font-size:14px; color:var(--blue); }
.site-footer { display:flex; justify-content:space-between; gap:26px; border-top:1px solid var(--line); padding-block:30px 38px; }
.site-footer strong { font-size:13px; letter-spacing:.07em; }
.site-footer p { font-size:12px; color:#95a3b9; margin:8px 0 0; }
.site-footer a { display:inline-block; font-size:12px; color:var(--muted); margin-right:20px; }
.skip-link { position:fixed; top:8px; left:8px; padding:10px; background:#fff; color:#111; z-index:30; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:820px) { .hero { gap:35px; } .hero-lead { font-size:16px; } .journey-panel { gap:24px; padding:24px; } .journey-heading { align-items:start; } }
@media(max-width:600px) {
 html { scroll-padding-top:76px; }
 .header-inner,.hero,.journey,.starter,.questions,.site-footer { width:calc(100% - 36px); }
 .header-inner { min-height:62px; gap:12px; }
 .brand { gap:8px; font-size:12px; } .brand span { width:30px; height:30px; font-size:10px; }
 .quiet-link { font-size:11px; }
 .hero { grid-template-columns:1fr; padding-block:32px 34px; gap:25px; }
 h1 { font-size:36px; } .mobile-break { display:block; }
 .hero-lead { margin:20px 0 22px; font-size:16px; }
 .hero-copy > .primary { width:100%; }
 .hero-note { font-size:11px; }
 .hero-art { max-width:none; }
 .hero-art > img { aspect-ratio:5/4; object-position:50% 29%; border-radius:18px; }
 .hero-art figcaption { padding:40px 16px 14px; border-radius:0 0 18px 18px; }
 .hero-art figcaption span { font-size:16px; }
 .journey { padding-block:30px; }
 .journey-heading { display:block; }
 .demo-badge { display:inline-block; margin-top:13px; }
 .progress { gap:5px; margin:20px 0 14px; }
 .progress li { font-size:11px; } .progress span { margin-right:4px; }
 .journey-panel { grid-template-columns:1fr; gap:20px; padding:22px 18px; min-height:0; }
 .panel-copy h3 { font-size:27px; margin-bottom:17px; }
 .panel-copy > p:not(.step-number) { font-size:15px; }
 .panel-copy p.muted { font-size:13px; }
 .step-number { margin-bottom:12px; }
 .idea-card { padding:20px; transform:none; }
 .idea-card h4 { font-size:19px; margin-bottom:12px; }
 .traits li { font-size:13px; padding:12px 0; }
 .panel-art { max-width:280px; }
 .panel-art img { aspect-ratio:4/5; }
 .journey-controls { gap:12px; }
 .journey-controls .primary { flex:1; max-width:260px; font-size:13px; gap:10px; padding:12px; }
 .back-link { font-size:12px; min-width:62px; }
 .starter { padding-block:30px; }
 .starter h2 { font-size:27px; }
 .questions { padding-block:30px 35px; }
 .site-footer { display:block; }
 .site-footer > div + div { margin-top:22px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Three choices in the hero; one four-step flow per character. */
html { min-height:100%; background:var(--bg); }
body { width:100%; min-height:100vh; }
.header-inner,.hero,.journey,.site-footer { width:min(1320px,calc(100% - 48px)); }
.hero.hero--trio { grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); gap:40px; padding-block:52px; }
.hero--trio h1 { font-size:clamp(34px,3.4vw,52px); }
.hero-trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-width:0; }
.hero-character { position:relative; min-width:0; padding:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#111c34; color:var(--text); cursor:pointer; text-align:left; transition:transform .18s,border-color .18s; }
.hero-character:hover { transform:translateY(-5px); }
.hero-character.is-selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.hero-character img { width:100%; aspect-ratio:3/5; object-fit:cover; object-position:50% 25%; }
.hero-character__copy { display:block; padding:14px 11px; }
.hero-character__copy small { color:var(--blue); font-size:11px; }
.hero-character__copy strong { display:block; font-size:15px; line-height:1.5; margin:5px 0; }
.hero-character__copy > span { font-size:11px; color:var(--muted); }
.play-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:40px; padding:30px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(120deg,#16233e,#10192f); margin-bottom:18px; }
.play-copy,.play-viewer { min-width:0; }
.play-copy h3 { font-size:clamp(25px,2.8vw,36px); line-height:1.35; margin:0 0 22px; }
.play-copy [data-step]:focus { outline:none; }
.play-copy p:not(.step-number) { font-size:15px; }
.play-copy .muted { font-size:13px !important; }
.play-copy .traits li { font-size:14px; }
.play-copy .source-link { color:var(--blue); font-size:13px; }
#idea-board { min-height:330px; margin:30px 0; }
#idea-board small { color:var(--muted); }
.play-image { margin:0 auto; width:min(100%,370px); }
.play-image__frame { overflow:hidden; border-radius:16px; background:#080e1a; }
.play-image img { width:100%; aspect-ratio:4/5; object-fit:contain; object-position:center; transition:transform .2s; }
.play-image.is-zoomed img { transform:scale(2.1); }
[data-current-character="wenjian"] .play-image.is-zoomed img { transform-origin:73% 42%; }
[data-current-character="cenzhou"] .play-image.is-zoomed img { transform-origin:52% 48%; }
[data-current-character="luqitang"] .play-image.is-zoomed img { transform-origin:70% 59%; }
.play-image figcaption { color:var(--muted); font-size:12px; margin-top:8px; text-align:center; }
.preset-action { width:100%; padding:14px; min-height:48px; background:#d2c3ff; color:#18132c; border:1px solid transparent; border-radius:12px; cursor:pointer; font-size:14px; font-weight:700; }
.preset-action:disabled { background:#ffffff0a; color:var(--muted); cursor:default; border-color:var(--line); }
.preset-guide { font-size:12px !important; color:var(--muted); margin:12px 0; }
.variant-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.variant-options button,.play-tools button,.export-actions button { min-height:42px; border:1px solid var(--line); border-radius:9px; background:#0b152b; color:var(--text); cursor:pointer; font-size:13px; }
.variant-options button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.play-tools { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.play-tools button { padding:8px 12px; font-size:12px; background:transparent; }
.play-tools button:disabled { opacity:.45; cursor:default; }
#preset-status,#export-status,#image-error { color:var(--blue); font-size:12px !important; min-height:1.7em; }
.memory-card { max-width:440px; margin:18px auto 0; padding:16px 18px; border:1px solid #ffffff1e; border-radius:13px; background:#0b1428; }
.memory-card > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; }
.memory-card strong { font-size:13px; }
.memory-card > div > span { font-size:11px; color:var(--blue); }
.memory-card p,.memory-card li { color:var(--muted); font-size:12px; }
.memory-card ul,.memory-card ol { padding-left:18px; }
.memory-card summary { padding:6px 0; font-size:12px; }
.export-actions { display:flex; gap:10px; margin:22px 0; }
.export-actions button { flex:1; padding:10px; }
.story-details { border-top:1px solid var(--line); }
#story-preview { white-space:pre-wrap; overflow-wrap:anywhere; max-height:380px; overflow-y:auto; color:#c3cee0; font-size:13px; padding-bottom:15px; }
.storage-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; }
.storage-row p { color:var(--muted); font-size:11px; margin:0; }
.storage-row button { flex-shrink:0; border:0; background:transparent; color:var(--muted); text-decoration:underline; text-underline-offset:3px; padding:8px 0; cursor:pointer; font-size:11px; }
@media(max-width:1000px) {
 .hero.hero--trio { grid-template-columns:1fr; }
 .hero-copy { max-width:680px; }
 .hero-character img { aspect-ratio:4/5; }
 .hero-trio { gap:16px; }
 .hero-character__copy strong { font-size:18px; }
 .play-body { gap:25px; padding:24px; }
}
@media(max-width:600px) {
 .header-inner,.hero,.journey,.site-footer { width:calc(100% - 36px); }
 .hero.hero--trio { gap:24px; padding-block:30px; }
 .hero--trio h1 { font-size:34px; }
 .hero--trio .hero-lead { font-size:15px; }
 .hero-trio { gap:8px; }
 .hero-character { border-radius:11px; }
 .hero-character img { aspect-ratio:3/4; }
 .hero-character__copy { padding:8px 6px; }
 .hero-character__copy small { font-size:10px; }
 .hero-character__copy strong { font-size:12px; }
 .hero-character__copy > span { font-size:10px; }
 .play-body { grid-template-columns:1fr; padding:20px 16px; gap:22px; }
 .play-copy h3 { font-size:27px; margin-bottom:16px; }
 #idea-board { margin:0; min-height:0; }
 .play-image { width:min(100%,340px); }
 .memory-card { margin-top:14px; padding:14px; }
 .storage-row { align-items:start; }
 .storage-row p { font-size:10px; }
 .variant-options button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .hero-character,.play-image img { transition:none; } }

.play-viewer[data-current-version="hair"] .play-image.is-zoomed img { transform-origin:50% 16%; }
.play-viewer[data-current-version="clips"] .play-image.is-zoomed img { transform-origin:35% 18%; }
.play-viewer[data-current-version="tassel"] .play-image.is-zoomed img { transform-origin:75% 80%; }