:root {
  
  --canvas: #ffffff;
  --soft: #f7f7f7;
  --plate: #fafafa;
  --strong: #ebebeb;
  --navy: #1a2129;
  --navy-2: #262e38;

  
  --ink: #262626;
  --body: #3c3c3c;
  --mute: #6b6b6b;          
  --hair: #e6e6e6;
  --hair-2: #cccccc;

  
  --on-dark: #ffffff;
  --on-dark-2: #bbbbbb;     
  --on-dark-3: #9aa3ad;     

  
  --accent: #E86602;        
  --accent-btn: #B84F00;    
  --accent-soft: #F08A3C;   

  --sans: 'Geologica', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Noto Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(56px, 8vw, 96px);

  
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-s: .2s;
  --t-m: .4s;
  --t-l: .6s;

  
  --lmr-ease: cubic-bezier(.16, 1, .3, 1);
  --lmr-dur: 900ms;
  --lmr-stagger: 80ms;
  --lmr-bleed-t: .14em;
  --lmr-bleed-b: .28em;
}

.dk {
  --bg-0: #12181e;
  --bg-1: #161d24;
  --bg-2: #1f2730;
  --bg-3: #262e38;
  --ink-0: #ffffff;
  --ink-1: #e6e8eb;
  --ink-2: #bbbbbb;
  --ink-3: #9aa3ad;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .16);
  --glass: #1f2730;
  --glass-line: rgba(255, 255, 255, .12);
  --muted: #9aa3ad;
  --brand: #E86602;
  --brand-2: #F08A3C;
  --brand-dark: #B84F00;
  --brand-glow: rgba(232, 102, 2, .35);
  --gold: #E86602;
  --display: var(--sans);
  --ok: #34d399;
  --err: #f87171;
  --cyan: #3fe0ff;
  --radius: 12px;
  --radius-sm: 8px;
  --t-fast: .2s cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 300 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, li, dd, dt, summary { overflow-wrap: break-word; }
h1, h2, h3 { color: var(--ink); font-weight: 700; margin: 0; }
p { margin: 0; }
button { font: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent-btn);
  outline-offset: 3px;
}
.dk :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
.hero :where(a, button):focus-visible { outline-color: var(--accent-soft); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 12px 18px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.band { padding: var(--section) 0; position: relative; }
.band--light { background: var(--canvas); }
.band--soft { background: var(--soft); }
.band--dark { background: var(--navy); color: var(--on-dark-2); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--on-dark); }

.h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); line-height: 1.05; letter-spacing: 0; }
.h2 { font-size: clamp(1.85rem, 3.9vw, 3rem); line-height: 1.1; max-width: 22ch; }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; max-width: 30ch; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-btn); margin-bottom: 18px;
}
.band--dark .eyebrow { color: var(--accent); }
.lead { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; max-width: 60ch; margin-top: 20px; }
.band--dark .lead { color: var(--on-dark-2); }
.head { margin-bottom: clamp(32px, 5vw, 56px); }
.head--sub { margin-top: clamp(56px, 8vw, 88px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 32px; border: 1px solid transparent; border-radius: 0;
  font: 700 14px/1 var(--sans); letter-spacing: .5px; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-s) var(--ease), color var(--t-s) var(--ease), border-color var(--t-s) var(--ease);
}
.btn--accent { background: var(--accent-btn); color: #fff; }
.btn--accent:hover { background: #9c4300; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.band--dark .btn--line { color: var(--on-dark); border-color: rgba(255, 255, 255, .6); }

.lnk {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; text-decoration: none;
  font: 700 13px/1.3 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink);
}
.lnk span { color: var(--accent-btn); transition: transform var(--t-s) var(--ease); }
.lnk:hover span { transform: translateX(4px); }
.lnk--dark, .band--dark .lnk { color: var(--on-dark); }
.lnk--dark span, .band--dark .lnk span { color: var(--accent); }

.prog {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: #fff; mix-blend-mode: difference;
}
.hd {
  position: sticky; top: 0; z-index: 100;
  background: var(--canvas); border-bottom: 1px solid var(--hair);
}
.hd__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  height: 64px; display: flex; align-items: center; gap: 32px;
}
.hd__brand { flex: 0 0 auto; display: block; }
.hd__brand img { width: 230px; height: auto; }
.hd__nav { display: flex; gap: 26px; margin-left: auto; }
.hd__nav a {
  font: 400 14px/1.4 var(--sans); letter-spacing: .3px; color: var(--ink); text-decoration: none;
  padding: 22px 0 20px; border-bottom: 2px solid transparent;
  transition: border-color var(--t-s) var(--ease);
}
.hd__nav a:hover, .hd__nav a[aria-current="true"] { border-bottom-color: var(--ink); }
.hd__tel {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--hair-2); color: var(--ink); text-decoration: none; font: 700 14px/1 var(--sans); letter-spacing: .5px;
}
.hd__tel-l { font-weight: 400; color: var(--mute); }
.hd__tel:hover { border-color: var(--ink); }
.hd__burger {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--hair-2); background: var(--canvas);
  cursor: pointer; position: relative;
}
.hd__burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink);
  transition: transform var(--t-m) var(--ease), top var(--t-m) var(--ease);
}
.hd__burger span:first-child { top: 17px; }
.hd__burger span:last-child { top: 25px; }
.hd__burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.hd__burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .hd__nav, .hd__tel { display: none; }
  .hd__burger { display: block; }
  .hd__brand img { width: 190px; }
}

.drawer {
  position: fixed; inset: 64px 0 0 0; z-index: 99; background: var(--canvas);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  font: 700 clamp(1.5rem, 6.5vw, 2rem)/1.2 var(--sans); color: var(--ink); text-decoration: none;
  padding: 16px 0; border-bottom: 1px solid var(--hair);
  opacity: 0; transform: translateY(8px); transition: opacity var(--t-m) var(--ease), transform var(--t-m) var(--ease);
}
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer.is-open .drawer__nav a:nth-child(2) { transition-delay: .03s; }
.drawer.is-open .drawer__nav a:nth-child(3) { transition-delay: .06s; }
.drawer.is-open .drawer__nav a:nth-child(4) { transition-delay: .09s; }
.drawer.is-open .drawer__nav a:nth-child(5) { transition-delay: .12s; }
.drawer.is-open .drawer__nav a:nth-child(6) { transition-delay: .15s; }
.drawer__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
.drawer__foot .lnk { color: var(--ink); }
.drawer__foot .lnk span { color: var(--accent-btn); }
body.menu-open { overflow: hidden; }

.hero { padding: clamp(56px, 9vw, 112px) 0; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy .lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
@media (max-width: 900px) { .hero__in { grid-template-columns: minmax(0, 1fr); } }

.spec { display: grid; margin: 36px 0 28px; border-top: 1px solid var(--hair); }
.spec--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spec > div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--hair); }
.spec--3 > div + div { padding-left: 20px; border-left: 1px solid var(--hair); }
.spec dt { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mute); }
.spec dd { margin: 8px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 700; line-height: 1.3; color: var(--ink); }
.spec--dark { border-top-color: rgba(255, 255, 255, .14); }
.spec--dark > div { border-bottom-color: rgba(255, 255, 255, .14); padding-right: 0; }
.spec--dark dt { color: var(--on-dark-3); }
.spec--dark dd { color: var(--on-dark); font-size: 1.05rem; }
.spec--dark dd a { color: var(--on-dark); text-decoration: none; }
.spec--dark dd a:hover { color: var(--accent-soft); }
@media (max-width: 640px) {
  .spec--3 { grid-template-columns: minmax(0, 1fr); }
  .spec--3 > div + div { padding-left: 0; border-left: 0; }
}

.hq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .hq { grid-template-columns: minmax(0, 1fr); } }

.hqmap { margin: 0; }
.hqmap__frame { aspect-ratio: 4 / 3; background: var(--plate); border: 1px solid var(--hair); }
.hqmap__frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.55) contrast(1.04); transition: filter var(--t-l) var(--ease); }
.hqmap__frame:hover iframe, .hqmap__frame:focus-within iframe { filter: none; }
.hqmap__cap { margin-top: 14px; font-size: 13px; color: var(--mute); }

