/* Audio and video area page (/audio-video-manhattan/).
   Loaded only by those pages (main.cam.av), with the family script. Everything is scoped under main.cam,
   so nothing reaches the shared header, footer or mobile call bar.
   1. The audio and video overview's page CSS, unchanged (its colour layer included).
   2. State copies (.msv / .ms-off), the off-screen pause and the mono fallback face (as ac-areas.css).
   3. The pages' own rules. Animations use only transform, opacity, stroke-dashoffset and offset-distance;
      keyframes the overview lacks are named ava-*. Page code prefixes: .vn- */

/* ---- 1. 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}
}
/* Audio and video page: pink accent (#f472b6) next to the site blue. Scoped to main.cam.av.
   Colour changes are instant or opacity layers; animations use transform, opacity and stroke-dashoffset. */
/* First paint uses a fallback font (Inter arrives with the async main.css). A fallback scaled
   to Inter's metrics keeps the hero lines and pill rows the same when Inter swaps in. */
@font-face{font-family:'Inter av-fallback';font-weight:100 500;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans'),local('Helvetica');ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:106.8%}
@font-face{font-family:'Inter av-fallback';font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Helvetica Bold');ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:101.6%}
@font-face{font-family:'Inter av-fallback';font-weight:700 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Helvetica Bold');ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:105.1%}
@font-face{font-family:'Inter av-fallback-h1';font-weight:100 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Helvetica Bold');ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:112%}
main.cam.av{font-family:'Inter','Inter av-fallback',system-ui,-apple-system,sans-serif}
.cam.av h1{font-family:'Inter','Inter av-fallback-h1',system-ui,-apple-system,sans-serif}
/* Narrow phones: the two hero buttons always stack, so the row never changes when Inter swaps in. */
@media (max-width:480px){.cam.av .ctas{flex-direction:column;align-items:flex-start}}
.cam.av .c::before,.cam.av .c::after{border-color:#f472b6;opacity:.65}
.cam.av a.c:hover,.cam.av .c.hv:hover{border-color:rgba(244,114,182,.55)}
.cam.av .pk{stroke:#f472b6}
.cam.av .tog{padding:0 14px;letter-spacing:.08em}
.cam.av .tog:hover{border-color:#f472b6;color:#fff}
.cam.av .tog.on{border-color:#f472b6;background:rgba(244,114,182,.14);color:#fff}
.cam.av .tog.bad.on{border-color:#ff6b6b;background:rgba(255,107,107,.12);color:#ffb4b4}
.cam.av .tog.live{border-color:#ff5a5a;background:rgba(255,90,90,.14);color:#ffb4b4}
.cam.av details.rfi summary{grid-template-columns:minmax(0,1fr) 28px}
.cam.av details.rfi .pl{color:#f472b6}
.cam.av .ans{margin:0 0 26px;max-width:720px}
.cam svg text{pointer-events:none}
@keyframes av-ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes av-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.cam .eq{transform-box:fill-box;transform-origin:bottom;animation:av-eq 1s ease-in-out infinite}
@keyframes av-wave{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
.cam .wave{transform-box:fill-box;transform-origin:left center;animation:av-wave 1.6s ease-out infinite}

/* hero: room sizer. In-call colours are opacity layers over the base drawing. */
.cam .rm .disp{fill:#101a2e;stroke:#8bbcff;stroke-width:1.5}
.cam .rm .disp-on{fill:#f472b6;stroke:#fff;stroke-width:1.5;opacity:0;transition:opacity .4s}
.cam .rm .glow,.cam .rm .incall{opacity:0;transition:opacity .4s}
.cam .rm .fov{fill:rgba(244,114,182,.10)}
.cam .rm .fov-on{fill:rgba(244,114,182,.14);opacity:0;transition:opacity .4s}
.cam .rm .chairs rect{fill:#101a2e;stroke:rgba(139,188,255,.6)}
.cam .rm .mic{fill:none;stroke:#f5c46b;stroke-width:1.2;stroke-dasharray:3 3;opacity:.55;transition:opacity .4s}
.cam .rm .micp{fill:none;stroke:#f5c46b;stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0}
.cam .rm .micd{fill:#f5c46b}
.cam .rm .spk{fill:#0b1324;stroke:#f472b6;stroke-width:1.3}
.cam .rm .spw{fill:none;stroke:#f472b6;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.cam .rm .tp{fill:#0b1324;stroke:#8bbcff}
.cam .rm .tpd{fill:#334155}
.cam .rm .tpd-on{fill:#ff5a5a;opacity:0}
.cam .rm .incall{font:700 10px var(--mono);fill:#ff8a8a;text-anchor:middle}
.cam .rm.call .disp-on,.cam .rm.call .glow,.cam .rm.call .fov-on,.cam .rm.call .incall,.cam .rm.call .mic{opacity:1}
.cam .rm.call .micp{animation:av-ring 1.8s ease-out infinite}
.cam .rm.call .spw{animation:av-ring 1.4s ease-out infinite}
.cam .rm.call .tpd-on{opacity:1;animation:cam-blink 1s step-end infinite}
.cam .rng{width:100%;height:44px;margin:0;accent-color:#f472b6;cursor:pointer}
.cam .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px 18px}
.cam .kv .k{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7d92b3}
.cam .kv .v{font-size:15px;font-weight:600;color:#e8edf5;margin-top:3px;line-height:1.4}

/* zones: tints and wave strength follow the sliders (set on input, not animated) */
.cam .zn .zfill{fill:#f472b6}
.cam .zn .zw{fill:none;stroke:#f472b6;stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:av-ring 2.2s ease-out infinite}
.cam .zn .zpg{fill:none;stroke:#f5c46b;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.cam .zn .zs{fill:#0b1324;stroke:#f472b6;stroke-width:1.4}
.cam .zn .pg .zfill{fill:#f5c46b}
.cam .zn .pg .zpg{animation:av-ring .9s ease-out infinite}
.cam .zn .pg .zw{animation:none;opacity:.1}
.cam .zn .zlab{font:700 10px var(--mono);letter-spacing:.1em;fill:#cfe0ff}
.cam .phone{width:min(300px,100%);border:2px solid rgba(139,188,255,.5);border-radius:30px;padding:18px 16px 20px;background:#05080f;box-shadow:0 30px 80px -30px rgba(244,114,182,.45)}
.cam .zrow{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:0 10px;align-items:center;padding:8px 0 2px;border-top:1px solid rgba(120,170,255,.12)}
.cam .zrow label{font-size:14px;font-weight:600;color:#e8edf5}
.cam .zrow output{font:500 12px var(--mono);color:#f9a8d4;text-align:right}
.cam .zrow input{grid-column:1 / span 2;width:100%;height:44px;margin:0;accent-color:#f472b6;cursor:pointer}
.cam .pgb{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;border:1px solid rgba(245,196,107,.5);border-radius:8px;background:rgba(245,196,107,.08);color:#ffd27a;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cam .pgb:hover{background:rgba(245,196,107,.16)}
.cam .banner{min-height:40px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font:600 12px var(--mono)}
.cam .banner.on{background:#f5c46b;color:#1a1204}
.cam .banner.off{background:rgba(244,114,182,.1);color:#f9a8d4}

/* mount: DIY and Seneca layers fade; the TV tilts with transform */
.cam .mt .diy,.cam .mt .pro{opacity:0;transition:opacity .45s}
.cam .mt.s-diy .diy,.cam .mt.s-pro .pro{opacity:1}
.cam .mt .tv{transition:transform .6s cubic-bezier(.3,.7,.3,1);transform-box:view-box;transform-origin:150px 130px}
.cam .mt.s-diy .tv{transform:rotate(-3deg) translateY(6px)}
.cam .mt .mtx{font:600 11px var(--mono)}

/* lists, property tiles, repair chips */
.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 .chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cam .chk li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.5;color:#dfe6f2}
.cam .mk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--sans);margin-top:1px}
.cam .pt{display:flex;flex-direction:column;gap:8px;min-height:180px}
.cam .pt svg{width:100%;height:64px}
.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:#f472b6;color:#fff}
.cam .bchip i{width:7px;height:7px;border-radius:50%;background:#f472b6}
@media (max-width:760px){
  .cam.av details.rfi summary{font-size:17px}
}

/* ---- 2. state copies (the family script) ---- */
.cam .ms-off{opacity:0!important}
.cam .msv{transition:opacity .35s}
.cam .paused,.cam .paused *{animation-play-state:paused!important}
/* 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 .bad{background:rgba(255,107,107,.04);border-color:rgba(255,107,107,.22)}
@media (max-width:760px){.cam details.rfi summary{font-size:17px}}
@media (max-width:760px){.cam .sec{padding:76px 0}}
.cam .step{display:flex;flex-direction:column;gap:10px;padding:24px;border-top:2px solid rgba(244,114,182,.5);background:rgba(9,14,24,.6)}
.cam .step .sn{font:700 13px var(--mono);letter-spacing:.14em;color:#f472b6}
.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)}
@media (max-width:560px){.cam .srow{grid-template-columns:1fr;gap:8px}}
.cam a.tc:hover{border-color:rgba(244,114,182,.6)}
.cam .tc.here{border-color:rgba(244,114,182,.45);background:rgba(244,114,182,.05)}
.cam .sno{color:#f472b6}
.cam .stag{border-color:rgba(244,114,182,.35);color:#f9a8d4}
.cam .srow:hover{background:rgba(244,114,182,.05)}
.cam .hoods{display:flex;flex-direction:column;gap:14px;padding:22px 24px;margin-bottom:28px;border:1px solid rgba(120,170,255,.14);border-radius:4px;background:rgba(9,14,24,.6)}
.cam .hoods ul{margin:0;padding:0;list-style:none;columns:4 180px;column-gap:28px}
.cam .hoods li{font-size:14.5px;line-height:1.9;color:#c9d2e0;break-inside:avoid}
.cam .vn-hero{display:flex;flex-wrap:wrap;align-items:stretch}
.cam .vn-map{flex:1 1 300px;min-width:0;display:flex;justify-content:center;align-items:center;background:#04070d}
.cam .vn-map svg{display:block;width:100%;max-width:440px;height:auto}
.cam .vn-side{flex:0 1 240px;min-width:0;padding:18px 18px 16px;border-left:1px solid rgba(120,170,255,.14);background:linear-gradient(180deg,rgba(9,14,24,.9),rgba(5,8,16,.9));display:grid}
@media (max-width:640px){.cam .vn-side{flex-basis:100%;border-left:0;border-top:1px solid rgba(120,170,255,.14)}}
.cam .vn-lg{grid-area:1/1;display:flex;flex-direction:column;gap:10px;animation:ava-vn-in .5s ease both}
.cam .vn-lg.off{visibility:hidden;animation:none;opacity:0}
.cam .vn-ico{width:100%;height:40px;border:1px solid rgba(120,170,255,.14);border-radius:3px;background:rgba(4,7,13,.7)}
.cam .vn-ttl{font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:#e8edf5}
.cam .vn-rows{list-style:none;margin:0;padding:8px 0;display:flex;flex-direction:column;gap:7px;border-top:1px solid rgba(120,170,255,.12);border-bottom:1px solid rgba(120,170,255,.12)}
.cam .vn-rows li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;align-items:baseline;font-size:12.5px;line-height:1.35;color:#c9d2e0}
.cam .vn-rows b{font:700 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--a)}
.cam .vn-chips{display:flex;flex-wrap:wrap;gap:5px}
.cam .vn-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid var(--a);border-radius:999px;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#e8edf5;background:rgba(5,8,16,.6)}
.cam .vn-ml{font:700 8.6px var(--mono);letter-spacing:.07em;paint-order:stroke;stroke:#04070d;stroke-width:3px;stroke-linejoin:round}
.cam .vn-ms{font:500 6.6px var(--mono);letter-spacing:.1em;paint-order:stroke;stroke:#04070d;stroke-width:2.4px;stroke-linejoin:round}
.cam .vn-rv{font:500 6px var(--mono);letter-spacing:.32em;fill:rgba(139,188,255,.42)}
.cam .vn-gt{font:500 5.6px var(--mono);letter-spacing:.08em;fill:rgba(125,146,179,.7)}
.cam .vn-g{transition:opacity .45s}
.cam .vn-g:not(.on){opacity:0}
.cam .vn-g.on .vn-zh{animation:ava-vn-zp 2.8s ease-in-out infinite}
.cam .vn-ld{stroke-dasharray:1 1;stroke-dashoffset:0}
.cam .vn-g.on .vn-ld{animation:ava-vn-dr .8s ease-out both}
.cam .vn-pd{transform-box:fill-box;transform-origin:center;animation:ava-vn-ping 2.2s ease-out infinite}
.cam .vn-t4{font:600 7.5px var(--mono);letter-spacing:.08em;fill:#c9d2e0}
.cam .vn-led{animation:ava-vn-fl 1.4s ease-in-out infinite}
.cam .vn-rain{animation:ava-vn-rain 1.1s linear infinite}
.cam .vn-drip{animation:ava-vn-rain .9s linear infinite}
.cam .vn-scan{animation:ava-vn-scan 2.6s ease-in-out infinite alternate}
.cam .vn-c3,.cam .vn-c6{animation:ava-vn-fl 2.6s ease-in-out infinite}
.cam .vn-arc{transform-box:fill-box;transform-origin:left top;animation:ava-vn-arc 2.2s ease-out infinite}
.cam .vn-wifi{transform-box:fill-box;transform-origin:center top;animation:ava-vn-arc 2.4s ease-out infinite}
.cam .vn-fr{animation:ava-vn-fl 3s ease-in-out infinite}
.cam .vn-mic{transform-box:fill-box;transform-origin:center;animation:ava-vn-ping 2.2s ease-out infinite}
.cam .vn-g.on .vn-xx{animation:ava-vn-fl 1s step-end infinite}
.cam .vn-fx{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.cam .vn-fd{flex:5 1 480px;min-width:0;border:1px solid rgba(120,170,255,.16);border-radius:4px;background:#04070d}
.cam .vn-fd svg{display:block;width:100%;height:auto}
.cam .vn-fp{flex:3 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid rgba(120,170,255,.16);border-radius:4px;background:rgba(5,8,16,.6)}
.cam .vn-t1{font:700 12px var(--mono);letter-spacing:.07em;paint-order:stroke;stroke:#04070d;stroke-width:4px;stroke-linejoin:round}
.cam .vn-t3{font:500 9px var(--mono);letter-spacing:.08em;fill:#8a9bb5;paint-order:stroke;stroke:#04070d;stroke-width:3px;stroke-linejoin:round}
.cam .vn-draw{stroke-dasharray:1 1;stroke-dashoffset:0}
.cam .vn-g.on .vn-draw{animation:ava-vn-dr 1.6s cubic-bezier(.4,.6,.3,1) both}
.cam .vn-pk{offset-distance:0%;opacity:0;animation:ava-vn-pk 2.2s linear infinite}
.cam .vn-lks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px}
.cam .vn-lk{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:1px solid rgba(120,170,255,.14);border-radius:4px;background:rgba(5,8,16,.6)}
.cam .vn-lk ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cam .vn-lk a{font-size:14.5px;color:#c9d2e0;border-bottom:1px solid rgba(244,114,182,.35)}
.cam .vn-lk a:hover{color:#fff;border-color:#f472b6}
@media (max-width:640px){.cam .vn-fd{overflow-x:auto}}
@media (max-width:640px){.cam .vn-fd svg{min-width:560px}}
@media (max-width:640px){.cam .vn-fp{padding:14px}}
@media (prefers-reduced-motion:reduce){.cam .vn-hero *,.cam .vnx *,.cam .vn-rain,.cam .vn-scan,.cam .vn-c3,.cam .vn-arc,.cam .vn-fr,.cam .vn-mic,.cam .vn-c6{animation:none!important}}
@media (prefers-reduced-motion:reduce){.cam .vn-pk{opacity:0}}
@media (prefers-reduced-motion:reduce){.cam .vn-lg{animation:none}}
.cam .vn-wave{animation:ava-vn-wave 1.8s ease-out infinite}
@media (prefers-reduced-motion:reduce){.cam .vn-wave{animation:none!important;opacity:.8}}
.cam .vn-hint{display:none;font-size:11px;letter-spacing:.08em;color:#7d92b3}
@media (max-width:640px){.cam .vn-hint{display:block;flex-basis:100%;margin-top:-6px}}
@keyframes ava-vn-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ava-vn-zp{50%{opacity:.62}}
@keyframes ava-vn-dr{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ava-vn-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes ava-vn-fl{50%{opacity:.35}}
@keyframes ava-vn-rain{0%{transform:translateY(-14px);opacity:0}20%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes ava-vn-scan{from{transform:translateX(0)}to{transform:translateX(-70px)}}
@keyframes ava-vn-arc{0%{opacity:0;transform:scale(.7)}35%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes ava-vn-pk{0%{offset-distance:0%;opacity:0}8%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes ava-vn-wave{0%,100%{opacity:.15}30%{opacity:1}}