:root{--wwt-blue:#0075d5;--wwt-dark:#09243e;--wwt-navy:#071d32;--wwt-royal:#005fae;--ink:var(--cw-text);--soft:var(--cw-surface);--cw-brand:#09243e;--cw-depth:#041320;--cw-surface:#edf4fb;--cw-wash:#f7f9fc;--cw-line:#dae2ec;--cw-text:#101923;--cw-muted:#525b65;--cw-link:#006bb6;--cw-focus:#0075d5;--cw-hero-light:#a5cee9}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui;background:var(--soft);color:var(--ink)}main{max-width:1580px;margin:auto;padding:24px}header{background:var(--cw-brand);color:white;border-radius:16px;padding:28px 32px}h1{font-size:clamp(29px,3vw,43px);line-height:1.15;margin:10px 0;letter-spacing:-.03em}h1 em{font-style:normal;color:color-mix(in srgb,var(--wwt-blue) 40%,white)}header>p{margin:8px 0}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:700}.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:end;border-top:1px solid #ffffff30;padding-top:20px;margin-top:22px}label{font-size:13px;max-width:100%}select{display:block;margin-top:6px;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}select,button{font:inherit}select,.controls button{min-height:44px;border:1px solid #ffffff60;border-radius:7px;padding:10px;background:white;color:var(--cw-brand)}.check{display:flex;align-items:center;min-height:44px;gap:8px;max-width:200px}input{width:19px;height:19px}.controls button{cursor:pointer}.intro{display:flex;gap:24px;justify-content:space-between;align-items:start}.intro>p:first-child{font-weight:600;max-width:780px}.scope-note{font-size:13px;max-width:420px;color:#505969}.legend{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:12px;margin-bottom:20px}.key{padding:6px 12px;border-radius:5px;border:1px solid var(--wwt-blue)}.key.tool{background:color-mix(in srgb,var(--wwt-blue) 9%,white)}.key.context{background:var(--soft);border-style:dashed;border-color:#718097}.key.advisory{background:color-mix(in srgb,var(--cw-brand) 8%,white);border-color:var(--cw-brand)}#map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:46px;background:white;border:1px solid #d5deea;border-radius:16px;padding:26px;box-shadow:0 10px 35px #1d1e4808}.stack,.crosscut{position:relative;min-width:0}.layer{border:1px solid #d5deea;border-radius:10px;background:linear-gradient(110deg,var(--soft),white);margin-bottom:32px;padding:12px;box-shadow:0 3px 0 #e2e9f1}.layer:last-child{margin:0}.layer-title{display:flex;gap:10px;align-items:center;margin-bottom:10px}.layer-title>b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cw-brand);color:white;font-size:12px;flex-shrink:0}.layer-title h2{font-size:16px;margin:0;color:var(--cw-brand)}.layer-title p{font-size:11px;margin:0;color:#546176}.layer-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.layer:first-child .layer-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}.node{position:relative;z-index:3;display:flex;gap:10px;align-items:center;text-align:left;padding:13px 11px;min-height:103px;width:100%;border:1px solid color-mix(in srgb,var(--wwt-blue) 45%,white);border-radius:9px;background:color-mix(in srgb,var(--wwt-blue) 7%,white);color:var(--cw-brand);cursor:pointer;box-shadow:0 2px 8px #1d1e4808}.node.context{background:#f6f7fa;border:1px dashed #8995a9}.node.advisory{background:color-mix(in srgb,var(--cw-brand) 9%,white);border-color:var(--cw-brand)}.node svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.5;fill:none;flex-shrink:0}.node-copy{display:flex;flex-direction:column;min-width:0}.node strong{font-size:14px;line-height:1.25;font-weight:700}.node-copy>span{font-size:11px;color:#52627a;margin-top:6px}.node .type{text-transform:uppercase;letter-spacing:.06em;font-size:10px;margin-bottom:6px;color:#5d687b}.node .example{font-size:10px;margin-top:7px;color:var(--cw-brand)}.node[aria-pressed=true]{outline:3px solid var(--wwt-blue);outline-offset:2px}.node.in-flow{box-shadow:0 0 0 2px color-mix(in srgb,var(--wwt-blue) 45%,white)}.node.muted{box-shadow:none;background:white;border-color:#bac4d2}.node.baseline-out{box-shadow:none;background:#f6f7fa;border-style:dashed}.scope-tag{font-size:10px;margin-top:5px;font-weight:600}.node:hover,.node:focus-visible{opacity:1}.crosscut{display:flex;flex-direction:column;gap:24px;padding-top:8px}.crosscut>h2{font-size:17px;margin:0;color:var(--cw-brand)}.crosscut>p{font-size:12px;margin:-20px 0 4px}.crosscut .node{min-height:140px}.rail-note{border-left:3px solid var(--wwt-blue);padding:15px;background:var(--soft);font-size:13px;margin-top:auto}.rail-note p:last-child{font-size:12px}.caption{font-size:13px;color:#526176}.inspector{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;background:var(--cw-brand);color:white;border-radius:12px;padding:28px;margin:24px 0}.inspector h2{font-size:24px;margin:10px 0}.inspector h3{font-size:13px;color:#b7dafa}.inspector p{font-size:14px}.inspector .note{font-size:12px;color:#c6cfdf}.panel{padding:16px 24px;background:white;border:1px solid #d5deea;border-radius:10px;margin:15px 0}summary{cursor:pointer;font-weight:650;min-height:44px;padding:10px 0;color:var(--cw-brand)}.comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.comparison h2{font-size:19px}a{color:var(--cw-brand)}footer{padding:25px 0;font-size:13px}#wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}.wire{fill:none;stroke:var(--wwt-blue);stroke-width:1.6;stroke-dasharray:4 4;opacity:.75}.wire.aiops{stroke:var(--cw-brand)}.wire.assurance,.wire.cost,.wire.security{stroke:#6d7890}.wire-dot{fill:white;stroke:var(--wwt-blue);stroke-width:1.4}:focus-visible{outline:3px solid #ad5100!important;outline-offset:3px}p,li,small,strong{overflow-wrap:anywhere}[hidden]{display:none!important}
@media(max-width:1200px){main{padding:18px}#map{grid-template-columns:minmax(0,1fr) 205px;gap:26px;padding:18px}.layer-nodes{gap:14px}.node{padding:11px 8px;gap:6px}.node svg{width:22px}.node strong{font-size:13px}.node .type{font-size:9px}}
@media(max-width:950px){#map{grid-template-columns:1fr}.crosscut{display:grid;grid-template-columns:1fr 1fr}.crosscut>h2,.crosscut>p,.rail-note{grid-column:1/-1}.crosscut .node{min-height:110px}.inspector{grid-template-columns:1fr 1fr}.inspector>div:first-child{grid-column:1/-1}#wires{display:none}.intro{display:block}.scope-note{max-width:none}.comparison{grid-template-columns:1fr}}
@media(max-width:600px){header{padding:24px 20px}.controls{display:grid;grid-template-columns:1fr 1fr}.controls label:not(.check){grid-column:1/-1}.controls select{width:100%}main{padding:12px}#map{padding:14px}.layer-nodes,.layer:first-child .layer-nodes{grid-template-columns:1fr}.layer{padding:12px;margin-bottom:24px}.node{min-height:89px;padding:14px;gap:15px}.node svg{width:30px}.node strong{font-size:16px}.node-copy>span{font-size:13px}.node .type{font-size:10px}.crosscut{grid-template-columns:1fr}.inspector{grid-template-columns:1fr;padding:23px}.inspector>div:first-child{grid-column:auto}.legend{font-size:11px}.panel{padding:12px 18px}}
@media print{body{background:white}main{max-width:none;padding:0}header{background:white;color:var(--ink);padding:0}header em{color:var(--cw-brand)}.controls,footer,#wires{display:none!important}#map{display:block;padding:0;border:0}.layer{break-inside:avoid}.node{opacity:1!important;box-shadow:none!important}.crosscut{display:grid;grid-template-columns:1fr 1fr}.crosscut>h2,.crosscut>p,.rail-note{grid-column:1/-1}.inspector{background:white;color:var(--ink);border:1px solid #d5deea}.inspector h3,.inspector .note{color:var(--ink)}.panel{break-inside:auto}#print-objects{display:block!important}#print-objects article{break-inside:avoid;border-top:1px solid #d5deea;margin-top:16px}h2,h3{break-after:avoid}}

/* Interface exploration uses the same palette and stage geometry as the architecture. */
.jump{color:white;min-height:44px;display:inline-flex;align-items:center;font-size:13px;text-underline-offset:4px}
.handoff-link{cursor:pointer;border:0;border-bottom:1px solid color-mix(in srgb,var(--wwt-blue) 30%,white);background:none;color:var(--cw-brand);text-align:left;min-height:44px;padding:9px 2px;line-height:1.5;width:100%;overflow-wrap:anywhere}
.inspector .handoff-link{color:white;border-color:#ffffff40;font-size:13px}.inspector ul{padding-left:18px}
.handoff-panel,.choice-panel{border:1px solid color-mix(in srgb,var(--wwt-blue) 25%,white);border-radius:12px;background:white;padding:28px;margin:24px 0;scroll-margin-top:20px}
.handoff-panel{border-top:4px solid var(--wwt-blue)}.handoff-panel h2,.choice-panel h2{color:var(--cw-brand);font-size:clamp(23px,2.5vw,30px);line-height:1.2;margin:10px 0}
.handoff-grid,.pattern-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}.handoff-grid h3,.pattern-grid h3{font-size:14px;color:var(--cw-brand);margin-bottom:4px}.handoff-grid p,.pattern-grid p{font-size:14px;margin-top:4px}
.authority-note{border-left:3px solid var(--cw-brand);background:var(--soft);padding:16px;font-size:14px}
#return-handoff{padding:10px 16px;min-height:44px;border:1px solid var(--wwt-blue);background:white;color:var(--cw-brand);border-radius:6px;cursor:pointer}
.pattern-controls{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.pattern-controls button{cursor:pointer;border:1px solid var(--wwt-blue);border-radius:24px;padding:10px 18px;min-height:44px;color:var(--cw-brand);background:white}.pattern-controls button[aria-pressed=true]{background:var(--cw-brand);color:white;border-color:var(--cw-brand)}
#pattern-detail{background:var(--soft);border:1px solid #d5deea;border-radius:10px;padding:24px}#pattern-title{font-size:20px;margin:0;color:var(--cw-brand)}#pattern-route{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0;margin:24px 0}#pattern-route li{position:relative;border:1px solid color-mix(in srgb,var(--wwt-blue) 35%,white);border-radius:9px;padding:18px;background:white;font-weight:600;color:var(--cw-brand);font-size:15px}#pattern-route li:not(:last-child):after{content:'→';position:absolute;right:-24px;top:50%;transform:translateY(-50%);color:var(--wwt-blue);font-weight:400}.selected-wire{stroke-width:3;opacity:1}
@media(max-width:600px){.handoff-panel,.choice-panel{padding:20px}.handoff-grid,.pattern-grid{grid-template-columns:1fr;gap:8px}#pattern-detail{padding:18px}#pattern-route{grid-template-columns:1fr;gap:25px}#pattern-route li:not(:last-child):after{content:'↓';right:auto;left:50%;top:auto;bottom:-25px;transform:none}.jump{grid-column:1/-1}.pattern-controls button{flex:1 1 40%;font-size:14px}}
@media print{.jump,.pattern-controls,#handoff-panel,#pattern-detail,#return-map,.handoff-link{display:none!important}#print-handoffs,#print-patterns{display:block!important}#print-handoffs article,#print-patterns article{break-inside:avoid;border-top:1px solid #d5deea;margin-top:16px}#print-handoffs{break-before:page}#print-patterns{break-before:page}.choice-panel{padding:0;border:0}.inspector #object-links{display:none}.choice-panel>.caption{display:none}}