.story-section { --story-accent:#526346; --story-ink:#2e3729; --story-muted:#61695a; --story-line:#cdd2c4; --story-surface:#e5e8dc; padding:42px 0 64px; }
.story-section.wanying { --story-accent:#725b88; --story-ink:#3d3049; --story-muted:#6b6074; --story-line:#d7cddd; --story-surface:#e8e3ef; }
.story-section.tuce { --story-accent:#65753e; --story-ink:#313b25; --story-muted:#5d654f; --story-line:#ced4c2; --story-surface:#e3e8da; }
.story-section .story-layout { display:grid; grid-template-columns:minmax(0,.91fr) minmax(0,1.59fr); grid-template-areas:"intro media" "diagram media" "details media"; gap:24px 54px; align-items:start; }
.story-section .story-intro { grid-area:intro; }
.story-section .story-name { display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; }
.story-section .story-name h2 { margin:0; font-size:33px; line-height:1.22; font-weight:600; letter-spacing:-.035em; }
.story-section .story-name>span { color:var(--story-muted); font-size:11px; }
.story-section .story-title { margin:23px 0 0; font-size:clamp(26px,2.5vw,34px); line-height:1.5; letter-spacing:-.025em; font-weight:550; color:var(--story-ink); }
.story-section .story-title>span { color:var(--story-accent); }
.story-section .story-description { max-width:390px; color:var(--story-muted); font-size:13px; line-height:1.95; margin:18px 0 0; }
.story-section .story-media { grid-area:media; min-width:0; }
.story-section .story-film { aspect-ratio:16/11; border-radius:12px; background:#171b17; }
.story-section .story-cover { background:var(--story-surface); color:var(--story-ink); }
.story-section .proof-stage { position:absolute; inset:21px 25px 79px; display:flex; align-items:center; justify-content:center; }
.story-section .proof-window { display:block; width:auto; height:100%; max-width:100%; aspect-ratio:1.596; overflow:hidden; border:1px solid #555e4a; border-radius:5px; background:#111812; }
.story-section .proof-window img { display:block; width:100%; height:100%; object-fit:contain; }
.story-section .tc-result { border:0; aspect-ratio:1.657; }
.story-section .story-cover-footer { position:absolute; left:23px; right:23px; bottom:19px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.story-section .cover-play { position:static; display:flex; gap:8px; min-height:42px; border-radius:24px; padding:11px 16px 11px 12px; color:#faf9f4; background:var(--story-accent); font-size:12px; font-weight:500; }
.story-section .cover-play>svg { width:18px; height:18px; padding:0; border:0; border-radius:0; }
.story-section .film-cover:hover .cover-play { background:var(--story-ink); }
.story-section .film-cover:hover .cover-play>svg { background:none; transform:none; }
.story-section .recording-label { font-size:11px; color:var(--story-muted); display:flex; gap:8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.story-section .film-meta { padding-top:12px; gap:15px; }
.story-section .film-status { color:var(--story-muted); font-size:11px; }
.story-section .film-meta>label { display:flex; align-items:center; gap:8px; color:var(--story-muted); font-size:11px; }
.story-section .film-meta select { background:transparent; border:1px solid var(--story-line); color:var(--story-ink); border-radius:3px; padding:4px 7px; }
.story-section .story-diagram { grid-area:diagram; min-width:0; color:var(--story-ink); }
.story-section .vc-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; list-style:none; padding:0; margin:0; }
.story-section .vc-path li { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; }
.story-section .path-num { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--story-line); background:var(--story-surface); border-radius:50%; color:var(--story-accent); font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; }
.story-section .vc-path strong { font-size:13px; font-weight:500; }
.story-section .vc-path small { color:var(--story-muted); font-size:11px; white-space:nowrap; }
.story-section .path-arrow { width:28px; height:12px; color:var(--story-accent); }
.story-section .vc-path .path-arrow { position:absolute; right:-25px; top:12px; }
.story-section .refine-loop { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; border-top:1px solid var(--story-line); margin-top:19px; padding-top:14px; font-size:12px; }
.story-section .refine-loop>svg { width:30px; height:16px; color:var(--story-accent); }
.story-section .refine-loop small { color:var(--story-muted); font-size:11px; }
.story-section .seven-heading { display:flex; align-items:center; gap:17px; }
.story-section .seven-heading>strong { font-size:59px; font-weight:500; letter-spacing:-.04em; line-height:1; color:var(--story-accent); }
.story-section .seven-heading>p { margin:0; font-size:14px; line-height:1.7; }
.story-section .seven-heading small { display:block; font-size:11px; color:var(--story-muted); }
.story-section .seven-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:12px; row-gap:14px; list-style:none; padding:18px 0 0; margin:17px 0 0; border-top:1px solid var(--story-line); }
.story-section .seven-steps li { font-size:11px; color:var(--story-muted); line-height:1.7; }
.story-section .seven-steps li>span { display:block; color:var(--story-accent); font-size:12px; font-variant-numeric:tabular-nums; margin-bottom:3px; }
.story-section .wy-evidence { display:flex; width:100%; height:100%; align-items:center; justify-content:center; gap:22px; }
.story-section .wy-portrait { display:block; height:100%; max-width:42%; object-fit:contain; border-radius:6px; }
.story-section .wy-workflow { display:block; flex:1; min-width:0; }
.story-section .wy-workflow img { display:block; width:100%; height:auto; border-radius:5px; border:1px solid #635870; }
.story-section .wy-workflow>span { display:block; font-size:11px; color:var(--story-muted); margin-top:14px; text-align:center; }
.story-section .set-equation { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:0 7px; }
.story-section .one-input>strong { display:block; font-size:58px; line-height:1.1; font-weight:500; letter-spacing:-.04em; color:var(--story-accent); }
.story-section .one-input>span { font-size:11px; color:var(--story-muted); }
.story-section .set-equation>.path-arrow { width:54px; height:23px; }
.story-section .six-grid { display:grid; grid-template-columns:repeat(3,20px); gap:5px; }
.story-section .six-grid>i { display:block; height:27px; border:1px solid #6f7c59; background:var(--story-surface); border-radius:2px; }
.story-section .six-output>p { margin:8px 0 0; font-size:11px; color:var(--story-muted); }
.story-section .six-output strong { font-size:20px; font-weight:500; color:var(--story-accent); }
.story-section .library-facts { display:flex; align-items:center; gap:30px; border-top:1px solid var(--story-line); margin:19px 0 0; padding-top:13px; }
.story-section .library-facts>div { display:flex; align-items:baseline; flex-direction:row-reverse; gap:8px; }
.story-section .library-facts dt { font-size:11px; color:var(--story-muted); }
.story-section .library-facts dd { margin:0; font-size:23px; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.story-section .library-facts dd>span { font-size:11px; font-weight:400; }
.story-section .version-note { font-size:12px; color:var(--story-muted); margin:10px 0 0; line-height:1.7; }
.story-section .story-details { grid-area:details; font-size:12px; color:var(--story-muted); }
.story-section .story-details>summary { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:8px 0 12px; border-bottom:1px solid var(--story-line); list-style:none; cursor:pointer; color:var(--story-ink); }
.story-section .story-details>summary::-webkit-details-marker { display:none; }
.story-section .story-details>summary>svg { width:17px; height:17px; }
.story-section .story-details[open]>summary>svg { transform:rotate(180deg); }
.story-section .story-details p { margin:14px 0 0; line-height:1.95; }
.story-section summary:focus-visible,.story-section button:focus-visible,.story-section select:focus-visible { outline:3px solid var(--story-accent); outline-offset:4px; }
.story-section ::selection { background:var(--story-line); color:var(--story-ink); }
@media(min-width:1500px) {
 .story-section .story-layout { gap:26px 64px; }
 .story-section .story-description { font-size:14px; }
}
@media(min-width:761px) and (max-width:1050px) {
 .story-section .story-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:20px 30px; }
 .story-section .story-name { gap:9px; }
 .story-section .story-name h2 { font-size:29px; }
 .story-section .story-title { font-size:25px; margin-top:19px; }
 .story-section .story-description { font-size:12px; }
 .story-section .proof-stage { inset:15px 16px 70px; }
 .story-section .story-cover-footer { left:15px; right:15px; bottom:14px; gap:10px; }
 .story-section .cover-play { font-size:11px; padding:10px 12px 10px 9px; gap:5px; }
 .story-section .recording-label>span { display:none; }
 .story-section .wy-evidence { gap:13px; }
 .story-section .wy-workflow>span { font-size:11px; line-height:1.8; margin-top:9px; }
 .story-section .vc-path { gap:16px; }
 .story-section .vc-path .path-arrow { right:-22px; width:25px; }
 .story-section .vc-path small { font-size:11px; }
 .story-section .refine-loop { gap:7px; }
 .story-section .refine-loop small { width:100%; text-align:center; }
 .story-section .library-facts { gap:18px; }
 .story-section .library-facts>div { flex-direction:column-reverse; gap:2px; }
 .story-section .set-equation { gap:15px; }
}
@media(max-width:760px) {
 .story-section { padding:30px 0 46px; }
 .story-section .story-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "media" "diagram" "details"; gap:23px; }
 .story-section .story-name { gap:12px; }
 .story-section .story-name h2 { font-size:32px; }
 .story-section .story-title { font-size:28px; margin-top:19px; }
 .story-section .story-description { font-size:12px; max-width:520px; margin-top:16px; }
 .story-section .story-film { aspect-ratio:6/5; }
 .story-section .proof-stage { inset:13px 14px 64px; }
 .story-section .story-cover-footer { left:14px; right:14px; bottom:12px; gap:10px; }
 .story-section .cover-play { font-size:11px; min-height:40px; padding:10px 12px 10px 9px; gap:6px; }
 .story-section .cover-play>svg { width:16px; height:16px; }
 .story-section .recording-label { font-size:11px; gap:6px; }
 .story-section .film-meta { align-items:center; padding-top:10px; }
 .story-section .film-status { text-align:left; max-width:none; }
 .story-section .story-diagram { padding-top:2px; }
 .story-section .vc-path { gap:20px; }
 .story-section .seven-steps { column-gap:10px; }
 .story-section .wy-evidence { gap:15px; }
 .story-section .wy-workflow>span { font-size:11px; line-height:1.8; margin-top:10px; }
 .story-section .set-equation { max-width:380px; margin-inline:auto; }
 .story-section .library-facts { gap:28px; }
}
@media(max-width:400px) {
 .story-section .recording-label>span { display:none; }
 .story-section .story-title { font-size:26px; }
 .story-section .library-facts>div { flex-direction:column-reverse; gap:2px; }
}
@media(max-width:350px) {
 .story-section .story-title { font-size:24px; }
 .story-section .story-name { gap:8px; }
 .story-section .story-name h2 { font-size:29px; }
 .story-section .vc-path { gap:15px; }
 .story-section .vc-path .path-arrow { right:-23px; width:25px; }
 .story-section .refine-loop small { width:100%; text-align:center; }
 .story-section .wy-evidence { gap:10px; }
 .story-section .wy-workflow>span { font-size:11px; }
}

.story-section .seven-steps li { position:relative; }
.story-section .seven-steps li>span { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--story-line); border-radius:50%; background:var(--story-surface); font-size:11px; margin-bottom:7px; }
.story-section .seven-steps li:not(:nth-child(4)):not(:last-child)::after { content:""; position:absolute; top:12px; left:29px; right:0; height:1px; background:var(--story-line); }

.story-section .vc-path small,
.story-section .seven-steps li,
.story-section .one-input>span,
.story-section .six-output>p,
.story-section .library-facts dt { font-size:12px; }