.sys {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair);
  border: 1px solid var(--hair);
}
.sys__i { background: var(--canvas); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.sys__i h3 { font-size: 1.15rem; line-height: 1.3; }
.sys__i p { font-size: .98rem; color: var(--body); flex: 1 1 auto; }
.sys__i .lnk { align-self: flex-start; margin-top: 4px; }
@media (max-width: 980px) { .sys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sys { grid-template-columns: minmax(0, 1fr); } }

.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split > .head { margin-bottom: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split > .head { margin-bottom: 8px; } }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.rows li { padding: 24px 0; border-bottom: 1px solid var(--hair); }
.rows h3 { font-size: 1.15rem; line-height: 1.3; }
.rows p { margin-top: 8px; font-size: .98rem; }
.rows--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
.rows--2 li { border-top: 1px solid var(--hair); border-bottom: 0; }
@media (max-width: 640px) { .rows--2 { grid-template-columns: minmax(0, 1fr); } }

.flow { list-style: none; margin: clamp(40px, 6vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.flow li { padding: 22px 24px 0 0; border-top: 2px solid rgba(255, 255, 255, .16); }
.flow li:first-child { border-top-color: var(--accent); }
.flow__k { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--on-dark); }
.flow p { margin-top: 10px; font-size: .98rem; color: var(--on-dark-2); }
@media (max-width: 760px) { .flow { grid-template-columns: minmax(0, 1fr); } .flow li { padding: 20px 0; } }

.names {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.names li {
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--canvas); padding: 22px 20px; min-height: 76px; display: flex; align-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; color: var(--ink);
}
.brands {
  margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair);
}
.brands > div { background: var(--canvas); padding: 22px 20px; }
.brands dt { font-size: 1.05rem; font-weight: 700; letter-spacing: 1px; color: var(--ink); }
.brands dd { margin: 6px 0 0; font-size: .9rem; color: var(--mute); }
@media (max-width: 980px) { .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.faq { border-top: 1px solid var(--hair); }
.faq__i { border-bottom: 1px solid var(--hair); }
.faq__i summary {
  list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0;
  font-size: 1.08rem; font-weight: 700; color: var(--ink); line-height: 1.35;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -9px;
  border-right: 2px solid var(--accent-btn); border-bottom: 2px solid var(--accent-btn);
  transform: rotate(45deg); transition: transform var(--t-m) var(--ease);
}
.faq__i[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a { padding: 0 0 24px; max-width: 62ch; }

.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .ct { grid-template-columns: minmax(0, 1fr); } }
.form { background: var(--navy-2); padding: clamp(22px, 3vw, 36px); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--on-dark); }
.opt { font-weight: 300; color: var(--on-dark-3); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid transparent; border-radius: 0;
  background: #fff; color: var(--ink); font: 300 16px/1.4 var(--sans);
}
.field textarea { resize: vertical; min-height: 110px; }
.field :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent { font-size: .9rem; color: var(--on-dark-2); margin: 4px 0 22px; }
.consent input { margin-right: 8px; accent-color: var(--accent-btn); width: 18px; height: 18px; vertical-align: -3px; }
.hpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ft { background: var(--soft); color: var(--body); padding: 64px 0 calc(28px + env(safe-area-inset-bottom)); font-size: .95rem; }
.ft__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.ft__brand img { width: 260px; height: auto; }
.ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ft__cols div { display: flex; flex-direction: column; gap: 10px; }
.ft__h { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.ft__cols a { color: var(--body); text-decoration: none; }
.ft__cols a:hover { color: var(--accent-btn); }
.ft__bottom { margin-top: 48px; font-size: 13px; color: var(--mute); }
.ft__bottom > span { display: block; padding-top: 20px; border-top: 1px solid var(--hair); }
@media (max-width: 820px) { .ft__in, .ft__cols { grid-template-columns: minmax(0, 1fr); } }

.callbar { display: none; }
@media (max-width: 720px) {
  .callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; gap: 1px; background: var(--hair);
    padding-bottom: env(safe-area-inset-bottom); transform: translateY(130%);
    transition: transform var(--t-m) var(--ease);
  }
  .callbar.show { transform: none; }
  .callbar__b {
    flex: 1 1 0; min-height: 56px; display: flex; align-items: center; justify-content: center;
    background: var(--canvas); color: var(--ink); text-decoration: none; font: 700 15px/1 var(--sans);
  }
  .callbar__b--accent { background: var(--accent-btn); color: #fff; flex-grow: 1.6; }
  .ft { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

.simchip {
  position: absolute; top: 8px; right: 8px; z-index: 12;
  padding: 3px 7px; background: rgba(8, 10, 14, .78); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font: 600 10px/1.2 var(--mono); letter-spacing: .12em; pointer-events: none;
}
.simchip--foot { position: static; display: inline-block; }

.lmr-line {
  display: block; min-width: 0;
  clip-path: inset(calc(-1 * var(--lmr-bleed-t)) -.1em calc(-1 * var(--lmr-bleed-b)));
}
.lmr-in { display: block; }

.live-cam { max-width: 980px; margin-inline: auto; }
.live-rsc { margin-top: clamp(28px, 4vw, 48px); }
.rsc-host { background: #0b0d10; }

.console {
  position: relative; padding: 13px; display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--glass-line); border-radius: 4px;
}
.console::before, .console::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 3; }
.console::before { top: 8px; left: 8px; border-top: 2px solid var(--brand); border-left: 2px solid var(--brand); }
.console::after { bottom: 8px; right: 8px; border-bottom: 2px solid var(--brand); border-right: 2px solid var(--brand); }
.console-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 16px;
  font: 400 10px/1.3 var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase;
}
.console-bar .leds { display: inline-flex; align-items: center; }
.console-bar .leds i { width: 7px; height: 7px; border-radius: 50%; background: #3a3d45; display: inline-block; margin-left: 5px; }
.console-bar .leds i.g { background: var(--ok); }
.console-bar .leds i.y { background: var(--brand); }
.scr { position: relative; border-radius: 2px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); background: #06070a; }
.scr-169 { aspect-ratio: 16 / 9; }
.scr-43 { aspect-ratio: 4 / 3; }
.console-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.demo-title { font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; }
.demo-title span { font: 400 10px/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.demo-title span.cmd-demonote { text-transform: none; letter-spacing: .01em; margin-top: 4px; max-width: 34ch; }
.con-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-btn {
  font: 700 12.5px/1 var(--sans); letter-spacing: .4px; cursor: pointer; min-height: 40px;
  padding: 10px 16px; border-radius: 0; color: var(--ink-0);
  background: transparent; border: 1px solid rgba(255, 255, 255, .35);
  transition: background-color var(--t-s) var(--ease), border-color var(--t-s) var(--ease);
}
.demo-btn:hover { border-color: var(--brand); background: rgba(232, 102, 2, .14); }
.demo-btn[aria-pressed="true"] { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.spec-sheet {
  width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 640px); margin: auto; padding: 0;
  border: 0; border-radius: 0; background: var(--canvas); color: var(--body); overflow: auto;
  opacity: 0; translate: 0 24px;
  transition: opacity .34s var(--ease), translate .34s var(--ease), display .34s allow-discrete, overlay .34s allow-discrete;
}
.spec-sheet:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .spec-sheet:popover-open { opacity: 0; translate: 0 24px; } }
.spec-sheet::backdrop {
  background: rgb(26 33 41 / .62); opacity: 0;
  transition: opacity .34s var(--ease), display .34s allow-discrete, overlay .34s allow-discrete;
}
.spec-sheet:popover-open::backdrop { opacity: 1; }
@starting-style { .spec-sheet:popover-open::backdrop { opacity: 0; } }
.spec-head {
  position: sticky; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 24px 24px 18px; background: var(--navy); color: #fff;
}
.spec-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.spec-title { font-size: 1.4rem; line-height: 1.2; color: #fff; }
.spec-close {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.spec-close:hover { border-color: #fff; }
.spec-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spec-body { padding: 8px 24px 28px; }
.spec-body h4 { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mute); margin: 22px 0 8px; }
.spec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.spec-list li { padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: .98rem; color: var(--body); }
.spec-list li b { color: var(--ink); font-weight: 700; }
.spec-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.spec-chip { font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 6px 10px; border: 1px solid var(--hair-2); color: var(--ink); }
@supports not selector(:popover-open) {
  .spec-sheet { position: static; display: block; width: 100%; max-height: none; margin: 16px 0 0; opacity: 1; translate: none; }
  .spec-close { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .lmr-in { transform: none !important; }
  .drawer__nav a { opacity: 1; transform: none; }
}

.cmd-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.78); }
.cmd-tile--alarm .cmd-tile-img { filter: grayscale(1) sepia(1) hue-rotate(-40deg) saturate(2.6) brightness(.7); }
.cmd-cam-lbl { z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.9); }

.cmd-board { margin: 24px 0 60px; }
.cmd-console { max-width: 980px; margin: 0 auto; }
.cmd-bar-right { display: inline-flex; align-items: center; gap: 10px; }

.cmd-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-areas: "map side" "wall wall";
  gap: 12px;
}
.cmd-map { grid-area: map; min-height: 260px; }
.cmd-side { grid-area: side; display: flex; flex-direction: column; gap: 12px; }
.cmd-wall { grid-area: wall; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.cmd-map {
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(242,107,31,.06), transparent 60%),
    #06070a;
}
.cmd-map-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(130% 120% at 50% 45%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(130% 120% at 50% 45%, #000 55%, transparent 100%);
}
.cmd-map-tag {
  position: absolute; left: 12px; top: 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase; pointer-events: none;
}

.cmd-node {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 0; padding: 6px; margin: 0; cursor: pointer;
  color: var(--ink-1); font: inherit; z-index: 2;
}
.cmd-node-dot {
  position: relative; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 10px var(--ok);
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.cmd-node-dot::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--ok); opacity: 0;
}
.cmd-node-lbl {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap;
  transition: color var(--t-fast);
}
.cmd-node:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }

.cmd-node--ok .cmd-node-dot::before { animation: cmd-ok-pulse 2.6s ease-out infinite; }
@keyframes cmd-ok-pulse {
  0% { transform: scale(.7); opacity: .55; }
  100% { transform: scale(2.4); opacity: 0; }
}

.cmd-node--alarm .cmd-node-dot { background: var(--err); box-shadow: 0 0 14px var(--err); }
.cmd-node--alarm .cmd-node-lbl { color: var(--err); }
.cmd-node--alarm .cmd-node-dot::before { border-color: var(--err); animation: cmd-node-ping 1.1s ease-out infinite; }
@keyframes cmd-node-ping {
  0% { transform: scale(.7); opacity: .8; }
  100% { transform: scale(3.4); opacity: 0; }
}

.cmd-node--resolved .cmd-node-dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.cmd-node--resolved .cmd-node-lbl { color: var(--cyan); }
.cmd-node--resolved .cmd-node-dot::before { border-color: var(--cyan); animation: cmd-ok-pulse 2.6s ease-out infinite; }

.cmd-scope {
  aspect-ratio: 1 / 1; max-height: 172px; display: grid; place-items: center;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(242,107,31,.05), transparent 70%),
    #06070a;
}
.cmd-scope-svg { width: 84%; height: 84%; filter: drop-shadow(0 0 14px rgba(242,107,31,.3)); }
.cmd-scope-ring { fill: none; stroke: rgba(242,107,31,.24); stroke-width: 1.2; }
.cmd-scope-sweep { stroke: rgba(242,107,31,.85); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(242,107,31,.9)); transform-box: view-box; transform-origin: 80px 80px; animation: cmd-scope-spin 4s linear infinite; }
@keyframes cmd-scope-spin { to { transform: rotate(360deg); } }
.cmd-scope-blip { fill: var(--brand-2); filter: drop-shadow(0 0 5px rgba(242,107,31,.9)); animation: cmd-blip 4s ease-out infinite; }
@keyframes cmd-blip { 0%,100% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 0; } }
.cmd-scope-tag {
  position: absolute; left: 10px; bottom: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--muted);
}

