:root{--bg:#faf7ef;--ink:#233c32;--green:#35674b;--muted:#5c6d60;--line:#d8dfcf;--white:#fffef9;--tint:#edf1e2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,sans-serif}a{color:var(--green);text-underline-offset:4px}button,select{font:inherit;color:inherit}button{cursor:pointer;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:11px 16px;background:var(--white);text-align:left}button:hover{border-color:var(--green)}button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}:focus-visible{outline:3px solid #ab6b27;outline-offset:4px}.skip{position:absolute;top:-80px;background:white;padding:12px}.skip:focus{top:8px}header,footer{max-width:1180px;margin:auto;padding:26px 28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}header{border-bottom:1px solid var(--line)}header a,footer a{text-decoration:none;font-size:13px}.brand{font-weight:800;letter-spacing:.08em}.brand span{font-weight:400;color:var(--muted)}nav{display:flex;gap:24px}main{max-width:1120px;padding:0 28px;margin:auto}.intro{padding:72px 0 50px;max-width:820px}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:700;color:var(--green)}h1{font-size:clamp(42px,7vw,80px);line-height:1.08;letter-spacing:-.055em;margin:22px 0}h1 span{color:var(--green)}.intro>p:not(.eyebrow){font-size:19px;max-width:690px;color:var(--muted)}h2{font-size:clamp(27px,4vw,38px);letter-spacing:-.035em;line-height:1.2;margin:12px 0 22px}h3{line-height:1.3;font-size:21px}.badges,.filters,.stages,.quiz [role=group]{display:flex;flex-wrap:wrap;gap:10px}.badges span{font-size:12px;border:1px solid var(--line);border-radius:30px;padding:7px 14px}.journey,.lab,.quiz{background:var(--tint);padding:30px;border:1px solid var(--line);border-radius:24px}section{margin-bottom:64px}.stages button{flex:1;min-width:155px}.route{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 16px}.route span{padding:12px 18px;background:var(--white);border:1px solid var(--line);border-radius:10px;font-weight:600}.route b{color:var(--green)}.muted{color:var(--muted)}.filters{margin:25px 0}.explorer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}#component-map{display:grid;grid-template-columns:1fr 1fr;gap:10px}#component-map button{min-height:91px;display:flex;flex-direction:column;justify-content:center;font-size:14px;font-weight:600}#component-map small{font-size:10px;opacity:.7;letter-spacing:.1em}#component-detail{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:30px;position:sticky;top:20px}#component-detail h3{font-size:30px;margin:14px 0}#component-detail .analogy{font-size:18px;color:var(--green)}.detail-label{font-size:10px;font-weight:800;letter-spacing:.12em;margin-bottom:0}.watch{border-left:3px solid #bd945e;padding-left:18px}.part-icon{width:66px;height:66px;display:grid;place-items:center;border:3px double var(--green);border-radius:14px;background:var(--tint);font-size:23px;font-weight:700}.lab label{display:block;margin-bottom:8px}select{width:100%;max-width:570px;padding:14px;border:1px solid var(--green);border-radius:10px;background:var(--white)}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.three article{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--white)}.three h3{margin-top:0}.sources{max-width:820px}.sources li{margin:10px 0}footer{border-top:1px solid var(--line)}#feedback{min-height:28px;font-weight:600}@media(max-width:680px){header,footer{padding:20px}.intro{padding-top:40px}main{padding:0 20px}.explorer-grid,.three{grid-template-columns:1fr}#component-detail{position:static;padding:24px}.journey,.lab,.quiz{padding:22px}.filters button{flex:1 1 42%;font-size:13px}nav{gap:14px}.route{gap:8px}.route span{padding:8px;font-size:13px}}
/* Layer colors connect each component to its place in the system. */
:root{--bg:#f5f7fb;--ink:#152b40;--green:#17677d;--muted:#526579;--line:#d5dfeb;--white:#fff;--tint:#eaf1f8}body{background:radial-gradient(ellipse at 90% 0%,#dcecf8 0,transparent 35%),var(--bg)}.intro h1 span{color:#176d85}.badges span{background:#ffffffb3}.journey{background:linear-gradient(125deg,#e8f2fa,#eef0fa)}.lab{background:#edf0fa}.quiz{background:#eaf3ef}.three article:nth-child(1){border-top:3px solid #277b9c}.three article:nth-child(2){border-top:3px solid #7054b2}.three article:nth-child(3){border-top:3px solid #ba741f}#explorer{--layer:#08738a;--wash:#e6f5f8;--edge:#98cbd5}#explorer[data-layer=server]{--layer:#285ebe;--wash:#eaf0fc;--edge:#aec1e9}#explorer[data-layer=fabric]{--layer:#7543a8;--wash:#f2ebfa;--edge:#cbb3e3}#explorer[data-layer=facility]{--layer:#975d0c;--wash:#fff3df;--edge:#e3c48f}.filters button[data-group=chip]{border-top:3px solid #08738a}.filters button[data-group=server]{border-top:3px solid #285ebe}.filters button[data-group=fabric]{border-top:3px solid #7543a8}.filters button[data-group=facility]{border-top:3px solid #975d0c}#explorer button[aria-pressed=true]{background:var(--wash);color:var(--layer);border-color:var(--layer)}#group-caption,#component-detail .eyebrow,#component-detail .analogy{color:var(--layer)}#component-map{gap:12px}#component-map button{padding:0;overflow:hidden;justify-content:start;border-radius:15px}#component-map button img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;display:block;border-bottom:1px solid var(--line)}#component-map button>span{padding:12px;display:block}#component-map small{display:block;margin-bottom:5px}#component-detail{border-color:var(--edge);padding:24px;border-top:4px solid var(--layer)}.component-figure{margin:0 0 22px;background:#f0f3f7;border-radius:14px;overflow:hidden}.component-figure img{display:block;width:100%;height:auto;aspect-ratio:1.35;object-fit:contain}.component-figure figcaption{padding:9px 12px;font-size:11px;color:#526579;border-top:1px solid #d5dfeb;background:var(--wash)}.watch{border-color:var(--layer)}@media(max-width:680px){#component-map{grid-template-columns:repeat(2,minmax(0,1fr))}#component-detail{padding:20px}.component-figure img{aspect-ratio:1.3}#component-map button{font-size:13px}}
@media(max-width:680px){#component-map{max-height:430px;overflow-y:auto;padding:4px;scrollbar-color:var(--layer) var(--wash)}#component-detail{scroll-margin-top:16px}}