/* Shieldline Security: "control room". Night black and signal amber, JetBrains Mono with Inter Tight, a live camera
   wall (Flip to swap the big feed), a keypad you can arm, alarm sounds synthesised in the browser, a radar of suburbs. */
@font-face{font-family:"JetBrains Mono";src:url(/demos/kit/fonts/jetbrainsmono-normal-400_700.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/demos/kit/fonts/intertight-normal-400_800.woff2) format("woff2");font-weight:400 800;font-display:swap}
.d-security{--k-ink:#e9e7e2;--k-paper:#08090b;--k-accent:#ffb000;--k-accent-ink:#130d00;--k-radius:6px;--k-font:"Inter Tight",system-ui,sans-serif;--k-mono:"JetBrains Mono",ui-monospace,monospace;--line:rgb(255 255 255/.09);--mut:#8d929a;--panel:#111418;
  background:#08090b;color:#e9e7e2;font:400 16px/1.6 var(--k-font)}
.d-security h1,.d-security h2,.d-security h3{margin:0;font-weight:800;letter-spacing:-.035em;line-height:.98}
.d-security .k-loader{background:#08090b}.d-security .k-loader path{stroke:#ffb000}.d-security .k-loader.filled path{fill:#ffb000}
.sl-kicker,.sl-mono{margin:0 0 14px;font:500 12px/1.4 var(--k-mono);letter-spacing:.16em;text-transform:uppercase;color:#ffb000}
.sl-head{position:sticky;top:38px;z-index:50;display:flex;align-items:center;gap:24px;padding:12px 4vw;background:rgb(8 9 11/.94);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.in-frame .sl-head{top:0}
.sl-logo{display:flex;align-items:center;gap:10px;font:700 17px/1 var(--k-mono);letter-spacing:.16em;text-decoration:none}
.sl-logo svg{width:28px;height:28px;fill:none;stroke:#ffb000;stroke-width:2;stroke-linejoin:round}
.sl-live{display:flex;align-items:center;gap:8px;margin:0;font:500 12px var(--k-mono);color:var(--mut)}
.sl-live i{width:8px;height:8px;border-radius:50%;background:#2fd36b;box-shadow:0 0 0 0 rgb(47 211 107/.6);animation:sl-ping 2s infinite}
@keyframes sl-ping{70%{box-shadow:0 0 0 9px rgb(47 211 107/0)}100%{box-shadow:0 0 0 0 rgb(47 211 107/0)}}
.sl-nav{display:flex;gap:24px;margin-left:auto}
.sl-nav a{text-decoration:none;font-weight:500;color:#c9c7c2}
.sl-panic{min-height:46px;padding:0 18px;font:600 14px var(--k-mono)}

.sl-hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:4vw;align-items:center;min-height:calc(100svh - 110px);padding:6vh 4vw}
.sl-hero h1{font-size:clamp(50px,6.4vw,104px)}
.sl-scr{display:block;font-family:var(--k-mono);font-weight:700;letter-spacing:-.04em;color:#ffb000}
.sl-lede{max-width:46ch;margin:22px 0 28px;color:#b8b6b0;font-size:18px}
.sl-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.sl-cta{min-height:56px;padding:0 24px;font-weight:700}
.sl-link{font:500 14px var(--k-mono);color:#e9e7e2}
.sl-strip{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:34px;margin:40px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.sl-strip dt{font:500 11px var(--k-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.sl-strip dd{margin:4px 0 0;font:700 30px/1 var(--k-mono)}

.sl-wall{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(110px,11vw,170px);gap:6px;padding:6px;background:#000;border:1px solid var(--line);border-radius:10px;box-shadow:0 40px 80px -40px rgb(255 176 0/.25)}
.sl-cam{position:relative;padding:0;border:0;overflow:hidden;background:#111;border-radius:3px;cursor:zoom-in}
.sl-cam:first-child{grid-column:span 2;grid-row:span 2;cursor:default}
.sl-cam img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(.8) sepia(.25);transform:scale(1.06)}
.sl-cam::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(transparent 0 2px,rgb(0 0 0/.28) 3px 4px);pointer-events:none}
.sl-cam::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,transparent 50%,rgb(0 0 0/.65));pointer-events:none}
.sl-cam-t{position:absolute;left:8px;top:7px;z-index:2;font:500 10px/1.3 var(--k-mono);color:#fff;text-align:left;text-shadow:0 1px 2px #000;white-space:pre}
.sl-cam:first-child .sl-cam-t{font-size:12px;left:12px;top:10px}
.sl-rec{position:absolute;right:8px;top:7px;z-index:2;display:flex;align-items:center;gap:5px;font:700 10px var(--k-mono);font-style:normal;color:#fff}
.sl-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:sl-blink 1.2s steps(2,start) infinite}
@keyframes sl-blink{to{visibility:hidden}}
.sl-motion{position:absolute;z-index:2;left:38%;top:42%;width:18%;height:34%;border:1.5px solid #ffb000;animation:sl-track 7s ease-in-out infinite}
.sl-motion small{position:absolute;left:-1.5px;top:-17px;padding:1px 4px;background:#ffb000;color:#130d00;font:700 9px var(--k-mono);white-space:nowrap}
@keyframes sl-track{0%,12%{opacity:0;transform:translate(-80%,10%)}20%{opacity:1}50%{transform:translate(40%,0)}80%{opacity:1;transform:translate(120%,8%)}92%,100%{opacity:0;transform:translate(160%,8%)}}

.sl-arm{display:grid;grid-template-columns:1fr 420px;gap:6vw;align-items:center;padding:14vh 4vw;border-top:1px solid var(--line)}
.sl-arm h2,.sl-sec-head h2,.sl-sounds h2,.sl-areas h2,.sl-check h2{font-size:clamp(40px,5vw,78px)}
.sl-arm-copy>p:not(.sl-kicker){max-width:48ch;color:#b8b6b0;font-size:17px}
.sl-zones{display:grid;gap:6px;margin:26px 0 0;padding:0;list-style:none;font:500 14px var(--k-mono)}
.sl-zones li{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:6px;color:var(--mut);transition:color .3s,border-color .3s}
.sl-zones i{width:10px;height:10px;border-radius:50%;background:#2a2e34;transition:background .3s,box-shadow .3s}
.sl-zones li.on{color:#e9e7e2;border-color:rgb(255 176 0/.4)}
.sl-zones li.on i{background:#ffb000;box-shadow:0 0 12px #ffb000}
.sl-pad{display:grid;gap:14px;padding:22px;border-radius:22px;background:linear-gradient(#1d2127,#121519);box-shadow:inset 0 1px 0 rgb(255 255 255/.08),0 40px 70px -30px #000}
.sl-lcd{display:grid;gap:2px;padding:14px 16px;border-radius:8px;background:#2b2200;box-shadow:inset 0 2px 10px rgb(0 0 0/.6);font:600 17px/1.3 var(--k-mono);color:#ffb000;text-shadow:0 0 8px rgb(255 176 0/.6);letter-spacing:.08em}
.sl-pad.armed .sl-lcd{background:#330800;color:#ff5a3c;text-shadow:0 0 8px rgb(255 90 60/.7)}
.sl-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sl-keys .k-tactile{--face:#2a2f36;--txt:#e9e7e2;min-height:58px;border-radius:12px;font:700 20px var(--k-mono)}
.sl-keys .sl-panic-key{--face:#c8261a;--txt:#fff}
.sl-hold{width:100%;--k-radius:12px;background:#22262c;color:#e9e7e2;font:700 15px var(--k-mono);letter-spacing:.1em}
.sl-pad .k-undo{color:#b8b6b0}

.sl-sentence{background:#ffb000;color:#130d00}
.sl-sentence .k-sentence-line{font-weight:800}
.sl-sentence .mark{padding:0 .14em;background:#08090b;color:#ffb000;font-family:var(--k-mono)}

.sl-kit,.sl-cover,.sl-faq,.sl-check{padding:14vh 4vw}
.sl-sec-head{max-width:760px;margin-bottom:44px}
.sl-sec-head>p:last-child{color:#b8b6b0;font-size:17px}
.sl-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sl-list li{position:relative;display:grid;grid-template-columns:70px 1fr 1fr;gap:3vw;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.sl-list span{font:500 13px var(--k-mono);color:var(--mut)}
.sl-list h3{font-size:clamp(28px,3.4vw,54px);transition:color .3s,transform .5s cubic-bezier(.22,1,.36,1)}
.sl-list p{margin:0;color:#b8b6b0}
.sl-list figure{position:absolute;right:30%;top:50%;z-index:3;width:260px;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:6px;opacity:0;pointer-events:none;transform:translate(var(--fx,0),-50%) rotate(-4deg) scale(.9);transition:opacity .3s,transform .5s cubic-bezier(.22,1,.36,1)}
.sl-list figure img{width:100%;height:100%;object-fit:cover}
.sl-list li:hover h3{color:#ffb000;transform:translateX(12px)}
.sl-list li:hover figure{opacity:1;transform:translate(var(--fx,0),-50%) rotate(-2deg) scale(1)}

.sl-cover-grid{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:start}
.d-security .k-opt{background:var(--panel);color:#e9e7e2;border-color:var(--line)}
.d-security .k-opt[aria-pressed="true"]{background:#1a1609;border-color:#ffb000}
.sl-cover-out{padding:28px;border-radius:14px;background:var(--panel)}
.sl-big{display:flex;align-items:baseline;gap:8px;margin:0 0 20px}
.sl-big b{font:700 clamp(56px,6vw,92px)/1 var(--k-mono);letter-spacing:-.05em;color:#ffb000}
.sl-big small{color:var(--mut);font:500 15px var(--k-mono)}
.sl-mid{margin:0 0 24px;font:700 30px var(--k-mono)}
.sl-cover-out .k-tactile{min-height:52px;padding:0 22px;font-weight:700}
.sl-cover-out .k-printer{margin-top:16px}

.sl-sounds{display:grid;grid-template-columns:1fr auto;gap:5vw;align-items:center;padding:12vh 4vw;background:#111418;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sl-sounds p:not(.sl-kicker){color:#b8b6b0;max-width:46ch}
.sl-areas{display:grid;grid-template-columns:auto 1fr;gap:6vw;align-items:center;padding:14vh 4vw}
.sl-radar{position:relative;width:min(420px,80vw);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle,transparent 0 24%,rgb(255 176 0/.18) 24.4% 24.8%,transparent 25% 49%,rgb(255 176 0/.18) 49.4% 49.8%,transparent 50% 74%,rgb(255 176 0/.18) 74.4% 74.8%,transparent 75%),#0d0f12;border:1px solid rgb(255 176 0/.3)}
.sl-radar::before,.sl-radar::after{content:"";position:absolute;background:rgb(255 176 0/.18)}
.sl-radar::before{left:50%;top:0;bottom:0;width:1px}.sl-radar::after{top:50%;left:0;right:0;height:1px}
.sl-radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgb(255 176 0/.45),transparent 22%);animation:sl-sweep 4s linear infinite}
@keyframes sl-sweep{to{transform:rotate(360deg)}}
.sl-radar b{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;margin:-4px;border-radius:50%;background:#ffb000;box-shadow:0 0 12px #ffb000;animation:sl-pulse 4s ease-out infinite}
.sl-radar b:nth-of-type(2){animation-delay:-1.3s}.sl-radar b:nth-of-type(3){animation-delay:-2.2s}.sl-radar b:nth-of-type(4){animation-delay:-3s}.sl-radar b:nth-of-type(5){animation-delay:-.6s}
@keyframes sl-pulse{0%{opacity:1}70%{opacity:.15}100%{opacity:1}}
.sl-areas .k-fade-list{max-width:520px;margin-top:24px;font:500 15px var(--k-mono)}
.sl-areas .k-fade-list li{justify-content:space-between}
.sl-areas .k-fade-list span{color:#ffb000}

.sl-faq h2{font-size:clamp(40px,5vw,78px);margin-bottom:24px}
.sl-faq details{max-width:880px;border-bottom:1px solid var(--line)}
.sl-faq summary{padding:22px 0;font-size:22px;font-weight:600;cursor:pointer}
.sl-faq summary::marker{color:#ffb000}
.sl-faq details p{margin:0 0 22px;color:#b8b6b0}
.sl-check{display:grid;grid-template-columns:1fr 1fr;gap:4vw;background:#111418}
.sl-check>div>p:last-child{color:#b8b6b0}
.sl-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.sl-form label{display:grid;gap:6px;font:500 11px var(--k-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.sl-form input,.sl-form select{min-height:52px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:#08090b;color:#e9e7e2;font:500 16px var(--k-font)}
.sl-submit{grid-column:1/-1;justify-self:start}
.sl-ticket{grid-column:2;--k-ticket:#ffb000}
.d-security .k-fiction{background:#08090b;color:var(--mut);border-top:1px solid var(--line)}

@media (max-width:1100px){.sl-live{display:none}}
@media (max-width:980px){
  .sl-nav{display:none}.sl-panic{margin-left:auto}
  .sl-hero,.sl-arm,.sl-cover-grid,.sl-sounds,.sl-areas,.sl-check{grid-template-columns:1fr}
  .sl-wall{grid-auto-rows:clamp(80px,22vw,150px)}
  .sl-list li{grid-template-columns:44px 1fr;gap:6px 14px}
  .sl-list li p{grid-column:2}
  .sl-list figure{position:static;grid-column:2;width:100%;opacity:1;transform:none;margin-top:10px}
  .sl-ticket{grid-column:1}
}
@media (max-width:560px){.sl-form{grid-template-columns:1fr}.sl-strip{gap:18px}.sl-strip dd{font-size:22px}.sl-panic{min-height:42px;padding:0 12px;font-size:12px}.sl-logo{font-size:14px}}