.cmd-feed-wrap {
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  background: #06070a; padding: 10px 4px 8px 12px; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cmd-feed-head {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase;
}
.cmd-feed {
  list-style: none; margin: 0; padding: 0 8px 0 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 148px; overflow-y: auto;
}
.cmd-feed li {
  font-family: var(--mono); font-size: 10px; line-height: 1.45;
  color: var(--ink-2); padding: 4px 8px; border-left: 2px solid var(--ok);
  background: rgba(255,255,255,.02); border-radius: 0 6px 6px 0;
  animation: cmd-feed-in .4s ease;
}
.cmd-feed li b { color: var(--ink-0); font-weight: 600; }
.cmd-feed li .cmd-t { color: var(--muted); }
.cmd-feed li.cmd-alarm { border-left-color: var(--err); }
.cmd-feed li.cmd-alarm b { color: var(--err); }
.cmd-feed li.cmd-disp { border-left-color: var(--brand); }
.cmd-feed li.cmd-disp b { color: var(--brand-2); }
.cmd-feed li.cmd-ok-line { border-left-color: var(--cyan); }
@keyframes cmd-feed-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cmd-tile { overflow: hidden; }
.cmd-tile-noise {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 0%, rgba(63,224,255,.05), transparent 60%),
    #05070b;
}
.cmd-sweep {
  position: absolute; left: 0; right: 0; height: 34%; top: -34%;
  background: linear-gradient(180deg, transparent, rgba(63,224,255,.16), transparent);
  animation: cmd-vw-sweep 3.6s linear infinite; pointer-events: none;
}
@keyframes cmd-vw-sweep { to { top: 100%; } }
.cmd-cam-lbl {
  position: absolute; left: 7px; bottom: 6px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: rgba(255,255,255,.7);
}
.cmd-cam-rec {
  position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--err); box-shadow: 0 0 6px var(--err); animation: cmd-rec 1.6s infinite;
}
@keyframes cmd-rec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.cmd-tile--alarm { animation: cmd-tile-flash 1s ease-in-out infinite; }
.cmd-tile--alarm .cmd-tile-noise { background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
  radial-gradient(120% 90% at 50% 0%, rgba(248,113,113,.14), transparent 60%),
  #0b0405; }
.cmd-tile--alarm .cmd-sweep { background: linear-gradient(180deg, transparent, rgba(248,113,113,.22), transparent); }
.cmd-tile--alarm .cmd-cam-lbl { color: var(--err); }
.cmd-tile--alarm::after {
  content: "ΣΥΝΑΓΕΡΜΟΣ"; position: absolute; top: 6px; left: 7px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: var(--err);
}
@keyframes cmd-tile-flash {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(248,113,113,.35); }
  50% { box-shadow: inset 0 0 0 2px rgba(248,113,113,.9); }
}

#cmd-status.cmd-is-alarm { color: var(--err); }
#cmd-status.cmd-is-resolved { color: var(--cyan); }

@media (max-width: 720px) {
  .cmd-grid { grid-template-columns: 1fr; grid-template-areas: "map" "side" "wall"; }
  .cmd-map { min-height: 220px; }
  .cmd-side { flex-direction: row; }
  .cmd-scope { flex: 0 0 40%; max-height: none; }
  .cmd-feed-wrap { flex: 1; }
  .cmd-feed { max-height: 132px; }
}
@media (max-width: 480px) {
  .cmd-wall { grid-template-columns: repeat(2, 1fr); }
  .cmd-side { flex-direction: column; }
  .cmd-scope { flex: none; max-height: 160px; }
  .cmd-node-lbl { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-node-dot::before,
  .cmd-node--alarm .cmd-node-dot::before,
  .cmd-scope-sweep,
  .cmd-scope-blip,
  .cmd-sweep,
  .cmd-cam-rec,
  .cmd-tile--alarm,
  .cmd-feed li { animation: none !important; }
  .cmd-sweep { display: none; }
}

.cam{
  --cam-ok:#3effa0;          
  --cam-day:#f5b301;         
  --cam-thermal:#ffd24d;     
  --cam-ink:#f0f8ff;
  --cam-mono: var(--mono);
  --cam-ease: var(--ease);
}

.cam[data-mode="night"]{
  --cv-l:34.4%; --cv-t:41.0%; --cv-w:20.4%; --cv-h:30.2%;
  --cp-l:29.3%; --cp-t:35.4%; --cp-w:4.4%;  --cp-h:24.8%;
  --pl-l:45.5%; --pl-t:64.1%; --pl-w:5.6%;  --pl-h:2.3%}
.cam[data-mode="day"]{
  --cv-l:33.4%; --cv-t:40.4%; --cv-w:18.8%; --cv-h:31.2%;
  --cp-l:28.9%; --cp-t:36.4%; --cp-w:4.3%;  --cp-h:24.3%;
  --pl-l:44.0%; --pl-t:63.9%; --pl-w:5.5%;  --pl-h:2.4%}
.cam[data-mode="thermal"]{
  --cv-l:33.9%; --cv-t:40.9%; --cv-w:20.2%; --cv-h:29.4%;
  --cp-l:28.9%; --cp-t:34.4%; --cp-w:5.1%;  --cp-h:26.2%;
  --pl-l:44.5%; --pl-t:64.2%; --pl-w:6.1%;  --pl-h:2.4%}

.cam{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:16/9;
  background:#05070a;border:1px solid rgba(255,255,255,.10);
  container-type:size}                       

.cam-stage{position:absolute;inset:0;transition:transform .55s var(--cam-ease);
  will-change:transform}
.cam-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .35s var(--cam-ease)}
.cam-shot.on{opacity:1}

