.kn-app::before {
  inset: -16%;
  will-change: transform;
  animation: z-sky-near 48s linear infinite alternate;
}











.kn-app {
  --z-bloom:
    var(--z-sky-far, none) center / cover no-repeat,
    radial-gradient(52% 38% at 82% -6%, rgba(var(--zk-deep-rgb), .045), transparent 62%),
    radial-gradient(40% 30% at 6% 4%, rgba(85, 25, 159, .035), transparent 60%);
}
.kn-app::after {
  inset: -22%;
  will-change: transform;
  animation: z-sky-far 66s linear infinite alternate;
}
@keyframes z-sky-near {
  from { transform: translate3d(-3.4%, -2.2%, 0) scale(1.06); }
  to   { transform: translate3d(3.4%, 2.4%, 0) scale(1.13); }
}
@keyframes z-sky-far {
  from { transform: translate3d(4.2%, 2.6%, 0) scale(1.14); }
  to   { transform: translate3d(-4.0%, -2.8%, 0) scale(1.05); }
}



@media (prefers-reduced-motion: reduce) {
  .kn-app::before, .kn-app::after { animation: none; }
}








.kn-app .kn-box {
  background: rgba(17, 16, 21, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;                    


  box-shadow: inset 0 1px 0 rgba(34, 211, 238, .14),
              0 16px 40px -26px #000;










  --ring: linear-gradient(150deg,
            rgba(34, 211, 238, .55) 0%,
            rgba(var(--zk-accent-rgb), .30) 34%,
            rgba(var(--zk-accent-rgb), .12) 68%,
            rgba(var(--zk-accent-rgb), .10) 100%);
}




.kn-app .kn-box + .kn-box:not(.z-w) { border-top: 0; }



.kn-app .kn-box.hover,
.kn-app .kn-box.clickable:hover {
  background: rgba(24, 22, 30, .34);
  box-shadow: inset 0 1px 0 rgba(var(--zk-accent-rgb), .16),
              0 18px 44px -26px #000;
}




.kn-app .kn-box select,
.kn-app .kn-box button:not(.on):not([aria-pressed="true"]) {
  background: rgba(0, 0, 0, .34);
  border-radius: 10px;                    
}


.kn-app .kn-box .zpu-av .zpu-star:not(.x):not(.y) {
  background: var(--zk-chrome);
  border-radius: 50%;
}




.kn-app .kn-box input {
  background: transparent;
  box-shadow: none;
}












.kn-app .kn-box button.on,
.kn-app .kn-box [role="tab"].on,
.kn-app .kn-box [role="radio"].on,
.kn-app .kn-box [aria-pressed="true"] {
  background: var(--zk-selected-bg);
  border-radius: 10px;










  box-shadow: inset 0 0 0 1px rgba(var(--zk-accent-rgb), .62);
}





.kn-app #z-bar,
.kn-app #z-ticker,
.kn-app .z-tabbar,
.kn-app #z-tabstrip {
  background: rgba(12, 11, 16, .46);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}






















































































.kn-app {
  --zk-muted: #969aa4;
  --z-muted: #969aa4;
  --zk-dim: #8b909c;
  --z-dim: #8b909c;
  --z-faint: #8b909c;
}