.project-explainer { --model-accent: #a7c8ff; background: #101f34; padding: 40px 34px; }
.project-explainer[data-diagram=sias] { --model-accent:#8edbd1; background:#112b2e; }
.project-explainer[data-diagram=cathay] { --model-accent:#acd9f4; background:#102936; }
body[data-home-mode=life] .project-explainer { --model-accent:#316bcc; background:#edf2ff; }
body[data-home-mode=life] .project-explainer[data-diagram=sias] { --model-accent:#217b73; background:#e8f4f1; }
body[data-home-mode=life] .project-explainer[data-diagram=cathay] { --model-accent:#276482; background:#eaf4f9; }
.decision-model { --model-accent:var(--accent); width:100%; color:var(--ink); }
.project-explainer .decision-model { --model-accent:inherit; }
.diagram-label { font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--model-accent); }
.decision-model header h4 { font-size:clamp(24px,2.3vw,32px); font-weight:550; letter-spacing:-.035em; line-height:1.3; margin:14px 0 32px; }
.model-station strong,.value-agreement strong { font-size:16px; font-weight:500; line-height:1.5; text-wrap:balance; }
.model-station { position:relative; }
.model-number { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--model-accent); border-radius:50%; color:var(--model-accent); font-size:12px; font-variant-numeric:tabular-nums; margin-bottom:18px; background:var(--section-soft); }
.demand-track { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; height:270px; padding:0 6px 12px; }
.demand-track .model-station { height:132px; padding-top:22px; }
.demand-track .model-station:nth-child(2) { margin-bottom:38px; }
.demand-track .model-station:nth-child(3) { margin-bottom:76px; }
.demand-track .model-station:nth-child(4) { margin-bottom:114px; }
.demand-track .model-station:not(:last-child)::before { content:''; position:absolute; left:40px; right:0; top:41px; height:1px; background:var(--model-accent); opacity:.35; }
.demand-track .model-station:not(:last-child)::after { content:''; position:absolute; right:0; top:3px; height:38px; width:1px; background:var(--model-accent); opacity:.35; }
.demand-track strong { display:block; padding-right:10px; }
.model-endpoints { display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding-top:18px; margin-top:20px; color:var(--muted); font-size:14px; line-height:1.6; }
.model-endpoints span:last-child { text-align:right; color:var(--model-accent); }
.decision-map { display:grid; grid-template-columns:1fr 26px 1fr; align-items:center; }
.model-lane-label { display:block; color:var(--muted); font-size:14px; line-height:1.5; min-height:40px; margin-bottom:12px; }
.decision-lane .model-station { padding:16px 12px; border:1px solid var(--line); border-radius:10px; min-height:66px; display:grid; place-items:center; text-align:center; margin-bottom:24px; background:var(--section-soft); }
.decision-lane .model-station:not(:last-child)::after { content:''; position:absolute; width:1px; height:25px; top:100%; left:50%; background:var(--model-accent); opacity:.4; }
.decision-bridge { display:grid; place-items:center; color:var(--model-accent); font-size:22px; padding-top:16px; }
.value-labels { display:grid; grid-template-columns:1fr 1fr; gap:40px; color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:10px; }
.value-labels span:last-child { text-align:right; }
.value-row { display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); gap:14px; align-items:center; min-height:76px; border-bottom:1px solid var(--line); }
.value-row strong:last-child { text-align:right; color:var(--model-accent); }
.value-link { height:1px; background:var(--model-accent); position:relative; opacity:.6; }
.value-link::after { content:''; width:6px; height:6px; border:solid var(--model-accent); border-width:1px 1px 0 0; position:absolute; right:0; top:-3px; transform:rotate(45deg); }
.value-agreement { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:24px; padding:18px 12px; background:var(--section-soft); border-radius:10px; text-align:center; }
.value-agreement > span { color:var(--model-accent); }
.model-caption { display:block; margin-top:30px; color:var(--muted); font-size:12px; line-height:1.6; }
.case-model { padding:30px; border:1px solid var(--line); border-radius:20px; background:var(--section-soft); margin:30px 0; }
.case-model .decision-model { max-width:650px; margin:0 auto; }
.case-model [data-model-stage] { transition:opacity .4s,background .4s,border-color .4s; }
.case-model [data-model-stage].is-current .model-number { background:var(--model-accent); color:var(--bg); }
.case-model .decision-lane .is-current { border-color:var(--model-accent); }
.case-model .value-row.is-current { border-color:var(--model-accent); }
.case-model .value-agreement.is-current { outline:1px solid var(--model-accent); }
.case-model [data-model-stage].is-current strong { color:var(--model-accent); }
.case-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:32px 0 24px; }
.case-step { border:1px solid var(--line); background:transparent; border-radius:12px; color:var(--muted); font:inherit; text-align:left; padding:14px 12px; cursor:pointer; transition:background .3s,color .3s; }
.case-step span { display:block; font-size:12px; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.case-step strong { font-size:14px; font-weight:500; line-height:1.5; display:block; }
.case-step[aria-selected=true] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.case-step:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.case-step-panel { border-top:1px solid var(--line); padding-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:20px 32px; }
.case-reason span,.case-move span,.case-change span { display:block; color:var(--accent); font-size:14px; font-weight:500; margin-bottom:10px; }
.case-step-panel p { color:var(--muted); font-size:16px; line-height:1.8; margin:0; }
.case-change { grid-column:1/-1; border-top:1px solid var(--line); padding-top:20px; }
.case-change p { color:var(--ink); }
@media(max-width:950px) { .project-explainer { padding:30px 24px; } .model-station strong { font-size:14px; } .value-row { gap:8px; grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr); } }
@media(max-width:700px) {
 .project-explainer { padding:30px 24px; } .decision-model header h4 { font-size:25px; }
 .demand-track { height:260px; padding-inline:0; } .demand-track .model-station { height:120px; } .model-number { width:32px;height:32px; }
 .demand-track .model-station:not(:last-child)::before { left:32px;top:37px; }
 .demand-track .model-station:not(:last-child)::after { top:-1px; }
 .demand-track strong { padding-right:5px; font-size:14px; }
 .decision-map { grid-template-columns:1fr 22px 1fr; } .decision-lane .model-station { padding:12px 8px; }
 .model-endpoints,.model-lane-label,.value-labels { font-size:14px; }
 .case-model { padding:24px 16px; margin-inline:-8px; }
 .case-controls { grid-template-columns:1fr 1fr; margin-top:25px; }
 .case-step-panel { grid-template-columns:1fr; }
 .case-change { grid-column:auto; }
}
@media(prefers-reduced-motion:reduce) { .case-model [data-model-stage],.case-step { transition:none; } }