.cam-bb{position:absolute;z-index:5;border:1.6px solid var(--cam-ok);border-radius:2px;
  transition:border-color .35s var(--cam-ease),opacity .3s var(--cam-ease)}
.cam-bb span{position:absolute;top:-14px;left:-1.6px;background:var(--cam-ok);color:#04140a;
  font-family:var(--cam-mono);font-size:8px;font-weight:700;padding:1px 4px;border-radius:2px;
  white-space:nowrap;transition:background .35s var(--cam-ease),color .35s var(--cam-ease)}
.cam-bb--v{left:var(--cv-l);top:var(--cv-t);width:var(--cv-w);height:var(--cv-h)}
.cam-bb--p{left:var(--cp-l);top:var(--cp-t);width:var(--cp-w);height:var(--cp-h)}
.cam[data-mode="day"] .cam-bb{border-color:var(--cam-day)}
.cam[data-mode="day"] .cam-bb span{background:var(--cam-day);color:#16130a}
.cam[data-mode="thermal"] .cam-bb{border-color:var(--cam-thermal)}
.cam[data-mode="thermal"] .cam-bb span{background:var(--cam-thermal);color:#1a1204}

.cam.anim .cam-bb{animation:camTrack 2.6s ease-in-out infinite}
@keyframes camTrack{0%,100%{opacity:1}50%{opacity:.62}}

.cam-scan{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
  transition:opacity .35s var(--cam-ease)}
.cam[data-mode="night"] .cam-scan{opacity:1}
.cam-vig{position:absolute;inset:0;z-index:7;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.6);transition:box-shadow .35s var(--cam-ease)}
.cam[data-mode="day"] .cam-vig{box-shadow:inset 0 0 60px rgba(0,0,0,.3)}

.cam-hud{position:absolute;top:10px;left:12px;right:12px;z-index:8;pointer-events:none;
  display:flex;justify-content:space-between;font-family:var(--cam-mono);font-size:10px;
  letter-spacing:.05em;color:rgba(240,248,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.85)}

.cam.zoom .cam-stage{transform:scale(4);
  transform-origin:calc(var(--pl-l) + var(--pl-w) / 2) calc(var(--pl-t) + var(--pl-h) / 2)}
.cam.zoom .cam-bb{opacity:0;animation:none}   
.cam-zoomtag{position:absolute;left:12px;bottom:10px;z-index:8;opacity:0;
  font-family:var(--cam-mono);font-size:9px;letter-spacing:.08em;color:#dfe8f2;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);border-radius:5px;
  padding:2px 7px;transition:opacity .3s var(--cam-ease)}
.cam.zoom .cam-zoomtag{opacity:1}

.cam-sim{position:absolute;right:12px;bottom:10px;z-index:8;font-family:var(--cam-mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.18);border-radius:5px;
  padding:2px 7px;transition:opacity .3s var(--cam-ease)}

@media (prefers-reduced-motion: reduce){
  .cam.anim .cam-bb{animation:none}
  .cam-stage,.cam-shot{transition-duration:.001ms}
}

.pv{--pv-body-1:#7b8794;--pv-body-2:#2b323b;--pv-body-3:#171b21;--pv-body-4:#242a32;--pv-body-5:#5a636e;
  --pv-r:38px;--pv-rail:9px;--pv-split:50%;
  max-width:860px;margin:clamp(1.6rem,3.4vw,2.6rem) auto 0;display:flex;flex-direction:column;gap:14px}

.pv-phone{position:relative;width:100%;aspect-ratio:2.14/1;border-radius:var(--pv-r);padding:var(--pv-rail);
  
  background:linear-gradient(118deg,var(--pv-body-1) 0%,var(--pv-body-2) 15%,var(--pv-body-3) 33%,
    var(--pv-body-4) 60%,var(--pv-body-5) 86%,var(--pv-body-2) 100%);
  box-shadow:0 46px 90px -46px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.14)}

.pv-phone::after{content:'';position:absolute;inset:0;border-radius:var(--pv-r);pointer-events:none;z-index:9;
  background:linear-gradient(202deg,rgba(255,255,255,.17),transparent 24%,transparent 74%,rgba(255,255,255,.08))}

.pv-nub{position:absolute;background:linear-gradient(180deg,var(--pv-body-1),var(--pv-body-2));border-radius:2px}

.pv-nub--a{top:-2px;left:25.5%;width:5%;height:4px}

.pv-nub--b{top:-2px;left:33%;width:5%;height:4px}

.pv-nub--c{bottom:-2px;left:29%;width:9%;height:4px}

