*{box-sizing:border-box}body{color:#203b4c;background:#f4f7fa;margin:0;font:14px/1.5 system-ui,-apple-system,sans-serif}button,select,input{font:inherit}button{cursor:pointer;color:#28485b;background:#fff;border:1px solid #cbd6dc;border-radius:7px;min-height:44px;padding:8px 12px}button:hover{background:#e7f1f8}button:focus-visible,select:focus-visible,input:focus-visible,#canvas:focus-visible{outline-offset:2px;outline:3px solid #4484ad}.viewer{flex-direction:column;height:100vh;min-height:600px;display:flex}header{background:#fff;border-bottom:1px solid #d8e1e7;flex:none;justify-content:space-between;align-items:center;height:76px;padding:14px 22px;display:flex}h1{margin:3px 0;font-size:20px;font-weight:550;line-height:1.1}.eyebrow{letter-spacing:.15em;color:#658496;font-size:11px;font-weight:600}.badge{border:1px solid #d5e1e9;border-radius:30px;padding:5px 10px;font-size:12px}.workspace{flex:1;grid-template-columns:minmax(0,1fr) 285px;min-height:0;display:grid}.stage{background:radial-gradient(at 40% 40%,#fff,#e6edf2);min-height:350px;position:relative}#canvas{outline-offset:-4px;position:absolute;inset:0}canvas{touch-action:none;display:block}.toolbar{gap:5px;display:flex;position:absolute;top:16px;left:16px}.toolbar button{padding:6px 10px;font-size:13px;box-shadow:0 2px 9px #233e4e08}.stage-note{pointer-events:none;color:#526b7c;font-size:12px;position:absolute;bottom:17px;left:20px;right:15px}.orientation{letter-spacing:.17em;color:#7c929f;pointer-events:none;font-size:10px;position:absolute;top:74px;left:20px}aside{background:#fff;border-left:1px solid #d8e1e7;overflow-y:auto}.tabs{z-index:1;background:#fff;border-bottom:1px solid #dfe7ed;gap:3px;padding:10px 12px;display:flex;position:sticky;top:0}.tabs button{background:0 0;border:0;flex:1;padding:6px}.tabs [aria-selected=true]{color:#173e59;background:#e8f1f7}section{padding:20px}section[hidden]{display:none}h2{letter-spacing:-.02em;margin:10px 0 12px;font-size:20px;font-weight:550;line-height:1.25}p{color:#58707f;margin:10px 0 18px}label{margin-bottom:8px;font-size:13px;font-weight:550;display:block}select{color:#28485b;background:#fff;border:1px solid #cbd6dc;border-radius:6px;width:100%;min-height:44px;margin-bottom:24px;padding:8px}#detail .eyebrow{font-size:10px}.counts{border-top:1px solid #e4ebef;border-bottom:1px solid #e4ebef;gap:15px;padding:20px 0;display:flex}.counts span{color:#69808f;flex:1;font-size:11px}.counts b{color:#254457;font-size:27px;font-weight:450;display:block}.muted{color:#7b8b97;font-size:12px}.layer{align-items:center;gap:10px;min-height:42px;margin:0;font-size:14px;font-weight:400;display:flex}.layer input{accent-color:#588cac;width:18px;height:18px}.slider{margin:24px 0}.slider input{accent-color:#588cac;width:100%;min-height:36px}.slider label{justify-content:space-between;display:flex}.slider output{color:#718694;font-size:12px;font-weight:400}.range-labels{color:#718694;justify-content:space-between;font-size:11px;display:flex}#all-layers,#reset-tables{width:100%;margin-top:16px}.relations{flex-wrap:wrap;gap:6px;display:flex}.relations button{min-height:38px;font-size:12px}dl{border-top:1px solid #e4ebef;padding-top:12px;font-size:12px}dt{color:#7b8b97}dd{color:#38586a;margin:0 0 10px}footer{color:#758995;background:#f9fbfc;border-top:1px solid #d8e1e7;justify-content:space-between;gap:8px;padding:10px 18px;font-size:11px;display:flex}#fallback{background:#fff;border:1px solid #cad8e2;border-radius:8px;max-width:400px;padding:20px;position:absolute;inset:95px 25px auto}#fallback[hidden]{display:none}@media (width<=720px){.viewer{height:auto;min-height:100vh}header{height:65px;padding:12px 16px}.workspace{flex-direction:column;display:flex}.stage{flex:none;height:390px;min-height:0}aside{border-top:1px solid #d8e1e7;border-left:0;overflow:visible}.tabs{position:static}section{min-height:295px;padding:18px 20px}.counts{max-width:340px}#layer-list{grid-template-columns:1fr 1fr;gap:2px 12px;display:grid}.layer{font-size:13px}.slider{margin:10px 0}footer{flex-direction:column;gap:2px}.toolbar{top:10px;left:10px}.toolbar button{padding:6px 9px}.orientation{top:64px;left:15px}.stage-note{font-size:11px;left:15px}select{margin-bottom:16px}}@media (width<=370px){.badge{display:none}.stage{height:340px}#layer-list{grid-template-columns:1fr}.toolbar button{padding:6px 8px;font-size:12px}}.focus-item{width:100%;margin-top:18px}.layer-group{border-bottom:1px solid #e0e8ed}.layer-group summary{cursor:pointer;color:#254457;min-height:48px;padding:13px 0;font-size:14px;font-weight:600}.layer-group .layer{padding:4px 0 4px 8px}.layer-group:last-child{border-bottom:0}.layer-group summary:focus-visible{outline-offset:2px;outline:3px solid #4484ad}@media (width<=720px){.viewer{height:875px;min-height:0}.workspace{flex:1;min-height:0}.stage{height:375px}aside{overscroll-behavior:contain;flex:1;min-height:0;overflow:auto}.tabs{position:sticky;top:0}#layer-list{display:block}section{min-height:0}.layer-group .layer{font-size:14px}.slider{margin:12px 0}.slider label{font-size:13px}.slider output{font-size:11px}.badge{display:none}}@media (width<=370px){.viewer{height:865px}.stage{height:350px}}.colour-key{pointer-events:none;color:#4f6472;flex-wrap:wrap;gap:7px 14px;font-size:11px;display:flex;position:absolute;bottom:44px;left:20px;right:15px}.colour-key span{align-items:center;gap:5px;display:inline-flex}.colour-key span:before{content:"";background:var(--key);border:1px solid #0001;border-radius:50%;width:8px;height:8px}.layer-group summary::marker{color:var(--system-colour)}.layer-group input{accent-color:var(--system-colour)}.system-label{align-items:center;gap:7px;display:inline-flex}.system-label:before{content:"";background:var(--system-colour);border-radius:50%;flex:none;width:9px;height:9px}@media (width<=720px){.colour-key{gap:5px 10px;font-size:10px;bottom:42px;left:15px;right:10px}}.gesture-toggle{z-index:3;isolation:isolate;background:0 0;border:0;border-radius:50%;place-items:center;width:44px;height:44px;min-height:44px;padding:0;display:grid;position:absolute;top:65px;right:10px}.gesture-toggle:before{content:"";z-index:-1;background:#fff;border:1px solid #cbd6dc;border-radius:50%;position:absolute;inset:5px;box-shadow:0 2px 8px #25445712}.gesture-toggle:hover{background:0 0}.gesture-toggle svg{display:block}.gesture-toggle[hidden]{display:none}.gesture-toggle[aria-pressed=true]{color:#fff}.gesture-toggle[aria-pressed=true]:before{background:#254f6b;border-color:#254f6b}.mobile-scroll body{touch-action:pan-y pinch-zoom;overflow:visible}.mobile-scroll .viewer{height:auto;min-height:0}.mobile-scroll .workspace{flex-direction:column;flex:none;min-height:0;display:flex}.mobile-scroll .stage{flex:none;height:375px}.mobile-scroll aside{overscroll-behavior:auto;border-top:1px solid #d8e1e7;border-left:0;flex:none;min-height:0;overflow:visible}.mobile-scroll .tabs{position:static}.mobile-scroll section{min-height:0}.mobile-scroll #layer-list{display:block}.mobile-scroll:not(.is-interacting) #canvas,.mobile-scroll:not(.is-interacting) canvas{pointer-events:none;touch-action:pan-y pinch-zoom!important}.mobile-scroll.is-interacting #canvas,.mobile-scroll.is-interacting canvas{pointer-events:auto;touch-action:none!important}.mobile-scroll .slider input{touch-action:pan-y}.mobile-scroll .badge{display:none}.toolbar{flex-wrap:wrap;max-width:calc(100% - 24px);right:12px}.toolbar button{min-width:38px}.toolbar #services-view{color:#356e70}.gesture-toggle{top:112px}@media (width<=480px){.toolbar{gap:4px}.toolbar button{padding:6px 8px;font-size:12px}.toolbar #reset span{display:none}.toolbar #reset{font-size:18px}}.mobile-scroll .toolbar{flex-wrap:nowrap;gap:4px;max-width:none;right:64px}.mobile-scroll .toolbar button{min-width:34px;padding:6px 8px;font-size:12px}.mobile-scroll .toolbar #reset span{display:none}.mobile-scroll .toolbar #reset{width:38px;font-size:18px}.mobile-scroll .toolbar #services-view{white-space:nowrap;position:absolute;top:51px;left:0}.mobile-scroll .gesture-toggle{top:10px;right:10px}.mobile-scroll .gesture-toggle[aria-pressed=false]:before{border-color:#6eabc8;box-shadow:0 0 10px #76b9d84d}.mobile-scroll .gesture-toggle[aria-pressed=false]:after{content:"";pointer-events:none;border:2px solid #6aaaca;border-radius:50%;animation:2.8s ease-out infinite lock-ripple;position:absolute;inset:5px}@keyframes lock-ripple{0%,15%{opacity:.55;transform:scale(1)}75%,to{opacity:0;transform:scale(1.55)}}@media (prefers-reduced-motion:reduce){.mobile-scroll .gesture-toggle:after{opacity:0;animation:none!important}}
