/* WWT-inspired visual hierarchy. Palette indicates object type, never readiness. */
:root{--navy:#202047;--ink:#202544;--blue:#007fbd;--muted:#57647a;--line:#dce1eb;--paper:#f5f7fb;--teal:#277894}
header{background:white;color:var(--ink);border-bottom:1px solid #e2e6ee;padding:15px 28px}.brand{color:#202047;font-weight:750}.brand small{color:#66758b;letter-spacing:.13em}.mark{border:0;border-radius:0;border-left:4px solid #e72f42;background:#eaf4fc;color:#056ba5;width:38px;height:34px}.header-note{color:#69748b}header .quiet{color:#263555;border-color:#ccd5e2}
nav{background:#202047;border:0;gap:5px;padding:0 24px;z-index:6}nav button{background:transparent;color:#dce5f0;padding:12px 18px;font-weight:550}nav button:hover{background:#30355a;color:white}nav [aria-current=page]{background:#30355a;color:white;border-bottom:3px solid #39b6f3}
main{max-width:1720px;padding-top:25px}.eyebrow{color:#006caa}.view-heading h1{color:#202047;letter-spacing:-.035em}#architecture .view-heading h1{font-size:2rem}.view-heading .text-link{color:#5f6983}.language-note strong{color:#30385a}
#architecture .scenario-controls{background:white;border:1px solid #dde4ee;border-radius:6px;margin-bottom:8px}.scenario-controls label{color:#353d61}.scenario-controls p{color:#5c6881}#architecture .overlay-controls{background:transparent;border:0;border-radius:0;padding:6px 0 12px;margin-bottom:6px;grid-template-columns:1fr 2fr}#overlay-heading{font-size:.875rem;color:#65718a;font-weight:550}.overlay-controls label{color:#485472}.overlay-controls select{background:white;font-weight:500}#overlay-summary{padding:0 12px;border-left:3px solid #7b6ea5}
.workbench{gap:24px}.diagram-map{border:1px solid #d5deea;border-radius:8px;padding:18px 20px;background:white;box-shadow:0 7px 25px #20204706}.diagram-key{color:#5b6880;letter-spacing:.01em}.tool-key{background:#e7f3fc;border-color:#007bb9}.reference-key{background:#f3f5f9;border-color:#76849a}.diagram-key button{border:0;background:#f0f4f9;color:#36516f;border-radius:4px}.trace-story{background:#eef4fa;border-left:3px solid #1689bf;border-radius:0 5px 5px 0}.trace-story p{color:#425770}.trace-story .eyebrow{color:#26688e}.trace-buttons button{background:white;border-color:#b9cee0}.trace-buttons button:disabled{background:transparent}
.architecture-layer{border:1px solid #d1dce9;padding:0 12px 0 0;gap:14px;border-radius:5px;box-shadow:0 4px 0 #dfe6ef;margin-bottom:23px;overflow:visible}.architecture-layer::after{background:#bccbda;height:3px;bottom:-4px}.layer-label{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:14px;border-radius:4px 0 0 4px;background:#273557;position:relative;z-index:2}.layer-label>span{color:#91c7e9;font-size:.75rem;margin-bottom:8px}.layer-label h2{color:white;font-size:.9375rem;line-height:1.3}.layer-label p{color:#d1dbe8;font-size:.75rem}.layer-content{padding:12px 0}.policy-layer .layer-label{background:#3a4668}.execution-layer .layer-label{background:#124a74}.observation-layer .layer-label{background:#35637e}.security-layer .layer-label{background:#59677c}.front-layer{background:#edf3f9}.policy-layer{background:#f1f3f7}.execution-layer{background:#eaf2fb}.observation-layer{background:#f0f5fa}.security-layer{background:#f5f6f9;border:1px dashed #9caabd;box-shadow:none}.security-layer::after{display:none}
.stack-canvas .node,.stack-canvas .runtime-box{border-radius:4px;box-shadow:0 2px 4px #23395608;background:white;border-color:#b4c5d9;color:#20254b}.stack-canvas .node:hover{background:#f0f8ff;border-color:#007fbd}.stack-canvas .node[aria-pressed=true]{background:#e6f3ff;border-color:#1689c4;box-shadow:inset 3px 0 #0084c1}.stack-canvas .node[aria-pressed=true] strong,.stack-canvas .node[aria-pressed=true] small{color:#153f65}.stack-canvas .node small{color:#596a81}.object-symbol{color:#077eb7;stroke-width:1.5}.stack-lanes section{border-radius:4px;background:#edf0f4;border-color:#c1cad6}.stack-lanes .cloud-stack{background:#deecfa;border-color:#94b9d9}.stack-lane-title h3{color:#243b5c}.stack-lane-title .stage-label,.cloud-stack .stack-lane-title .stage-label{color:#365e80;font-size:.75rem;font-weight:650;letter-spacing:.07em}.stack-canvas .cloud-stack .runtime-box{background:#123e63;color:white;border-color:#123e63;box-shadow:none}.stack-canvas .cloud-stack .runtime-box span{color:#d3e7f6}.cloud-stack .runtime-box .object-symbol{color:#7acaff}.retained-stack .object-symbol{color:#617684}.stack-canvas .cssp-service{background:white;border-color:#a2b1c2;color:#34435f;border-radius:4px}.cssp-service .object-symbol{color:#667491}
.trace-current{outline:3px solid #007fbd!important;outline-offset:3px}.trace-visited{border-color:#5d9fcc!important}.wire{opacity:.8}.inspector{background:#f8faff;border:1px solid #d8dfeb;border-top:3px solid #252650;border-radius:6px;box-shadow:none;padding:22px;top:73px}.inspector:before{color:#666b88;letter-spacing:.12em}.inspector .pill{border:0;background:#e9edf5;color:#555d7b;font-size:.7rem}.inspector h2{font-size:1.4rem;color:#252650;line-height:1.3}.inspector .detail-section{border-color:#dce3ef}.inspector .detail-section h3{color:#3e4b69;font-size:.8125rem;letter-spacing:.01em}.inspector p,.handoff-fields dd{color:#53617a}.inspector .caution{background:#eef2f8;border-left:2px solid #8b99b2}.inspector .caution h3{color:#485474}.inspector .caution p{color:#53617a}.inspector select{border-color:#c0cddd;background:white}.handoff-fields dt{color:#344b6b}.handoff-exercise{background:#edf2f8}.closing-note{background:transparent;border-top:1px solid #dbe3ed;color:#52617a;padding:20px 0}.closing-note strong{color:#30385b}footer{background:#eaf0f7;color:#596880}
@media(max-width:1200px){.layer-label{padding:12px 10px}.workbench{gap:18px}.diagram-map{padding:14px}}
@media(max-width:1000px){.inspector{position:static;max-height:none}}
@media(max-width:600px){header{padding:12px 16px}nav{padding:0 8px}nav button{padding:10px}#architecture .overlay-controls{grid-template-columns:1fr}.architecture-layer{grid-template-columns:1fr;padding:0 10px 10px;gap:0}.layer-label{margin:0 -10px;padding:12px;display:grid;grid-template-columns:25px 1fr;column-gap:10px;border-radius:4px 4px 0 0}.layer-label>span{grid-row:1/3;margin:0}.layer-label h2{margin:0 0 3px}.layer-label p{grid-column:2}.layer-content{padding:12px 0 0}.inspector{padding:18px}#architecture .view-heading h1{font-size:1.7rem}}
@media print{header{background:white;color:#202047}.layer-label{background:#edf3f9!important}.layer-label h2{color:#202047}.layer-label p,.layer-label>span{color:#53617a}.stack-canvas .cloud-stack .runtime-box{background:#edf3f9;color:#202047}.stack-canvas .cloud-stack .runtime-box span{color:#53617a}.cloud-stack .runtime-box .object-symbol{color:#0878b9}.inspector{position:static;max-height:none}.architecture-layer{box-shadow:none}}