/* Access control property-type pages (/services/access-control/<type>/, 13 pages).
   Loaded only by those pages (main.cam.ac), with cam-props.js. Everything is scoped under
   main.cam so nothing reaches the shared header, footer or mobile call bar.
   1. The access control overview's page CSS, unchanged (its teal .cam.ac layer included).
   2. State copies: a shape whose fill or stroke changes with a widget state comes as one
      copy per state (.msv), faded with opacity (.ms-off).
   3. The pages' own rules. Animations use only transform, opacity and stroke-dashoffset;
      keyframes the overview lacks are named ac-*. Page code prefixes: .of- .mp- .lf- .rl-
      .cw- .sg- .wa- .ht- (commercial), .at- .cc- .sf- .th- .rp- (residential). */

/* ---- 1. access control overview ---- */
/* Camera pages, shared rules. Everything is scoped under main.cam so nothing
   reaches the shared header, footer or mobile call bar. Animations use only
   transform, opacity, stroke-dashoffset and offset-distance. */
main.cam{display:block;background:#060910;color:#e8edf5;font-family:var(--sans)}
.cam a{color:#4d9eff}.cam a:hover{color:#8bbcff}
.cam .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.cam .m{font-family:var(--mono)}
.cam .sec{position:relative;padding:112px 0;overflow:hidden}
.cam .cam-hero{padding:calc(var(--nav-h) + 16px) 0 104px}
.cam .alt{background:#070b14;border-top:1px solid rgba(120,170,255,.12);border-bottom:1px solid rgba(120,170,255,.12)}
.cam .grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(77,158,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(77,158,255,.07) 1px,transparent 1px),linear-gradient(rgba(77,158,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(77,158,255,.032) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px;-webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 25%,transparent 85%);mask-image:radial-gradient(80% 70% at 50% 40%,#000 25%,transparent 85%)}
.cam .crumb{font-family:var(--mono);font-size:12px;line-height:19.2px;letter-spacing:.08em;color:#7d92b3;margin-bottom:22px;padding-top:4px}
.cam .crumb a{color:#8a95a8;padding:14px 6px;margin:0 -6px}.cam .crumb a:hover{color:#e8edf5}
.cam .kick{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#7d92b3}
.cam .cnt{border:1px solid rgba(120,170,255,.35);padding:2px 7px;color:#e8edf5}
.cam h1{margin:0;font-weight:900;letter-spacing:-.045em;line-height:.98;color:#e8edf5}
.cam .h2{margin:0;font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:#e8edf5}
.cam .cam-lead{margin:0;font-size:17px;line-height:1.65;color:#a3adbd}
.cam .c{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;background:rgba(9,14,24,.82);border:1px solid rgba(120,170,255,.14);border-radius:4px;color:#e8edf5;overflow:hidden;transition:transform .3s}
.cam .c::before,.cam .c::after{content:"";position:absolute;width:12px;height:12px;border-color:#4d9eff;border-style:solid;opacity:.55;pointer-events:none}
.cam .c::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.cam .c::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.cam a.c:hover,.cam .c.hv:hover{border-color:rgba(77,158,255,.6);background:rgba(12,20,36,.92);transform:translateY(-3px);color:#e8edf5}
.cam a.c:hover::before,.cam a.c:hover::after,.cam .c.hv:hover::before,.cam .c.hv:hover::after{width:28px;height:28px;opacity:1}
.cam .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#7d92b3;text-transform:uppercase}
.cam .t{margin:0;font-size:21px;font-weight:700;letter-spacing:-.015em;color:#e8edf5;line-height:1.25}
.cam .p{margin:0;font-size:15px;line-height:1.6;color:#a3adbd}
.cam .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4d9eff}
.cam a.go{display:inline-flex;align-items:center;min-height:44px}
.cam .p a{text-decoration:underline;text-underline-offset:2px}
.cam .cam-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:6px;font-weight:700;font-size:15px;line-height:1.2;transition:transform .2s}
.cam .cam-btn-p{background:#0060df;color:#fff;box-shadow:0 10px 30px -10px rgba(29,123,255,.7)}
.cam .cam-btn-p:hover{background:#1d7bff;color:#fff;transform:translateY(-2px)}
.cam .cam-btn-g{border:1px solid rgba(120,170,255,.3);color:#e8edf5;background:rgba(9,14,24,.6)}
.cam .cam-btn-g:hover{color:#fff;border-color:#4d9eff}
.cam .pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid rgba(120,170,255,.22);border-radius:999px;font-size:13px;font-weight:600;color:#c9d2e0;background:rgba(5,8,16,.5)}
.cam .pill i{width:6px;height:6px;border-radius:50%;background:#22c55e}
.cam .ill{stroke:#4d9eff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cam .dim{stroke:rgba(120,170,255,.35)}
.cam .lbl{font:600 10px var(--mono);fill:#8bbcff;letter-spacing:.08em}
.cam .lbl2{font:500 9.5px var(--mono);fill:#7d92b3;letter-spacing:.1em}
.cam .tog{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(120,170,255,.25);border-radius:5px;background:rgba(5,8,16,.6);color:#a9bddc;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.cam .tog:hover{border-color:#4d9eff;color:#fff}
.cam .tog.on{border-color:#4d9eff;background:rgba(29,123,255,.18);color:#fff}
.cam .tog.bad.on{border-color:#ff6b6b;background:rgba(255,107,107,.12);color:#ffb4b4}
.cam ul.lst{list-style:disc;margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.cam [hidden]{display:none!important}

@keyframes cam-flow{to{stroke-dashoffset:-48}}
.cam .flow{stroke-dasharray:6 6;animation:cam-flow 1.6s linear infinite}
.cam .flow-r{stroke-dasharray:3 9;animation:cam-flow 1.6s linear infinite reverse}
@keyframes cam-blink{0%,100%{opacity:1}50%{opacity:.15}}
.cam .blink{animation:cam-blink 1.1s step-end infinite}

.cam details.rfi{border-top:1px solid rgba(120,170,255,.14)}
.cam details.rfi summary{list-style:none;display:grid;grid-template-columns:90px minmax(0,1fr) 28px;align-items:center;gap:16px;min-height:76px;cursor:pointer;color:#e8edf5;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3;padding:8px 0}
.cam details.rfi summary::-webkit-details-marker{display:none}
.cam details.rfi .pl{width:28px;height:28px;border:1px solid rgba(120,170,255,.35);border-radius:4px;display:grid;place-items:center;color:#4d9eff;transition:transform .3s}
.cam details.rfi[open] .pl{transform:rotate(45deg)}
.cam .ans{margin:0 0 26px 106px;max-width:680px;font-size:15.5px}

/* Off-screen sections pause; reduced motion stops everything. */
.cam .paused,.cam .paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){
  .cam *,.cam *::before,.cam *::after{animation:none!important;transition:none!important}
}
@media (max-width:700px){
  .cam details.rfi summary{grid-template-columns:minmax(0,1fr) 28px;font-size:17px}
  .cam details.rfi summary .m{display:none}
  .cam .ans{margin-left:0}
  .cam .sec{padding:76px 0}
  .cam .cam-hero{padding:calc(var(--nav-h) + 16px) 0 72px}
}
/* Access control page: teal accent (#2dd4bf) next to the site blue. Scoped to main.cam.ac. */
.cam.ac .c::before,.cam.ac .c::after{border-color:#2dd4bf;opacity:.6}
.cam.ac a.c:hover,.cam.ac .c.hv:hover{border-color:rgba(45,212,191,.55)}
.cam.ac .tog{padding:0 14px;letter-spacing:.08em}
.cam.ac .tog:hover{border-color:#2dd4bf;color:#fff}
.cam.ac .tog.on{border-color:#2dd4bf;background:rgba(45,212,191,.14);color:#fff}
.cam.ac .tog.bad.on{border-color:#ff6b6b;background:rgba(255,107,107,.12);color:#ffb4b4}
.cam.ac .tl-c{stroke:#2dd4bf}
.cam.ac details.rfi summary{grid-template-columns:minmax(0,1fr) 28px}
.cam.ac details.rfi .pl{color:#2dd4bf}
.cam.ac .ans{margin:0 0 26px;max-width:720px}

/* hero door: state classes on svg.door; colour changes are opacity layers */
.cam .door .leaf{transform-box:view-box;transform-origin:234px 240px;transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.cam .door.open .leaf{transform:scaleX(.22)}
.cam .door .gap{opacity:0;transition:opacity .5s}
.cam .door.open .gap{opacity:1}
.cam .door .crd{transform-box:view-box;transform:translate(70px,60px);opacity:0;transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .3s}
.cam .door.card-in .crd{transform:translate(0,0);opacity:1}
.cam .door .led-g,.cam .door .led-r{opacity:0;transition:opacity .2s}
.cam .door.led-g .led-g,.cam .door.led-r .led-r{opacity:1}
.cam .door .strike-on{opacity:0;transition:opacity .25s}
.cam .door.rel .strike-on{opacity:1}
.cam .door .ct{fill:#0b1324;stroke:#8bbcff;transition:transform .25s}
.cam .door.open .ct.b{transform:translateX(-8px)}
.cam .door .alert{opacity:0;transition:opacity .25s}
.cam .door.al-held .alert.held,.cam .door.al-forced .alert.forced{opacity:1}
.cam .door .ring{transform-box:fill-box;transform-origin:center;animation:cam-ring 1s ease-out infinite}
@keyframes cam-ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.cam .door .hl{opacity:0;transition:opacity .3s}
.cam .door.p-reader .hl.reader,.cam .door.p-strike .hl.strike,.cam .door.p-contact .hl.contact,.cam .door.p-rex .hl.rex,.cam .door.p-ctrl .hl.ctrl{opacity:1}
.cam .door .pulse{stroke-dasharray:8 400;stroke-dashoffset:0;opacity:0}
.cam .door.led-g .pulse,.cam .door.led-r .pulse{opacity:1;animation:cam-pls .7s linear 1}
@keyframes cam-pls{from{stroke-dashoffset:0}to{stroke-dashoffset:-400}}
.cam .logl{display:grid;grid-template-columns:72px 90px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px dashed rgba(120,170,255,.14);font:500 12px var(--mono);color:#a9bddc}
.cam .logl.new{animation:cam-lin .4s ease both}
.cam .logl:is(:where(:not(.ms-p>*)):first-child,:where(.ms-p>*).ms-i1){border-top:0}
@keyframes cam-lin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cam .lg-ok{color:#8bf0b0}.cam .lg-bad{color:#ff8a8a}.cam .lg-warn{color:#f5c46b}
.cam .pchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid rgba(120,170,255,.2);border-radius:4px;background:transparent;color:#a9bddc;font:600 12.5px var(--sans);cursor:pointer}
.cam .pchip:hover{border-color:#2dd4bf;color:#fff}
.cam .pchip.on{border-color:#2dd4bf;color:#fff;background:rgba(45,212,191,.1)}
.cam .pchip b{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(45,212,191,.18);color:#5eead4;font:700 10px var(--mono)}

/* included drawings */
@keyframes cam-cellon{0%,10%{opacity:.15}20%,100%{opacity:1}}
.cam .cell-a{animation:cam-cellon 4s infinite}
@keyframes cam-scroll{0%{transform:translateY(0)}100%{transform:translateY(-36px)}}
.cam .scroll{animation:cam-scroll 3s linear infinite}
@keyframes cam-dswing{0%,20%{transform:scaleX(1)}35%,75%{transform:scaleX(.3)}90%,100%{transform:scaleX(1)}}
.cam .dswing{transform-box:fill-box;transform-origin:left center;animation:cam-dswing 4s ease-in-out infinite}
@keyframes cam-bang{0%,45%{opacity:0;transform:scale(.6)}50%,80%{opacity:1;transform:scale(1)}100%{opacity:0}}
.cam .bang{transform-box:fill-box;transform-origin:center;animation:cam-bang 4s infinite}
@keyframes cam-dash{to{stroke-dashoffset:-30}}
.cam .march{stroke-dasharray:4 4;animation:cam-dash 1.5s linear infinite}

/* credentials */
.cam .cred{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:120px;padding:16px 10px;border:1px solid rgba(120,170,255,.18);border-radius:6px;background:#070b14;color:#c9d2e0;font:700 15px var(--sans);cursor:pointer}
.cam .cred:hover{border-color:#2dd4bf;color:#fff}
.cam .cred.on{border-color:#2dd4bf;background:rgba(45,212,191,.1);color:#fff;box-shadow:0 0 0 4px rgba(45,212,191,.1)}
.cam .cred svg{width:64px;height:48px}
.cam .crow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px dashed rgba(120,170,255,.16)}
.cam .crow .rk{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7d92b3;padding-top:3px}
.cam .crow .rv{font-size:15.5px;line-height:1.55;color:#dfe6f2}
.cam .smeter{display:inline-grid;grid-template-columns:repeat(3,22px);gap:4px;vertical-align:middle;margin-right:10px}
.cam .smeter i{height:8px;border-radius:2px;background:rgba(120,170,255,.18)}
.cam .smeter i.on{background:#f5c46b}

/* power: magnet colour is two layers, the lock bar moves with transform */
.cam .pw .lockbar{transition:transform .5s}
.cam .pw.s-out .da .lockbar{transform:translateY(-18px)}
.cam .pw .mag-off{opacity:0;transition:opacity .3s}
.cam .pw .mag-on{transition:opacity .3s}
.cam .pw.s-out .da .mag-on{opacity:0}
.cam .pw.s-out .da .mag-off{opacity:1}
.cam .pw .bat{opacity:.25;transition:opacity .3s}
.cam .pw.s-battery .bat{opacity:1}
.cam .pw .bolt{opacity:1;transition:opacity .3s}
.cam .pw.s-out .bolt,.cam .pw.s-battery .bolt{opacity:.15}
.cam .pw .exit{opacity:0;transition:opacity .4s .2s}
.cam .pw.s-out .da .exit{opacity:1}
.cam .pw .inh{opacity:0;transition:opacity .4s .2s}
.cam .pw.s-out .db .inh{opacity:1}

/* problem and fix */
.cam .pf{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch}
.cam .pf .ar{display:flex;align-items:center;justify-content:center}
.cam .c.bad{background:rgba(255,107,107,.04);border-color:rgba(255,107,107,.22)}
.cam .c.good{background:rgba(74,222,128,.04);border-color:rgba(74,222,128,.25)}
.cam .mk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--sans);flex:none}
.cam .pt{display:flex;flex-direction:column;gap:8px;min-height:186px}
.cam .pt svg{width:100%;height:66px}
.cam .bchip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border:1px solid rgba(120,170,255,.2);border-radius:5px;background:rgba(5,8,16,.6);color:#e8edf5;font-weight:600;font-size:15px}
.cam .bchip:hover{border-color:#2dd4bf;color:#fff}
.cam .bchip i{width:7px;height:7px;border-radius:50%;background:#2dd4bf}
@media (max-width:760px){
  .cam .pf{grid-template-columns:minmax(0,1fr)}.cam .pf .ar{height:36px;transform:rotate(90deg)}.cam .pf-h{display:none!important}
  .cam .crow{grid-template-columns:minmax(0,1fr);gap:4px}
  .cam .logl{grid-template-columns:64px minmax(0,1fr)}.cam .logl span:is(:where(:not(.ms-p>*)):nth-child(2),:where(.ms-p>*).ms-i2){display:none}
}

/* ---- 2. state copies (cam-props.js) ---- */
.cam .ms-off{opacity:0!important}
.cam .msv{transition:opacity .35s}
/* mono labels keep their height when the web font arrives: the local fallback carries
   JetBrains Mono's vertical metrics (as cam-areas.css) */
@font-face{font-family:'JetBrains Mono Fallback';src:local('Menlo'),local('Consolas'),local('DejaVu Sans Mono'),local('Noto Mono'),local('Liberation Mono'),local('Courier New');ascent-override:102%;descent-override:30%;line-gap-override:0%}
main.cam{--mono:'JetBrains Mono','JetBrains Mono Fallback','Fira Code',monospace}

/* ---- 3. the pages' own rules ---- */
.cam .tl-c{stroke:#2dd4bf}
@keyframes ac-tap{0%,15%{transform:translateX(-30px);opacity:0}35%,65%{transform:none;opacity:1}85%,100%{transform:none;opacity:0}}
.cam .tap{animation:ac-tap 3.2s ease-in-out infinite}
@keyframes ac-ledg{0%,38%{opacity:0}42%,80%{opacity:1}84%,100%{opacity:0}}
.cam .ledg{animation:ac-ledg 3.2s infinite}
.cam .cell{animation:cam-cellon 4s infinite}
.cam .row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px dashed rgba(120,170,255,.16)}
.cam .row .rk{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7d92b3;padding-top:3px}
.cam .row .rv{font-size:15.5px;line-height:1.55;color:#dfe6f2}
.cam .bad{background:rgba(255,107,107,.04);border-color:rgba(255,107,107,.22)}
@media (max-width:760px){.cam .row{grid-template-columns:minmax(0,1fr);gap:4px}}
@media (max-width:760px){.cam details.rfi summary{font-size:17px}}
@media (max-width:760px){.cam .sec{padding:76px 0}}
.cam .stage{transition:opacity .45s}
.cam .stage.off{opacity:0}
.cam .cmp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px dashed rgba(120,170,255,.14);font-size:14px;color:#a9bddc}
.cam .cmp:is(:where(:not(.ms-p>*)):first-child,:where(.ms-p>*).ms-i1){border-top:0}
.cam .cmp b{font:600 12.5px var(--mono);letter-spacing:.04em;color:#e8edf5;text-align:right}
@keyframes ac-ringk{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.cam .rk2{transform-box:fill-box;transform-origin:center;animation:ac-ringk 1.4s ease-out infinite}
@keyframes ac-boxin{0%,20%{transform:translateX(0)}60%,100%{transform:translateX(26px)}}
.cam .boxmv{animation:ac-boxin 3s ease-in-out infinite alternate}
@keyframes ac-slideoff{0%,30%{transform:translateX(0)}60%,100%{transform:translateX(-12px)}}
.cam .knob{transform-box:fill-box;animation:ac-slideoff 2.4s ease-in-out infinite alternate}
.cam .sw2{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.cam .step{display:flex;flex-direction:column;gap:10px;padding:24px;border-top:2px solid rgba(45,212,191,.5);background:rgba(9,14,24,.6)}
.cam .step .sn{font:700 13px var(--mono);letter-spacing:.14em;color:#2dd4bf}
@keyframes ac-sweep{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-40}}
.cam .drow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px dashed rgba(120,170,255,.16)}
.cam .drow:is(:where(:not(.ms-p>*)):first-child,:where(.ms-p>*).ms-i1){border-top:0}
.cam .drow .dn{font-size:15px;font-weight:600;color:#e8edf5}
.cam .drow .dn small{display:block;font:500 11px var(--mono);letter-spacing:.06em;color:#7d92b3;margin-top:3px}
.cam .st{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 10px;border-radius:3px;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cam .st.st-u{background:rgba(45,212,191,.16);color:#5eead4;border:1px solid rgba(45,212,191,.5)}
.cam .st.st-c{background:rgba(77,158,255,.14);color:#8bbcff;border:1px solid rgba(77,158,255,.45)}
.cam .st.st-r{background:rgba(245,196,107,.14);color:#f5c46b;border:1px solid rgba(245,196,107,.45)}
.cam .st.st-l{background:rgba(255,107,107,.12);color:#ff9b9b;border:1px solid rgba(255,107,107,.45)}
@keyframes ac-walk{0%{transform:translateX(-40px)}100%{transform:translateX(40px)}}
.cam .walk{animation:ac-walk 3.4s ease-in-out infinite alternate}
@keyframes ac-scan{0%{transform:translateY(0)}100%{transform:translateY(250px)}}
@media (max-width:760px){.cam .cmp{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.cam .cmp b{text-align:left}}
.cam .sched{border:1px solid rgba(120,170,255,.16);border-radius:4px;background:rgba(5,8,16,.55);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.cam .shead{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid rgba(120,170,255,.16);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7d92b3}
.cam .srow{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;padding:22px 20px;border-bottom:1px solid rgba(120,170,255,.1)}
.cam .srow:hover{background:rgba(29,123,255,.05)}
.cam .sno{font-size:11px;letter-spacing:.12em;color:#4d9eff;padding-top:4px}
.cam .stag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid rgba(120,170,255,.28);border-radius:3px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8bbcff}
.cam .tc{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid rgba(120,170,255,.14);border-radius:4px;background:rgba(9,14,24,.7);color:#e8edf5;min-height:120px;transition:transform .25s}
.cam .tc svg{width:100%;height:44px}
.cam .tc .tt2{font-size:15px;font-weight:700;letter-spacing:-.01em;color:#e8edf5}
.cam .tc .go{margin-top:auto;font-size:10.5px}
.cam a.tc:hover{border-color:rgba(77,158,255,.6);background:rgba(12,20,36,.92);transform:translateY(-2px)}
.cam .tc.here{border-style:dashed;border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.04)}
.cam .big{font:800 44px/1 var(--sans);letter-spacing:-.03em}
@media (max-width:560px){.cam .srow{grid-template-columns:1fr;gap:8px}}
@keyframes ac-conceal{0%,25%{transform:translate(0,0);opacity:1}65%{transform:translate(40px,34px);opacity:1}80%,100%{transform:translate(40px,34px);opacity:0}}
@keyframes ac-truck{0%,10%{transform:translateX(90px)}55%,100%{transform:translateX(0)}}
.cam .truck{animation:ac-truck 6s ease-in-out infinite alternate}
@keyframes ac-steam{0%{transform:translateY(0);opacity:0}30%{opacity:.7}100%{transform:translateY(-18px);opacity:0}}
@keyframes ac-bill{0%,30%{transform:translate(0,0)}70%,100%{transform:translate(-8px,-30px)}}
.cam .nite{fill:rgba(2,4,8,0);pointer-events:none}
.cam .nite.on{fill:rgba(2,4,8,.85)}
@keyframes ac-drvin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ac-prog{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
.cam .prog{transform-box:fill-box;transform-origin:left;animation:ac-prog 2.6s ease-in-out infinite}
.cam a.tc:hover{border-color:rgba(45,212,191,.6)}
.cam .tc.here{border-color:rgba(45,212,191,.45);background:rgba(45,212,191,.05)}
.cam .sno{color:#2dd4bf}
.cam .stag{border-color:rgba(45,212,191,.35);color:#5eead4}
.cam .srow:hover{background:rgba(45,212,191,.05)}
.cam .at-path{fill:none;stroke-width:2.5;stroke-dasharray:6 6;animation:cam-flow 1.6s linear infinite}
.cam .at-d .at-mk{fill:#111a2a;stroke:#3a4a66;stroke-width:1.5}
.cam .at-d.ok .at-mk{fill:#4ade80;stroke:#4ade80}
.cam .at-d.no .at-mk{fill:#ff6b6b;stroke:#ff6b6b}
.cam .at-d .at-ok,.cam .at-d .at-no{opacity:0;transition:opacity .3s}
.cam .at-d.ok .at-ok,.cam .at-d.no .at-no{opacity:1}
@keyframes ac-atring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.cam .at-ring{transform-box:fill-box;transform-origin:center;animation:ac-atring 1.2s ease-out infinite}
.cam .at-led{fill:#ff6b6b}
.cam .at-led.on{fill:#4ade80}
.cam .at-fl .at-btn{fill:#111a2a;stroke:#3a4a66;stroke-width:1.5}
.cam .at-fl.on .at-btn{fill:rgba(45,212,191,.22);stroke:#2dd4bf}
.cam .at-bt{font:700 10px var(--mono);fill:#5d6f8f;text-anchor:middle}
.cam .at-fl.on .at-bt{fill:#e8edf5}
.cam .at-w{fill:none;stroke:rgba(120,170,255,.18);stroke-width:1.5}
.cam .at-fl.on:not(.ms-off) .at-w{stroke:#2dd4bf;stroke-dasharray:5 5;animation:cam-flow 1.6s linear infinite}
.cam .at-rl{fill:#111a2a;stroke:#3a4a66}
.cam .at-fl.on .at-rl{fill:#2dd4bf;stroke:#2dd4bf}
.cam .at-fr{fill:rgba(120,170,255,.03);stroke:rgba(120,170,255,.2)}
.cam .at-fl.on .at-fr{fill:rgba(45,212,191,.12);stroke:rgba(45,212,191,.6)}
.cam .at-ft{font:600 10px var(--mono);letter-spacing:.08em;fill:#5d6f8f}
.cam .at-fl.on .at-ft{fill:#cfe0ff}
.cam .at-lk,.cam .at-ck{transition:opacity .3s}
.cam .at-fl .at-ck{opacity:0}
.cam .at-fl.on .at-ck{opacity:1}
.cam .at-fl.on .at-lk{opacity:0}
.cam .cw-z{fill:rgba(45,212,191,0)}
.cam .cw-z.on{fill:rgba(45,212,191,.09)}
.cam .st.cw-na{background:transparent;color:#5d6f8f;border:1px dashed rgba(120,170,255,.22)}
.cam .cw-flowg{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1.25fr);align-items:stretch}
.cam .cw-col{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid rgba(120,170,255,.16);border-radius:5px;background:#070b14;min-width:0}
.cam .cw-ar{display:flex;align-items:center;justify-content:center}
@media (max-width:900px){.cam .cw-flowg{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.cam .cw-ar{height:40px}}
@media (max-width:900px){.cam .cw-ar svg{transform:rotate(90deg)}}
.cam .cc-path{fill:none;stroke-width:2.5;stroke-dasharray:6 6;animation:cam-flow 1.6s linear infinite}
.cam .cc-d .cc-mk{fill:#111a2a;stroke:#3a4a66;stroke-width:1.5}
.cam .cc-d.ok .cc-mk{fill:#4ade80;stroke:#4ade80}
.cam .cc-d.no .cc-mk{fill:#ff6b6b;stroke:#ff6b6b}
.cam .cc-d .cc-ok,.cam .cc-d .cc-no{opacity:0;transition:opacity .3s}
.cam .cc-d.ok .cc-ok,.cam .cc-d.no .cc-no{opacity:1}
.cam .cc-rs .cc-x1,.cam .cc-rs .cc-x2,.cam .cc-rs .cc-x3{transition:opacity .45s}
.cam .cc-rs .cc-x2,.cam .cc-rs .cc-x3{opacity:.16}
.cam .cc-rs.n2 .cc-x2,.cam .cc-rs.n3 .cc-x2,.cam .cc-rs.n3 .cc-x3{opacity:1}
.cam .cc-ln{fill:none;stroke:#2dd4bf;stroke-width:1.5}
.cam .cc-dv{fill:#0b1324;stroke:#8bbcff;stroke-width:1.2}
.cam .cc-dt{font:600 9.5px var(--mono);letter-spacing:.06em;fill:#cfe0ff;text-anchor:middle}
.cam .cc-new{opacity:0;transition:opacity .3s}
.cam .cc-rs.n1 .cc-x1 .cc-new,.cam .cc-rs.n2 .cc-x2 .cc-new,.cam .cc-rs.n3 .cc-x3 .cc-new{opacity:1}
.cam .cc-rs.n1 .cc-x1 .cc-dv,.cam .cc-rs.n2 .cc-x2 .cc-dv,.cam .cc-rs.n3 .cc-x3 .cc-dv{stroke:#2dd4bf;fill:rgba(45,212,191,.12)}
.cam .cc-sheet{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border:1px solid rgba(120,170,255,.16);border-radius:4px;background:#070b14}
.cam .cc-sheet .row{grid-template-columns:120px minmax(0,1fr)}
.cam .cc-sheet .row .rv{font-size:14.5px}
@media (max-width:760px){.cam .cc-sheet .row{grid-template-columns:minmax(0,1fr)}}
.cam .ht-ring{transform-box:fill-box;transform-origin:center;animation:cam-ring 1.2s ease-out infinite}
.cam .ht-con{display:flex;flex-direction:column;border:1px solid rgba(120,170,255,.18);border-radius:5px;background:#070b14;min-width:0}
.cam .ht-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:12px 18px;border-bottom:1px solid rgba(120,170,255,.14)}
.cam .ht-act{display:flex;flex-direction:column;gap:8px;padding:16px 18px 10px}
.cam .ht-big{font:800 22px/1.2 var(--sans);letter-spacing:-.02em;color:#e8edf5;min-height:27px}
.cam .ht-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px;border-top:1px solid rgba(120,170,255,.14)}
.cam .st.ht-na{background:transparent;color:#5d6f8f;border:1px dashed rgba(120,170,255,.22)}
@keyframes ac-httap{0%,12%{transform:translateX(-28px);opacity:.5}38%,100%{transform:none;opacity:1}}
.cam .ht-tap{animation:ac-httap 3.2s ease-in-out infinite}
.cam .lf-wr{fill:rgba(45,212,191,0)}
.cam .lf-wr.on{fill:rgba(45,212,191,.09)}
.cam .lf-box{transform-box:view-box;transition:transform 1.1s cubic-bezier(.3,.7,.3,1)}
.cam .lf-box.away{transform:translate(224px,-2px)}
.cam .lf-dot{fill:#4ade80}
.cam .lf-dot.off{fill:#475569}
.cam .lf-led{fill:#334155}
.cam .lf-led.g{fill:#4ade80}
.cam .lf-led.r{fill:#ff5a5a}
.cam .lf-rem{transition:opacity .5s}
.cam .lf-rem.dim{opacity:.28}
.cam .lf-net{overflow-x:auto;padding:12px;border:1px solid rgba(120,170,255,.14);border-radius:4px;background:#04070d}
.cam .lf-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:0 32px}
.cam .lf-rows .drow,.cam .lf-rows .drow:is(:where(:not(.ms-p>*)):first-child,:where(.ms-p>*).ms-i1){border-top:1px dashed rgba(120,170,255,.16)}
.cam .lf-hint{display:none;font-size:11px;letter-spacing:.06em;color:#7d92b3;margin-top:-8px}
@media (max-width:560px){.cam .lf-hint{display:block}}
.cam .mp-led{fill:#334155}
.cam .mp-led.g{fill:#4ade80}
.cam .mp-led.r{fill:#ff5a5a}
.cam .mp-chart{padding:16px 14px 10px;border:1px solid rgba(120,170,255,.14);border-radius:4px;background:#04070d}
.cam .mp-bars{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;align-items:end;height:124px;border-bottom:1px solid rgba(120,170,255,.25)}
.cam .mp-b{display:flex;align-items:flex-end;height:100%;border-radius:2px 2px 0 0}
.cam .mp-b.we{background:rgba(120,170,255,.07)}
.cam .mp-b i{display:block;width:100%;border-radius:2px 2px 0 0}
.cam .mp-ax{display:flex;justify-content:space-between;padding-top:8px;font-size:10.5px;letter-spacing:.08em;color:#5d6f8f;text-transform:uppercase}
.cam .mp-r{display:grid;grid-template-columns:62px 52px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;border-top:1px dashed rgba(120,170,255,.16);font-size:12.5px;color:#a9bddc;animation:cam-lin .35s ease both}
.cam .mp-r .m{font-size:12.5px}
.cam .mp-hd{border-top:0;padding-top:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7d92b3;animation:none}
.cam .mp-who{font-size:14px;font-weight:600;color:#e8edf5;min-width:0}
@media (max-width:560px){.cam .mp-r{grid-template-columns:52px 44px minmax(0,1fr)}}
@media (max-width:560px){.cam .mp-r>:is(:where(:not(.ms-p>*)):last-child,:where(.ms-p>*).ms-il){grid-column:1/-1;justify-self:start}}
@media (max-width:560px){.cam .mp-hd>:is(:where(:not(.ms-p>*)):last-child,:where(.ms-p>*).ms-il){display:none}}
.cam .of-fl{fill:rgba(45,212,191,0)}
.cam .of-fl.on{fill:rgba(45,212,191,.2)}
.cam .of-car{fill:rgba(77,158,255,.25);stroke:#8bbcff;transform-box:view-box;transition:transform 1s cubic-bezier(.3,.7,.3,1)}
.cam .of-car.up{transform:translateY(-194px)}
.cam .of-plan{transition:opacity .5s}
.cam .of-plan.dim{opacity:.32}
.cam .of-led{fill:#334155}
.cam .of-led.g{fill:#4ade80}
.cam .of-led.r{fill:#ff5a5a}
@keyframes ac-of-drain{0%{transform:scaleX(1)}85%,100%{transform:scaleX(0)}}
.cam .of-drain{transform-box:fill-box;transform-origin:left;animation:ac-of-drain 4s linear infinite}
.cam .of-pass{display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid rgba(45,212,191,.4);border-radius:10px;background:linear-gradient(160deg,rgba(45,212,191,.1),rgba(7,11,20,.9) 55%)}
.cam .of-pass .row{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:9px 0}
.cam .of-pass .row .rv{font-size:14.5px}
.cam .of-bar{height:8px;border-radius:4px;background:#0f1a2e;overflow:hidden}
.cam .of-bar i{display:block;height:100%;background:#2dd4bf;border-radius:4px}
.cam .of-tl{overflow-x:auto;padding:14px 12px 8px;border:1px solid rgba(120,170,255,.14);border-radius:4px;background:#04070d}
.cam .of-tl .lbl2{font-size:11px}
.cam .of-tl .lbl{font-size:11px}
.cam .of-hint{display:none;font-size:11px;letter-spacing:.06em;color:#7d92b3}
@media (max-width:560px){.cam .of-hint{display:block}}
.cam .rp-u{fill:rgba(120,170,255,.06);stroke:rgba(139,188,255,.35)}
.cam .rp-u.x{fill:rgba(255,107,107,.45);stroke:#ff6b6b}
.cam .rp-u.ok{fill:rgba(74,222,128,.45);stroke:#4ade80}
.cam .rp-cl{transition:opacity .4s}
.cam .rp-cl.dim{opacity:.35}
.cam .rp-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:900px){.cam .rp-grid{grid-template-columns:minmax(0,1fr)}}
.cam .rp-net .lbl2{font-size:10px}
.cam .rl-ring{transform-box:fill-box;transform-origin:center;animation:cam-ring 1.2s ease-out infinite}
.cam .st.rl-na{background:transparent;color:#5d6f8f;border:1px dashed rgba(120,170,255,.22)}
.cam .rl-dot{fill:#1a2436;stroke:#04070d;stroke-width:2}
.cam .rl-dot.st-u{fill:#2dd4bf}
.cam .rl-dot.st-r{fill:#f5c46b}
.cam .rl-dot.st-l{fill:#ff6b6b}
.cam .sg-ring{transform-box:fill-box;transform-origin:center;animation:cam-ring 1.2s ease-out infinite}
.cam .sg-corr{fill:rgba(77,158,255,.04)}
.cam .sg-corr.lk{fill:rgba(255,107,107,.1)}
.cam .sg-btn{fill:rgba(255,107,107,.15);stroke:#ff6b6b}
.cam .sg-btn.lk:not(.ms-off){fill:#ff6b6b;animation:cam-blink 1.1s step-end infinite}
.cam .sg-door{fill:rgba(255,107,107,.08)}
.cam .sg-door.ok{fill:rgba(74,222,128,.16)}
.cam .sg-door.al{fill:rgba(245,196,107,.1)}
.cam .sg-scr{fill:#ff6b6b}
.cam .sg-scr.ok{fill:#4ade80}
.cam .sg-scr.al{fill:#f5c46b}
.cam .sg-card{fill:rgba(5,8,16,.94);stroke:#ff6b6b;stroke-width:1.5}
.cam .sg-card.ok{stroke:#4ade80}
.cam .sg-card.al{stroke:#f5c46b}
.cam .sf-led{fill:#475569;stroke:#070b14;stroke-width:1.5}
.cam .sf-leaf{transform-box:view-box;transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.cam .sf-g .sf-leaf{transform:rotate(var(--r))}
.cam .sf-arc{opacity:0;transition:opacity .4s}
.cam .sf-g .sf-arc{opacity:1}
.cam .sf-gd{transition:opacity .5s}
.cam .sf-g .sf-gd{opacity:.18}
.cam .sf-ring{opacity:0;transition:opacity .3s}
.cam .sf-a .sf-ring{opacity:1}
@keyframes ac-sfcar{0%,14%{transform:translateY(62px)}58%,100%{transform:translateY(0)}}
.cam .sf-car{animation:ac-sfcar 4.2s ease-in-out infinite}
@keyframes ac-sfdrill{0%,100%{transform:translateX(0)}50%{transform:translateX(-12px)}}
.cam .sf-drill{animation:ac-sfdrill 2.4s ease-in-out infinite}
.cam .sf-fac .lbl{font-size:12px}
.cam .sf-fac .lbl2{font-size:11px}
.cam .th-led{fill:#475569;stroke:#070b14;stroke-width:1.5}
.cam .th-on .th-led{fill:#2dd4bf}
.cam .th-g .th-led{fill:#4ade80}
.cam .th-r .th-led{fill:#ff6b6b}
.cam .th-w{opacity:.22;transition:opacity .5s}
.cam .th-w.on{opacity:1}
.cam .th-mon.on:not(.ms-off) rect{fill:rgba(245,196,107,.35);animation:cam-blink 1.1s step-end infinite}
.cam .wa-sh{transition:transform 1.1s cubic-bezier(.4,.1,.3,1)}
.cam .wa-dk.on .wa-sh{transform:translateY(-104px)}
.cam .wa-dk .wa-ok,.cam .wa-dk .wa-no{transition:opacity .4s}
.cam .wa-dk .wa-ok{opacity:0}
.cam .wa-dk.on .wa-ok{opacity:1}
.cam .wa-dk.on .wa-no{opacity:0}
.cam .wa-op{fill:#0b1324;stroke:#2dd4bf}
.cam .wa-leaf{transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.cam .wa-dk.on .wa-leaf{transform:scaleX(.28)}
.cam .wa-led{fill:#ff6b6b}
.cam .wa-led.on{fill:#4ade80}
@keyframes ac-waring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.cam .wa-ring{transform-box:fill-box;transform-origin:center;animation:ac-waring 1.2s ease-out infinite}
@keyframes ac-waroll{0%,20%{transform:translateY(0)}55%,75%{transform:translateY(-62px)}100%{transform:translateY(0)}}
.cam .wa-roll{animation:ac-waroll 4.4s ease-in-out infinite}
.cam .wa-z .wa-zf{fill:rgba(45,212,191,0)}
.cam .wa-z.on .wa-zf{fill:rgba(45,212,191,.12)}
.cam .wa-z .wa-hz{opacity:1;transition:opacity .4s}
.cam .wa-z.on .wa-hz{opacity:0}
.cam .wa-z .wa-dc{fill:#111a2a;stroke:#3a4a66;stroke-width:1.5}
.cam .wa-z.on .wa-dc{fill:#2dd4bf;stroke:#2dd4bf}
.cam .wa-dt{font:700 9px var(--mono);fill:#6b7f9f;text-anchor:middle}
.cam .wa-z.on .wa-dt{fill:#060910}
.cam .wa-rr{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);gap:10px;padding:9px 0;border-top:1px dashed rgba(120,170,255,.14);font-size:14px;color:#dfe6f2}
.cam .wa-rr span:is(:where(:not(.ms-p>*)):nth-child(2),:where(.ms-p>*).ms-i2){color:#a9bddc}
.cam .wa-rr span:is(:where(:not(.ms-p>*)):nth-child(3),:where(.ms-p>*).ms-i3){font:600 12px var(--mono);color:#5eead4;text-align:right}
.cam .wa-rr.wa-rh{border-top:0;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7d92b3}
.cam .wa-rr.wa-rh span{font:inherit;color:#7d92b3}
.cam .ledg{opacity:0}
.cam .of-carl{fill:rgba(45,212,191,.3);stroke:#2dd4bf;opacity:0;transition:transform 1s cubic-bezier(.3,.7,.3,1),opacity 1s}
.cam .of-carl.up{opacity:1}
.cam .wa-opl{fill:#2dd4bf;opacity:0;transition:opacity .4s}
.cam .wa-dk.on .wa-opl{opacity:1}
.cam .sf-ledg,.cam .sf-leda{opacity:0;stroke:#070b14;stroke-width:1.5;transition:opacity .3s}
.cam .sf-ledg{fill:#4ade80}
.cam .sf-leda{fill:#f5c46b}
.cam .sf-g .sf-ledg,.cam .sf-a .sf-leda{opacity:1}