.dp-arch{--wire:radial-gradient(circle,var(--lime) 2.5px,transparent 3px) 0 50%/24px 8px repeat-x,linear-gradient(hsla(0,0%,100%,.25),hsla(0,0%,100%,.25)) 0 50%/100% 1px no-repeat;--wire-y:radial-gradient(circle,var(--lime) 2.5px,transparent 3px) 50% 0/8px 24px repeat-y,linear-gradient(hsla(0,0%,100%,.25),hsla(0,0%,100%,.25)) 50% 0/1px 100% no-repeat;--wire-off:linear-gradient(hsla(0,0%,100%,.14),hsla(0,0%,100%,.14)) 50% 50%/100% 1px no-repeat;background:var(--navy);border-radius:24px;box-shadow:0 40px 80px -40px rgba(0,0,94,.6);color:var(--on-d);isolation:isolate;margin:48px 0 0;overflow:hidden;padding:16px 16px 20px;position:relative}.dp-arch:before{background:radial-gradient(circle,hsla(0,0%,100%,.12) 1px,transparent 1.6px) 0 0/22px 22px;content:"";inset:0;mask:linear-gradient(#000,transparent 90%);position:absolute;z-index:-1}.dp-arch ul{list-style:none;margin:0;padding:0}.dp-arch .i{fill:none;flex:none;height:18px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:18px}.dp-arch__bar{align-items:center;border-bottom:1px solid hsla(0,0%,100%,.12);color:var(--dim);display:flex;flex-wrap:wrap;font:500 13px/1.3 var(--mono);gap:12px;justify-content:space-between;margin-bottom:24px;padding:2px 2px 16px}.dp-arch__bar b{color:var(--lime);font-weight:500}.dp-arch__in{height:1px;margin:0;opacity:0;pointer-events:none;position:absolute;width:1px}.dp-arch__sw{align-items:center;background:hsla(0,0%,100%,.08);border-radius:999px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.2);color:#fff;cursor:pointer;display:inline-flex;font:600 14px/1 var(--f);gap:12px;margin:0;min-height:40px;padding:6px 6px 6px 14px;transition:background-color .2s;user-select:none;-webkit-user-select:none;white-space:nowrap}.dp-arch__sw:hover{background:hsla(0,0%,100%,.15)}.dp-arch__in:focus-visible~.dp-arch__bar .dp-arch__sw{outline:3px solid var(--lime);outline-offset:3px}.dp-arch__k{background:var(--lime);border-radius:999px;height:26px;position:relative;transition:background-color .25s;width:42px}.dp-arch__k:after{background:var(--navy);border-radius:50%;content:"";height:18px;left:20px;position:absolute;top:4px;transition:left .25s var(--ease),background-color .25s;width:18px}.dp-arch__in:not(:checked)~.dp-arch__bar .dp-arch__k{background:hsla(0,0%,100%,.22)}.dp-arch__in:not(:checked)~.dp-arch__bar .dp-arch__k:after{background:#fff;left:4px}.dp-arch__grid{display:grid;gap:44px}.dp-arch__h{align-items:center;color:var(--lime);display:flex;font:500 12.5px/1.3 var(--mono);gap:8px;letter-spacing:.08em;margin:0 0 12px;text-transform:uppercase}.dp-arch__col ul{display:flex;flex-wrap:wrap;gap:8px}.dp-arch__col li{align-items:center;background:hsla(0,0%,100%,.07);border-radius:10px;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.16);color:#fff;display:flex;font-size:15px;font-weight:600;gap:10px;line-height:1.3;padding:9px 13px;position:relative}.dp-arch__col li:before{background:var(--lav-d);border-radius:2px;content:"";flex:none;height:7px;width:7px}.dp-arch__ai li:before{background:var(--lime);transform:rotate(45deg)}.dp-arch__ai{transition:opacity .4s,filter .4s}.dp-arch__core{align-items:center;background:linear-gradient(160deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0) 60%),var(--navy-d);border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--lime),0 0 0 6px rgba(155,226,0,.08),0 0 70px -12px rgba(155,226,0,.45);display:flex;flex-direction:column;gap:4px;justify-content:center;padding:24px 18px;position:relative;text-align:center}.dp-arch__core:after,.dp-arch__core:before{background:var(--wire-y);content:"";height:44px;left:50%;margin-left:-4px;position:absolute;width:8px}.dp-arch__core:before{bottom:100%}.dp-arch__core:after{top:100%}.dp-arch__fx{border-radius:inherit;inset:0;overflow:hidden;pointer-events:none;position:absolute}.dp-arch__fx:after{background:linear-gradient(transparent,rgba(155,226,0,.13) 50%,transparent);content:"";height:30%;left:0;position:absolute;right:0;top:-30%}.dp-arch__logo{display:block;height:30px;margin-bottom:8px;width:40px}.dp-arch__core b{color:#fff;font-size:21px;letter-spacing:-.01em}.dp-arch__tag{color:var(--lime);font:600 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}.dp-arch__core ul{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}.dp-arch__core li{border-radius:999px;box-shadow:inset 0 0 0 1px var(--lime);color:#fff;font-size:14px;font-weight:600;padding:4px 11px}.dp-arch__st{align-items:center;border-top:1px solid hsla(0,0%,100%,.12);color:var(--on-d);display:flex;font:500 13.5px/1.45 var(--mono);gap:10px;margin:26px 0 0;padding-top:16px}.dp-arch__in:not(:checked)~.dp-arch__st .dp-arch__on,.dp-arch__off{display:none}.dp-arch__in:not(:checked)~.dp-arch__st .dp-arch__off{display:inline}.dp-arch__in:not(:checked)~.dp-arch__grid .dp-arch__ai{filter:saturate(0);opacity:.35}.dp-arch__in:not(:checked)~.dp-arch__grid .dp-arch__core:after{background:linear-gradient(hsla(0,0%,100%,.14),hsla(0,0%,100%,.14)) 50% 0/1px 100% no-repeat}.dp-arch__in:not(:checked)~.dp-arch__st .dp-led{background:hsla(0,0%,100%,.4);box-shadow:none}@media (min-width:900px){.dp-arch{padding:20px 32px 28px}.dp-arch__grid{align-items:center;gap:0 72px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr)}.dp-arch__col ul{flex-direction:column;flex-wrap:nowrap}.dp-arch__col li:after{background:var(--wire);content:"";height:8px;margin-top:-4px;position:absolute;top:50%;width:72px}.dp-arch__src li:after{left:100%}.dp-arch__ai li:after{right:100%}.dp-arch__in:not(:checked)~.dp-arch__grid .dp-arch__ai li:after{background:var(--wire-off)}.dp-arch__core{align-self:stretch;padding:28px 22px}.dp-arch__core:after,.dp-arch__core:before{display:none}}@media (min-width:1000px){.dp-arch{margin-top:56px}}@keyframes dp-arch-x{to{background-position:24px 50%,0 50%}}@keyframes dp-arch-y{to{background-position:50% 24px,50% 0}}@keyframes dp-arch-sweep{to{transform:translateY(440%)}}@media (prefers-reduced-motion:no-preference){.dp-arch .dp-led{animation:dp-blink 1.6s ease-in-out infinite}.dp-arch__col li:after{animation:dp-arch-x 1s linear infinite}.dp-arch__col li:nth-child(2):after{animation-delay:-.35s}.dp-arch__col li:nth-child(3):after{animation-delay:-.7s}.dp-arch__col li:nth-child(4):after{animation-delay:-.15s}.dp-arch__col li:nth-child(5):after{animation-delay:-.5s}.dp-arch__core:after,.dp-arch__core:before{animation:dp-arch-y 1s linear infinite}.dp-arch__fx:after{animation:dp-arch-sweep 3.6s ease-in-out infinite}.dp-arch__in:not(:checked)~.dp-arch__grid .dp-arch__ai li:after,.dp-arch__in:not(:checked)~.dp-arch__grid .dp-arch__core:after{animation:none}}
