:root{--paper:#f6f3eb;--ink:#18211f;--blue:#123fa6;--green:#53754d;--pale:#e9eee3;--line:#c9cec5;--soft:#69716c;--white:#fffdf8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}.topbar{height:76px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(246,243,235,.96)}.brand{display:flex;align-items:center;color:var(--blue);font-weight:900;letter-spacing:.14em}.brand b{display:grid;place-items:center;width:31px;height:31px;margin-right:10px;color:white;background:var(--blue)}.topbar nav{display:flex;gap:28px;font:11px monospace;text-transform:uppercase;letter-spacing:.08em}.back{padding:12px 15px;border:1px solid var(--blue);color:var(--blue);font:700 10px monospace}.guide{min-height:calc(100vh - 76px);display:grid;grid-template-columns:330px 1fr}.rail{border-right:1px solid var(--line);padding:48px 28px;background:#f0eee7}.railLabel,.overline{font:700 10px monospace;letter-spacing:.14em;color:var(--green)}.rail h1{font:400 45px/.95 Georgia,serif;letter-spacing:-.05em;margin:17px 0 18px}.railIntro{font:15px/1.55 Georgia,serif;color:#4d5751}.scenarioList{display:grid;gap:9px;margin-top:34px}.scenarioBtn{appearance:none;border:1px solid var(--line);background:transparent;text-align:left;padding:16px;cursor:pointer;color:var(--ink);display:grid;grid-template-columns:34px 1fr;gap:10px}.scenarioBtn span{font:700 10px monospace;color:var(--blue)}.scenarioBtn b{font:400 17px Georgia,serif}.scenarioBtn small{grid-column:2;font:11px Arial;color:var(--soft)}.scenarioBtn.active{background:var(--blue);color:white;border-color:var(--blue)}.scenarioBtn.active span,.scenarioBtn.active small{color:#dce5ff}.legend{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);font:11px/1.8 monospace}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}.legend .same{background:#8c948e}.legend .change{background:var(--green)}.content{padding:50px 5vw 70px;min-width:0}.contentHead{display:flex;justify-content:space-between;gap:30px;align-items:end}.contentHead h2{font:400 clamp(42px,5vw,72px)/.9 Georgia,serif;letter-spacing:-.055em;margin:13px 0 0}.contentHead p{max-width:430px;color:#56615a;font:15px/1.5 Georgia,serif}.phaseSwitch{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--blue);margin:36px 0 28px}.phaseBtn{appearance:none;border:0;border-right:1px solid var(--blue);background:transparent;padding:16px 12px;color:var(--blue);cursor:pointer;font:700 10px monospace;letter-spacing:.08em}.phaseBtn:last-child{border-right:0}.phaseBtn.active{background:var(--blue);color:white}.phaseNote{background:var(--pale);border-left:4px solid var(--green);padding:15px 18px;font:15px/1.5 Georgia,serif;margin-bottom:28px}.flowStage{background:var(--white);border:1px solid var(--line);padding:27px}.actors{display:grid;grid-template-columns:130px 1fr 130px;align-items:center;margin-bottom:18px}.actor{text-align:center}.actorIcon{width:72px;height:72px;border:2px solid var(--blue);border-radius:50%;display:grid;place-items:center;margin:auto;color:var(--blue);font-size:28px}.actor b{display:block;font:700 10px monospace;letter-spacing:.1em;color:var(--blue);margin-top:10px}.channel{text-align:center;font:10px monospace;color:var(--soft);border-bottom:1px dashed var(--line);padding-bottom:8px}.messages{display:grid;gap:9px}.message{display:grid;grid-template-columns:44px minmax(120px,.7fr) 42px minmax(210px,1.3fr) 88px;gap:12px;align-items:center;min-height:70px;border:1px solid var(--line);padding:10px 14px}.message.changed{background:var(--pale);border-color:#9bab91}.stepNo{font:700 11px monospace;color:var(--blue)}.job small,.algorithm small{display:block;font:700 8px monospace;letter-spacing:.1em;color:var(--soft);margin-bottom:5px}.job b{font:400 15px Georgia,serif}.direction{text-align:center;color:var(--blue);font-size:22px}.algorithm strong{font:700 13px monospace;color:var(--blue)}.tag{text-align:center;border:1px solid var(--line);padding:7px 5px;font:700 8px monospace;text-transform:uppercase}.changed .tag{border-color:var(--green);color:var(--green)}.explainGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.explain{border:1px solid var(--line);background:var(--white)}.explain summary{cursor:pointer;padding:17px 18px;color:var(--blue);font:700 13px Georgia,serif}.explain p{margin:0;padding:0 18px 18px;color:#4b5650;font:14px/1.6 Georgia,serif}.takeaway{margin-top:16px;background:#1b2924;color:white;padding:22px;display:grid;grid-template-columns:110px 1fr;gap:20px}.takeaway span{color:#cfe87b;font:700 9px monospace;letter-spacing:.12em}.takeaway p{margin:0;font:17px/1.45 Georgia,serif}.sources{margin-top:20px;font:11px/1.8 monospace;color:var(--soft)}.sources a{color:var(--blue);text-decoration:underline}.scenarioBtn:focus-visible,.phaseBtn:focus-visible,summary:focus-visible{outline:3px solid #97b1ff;outline-offset:2px}@media(max-width:900px){.guide{grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid var(--line)}.rail h1{font-size:38px}.scenarioList{grid-template-columns:repeat(3,1fr)}.contentHead{display:block}}@media(max-width:650px){.topbar nav{display:none}.guide{display:block}.rail{padding:34px 20px}.scenarioList{grid-template-columns:1fr}.content{padding:38px 20px}.contentHead h2{font-size:48px}.phaseSwitch{overflow:auto}.actors{grid-template-columns:86px 1fr 86px}.actorIcon{width:58px;height:58px}.message{grid-template-columns:28px 1fr 28px;gap:7px}.algorithm{grid-column:2}.tag{grid-column:2;justify-self:start}.explainGrid{grid-template-columns:1fr}.takeaway{grid-template-columns:1fr}}