:root { color-scheme:light; --bg:#f8fafb; --surface:#fff; --surface-2:#f2f5f6; --text:#18212b; --text-muted:#52606d; --border:#dce3e7; --accent:#155e75; --focus:#147d9a; }
* { box-sizing:border-box; }
body { margin:0; padding:22px; background:var(--surface); color:var(--text); font:16px/1.6 "Segoe UI",Arial,sans-serif; }
main { max-width:980px; margin:auto; }
h1 { margin:0 0 8px; font-size:1.5rem; line-height:1.3; }
h2 { margin:0 0 8px; font-size:1.125rem; line-height:1.4; }
h3 { margin:0 0 7px; font-size:1.05rem; line-height:1.4; }
p { margin:0; }
.intro,.muted { color:var(--text-muted); }
.intro { max-width:55rem; }
.eyebrow { margin-bottom:7px; color:var(--accent); font-size:.9375rem; font-weight:650; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:22px; }
.step { min-width:0; }
.step + .step { border-left:1px solid var(--border); padding-left:20px; }
.number { display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid var(--accent); border-radius:50%; margin-bottom:10px; font-weight:650; color:var(--accent); }
.render { display:block; width:100%; height:270px; object-fit:contain; margin:8px 0 12px; background:var(--surface-2); border-radius:6px; }
.detail-label { font-size:.9375rem; color:var(--text-muted); margin:5px 0; }
.detail-render { display:block; width:100%; height:155px; object-fit:contain; background:var(--surface-2); border-radius:6px; }
.tag { display:block; padding:9px 12px; border-left:3px solid var(--accent); background:var(--surface-2); font-size:.9375rem; margin:12px 0; }
.legend { display:flex; gap:10px 20px; flex-wrap:wrap; margin-top:18px; font-size:.9375rem; }
.legend span { display:flex; gap:8px; align-items:center; }
.swatch { display:inline-block; width:15px; height:15px; border:1px solid #65727a; border-radius:3px; }
.note { margin-top:22px; padding-top:15px; border-top:1px solid var(--border); color:var(--text-muted); font-size:.9375rem; }
.sources { display:flex; flex-wrap:wrap; gap:0 14px; margin-top:8px; }
a { color:var(--accent); text-underline-offset:3px; overflow-wrap:anywhere; }
.sources a { display:inline-flex; align-items:center; min-height:44px; }
a:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.branch { margin-top:24px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.branch-head { padding:15px 18px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.branch-body { padding:18px; }
.options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.option + .option { padding-left:20px; border-left:1px solid var(--border); }
.icon { height:92px; width:120px; display:block; margin-bottom:12px; }
.timeline { margin:25px 0 0; padding:0; list-style:none; }
.event { display:grid; grid-template-columns:126px minmax(0,1fr); gap:22px; position:relative; padding:0 0 24px; }
.event:not(:last-child)::before { content:""; position:absolute; left:137px; top:19px; bottom:-4px; border-left:1px solid var(--border); }
.date { padding-top:2px; font-variant-numeric:tabular-nums; color:var(--text-muted); font-size:.9375rem; }
.event-body { padding-left:22px; position:relative; }
.event-body::before { content:""; position:absolute; left:-16px; top:5px; width:11px; height:11px; background:var(--surface); border:2px solid var(--accent); border-radius:50%; }
.kind { margin-bottom:3px; color:var(--accent); font-weight:600; font-size:.9375rem; }
.boundary { padding:16px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; }
@media(min-width:621px) { .grid h2 { min-height:2.8em; } .detail-label { min-height:3.2em; } }
@media(max-width:620px) { body { padding:16px; } .grid,.options { grid-template-columns:1fr; gap:24px; } .step + .step,.option + .option { padding-left:0; border-left:0; padding-top:22px; border-top:1px solid var(--border); } .event { grid-template-columns:1fr; gap:5px; padding-left:18px; } .event:not(:last-child)::before { left:5px; top:17px; } .event-body { padding-left:0; } .event-body::before { left:-18px; top:-23px; } .branch-head,.branch-body { padding:14px; } }