.pv-screen{position:absolute;inset:var(--pv-rail);border-radius:calc(var(--pv-r) - 8px);overflow:hidden;
  background:#04060a;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.9)}

.pv-island{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:11px;height:24%;z-index:6;
  border-radius:99px;background:#04060a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}

.pv-island::after{content:'';position:absolute;left:50%;top:20%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;box-shadow:0 0 0 .5px rgba(255,255,255,.12);
  background:radial-gradient(circle at 36% 32%,#31435e,#05070c 72%)}

.pv-pane{position:absolute;top:0;bottom:0;left:0;width:100%;overflow:hidden;
  transition:left .55s var(--ease),width .55s var(--ease),clip-path .55s var(--ease)}

.pv-pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.pv[data-split="pane"] .pv-pane--ir{width:var(--pv-split)}

.pv[data-split="pane"] .pv-pane--col{left:var(--pv-split);width:calc(100% - var(--pv-split))}

.pv[data-split="clip"] .pv-pane--col{clip-path:inset(0 0 0 var(--pv-split))}

.pv[data-ir="sim"] .pv-pane--ir img{filter:grayscale(1) brightness(.74) contrast(1.45)}

.pv[data-ir="sim"] .pv-fx--vig{box-shadow:none;
  background:radial-gradient(78% 96% at 42% 74%,transparent 26%,rgba(0,0,0,.4) 62%,rgba(2,4,6,.9) 100%)}

.pv[data-mode="col"]{--pv-split:0%}

.pv[data-mode="ir"]{--pv-split:100%}

.pv-fx{position:absolute;inset:0;pointer-events:none}

.pv-fx--vig{box-shadow:inset 0 0 80px rgba(0,0,0,.5)}

.pv[data-ir="real"] .pv-fx--scan,.pv[data-ir="real"] .pv-fx--grain{opacity:0}

.pv-fx--scan{opacity:.2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px)}

.pv-fx--grain{opacity:.3;mix-blend-mode:screen;background-size:150px 150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.pv-seam{position:absolute;top:0;bottom:0;left:var(--pv-split);width:2px;z-index:4;
  background:var(--accent);box-shadow:0 0 14px rgba(0,0,0,.7);opacity:0;transition:opacity .4s}

.pv[data-mode="cmp"] .pv-seam{opacity:.92}

.pv-tag{position:absolute;top:9px;z-index:5;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  padding:.2rem .45rem;border-radius:4px;background:rgba(4,6,10,.62);color:#fff;opacity:0;transition:opacity .4s;
  text-shadow:0 1px 5px rgba(0,0,0,.9)}

.pv[data-mode="cmp"] .pv-tag{opacity:1}

.pv-tag--l{left:9px}

.pv-tag--r{right:9px;color:var(--accent)}

.pv-osd{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;
  gap:7px;font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;color:rgba(255,255,255,.94);
  text-shadow:0 1px 6px rgba(0,0,0,.95);font-variant-numeric:tabular-nums;white-space:nowrap}

.pv-osd i{width:6px;height:6px;border-radius:50%;background:#ff4d43;box-shadow:0 0 9px #ff4d43}

.pv-sim{position:absolute;bottom:10px;right:12px;z-index:5;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;color:#fff;background:rgba(4,6,10,.72);border:1px solid rgba(255,255,255,.26);padding:.18rem .45rem}

.pv-foot{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

.pv-foot--ch{margin-bottom:-6px}

.pv-foot--ch .pv-btn{text-transform:none;letter-spacing:.04em}

.pv-btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:0;padding:.55rem .9rem;min-height:40px;
  transition:color .18s,background-color .18s,border-color .18s}

.pv-btn:hover{color:var(--ink-0);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}

.pv-btn[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:var(--accent);color:var(--accent)}

.pv-note{margin:.2rem 0 0;font-size:.8rem;line-height:1.75;color:var(--muted)}

.pv-note b{color:var(--ink-2);font-weight:500}

@media(prefers-reduced-motion:reduce){.pv-pane,.pv-seam,.pv-tag{transition:none}}

.pv[data-mode="cmp"] .pv-osd{top:auto;bottom:9px;left:10px;transform:none}

@media(max-width:620px){
  .pv{--pv-r:24px;--pv-rail:6px}
  .pv-osd{font-size:.56rem;gap:5px}
  .pv-tag{font-size:.56rem;letter-spacing:.1em}
  .pv[data-mode="cmp"] .pv-osd{display:none}}

.rsc{
  --rsc-scr:#1e2833; --rsc-side:#26313d; --rsc-tile:#33404d; --rsc-tile-2:#3c4a58;
  --rsc-ink:#eef3f8; --rsc-mut:#8fa0b0; --rsc-line:rgba(255,255,255,.09);
  --rsc-ok:#3ddc84; --rsc-warn:#f5b301; --rsc-err:#ff5b5b; --rsc-blue:#5ec8f5;
  --rsc-mono:var(--mono);
  
  --rsc-amb:.34; --rsc-lamp:0; --rsc-strip:0; --rsc-tv:0; --rsc-night:0; --rsc-bright:1;
  position:relative;container-type:inline-size}

.rsc-room{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(10px,1.6cqw,26px);align-items:center;padding:clamp(14px,2cqw,30px);
  overflow:hidden;border-radius:12px;background:radial-gradient(120% 100% at 30% 0%,#171b21,#0a0c0f 72%)}
@container (max-width:640px){.rsc-room{grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 10px}}

.rsc-room::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(66% 58% at 76% 54%,rgba(255,208,140,.18),rgba(255,208,140,0) 70%);
  opacity:var(--rsc-amb);transition:opacity .6s ease}

.rsc-house{width:100%;height:auto;display:block}
.rsc-col{min-width:0}
.rsc-house .wl{fill:none;stroke:#39434f;stroke-width:2.2;stroke-linejoin:round}
.rsc-house .rm{fill:#0f141a}
.rsc-house .fx{fill:#28313b}
.rsc-house .fx2{fill:#1c242c}
.rsc-house .lit{opacity:0;transition:opacity .55s ease}
.rsc-house .lbl{fill:#75828f;font-family:var(--rsc-mono);font-size:6.6px;letter-spacing:.03em;
  transition:fill .45s ease}
.rsc-house .lbl.on{fill:#eaf1f8}
.rsc-house .win{fill:#0c1117;transition:fill .55s ease}
.rsc-house .win.on{fill:#f2c877}
.rsc-house .blind{transition:transform .6s cubic-bezier(.3,.7,.3,1);transform:translateY(-26px)}
.rsc-house .blind.down{transform:translateY(0)}
.rsc-house .gdoor{transition:transform .8s cubic-bezier(.3,.7,.3,1)}
.rsc-house .gdoor.open{transform:translateY(-26px)}
.rsc-house .tvscr{fill:#131920;transition:fill .4s}
.rsc-house .tvscr.on{fill:#4f92d8}
.rsc-house .lockb{fill:#4a5460;transition:fill .4s}
.rsc-house .lockb.on{fill:#3ddc84}
.rsc-house .perim{fill:none;stroke:transparent;stroke-width:2.4;stroke-dasharray:5 4;transition:stroke .45s}
.rsc[data-arm="away"] .rsc-house .perim{stroke:#ff5b5b}
.rsc[data-arm="stay"] .rsc-house .perim{stroke:#f5b301}
.rsc-house .flick{animation:rscTvF 3.2s ease-in-out infinite}
@keyframes rscTvF{0%,100%{opacity:1}42%{opacity:.58}68%{opacity:.84}}
.rsc-cap{margin:.55em 0 0;text-align:center;font-family:var(--rsc-mono);
  font-size:clamp(7px,.84cqw,11px);letter-spacing:.07em;color:#75828f}
.rsc-panel{position:relative;width:100%;aspect-ratio:1.62/1;border-radius:14px;padding:1.15%;
  background:linear-gradient(150deg,#fbfaf8 0%,#f0eeea 40%,#e2ded8 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(0,0,0,.16) inset,
    0 26px 44px -20px rgba(0,0,0,.9),0 2px 5px rgba(0,0,0,.5)}
.rsc-screen{position:absolute;inset:1.15%;border-radius:8px;overflow:hidden;display:flex;
  background:var(--rsc-scr);color:var(--rsc-ink);
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.85);
  filter:brightness(calc(.42 + var(--rsc-bright) * .58));transition:filter .5s ease}
.rsc-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:30;
  background:linear-gradient(196deg,rgba(255,255,255,.11),transparent 26%,transparent 76%,rgba(255,255,255,.05))}

.rsc-nav{flex:0 0 27%;min-width:0;background:var(--rsc-side);display:flex;flex-direction:column;
  border-right:1px solid rgba(0,0,0,.4)}
.rsc-brand{display:flex;align-items:center;gap:6%;padding:6% 7% 3%}
.rsc-back{border:0;background:none;color:var(--rsc-ink);cursor:pointer;padding:0;line-height:0;flex:0 0 auto}
.rsc-back svg{width:clamp(11px,1.5cqw,17px);height:auto}
.rsc-word{font-weight:700;letter-spacing:.14em;font-size:clamp(8px,1.35cqw,15px);color:#fff}
.rsc-word i{font-style:normal;display:inline-block;width:.78em;height:.78em;border-radius:50%;
  border:.17em solid #fff;margin-left:.1em;vertical-align:-.06em}
.rsc-clock{padding:0 7% 5%;font-family:var(--rsc-mono);font-size:clamp(6px,.92cqw,11px);color:var(--rsc-mut);
  border-bottom:1px solid rgba(0,0,0,.35);letter-spacing:.02em}
.rsc-navlist{list-style:none;margin:0;padding:3% 0 0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rsc-navbtn{display:flex;align-items:center;gap:8%;width:100%;border:0;background:none;cursor:pointer;
  padding:3.4% 7%;color:var(--rsc-mut);font:inherit;font-size:clamp(7px,1.12cqw,13px);text-align:left;
  border-left:3px solid transparent;transition:color .18s,background-color .18s}
.rsc-navbtn svg{width:clamp(9px,1.3cqw,15px);height:auto;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rsc-navbtn:hover{color:var(--rsc-ink)}
.rsc-navbtn[aria-selected="true"]{color:var(--rsc-ok);background:rgba(0,0,0,.22);border-left-color:var(--rsc-ok)}

.rsc-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.rsc-top{display:flex;align-items:center;gap:2.6%;padding:2.4% 3.4%;border-bottom:1px solid rgba(0,0,0,.34)}
.rsc-arm{border:0;background:none;cursor:pointer;padding:0 .6%;line-height:0;color:#5c6b78;transition:color .2s,filter .2s}
.rsc-arm svg{width:clamp(12px,1.75cqw,21px);height:auto;fill:currentColor}
.rsc-arm:hover{filter:brightness(1.35)}
.rsc[data-arm="away"] .rsc-arm[data-arm="away"]{color:var(--rsc-err)}
.rsc[data-arm="stay"] .rsc-arm[data-arm="stay"]{color:var(--rsc-warn)}
.rsc[data-arm="off"]  .rsc-arm[data-arm="off"]{color:var(--rsc-ok)}
.rsc-siren{margin-left:auto;border:0;background:none;cursor:pointer;padding:0;line-height:0;color:#57646f}
.rsc-siren svg{width:clamp(12px,1.75cqw,21px);height:auto;fill:currentColor}
.rsc[data-alarm="1"] .rsc-siren{color:var(--rsc-err);animation:rscPulse .7s steps(1) infinite}
@keyframes rscPulse{50%{opacity:.25}}
.rsc-div{width:1px;align-self:stretch;background:rgba(255,255,255,.13);margin:0 1.2%}
.rsc-ico{position:relative;border:0;background:none;cursor:pointer;padding:0 .5%;line-height:0;color:#8fa0b0}
.rsc-ico svg{width:clamp(11px,1.6cqw,19px);height:auto;fill:currentColor}
.rsc-ico:hover{color:var(--rsc-ink)}
.rsc-badge{position:absolute;top:-22%;right:-14%;min-width:clamp(9px,1.25cqw,15px);height:clamp(9px,1.25cqw,15px);
  border-radius:99px;background:var(--rsc-err);color:#fff;font-size:clamp(5px,.72cqw,9px);font-weight:700;
  display:grid;place-items:center;padding:0 .28em;line-height:1}
.rsc-badge[hidden]{display:none}
.rsc-avatar{width:clamp(15px,2.1cqw,26px);height:clamp(15px,2.1cqw,26px);border-radius:50%;flex:0 0 auto;
  background:linear-gradient(150deg,#6ea8d8,#3b6d97);display:grid;place-items:center;
  font-size:clamp(6px,.9cqw,11px);font-weight:700;color:#fff;margin-left:1.4%}

.rsc-view{flex:1 1 auto;min-height:0;overflow:hidden;padding:3.2% 3.4% 6%;position:relative;display:flex;flex-direction:column;justify-content:center}
.rsc-view[hidden]{display:none}
.rsc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5% 2%;align-content:center}
.rsc-t{border:0;background:none;cursor:pointer;padding:0;display:flex;flex-direction:column;
  align-items:center;gap:.42em;color:var(--rsc-mut);font:inherit;font-size:clamp(6px,.95cqw,12px);
  line-height:1.28;text-align:center}
.rsc-t .d{width:100%;aspect-ratio:1;border-radius:50%;background:var(--rsc-tile);display:grid;place-items:center;
  box-shadow:inset -.1em -.1em .3em rgba(0,0,0,.35);transition:background-color .25s,box-shadow .25s}
.rsc-t svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:#7d8b98;transition:color .25s}
.rsc-t svg.fill{fill:currentColor;stroke:none}
.rsc-t[aria-pressed="true"] .d{background:var(--rsc-tile-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rsc-t[aria-pressed="true"] svg{color:var(--c,#f5c451);filter:drop-shadow(0 0 .28em currentColor)}
.rsc-t[aria-pressed="true"]{color:var(--rsc-ink)}
.rsc-t:focus-visible,.rsc-navbtn:focus-visible,.rsc-arm:focus-visible,.rsc-ico:focus-visible,
.rsc-dot:focus-visible,.rsc-row:focus-visible,.rsc-cam:focus-visible,.rsc-sw:focus-visible{
  outline:2px solid var(--rsc-ok);outline-offset:2px;border-radius:6px}
.rsc-dots{position:absolute;left:0;right:0;bottom:2.4%;display:flex;justify-content:center;gap:.2em}
.rsc-dot{width:24px;height:24px;border-radius:50%;border:0;padding:0;
  background:transparent;
  background-image:radial-gradient(circle at 50% 50%,currentColor 0 4px,transparent 4.5px);
  color:#4b5a67;cursor:pointer;transition:color .2s}
.rsc-dot[aria-current="true"]{color:#eef3f8}

.rsc-list{display:flex;flex-direction:column;gap:2.6%;height:100%;overflow:hidden}
.rsc-row{display:flex;align-items:center;gap:3%;border:0;cursor:pointer;text-align:left;font:inherit;
  font-size:clamp(6.5px,1.02cqw,13px);color:var(--rsc-ink);padding:2.4% 3%;border-radius:.5em;
  background:rgba(255,255,255,.045);transition:background-color .2s}
.rsc-row:hover{background:rgba(255,255,255,.09)}
.rsc-row svg{width:clamp(11px,1.5cqw,18px);height:auto;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:var(--rsc-ok)}
.rsc-row s{text-decoration:none;margin-left:auto;color:var(--rsc-mut);font-family:var(--rsc-mono);
  font-size:clamp(5.5px,.85cqw,11px)}
.rsc-row b{font-weight:500}
.rsc-row em{font-style:normal;display:block;color:var(--rsc-mut);font-size:.84em;margin-top:.15em}

.rsc-cams{display:grid;grid-template-columns:repeat(2,1fr);gap:3%;height:100%}
.rsc-cam{position:relative;border:0;padding:0;cursor:pointer;border-radius:.45em;overflow:hidden;
  background:#0c1016;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rsc-cam img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.7) brightness(.78)}
.rsc-cam span{position:absolute;left:4%;bottom:4%;font-family:var(--rsc-mono);color:#dcecf7;
  font-size:clamp(5.5px,.82cqw,10px);letter-spacing:.05em;text-shadow:0 1px 3px #000}
.rsc-cam i{position:absolute;right:4%;top:5%;width:.42em;height:.42em;border-radius:50%;background:var(--rsc-err);
  box-shadow:0 0 .4em var(--rsc-err);font-size:clamp(9px,1.3cqw,16px)}
.rsc-cam.big{grid-column:span 2;grid-row:span 2}

.rsc-zones{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4%;align-content:start}
.rsc-z{display:flex;align-items:center;gap:.6em;padding:2.4% 3%;border-radius:.45em;
  background:rgba(255,255,255,.045);font-family:var(--rsc-mono);font-size:clamp(5.5px,.86cqw,11px);
  color:var(--rsc-mut)}
.rsc-z i{width:.5em;height:.5em;border-radius:50%;background:#5a6874;flex:0 0 auto;font-size:1.3em}
.rsc-z b{font-weight:400;color:var(--rsc-ink);margin-right:auto}
.rsc-z[data-s="sealed"] i{background:var(--rsc-ok);box-shadow:0 0 .5em var(--rsc-ok)}
.rsc-z[data-s="open"] i{background:var(--rsc-warn);box-shadow:0 0 .5em var(--rsc-warn)}
.rsc-z[data-s="bypass"] i{background:var(--rsc-mut);box-shadow:none}
.rsc-nojs{display:none;margin:0;padding:8% 7%;color:var(--rsc-mut);font-size:clamp(11px,1.4cqw,14px);line-height:1.5;text-align:center}

.rsc-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.6%;overflow:hidden}
.rsc-log li{display:flex;gap:.7em;align-items:baseline;padding:1.9% 3%;border-radius:.4em;
  background:rgba(255,255,255,.04);border-left:2px solid var(--rsc-ok);
  font-family:var(--rsc-mono);font-size:clamp(5.5px,.86cqw,11px);color:var(--rsc-ink)}
.rsc-log li time{color:var(--rsc-mut);flex:0 0 auto}
.rsc-log li.warn{border-left-color:var(--rsc-warn)}
.rsc-log li.err{border-left-color:var(--rsc-err)}

.rsc-sets{display:flex;flex-direction:column;gap:2.6%}
.rsc-set{display:flex;align-items:center;gap:3%;padding:2.4% 3%;border-radius:.5em;
  background:rgba(255,255,255,.045);font-size:clamp(6.5px,1.02cqw,13px)}
.rsc-set b{font-weight:500;margin-right:auto}
.rsc-sw{position:relative;width:2.6em;height:1.35em;border-radius:99px;border:0;cursor:pointer;flex:0 0 auto;
  background:#4d5a66;transition:background-color .22s}
.rsc-sw::after{content:"";position:absolute;top:.16em;left:.16em;width:1.03em;height:1.03em;border-radius:50%;
  background:#fff;transition:transform .22s}
.rsc-sw[aria-pressed="true"]{background:var(--rsc-ok)}
.rsc-sw[aria-pressed="true"]::after{transform:translateX(1.25em)}
.rsc-rng{flex:0 0 42%;accent-color:var(--rsc-ok)}

.rsc-sim{position:absolute;right:2%;top:2%;z-index:40;font-family:var(--rsc-mono);
  font-size:10px;letter-spacing:.12em;color:#dbe6ef;background:rgba(6,10,14,.66);
  border:1px solid rgba(255,255,255,.16);padding:.28em .6em;border-radius:99px;pointer-events:none}
.rsc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rsc-hint{margin:.7em 0 0;font-family:var(--rsc-mono);font-size:11px;color:#8b93a0;text-align:center}
.rsc-hint b{color:var(--gold);font-weight:500}

@media(prefers-reduced-motion:reduce){.rsc *,.rsc{transition:none!important;animation:none!important}}

@container (max-width:640px){
  .rsc-dots{gap:.2em}
  .rsc-dot{width:24px;height:24px;border-radius:50%;background:transparent;
    background-image:radial-gradient(circle at 50% 50%,currentColor 0 4px,transparent 4.5px);
    color:rgba(238,243,248,.34)}
  .rsc-dot[aria-current="true"]{background-color:transparent;color:#eef3f8}
}

@container (max-width:640px){
  .rsc-panel{aspect-ratio:1/1.24;padding:2.4%}
  .rsc-navbtn{min-height:34px;font-size:11px}
  .rsc-back,.rsc-ico,.rsc-siren{min-width:26px;min-height:26px}
  
  .rsc-arm{min-width:26px;min-height:26px;padding:5px 7px}
  .rsc-sim{position:static;justify-self:end}
  
  .rsc-nav{flex:0 0 20%}
  .rsc-brand{flex-direction:column;align-items:center;gap:4px;padding:12% 4% 6%}
  .rsc-word{font-size:9px}
  .rsc-clock{padding:0 6% 8%;text-align:center;font-size:8px;line-height:1.35}
  .rsc-navbtn{justify-content:center;gap:0;padding:0;min-height:40px;border-left-width:2px}
  .rsc-navbtn svg{width:16px}
  .rsc-navbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .rsc-top{gap:1.4%;padding:2.6% 2.4%}
  .rsc-div{margin:0 .4%}
  .rsc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 4%;padding:0 2%}
  .rsc-view{padding:3% 3% 9%}
  .rsc-t{font-size:9px;gap:.3em;overflow-wrap:anywhere;hyphens:auto}
  .rsc-t .d{width:62%}
}

.kx-wrap{
  container-type:inline-size;container-name:kxc;
  --kx-brand:"CADDX";
  --kx-lcd:#c3e7df; --kx-lcd-2:#a8d6cc; --kx-lcd-ink:rgba(14,48,52,.94); --kx-lcd-off:rgba(38,92,94,.12);
  --kx-lcd-glow:rgba(150,236,224,.34);
  --kx-shell-1:#fbfaf8; --kx-shell-2:#f3f0eb; --kx-shell-3:#e8e4dd; --kx-shell-4:#ddd8d0;
  --kx-bezel-1:#5c5d61; --kx-bezel-2:#4a4b4f; --kx-bezel-3:#3c3d41;
  --kx-key-1:#5b636e; --kx-key-2:#454d57; --kx-key-3:#39404a;
  --kx-legend:#c3e9ef; --kx-legend-glow:rgba(150,236,224,.55);
  --kx-gold:#f0b429; --kx-arm:var(--accent);
  --kx-r:0px; --kx-dev-w:340px;
  --line:rgba(255,255,255,.08);
  position:relative}
.kx-scr{position:relative;overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(70% 58% at 8% -6%,rgba(255,244,228,.11) 0%,rgba(255,244,228,.03) 45%,rgba(255,244,228,0) 70%),
    linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 76.6%,rgba(0,0,0,.34) 76.6%,rgba(0,0,0,.34) 76.8%,
      rgba(255,255,255,.05) 76.8%,rgba(255,255,255,.05) 77%,rgba(0,0,0,0) 77%) 0 0/100% 72% no-repeat,
    linear-gradient(180deg,#242d37 0%,#1f2730 58%,#1b222a 100%)}
.kx-sim{position:absolute;top:12px;right:12px;z-index:6;font-family:var(--mono);font-weight:600;font-size:10px;
  letter-spacing:.16em;color:#eef1f3;background:rgba(10,14,18,.78);border:1px solid rgba(255,255,255,.26);
  padding:5px 9px;border-radius:var(--kx-r);pointer-events:none}
.kx{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;
  padding:50px clamp(14px,4cqi,32px) clamp(18px,3cqi,26px)}
.kx-col{min-width:0;max-width:100%;width:100%}

.hk-plate{position:relative;width:min(100%,calc(var(--kx-dev-w) + 96px));margin:0 auto;
  padding:clamp(26px,9cqi,48px) clamp(20px,7cqi,48px) clamp(30px,9cqi,54px);background:#4d555d;
  
  box-shadow:0 0 0 1px rgba(4,7,10,.7),0 22px 30px -18px rgba(0,0,0,.75)}
.hk-steel{position:absolute;inset:0;width:100%;height:100%;display:block}

.hk-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.42),inset -1px -1px 0 rgba(0,0,0,.45),inset 0 0 0 3px rgba(255,255,255,.04)}
.hk-spill{position:absolute;left:50%;top:4%;width:118%;height:52%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(46% 44% at 50% 38%,rgba(150,236,224,.24),rgba(150,236,224,.07) 55%,rgba(150,236,224,0) 75%);
  mix-blend-mode:screen;transition:opacity .4s}
.hk-plate:has(.kx-dev[data-bl="0"]) .hk-spill{opacity:.4}
.hk-screw{position:absolute;width:13px;height:13px;border-radius:50%;z-index:1;--a:18deg;
  background:radial-gradient(circle at 36% 30%,#f4f6f8 0 10%,#c6cbd0 28%,#8a9198 60%,#5d636a 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.38),0 0 0 1.5px rgba(0,0,0,.34),0 1px 0 1.5px rgba(255,255,255,.22)}
.hk-screw::before,.hk-screw::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.6px;
  background:#2f3439;box-shadow:0 .6px 0 rgba(255,255,255,.35);transform:translate(-50%,-50%) rotate(var(--a))}
.hk-screw::after{transform:translate(-50%,-50%) rotate(calc(var(--a) + 90deg))}
.hk-screw--tl{top:12px;left:12px;--a:22deg}.hk-screw--tr{top:12px;right:12px;--a:-31deg}
.hk-screw--bl{bottom:12px;left:12px;--a:57deg}.hk-screw--br{bottom:12px;right:12px;--a:8deg}

.kx-dev{width:min(var(--kx-dev-w),100%);margin:0 auto;position:relative;z-index:2;
  filter:drop-shadow(0 9px 10px rgba(0,0,0,.42)) drop-shadow(0 2px 1.5px rgba(0,0,0,.4))}
.kx-body{position:relative;border-radius:14px 14px 7px 7px;padding:11px 11px 16px;
  background:
    radial-gradient(64% 22% at 54% 8%,rgba(150,236,224,.18),rgba(150,236,224,0) 72%),
    linear-gradient(90deg,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 6px),
    linear-gradient(152deg,var(--kx-shell-1) 0%,var(--kx-shell-2) 36%,var(--kx-shell-3) 78%,var(--kx-shell-4) 100%);
  box-shadow:inset 0 1px 0 #fff,inset -1px 0 0 rgba(0,0,0,.10),inset 0 -2px 0 rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.2)}

.kx-body::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .45 0 0 0 0 .45 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.kx-body::after{content:"";position:absolute;inset:3px 3px 4px;border-radius:11px 11px 4px 4px;
  border:1px solid rgba(0,0,0,.05);pointer-events:none}
.kx-bezel{position:relative;display:flex;align-items:center;gap:9px;padding:11px 10px;border-radius:7px;
  background:linear-gradient(160deg,var(--kx-bezel-1) 0%,var(--kx-bezel-2) 44%,var(--kx-bezel-3) 100%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.10),0 1px 0 rgba(255,255,255,.85)}
.kx-led{flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:3px solid #2f8b3d;background:transparent;
  transition:border-color .3s,box-shadow .3s}
.kx-dev[data-s="ready"] .kx-led,
.kx-dev[data-s="disarmed"] .kx-led{border-color:#3ddc59;box-shadow:0 0 9px 1px rgba(61,220,89,.55),inset 0 0 5px rgba(61,220,89,.35)}
.kx-dev[data-s="notready"] .kx-led{border-color:#6d7a6f;box-shadow:none}
.kx-dev[data-s="exit"] .kx-led,
.kx-dev[data-s="entry"] .kx-led{border-color:var(--kx-gold);box-shadow:0 0 9px 1px rgba(240,180,41,.55)}
.kx-dev[data-s="armed"] .kx-led,
.kx-dev[data-s="stay"] .kx-led{border-color:var(--kx-arm);box-shadow:0 0 9px 1px rgba(232,102,2,.55)}
.kx-dev[data-s="alarm"] .kx-led{border-color:var(--kx-arm);box-shadow:0 0 14px 3px rgba(232,102,2,.78)}
.kx-dev[data-s="alarm"]:not(.kx-rm) .kx-led{animation:kxled .5s steps(1) infinite}
@keyframes kxled{50%{border-color:#5a2a14;box-shadow:none}}

.kx-lcd{position:relative;flex:1 1 auto;min-width:0;border-radius:3px;overflow:hidden;
  background:linear-gradient(178deg,var(--kx-lcd) 0%,var(--kx-lcd-2) 100%);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.34),inset 0 0 0 1px rgba(0,0,0,.22),0 0 12px 1px var(--kx-lcd-glow);transition:filter .25s}
.kx-dev[data-bl="0"] .kx-lcd{filter:brightness(.72) saturate(.8)}
.kx-lcd canvas{display:none;width:100%;height:auto;vertical-align:top}
.kx-on .kx-lcd canvas{display:block}
.kx-fb{display:block;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.06em;
  color:#123c40;padding:7px 8px;text-align:center;white-space:pre}
.kx-on .kx-fb{display:none}

.kx-lcd::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.16),rgba(0,0,0,0) 22%),
    linear-gradient(112deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.06) 26%,rgba(255,255,255,0) 46%)}

.kx-slots{display:flex;justify-content:space-between;padding:0 12px;margin:6px 0 9px}
.kx-slots i{width:34px;height:3px;border-radius:2px;background:#2a2f35;box-shadow:0 1px 0 rgba(255,255,255,.8)}
.kx-keys{display:grid;grid-template-columns:1fr .34fr 1fr 1fr 1fr .34fr 1fr;
  gap:clamp(6px,1.9cqi,9px) 0;column-gap:clamp(4px,1.6cqi,8px);align-items:center;padding:0 3px 2px}

.kx-k{position:relative;aspect-ratio:1;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:clamp(12px,4.2cqi,15px);
  color:var(--kx-legend);text-shadow:0 0 5px var(--kx-legend-glow),0 0 1px var(--kx-legend-glow);
  background:radial-gradient(78% 78% at 32% 26%,var(--kx-key-1) 0%,var(--kx-key-2) 46%,var(--kx-key-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 1px rgba(0,0,0,.5),
    0 0 0 1.5px rgba(0,0,0,.3),0 1px 0 2px rgba(255,255,255,.78),0 2px 3px 1.5px rgba(0,0,0,.14);
  transition:transform .07s,box-shadow .07s,color .12s}
.kx-k--dk{--kx-key-1:#39414b;--kx-key-2:#252c34;--kx-key-3:#191e25}
.kx-k--ent{--kx-key-1:#333b46;--kx-key-2:#1e242b;--kx-key-3:#12171d}
.kx-k svg{width:52%;height:52%;fill:currentColor;filter:drop-shadow(0 0 2px var(--kx-legend-glow))}
.kx-k:hover{color:#e6fdf9}
.kx-k:active,.kx-k.kx-press{transform:translateY(1.5px);color:#effffc;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.62),inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 1.5px rgba(0,0,0,.34),0 1px 0 2px rgba(255,255,255,.7)}
.kx-k:focus-visible{outline:2px solid var(--accent-btn);outline-offset:3px}
.kx-ar{position:absolute;font-size:7px;line-height:1;color:#9fd3cc;pointer-events:none;text-shadow:none}
.kx-ar--u{top:11%}.kx-ar--d{bottom:11%}.kx-ar--l{left:11%}.kx-ar--r{right:11%}
.kx-k[data-k="INFO"]{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:clamp(15px,5cqi,19px)}

.kx-mark{display:block;margin:7px 4px 0;font-family:var(--display);font-size:8.5px;font-weight:700;
  letter-spacing:.24em;color:#5f5b55;text-align:left;line-height:1;min-height:0}
.kx-mark::after{content:var(--kx-brand)}

.hk-hscrew{position:absolute;left:50%;bottom:4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fafafa 0 12%,#c9cbcd 40%,#8f9396 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 1.5px rgba(0,0,0,.08)}
.hk-hscrew::before{content:"";position:absolute;left:1.5px;right:1.5px;top:50%;height:1.3px;margin-top:-.65px;background:#55595c;transform:rotate(-24deg)}

.kx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:18px}
.kx-hint{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#aeb6bf}
.kx-hint b{color:#fff;font-weight:600}
.kx-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px}
.kx-ctl button{min-height:40px;padding:10px 16px;border-radius:var(--kx-r);background:transparent;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.55)}
.kx-ctl button:hover{background:rgba(255,255,255,.07)}
.kx-ctl button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.kx-hand{margin-left:auto;display:inline-flex;align-items:center;min-height:40px}
.kx-dev[data-e="1"]:not(.kx-rm) .kx-body{animation:kxshake .34s}
@keyframes kxshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@container kxc (max-width:420px){
  .hk-screw{width:11px;height:11px}.hk-screw--tl,.hk-screw--tr{top:8px}.hk-screw--bl,.hk-screw--br{bottom:8px}
  .hk-screw--tl,.hk-screw--bl{left:8px}.hk-screw--tr,.hk-screw--br{right:8px}
  .kx-hand{margin-left:0}
  
  .kx{padding-inline:10px}
  .hk-plate{padding:30px 14px 32px}
}

.kx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.kx-dev,.kx-dev *{animation:none!important;transition:none!important}}

.hero__inst { min-width: 0; }
.hs-spec { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 44px 0 0; padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .16); }
.hs-spec li { padding: 18px 16px 0 0; min-width: 0; }
.hs-spec li + li { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .16); }
.hs-spec b { display: block; font-weight: 700; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; color: #fff; white-space: nowrap; }
.hs-spec span { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.4;
  text-transform: uppercase; color: var(--on-dark-2); }
@media (max-width: 479px) { .hs-spec li { padding-right: 8px; } .hs-spec li + li { padding-left: 8px; } .hs-spec span { font-size: 10.5px; letter-spacing: .8px; } }
.hs-cap { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--on-dark-3); }

.kx-lad { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .16); }
.kx-lad li { padding: 9px 6px 0 0; font: 600 10px/1.35 var(--mono); letter-spacing: .08em; color: #7f8a95;
  border-top: 2px solid transparent; margin-top: -1px; transition: color var(--t-s) var(--ease), border-color var(--t-s) var(--ease); }
.kx-lad li[data-s="done"] { color: #c9ced4; }
.kx-lad li[data-s="on"] { color: #fff; border-top-color: var(--accent); }
@container kxc (max-width: 420px) { .kx-lad li { font-size: 8.5px; letter-spacing: .04em; padding-right: 3px; } }

@media (max-width: 600px) {
  .hero { padding-top: 34px; }
  .hero .h1 { margin-bottom: 18px; }
  .hero__copy .lead { font-size: 1rem; line-height: 1.55; }
  .hs-spec { margin-top: 26px; }
  .hs-spec li { padding-top: 14px; }
}

.rvs{
  border-top:1px solid var(--line, color-mix(in oklab, currentColor 16%, transparent));
  padding:var(--rvs-gap,20px) 16px calc(var(--rvs-gap,20px) + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;
}
.rvs__a{
  display:inline-flex;align-items:center;gap:11px;
  
  color:inherit;text-decoration:none;
  font:500 12px/1 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing:.045em;
  padding:7px 9px;border-radius:9px;
  transition:background-color .3s ease;
}
.rvs__a:hover{background:color-mix(in oklab, currentColor 7%, transparent)}
.rvs__a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rvs__t{display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;justify-content:center}
.rvs__lbl{font-weight:400}
.rvs__sep{opacity:.55}
.rvs__nm{font-weight:700;letter-spacing:.02em}
.rvs__a:hover .rvs__nm{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rvs__vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.rvs__mark{width:var(--rvs-mark,21px);height:var(--rvs-mark,21px);flex:none;display:block;
           color:inherit;opacity:.86}
.rvs__br{fill:none;stroke:currentColor;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.rvs__r{fill:currentColor;fill-rule:evenodd;transform-box:fill-box;transform-origin:50% 50%}

.rvs--armed .rvs__br{transform:translate(calc(var(--dx)*2.9px),calc(var(--dy)*2.9px));opacity:.22}
.rvs--armed .rvs__r{opacity:0;transform:scale(.9)}
.rvs--lock .rvs__br{transform:none;opacity:1;
  transition:transform .58s cubic-bezier(.16,.86,.26,1),opacity .34s ease}
.rvs--lock .rvs__r{opacity:1;transform:none;
  transition:opacity .3s ease .17s,transform .46s cubic-bezier(.2,.9,.3,1) .17s}

.rvs--lock .rvs__br:nth-child(2){transition-delay:.05s,.05s}
.rvs--lock .rvs__br:nth-child(3){transition-delay:.1s,.1s}
.rvs--lock .rvs__br:nth-child(4){transition-delay:.15s,.15s}

@media (prefers-reduced-motion:reduce){
  
  .rvs__br,.rvs__r,.rvs--armed .rvs__br,.rvs--armed .rvs__r,.rvs--lock .rvs__br,.rvs--lock .rvs__r{
    transform:none!important;opacity:1!important;transition:none!important}
}

@media(max-width:860px){
  body:has(.callbar) .rvs{padding-bottom:calc(var(--rvs-gap,20px) + 84px + env(safe-area-inset-bottom,0px))}
}
.rvs { background: var(--soft); color: var(--body); --line: var(--hair); --font-mono: var(--mono); }

@media (max-width: 720px) { .ft { padding-bottom: calc(28px + env(safe-area-inset-bottom)); } }