:root {
  --pf-accent: #59ffc0;
  --pf-accent-rgb: 89, 255, 192;
  --pf-accent-2: #23d5ab;
  --pf-on-accent: #001a12;
  --pf-tint: #c9d4f3;
  --pf-header-h: 73px;
  --pf-tabbar-space: 0px;
  --pf-stage-h: calc(100svh - var(--pf-header-h) - var(--pf-tabbar-space));
}
@media (max-width: 991.98px) {
  :root {
    --pf-tabbar-space: calc(50px + 14px + 10px + env(safe-area-inset-bottom));
  }
}

.pf-page {
  --bs-primary: var(--pf-accent);
  --bs-primary-rgb: var(--pf-accent-rgb);
  --bs-link-color: var(--pf-accent);
  --bs-link-color-rgb: var(--pf-accent-rgb);
  --bs-link-hover-color: #fff;
  --bs-link-hover-color-rgb: 255, 255, 255;
}

.pf-preload [data-pf-intro] {
  opacity: 0;
}

.pf-mono {
  font-family: var(--bs-font-monospace);
  letter-spacing: 0.08em;
}

.pf-header {
  z-index: 1030 !important;
}

.pf-brand {
  min-width: 0;
}
.pf-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent-2));
  box-shadow: 0 0 12px rgba(var(--pf-accent-rgb), 0.7);
  transform: scaleX(0);
  transform-origin: left center;
}

.pf-nav .nav-link {
  padding-inline: 0.75rem;
}
@media (min-width: 1200px) {
  .pf-nav .nav-link {
    padding-inline: 1rem;
  }
}
.pf-nav .nav-link .bi {
  display: none;
}
@media (min-width: 1200px) {
  .pf-nav .nav-link .bi {
    display: inline-block;
  }
}

.pf-tabbar {
  bottom: calc(14px + env(safe-area-inset-bottom));
}
.pf-tabbar .nav {
  max-width: 320px;
}

@media (max-width: 575.98px) {
  .pf-page .btn.al-clip {
    --al-b: 5px !important;
    --al-extend-b: 27px !important;
    padding: 0.4rem 0.95rem !important;
  }
  .pf-page .btn.al-clip > span {
    gap: 0.4rem !important;
    padding-bottom: 0.3rem !important;
    font-size: 0.75rem !important;
  }
  .pf-page .btn.al-clip ~ .al-trapezoid-w-64px {
    width: 48px !important;
  }
  .pf-header .btn.al-clip {
    padding: 0.3rem 0.7rem !important;
  }
}
@media (max-width: 991.98px) {
  .pf-has-tabbar {
    padding-bottom: calc(50px + 14px + 10px + env(safe-area-inset-bottom));
  }
}

.pf-chrome .nav {
  --bs-nav-link-hover-color: var(--pf-accent);
}
.pf-chrome .nav-pills {
  --bs-nav-pills-link-active-bg: var(--pf-accent);
  --bs-nav-pills-link-active-color: var(--pf-on-accent);
}

.pf-page .btn.bg-primary .text-dark {
  color: var(--pf-on-accent) !important;
}

.pf-to-top {
  bottom: 1.5rem;
}
@media (max-width: 991.98px) {
  .pf-to-top {
    bottom: calc(calc(50px + 14px + 10px + env(safe-area-inset-bottom)) + 1rem);
  }
}

.pf-section {
  position: relative;
  padding-block: clamp(56px, 7vw, 100px);
}
.pf-section.is-band {
  background: radial-gradient(60% 140px at 50% 0, rgba(var(--pf-accent-rgb), 0.08), transparent), rgba(255, 255, 255, 0.03);
  border-block: 1px solid rgba(255, 255, 255, 0.07);
}

.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pf-accent);
}
.pf-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(var(--pf-accent-rgb), 0.8);
}

.pf-h2 {
  margin-bottom: 16px;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.pf-lead {
  max-width: 620px;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.pf-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.6vw, 36px);
  overflow: hidden;
  background: linear-gradient(200deg, rgba(var(--pf-accent-rgb), 0.07), transparent 55%), rgba(var(--bs-body-bg-rgb), 0.74);
}
.pf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(60deg, rgba(var(--pf-accent-rgb), 0.08) 0 1px, transparent 1px 14px), radial-gradient(360px circle at var(--pf-gx, 50%) var(--pf-gy, 50%), rgba(var(--pf-accent-rgb), 0.16), transparent 65%);
  -webkit-mask-image: radial-gradient(280px circle at var(--pf-gx, 50%) var(--pf-gy, 50%), #000, transparent 70%);
  mask-image: radial-gradient(280px circle at var(--pf-gx, 50%) var(--pf-gy, 50%), #000, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.pf-card:hover {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.4) !important;
}
.pf-card:hover::before {
  opacity: 1;
}
.pf-card h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 600;
}
.pf-card p {
  margin: 0;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

.pf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.pf-card-num {
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
}

.pf-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 22px;
  color: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.12);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.035);
}
.pf-chips li i {
  color: var(--pf-accent);
}

.pf-page #fui-global-loader {
  --bs-success: var(--pf-accent);
  --bs-success-rgb: var(--pf-accent-rgb);
}

.pf-role {
  --pf-role-rgb: 255, 255, 255;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--pf-role-rgb));
  background: rgba(var(--pf-role-rgb), 0.12);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-role::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}

.pf-role-admin {
  --pf-role-rgb: 76, 141, 255;
}

.pf-role-requester {
  --pf-role-rgb: 47, 212, 196;
}

.pf-role-approver {
  --pf-role-rgb: 255, 179, 71;
}

.pf-role-keeper {
  --pf-role-rgb: 167, 139, 250;
}

.pf-role-user {
  --pf-role-rgb: 89, 255, 192;
}

.pf-role-access {
  --pf-role-rgb: 125, 211, 252;
}

.pf-role-punch {
  --pf-role-rgb: 47, 227, 140;
}

.pf-role-requests {
  --pf-role-rgb: 255, 179, 71;
}

.pf-role-time {
  --pf-role-rgb: 167, 139, 250;
}

.pf-role-me {
  --pf-role-rgb: 93, 107, 255;
}

.pf-role-dash {
  --pf-role-rgb: 244, 114, 182;
}

.pf-role-framework {
  --pf-role-rgb: 125, 211, 252;
}

.pf-role-setup {
  --pf-role-rgb: 167, 139, 250;
}

.pf-role-campaign {
  --pf-role-rgb: 76, 141, 255;
}

.pf-role-answer {
  --pf-role-rgb: 47, 212, 196;
}

.pf-role-validate {
  --pf-role-rgb: 255, 179, 71;
}

.pf-role-report {
  --pf-role-rgb: 47, 227, 140;
}

.pf-role-join {
  --pf-role-rgb: 125, 211, 252;
}

.pf-role-network {
  --pf-role-rgb: 61, 220, 90;
}

.pf-role-mandi {
  --pf-role-rgb: 255, 179, 71;
}

.pf-role-farm {
  --pf-role-rgb: 45, 212, 191;
}

.pf-role-advice {
  --pf-role-rgb: 167, 139, 250;
}

.pf-role-schemes {
  --pf-role-rgb: 244, 114, 182;
}

.pf-role-you {
  --pf-role-rgb: 93, 107, 255;
}

.pf-role-start {
  --pf-role-rgb: 125, 211, 252;
}

.pf-role-orders {
  --pf-role-rgb: 251, 213, 79;
}

.pf-role-route {
  --pf-role-rgb: 255, 138, 61;
}

.pf-role-proof {
  --pf-role-rgb: 47, 227, 140;
}

.pf-role-earn {
  --pf-role-rgb: 167, 139, 250;
}

.pf-role-rider {
  --pf-role-rgb: 244, 114, 182;
}

.pf-role-social {
  --pf-role-rgb: 157, 124, 255;
}

.pf-role-pages {
  --pf-role-rgb: 47, 212, 196;
}

.pf-role-work {
  --pf-role-rgb: 76, 141, 255;
}

.pf-role-help {
  --pf-role-rgb: 255, 179, 71;
}

.pf-role-intake {
  --pf-role-rgb: 9, 166, 255;
}

.pf-role-decide {
  --pf-role-rgb: 167, 139, 250;
}

.pf-role-investigate {
  --pf-role-rgb: 45, 212, 191;
}

.pf-role-facilities {
  --pf-role-rgb: 242, 156, 79;
}

.pf-role-grant {
  --pf-role-rgb: 26, 160, 255;
}

.pf-role-control {
  --pf-role-rgb: 47, 211, 120;
}

.pf-role-staff {
  --pf-role-rgb: 242, 156, 79;
}

.pf-role-contractor {
  --pf-role-rgb: 251, 191, 36;
}

.pf-role-visitor {
  --pf-role-rgb: 26, 160, 255;
}

.pf-role-watch {
  --pf-role-rgb: 34, 214, 255;
}

.pf-role-respond {
  --pf-role-rgb: 255, 77, 109;
}

.pf-role-talk {
  --pf-role-rgb: 255, 214, 10;
}

.pf-role-hq {
  --pf-role-rgb: 190, 140, 255;
}

.pf-role-customer {
  --pf-role-rgb: 226, 58, 75;
}

.pf-role-cook {
  --pf-role-rgb: 255, 181, 71;
}

.pf-role-driver {
  --pf-role-rgb: 63, 191, 106;
}

.pf-role-live {
  --pf-role-rgb: 42, 168, 240;
}

.pf-role-concept {
  --pf-role-rgb: 120, 210, 205;
}

.pf-role-flight {
  --pf-role-rgb: 236, 42, 52;
}

.pf-role-hotel {
  --pf-role-rgb: 111, 147, 255;
}

.pf-role-holiday {
  --pf-role-rgb: 255, 181, 71;
}

.pf-role-bus {
  --pf-role-rgb: 155, 89, 182;
}

.pf-role-car {
  --pf-role-rgb: 45, 212, 191;
}

.pf-role-lms {
  --pf-role-rgb: 31, 120, 230;
}

.pf-role-hms {
  --pf-role-rgb: 232, 36, 91;
}

.pf-role-cms {
  --pf-role-rgb: 20, 199, 138;
}

.pf-role-browse {
  --pf-role-rgb: 255, 48, 72;
}

.pf-role-vendor {
  --pf-role-rgb: 255, 199, 0;
}

.pf-role-schedule {
  --pf-role-rgb: 63, 178, 72;
}

.pf-role-account {
  --pf-role-rgb: 167, 139, 250;
}

.pf-role-skymet {
  --pf-role-rgb: 244, 123, 32;
}

.pf-role-mahavedh {
  --pf-role-rgb: 139, 195, 74;
}

.pf-role-card {
  --pf-role-rgb: 226, 56, 95;
}

.pf-role-share {
  --pf-role-rgb: 255, 196, 61;
}

.pf-role-shop {
  --pf-role-rgb: 231, 72, 155;
}

.pf-role-story {
  --pf-role-rgb: 212, 160, 238;
}

.pf-role-raise {
  --pf-role-rgb: 26, 163, 245;
}

.pf-role-resolve {
  --pf-role-rgb: 45, 212, 191;
}

.pf-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--pf-header-h) - var(--pf-tabbar-space));
  padding-block: clamp(32px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
}
.pf-hero::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -10%;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--pf-accent-rgb), 0.28), rgba(var(--pf-accent-rgb), 0.06) 60%, transparent);
  filter: blur(30px);
}
.pf-hero > .container-xxl {
  width: 100%;
}

.pf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
@media (max-width: 991.98px) {
  .pf-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-hero-title {
  margin-bottom: 22px;
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.pf-hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--pf-accent), var(--pf-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pf-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(20px, 3vw, 40px);
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  list-style: none;
}
.pf-hero-meta li {
  display: grid;
  gap: 4px;
}
.pf-hero-meta b {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}
.pf-hero-meta span {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-hero-stage {
  position: relative;
  padding: 11% 0 5% 11%;
  perspective: 1800px;
}
@media (min-width: 992px) {
  .pf-hero-stage {
    margin-right: calc(-1 * clamp(48px, 8vw, 150px));
  }
}
@media (max-width: 991.98px) {
  .pf-hero-stage {
    padding: 14% 2% 14% 8%;
  }
}

.pf-stack {
  --rx: 8deg;
  --ry: -16deg;
  --spread: 1;
  --hover: 1;
  --fan: calc(var(--spread) * var(--hover));
  position: relative;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
}
.pf-hero-stage:hover .pf-stack {
  --hover: 1.3;
}
@media (max-width: 991.98px) {
  .pf-stack {
    --rx: 6deg;
    --ry: -8deg;
  }
}

.pf-stack-layer {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s;
}
.pf-stack-layer.is-back, .pf-stack-layer.is-mid {
  position: absolute;
  inset: 0;
}
.pf-stack-layer.is-back {
  opacity: 0.75;
  transform: translate3d(calc(-15% * var(--fan)), calc(-22% * var(--fan)), calc(-160px * var(--fan)));
}
.pf-stack-layer.is-mid {
  opacity: 0.9;
  transform: translate3d(calc(-7.5% * var(--fan)), calc(-11% * var(--fan)), calc(-80px * var(--fan)));
}
.pf-stack-layer.is-front {
  position: relative;
}
.pf-hero-stage:hover .pf-stack-layer.is-back, .pf-hero-stage:hover .pf-stack-layer.is-mid {
  opacity: 1;
}

.pf-glass {
  position: absolute;
  z-index: 2;
  padding: 14px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(6, 18, 42, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-glass.is-a {
  top: -2%;
  right: 14%;
  width: 210px;
  transform: translateZ(calc(90px * var(--fan)));
}
.pf-glass.is-b {
  left: -8%;
  bottom: -10%;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateZ(calc(130px * var(--fan)));
}
@media (max-width: 575.98px) {
  .pf-glass.is-a {
    display: none;
  }
  .pf-glass.is-b {
    left: -4%;
    bottom: -18%;
    gap: 10px;
    padding: 8px 12px 8px 8px;
  }
  .pf-glass.is-b .pf-donut {
    width: 34px;
    height: 34px;
  }
  .pf-glass.is-b .pf-glass-num b {
    font-size: 1rem;
  }
}

.pf-glass-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--bs-font-monospace);
  font-size: 12px;
}

.pf-status {
  padding: 3px 8px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2fe38c;
  background: rgba(47, 227, 140, 0.14);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.pf-mini-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.pf-mini-steps li::before {
  content: "";
  display: block;
  height: 3px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.14);
}
.pf-mini-steps .is-done {
  color: #fff;
}
.pf-mini-steps .is-done::before {
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent-2));
}

.pf-donut {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(#ff5a36 0 22%, #2fc6f0 0 46%, #8bd15a 0 61%, #4f8ef7 0 76%, #ff8a3d 0 88%, #f6c23e 0);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
  mask: radial-gradient(circle, transparent 52%, #000 53%);
}

.pf-glass-num {
  display: grid;
  gap: 2px;
}
.pf-glass-num b {
  font-size: 1.35rem;
  line-height: 1;
  color: #fff;
}
.pf-glass-num span {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pf-cursor {
  --c: var(--pf-accent);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(var(--c), var(--c)) 0 0/9px 2px, linear-gradient(var(--c), var(--c)) 0 0/2px 9px, linear-gradient(var(--c), var(--c)) 100% 0/9px 2px, linear-gradient(var(--c), var(--c)) 100% 0/2px 9px, linear-gradient(var(--c), var(--c)) 0 100%/9px 2px, linear-gradient(var(--c), var(--c)) 0 100%/2px 9px, linear-gradient(var(--c), var(--c)) 100% 100%/9px 2px, linear-gradient(var(--c), var(--c)) 100% 100%/2px 9px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(var(--pf-accent-rgb), 0.6));
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.pf-cursor::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 5px;
  right: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  animation: pf-beam 1.2s ease-in-out infinite alternate;
}
.pf-cursor.is-on {
  opacity: 1;
}
.pf-cursor.is-lock {
  --c: #fff;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
}
.pf-cursor.is-down {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
.pf-cursor.is-wrap {
  --c: #fff;
}
.pf-cursor.is-wrap::after {
  top: 4px;
  bottom: 4px;
  left: 0;
  right: auto;
  width: 30%;
  height: auto;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
  box-shadow: inset -1.5px 0 0 var(--c);
  animation: pf-scan 1.7s ease-in-out infinite;
}
.pf-cursor.is-wrap.is-down {
  scale: 0.96;
}

@keyframes pf-scan {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    left: 70%;
    opacity: 1;
  }
  80%, 100% {
    left: 70%;
    opacity: 0;
  }
}
.pf-cursor-label {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  padding: 4px 8px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  transform: translateY(-50%);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-cursor-label:empty {
  display: none;
}

@keyframes pf-beam {
  from {
    top: 18%;
  }
  to {
    top: 82%;
  }
}
.pf-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.pf-bento > * {
  grid-column: span 6;
}
.pf-bento .is-wide {
  grid-column: span 7;
}
.pf-bento .is-narrow {
  grid-column: span 5;
}
.pf-bento .is-full {
  grid-column: 1/-1;
}
@media (max-width: 991.98px) {
  .pf-bento .is-wide,
  .pf-bento .is-narrow {
    grid-column: span 6;
  }
}
@media (max-width: 767.98px) {
  .pf-bento > *,
  .pf-bento .is-wide,
  .pf-bento .is-narrow,
  .pf-bento .is-full {
    grid-column: 1/-1;
  }
}

.pf-card .pf-card-title {
  margin: 0;
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-shift {
  --pf-before: 255, 107, 107;
}

.pf-shift-head,
.pf-shift-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(56px, 7vw, 110px) minmax(0, 1fr);
  align-items: center;
}

.pf-shift-head {
  margin: 28px 0 16px;
}

.pf-shift-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pf-shift-tag i {
  font-size: 15px;
}
.pf-shift-tag.is-before {
  color: rgb(var(--pf-before));
}
.pf-shift-tag.is-after {
  grid-column: 3;
  color: var(--pf-accent);
}

.pf-shift-rows {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-shift-row {
  --d: calc(var(--i, 0) * 0.45s + 0.15s);
}

.pf-shift-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 16px 20px;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  transition: background-color 0.4s, color 0.4s, opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.pf-shift-cell > i {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 16px;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.pf-shift-cell > span {
  position: relative;
}
.pf-shift-cell.is-before {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(var(--pf-before), 0.05);
}
.pf-shift-cell.is-before > i {
  color: rgb(var(--pf-before));
  background: rgba(var(--pf-before), 0.12);
}
.pf-shift-cell.is-before > span::after {
  content: "";
  position: absolute;
  top: 54%;
  left: -2px;
  right: -2px;
  height: 1.5px;
  background: rgba(var(--pf-before), 0.75);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d);
}
.pf-shift-cell.is-after {
  color: #fff;
  background: linear-gradient(100deg, rgba(var(--pf-accent-rgb), 0.16), rgba(var(--pf-accent-rgb), 0.04));
  transition-delay: 0s, 0s, calc(var(--d) + 0.35s), calc(var(--d) + 0.35s);
}
.pf-shift-cell.is-after > i {
  color: var(--pf-on-accent);
  background: linear-gradient(120deg, var(--pf-accent), var(--pf-accent-2));
}
.pf-shift-cell::before {
  content: attr(data-label);
  position: absolute;
  top: 8px;
  right: 12px;
  display: none;
  font-family: var(--bs-font-monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.pf-shift-row:hover .pf-shift-cell.is-before {
  color: rgba(255, 255, 255, 0.75);
}
.pf-shift-row:hover .pf-shift-cell.is-after {
  background: linear-gradient(100deg, rgba(var(--pf-accent-rgb), 0.26), rgba(var(--pf-accent-rgb), 0.08));
}

.pf-shift-arrow {
  position: relative;
  height: 2px;
  margin-inline: 12px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 4px, transparent 4px 8px);
}
.pf-shift-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--pf-accent);
  border-right: 2px solid var(--pf-accent);
  transform: translateY(-50%) rotate(45deg);
}
.pf-shift-arrow::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 22px;
  height: 8px;
  background: radial-gradient(closest-side, var(--pf-accent), transparent);
  animation: pf-flow 2.4s linear infinite;
  animation-delay: var(--d);
}

@keyframes pf-flow {
  from {
    left: -10%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  to {
    left: 95%;
    opacity: 0;
  }
}
.pf-inview-ready .pf-shift:not(.is-in) .pf-shift-cell.is-before > span::after {
  transform: scaleX(0);
}
.pf-inview-ready .pf-shift:not(.is-in) .pf-shift-cell.is-after {
  opacity: 0.2;
  transform: translateX(-12px);
}
.pf-inview-ready .pf-shift:not(.is-in) .pf-shift-arrow::after {
  animation-play-state: paused;
  opacity: 0;
}

@media (max-width: 767.98px) {
  .pf-shift-head {
    display: none;
  }
  .pf-shift-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .pf-shift-rows {
    gap: 20px;
    margin-top: 22px;
  }
  .pf-shift-cell::before {
    display: block;
  }
  .pf-shift-arrow {
    justify-self: center;
    width: 2px;
    height: 18px;
    margin: 6px 0;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 4px, transparent 4px 8px);
  }
  .pf-shift-arrow::before {
    top: auto;
    right: 50%;
    bottom: 0;
    transform: translateX(50%) rotate(135deg);
  }
  .pf-shift-arrow::after {
    display: none;
  }
}
.pf-role-steps {
  display: grid;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.pf-role-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 16px;
  padding-bottom: 22px;
}
.pf-role-steps li:last-child {
  padding-bottom: 0;
}
.pf-role-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 0;
  left: 21px;
  width: 2px;
  background: linear-gradient(var(--pf-accent), rgba(var(--pf-accent-rgb), 0.1));
  transform-origin: top;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.35s + 0.3s);
}
.pf-role-steps li {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.35s), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.35s);
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-role-steps li {
  opacity: 0.25;
  transform: translateX(-8px);
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-role-steps li::after {
  transform: scaleY(0);
}
.pf-role-steps span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  color: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.12);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.pf-role-steps b {
  align-self: end;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}
.pf-role-steps small {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

.pf-stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}
@media (max-width: 575.98px) {
  .pf-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-stat {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  min-height: 210px;
  padding: 22px 20px 20px;
  overflow: hidden;
  background: radial-gradient(120% 80% at 100% 0%, rgba(var(--pf-accent-rgb), 0.14), transparent 60%), rgba(255, 255, 255, 0.025);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.pf-stat::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent-2));
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.pf-stat > b {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #fff, rgba(var(--pf-accent-rgb), 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pf-stat > span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 575.98px) {
  .pf-stat {
    min-height: 0;
  }
}

.pf-viz {
  align-self: start;
  margin-bottom: 20px;
}

.pf-viz-roles {
  display: flex;
  align-items: center;
}
.pf-viz-roles > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 15px;
  color: rgb(var(--pf-role-rgb));
  background: rgba(var(--pf-role-rgb), 0.16);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.12s), opacity 0.5s calc(var(--k, 0) * 0.12s), background-color 0.3s;
}
.pf-viz-roles > i {
  flex: 1;
  min-width: 6px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 4px, transparent 4px 7px);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.12s + 0.1s);
}
.pf-stat:hover .pf-viz-roles > span {
  background: rgba(var(--pf-role-rgb), 0.3);
  transform: translateY(-3px);
}

.pf-viz-waffle {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 16px);
  gap: 5px;
}
.pf-viz-waffle > span {
  width: 16px;
  height: 16px;
  background: rgb(var(--pf-role-rgb));
  opacity: 0.85;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.04s), opacity 0.45s calc(var(--k, 0) * 0.04s);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-stat:hover .pf-viz-waffle > span {
  opacity: 1;
  transform: scale(1.12);
}

.pf-viz-fork {
  display: grid;
  grid-template-columns: 54px auto;
  align-items: center;
  justify-content: start;
}
.pf-viz-fork svg {
  width: 54px;
  height: 78px;
  overflow: visible;
}
.pf-viz-fork path {
  fill: none;
  stroke: rgba(var(--pf-accent-rgb), 0.7);
  stroke-width: 1.6;
  stroke-dasharray: 80;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.pf-viz-fork circle {
  fill: var(--pf-accent);
}
.pf-viz-fork ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-viz-fork li {
  padding: 4px 10px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--c);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.12s + 0.5s), opacity 0.5s calc(var(--k, 0) * 0.12s + 0.5s);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-stat:hover .pf-viz-fork li {
  transform: translateX(4px);
}

.pf-viz-themes {
  display: flex;
  align-items: flex-start;
  height: 66px;
}
.pf-viz-themes > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 20px;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.5s 0.15s;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.pf-viz-themes .is-dark {
  color: #c9cfff;
  background: linear-gradient(140deg, #232a7a, #0b0f33);
}
.pf-viz-themes .is-light {
  margin-left: -14px;
  color: #3d4bff;
  background: linear-gradient(140deg, #fff, #dde2ff);
  transform: translate(10px, 10px);
}
.pf-stat:hover .pf-viz-themes .is-light {
  transform: translate(20px, 4px);
}

.pf-viz-tap {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  font-size: 26px;
  color: #2fe38c;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 227, 140, 0.26), rgba(47, 227, 140, 0.06) 62%, transparent 63%);
  box-shadow: inset 0 0 0 2px rgba(47, 227, 140, 0.55);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 0.5s 0.2s;
}
.pf-viz-tap::before, .pf-viz-tap::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(47, 227, 140, 0.6);
  border-radius: 50%;
  animation: pf-ripple 2.4s ease-out infinite;
}
.pf-viz-tap::after {
  animation-delay: 1.2s;
}
.pf-viz-tap svg {
  width: 28px;
  height: 28px;
}

@keyframes pf-ripple {
  from {
    opacity: 0.8;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-themes .is-light {
  opacity: 0;
  transform: translate(-42px, 0);
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-tap {
  opacity: 0;
  transform: scale(0.5);
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-tap::before, .pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-tap::after {
  animation-play-state: paused;
}

.pf-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.pf-swatches li {
  display: grid;
  gap: 4px;
  padding: 14px 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.pf-swatches i {
  height: 46px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgb(var(--c)), rgba(var(--c), 0.45));
  transform-origin: 50% 100%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.1s), box-shadow 0.3s;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-swatches li:hover i {
  box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.08);
}
.pf-swatches b {
  font-size: 15px;
  font-weight: 600;
}
.pf-swatches span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 767.98px) {
  .pf-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-swatches i {
  transform: scaleY(0.1);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-stat::after {
  transform: scaleX(0);
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-roles > span,
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-waffle > span {
  opacity: 0;
  transform: scale(0.4);
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-roles > i {
  transform: scaleX(0);
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-fork path {
  stroke-dashoffset: 80;
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-fork li {
  opacity: 0;
  transform: translateX(-10px);
}

.pf-tools {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.pf-tools li {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s;
}
.pf-tools li:hover {
  filter: drop-shadow(0 8px 18px rgba(var(--pf-accent-rgb), 0.45));
  transform: translateY(-4px);
}
.pf-tools img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 1199.98px) {
  .pf-tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .pf-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pf-tools.is-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-tour-grid {
  display: grid;
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: center;
}
@media (max-width: 991.98px) {
  .pf-tour-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

.pf-tour-tabs {
  display: grid;
  gap: 6px;
  margin-bottom: 30px;
}
@media (max-width: 991.98px) {
  .pf-tour-tabs {
    display: flex;
    gap: 8px;
    margin: 0 -16px 4px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pf-tour-tabs::-webkit-scrollbar {
    display: none;
  }
}

.pf-tour-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  font-size: 14px;
  text-align: left;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.03);
  transition: color 0.25s, background-color 0.25s;
}
.pf-tour-tab::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: rgba(var(--pf-role-rgb), 0.5);
  transform: rotate(45deg);
  transition: background-color 0.25s, box-shadow 0.25s;
}
.pf-tour-tab:hover {
  color: #fff;
}
.pf-tour-tab[aria-current=true] {
  --al-border-bg: rgba(var(--pf-role-rgb), 0.55) !important;
  color: #fff;
  background: rgba(var(--pf-role-rgb), 0.1);
}
.pf-tour-tab[aria-current=true]::before {
  background: rgb(var(--pf-role-rgb));
  box-shadow: 0 0 10px rgba(var(--pf-role-rgb), 0.9);
}
@media (max-width: 991.98px) {
  .pf-tour-tab {
    flex: none;
    padding: 8px 12px;
    font-size: 13px;
  }
}

.pf-tour-tab-name {
  flex: 1;
}

.pf-ticks {
  display: flex;
  gap: 3px;
}
.pf-ticks i {
  width: 10px;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 0.3s;
}
.pf-ticks i.is-done {
  background: rgba(var(--pf-role-rgb), 0.5);
}
.pf-ticks i.is-current {
  background: rgb(var(--pf-role-rgb));
}
@media (max-width: 991.98px) {
  .pf-ticks {
    display: none;
  }
}

.pf-tour-caps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-tour-cap + .pf-tour-cap {
  margin-top: 32px;
}
.pf-tour-cap h3 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.pf-tour-cap p {
  margin: 0;
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 991.98px) {
  .pf-tour-cap h3 {
    margin: 8px 0 6px;
    font-size: 1.35rem;
  }
  .pf-tour-cap p {
    font-size: 14px;
    line-height: 1.55;
  }
}

.pf-tour-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.pf-tour-meta b {
  font-weight: 600;
  color: #fff;
}
@media (max-width: 991.98px) {
  .pf-tour-meta {
    margin-top: 10px;
  }
}

.pf-tour-bar {
  position: relative;
  flex: 1;
  max-width: 180px;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.pf-tour-bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.pf-section:not(.is-band):has(+ .pf-tour) {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.pf-tour + .pf-section:not(.is-band) {
  padding-top: clamp(40px, 5vw, 72px);
}

.pf-tour + .pf-section:has(.pf-end) {
  padding-top: clamp(44px, 7vw - 24px, 76px);
}

.pf-section.is-band + .pf-section:has(.pf-end) {
  padding-top: clamp(56px, 7vw, 100px) !important;
}

.pf-section.is-band + .pf-tour,
.pf-tour + .pf-section.is-band {
  margin-top: clamp(40px, 5.2vw, 74px);
}

.pf-screen {
  position: relative;
  overflow: hidden;
  background: var(--pf-tint);
  cursor: zoom-in;
}

.pf-shot {
  display: block;
  margin: 0;
}

.pf-shot-img {
  display: block;
  width: 100%;
  height: auto;
}

.pf-shot-modal {
  position: relative;
  display: grid;
  place-items: center;
}

.pf-shot-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(0.5) saturate(0.8);
}

.pf-shot-pop {
  position: relative;
  width: var(--pf-pop-w, 71.6%);
}
.pf-shot-pop img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2.2%/3.5%;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

.pf-spot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 0;
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: none;
  cursor: help;
}
.pf-spot::before, .pf-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.pf-spot::before {
  background: rgba(var(--pf-accent-rgb), 0.45);
  animation: pf-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.pf-spot::after {
  background: linear-gradient(140deg, var(--pf-accent), var(--pf-accent-2));
}
.pf-spot > span:first-child {
  color: var(--pf-on-accent);
}
.pf-spot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 767.98px) {
  .pf-spot {
    display: none;
  }
}

@keyframes pf-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  80%, 100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
.pf-spot-tip {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  width: max-content;
  max-width: 240px;
  padding: 12px 14px;
  font-family: var(--bs-body-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 14, 35, 0.94);
  opacity: 0;
  visibility: hidden;
  transform: translate(-6px, -50%);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.25s;
  pointer-events: none;
}
.pf-spot-tip b {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  color: #fff;
}
.pf-spot.is-left .pf-spot-tip {
  left: auto;
  right: calc(100% + 12px);
  transform: translate(6px, -50%);
}
.pf-spot:hover .pf-spot-tip, .pf-spot:focus-visible .pf-spot-tip, .pf-spot.is-open .pf-spot-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

.pf-spot:hover,
.pf-spot:focus-visible,
.pf-spot.is-open {
  z-index: 4;
}
.pf-spot:hover::before,
.pf-spot:focus-visible::before,
.pf-spot.is-open::before {
  animation: none;
  opacity: 0;
}

.pf-zoom-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 14, 35, 0.78);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-screen:hover .pf-zoom-btn, .pf-zoom-btn:focus-visible {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .pf-zoom-btn {
    opacity: 1;
    transform: none;
  }
}

.pf-strip {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-strip::-webkit-scrollbar {
  display: none;
}
.pf-strip:empty {
  display: none;
}

.pf-thumb {
  --al-border-bg: rgba(255, 255, 255, 0.12);
  position: relative;
  flex: 1 1 0;
  min-width: 46px;
  max-width: 96px;
  padding: 0;
  border: 0;
  background: var(--pf-tint);
  opacity: 0.45;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: var(--pf-screen-ratio, 1920/920);
  object-fit: cover;
  object-position: top;
}
.pf-thumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 2px;
  background: rgb(var(--pf-role-rgb, 255, 255, 255));
}
.pf-thumb:hover {
  opacity: 0.85;
}
.pf-thumb.is-active {
  --al-border-bg: var(--pf-accent);
  opacity: 1;
  transform: translateY(-2px);
}
@media (max-width: 991.98px) {
  .pf-thumb {
    flex: 0 0 64px;
  }
}

.pf-tour-ready .pf-tour-stage {
  display: flex;
  align-items: center;
  padding-block: 24px;
}
@media (max-width: 991.98px) {
  .pf-tour-ready .pf-tour-stage {
    padding-block: 12px;
  }
}
.pf-tour-ready .pf-tour-caps {
  display: grid;
}
.pf-tour-ready .pf-tour-cap {
  grid-area: 1/1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.45s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.45s;
}
.pf-tour-ready .pf-tour-cap.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.08s, 0.08s, 0s;
}
.pf-tour-ready .pf-screen > .pf-shot {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.pf-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
}
.pf-lightbox::backdrop {
  background: rgba(0, 8, 20, 0.9);
  backdrop-filter: blur(6px);
}

.pf-lightbox-body {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 72px 84px 96px;
  overflow: auto;
}
.pf-lightbox-body img {
  max-width: 100%;
  max-height: calc(100vh - 168px);
  border-radius: 10px;
}
@media (max-width: 767.98px) {
  .pf-lightbox-body {
    place-items: center start;
    padding: 72px 16px 110px;
  }
  .pf-lightbox-body img {
    width: 220vw;
    max-width: none;
    max-height: none;
  }
}

.pf-lightbox.is-long .pf-lightbox-body {
  place-items: start center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pf-accent-rgb), 0.5) transparent;
}
.pf-lightbox.is-long .pf-lightbox-body img {
  width: auto;
  max-width: 100%;
  max-height: none;
  border-radius: 10px 10px 0 0;
}
@media (max-width: 767.98px) {
  .pf-lightbox.is-long .pf-lightbox-body {
    place-items: start center;
  }
  .pf-lightbox.is-long .pf-lightbox-body img {
    width: 100%;
  }
}

.pf-lightbox.is-long .pf-lightbox-caption {
  padding: 10px 18px;
  background: rgba(0, 8, 20, 0.88);
  backdrop-filter: blur(8px);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.pf-lightbox-btn {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  font-size: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 0.2s;
}
.pf-lightbox-btn:hover {
  background: rgba(var(--pf-accent-rgb), 0.2);
}
.pf-lightbox-btn:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}
.pf-lightbox-btn[data-pf-lb=close] {
  top: 16px;
  right: 16px;
}
.pf-lightbox-btn[data-pf-lb=prev], .pf-lightbox-btn[data-pf-lb=next] {
  top: 50%;
  margin-top: -24px;
}
@media (max-width: 767.98px) {
  .pf-lightbox-btn[data-pf-lb=prev], .pf-lightbox-btn[data-pf-lb=next] {
    top: auto;
    bottom: 24px;
    margin-top: 0;
  }
}
.pf-lightbox-btn[data-pf-lb=prev] {
  left: 16px;
}
.pf-lightbox-btn[data-pf-lb=next] {
  right: 16px;
}

.pf-lightbox-caption {
  position: fixed;
  left: 50%;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 180px);
  font-size: 14px;
  white-space: nowrap;
  transform: translateX(-50%);
}
.pf-lightbox-caption b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.pf-lightbox-caption span {
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 767.98px) {
  .pf-lightbox-caption {
    bottom: 38px;
  }
}

.pf-lab {
  margin-top: 48px;
  padding: clamp(16px, 3vw, 40px);
  background: rgba(255, 255, 255, 0.035);
}

.pf-lab-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(20px, 3vw, 36px);
  font-size: 14px;
}

.pf-lab-range {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 14px;
  max-width: 460px;
  margin: 0;
}
.pf-lab-range span {
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pf-lab-range input {
  flex: 1;
  accent-color: var(--pf-accent);
}
.pf-lab-range output {
  min-width: 58px;
  font-family: var(--bs-font-monospace);
  text-align: right;
  color: var(--pf-accent);
}

.pf-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.pf-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pf-switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 0.25s;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-switch-track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
input:checked + .pf-switch-track {
  background: var(--pf-accent);
}
input:checked + .pf-switch-track::after {
  background: var(--pf-on-accent);
  transform: translateX(20px);
}

.pf-switch input:focus-visible + .pf-switch-track {
  outline: 2px solid var(--pf-accent);
  outline-offset: 3px;
}

.pf-lab-stage {
  display: flex;
  justify-content: center;
}

.pf-lab-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  opacity: 0;
  transition: opacity 0.3s;
}
.is-xray .pf-lab-legend {
  opacity: 1;
}
.pf-lab-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pf-lab-legend i {
  width: 12px;
  height: 12px;
}

.pf-notch {
  --pf-notch-frame: #c9d4f3;
  --pf-notch-panel: #f5f7fd;
  --pf-notch-r: 18px;
  --pf-notch-gap: 10px;
  --pf-notch-cut-fill: var(--pf-notch-frame);
  --pf-notch-curve-fill: var(--pf-notch-frame);
  width: max(240px, var(--pf-lab-w, 100%));
  max-width: 820px;
  padding: clamp(10px, 2vw, 18px);
  border-radius: calc(var(--pf-notch-r) + 10px);
  color: #44506b;
  background: var(--pf-notch-frame);
}

.pf-notch-panel {
  position: relative;
  container-type: inline-size;
  padding: 26px clamp(16px, 4cqi, 28px) 84px;
  border-radius: var(--pf-notch-r);
  background: var(--pf-notch-panel);
}

.pf-notch-head {
  position: relative;
  margin-right: 64px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e3e9f8;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9cc0f7;
}
.pf-notch-head b {
  color: #3c8cf0;
}
.pf-notch-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: #3c8cf0;
}

.pf-notch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0 14px;
}
@container (max-width: 440px) {
  .pf-notch-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-notch-field {
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 13px;
  background: #e8eefb;
}
.pf-notch-field span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-weight: 600;
  color: #3c8cf0;
}

.pf-notch-input {
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid #dfe6f6;
  border-radius: 14px;
  font-size: 13px;
  color: #b3bdd3;
  background: #f8faff;
}

.pf-notch-cut {
  position: absolute;
  width: var(--pf-cut-w);
  height: var(--pf-cut-h);
  background: var(--pf-notch-cut-fill);
  transition: background-color 0.3s;
}
.pf-notch-cut::before, .pf-notch-cut::after {
  content: "";
  position: absolute;
  width: var(--pf-notch-r);
  height: var(--pf-notch-r);
  background: radial-gradient(circle at var(--pf-curve-at), transparent calc(var(--pf-notch-r) - 0.5px), var(--pf-notch-curve-fill) var(--pf-notch-r));
}
.pf-notch-cut-tr {
  --pf-cut-w: 64px;
  --pf-cut-h: 64px;
  --pf-curve-at: 0 100%;
  top: 0;
  right: 0;
  border-bottom-left-radius: var(--pf-notch-r);
}
.pf-notch-cut-tr::before {
  top: 0;
  right: 100%;
}
.pf-notch-cut-tr::after {
  top: 100%;
  right: 0;
}
.pf-notch-cut-tr .pf-notch-tab {
  top: 0;
  right: 0;
}
.pf-notch-cut-bl {
  --pf-cut-w: clamp(130px, 42%, 300px);
  --pf-cut-h: 58px;
  --pf-curve-at: 100% 0;
  bottom: 0;
  left: 0;
  border-top-right-radius: var(--pf-notch-r);
}
.pf-notch-cut-bl::before {
  bottom: 100%;
  left: 0;
}
.pf-notch-cut-bl::after {
  bottom: 0;
  left: 100%;
}
.pf-notch-cut-bl .pf-notch-tab {
  bottom: 0;
  left: 0;
}

.pf-notch-tab {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(100% - var(--pf-notch-gap));
  height: calc(100% - var(--pf-notch-gap));
  border-radius: calc(var(--pf-notch-r) - 4px);
  transition: opacity 0.3s;
}

.pf-notch-close {
  font-size: 18px;
  color: #44506b;
  background: #dfe6f8;
}

.pf-notch-submit {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #0a6cf0;
}

.pf-lab.is-xray .pf-notch {
  --pf-notch-cut-fill: rgba(255, 92, 138, 0.75);
  --pf-notch-curve-fill: #ffb347;
}
.pf-lab.is-xray .pf-notch .pf-notch-tab {
  opacity: 0.3;
}

.pf-end {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 4vw, 56px);
}

.pf-end-flow {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45), #000 45%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45), #000 45%);
}

.pf-footer {
  font-size: 13px;
}
.pf-footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.pf-footer a:hover {
  color: var(--pf-accent);
}

@media (prefers-reduced-motion: reduce) {
  .pf-spot::before,
  .pf-viz-tap::before,
  .pf-viz-tap::after {
    animation: none;
  }
  .pf-tour-ready .pf-tour-cap,
  .pf-zoom-btn,
  .pf-thumb,
  .pf-spot-tip {
    transition: none;
  }
}
.pf-gauge-mini {
  flex: none;
  width: 58px;
  height: 30px;
  border-radius: 58px 58px 0 0;
  background: conic-gradient(from -90deg at 50% 100%, var(--pf-accent) calc(var(--v, 0.5) * 180deg), rgba(255, 255, 255, 0.14) 0 180deg, transparent 0);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 18px, #000 19px);
  mask: radial-gradient(circle at 50% 100%, transparent 18px, #000 19px);
}

.pf-viz-sides {
  display: grid;
  gap: 8px;
}

.pf-viz-side {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pf-viz-side small {
  width: 54px;
  font-family: var(--bs-font-monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.pf-viz-side i {
  width: 20px;
  height: 22px;
  background: rgba(var(--pf-accent-rgb), 0.55);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.07s), opacity 0.45s calc(var(--k, 0) * 0.07s);
}
.pf-viz-side.is-entity i {
  background: rgba(129, 140, 248, 0.7);
}
.pf-viz-side.is-viewer i {
  background: rgba(255, 255, 255, 0.35);
}
.pf-stat:hover .pf-viz-side i {
  transform: translateY(-2px);
}

.pf-viz-chain svg {
  display: block;
  width: 100%;
  max-width: 184px;
  overflow: visible;
}
.pf-viz-chain path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-viz-chain .pf-viz-chain-line {
  stroke: rgba(var(--pf-accent-rgb), 0.7);
  stroke-width: 2;
  stroke-dasharray: 400;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-viz-chain .pf-viz-chain-back {
  stroke: #ffb347;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  transition: opacity 0.5s 1s;
}
.pf-viz-chain circle {
  fill: var(--pf-accent);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.pf-viz-chain circle.is-entity {
  fill: #818cf8;
}
.pf-viz-chain circle.is-end {
  fill: #2fe38c;
}
.pf-stat:hover .pf-viz-chain circle {
  transform: scale(1.25);
}

.pf-viz-waffle.is-small {
  grid-template-columns: repeat(var(--cols, 4), 12px);
  gap: 4px;
}
.pf-viz-waffle.is-small > span {
  width: 12px;
  height: 12px;
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-side i {
  opacity: 0;
  transform: scale(0.4);
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-chain-line {
  stroke-dashoffset: 400;
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-chain-back {
  opacity: 0;
}
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-rollup li,
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-domains li {
  opacity: 0;
  transform: translateY(8px);
}

.pf-rollup {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.pf-rollup li {
  position: relative;
  padding: 7px 18px 7px 16px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(var(--pf-accent-rgb), calc(0.1 + var(--k, 0) * 0.07));
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.08s), opacity 0.45s calc(var(--k, 0) * 0.08s);
}
.pf-rollup li:first-child {
  padding-left: 12px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}

.pf-domains {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.pf-domains li {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--k, 0) * 0.08s), opacity 0.45s calc(0.3s + var(--k, 0) * 0.08s), background-color 0.3s;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-domains li:hover {
  background: rgba(var(--pf-accent-rgb), 0.1);
}
.pf-domains i {
  margin-bottom: 6px;
  font-size: 20px;
  color: var(--pf-accent);
}
.pf-domains b {
  font-size: 14px;
  font-weight: 600;
}
.pf-domains small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 1199.98px) {
  .pf-domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-card-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.pf-lang p {
  margin: auto 0 0;
  color: rgba(255, 255, 255, 0.62);
}

.pf-lang-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 26px 0;
}
.pf-lang-pair > span {
  display: grid;
  place-items: center;
  min-width: 92px;
  height: 92px;
  padding: 0 14px;
  font-size: 30px;
  font-weight: 700;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.pf-lang-pair .pf-lang-ar {
  font-size: 34px;
  color: var(--pf-on-accent);
  background: linear-gradient(140deg, var(--pf-accent), var(--pf-accent-2));
}
.pf-lang-pair .pf-lang-en {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}
.pf-lang-pair .pf-lang-arrow {
  min-width: 0;
  height: auto;
  padding: 0;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.62);
  clip-path: none;
}

.pf-life {
  margin-top: 48px;
  padding: clamp(18px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.035);
}

.pf-life-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.pf-life-track {
  position: relative;
  min-width: 860px;
  height: 280px;
  background: linear-gradient(rgba(var(--pf-accent-rgb), 0.06), rgba(var(--pf-accent-rgb), 0.06)) 0 6%/100% 42% no-repeat, linear-gradient(rgba(129, 140, 248, 0.07), rgba(129, 140, 248, 0.07)) 0 94%/100% 42% no-repeat;
}

.pf-life-lane {
  position: absolute;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pf-life-lane.is-top {
  top: calc(6% + 10px);
}
.pf-life-lane.is-bottom {
  bottom: calc(6% + 10px);
}

.pf-life-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pf-life-svg path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.pf-life-base {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

.pf-life-done {
  stroke: var(--pf-accent);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(var(--pf-accent-rgb), 0.8));
}

.pf-life-back {
  stroke: #ffb347;
  stroke-width: 2;
  stroke-dasharray: 5 6;
  opacity: 0;
  transition: opacity 0.3s;
  animation: pf-life-march 0.8s linear infinite;
}
.pf-life-back.is-on {
  opacity: 1;
}

@keyframes pf-life-march {
  to {
    stroke-dashoffset: -11;
  }
}
.pf-life-token {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--pf-accent-rgb), 0.35), 0 0 18px rgba(var(--pf-accent-rgb), 1);
  pointer-events: none;
}

.pf-life-node {
  --pf-node-line: rgba(255, 255, 255, 0.22);
  --pf-node-fill: #0d1a33;
  --pf-node-glow: transparent;
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 92px;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  transform: translate(-50%, -24px);
  transition: color 0.3s;
}
.pf-life-node::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 40px;
  height: 40px;
  background: var(--pf-node-glow);
  filter: blur(14px);
  transform: translateX(-50%);
  transition: background-color 0.3s;
  pointer-events: none;
}
.pf-life-node i {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  font-size: 18px;
  color: #fff;
  background: var(--pf-node-line);
  transition: background-color 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.pf-life-node i::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--pf-node-fill);
  transition: background-color 0.3s;
  clip-path: polygon(9.6px 0, calc(100% - 9.6px) 0, 100% 9.6px, 100% calc(100% - 9.6px), calc(100% - 9.6px) 100%, 9.6px 100%, 0 calc(100% - 9.6px), 0 9.6px);
}
.pf-life-node small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.pf-life-node b {
  font-size: 13px;
  font-weight: 600;
}
.pf-life-node.is-bottom {
  --pf-node-line: rgba(129, 140, 248, 0.6);
}
.pf-life-node.is-end {
  --pf-node-line: rgba(47, 227, 140, 0.7);
}
.pf-life-node.is-done {
  --pf-node-fill: #12304d;
  color: rgba(255, 255, 255, 0.85);
}
.pf-life-node:hover i, .pf-life-node:focus-visible i {
  transform: translateY(-3px);
}
.pf-life-node.is-active {
  --pf-node-line: var(--pf-accent);
  --pf-node-fill: var(--pf-accent);
  --pf-node-glow: rgba(var(--pf-accent-rgb), 0.6);
  color: #fff;
}
.pf-life-node.is-active i {
  color: var(--pf-on-accent);
}
.pf-life-node.is-target {
  --pf-node-line: #ffb347;
  --pf-node-glow: rgba(255, 179, 71, 0.4);
}

.pf-life-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 24px;
  margin-top: 18px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
@media (max-width: 767.98px) {
  .pf-life-detail {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pf-life-detail .pf-life-tags {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
}

.pf-life-num {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #fff, rgba(var(--pf-accent-rgb), 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pf-life-copy h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 600;
}
.pf-life-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
}

.pf-life-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.pf-life-tags .pf-role {
  --pf-role-rgb: var(--pf-accent-rgb);
}

.pf-life-ret {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 6px 12px;
  font-size: 12px;
  color: #ffcf8a;
  background: rgba(255, 179, 71, 0.12);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-life-ret[hidden] {
  display: none;
}

.pf-life-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.pf-life-rules li {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.pf-life-rules i {
  font-size: 20px;
  color: #ffb347;
}
.pf-life-rules b {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}
.pf-life-rules span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 767.98px) {
  .pf-life-rules {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-roleview {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  margin-top: 48px;
  padding: clamp(18px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.035);
}
@media (max-width: 991.98px) {
  .pf-roleview {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-roleview-list {
  display: grid;
  gap: 6px;
}
@media (max-width: 991.98px) {
  .pf-roleview-list {
    display: flex;
    flex-wrap: wrap;
  }
}

.pf-roleview-group {
  margin: 12px 0 4px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-accent);
}
.pf-roleview-group:first-child {
  margin-top: 0;
}
@media (max-width: 991.98px) {
  .pf-roleview-group {
    display: none;
  }
}

.pf-roleview-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  overflow: hidden;
  font-size: 14px;
  text-align: left;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.035);
  transition: color 0.25s, background-color 0.25s;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-roleview-btn i {
  font-size: 16px;
}
.pf-roleview-btn b {
  font-weight: 500;
}
.pf-roleview-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--pf-accent);
}
.pf-roleview-btn:hover, .pf-roleview-btn:focus-visible {
  color: #fff;
}
.pf-roleview-btn[aria-pressed=true] {
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.18);
}
.pf-roleview-btn[aria-pressed=true] i {
  color: var(--pf-accent);
}
.pf-roleview-btn.is-timing::after {
  animation: pf-role-time var(--pf-role-ms, 4200ms) linear forwards;
}
@media (max-width: 991.98px) {
  .pf-roleview-btn {
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

@keyframes pf-role-time {
  to {
    width: 100%;
  }
}
.pf-roleview-view {
  min-width: 0;
}
.pf-roleview-view .pf-screen {
  position: relative;
  overflow: hidden;
  background: var(--pf-tint);
}
.pf-roleview-view .pf-shot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.pf-roleview-scan {
  position: absolute;
  inset: 0 0 auto;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(var(--pf-accent-rgb), 0.28) 85%, rgba(var(--pf-accent-rgb), 0.9) 100%);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.pf-roleview-scan.is-on {
  animation: pf-role-scan 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pf-role-scan {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }
  100% {
    opacity: 0.6;
    transform: translateY(340%);
  }
}
.pf-roleview-scope {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}
.pf-roleview-scope i {
  margin-top: 1px;
  color: var(--pf-accent);
}
.pf-roleview-scope b {
  font-weight: 600;
  color: #fff;
}

.pf-challenge {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 1199.98px) {
  .pf-challenge {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-engine,
.pf-reopen {
  padding: clamp(18px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.035);
}

.pf-engine {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 767.98px) {
  .pf-engine {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-engine-rows {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.pf-engine-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "id w" "score score";
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.pf-engine-id {
  grid-area: id;
  display: grid;
  min-width: 0;
}
.pf-engine-id code {
  font-size: 11px;
  color: var(--pf-accent);
}
.pf-engine-id span {
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-engine-w {
  grid-area: w;
  padding: 3px 8px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.pf-engine-score {
  grid-area: score;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}
.pf-engine-score button {
  height: 30px;
  padding: 0;
  border: 0;
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  transition: color 0.2s, background-color 0.2s, transform 0.2s;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-engine-score button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pf-engine-score button[aria-checked=true] {
  font-weight: 700;
  color: #061021;
  background: var(--c, var(--pf-accent));
  transform: translateY(-1px);
}

.pf-engine-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 16px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
.pf-engine-formula span {
  font-family: var(--bs-font-monospace);
  color: #fff;
}
.pf-engine-formula code {
  font-size: 12px;
  color: var(--pf-accent);
}

.pf-engine-out {
  display: grid;
  align-content: center;
  gap: 16px;
}

.pf-gauge {
  position: relative;
  width: min(100%, 300px);
  margin-inline: auto;
}
.pf-gauge svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.pf-gauge path {
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
}
.pf-gauge .pf-gauge-track {
  stroke: rgba(255, 255, 255, 0.08);
}
.pf-gauge .pf-gauge-fill {
  stroke: var(--pf-gauge-c, var(--pf-accent));
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--v, 0.5) * 100);
  filter: drop-shadow(0 0 10px var(--pf-gauge-c, var(--pf-accent)));
  transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.4s;
}

.pf-gauge-num {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  display: grid;
  justify-items: center;
}
.pf-gauge-num b {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pf-gauge-num span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.pf-gauge-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.pf-engine-precise {
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}
.pf-engine-precise code {
  color: #fff;
}

.pf-engine-mirrors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-engine-mirrors li {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 6px;
  background: rgba(255, 255, 255, 0.04);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-engine-mirrors i {
  color: var(--pf-accent);
}
.pf-engine-mirrors span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}
.pf-engine-mirrors b {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pf-engine-mirrors .is-flash {
  animation: pf-mirror-flash 0.6s ease-out;
}

@keyframes pf-mirror-flash {
  0% {
    background: rgba(var(--pf-accent-rgb), 0.45);
  }
}
.pf-reopen {
  display: flex;
  flex-direction: column;
}
.pf-reopen > p {
  color: rgba(255, 255, 255, 0.62);
}

.pf-reopen-list {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.pf-reopen-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  font-size: 13px;
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.035);
  transition: color 0.25s, background-color 0.25s, opacity 0.25s;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-reopen-row code {
  font-size: 11px;
  color: var(--pf-accent);
}
.pf-reopen-row span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-reopen-row em {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #2fe38c;
}
.pf-reopen-row:hover {
  background: rgba(255, 255, 255, 0.07);
}
.pf-reopen-row[aria-pressed=true] {
  color: #fff;
  background: rgba(255, 179, 71, 0.16);
  box-shadow: inset 3px 0 0 #ffb347;
}
.pf-reopen-row[aria-pressed=true] em {
  color: #ffb347;
}
.is-frozen .pf-reopen-row:not([aria-pressed=true]) {
  opacity: 0.6;
}
.is-frozen .pf-reopen-row:not([aria-pressed=true]) em {
  color: rgba(255, 255, 255, 0.6);
}

.pf-reopen-sum {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 13px;
}
.pf-reopen-sum b {
  color: #ffb347;
}

@media (prefers-reduced-motion: reduce) {
  .pf-life-back,
  .pf-roleview-scan.is-on {
    animation: none;
  }
}
.pf-poll {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  min-width: 190px;
}
.pf-poll span {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 6px 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-poll span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 0%);
  background: linear-gradient(90deg, rgba(var(--pf-accent-rgb), 0.55), rgba(var(--pf-accent-rgb), 0.15));
  animation: pf-poll-fill 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}
.pf-poll span b,
.pf-poll span i {
  position: relative;
  font-style: normal;
}
.pf-poll span b {
  font-weight: 600;
}

@keyframes pf-poll-fill {
  from {
    width: 0;
  }
}
.pf-appdots {
  display: grid;
  grid-template-columns: repeat(6, 12px);
  gap: 4px;
}
.pf-appdots i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgb(var(--c));
  opacity: 0.85;
  animation: pf-appdot 3.2s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * 0.12s);
}

@keyframes pf-appdot {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
.pf-features {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.pf-features > li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 0.3s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.08s), opacity 0.45s calc(var(--k, 0) * 0.08s);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-features > li:hover {
  background: rgba(var(--pf-role-rgb), 0.1);
}
@media (max-width: 575.98px) {
  .pf-features > li {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-features-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--pf-role-rgb));
}
.pf-features-name i {
  font-size: 18px;
}

.pf-features-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pf-features-items span {
  padding: 5px 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(var(--pf-role-rgb), 0.12);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.pf-viz-apps {
  display: grid;
  grid-template-columns: repeat(8, 14px);
  gap: 5px;
}
.pf-viz-apps i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(var(--c), 0.85);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.04s), opacity 0.45s calc(var(--k, 0) * 0.04s);
}
.pf-viz-apps i.is-core {
  background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent-2));
  box-shadow: 0 0 10px rgba(var(--pf-accent-rgb), 0.8);
}
.pf-stat:hover .pf-viz-apps i {
  transform: translateY(-2px);
}

.pf-viz-modes {
  position: relative;
  width: 112px;
  aspect-ratio: 1920/1082;
  overflow: hidden;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-viz-modes img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.pf-viz-modes img + img {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.pf-eco {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  margin-top: 22px;
}
@media (max-width: 991.98px) {
  .pf-eco {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-eco-core {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.55);
  position: relative;
  display: grid;
  gap: 12px;
  padding: 22px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--pf-accent-rgb), 0.22), transparent 60%), rgba(var(--pf-accent-rgb), 0.07);
}
.pf-eco-core > b {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
}
.pf-eco-core > b i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--pf-accent-2), var(--pf-accent));
  box-shadow: 0 6px 20px rgba(var(--pf-accent-rgb), 0.45);
}
.pf-eco-core > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
.pf-eco-core ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-eco-core li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.18);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-eco-core li i {
  color: var(--pf-accent);
}

.pf-eco-families {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-eco-families > li {
  display: grid;
  align-content: start;
  gap: 8px;
  --al-border-bg: rgba(var(--pf-role-rgb), 0.28);
  padding: 16px 14px 14px;
  background: rgba(var(--pf-role-rgb), 0.06);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.08s), opacity 0.45s calc(var(--k, 0) * 0.08s), background-color 0.3s;
}
.pf-eco-families > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--pf-role-rgb), 0.95), rgba(var(--pf-role-rgb), 0.25));
  pointer-events: none;
}
.pf-eco-families > li:hover {
  --al-border-bg: rgba(var(--pf-role-rgb), 0.5);
  background: rgba(var(--pf-role-rgb), 0.12);
}
.pf-eco-families b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--pf-role-rgb));
}
.pf-eco-families .pf-eco-app {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  --al-border-bg: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
}
.pf-eco-families .pf-eco-app strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.pf-eco-families .pf-eco-app strong i {
  font-size: 11px;
  color: rgb(var(--pf-role-rgb));
}
.pf-eco-families .pf-eco-app small {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.pf-eco-families a.pf-eco-app {
  --al-border-bg: rgba(var(--pf-role-rgb), 0.45);
  transition: background-color 0.25s;
}
.pf-eco-families a.pf-eco-app:hover, .pf-eco-families a.pf-eco-app:focus-visible {
  --al-border-bg: rgb(var(--pf-role-rgb));
  background: rgba(var(--pf-role-rgb), 0.14);
  outline: none;
}
@media (max-width: 1199.98px) {
  .pf-eco-families {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .pf-eco-families {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-eco-more {
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
.pf-eco-more b {
  color: var(--pf-accent);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-apps i,
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-features > li,
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-eco-families > li {
  opacity: 0;
  transform: translateY(8px);
}

.pf-swatch {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  --al-border-bg: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
}
.pf-swatch img {
  width: 100%;
  max-width: 64px;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-swatch:hover img {
  transform: scale(1.08) rotate(-4deg);
}
.pf-swatch:hover {
  --al-border-bg: rgba(255, 255, 255, 0.22);
}
.pf-swatch[aria-pressed=true] {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.75);
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.16);
}

.pf-wb {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
  margin-top: 48px;
  padding: clamp(16px, 2.5vw, 32px);
  background: rgba(255, 255, 255, 0.035);
}
@media (max-width: 991.98px) {
  .pf-wb {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-wb-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}
.pf-wb-panel h3 {
  margin: 0;
}
.pf-wb-panel > p {
  margin: -8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.pf-wb-group {
  display: grid;
  gap: 8px;
}
.pf-wb-group > small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.pf-wb-group > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
@media (max-width: 991.98px) {
  .pf-wb-group > div {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .pf-wb-group > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pf-wb-group.is-apps > small {
  color: var(--pf-accent-2);
}

.pf-wb-tool {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 4px 8px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  cursor: grab;
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-wb-tool i {
  font-size: 17px;
  color: var(--pf-accent);
}
.is-apps .pf-wb-tool i {
  color: var(--pf-accent-2);
}
.pf-wb-tool:hover {
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.16);
  transform: translateY(-2px);
}
.pf-wb-tool:active, .pf-wb-tool.is-pressed {
  transform: scale(0.94);
  background: rgba(var(--pf-accent-rgb), 0.3);
}
.pf-wb-tool.is-used::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(47, 227, 140);
}

.pf-wb-group.is-themes > small b {
  margin-left: 4px;
  color: var(--pf-theme, var(--pf-accent));
  transition: color 0.4s;
}

.pf-wb-themes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .pf-wb-themes {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
.pf-wb-themes .pf-swatch {
  gap: 3px;
  padding: 6px 2px 5px;
  font-size: 10px;
}
.pf-wb-themes .pf-swatch img {
  max-width: 40px;
}

.pf-wb-theme {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--pf-theme, var(--pf-accent)) 35%, transparent);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  transition: background-color 0.4s;
}

.pf-wb-frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pf-wb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: #12122a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pf-wb-toolbar > span {
  margin-right: auto;
}
.pf-wb-toolbar > span b {
  color: var(--pf-accent);
  font-variant-numeric: tabular-nums;
}

.pf-wb-seg {
  display: inline-flex;
  padding: 2px;
  background: rgba(255, 255, 255, 0.06);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-wb-seg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: 0;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-wb-seg button[aria-pressed=true] {
  color: #fff;
  background: var(--pf-accent);
}

.pf-wb-page {
  container-type: inline-size;
  flex: 1 1 0;
  min-height: clamp(440px, 66vh, 660px);
  padding: 14px;
  overflow-y: auto;
  color: #1d2433;
  background: #f5f6fb;
  scrollbar-width: thin;
}

.pf-wb-banner {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: calc(24 * var(--u));
}

.pf-wb-banner,
.pf-wb-grid {
  --u: clamp(0.72px, calc(100cqi / 1616), 1px);
}

.pf-wb-grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: start;
  gap: calc(24 * var(--u));
  min-height: 160px;
  border-radius: 10px;
  transition: background-color 0.25s, box-shadow 0.25s;
}
.pf-wb-grid[data-cols="1"] {
  --cols: 1;
}
.pf-wb-grid[data-cols="2"] {
  --cols: 2;
}
.is-dropping .pf-wb-grid {
  background: rgba(139, 92, 246, 0.06);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
}
@container (max-width: 520px) {
  .pf-wb-grid {
    --cols: 1 !important;
  }
}
@media (max-width: 575.98px) {
  .pf-wb-grid {
    --cols: 1 !important;
  }
}

.pf-wb-empty {
  display: none;
  grid-column: 1/-1;
  place-items: center;
  gap: 6px;
  min-height: 160px;
  font-size: 13px;
  color: #6b7280;
  border: 2px dashed #d5d8e8;
  border-radius: 10px;
}
.pf-wb-empty i {
  font-size: 22px;
  color: #8b5cf6;
}
.is-empty .pf-wb-empty {
  display: grid;
}

.pf-wb-mark {
  min-height: 60px;
  border: 2px dashed #8b5cf6;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.08);
}

.pf-wb-item {
  position: relative;
  padding: calc(20 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.45;
  color: #0f172a;
  background: #fff;
  border-radius: calc(16 * var(--u));
  box-shadow: 0 0 0 1px #eef0f6, 0 1px 2px rgba(15, 23, 42, 0.03);
  cursor: grab;
  transition: box-shadow 0.25s, opacity 0.25s, transform 0.25s;
}
.pf-wb-item:hover, .pf-wb-item:focus-within {
  box-shadow: 0 0 0 2px #8b5cf6, 0 14px 30px -18px rgba(139, 92, 246, 0.7);
}
.pf-wb-item.is-dragging {
  opacity: 0.4;
}
.pf-wb-item.is-new {
  animation: pf-wb-in 0.6s cubic-bezier(0.16, 1, 0.3, 1), pf-wb-flash 1.4s ease-out;
}
.pf-wb-item.is-leaving {
  opacity: 0;
  transform: scale(0.94);
}
.is-preview .pf-wb-item {
  cursor: default;
  box-shadow: 0 0 0 1px #eef0f6, 0 1px 2px rgba(15, 23, 42, 0.03);
}

@keyframes pf-wb-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes pf-wb-flash {
  0%, 30% {
    box-shadow: 0 0 0 3px #8b5cf6, 0 12px 30px -10px rgba(139, 92, 246, 0.7);
  }
}
.pf-wb-bar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 3px 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: #8b5cf6;
  border-radius: 6px;
  box-shadow: 0 6px 14px -6px rgba(109, 40, 217, 0.7);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.pf-wb-item:hover .pf-wb-bar, .pf-wb-item:focus-within .pf-wb-bar, .pf-wb-item.is-new .pf-wb-bar {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
@media (hover: none) {
  .pf-wb-bar {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
}
.is-preview .pf-wb-bar {
  display: none;
}

.pf-wb-x {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  border-radius: 4px;
}
.pf-wb-x:hover, .pf-wb-x:focus-visible {
  background: #ef4444;
}

.pf-w-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  margin-bottom: calc(14 * var(--u));
}
.pf-w-head b {
  font-size: calc(17 * var(--u));
  font-weight: 700;
}
.pf-w-head .pf-w-link {
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: #4f5bd5;
}

.pf-w-chip {
  padding: calc(3 * var(--u)) calc(9 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 600;
  color: #7e22ce;
  background: #f3e8ff;
  border-radius: calc(8 * var(--u));
}
.pf-w-chip.is-blue {
  color: #2563eb;
  background: #e8efff;
}
.pf-w-chip.is-caps {
  display: inline-block;
  font-size: calc(10 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pf-w-rows {
  display: grid;
  gap: calc(10 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-w-rows li {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.pf-w-list {
  gap: 0;
  border-top: 1px solid #f0f1f5;
}
.pf-w-list li {
  padding: calc(12 * var(--u)) 0;
  border-bottom: 1px solid #f0f1f5;
}

.pf-w-av {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: var(--c, #6d28d9);
  background: color-mix(in srgb, var(--c, #6d28d9) 9%, #fff);
}

.pf-w-who {
  flex: 1;
  min-width: 0;
}
.pf-w-who b,
.pf-w-who small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-w-who b {
  font-size: calc(14 * var(--u));
  font-weight: 600;
}
.pf-w-who small {
  margin-top: calc(2 * var(--u));
  font-size: calc(12 * var(--u));
  color: #6b7280;
}
.pf-w-who.is-wrap b, .pf-w-who.is-wrap small {
  white-space: normal;
}

.pf-w-dot {
  flex: none;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: #6ab04c;
}

.pf-w-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(14 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: #2563eb;
}

.pf-w-author {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.pf-w-author .pf-w-av {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  font-size: calc(12 * var(--u));
}

.pf-w-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  font-size: calc(11 * var(--u));
  color: #475569;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
}

.pf-w-kebab {
  font-size: calc(15 * var(--u));
  color: #64748b;
}

.pf-w-img {
  display: block;
  aspect-ratio: 16/8.5;
  margin: calc(14 * var(--u)) 0;
  border-radius: calc(14 * var(--u));
  background-color: #e7e9f3;
  background-size: cover;
  background-position: center;
}

.pf-w-title {
  display: block;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.35;
}

.pf-w-muted {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  line-height: 1.5;
  color: #6b7280;
}

.pf-w-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pf-w-acts {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  margin-top: calc(14 * var(--u));
  padding-top: calc(14 * var(--u));
  font-size: calc(13 * var(--u));
  color: #475569;
  border-top: 1px solid #f0f1f5;
}
.pf-w-acts span {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
}
.pf-w-acts > i {
  margin-left: auto;
}

.pf-w-q {
  display: block;
  margin: calc(12 * var(--u)) 0 calc(14 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
}

.pf-w-poll {
  display: grid;
  gap: calc(10 * var(--u));
}
.pf-w-poll span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(44 * var(--u));
  padding: 0 calc(16 * var(--u));
  overflow: hidden;
  background: #f8faff;
  border-radius: calc(8 * var(--u));
}
.pf-w-poll span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  background: #dbe7ff;
}
.pf-w-poll span:nth-child(3)::before {
  background: #ece6ff;
}
.pf-w-poll span:nth-child(4)::before {
  background: #fbefe2;
}
.pf-w-poll span:first-child {
  background: #faf5ff;
  box-shadow: inset 0 0 0 1px #7c3aed;
}
.pf-w-poll span:first-child::before {
  background: linear-gradient(90deg, #7e22ce, #5b21b6);
}
.pf-w-poll span:first-child b {
  color: #fff;
}
.pf-w-poll span:first-child em {
  color: #7c3aed;
}
.pf-w-poll b,
.pf-w-poll em {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  font-style: normal;
  font-weight: 600;
}
.pf-w-poll em {
  font-size: calc(15 * var(--u));
  font-weight: 700;
  color: #4b5563;
}

.pf-w-foot {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(16 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid #f0f1f5;
}
.pf-w-foot small {
  flex: 1;
  font-size: calc(12 * var(--u));
  color: #6b7280;
}

.pf-w-faces {
  display: flex;
}
.pf-w-faces i {
  display: grid;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-left: calc(-8 * var(--u));
  border-radius: 50%;
  font-size: calc(9 * var(--u));
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background: var(--c);
  box-shadow: 0 0 0 2px #fff;
}
.pf-w-faces i:first-child {
  margin-left: 0;
}

.pf-w-ghost {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border-radius: calc(8 * var(--u));
}

.pf-w-boxes {
  gap: calc(18 * var(--u));
}
.pf-w-boxes li {
  position: relative;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  border: 1px solid #eef0f6;
  border-radius: calc(10 * var(--u));
}
.pf-w-boxes li + li::before {
  content: "";
  position: absolute;
  left: calc(31 * var(--u));
  top: calc(-19 * var(--u));
  height: calc(18 * var(--u));
  border-left: 1px solid #e5e7eb;
}

.pf-w-date {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(40 * var(--u));
  padding: calc(6 * var(--u)) 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.1;
  color: #7c3aed;
  background: #f5f3ff;
  border-radius: calc(8 * var(--u));
}
.pf-w-date small {
  font-size: calc(9 * var(--u));
  font-weight: 600;
  text-transform: uppercase;
}

.pf-w-faq {
  gap: 0;
}
.pf-w-faq li {
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) 0;
  font-size: calc(13 * var(--u));
  color: #475569;
  border-top: 1px solid #f0f1f5;
}
.pf-w-faq i {
  font-size: calc(11 * var(--u));
  color: #64748b;
}

.pf-w-h {
  display: block;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

.pf-w-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--u));
}
.pf-w-gallery i {
  aspect-ratio: 4/3;
  border-radius: calc(10 * var(--u));
  background-color: #e7e9f3;
  background-size: 200% auto;
}

.pf-w-video {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16/8.5;
  margin-bottom: calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  background: linear-gradient(135deg, #1e1b4b, #4c1d95 60%, #1d4ed8);
}
.pf-w-video i {
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  font-size: calc(20 * var(--u));
  color: #6d28d9;
  background: #fff;
}

.pf-w-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #7e22ce, #5b21b6);
  border-radius: calc(8 * var(--u));
}

.pf-w-task {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(8 * var(--u)) calc(10 * var(--u)) !important;
}
.pf-w-task > span {
  overflow: hidden;
  font-size: calc(13 * var(--u));
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-w-task em {
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  font-size: calc(11 * var(--u));
  font-style: normal;
  font-weight: 600;
  color: #dc2626;
  background: #fee2e2;
  border-radius: calc(6 * var(--u));
}
.pf-w-task em.is-low {
  color: #16a34a;
  background: #dcfce7;
}
.pf-w-task > i {
  grid-column: 1/-1;
  height: calc(5 * var(--u));
  border-radius: calc(5 * var(--u));
  background: linear-gradient(90deg, #7c3aed var(--v), #ede9fe var(--v));
}

.pf-w-timer {
  display: grid;
  justify-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) 0 calc(4 * var(--u));
}
.pf-w-timer small {
  font-size: calc(11 * var(--u));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #16a34a;
}
.pf-w-timer b {
  font-size: calc(34 * var(--u));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pf-w-timer span {
  display: flex;
  gap: calc(8 * var(--u));
}
.pf-w-timer span i {
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  font-size: calc(12 * var(--u));
  font-style: normal;
  font-weight: 600;
  color: #fff;
  background: #7c3aed;
  border-radius: calc(8 * var(--u));
}
.pf-w-timer span i + i {
  color: #dc2626;
  background: #fee2e2;
}

.pf-steps-view .pf-roleview-btn small {
  min-width: 22px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--pf-accent);
}

.pf-wbx {
  margin-top: 48px;
  scroll-margin-top: 96px;
  padding: clamp(16px, 2.5vw, 32px);
  isolation: isolate;
  background: none;
}
.pf-wbx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-wbx::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}
.pf-wbx .pf-wb,
.pf-wbx .pf-roleview {
  margin: 0;
  padding: 0;
  background: none;
}
.pf-wbx .pf-roleview {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
}
@media (max-width: 991.98px) {
  .pf-wbx .pf-roleview {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-wbx-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pf-wbx-tab {
  --al-corner-bg: rgba(255, 255, 255, 0.03);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  padding: 12px 18px 12px 14px;
  border: 0;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
  text-align: start;
  transition: background 0.25s ease, color 0.25s ease;
}
.pf-wbx-tab > i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: rgba(var(--pf-accent-rgb), 0.14);
  color: var(--pf-accent);
  font-size: 16px;
  transition: background 0.25s ease, color 0.25s ease;
}
.pf-wbx-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent-2));
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pf-wbx-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.pf-wbx-tab[aria-selected=true] {
  background: linear-gradient(120deg, rgba(var(--pf-accent-rgb), 0.28), rgba(var(--pf-accent-rgb), 0.06));
  color: #fff;
}
.pf-wbx-tab[aria-selected=true] > i {
  background: var(--pf-accent);
  color: var(--pf-on-accent);
}
.pf-wbx-tab[aria-selected=true]::after {
  transform: scaleX(1);
}
.pf-wbx-tab:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .pf-wbx-tab {
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
    padding: 10px;
  }
  .pf-wbx-tab > i {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .pf-wbx-tab .pf-wbx-num,
  .pf-wbx-tab small {
    display: none;
  }
  .pf-wbx-tab b {
    font-size: 14px;
  }
}

.pf-wbx-num {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--pf-accent);
}

.pf-wbx-txt {
  display: grid;
  gap: 2px;
  line-height: 1.2;
}
.pf-wbx-txt b {
  font-size: 15px;
  font-weight: 600;
}
.pf-wbx-txt small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.pf-wbx-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.pf-wbx-note i {
  color: var(--pf-accent);
}
@media (max-width: 1199.98px) {
  .pf-wbx-note {
    display: none;
  }
}

.pf-wbx-pane[hidden] {
  display: none;
}
.pf-wbx-pane.is-in {
  animation: pf-wbx-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pf-wbx-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.pf-wbx-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 11px 14px;
  border: 1px dashed rgba(var(--pf-accent-rgb), 0.45);
  background: rgba(var(--pf-accent-rgb), 0.06);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 0.25s ease;
}
.pf-wbx-go i {
  color: var(--pf-accent);
  transition: transform 0.25s ease;
}
.pf-wbx-go:hover {
  background: rgba(var(--pf-accent-rgb), 0.16);
}
.pf-wbx-go:hover i {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .pf-wbx-pane.is-in {
    animation: none;
  }
}
.pf-st-new {
  --pf-st-rgb: 125, 211, 252;
}

.pf-st-progress {
  --pf-st-rgb: 9, 166, 255;
}

.pf-st-returned {
  --pf-st-rgb: 255, 157, 28;
}

.pf-st-final {
  --pf-st-rgb: 167, 139, 250;
}

.pf-st-reopened {
  --pf-st-rgb: 251, 191, 36;
}

.pf-st-closed {
  --pf-st-rgb: 47, 211, 120;
}

.pf-st-archived {
  --pf-st-rgb: 148, 163, 184;
}

.pf-ribbon {
  --pf-st-rgb: 9, 166, 255;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: #04101f;
  background: rgb(var(--pf-st-rgb));
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 8px 100%);
  transition: background-color 0.4s;
}
.pf-ribbon span[lang=ar] {
  font-weight: 700;
  opacity: 0.75;
}

.pf-case-mini {
  display: grid;
  gap: 8px;
}
.pf-case-mini .pf-ribbon {
  justify-self: start;
  margin: -14px 0 2px;
}
.pf-case-mini b {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.pf-case-mini small {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.pf-case-mini em {
  padding: 1px 7px;
  font-style: normal;
  color: #ff8b80;
  background: rgba(255, 120, 110, 0.14);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}

.pf-donut.is-cases {
  background: conic-gradient(rgb(47, 211, 120) 0 59%, rgb(255, 157, 28) 0 82%, rgb(9, 166, 255) 0 96%, rgb(167, 139, 250) 0);
}

.pf-viz-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 260px;
}
.pf-viz-status .pf-ribbon {
  padding: 2px 10px 3px;
  font-size: 10px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.07s), opacity 0.45s calc(var(--k, 0) * 0.07s);
}
.pf-stat:hover .pf-viz-status .pf-ribbon {
  transform: translateY(-2px);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-status .pf-ribbon {
  opacity: 0;
  transform: translateY(6px);
}

.pf-case {
  --pf-case-rgb: 148, 163, 184;
  --pf-case-p: 0;
  margin-top: 48px;
  padding: clamp(16px, 2.6vw, 34px);
  isolation: isolate;
  background: none;
}
.pf-case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-case::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-case-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 clamp(20px, 3vw, 34px);
  padding: 0;
  list-style: none;
}
.pf-case-steps::before, .pf-case-steps::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 8.3333333333%;
  height: 2px;
}
.pf-case-steps::before {
  right: 8.3333333333%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 5px, transparent 5px 9px);
}
.pf-case-steps::after {
  width: calc(83.3333333333% * var(--pf-case-p));
  background: linear-gradient(90deg, var(--pf-accent), rgb(var(--pf-case-rgb)));
  box-shadow: 0 0 12px rgba(var(--pf-case-rgb), 0.6);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s;
}
.pf-case-steps li {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.pf-case-steps .pf-case-tab {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 100%;
  padding: 0 4px 4px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  background: none;
  border: 0;
  transition: color 0.3s;
}
.pf-case-steps .pf-case-tab::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--pf-case-rgb), 0.55), transparent);
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.pf-case-steps .pf-case-tab:hover {
  color: #fff;
}
.pf-case-steps .pf-case-tab:hover i {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.8);
  color: #fff;
  transform: translateY(-2px);
}
.pf-case-steps .pf-case-tab:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 4px;
}
.pf-case-steps i {
  --al-border-bg: rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  font-size: 18px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
  background: #0a1830;
  transition: color 0.3s, background-color 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-case-steps b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.pf-case-steps small {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.pf-case-steps .is-done .pf-case-tab {
  color: rgba(255, 255, 255, 0.8);
}
.pf-case-steps .is-done .pf-case-tab i {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.55);
  color: var(--pf-accent);
  background: #0c2442;
}
.pf-case-steps .is-now .pf-case-tab {
  color: #fff;
}
.pf-case-steps .is-now .pf-case-tab::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.pf-case-steps .is-now .pf-case-tab i {
  --al-border-bg: rgba(255, 255, 255, 0.55);
  color: #04101f;
  background: rgb(var(--pf-case-rgb));
  transform: translateY(-2px) scale(1.06);
}
.pf-case-steps .is-now .pf-case-tab small {
  color: rgb(var(--pf-case-rgb));
}
@media (max-width: 575.98px) {
  .pf-case-steps::before, .pf-case-steps::after {
    top: 16px;
  }
  .pf-case-steps i {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    font-size: 14px;
  }
  .pf-case-steps b {
    font-size: 10px;
  }
  .pf-case-steps small {
    display: none;
  }
  .pf-case-steps li:not(.is-now) b {
    opacity: 0;
  }
  .pf-case-steps .pf-case-tab::before {
    top: -14px;
    width: 52px;
    height: 52px;
  }
}

.pf-case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .pf-case-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-case-card {
  --al-border-bg: rgba(var(--pf-case-rgb), 0.45);
  position: relative;
  padding: 0 clamp(16px, 2vw, 24px) clamp(16px, 2vw, 22px);
  background: radial-gradient(90% 70% at 100% 0%, rgba(var(--pf-case-rgb), 0.16), transparent 60%), rgba(8, 22, 46, 0.7);
  transition: background 0.5s;
}
.pf-case-card > .pf-ribbon {
  margin-bottom: 14px;
  background: rgb(var(--pf-case-rgb));
}

.pf-case-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pf-case-head > i {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 22px;
  color: rgb(var(--pf-case-rgb));
  background: rgba(var(--pf-case-rgb), 0.14);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transition: color 0.4s, background-color 0.4s;
}
.pf-case-head small {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}
.pf-case-head b {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.pf-case-head b span {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.pf-case-sla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 4px 6px 4px 10px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-case-sla b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  font-size: 12px;
  color: #fff;
  background: var(--pf-accent);
  border-radius: 50%;
  transition: background-color 0.3s;
}
.pf-case-sla.is-low b {
  background: #ff5c5c;
}
.pf-case-sla[hidden] {
  display: none;
}

.pf-case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pf-case-facts div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.pf-case-facts dt {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.pf-case-facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
}
.pf-case-facts em {
  padding: 1px 8px;
  font-size: 11px;
  font-style: normal;
  color: #ff8b80;
  background: rgba(255, 120, 110, 0.14);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-case-facts em.is-info {
  color: #ffb86b;
  background: rgba(255, 157, 28, 0.14);
}
.pf-case-facts .pf-role {
  padding: 3px 9px;
  font-size: 10px;
}

.pf-case-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.pf-case-sides > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  --al-border-bg: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
.pf-case-sides > span i {
  font-size: 18px;
  color: var(--c);
}
.pf-case-sides > span small {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.pf-case-sides > i {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 575.98px) {
  .pf-case-sides {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .pf-case-sides > i {
    display: none;
  }
}

.pf-case-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.pf-case-counts li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-case-counts b {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pf-case-counts span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
  .pf-case-counts {
    gap: 6px;
  }
  .pf-case-counts li {
    padding: 8px 9px;
  }
  .pf-case-counts span {
    font-size: 9.5px;
  }
}

.pf-case-now {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.pf-case-now > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.pf-case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
}

.pf-case-act {
  --al-corner-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s, opacity 0.25s;
  animation: pf-case-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-case-act.is-main {
  color: #04101f;
  background: var(--pf-accent);
}
.pf-case-act.is-main:hover {
  background: #4cc0ff;
}
.pf-case-act.is-main {
  --al-border-bg: transparent;
}
.pf-case-act.is-step {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.6);
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.16);
}
.pf-case-act.is-step:hover {
  background: rgba(var(--pf-accent-rgb), 0.28);
}
.pf-case-act.is-back {
  --al-border-bg: rgba(255, 157, 28, 0.55);
  color: #ffb86b;
  background: rgba(255, 157, 28, 0.1);
}
.pf-case-act.is-back:hover {
  background: rgba(255, 157, 28, 0.2);
}
.pf-case-act:active {
  transform: scale(0.97);
}
.pf-case-act:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pf-case-act:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.pf-case-act.is-next {
  --al-border-bg: #fff;
}
.pf-case-act.is-next::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.14);
  animation: pf-case-next 1.3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pf-case-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes pf-case-next {
  50% {
    opacity: 0.2;
  }
}
.pf-case-note {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.pf-case-note i {
  color: var(--pf-accent);
}

.pf-case-logbox {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: clamp(16px, 2vw, 22px);
  background: rgba(255, 255, 255, 0.025);
}
.pf-case-logbox .pf-case-loghead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pf-case-logbox .pf-case-loghead h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.pf-case-logbox .pf-case-loghead h3 span {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.pf-case-logbox .pf-case-loghead small {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
}

.pf-case-logwrap {
  position: relative;
  min-height: 0;
}
.pf-case-logwrap:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 4px;
}
@media (max-width: 991.98px) {
  .pf-case-logwrap {
    height: 380px;
  }
}

.pf-case-log {
  position: absolute;
  inset: 0;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 6px 28px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pf-accent-rgb), 0.4) transparent;
  -webkit-mask: linear-gradient(#000 calc(100% - 40px), transparent);
  mask: linear-gradient(#000 calc(100% - 40px), transparent);
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-case-log::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 15px;
  width: 1px;
  background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
}

.pf-case-entry {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
}
.pf-case-entry.is-new {
  animation: pf-case-log 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-case-entry:nth-child(n+4) {
  opacity: 0.55;
}
.pf-case-entry > div {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  --al-border-bg: rgba(var(--pf-role-rgb), 0.35);
  background: rgba(var(--pf-role-rgb), 0.06);
}
.pf-case-entry:first-child > div {
  --al-border-bg: rgba(var(--pf-role-rgb), 0.75);
  background: rgba(var(--pf-role-rgb), 0.12);
}
.pf-case-entry small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}
.pf-case-entry small b {
  font-weight: 500;
  color: rgb(var(--pf-role-rgb));
}
.pf-case-entry strong {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}
.pf-case-entry span {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

.pf-case-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: rgb(var(--pf-role-rgb));
  background: rgba(var(--pf-role-rgb), 0.6);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.pf-case-dot::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: #0a1830;
  clip-path: inherit;
}
.pf-case-dot i {
  position: relative;
}

@keyframes pf-case-log {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}
.pf-case-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}
.pf-case-rules li {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-case-rules i {
  font-size: 18px;
  color: var(--pf-accent);
}
.pf-case-rules b {
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px;
  color: #fff;
}
.pf-case-rules span {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 991.98px) {
  .pf-case-rules {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-case-act,
  .pf-case-entry.is-new {
    animation: none;
  }
  .pf-case-act.is-next::before {
    animation: none;
  }
}
.pf-tap-mini {
  display: grid;
  gap: 10px;
}
.pf-tap-mini .pf-tap-who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-tap-mini .pf-tap-who > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 12px;
  font-weight: 700;
  color: #1a0e02;
  background: var(--pf-accent);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.pf-tap-mini .pf-tap-who b {
  display: block;
  font-size: 14px;
  color: #fff;
}
.pf-tap-mini .pf-tap-who small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.pf-tap-mini .pf-tap-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-tap-mini .pf-tap-rules span {
  padding: 2px 7px;
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}

.pf-donut.is-gates {
  background: conic-gradient(rgb(47, 211, 120) 0 40%, rgb(255, 92, 92) 0 52%, rgba(255, 255, 255, 0.14) 0);
}

.pf-viz-kinds {
  display: flex;
  gap: 8px;
}
.pf-viz-kinds > span {
  --al-border-bg: rgba(var(--pf-role-rgb), 0.55);
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 46px;
  padding: 7px 0 6px;
  font-family: var(--bs-font-monospace);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--pf-role-rgb));
  background: rgba(var(--pf-role-rgb), 0.1);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.1s), opacity 0.45s calc(var(--k, 0) * 0.1s);
}
.pf-viz-kinds > span i {
  font-size: 17px;
}
.pf-stat:hover .pf-viz-kinds > span {
  transform: translateY(-3px);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-kinds > span {
  opacity: 0;
  transform: translateY(8px);
}

.pf-gate {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-gate::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-gate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: stretch;
}
@media (max-width: 1199.98px) {
  .pf-gate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pf-gate-grid > .pf-gate-logbox {
    grid-column: 1/-1;
  }
}
@media (max-width: 767.98px) {
  .pf-gate-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-gate-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 1.6vw, 20px);
  background: rgba(8, 14, 30, 0.65);
}

.pf-gate-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pf-gate-head > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  color: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.14);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.pf-gate-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.pf-gate-head small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-gate-label {
  margin: 0 0 -6px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.pf-gate-seg {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 6px;
}
.pf-gate-seg button {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 6px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  transition: color 0.25s, background-color 0.25s;
}
.pf-gate-seg button:hover {
  --al-border-bg: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.pf-gate-seg button[aria-pressed=true] {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.8);
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.18);
}
.pf-gate-seg button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}
.pf-gate-seg.is-days button {
  padding: 7px 0;
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
}
.pf-gate-seg.is-days button.is-weekend {
  color: rgba(255, 179, 71, 0.85);
}

.pf-gate-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-gate-person > div {
  flex: 1;
  min-width: 0;
}
.pf-gate-person b {
  display: block;
  font-size: 14px;
  color: #fff;
}
.pf-gate-person small {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}

.pf-gate-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 12px;
  font-weight: 700;
  color: #1a0e02;
  background: rgb(var(--pf-role-rgb, 242, 156, 79));
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transition: background-color 0.3s;
}

.pf-gate[data-who=staff] {
  --pf-role-rgb: 242, 156, 79;
}

.pf-gate[data-who=contractor] {
  --pf-role-rgb: 251, 191, 36;
}

.pf-gate[data-who=visitor] {
  --pf-role-rgb: 26, 160, 255;
}

.pf-gate-state {
  flex: none;
  padding: 3px 8px;
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.07);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-gate-state[data-state=active] {
  color: rgb(47, 211, 120);
  background: rgba(47, 211, 120, 0.14);
}
.pf-gate-state[data-state=changed] {
  color: #ffb347;
  background: rgba(255, 179, 71, 0.14);
}

.pf-gate-facs {
  display: grid;
  gap: 6px;
}
.pf-gate-facs button {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  text-align: start;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  transition: color 0.25s, background-color 0.25s;
}
.pf-gate-facs button i {
  color: rgba(255, 255, 255, 0.45);
}
.pf-gate-facs button::before {
  content: "";
  order: 2;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  background: rgba(255, 255, 255, 0.08);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  transition: background-color 0.25s;
}
.pf-gate-facs button:hover {
  --al-border-bg: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.pf-gate-facs button[aria-pressed=true] {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.7);
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.12);
}
.pf-gate-facs button[aria-pressed=true] i {
  color: var(--pf-accent);
}
.pf-gate-facs button[aria-pressed=true]::before {
  background: var(--pf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231a0e02' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pf-gate-facs button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-gate-rules {
  display: grid;
  gap: 6px;
}

.pf-gate-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  font-size: 12.5px;
  text-align: start;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-gate-switch i {
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  transition: background-color 0.25s;
}
.pf-gate-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-gate-switch[aria-checked=true] i {
  background: var(--pf-accent);
}
.pf-gate-switch[aria-checked=true] i::after {
  transform: translateX(14px);
}
.pf-gate-switch:hover {
  color: #fff;
}
.pf-gate-switch:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #1a0e02;
  background: var(--pf-accent);
  border: 0;
  transition: background-color 0.25s, opacity 0.25s, transform 0.2s;
}
.pf-gate-btn:hover {
  background: #ffb06e;
}
.pf-gate-btn:active {
  transform: scale(0.98);
}
.pf-gate-btn:disabled {
  cursor: default;
  opacity: 0.4;
}
.pf-gate-btn.is-blue {
  color: #fff;
  background: var(--pf-accent-2);
}
.pf-gate-btn.is-blue:hover {
  background: #4cb4ff;
}
.pf-gate-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-gate-time {
  display: grid;
  gap: 8px;
}
.pf-gate-time label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.pf-gate-time output {
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  color: #fff;
}
.pf-gate-time input[type=range] {
  width: 100%;
  accent-color: var(--pf-accent);
}

.pf-gate-stage {
  --c: 125, 211, 252;
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px 12px 12px;
  background: radial-gradient(70% 60% at 50% 90%, rgba(var(--c), 0.14), transparent 70%), rgba(0, 0, 0, 0.25);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition: background 0.4s;
}
.pf-gate-stage.is-ok {
  --c: 47, 211, 120;
}
.pf-gate-stage.is-no {
  --c: 255, 92, 92;
}

.pf-gate-machine {
  position: relative;
  height: 118px;
  margin: 0 auto;
  width: min(100%, 250px);
  perspective: 500px;
}
.pf-gate-machine::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.pf-gate-post {
  position: absolute;
  bottom: 0;
  left: 18%;
  width: 22px;
  height: 92px;
  background: linear-gradient(90deg, #2a3348, #4a5674 45%, #262e42);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-gate-post::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 5px;
  right: 5px;
  height: 6px;
  background: rgb(var(--c));
  box-shadow: 0 0 10px rgb(var(--c));
  transition: background-color 0.3s, box-shadow 0.3s;
}
.pf-gate-post.is-r {
  left: auto;
  right: 18%;
}

.pf-gate-arm {
  position: absolute;
  bottom: 52px;
  left: calc(18% + 22px);
  right: calc(18% + 22px);
  height: 6px;
  background: linear-gradient(90deg, rgba(var(--c), 0.9), rgba(var(--c), 0.5));
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
}
.pf-gate-arm.is-b {
  bottom: 40px;
  opacity: 0.55;
}
.is-ok.is-go .pf-gate-arm {
  transform: rotateY(80deg);
}
.is-no.is-go .pf-gate-arm {
  animation: pf-gate-shake 0.4s 0.35s;
}

@keyframes pf-gate-shake {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
.pf-gate-walker {
  position: absolute;
  bottom: 4px;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10.5px;
  font-weight: 700;
  color: #1a0e02;
  background: rgb(var(--pf-role-rgb, 242, 156, 79));
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  opacity: 0;
}
.is-ok.is-go .pf-gate-walker {
  animation: pf-gate-pass 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-no.is-go .pf-gate-walker {
  animation: pf-gate-stop 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pf-gate-pass {
  0% {
    left: -4%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 26px);
    opacity: 0;
  }
}
@keyframes pf-gate-stop {
  0% {
    left: -4%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40%, 60% {
    left: 24%;
    opacity: 1;
  }
  100% {
    left: -4%;
    opacity: 0;
  }
}
.pf-gate-screen {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: 9px 12px;
  text-align: center;
  background: rgba(var(--c), 0.1);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  transition: background-color 0.3s;
}
.pf-gate-screen b {
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c));
}
.pf-gate-screen span {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

.pf-gate-logbox {
  min-height: 0;
}

.pf-gate-logwrap {
  position: relative;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1199.98px) {
  .pf-gate-logwrap {
    flex: none;
    height: 320px;
  }
}

.pf-gate-log {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 2px 6px 28px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pf-accent-rgb), 0.4) transparent;
  -webkit-mask: linear-gradient(#000 calc(100% - 36px), transparent);
  mask: linear-gradient(#000 calc(100% - 36px), transparent);
}
.pf-gate-log:empty::before {
  content: "Nothing yet. Grant access, then tap the badge.";
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}

.pf-gate-entry {
  --e: 125, 211, 252;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  animation: pf-gate-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-gate-entry.is-ok {
  --e: 47, 211, 120;
}
.pf-gate-entry.is-no {
  --e: 255, 92, 92;
}
.pf-gate-entry.is-info {
  --e: var(--pf-accent-rgb);
}
.pf-gate-entry:nth-child(n+5) {
  opacity: 0.6;
}
.pf-gate-entry > div {
  --al-border-bg: rgba(var(--e), 0.35);
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  background: rgba(var(--e), 0.06);
}
.pf-gate-entry small {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.5);
}
.pf-gate-entry strong {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.pf-gate-entry span {
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.pf-gate-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 6px;
  font-size: 13px;
  color: rgb(var(--e));
  background: rgba(var(--e), 0.14);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

@keyframes pf-gate-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.pf-gate-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: clamp(14px, 2vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}
.pf-gate-notes li {
  --al-border-bg: rgba(255, 255, 255, 0.07);
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.025);
}
.pf-gate-notes i {
  font-size: 16px;
  color: var(--pf-accent);
}
.pf-gate-notes b {
  display: block;
  font-size: 13px;
  color: #fff;
}
@media (max-width: 1199.98px) {
  .pf-gate-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .pf-gate-notes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-gate-walker,
  .pf-gate-arm,
  .pf-gate-entry {
    animation: none !important;
  }
}
.pf-sites {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-sites li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-sites i {
  color: var(--pf-accent);
}
.pf-sites b {
  margin-inline-start: auto;
  font-family: var(--bs-font-monospace);
  font-size: 15px;
  color: #fff;
}

.pf-alert-mini {
  display: grid;
  gap: 9px;
}
.pf-alert-mini .pf-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-alert-mini .pf-alert-row > i {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 30px;
  padding-top: 6px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  color: #1c0410;
  background: #ff4d6d;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pf-alert-mini .pf-alert-row b {
  display: block;
  font-size: 14px;
  color: #fff;
}
.pf-alert-mini .pf-alert-row small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.pf-alert-mini .pf-alert-eta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgb(47, 211, 120);
  background: rgba(47, 211, 120, 0.1);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.pf-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pf-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 0 0 rgba(255, 77, 109, 0.6);
  animation: pf-live 1.6s infinite;
}

@keyframes pf-live {
  70% {
    box-shadow: 0 0 0 8px rgba(255, 77, 109, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 109, 0);
  }
}
.pf-viz-layers {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  gap: 4px 3px;
}
.pf-viz-layers > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(160deg, rgba(var(--pf-accent-rgb), 0.85), rgba(40, 70, 200, 0.85));
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.05s), opacity 0.45s calc(var(--k, 0) * 0.05s);
}
.pf-viz-layers > span:nth-child(n+6) {
  transform: translateX(16px);
}
.pf-viz-layers > span.is-alert {
  background: linear-gradient(160deg, #ff4d6d, #b3123a);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-layers > span {
  opacity: 0;
}

.pf-viz-clock {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
}
.pf-viz-clock i {
  flex: 1;
  max-width: 8px;
  height: calc(var(--v) * 1%);
  background: linear-gradient(rgba(var(--pf-accent-rgb), 0.9), rgba(var(--pf-accent-rgb), 0.25));
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k, 0) * 0.03s);
}
.pf-viz-clock i.is-hot {
  background: linear-gradient(#ff4d6d, rgba(255, 77, 109, 0.3));
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-clock i {
  transform: scaleY(0);
}

.pf-cmd {
  --pf-cmd-rgb: 255, 77, 109;
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-cmd::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-cmd::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-cmd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0;
  list-style: none;
}
.pf-cmd-kpis li {
  --al-border-bg: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
}
.pf-cmd-kpis i {
  font-size: 18px;
  color: var(--pf-accent);
}
.pf-cmd-kpis b {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pf-cmd-kpis span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
}
.pf-cmd-kpis .is-alert i {
  color: #ff4d6d;
}
.pf-cmd-kpis .is-ok i {
  color: rgb(47, 211, 120);
}
@media (max-width: 767.98px) {
  .pf-cmd-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-cmd-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 1199.98px) {
  .pf-cmd-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  }
  .pf-cmd-grid > .pf-cmd-logbox {
    grid-column: 1/-1;
  }
}
@media (max-width: 767.98px) {
  .pf-cmd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-cmd-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(5, 8, 36, 0.6);
}

.pf-cmd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pf-cmd-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.pf-cmd-head small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-cmd-queue {
  display: grid;
  align-content: start;
  gap: 7px;
}

.pf-cmd-alert {
  --a: 255, 77, 109;
  --al-border-bg: rgba(var(--a), 0.35);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  text-align: start;
  color: #fff;
  background: rgba(var(--a), 0.07);
  border: 0;
  animation: pf-cmd-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background-color 0.25s;
}
.pf-cmd-alert > i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  color: rgb(var(--a));
  background: rgba(var(--a), 0.15);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.pf-cmd-alert b {
  display: block;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-cmd-alert b small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
}
.pf-cmd-alert > span > small {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
.pf-cmd-alert em {
  padding: 2px 6px;
  font-family: var(--bs-font-monospace);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--a));
  background: rgba(var(--a), 0.12);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-cmd-alert:hover {
  background: rgba(var(--a), 0.13);
}
.pf-cmd-alert.is-on {
  --al-border-bg: rgb(var(--a));
  background: rgba(var(--a), 0.18);
}
.pf-cmd-alert.is-done {
  --a: 47, 211, 120;
  opacity: 0.7;
}
.pf-cmd-alert:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

@keyframes pf-cmd-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.pf-cmd-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pf-cmd-title > i {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: rgb(var(--pf-cmd-rgb));
  background: rgba(var(--pf-cmd-rgb), 0.15);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transition: color 0.3s, background-color 0.3s;
}
.pf-cmd-title b {
  display: block;
  font-size: 1.05rem;
  color: #fff;
}
.pf-cmd-title small {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}

.pf-cmd-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-cmd-steps button {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0 0 4px;
  font-size: 11px;
  line-height: 1.25;
  text-align: start;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.45);
  background: none;
  border: 0;
  transition: color 0.25s;
}
.pf-cmd-steps button::before {
  content: "";
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.pf-cmd-steps button:hover {
  color: #fff;
}
.pf-cmd-steps button:hover::before {
  background: rgba(255, 255, 255, 0.35);
}
.pf-cmd-steps button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 3px;
}
.pf-cmd-steps .is-done button {
  color: rgba(255, 255, 255, 0.8);
}
.pf-cmd-steps .is-done button::before {
  background: var(--pf-accent);
}
.pf-cmd-steps .is-now button {
  color: #fff;
}
.pf-cmd-steps .is-now button::before {
  background: rgb(var(--pf-cmd-rgb));
  box-shadow: 0 0 8px rgba(var(--pf-cmd-rgb), 0.8);
}
@media (max-width: 575.98px) {
  .pf-cmd-steps li:not(.is-now) button {
    font-size: 0;
  }
  .pf-cmd-steps button {
    min-height: 20px;
  }
}

.pf-cmd-map {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.25);
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #050a2e;
}
.pf-cmd-map > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 50%;
  opacity: 0.9;
}
.pf-cmd-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(40% 50% at var(--pf-cmd-x, 40%) var(--pf-cmd-y, 50%), rgba(var(--pf-cmd-rgb), 0.22), transparent 70%);
  pointer-events: none;
  transition: background 0.6s;
}
.pf-cmd-map > svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pf-cmd-map > svg line {
  stroke: rgba(47, 211, 120, 0.45);
  stroke-width: 1.2px;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.pf-cmd-map > svg .is-chosen {
  stroke: rgb(47, 211, 120);
  stroke-width: 2px;
  animation: pf-cmd-dash 1s linear infinite;
}
.pf-cmd-map.is-off-alerts .pf-cmd-pin.is-other, .pf-cmd-map.is-off-patrols .pf-cmd-pin.is-patrol, .pf-cmd-map.is-off-patrols > svg, .pf-cmd-map.is-off-fleet .pf-cmd-pin.is-fleet, .pf-cmd-map.is-off-cams .pf-cmd-pin.is-cam, .pf-cmd-map.is-off-cams .pf-cmd-cams {
  display: none;
}

@keyframes pf-cmd-dash {
  to {
    stroke-dashoffset: -16;
  }
}
.pf-cmd-layers {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: grid;
  gap: 5px;
}
.pf-cmd-layers button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(160deg, rgba(var(--pf-accent-rgb), 0.9), rgba(40, 70, 200, 0.9));
  border: 0;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transition: opacity 0.25s, filter 0.25s;
}
.pf-cmd-layers button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.pf-cmd-layers button[aria-pressed=false] {
  opacity: 0.45;
  filter: grayscale(1);
}
.pf-cmd-layers button:hover {
  filter: brightness(1.2);
}
.pf-cmd-layers button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-cmd-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  transition: left 1.2s cubic-bezier(0.16, 1, 0.3, 1), top 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-cmd-pin.is-alert {
  z-index: 3;
  width: 34px;
  height: 30px;
  padding-top: 8px;
  font-size: 15px;
  color: #1c0410;
  background: rgb(var(--pf-cmd-rgb));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 10px rgba(var(--pf-cmd-rgb), 0.9));
}
.pf-cmd-pin.is-other {
  --a: 255, 77, 109;
  width: 20px;
  height: 18px;
  cursor: pointer;
  background: rgb(var(--a));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0.85;
  transition: transform 0.2s, opacity 0.2s;
}
.pf-cmd-pin.is-other::after {
  content: "";
  position: absolute;
  inset: 3px 4px 2px;
  background: rgba(5, 8, 36, 0.8);
  clip-path: polygon(50% 18%, 100% 100%, 0 100%);
}
.pf-cmd-pin.is-other:hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.25);
}
.pf-cmd-pin.is-fleet {
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd60a;
  box-shadow: 0 0 6px rgba(255, 214, 10, 0.7);
}
.pf-cmd-pin.is-fleet.is-bus {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--pf-accent);
  box-shadow: 0 0 6px rgba(var(--pf-accent-rgb), 0.7);
}
.pf-cmd-pin.is-cam {
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(5, 8, 36, 0.85);
  box-shadow: inset 0 0 0 1px rgba(var(--pf-accent-rgb), 0.5);
  border-radius: 50%;
}
.pf-cmd-pin.is-cam.is-live {
  color: #031327;
  background: var(--pf-accent);
  box-shadow: 0 0 0 4px rgba(var(--pf-accent-rgb), 0.25);
}
.pf-cmd-pin.is-patrol {
  width: 22px;
  height: 22px;
}
.pf-cmd-pin.is-patrol::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(47, 211, 120);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  box-shadow: inset 0 0 0 5px rgba(5, 10, 46, 0.6);
}
.pf-cmd-pin.is-patrol b {
  position: absolute;
  top: 100%;
  margin-top: 3px;
  padding: 1px 4px;
  font-family: var(--bs-font-monospace);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  color: rgb(47, 211, 120);
  background: rgba(5, 10, 46, 0.85);
}
.pf-cmd-pin.is-patrol.is-chosen {
  width: 26px;
  height: 26px;
}
.pf-cmd-pin.is-asset {
  width: 24px;
  height: 24px;
  font-size: 11px;
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.85);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  animation: pf-cmd-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pf-cmd-map::after {
  content: "";
  position: absolute;
  left: var(--pf-cmd-x, 40%);
  top: var(--pf-cmd-y, 50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 2px solid rgba(var(--pf-cmd-rgb), 0.7);
  border-radius: 50%;
  animation: pf-cmd-ping 1.5s infinite;
  pointer-events: none;
}

@keyframes pf-cmd-ping {
  from {
    opacity: 1;
    transform: scale(0.4);
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}
@keyframes pf-cmd-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
}
.pf-cmd-cams {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: grid;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: 25%;
  padding: 6px;
  background: rgba(5, 8, 36, 0.82);
  box-shadow: inset 0 0 0 1px rgba(var(--pf-accent-rgb), 0.3);
  backdrop-filter: blur(6px);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  animation: pf-cmd-slide 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-cmd-cams[hidden] {
  display: none;
}
.pf-cmd-cams > b {
  font-family: var(--bs-font-monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-accent);
}
.pf-cmd-cams span {
  position: relative;
  min-height: 0;
  background-color: #0a1240;
  background-size: cover;
  background-position: center;
}
.pf-cmd-cams span i {
  position: absolute;
  left: 4px;
  bottom: 3px;
  padding: 1px 4px;
  font-family: var(--bs-font-monospace);
  font-size: 8px;
  font-style: normal;
  color: #fff;
  background: rgba(5, 8, 36, 0.75);
}
.pf-cmd-cams span::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff4d6d;
  animation: pf-live 1.6s infinite;
}

@keyframes pf-cmd-slide {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}
@keyframes pf-cmd-pop2 {
  from {
    opacity: 0;
  }
}
.pf-cmd-act {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.pf-cmd-btn {
  --al-border-bg: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  animation: pf-cmd-pop2 0.35s both;
  transition: background-color 0.25s, color 0.25s;
}
.pf-cmd-btn em {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  opacity: 0.8;
}
.pf-cmd-btn.is-main {
  color: #031327;
  background: var(--pf-accent);
}
.pf-cmd-btn.is-main:hover {
  background: #7be6ff;
}
.pf-cmd-btn.is-step, .pf-cmd-btn.is-toggle {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.5);
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.1);
}
.pf-cmd-btn.is-step:hover, .pf-cmd-btn.is-toggle:hover {
  background: rgba(var(--pf-accent-rgb), 0.2);
}
.pf-cmd-btn.is-toggle[aria-pressed=true] {
  --al-border-bg: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.28);
}
.pf-cmd-btn.is-ok {
  color: #031a0d;
  background: rgb(47, 211, 120);
}
.pf-cmd-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-cmd-logwrap {
  position: relative;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1199.98px) {
  .pf-cmd-logwrap {
    flex: none;
    height: 300px;
  }
}

.pf-cmd-log {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 2px 6px 28px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pf-accent-rgb), 0.4) transparent;
  -webkit-mask: linear-gradient(#000 calc(100% - 36px), transparent);
  mask: linear-gradient(#000 calc(100% - 36px), transparent);
}

.pf-cmd-entry {
  --e: var(--pf-accent-rgb);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  animation: pf-cmd-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-cmd-entry.is-new {
  --e: 255, 77, 109;
}
.pf-cmd-entry.is-ok {
  --e: 47, 211, 120;
}
.pf-cmd-entry:nth-child(n+5) {
  opacity: 0.6;
}
.pf-cmd-entry > div {
  --al-border-bg: rgba(var(--e), 0.35);
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  background: rgba(var(--e), 0.06);
}
.pf-cmd-entry small {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  color: rgb(var(--e));
}
.pf-cmd-entry strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.pf-cmd-entry span {
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.pf-cmd-time {
  padding-top: 8px;
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .pf-cmd-alert,
  .pf-cmd-entry,
  .pf-cmd-btn,
  .pf-cmd-pin,
  .pf-live::before,
  .pf-cmd-cams span::after,
  .pf-cmd-map::after,
  .pf-cmd-cams,
  .pf-cmd-map svg .is-chosen {
    animation: none !important;
  }
}
.pf-cmd-kpis b span {
  font-size: inherit;
  color: inherit;
}

.pf-cmd-act {
  align-content: flex-start;
  min-height: 40px;
}
@media (max-width: 767.98px) {
  .pf-cmd-act {
    min-height: 87px;
  }
}

.pf-cmd-pin.is-fleet,
.pf-cmd-pin.is-cam,
.pf-cmd-pin.is-patrol,
.pf-cmd-pin.is-asset {
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .pf-cmd-act {
    gap: 6px;
  }
  .pf-cmd-btn {
    gap: 6px;
    padding: 8px 10px;
    font-size: 12px;
  }
}
@media (max-width: 575.98px) {
  .pf-cmd-map {
    aspect-ratio: 4/3;
  }
  .pf-cmd-cams {
    width: 34%;
  }
  .pf-cmd-cams > b {
    font-size: 7.5px;
  }
  .pf-cmd-layers {
    top: 6px;
    left: 6px;
    gap: 4px;
  }
  .pf-cmd-layers button {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
}
.pf-sbtn {
  --al-border-bg: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 0;
  animation: pf-s-pop 0.35s both;
  transition: background-color 0.25s, color 0.25s;
}
.pf-sbtn.is-main {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-sbtn.is-main:hover {
  background: color-mix(in srgb, var(--pf-accent) 80%, #fff);
}
.pf-sbtn.is-step {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.5);
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.1);
}
.pf-sbtn.is-step:hover {
  background: rgba(var(--pf-accent-rgb), 0.2);
}
.pf-sbtn.is-back {
  --al-border-bg: unquote("rgba(255, 181, 71, 0.55)");
  color: rgb(255, 181, 71);
  background: rgba(255, 181, 71, 0.08);
}
.pf-sbtn.is-back:hover {
  background: rgba(255, 181, 71, 0.16);
}
.pf-sbtn.is-bad {
  --al-border-bg: unquote("rgba(255, 84, 104, 0.55)");
  color: rgb(255, 84, 104);
  background: rgba(255, 84, 104, 0.08);
}
.pf-sbtn.is-bad:hover {
  background: rgba(255, 84, 104, 0.16);
}
.pf-sbtn.is-ok {
  color: #04170f;
  background: rgb(20, 199, 138);
}
.pf-sbtn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes pf-s-pop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes pf-s-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.pf-chip {
  --c: var(--pf-accent-rgb);
  display: inline-block;
  flex: none;
  padding: 2px 7px;
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgb(var(--c));
  background: rgba(var(--c), 0.13);
  transition: color 0.3s, background-color 0.3s;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-chip.is-ok {
  --c: 20, 199, 138;
}
.pf-chip.is-back {
  --c: 255, 181, 71;
}
.pf-chip.is-bad {
  --c: 255, 84, 104;
}
.pf-chip.is-dim {
  --c: 255, 255, 255;
  opacity: 0.55;
}

.pf-wipe {
  margin-top: 48px;
}

.pf-wipe-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--pf-screen-ratio, 1920/960);
  background: var(--pf-tint);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.pf-wipe-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  pointer-events: none;
}
.pf-wipe-screen .pf-wipe-b {
  clip-path: inset(0 0 0 var(--pf-pos, 50%));
}

.pf-wipe-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pf-pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--pf-accent);
  box-shadow: 0 0 14px rgba(var(--pf-accent-rgb), 0.8);
  pointer-events: none;
}
.pf-wipe-line i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 16px;
  font-style: normal;
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  transform: translate(-50%, -50%);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.pf-wipe-tag {
  position: absolute;
  top: 12px;
  padding: 5px 10px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(4, 8, 30, 0.78);
  pointer-events: none;
  backdrop-filter: blur(6px);
  transition: opacity 0.3s;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-wipe-tag.is-a {
  left: 12px;
}
.pf-wipe-tag.is-b {
  right: 12px;
}
@media (max-width: 575.98px) {
  .pf-wipe-tag {
    top: 6px;
    padding: 3px 7px;
    font-size: 9px;
  }
  .pf-wipe-tag.is-a {
    left: 6px;
  }
  .pf-wipe-tag.is-b {
    right: 6px;
  }
}

.pf-wipe-range {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pf-wipe-screen:has(.pf-wipe-range:focus-visible) .pf-wipe-line i {
  outline: 2px solid #fff;
}

.pf-wipe-picks {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 767.98px) {
  .pf-wipe-picks {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-wipe-pick {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  transition: background-color 0.25s;
}
.pf-wipe-pick img {
  flex: none;
  width: 92px;
  height: 50px;
  object-fit: cover;
  object-position: top;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-wipe-pick b {
  display: block;
  font-size: 14px;
}
.pf-wipe-pick small {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}
.pf-wipe-pick:hover {
  background: rgba(var(--pf-accent-rgb), 0.08);
}
.pf-wipe-pick[aria-pressed=true] {
  --al-border-bg: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.12);
}
.pf-wipe-pick:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-vet-mini {
  display: grid;
  gap: 8px;
}
.pf-vet-mini .pf-glass-head {
  gap: 10px;
  white-space: nowrap;
}
.pf-vet-mini > b {
  font-size: 15px;
  color: #fff;
}
.pf-vet-mini ol {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-vet-mini ol li {
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
}
.pf-vet-mini ol li.is-done {
  background: var(--pf-accent);
}
.pf-vet-mini ol li.is-now {
  background: var(--pf-accent-2);
  box-shadow: 0 0 8px var(--pf-accent-2);
}
.pf-vet-mini small {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
}

.pf-viz-ladder {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}
.pf-viz-ladder span {
  width: 14px;
  height: calc(18% + var(--k) * 16%);
  background: linear-gradient(rgba(var(--pf-accent-rgb), 0.95), rgba(var(--pf-accent-rgb), 0.3));
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.07s);
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
}
.pf-viz-ladder span.is-check {
  background: linear-gradient(rgb(255, 181, 71), rgba(255, 181, 71, 0.3));
}
.pf-viz-ladder span.is-top {
  background: linear-gradient(var(--pf-accent-2), rgba(215, 224, 33, 0.3));
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-ladder span {
  transform: scaleY(0);
}

.pf-viz-hire {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 190px;
}
.pf-viz-hire span {
  padding: 3px 7px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  transition: opacity 0.45s calc(var(--k) * 0.08s), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.08s);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-viz-hire span.is-on {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-hire span {
  opacity: 0;
  transform: translateY(6px);
}

.pf-vet {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-vet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-vet::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-vet-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0;
  list-style: none;
}
.pf-vet-kpis li {
  --al-border-bg: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 0.4s;
}
.pf-vet-kpis i {
  font-size: 18px;
  color: var(--pf-accent);
}
.pf-vet-kpis b {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
}
.pf-vet-kpis b span {
  display: inline;
  font-size: inherit;
  color: inherit;
}
.pf-vet-kpis span {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
.pf-vet-kpis .is-ok i {
  color: rgb(20, 199, 138);
}
.pf-vet-kpis .is-back i {
  color: rgb(255, 181, 71);
}
.pf-vet-kpis .is-bad i {
  color: rgb(255, 84, 104);
}
@media (max-width: 767.98px) {
  .pf-vet-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pf-vet-kpis li {
    padding: 9px 11px;
    gap: 10px;
  }
  .pf-vet-kpis b {
    font-size: 1.15rem;
  }
}

.pf-vet-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 1199.98px) {
  .pf-vet-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .pf-vet-grid > :last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 767.98px) {
  .pf-vet-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-vet-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(4, 8, 30, 0.55);
}

.pf-vet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pf-vet-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-vet-head small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-vet-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pf-vet-person b {
  display: block;
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}
.pf-vet-person small {
  display: block;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
.pf-vet-person > div {
  min-width: 0;
}

.pf-vet-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--pf-accent), #6a3fd8);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.pf-vet-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.pf-vet-types span {
  padding: 6px 2px;
  overflow: hidden;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  transition: color 0.3s, background-color 0.3s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-vet-types span.is-on {
  font-weight: 600;
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}

.pf-vet-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.pf-vet-facts div {
  min-width: 0;
}
.pf-vet-facts dt {
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
.pf-vet-facts dd {
  margin: 0;
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}

.pf-vet-sla {
  --c: 215, 224, 33;
  --al-border-bg: rgba(var(--c), 0.35);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(var(--c), 0.07);
  transition: background-color 0.4s;
}
.pf-vet-sla > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pf-vet-sla b {
  min-width: 2ch;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: rgb(var(--c));
}
.pf-vet-sla small {
  font-size: 11.5px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
}
.pf-vet-sla > i {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
}
.pf-vet-sla > i em {
  display: block;
  width: var(--left, 50%);
  height: 100%;
  background: rgb(var(--c));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-vet-sla.is-late {
  --c: 255, 84, 104;
}

.pf-vet-inbox {
  display: grid;
  gap: 6px;
}

.pf-vet-req {
  --al-border-bg: rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 10px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  animation: pf-s-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background-color 0.25s;
}
.pf-vet-req b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-vet-req small {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.5);
}
.pf-vet-req:hover {
  background: rgba(var(--pf-accent-rgb), 0.08);
}
.pf-vet-req.is-on {
  --al-border-bg: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.14);
}
.pf-vet-req:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-vet-chain {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-vet-chain li {
  position: relative;
}
.pf-vet-chain li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 27px;
  width: 2px;
  height: 14px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 0.3s;
}
.pf-vet-chain li.is-done:not(:last-child)::after {
  background: rgb(20, 199, 138);
}
.pf-vet-chain button {
  --s: 255, 255, 255;
  --al-border-bg: rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 10px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.025);
  border: 0;
  transition: background-color 0.3s;
}
.pf-vet-chain button > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  font-size: 15px;
  color: rgba(var(--s), 0.75);
  background: rgba(var(--s), 0.1);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transition: color 0.3s, background-color 0.3s;
}
.pf-vet-chain button b {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-vet-chain button small {
  display: block;
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.5);
}
.pf-vet-chain button:hover {
  background: rgba(var(--pf-accent-rgb), 0.07);
}
.pf-vet-chain button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}
.pf-vet-chain .is-done button {
  --s: 20, 199, 138;
}
.pf-vet-chain .is-back button {
  --s: 255, 181, 71;
}
.pf-vet-chain .is-bad button {
  --s: 255, 84, 104;
}
.pf-vet-chain .is-now button {
  --s: var(--pf-accent-rgb);
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.6);
  background: rgba(var(--pf-accent-rgb), 0.1);
}
.pf-vet-chain .is-now button > i {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  box-shadow: 0 0 0 0 rgba(var(--pf-accent-rgb), 0.6);
}
@media (max-width: 575.98px) {
  .pf-vet-chain button {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 8px;
  }
  .pf-vet-chain button > i {
    width: 30px;
    height: 28px;
    font-size: 13px;
  }
  .pf-vet-chain li:not(:last-child)::after {
    top: 38px;
    left: 23px;
    height: 16px;
  }
}

.pf-vet-act {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 7px;
  min-height: 40px;
  margin-top: auto;
}
@media (max-width: 575.98px) {
  .pf-vet-act {
    min-height: 87px;
  }
  .pf-vet-act .pf-sbtn {
    flex: 1 1 40%;
    justify-content: center;
    padding: 9px 8px;
    font-size: 12px;
  }
}

.pf-vet-checks {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-vet-checks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-vet-checks li > i {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.pf-vet-checks li > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.85);
}
.pf-vet-checks li.is-run > i {
  color: var(--pf-accent);
  animation: pf-s-spin 1s linear infinite;
}

@keyframes pf-s-spin {
  to {
    transform: rotate(360deg);
  }
}
.pf-vet-log {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  height: 232px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  -webkit-mask: linear-gradient(#000 calc(100% - 40px), transparent);
  mask: linear-gradient(#000 calc(100% - 40px), transparent);
}
@media (max-width: 1199.98px) {
  .pf-vet-log {
    height: 186px;
  }
}

.pf-vet-entry {
  --e: var(--pf-accent-rgb);
  --al-border-bg: rgba(var(--e), 0.3);
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  background: rgba(var(--e), 0.06);
  animation: pf-s-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-vet-entry.is-ok {
  --e: 20, 199, 138;
}
.pf-vet-entry.is-back {
  --e: 255, 181, 71;
}
.pf-vet-entry.is-bad {
  --e: 255, 84, 104;
}
.pf-vet-entry small {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  color: rgb(var(--e));
}
.pf-vet-entry strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}
.pf-vet-entry span {
  overflow: hidden;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .pf-sbtn,
  .pf-vet-req,
  .pf-vet-entry,
  .pf-vet-checks .is-run > i {
    animation: none;
  }
}
.pf-pm-mini {
  display: grid;
  gap: 6px;
}
.pf-pm-mini .pf-glass-head {
  gap: 10px;
  white-space: nowrap;
}
.pf-pm-mini > b {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #fff;
}
.pf-pm-mini small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.pf-pm-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(20, 199, 138);
}
.pf-pm-run::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pf-s-blink 1.2s infinite;
}
.pf-pm-run.is-paused {
  color: rgb(255, 181, 71);
}
.pf-pm-run.is-paused::before {
  animation: none;
}

@keyframes pf-s-blink {
  50% {
    opacity: 0.25;
  }
}
.pf-viz-views {
  display: grid;
  grid-template-columns: repeat(4, 28px);
  gap: 4px;
}
.pf-viz-views span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(var(--pf-accent-rgb), 0.16);
  transition: opacity 0.4s calc(var(--k) * 0.06s), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.06s);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-viz-views span.is-on {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-views span {
  opacity: 0;
  transform: scale(0.6);
}

.pf-viz-modes2 {
  display: flex;
  gap: 6px;
}
.pf-viz-modes2 span {
  width: 46px;
  height: 34px;
  background: linear-gradient(90deg, #f4f6fb 0 26%, #e6e9f5 26% 100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-viz-modes2 span + span {
  background: linear-gradient(90deg, #0f1117 0 26%, #1b1e2b 26% 100%);
  transition-delay: 0.12s;
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-modes2 span {
  transform: rotateY(90deg);
}

.pf-pm {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-pm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-pm::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-pm-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0;
  list-style: none;
}
.pf-pm-kpis li {
  --al-border-bg: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 0.4s;
}
.pf-pm-kpis i {
  font-size: 18px;
  color: var(--pf-accent);
}
.pf-pm-kpis b {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
}
.pf-pm-kpis b span {
  display: inline;
  font-size: inherit;
  color: inherit;
}
.pf-pm-kpis span {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
.pf-pm-kpis .is-ok i {
  color: rgb(20, 199, 138);
}
.pf-pm-kpis .is-back i {
  color: rgb(255, 181, 71);
}
.pf-pm-kpis .is-bad i {
  color: rgb(255, 84, 104);
}
@media (max-width: 767.98px) {
  .pf-pm-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pf-pm-kpis li {
    padding: 9px 11px;
    gap: 10px;
  }
  .pf-pm-kpis b {
    font-size: 1.15rem;
  }
}

.pf-pm-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr) minmax(0, 0.9fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 1199.98px) {
  .pf-pm-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pf-pm-grid > :nth-child(2) {
    grid-column: 1/-1;
    order: -1;
  }
}
@media (max-width: 767.98px) {
  .pf-pm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-pm-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(4, 8, 30, 0.55);
}

.pf-pm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pf-pm-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-pm-head small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pf-pm-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-pm-progress {
  height: 5px;
  margin-top: -4px;
  background: rgba(255, 255, 255, 0.08);
}
.pf-pm-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent-2));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pf-pm-tickets {
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, 98px);
  gap: 8px;
}

.pf-pm-ticket {
  --al-border-bg: rgba(255, 255, 255, 0.09);
  display: grid;
  align-content: space-between;
  gap: 4px;
  min-width: 0;
  padding: 9px 11px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  animation: pf-s-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background-color 0.25s;
}
.pf-pm-ticket b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pf-pm-ticket:hover {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.5);
  background: rgba(var(--pf-accent-rgb), 0.08);
}
.pf-pm-ticket:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-pm-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.pf-pm-ticket-top small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.5);
}

.pf-pm-ticket-sla {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
.pf-pm-ticket-sla > span {
  margin-inline-start: auto;
  color: var(--pf-accent);
  opacity: 0;
  transition: opacity 0.25s;
}
.pf-pm-ticket-sla.is-late {
  color: rgb(255, 84, 104);
}

.pf-pm-ticket:hover .pf-pm-ticket-sla > span,
.pf-pm-ticket:focus-visible .pf-pm-ticket-sla > span {
  opacity: 1;
}

.pf-pm-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.pf-pm-empty i {
  font-size: 22px;
}
.pf-pm-empty[hidden] {
  display: none;
}

.pf-pm-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 575.98px) {
  .pf-pm-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-pm-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.025);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-pm-col h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.pf-pm-col h4 b {
  font-size: 12px;
  color: #fff;
}
.pf-pm-col:nth-child(1) h4 b {
  color: rgba(255, 255, 255, 0.85);
}
.pf-pm-col:nth-child(2) h4 b {
  color: var(--pf-accent);
}
.pf-pm-col:nth-child(3) h4 b {
  color: rgb(255, 181, 71);
}
.pf-pm-col:nth-child(4) h4 b {
  color: rgb(20, 199, 138);
}

.pf-pm-cards {
  display: grid;
  grid-template-rows: repeat(3, 92px);
  gap: 6px;
}

.pf-pm-card {
  --al-border-bg: rgba(255, 255, 255, 0.08);
  display: grid;
  align-content: space-between;
  gap: 4px;
  min-width: 0;
  padding: 8px 9px;
  text-align: start;
  color: #fff;
  background: rgba(10, 14, 40, 0.75);
  border: 0;
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background-color 0.25s;
}
.pf-pm-card b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pf-pm-card:not(:disabled):hover {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.55);
  background: rgba(var(--pf-accent-rgb), 0.1);
}
.pf-pm-card.is-live {
  --al-border-bg: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.12);
}
.pf-pm-card.is-done {
  opacity: 0.7;
}
.pf-pm-card.is-done b {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.pf-pm-card:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-pm-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
.pf-pm-card-top small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.45);
}

.pf-pm-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pf-pm-who {
  display: flex;
  flex: none;
}
.pf-pm-who i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-inline-end: -4px;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--pf-accent), var(--pf-accent-2));
  border: 1.5px solid #0a0e28;
  border-radius: 50%;
}
.pf-pm-who i + i {
  background: linear-gradient(150deg, #2fd4c4, #2f7bff);
}

.pf-pm-rec {
  flex: none;
  margin-inline-start: 6px;
  font-family: var(--bs-font-monospace);
  font-size: 8.5px;
  text-transform: uppercase;
  color: rgb(20, 199, 138);
}

.pf-pm-bar {
  flex: 1;
  min-width: 16px;
  height: 4px;
  margin-inline-start: 6px;
  background: rgba(255, 255, 255, 0.1);
}
.pf-pm-bar i {
  display: block;
  height: 100%;
  background: var(--pf-accent);
}

.pf-pm-card.is-done .pf-pm-bar i {
  background: rgb(20, 199, 138);
}

.pf-pm-timer {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 10px;
  text-align: center;
  background: rgba(var(--pf-accent-rgb), 0.06);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-pm-timer > b {
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pf-pm-timer > small {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.6);
}

.pf-pm-timer-act {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
}
.pf-pm-timer-act .pf-sbtn {
  padding: 8px 12px;
  font-size: 12.5px;
}

.pf-pm-miles {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-pm-miles li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-pm-miles li > i {
  font-size: 14px;
  color: var(--pf-accent);
}
.pf-pm-miles li.is-done > i {
  color: rgb(20, 199, 138);
}
.pf-pm-miles li b {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-pm-miles li span > i {
  display: block;
  height: 3px;
  margin-top: 5px;
  background: rgba(255, 255, 255, 0.1);
}
.pf-pm-miles li span > i em {
  display: block;
  height: 100%;
  background: var(--pf-accent);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-pm-miles li.is-done span > i em {
  background: rgb(20, 199, 138);
}

@media (prefers-reduced-motion: reduce) {
  .pf-pm-ticket,
  .pf-pm-card,
  .pf-pm-run::before {
    animation: none;
  }
}
@media (max-width: 575.98px) {
  .pf-pm-head:has(h3 .pf-chip) > small {
    display: none;
  }
}
.pf-sla-mini {
  display: grid;
  gap: 7px;
}
.pf-sla-mini .pf-glass-head {
  gap: 10px;
  white-space: nowrap;
}
.pf-sla-mini > b {
  font-size: 15px;
  color: #fff;
}
.pf-sla-mini small {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
}

.pf-sla-mini-bar,
.pf-sla-meter {
  position: relative;
  display: block;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
}
.pf-sla-mini-bar i,
.pf-sla-meter i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(20, 199, 138), rgb(255, 181, 71) 45%, rgb(255, 84, 104));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-sla-mini-bar em,
.pf-sla-meter em {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #fff;
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pf-sla-mini-bar i {
  width: 100%;
}

.pf-viz-hexflow {
  display: flex;
  align-items: center;
  gap: 3px;
}
.pf-viz-hexflow span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.22);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transition: opacity 0.4s calc(var(--k) * 0.1s), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.1s);
}
.pf-viz-hexflow span.is-slow {
  background: rgba(255, 84, 104, 0.55);
}
.pf-viz-hexflow span:last-child {
  background: rgba(20, 199, 138, 0.45);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-hexflow span {
  opacity: 0;
  transform: translateX(-8px);
}

.pf-viz-looks {
  display: flex;
  gap: 5px;
}
.pf-viz-looks span {
  width: 34px;
  height: 34px;
  background: linear-gradient(160deg, #3b2fc9, #1a1670);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-viz-looks span:nth-child(2) {
  background: linear-gradient(160deg, #23263a, #0b0c14);
  transition-delay: 0.1s;
}
.pf-viz-looks span:nth-child(3) {
  background: linear-gradient(160deg, #eef0ff, #c5cbf3);
  transition-delay: 0.2s;
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-looks span {
  transform: rotateY(90deg);
}

.pf-sla-levels-list i.is-bad {
  color: rgb(255, 84, 104) !important;
}
.pf-sla-levels-list i.is-back {
  color: rgb(255, 181, 71) !important;
}
.pf-sla-levels-list i.is-mid {
  color: #ffd23f !important;
}

.pf-sla {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-sla::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-sla::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-sla-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0;
  list-style: none;
}
.pf-sla-kpis li {
  --al-border-bg: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 0.4s;
}
.pf-sla-kpis i {
  font-size: 18px;
  color: var(--pf-accent);
}
.pf-sla-kpis b {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
}
.pf-sla-kpis b span {
  display: inline;
  font-size: inherit;
  color: inherit;
}
.pf-sla-kpis span {
  display: block;
  overflow: hidden;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
.pf-sla-kpis .is-ok i {
  color: rgb(20, 199, 138);
}
.pf-sla-kpis .is-back i {
  color: rgb(255, 181, 71);
}
.pf-sla-kpis .is-bad i {
  color: rgb(255, 84, 104);
}
@media (max-width: 767.98px) {
  .pf-sla-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pf-sla-kpis li {
    padding: 9px 11px;
    gap: 10px;
  }
  .pf-sla-kpis b {
    font-size: 1.15rem;
  }
}

.pf-sla-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 767.98px) {
  .pf-sla-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-sla-level {
  --al-border-bg: rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  transition: background-color 0.25s;
}
.pf-sla-level > span {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.6);
}
.pf-sla-level > b {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.pf-sla-level:hover {
  background: rgba(var(--pf-accent-rgb), 0.07);
}
.pf-sla-level.is-on {
  --al-border-bg: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.12);
}
.pf-sla-level:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .pf-sla-level {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pf-sla-level > span {
    display: none;
  }
}

.pf-sla-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .pf-sla-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-sla-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(4, 8, 30, 0.55);
}

.pf-sla-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pf-sla-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-sla-head small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-sla-pipe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  margin: 6px 0 4px;
  padding: 0;
  list-style: none;
}
.pf-sla-pipe li {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
.pf-sla-pipe button {
  display: grid;
  flex: none;
  justify-items: center;
  gap: 6px;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
}
.pf-sla-pipe button small {
  font-size: 11.5px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
}
.pf-sla-pipe button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 4px;
}
.pf-sla-pipe .is-on small {
  color: #fff;
}

.pf-sla-hex {
  --h: var(--pf-accent-rgb);
  display: grid;
  place-items: center;
  width: 60px;
  height: 54px;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(var(--h), 0.16);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  transition: background-color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-on .pf-sla-hex {
  color: var(--pf-on-accent);
  background: rgb(var(--h));
  transform: scale(1.08);
}
.is-slow .pf-sla-hex {
  --h: 255, 84, 104;
}
.is-done .pf-sla-hex {
  --h: 20, 199, 138;
}
button:hover .pf-sla-hex {
  transform: scale(1.08);
}

.pf-sla-arrow {
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 6px 0;
}
.pf-sla-arrow b {
  font-family: var(--bs-font-monospace);
  font-size: 11.5px;
  font-weight: 400;
  white-space: nowrap;
  color: #fff;
}
.pf-sla-arrow i {
  position: relative;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--pf-accent-rgb), 0.8));
}
.pf-sla-arrow i::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -1px;
  border: 5px solid transparent;
  border-left-color: rgba(var(--pf-accent-rgb), 0.9);
  border-right: 0;
}
.pf-sla-arrow small {
  overflow: hidden;
  max-width: 100%;
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.45);
}
.pf-sla-arrow.is-slow b,
.pf-sla-arrow.is-slow small {
  color: rgb(255, 84, 104);
}
.pf-sla-arrow.is-slow i {
  background: linear-gradient(90deg, transparent, rgb(255, 84, 104));
  animation: pf-s-blink 1.2s infinite;
}
.pf-sla-arrow.is-slow i::after {
  border-left-color: rgb(255, 84, 104);
}
@media (max-width: 575.98px) {
  .pf-sla-arrow i {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .pf-sla-pipe {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .pf-sla-pipe li {
    align-items: center;
    gap: 12px;
  }
  .pf-sla-pipe button {
    grid-template-columns: 46px auto;
    align-items: center;
    gap: 10px;
  }
  .pf-sla-hex {
    width: 46px;
    height: 40px;
    font-size: 0.95rem;
  }
  .pf-sla-arrow {
    justify-items: end;
    padding: 0;
  }
}
.pf-sla-stage {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.3);
  display: grid;
  align-content: start;
  gap: 10px;
  height: 178px;
  margin-top: auto;
  padding: 12px 14px;
  background: rgba(var(--pf-accent-rgb), 0.05);
  transition: background-color 0.3s;
}
.pf-sla-stage.is-slow {
  --al-border-bg: rgba(255, 84, 104, 0.45);
  background: rgba(255, 84, 104, 0.05);
}
.pf-sla-stage ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-sla-stage li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  height: 40px;
}
.pf-sla-stage li > i {
  font-size: 15px;
  color: var(--pf-accent);
}
.pf-sla-stage li b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-sla-stage li small {
  display: block;
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 575.98px) {
  .pf-sla-stage {
    height: 214px;
  }
}

.pf-sla-stage-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.pf-sla-stage-top b {
  font-size: 15px;
}
.pf-sla-stage-top span {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.pf-sla-teams {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-sla-teams li {
  --t: 20, 199, 138;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-sla-teams li.is-back {
  --t: 255, 181, 71;
}
.pf-sla-teams li.is-bad {
  --t: 255, 84, 104;
}
.pf-sla-teams li > i {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}
.pf-sla-teams li b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-sla-teams li span > i {
  display: block;
  height: 4px;
  margin-top: 5px;
  background: rgba(255, 255, 255, 0.08);
}
.pf-sla-teams li span > i em {
  display: block;
  height: 100%;
  background: rgb(var(--t));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pf-sla-team-n {
  text-align: end;
}
.pf-sla-team-n b {
  font-variant-numeric: tabular-nums;
  color: rgb(var(--t));
}
.pf-sla-team-n small {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.5);
}

.pf-sla-feed {
  display: grid;
  grid-template-rows: repeat(3, 46px);
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.pf-sla-event {
  --e: var(--pf-accent-rgb);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  background: rgba(var(--e), 0.06);
  box-shadow: inset 2px 0 rgba(var(--e), 0.7);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  animation: pf-s-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-sla-event.is-new {
  --e: 255, 84, 104;
}
.pf-sla-event.is-report {
  --e: 255, 181, 71;
}
.pf-sla-event.is-ok {
  --e: 20, 199, 138;
}
.pf-sla-event > i {
  font-size: 14px;
  color: rgb(var(--e));
}
.pf-sla-event b {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-sla-event small {
  display: block;
  overflow: hidden;
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .pf-sla-event,
  .pf-sla-arrow.is-slow i {
    animation: none;
  }
}
.pf-sla-days {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.pf-sla-days .pf-sla-head small.is-late {
  color: rgb(255, 84, 104);
}

.pf-sla-split {
  position: relative;
  display: flex;
  gap: 2px;
  height: 44px;
  margin-bottom: 18px;
}
.pf-sla-split span {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  background: rgba(var(--pf-accent-rgb), 0.16);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s;
}
.pf-sla-split span:nth-child(2) {
  background: rgba(var(--pf-accent-rgb), 0.24);
}
.pf-sla-split span:nth-child(4) {
  background: rgba(var(--pf-accent-rgb), 0.1);
}
.pf-sla-split span.is-on {
  box-shadow: inset 0 -2px var(--pf-accent);
}
.pf-sla-split span.is-slow {
  background: rgba(255, 84, 104, 0.3);
}
.pf-sla-split span b {
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-sla-split span small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.65);
}
.pf-sla-split em {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #fff;
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-sla-split em small {
  position: absolute;
  top: 100%;
  right: 4px;
  margin-top: 2px;
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  font-style: normal;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.75);
}

.pf-gd-mini {
  display: grid;
  gap: 6px;
}
.pf-gd-mini .pf-glass-head {
  gap: 10px;
  white-space: nowrap;
}
.pf-gd-mini > b {
  font-size: 15px;
  color: #fff;
}
.pf-gd-mini small {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
}

.pf-viz-threat {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
}
.pf-viz-threat span {
  width: 18px;
  height: calc(40% + var(--k) * 30%);
  background: rgb(20, 199, 138);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.1s);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-viz-threat span:nth-child(2) {
  background: rgb(255, 181, 71);
}
.pf-viz-threat span:nth-child(3) {
  background: #ff3b4e;
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-threat span {
  transform: scaleY(0);
}

.pf-gd {
  --lv: 56, 182, 255;
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-gd::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-gd::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}
.pf-gd.is-lv-1 {
  --lv: 255, 176, 32;
}
.pf-gd.is-lv-2 {
  --lv: 255, 59, 78;
}
.pf-gd.is-lv-2::before {
  background: linear-gradient(rgba(255, 59, 78, 0.08), rgba(255, 59, 78, 0.02)), rgba(255, 255, 255, 0.035);
}

.pf-gd-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: clamp(14px, 2vw, 22px);
}

.pf-gd-level {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-gd-level > span {
  padding: 0 10px 0 8px;
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pf-gd-level button {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: 0;
  transition: background-color 0.3s, color 0.3s;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-gd-level button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.pf-gd-level button[aria-pressed=true] {
  color: #0a0b14;
  background: rgb(var(--lv));
}
.pf-gd-level button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-gd-kpis {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-gd-kpis li {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.pf-gd-kpis i {
  align-self: center;
  font-size: 15px;
  color: rgb(var(--lv));
  transition: color 0.4s;
}
.pf-gd-kpis b {
  min-width: 3ch;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pf-gd-kpis span {
  font-size: 11.5px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
}
.pf-gd-kpis .is-bad i {
  color: #ff3b4e;
}
@media (max-width: 767.98px) {
  .pf-gd-kpis {
    display: grid;
    flex-basis: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-gd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .pf-gd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-gd-side {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  min-width: 0;
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .pf-gd-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-gd-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(4, 8, 30, 0.55);
}

.pf-gd-head {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pf-gd-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-gd-head small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-gd-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pf-gd-layers button {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  transition: color 0.25s, background-color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-gd-layers button[aria-pressed=true] {
  color: #fff;
  background: rgba(var(--lv), 0.18);
}
.pf-gd-layers button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .pf-gd-layers span {
    display: none;
  }
}

.pf-gd-plan {
  --al-border-bg: rgba(var(--lv), 0.35);
  position: relative;
  flex: 1;
  min-height: 0;
  aspect-ratio: 100/56;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(var(--lv), 0.08), transparent 70%), linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0/24px 24px, #050a1c;
  transition: background-color 0.4s;
}
.pf-gd-plan > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pf-gd-take {
  --a: 255, 59, 78;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(var(--a), 0.12);
  animation: pf-s-pop 0.35s both;
}
.pf-gd-take[hidden] {
  display: none;
}

.pf-gd-take-box {
  --al-border-bg: rgba(var(--a), 0.75);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(100%, 340px);
  padding: 16px 18px;
  text-align: center;
  isolation: isolate;
  background: none;
}
.pf-gd-take-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(40, 6, 14, 0.92);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  pointer-events: none;
}
.pf-gd-take-box::after {
  clip-path: polygon(evenodd, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px, 12px 0, calc(12px + 0.42px) 1px, 1px calc(12px + 0.42px), 1px calc(100% - 12px - 0.42px), calc(12px + 0.42px) calc(100% - 1px), calc(100% - 12px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 12px - 0.42px), calc(100% - 1px) calc(12px + 0.42px), calc(100% - 12px - 0.42px) 1px, calc(12px + 0.42px) 1px) !important;
}
.pf-gd-take-box > i {
  font-size: 28px;
  color: rgb(var(--a));
  animation: pf-s-blink 1s infinite;
}
.pf-gd-take-box > b {
  font-size: 1.1rem;
  color: rgb(var(--a));
}
.pf-gd-take-box > strong {
  font-size: 14px;
  color: #fff;
}
.pf-gd-take-box > span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 575.98px) {
  .pf-gd-take-box {
    gap: 2px;
    padding: 10px 12px;
  }
  .pf-gd-take-box > i {
    font-size: 20px;
  }
  .pf-gd-take-box > b {
    font-size: 0.95rem;
  }
}

.pf-gd-take-act {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.pf-gd-take-act .pf-sbtn {
  padding: 7px 12px;
  font-size: 12px;
}
.pf-gd-take-act .pf-sbtn.is-main {
  color: #fff;
  background: rgb(var(--a));
}

.pf-gd-log {
  display: grid;
  grid-template-rows: repeat(5, 38px);
  gap: 5px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.pf-gd-entry {
  --e: 20, 199, 138;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.03);
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-gd-entry.is-out {
  --e: 255, 255, 255;
}
.pf-gd-entry.is-car {
  --e: 255, 176, 32;
}
.pf-gd-entry.is-lv {
  --e: 255, 59, 78;
}
.pf-gd-entry em {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  font-style: normal;
  text-align: center;
  color: rgb(var(--e));
  background: rgba(var(--e), 0.12);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-gd-entry b {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-gd-entry small {
  display: block;
  overflow: hidden;
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.5);
}
.pf-gd-entry time {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.pf-gd-alerts {
  display: grid;
  grid-template-rows: repeat(4, 46px);
  gap: 6px;
}

.pf-gd-alert {
  --al-border-bg: rgba(255, 255, 255, 0.07);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.025);
  border: 0;
  transition: background-color 0.25s;
}
.pf-gd-alert > i {
  font-size: 15px;
  color: rgba(var(--a), 0.6);
}
.pf-gd-alert b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-gd-alert small {
  display: block;
  overflow: hidden;
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.5);
}
.pf-gd-alert.is-open {
  --al-border-bg: rgba(var(--a), 0.45);
  background: rgba(var(--a), 0.07);
}
.pf-gd-alert.is-open > i {
  color: rgb(var(--a));
}
.pf-gd-alert.is-on {
  --al-border-bg: rgb(var(--a));
  background: rgba(var(--a), 0.15);
}
.pf-gd-alert:hover {
  background: rgba(var(--a), 0.1);
}
.pf-gd-alert:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pf-gd-entry,
  .pf-gd-take,
  .pf-gd-take-box > i {
    animation: none;
  }
}
.pf-tour-ready .pf-shot.is-long {
  overflow: hidden;
}
.pf-tour-ready .pf-shot.is-long .pf-shot-img {
  will-change: transform;
}
.pf-tour-ready .pf-shot.is-long.is-active .pf-shot-img {
  animation: pf-pan var(--d, 12s) ease-in-out 0.9s infinite alternate;
}

@keyframes pf-pan {
  0%, 6% {
    transform: none;
  }
  94%, 100% {
    transform: translateY(var(--pan, 0%));
  }
}
.pf-shot-modal .pf-shot-backdrop {
  object-position: top;
}

.pf-shop-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pf-shop-mini img {
  flex: none;
  width: 54px;
  height: 54px;
  object-fit: cover;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-shop-mini small {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(20, 199, 138);
}
.pf-shop-mini b {
  display: block;
  font-size: 14px;
  color: #fff;
}
.pf-shop-mini em {
  font-size: 11.5px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
}

.pf-viz-crowd {
  display: grid;
  grid-template-columns: repeat(8, 12px);
  gap: 4px;
}
.pf-viz-crowd i {
  width: 12px;
  height: 14px;
  background: rgba(var(--pf-accent-rgb), 0.85);
  clip-path: path("M6 0a3.2 3.2 0 1 1 0 6.4A3.2 3.2 0 1 1 6 0ZM0 14c0-4 2.6-6.4 6-6.4S12 10 12 14Z");
  transition: opacity 0.4s calc(var(--k) * 0.04s), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.04s);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-crowd i {
  opacity: 0;
  transform: translateY(6px);
}

.pf-viz-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 150px;
}
.pf-viz-rooms span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(var(--pf-accent-rgb), 0.14);
  transition: opacity 0.4s calc(var(--k) * 0.06s), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.06s);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-viz-rooms span.is-on {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-rooms span {
  opacity: 0;
  transform: scale(0.6);
}

.pf-words {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-words li {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.45);
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(var(--pf-accent-rgb), 0.07);
  transition: opacity 0.45s calc(var(--k) * 0.1s), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.1s);
}
.pf-words b {
  font-size: 1.15rem;
  color: #fff;
}
.pf-words span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-words li {
  opacity: 0;
  transform: translateX(-10px);
}

.pf-chips-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-chips-tools li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-chips-tools li i {
  color: var(--pf-accent);
}

.pf-brief {
  margin: 0 0 18px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.pf-goals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: goal;
}
.pf-goals li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
  counter-increment: goal;
  transition: opacity 0.4s calc(var(--k) * 0.07s), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.07s);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-goals li::before {
  content: counter(goal);
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 22px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-goals li {
  opacity: 0;
  transform: translateY(6px);
}

.pf-methods {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-methods::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 15px;
  width: 1px;
  background: rgba(var(--pf-accent-rgb), 0.35);
}
.pf-methods li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 0.4s calc(var(--k) * 0.07s), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.07s);
}
.pf-methods i {
  display: grid;
  flex: none;
  place-items: center;
  width: 31px;
  height: 28px;
  font-size: 13px;
  color: var(--pf-accent);
  background: #10131c;
  box-shadow: inset 0 0 0 1px rgba(var(--pf-accent-rgb), 0.4);
  border-radius: 50%;
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-methods li {
  opacity: 0;
  transform: translateX(-8px);
}

.pf-persona-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 991.98px) {
  .pf-persona-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pf-persona-grid > :first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 575.98px) {
  .pf-persona-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-persona-who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 12px 14px;
}
.pf-persona-who b {
  display: block;
  font-size: 1.15rem;
  color: #fff;
}
.pf-persona-who small {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}
.pf-persona-who p {
  grid-column: 1/-1;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.pf-persona-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 18px;
  font-weight: 700;
  color: var(--pf-on-accent);
  background: linear-gradient(150deg, var(--pf-accent), var(--pf-accent-2));
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.pf-persona-tags {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1/-1;
  gap: 6px;
}
.pf-persona-tags span {
  padding: 4px 10px;
  font-size: 12px;
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.14);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.pf-persona-list {
  --c: 255, 84, 104;
  --al-border-bg: rgba(var(--c), 0.5);
  padding: 14px 16px;
  background: linear-gradient(rgba(var(--c), 0.12), rgba(var(--c), 0.03) 90px);
}
.pf-persona-list.is-gain {
  --c: 20, 199, 138;
}
.pf-persona-list h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
}
.pf-persona-list h4 i {
  color: rgb(var(--c));
}
.pf-persona-list ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-persona-list li {
  position: relative;
  padding-inline-start: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.pf-persona-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 6px;
  height: 6px;
  background: rgb(var(--c));
  transform: rotate(45deg);
}

.pf-ia {
  display: grid;
  justify-items: center;
  gap: 26px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pf-ia-root {
  position: relative;
  padding: 9px 22px;
  font-weight: 600;
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-ia-root::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 13px;
  background: rgba(var(--pf-accent-rgb), 0.6);
}

.pf-ia-branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 660px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-ia-branches::before {
  content: "";
  position: absolute;
  top: -13px;
  left: calc((100% - 48px) / 10);
  right: calc((100% - 48px) / 10);
  height: 1px;
  background: rgba(var(--pf-accent-rgb), 0.6);
}
.pf-ia-branches li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  transition: opacity 0.45s calc(var(--k) * 0.08s), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 0.08s);
}
.pf-ia-branches li::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 1px;
  height: 13px;
  background: rgba(var(--pf-accent-rgb), 0.6);
}
.pf-ia-branches b {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-ia-branches span {
  margin-inline-start: 12px;
  padding: 5px 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 2px 0 rgba(var(--pf-accent-rgb), 0.55);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-ia-branches li {
  opacity: 0;
  transform: translateY(8px);
}

.pf-flowimg {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-flowimg img {
  display: block;
  width: 100%;
  height: auto;
}
.pf-flowimg .pf-zoom-btn {
  opacity: 1;
}

.pf-learn {
  display: grid;
  gap: 6px;
  margin: 0;
}
.pf-learn dt {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.pf-learn dt:not(:first-child) {
  margin-top: 10px;
}
.pf-learn dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

.pf-shop {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-shop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-shop::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-shop-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0;
  list-style: none;
}
.pf-shop-steps button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: 0;
  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
  transition: color 0.25s, border-color 0.3s;
}
.pf-shop-steps button:hover {
  color: #fff;
}
.pf-shop-steps button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}
.pf-shop-steps .is-done button {
  color: rgba(255, 255, 255, 0.8);
  border-bottom-color: rgba(var(--pf-accent-rgb), 0.55);
}
.pf-shop-steps .is-now button {
  color: #fff;
  border-bottom-color: var(--pf-accent);
}
@media (max-width: 575.98px) {
  .pf-shop-steps button {
    justify-content: center;
    padding: 8px 4px 10px;
    font-size: 0;
  }
  .pf-shop-steps button i {
    font-size: 16px;
  }
  .pf-shop-steps .is-now button {
    font-size: 12px;
  }
}

.pf-shop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 1199.98px) {
  .pf-shop-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pf-shop-grid > :last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 767.98px) {
  .pf-shop-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-shop-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(10, 10, 14, 0.55);
}

.pf-shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pf-shop-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-shop-head small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-shop-filters button {
  padding: 5px 11px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-shop-filters button:hover {
  color: #fff;
}
.pf-shop-filters button[aria-pressed=true] {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-shop-filters button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-shop-grid-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pf-shop-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0 0 6px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  transition: opacity 0.3s, background-color 0.25s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-shop-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.pf-shop-item > span {
  display: grid;
  padding: 0 7px;
  min-width: 0;
}
.pf-shop-item b {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-shop-item small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}
.pf-shop-item small s {
  color: rgba(255, 255, 255, 0.35);
}
.pf-shop-item:hover {
  background: rgba(var(--pf-accent-rgb), 0.1);
}
.pf-shop-item.is-on {
  background: rgba(var(--pf-accent-rgb), 0.18);
  box-shadow: inset 0 -3px 0 var(--pf-accent);
}
.pf-shop-item.is-off {
  opacity: 0.22;
  pointer-events: none;
}
.pf-shop-item:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-shop-photo {
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #f4f4f4;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-shop-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pf-shop-info {
  display: grid;
  gap: 10px;
}

.pf-shop-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pf-shop-title b {
  overflow: hidden;
  font-size: 1.05rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}

.pf-shop-stars {
  flex: none;
  font-size: 11px;
  letter-spacing: 1px;
  color: #f2c12e;
}

.pf-shop-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: -6px;
}
.pf-shop-price b {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--pf-accent);
}
.pf-shop-price s {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.pf-shop-opt {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.pf-shop-opt > span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.pf-shop-opt > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-shop-opt button {
  min-width: 34px;
  padding: 5px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-shop-opt button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pf-shop-opt button[aria-pressed=true] {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-shop-opt button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pf-shop-opt .is-swatches button {
  min-width: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
  clip-path: none;
  border-radius: 50%;
}
.pf-shop-opt .is-swatches button[aria-pressed=true] {
  background: var(--c);
  box-shadow: 0 0 0 2px #0b0b10, 0 0 0 4px var(--pf-accent);
}

.pf-shop-buy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.pf-shop-buy .pf-sbtn {
  flex: 1;
  justify-content: center;
}

.pf-shop-qty {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-shop-qty button {
  width: 30px;
  height: 36px;
  font-size: 16px;
  color: #fff;
  background: none;
  border: 0;
}
.pf-shop-qty button:hover {
  background: rgba(255, 255, 255, 0.08);
}
.pf-shop-qty button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: -2px;
}
.pf-shop-qty b {
  min-width: 18px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pf-shop-wish {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 36px;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-shop-wish[aria-pressed=true] {
  color: #ff5468;
}
.pf-shop-wish:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-shop-panel:has(> .pf-shop-cart) {
  display: grid;
}

.pf-shop-cart,
.pf-shop-track {
  display: flex;
  grid-area: 1/1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.pf-shop-cart[hidden],
.pf-shop-track[hidden] {
  display: flex !important;
  visibility: hidden;
}

.pf-shop-lines {
  display: grid;
  grid-template-rows: repeat(3, 52px);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-shop-lines li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 4px 4px;
  background: rgba(255, 255, 255, 0.04);
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-shop-lines li.is-empty {
  grid-row: 1/-1;
  grid-template-columns: auto;
  place-content: center;
  justify-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.02);
}
.pf-shop-lines li.is-empty i {
  font-size: 22px;
}
.pf-shop-lines img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-shop-lines b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-shop-lines small {
  display: block;
  overflow: hidden;
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.5);
}
.pf-shop-lines button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: 0;
}
.pf-shop-lines button:hover {
  color: #ff5468;
}
.pf-shop-lines button:focus-visible {
  outline: 2px solid var(--pf-accent);
}

.pf-shop-line-r {
  text-align: end;
}
.pf-shop-line-r b {
  font-variant-numeric: tabular-nums;
}

.pf-shop-coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: rgba(var(--pf-accent-rgb), 0.08);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-shop-coupon span {
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--pf-accent);
}
.pf-shop-coupon button {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-shop-coupon button[aria-pressed=true] {
  color: #04170f;
  background: rgb(20, 199, 138);
}
.pf-shop-coupon button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-shop-ship {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.pf-shop-ship button {
  padding: 7px 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-shop-ship button[aria-pressed=true] {
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.25);
  box-shadow: inset 0 -2px 0 var(--pf-accent);
}
.pf-shop-ship button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-shop-sum {
  display: grid;
  gap: 4px;
  margin: 0;
}
.pf-shop-sum div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.pf-shop-sum dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.pf-shop-sum .is-total {
  padding-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pf-shop-cart > .pf-sbtn,
.pf-shop-track > .pf-sbtn {
  justify-content: center;
  margin-top: auto;
}
.pf-shop-cart > .pf-sbtn:disabled,
.pf-shop-track > .pf-sbtn:disabled {
  opacity: 0.4;
}

.pf-shop-timeline {
  position: relative;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}
.pf-shop-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  height: 44px;
}
.pf-shop-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 33px;
  left: 12px;
  width: 2px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
}
.pf-shop-timeline li > i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transition: background-color 0.3s, color 0.3s;
}
.pf-shop-timeline li b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.pf-shop-timeline li small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.pf-shop-timeline li.is-done::after {
  background: rgb(20, 199, 138);
}
.pf-shop-timeline li.is-done > i {
  color: #04170f;
  background: rgb(20, 199, 138);
}
.pf-shop-timeline li.is-done b {
  color: #fff;
}
.pf-shop-timeline li.is-now > i {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  box-shadow: 0 0 0 4px rgba(var(--pf-accent-rgb), 0.2);
}
.pf-shop-timeline li.is-now b {
  color: #fff;
}

.pf-shop-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.4;
  transition: opacity 0.3s;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-shop-rate.is-ready {
  opacity: 1;
}
.pf-shop-rate > span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
}
.pf-shop-rate button {
  padding: 2px 3px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.2);
  background: none;
  border: 0;
  transition: color 0.2s, transform 0.2s;
}
.pf-shop-rate button[aria-pressed=true] {
  color: #f2c12e;
}
.pf-shop-rate button:not(:disabled):hover {
  transform: scale(1.15);
}
.pf-shop-rate button:focus-visible {
  outline: 2px solid var(--pf-accent);
}

@media (prefers-reduced-motion: reduce) {
  .pf-tour-ready .pf-shot.is-long.is-active .pf-shot-img,
  .pf-shop-photo img,
  .pf-shop-lines li {
    animation: none;
  }
}
.pf-ava {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--pf-accent), var(--pf-accent-2));
  border-radius: 50%;
}

.pf-vcard {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-vcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-vcard::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-vcard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 1199.98px) {
  .pf-vcard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  }
  .pf-vcard-grid > :last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 767.98px) {
  .pf-vcard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-vcard-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(6, 8, 24, 0.55);
}

.pf-vcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pf-vcard-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-vcard-head small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-vcard-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-vcard-opts button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-vcard-opts button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pf-vcard-opts button[aria-pressed=true] {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-vcard-opts button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-vcard-swatches {
  display: flex;
  gap: 8px;
}
.pf-vcard-swatches button {
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--c);
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.25s;
}
.pf-vcard-swatches button[aria-pressed=true] {
  box-shadow: 0 0 0 2px #0b0b10, 0 0 0 4px #fff;
}
.pf-vcard-swatches button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.pf-vcard-label {
  margin: 4px 0 -4px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-vcard-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-self: center;
  width: 100%;
  max-width: 300px;
  height: 540px;
  padding: 12px;
  background: #0d0e14;
  border-radius: 36px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.pf-vcard-screen {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  color: #1b1b22;
  background: #f5f5f7;
  border-radius: 26px;
}

.pf-vcard-card {
  --c1: #b5173f;
  --c2: #e2385f;
  --ink: #fff;
  position: relative;
  padding: 26px 18px 16px;
  color: var(--ink);
  background: linear-gradient(150deg, var(--c1), var(--c2));
  transition: background 0.5s;
}
.pf-vcard-card.is-sun {
  --c1: #f5b800;
  --c2: #ffd84d;
  --ink: #2a1b00;
}
.pf-vcard-card.is-ink {
  --c1: #16171d;
  --c2: #33343f;
}
.pf-vcard-card.is-mint {
  --c1: #0f8d72;
  --c2: #33c1a0;
}
.pf-vcard-card b {
  display: block;
  font-size: 18px;
}
.pf-vcard-card small {
  font-size: 12px;
  opacity: 0.85;
}

.pf-vcard-photo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c1);
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
}

.pf-vcard-fields {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 12px 14px;
  list-style: none;
}
.pf-vcard-fields li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  font-size: 12.5px;
  transition: opacity 0.3s;
}
.pf-vcard-fields li i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  color: #fff;
  background: #b5173f;
  border-radius: 50%;
}
.pf-vcard-fields li.is-off {
  opacity: 0.18;
}

.pf-vcard-share {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 0 14px 16px;
  text-align: center;
}
.pf-vcard-share > span {
  font-size: 11px;
  color: #555;
}
.pf-vcard-share .pf-vcard-qr,
.pf-vcard-share .pf-vcard-hand,
.pf-vcard-share .pf-vcard-link {
  display: none;
}
.pf-vcard-share[data-way=qr] .pf-vcard-qr, .pf-vcard-share[data-way=handshake] .pf-vcard-hand, .pf-vcard-share[data-way=link] .pf-vcard-link {
  display: grid;
}

.pf-vcard-qr {
  grid-template-columns: repeat(7, 9px);
  gap: 2px;
  padding: 6px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #ddd;
}
.pf-vcard-qr i {
  width: 9px;
  height: 9px;
  background: #1b1b22;
}
.pf-vcard-qr i.is-w {
  background: transparent;
}

.pf-vcard-hand,
.pf-vcard-link {
  place-items: center;
  width: 100%;
  height: 81px;
  font-size: 34px;
  color: #b5173f;
}

.pf-vcard-link {
  font-family: var(--bs-font-monospace);
  font-size: 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px #ddd;
}

.pf-vcard-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pf-vcard-count b {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pf-vcard-count span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.pf-vcard-people {
  display: grid;
  grid-template-rows: repeat(5, 50px);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-vcard-people li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.04);
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-vcard-people li.is-empty {
  background: rgba(255, 255, 255, 0.015);
  animation: none;
}
.pf-vcard-people li b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-vcard-people li small {
  display: block;
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
.pf-vcard-people li button {
  width: 30px;
  height: 30px;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: 0;
}
.pf-vcard-people li button[aria-pressed=true] {
  color: #ffc43d;
}
.pf-vcard-people li button:focus-visible {
  outline: 2px solid var(--pf-accent);
}

.pf-vcard-ava {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--pf-accent), #ff7a59);
  border-radius: 50%;
}

.pf-vcard-panel > .pf-sbtn {
  justify-content: center;
  margin-top: auto;
}

.pf-homes {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 991.98px) {
  .pf-homes {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-homes-view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #fff;
}
.pf-homes-view img {
  display: block;
  width: 100%;
  height: auto;
}
.pf-homes-view img.is-panning {
  animation: pf-pan var(--d, 14s) ease-in-out 0.6s infinite alternate;
}

.pf-homes-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.pf-homes-picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 991.98px) {
  .pf-homes-picks {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .pf-homes-picks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pf-homes-pick {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: grid;
  gap: 4px;
  padding: 4px 4px 6px;
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.03);
  border: 0;
  transition: background-color 0.25s;
}
.pf-homes-pick img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-homes-pick[aria-pressed=true] {
  --al-border-bg: var(--pf-accent);
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.15);
}
.pf-homes-pick:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-homes-info {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.pf-homes-info > b {
  font-size: 1.1rem;
  color: #fff;
}
.pf-homes-info ol {
  display: grid;
  grid-auto-rows: 22px;
  gap: 5px;
  min-height: 211px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: part;
}
.pf-homes-info li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  counter-increment: part;
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--k) * 0.05s);
}
.pf-homes-info li::before {
  content: counter(part, decimal-leading-zero);
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: var(--pf-accent);
}

.pf-tix {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-tix::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-tix::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-tix-folders {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  padding: 0;
  list-style: none;
}
.pf-tix-folders li {
  --f: 26, 163, 245;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(135deg, rgba(var(--f), 0.9), rgba(var(--f), 0.55));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.pf-tix-folders li:nth-child(2) {
  --f: 139, 92, 246;
}
.pf-tix-folders li:nth-child(3) {
  --f: 32, 190, 180;
}
.pf-tix-folders li:nth-child(4) {
  --f: 96, 180, 70;
}
.pf-tix-folders li i {
  font-size: 20px;
}
.pf-tix-folders li span {
  font-size: 13px;
}
.pf-tix-folders li b {
  margin-inline-start: auto;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
  .pf-tix-folders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-tix-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 1199.98px) {
  .pf-tix-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pf-tix-grid > :last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 767.98px) {
  .pf-tix-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-tix-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(6, 8, 24, 0.55);
}

.pf-tix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pf-tix-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-tix-head small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-tix-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-tix-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}
.pf-tix-steps li span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.pf-tix-steps li.is-done {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgb(20, 199, 138);
}
.pf-tix-steps li.is-done span {
  color: #04170f;
  background: rgb(20, 199, 138);
}
.pf-tix-steps li.is-now {
  color: #fff;
  border-bottom-color: var(--pf-accent);
}
.pf-tix-steps li.is-now span {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}

.pf-tix-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: 236px;
}

.pf-tix-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.pf-tix-col small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pf-tix-col button {
  padding: 8px 10px;
  overflow: hidden;
  font-size: 12.5px;
  text-align: start;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  transition: background-color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-tix-col button:hover {
  background: rgba(var(--pf-accent-rgb), 0.12);
}
.pf-tix-col button[aria-pressed=true] {
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.3);
  box-shadow: inset 3px 0 var(--pf-accent);
}
.pf-tix-col button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-tix-hint {
  display: grid;
  flex: 1;
  place-items: center;
  padding: 10px;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.02);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.pf-tix-sum {
  display: flex;
  grid-column: 1/-1;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(var(--pf-accent-rgb), 0.07);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-tix-sum small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pf-tix-sum b {
  font-size: 15px;
  color: #fff;
}
.pf-tix-sum span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
}

.pf-tix-files {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.pf-tix-files i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  color: var(--pf-accent);
  background: rgba(255, 255, 255, 0.06);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.pf-tix-act {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.pf-tix-act .pf-sbtn {
  flex: 1;
  justify-content: center;
}
.pf-tix-act .pf-sbtn:disabled {
  opacity: 0.4;
}

.pf-tix-list {
  display: grid;
  grid-template-rows: repeat(4, 54px);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-tix-list li.is-empty {
  background: rgba(255, 255, 255, 0.015);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-tix-list button {
  --al-border-bg: transparent;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 0 9px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-tix-list button.is-on {
  background: rgba(var(--pf-accent-rgb), 0.16);
  box-shadow: inset 3px 0 var(--pf-accent);
}
.pf-tix-list button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}
.pf-tix-list b {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-tix-list small {
  display: block;
  overflow: hidden;
  font-size: 10.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}

.pf-tix-ava {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--pf-accent), var(--pf-accent-2));
  border-radius: 50%;
}

.pf-tix-open {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

.pf-tix-log {
  display: grid;
  grid-template-rows: repeat(4, 56px);
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.pf-tix-event {
  --e: var(--pf-accent-rgb);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  background: rgba(var(--e), 0.06);
  box-shadow: inset 2px 0 rgba(var(--e), 0.7);
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-tix-event.is-done {
  --e: 20, 199, 138;
}
.pf-tix-event.is-fwd {
  --e: 255, 181, 71;
}
.pf-tix-event b {
  display: block;
  font-size: 12px;
}
.pf-tix-event small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pf-tix-event time {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.pf-brands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 767.98px) {
  .pf-brands {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-brand-card {
  --b: 244, 123, 32;
  --al-border-bg: rgba(var(--b), 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(160deg, rgba(var(--b), 0.14), rgba(var(--b), 0.02) 60%);
}
.pf-brand-card.is-mahavedh {
  --b: 139, 195, 74;
}
.pf-brand-card header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pf-brand-card header i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: #fff;
  background: rgb(var(--b));
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.pf-brand-card header b {
  display: block;
  font-size: 1.3rem;
  color: #fff;
}
.pf-brand-card header small {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--b));
}
.pf-brand-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.pf-brand-card dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
  font-size: 13px;
}
.pf-brand-card dt {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.pf-brand-card dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.pf-brand-tag {
  --b: 244, 123, 32;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(var(--b), 0.9);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-brand-tag.is-mahavedh {
  --b: 112, 170, 52;
}

.pf-section.is-mahavedh {
  --pf-accent: #8bc34a;
  --pf-accent-rgb: 139, 195, 74;
  --pf-on-accent: #10200a;
}

.pf-aws {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-aws::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-aws::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-aws-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .pf-aws-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-aws-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(6, 8, 24, 0.55);
}

.pf-aws-head {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pf-aws-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-aws-head small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-aws-params {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-aws-params button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-aws-params button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pf-aws-params button[aria-pressed=true] {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-aws-params button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-aws-map {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.35);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1030/638;
  cursor: crosshair;
}
.pf-aws-map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.75);
}
.pf-aws-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pf-aws-legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: #fff;
  background: rgba(6, 10, 24, 0.8);
  pointer-events: none;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.pf-aws-station {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pf-aws-station > i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.pf-aws-station b {
  display: block;
  font-size: 1.05rem;
  color: #fff;
}
.pf-aws-station small {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}

.pf-aws-read {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-aws-read li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 7px 10px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-aws-read li span {
  color: rgba(255, 255, 255, 0.65);
}
.pf-aws-read li b {
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pf-aws-read li i {
  grid-column: 1/-1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.pf-aws-read li i em {
  display: block;
  height: 100%;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-aws-read li.is-on {
  background: rgba(var(--pf-accent-rgb), 0.12);
}

.pf-aws-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-aws-days li {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-aws-days li i {
  font-size: 20px;
  color: var(--pf-accent);
}
.pf-aws-days li b {
  font-size: 11.5px;
}
.pf-aws-days li span {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pf-aws-days li small {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.pf-aws-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-aws-uses button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-aws-uses button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pf-aws-uses button[aria-pressed=true] {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-aws-uses button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-aws-use {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.35);
  display: grid;
  gap: 6px;
  height: 92px;
  margin-top: auto;
  padding: 10px 12px;
  background: rgba(var(--pf-accent-rgb), 0.06);
}
.pf-aws-use b {
  font-size: 13px;
  color: #fff;
}
.pf-aws-use p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.pf-aws-use p.is-code {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  word-break: break-all;
  color: var(--pf-accent);
}

.pf-hq {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-hq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-hq::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-hq-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: clamp(14px, 2vw, 20px);
}

.pf-hq-views {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-hq-views button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-hq-views button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pf-hq-views button[aria-pressed=true] {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-hq-views button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pf-hq-kpis {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-hq-kpis li {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.pf-hq-kpis b {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pf-hq-kpis span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
}

.pf-hq-grid {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr) minmax(0, 260px);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
@media (max-width: 1199.98px) {
  .pf-hq-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .pf-hq-grid > :nth-child(2) {
    grid-column: 1/-1;
    order: -1;
  }
}
@media (max-width: 767.98px) {
  .pf-hq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-hq-panel {
  --al-border-bg: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background: rgba(6, 8, 24, 0.55);
}

.pf-hq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pf-hq-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.pf-hq-head small {
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.pf-hq-view {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.35);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1120/958;
  background: #0b1a33;
}
.pf-hq-view > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pf-hq-band {
  position: absolute;
  top: var(--t, 0%);
  bottom: var(--b, 0%);
  left: 19%;
  right: 14%;
  border: 2px solid var(--pf-accent);
  box-shadow: 0 0 0 9999px rgba(3, 10, 30, 0.45), 0 0 24px rgba(var(--pf-accent-rgb), 0.6) inset;
  pointer-events: none;
  transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.pf-hq-band[hidden] {
  display: none;
}

.pf-hq-pins {
  position: absolute;
  inset: 0;
}
.pf-hq-pins[hidden] {
  display: none;
}

.pf-hq-pin {
  --p: 20, 199, 138;
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 13px;
  color: #fff;
  background: rgba(var(--p), 0.9);
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(var(--p), 0.6);
  transition: background-color 0.3s, transform 0.25s;
}
.pf-hq-pin.is-open, .pf-hq-pin.is-off, .pf-hq-pin.is-disarmed {
  --p: 255, 84, 104;
}
.pf-hq-pin.is-cam {
  --p: 26, 163, 245;
}
.pf-hq-pin.is-cam.is-off {
  --p: 120, 120, 140;
}
.pf-hq-pin.is-on {
  transform: translate(-50%, -50%) scale(1.25);
  animation: pf-hq-ping 1.4s infinite;
}
.pf-hq-pin:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  .pf-hq-pin {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
}

@keyframes pf-hq-ping {
  70% {
    box-shadow: 0 0 0 12px rgba(var(--p), 0);
  }
}
.pf-hq-where {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: #fff;
  background: rgba(3, 10, 30, 0.8);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.pf-hq-floors {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-hq-floors button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 2px 9px;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  text-align: start;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  transition: background-color 0.25s;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-hq-floors button > i:first-child {
  color: var(--pf-accent);
}
.pf-hq-floors button b {
  display: block;
  font-size: 12.5px;
}
.pf-hq-floors button small {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}
.pf-hq-floors button:hover {
  background: rgba(var(--pf-accent-rgb), 0.1);
}
.pf-hq-floors button[aria-pressed=true] {
  background: rgba(var(--pf-accent-rgb), 0.2);
  box-shadow: inset 3px 0 var(--pf-accent);
}
.pf-hq-floors button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-hq-bar {
  grid-column: 1/-1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}
.pf-hq-bar em {
  display: block;
  height: 100%;
  background: var(--pf-accent);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pf-hq-dev {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.35);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  padding: 12px;
  background: rgba(var(--pf-accent-rgb), 0.06);
}
.pf-hq-dev > i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 16px;
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.pf-hq-dev b {
  display: block;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf-hq-dev .pf-sbtn {
  grid-column: 1/-1;
  justify-content: center;
}

.pf-hq-log {
  display: grid;
  grid-template-rows: repeat(5, 50px);
  gap: 6px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.pf-hq-log li {
  --e: 20, 199, 138;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  padding: 0 9px;
  background: rgba(var(--e), 0.06);
  box-shadow: inset 2px 0 rgba(var(--e), 0.7);
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-hq-log li.is-out {
  --e: 255, 255, 255;
}
.pf-hq-log li > span:nth-child(2) {
  grid-row: 1/-1;
  min-width: 0;
}
.pf-hq-log li b {
  display: block;
  font-size: 12px;
}
.pf-hq-log li small {
  display: block;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
.pf-hq-log li em {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  font-style: normal;
  text-transform: uppercase;
  color: rgb(var(--e));
}
.pf-hq-log li time {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.pf-hq-ava {
  display: grid;
  grid-row: 1/-1;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, #1a8cff, #22d6ff);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .pf-homes-view img.is-panning,
  .pf-vcard-people li,
  .pf-tix-list button,
  .pf-tix-event,
  .pf-hq-log li,
  .pf-hq-view > img,
  .pf-hq-pin.is-on,
  .pf-homes-info li {
    animation: none;
  }
}
.pf-viz-ring {
  width: 40px;
  height: 40px;
}
.pf-viz-ring i {
  display: block;
  width: 100%;
  height: 100%;
  background: conic-gradient(var(--pf-accent) calc(var(--v) * 1%), rgba(255, 255, 255, 0.1) 0);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
  mask: radial-gradient(circle, transparent 54%, #000 56%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-ring i {
  transform: rotate(-90deg) scale(0.6);
}

.pf-duo-img {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pf-duo-img .pf-flowimg {
  aspect-ratio: 1;
  background: #fff;
}
.pf-duo-img .pf-flowimg img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}
@media (max-width: 575.98px) {
  .pf-duo-img {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-bf-mini {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}
.pf-bf-mini b {
  font-size: 15px;
  color: #fff;
}
.pf-bf-mini span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}

.pf-bf-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-bf-palette li {
  display: grid;
  gap: 2px;
  padding: 46px 10px 8px;
  background: linear-gradient(var(--c) 0 38px, rgba(255, 255, 255, 0.04) 38px);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-bf-palette b {
  font-size: 13px;
  color: #fff;
}
.pf-bf-palette span {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}

.pf-brand-word {
  color: var(--pf-accent);
  font-weight: 600;
}
.pf-brand-word.is-mahavedh {
  color: var(--pf-accent-2);
}

.pf-viz-dots {
  display: grid;
  grid-template-columns: repeat(12, 6px);
  gap: 4px;
}
.pf-viz-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--k, 0) * 18ms);
}
.pf-viz-dots span.is-on {
  background: var(--pf-accent-2);
  box-shadow: 0 0 6px rgba(139, 195, 74, 0.6);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-dots span {
  transform: scale(0);
}

.pf-viz-looks.is-sky span {
  background: linear-gradient(160deg, #f8a768, #e0682a);
}
.pf-viz-looks.is-sky span:nth-child(2) {
  background: linear-gradient(160deg, #8fd0f3, #2f8fd0);
}
.pf-viz-looks.is-sky span:nth-child(3) {
  background: linear-gradient(160deg, #c6a9ff, #7a52e0);
}
.pf-viz-looks.is-sky span:nth-child(4) {
  background: linear-gradient(160deg, #3a2a20, #120c08);
  transition-delay: 0.3s;
}

.pf-hq-sys {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-hq-sys li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-hq-sys li i {
  color: rgb(20, 199, 138);
}
.pf-hq-sys li b {
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.pf-hq-sys li.is-back i {
  color: rgb(255, 181, 71);
}

.pf-jy-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: var(--pf-on-accent);
  background: var(--pf-accent);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.pf-trio {
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-trio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-trio::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-trio-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}

.pf-trio-order {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
}
.pf-trio-order small {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pf-trio-order b {
  display: block;
  font-size: 1.1rem;
  color: #fff;
}

.pf-trio-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  flex: 1 1 520px;
  max-width: 720px;
}
.pf-trio-steps button {
  display: grid;
  gap: 2px;
  padding: 8px 6px;
  font-size: 12.5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}
.pf-trio-steps button span {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}
.pf-trio-steps button.is-done {
  color: #fff;
}
.pf-trio-steps button.is-done span {
  color: var(--pf-accent-2);
}
.pf-trio-steps button[aria-selected=true] {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-trio-steps button[aria-selected=true] span {
  color: inherit;
}
.pf-trio-steps button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .pf-trio-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pf-trio-bar {
  height: 3px;
  margin: 18px 0 22px;
  background: rgba(255, 255, 255, 0.08);
}
.pf-trio-bar i {
  display: block;
  width: var(--p, 16%);
  height: 100%;
  background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent-2));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pf-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 44px);
  max-width: 980px;
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .pf-trio-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 300px;
  }
}

.pf-trio-phone {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  opacity: 0.42;
  transform: scale(0.95);
  transition: opacity 0.45s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-trio-phone.is-on {
  opacity: 1;
  transform: none;
}
@media (max-width: 767.98px) {
  .pf-trio-phone {
    opacity: 1;
    transform: none;
  }
  .pf-trio-phone:not(.is-focus) {
    display: none;
  }
}
.pf-trio-phone figcaption {
  display: grid;
  gap: 4px;
  min-height: calc(1.2rem + 4.35em);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.pf-trio-phone figcaption b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--pf-role-rgb, var(--pf-accent-rgb)));
}

.pf-trio-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 362/650;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 22px 50px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.45s;
}
.is-on > .pf-trio-screen {
  box-shadow: 0 0 0 2px rgb(var(--pf-role-rgb, var(--pf-accent-rgb))), 0 0 0 7px rgba(var(--pf-role-rgb, var(--pf-accent-rgb)), 0.18), 0 22px 50px rgba(0, 0, 0, 0.45);
}
.pf-trio-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-trio-screen img.is-in {
  animation: pf-trio-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pf-trio-in {
  from {
    opacity: 0.2;
    transform: translateY(10px);
  }
}
.pf-ia-set {
  display: grid;
  gap: 10px;
}
.pf-ia-set .pf-ia + .pf-ia-label {
  margin-top: 22px;
}

.pf-ia-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--pf-role-rgb, var(--pf-accent-rgb)));
}

.pf-duo-img.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 575.98px) {
  .pf-duo-img.is-three {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-redesign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
@media (max-width: 1199.98px) {
  .pf-redesign {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-redesign-main {
  min-width: 0;
}

.pf-wipe-picks.is-six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pf-wipe-picks.is-six .pf-wipe-pick {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.pf-wipe-picks.is-six .pf-wipe-pick img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920/989;
}
@media (max-width: 991.98px) {
  .pf-wipe-picks.is-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .pf-wipe-picks.is-six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-redesign-notes {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 2vw, 24px);
  background: rgba(var(--pf-accent-rgb), 0.05);
}
@media (min-width: 1200px) {
  .pf-redesign-notes {
    min-height: 440px;
  }
}
@media (max-width: 1199.98px) {
  .pf-redesign-notes {
    min-height: 300px;
  }
}
@media (max-width: 575.98px) {
  .pf-redesign-notes {
    min-height: 400px;
  }
}
.pf-redesign-notes h3 {
  margin: 0;
  font-size: 1.35rem;
  color: #fff;
}
.pf-redesign-notes ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: change;
}
.pf-redesign-notes li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  counter-increment: change;
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--k) * 0.07s);
}
.pf-redesign-notes li::before {
  content: counter(change, decimal-leading-zero);
  padding-top: 2px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--pf-accent-2);
}

.pf-redesign-eyebrow {
  font-family: var(--bs-font-monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pf-accent);
}

.pf-redesign-key {
  display: flex;
  gap: 18px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pf-redesign-key span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.pf-redesign-key i {
  width: 22px;
  height: 12px;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-redesign-key .is-a i {
  background: linear-gradient(120deg, #e6f0f1, #9fd4d2);
}
.pf-redesign-key .is-b i {
  background: linear-gradient(120deg, #1b3b61, #0a1a39);
  box-shadow: inset 0 0 0 1px var(--pf-accent);
}

.pf-viz-salah {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 36px;
}
.pf-viz-salah i {
  width: 8px;
  height: calc(14px + var(--k) * 4px);
  background: rgba(255, 255, 255, 0.16);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--k) * 70ms);
  transform-origin: bottom;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
}
.pf-viz-salah i.is-on {
  background: var(--pf-accent);
  box-shadow: 0 0 10px rgba(var(--pf-accent-rgb), 0.6);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-salah i {
  transform: scaleY(0);
}

.pf-viz-mushaf {
  display: flex;
  gap: 4px;
}
.pf-viz-mushaf i {
  width: 16px;
  height: 34px;
  background: linear-gradient(180deg, rgba(var(--pf-accent-rgb), 0.5), rgba(var(--pf-accent-rgb), 0.15));
  border-left: 3px solid var(--pf-accent-2);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-viz-mushaf i:nth-child(2) {
  transition-delay: 0.08s;
}
.pf-viz-mushaf i:nth-child(3) {
  transition-delay: 0.16s;
}
.pf-viz-mushaf i:nth-child(4) {
  transition-delay: 0.24s;
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-mushaf i {
  transform: translateY(8px) rotate(-8deg);
}

.pf-viz-looks.is-alif span {
  width: 48px;
  background: linear-gradient(160deg, #eef5f5, #9fd4d2);
}
.pf-viz-looks.is-alif span:nth-child(2) {
  background: linear-gradient(160deg, #1b3b61, #0a1a39);
  box-shadow: inset 0 0 0 1px var(--pf-accent);
}

.pf-ask {
  --a-bg: #ffffff;
  --a-pane: #f6f6f6;
  --a-card: #ffffff;
  --a-line: rgba(0, 0, 0, 0.08);
  --a-ink: #1c1c1c;
  --a-mute: #77787d;
  --a-resp: #e5f8f4;
  --a-hi: rgba(25, 194, 123, 0.16);
  margin-top: 48px;
  padding: clamp(12px, 2vw, 22px);
  color: var(--a-ink);
  transition: color 0.35s;
  isolation: isolate;
  background: none;
}
.pf-ask::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--a-bg);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-ask::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}
.pf-ask.is-dark {
  --a-bg: #111111;
  --a-pane: #1d1d1d;
  --a-card: #262626;
  --a-line: rgba(255, 255, 255, 0.08);
  --a-ink: #f2f2f2;
  --a-mute: #9a9ba0;
  --a-resp: #2c2c2c;
  --a-hi: rgba(25, 194, 123, 0.22);
}

.pf-ask-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 4px 4px 16px;
}

.pf-ask-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
}
.pf-ask-file > i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 17px;
  color: var(--pf-accent);
  background: var(--a-hi);
  border-radius: 50%;
}
.pf-ask-file b {
  display: block;
  font-size: 15px;
}
.pf-ask-file small {
  font-size: 11.5px;
  color: var(--a-mute);
}

.pf-ask-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #13995f;
  background: var(--a-hi);
  border-radius: 99px;
}
.pf-ask-ready i {
  width: 6px;
  height: 6px;
  background: var(--pf-accent);
  border-radius: 50%;
}

.pf-ask-theme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--a-ink);
  background: var(--a-pane);
  border: 1px solid var(--a-line);
  border-radius: 99px;
}
.pf-ask-theme[aria-pressed=true] {
  color: #04170e;
  background: var(--pf-accent);
  border-color: transparent;
}
.pf-ask-theme:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-ask-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: 14px;
}
@media (max-width: 991.98px) {
  .pf-ask-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-ask-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(12px, 2vw, 22px);
  background: var(--a-pane);
  border-radius: 22px;
  transition: background-color 0.35s;
}

.pf-ask-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 380px;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}
.pf-ask-log li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  animation: pf-s-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-ask-log small {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--a-mute);
}
.pf-ask-log p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.pf-ask-log .is-you p {
  display: inline-block;
  padding: 8px 12px;
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: 12px;
}
.pf-ask-log .is-ai > div {
  padding: 12px 14px;
  background: var(--a-resp);
  border-radius: 12px;
  transition: background-color 0.35s;
}
.pf-ask-log .is-typing::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--pf-accent);
  animation: pf-ask-caret 0.9s steps(2) infinite;
}
.pf-ask-log a {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin: 0 2px;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
  vertical-align: 2px;
  color: #fff;
  background: var(--pf-accent);
  border-radius: 5px;
  cursor: pointer;
}

@keyframes pf-ask-caret {
  50% {
    opacity: 0;
  }
}
.pf-ask-ava {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: #3a3a40;
  border-radius: 8px;
}
.pf-ask-ava.is-ai {
  font-size: 14px;
  background: linear-gradient(150deg, #19c27b, #12a868);
}

.pf-ask-tools {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--a-mute);
}

.pf-ask-qs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pf-ask-qs button {
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--a-ink);
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: 99px;
  transition: background-color 0.25s, border-color 0.25s;
}
.pf-ask-qs button:hover {
  border-color: var(--pf-accent);
}
.pf-ask-qs button[aria-pressed=true] {
  background: var(--a-hi);
  border-color: var(--pf-accent);
}
.pf-ask-qs button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-ask-input {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--a-mute);
  background: var(--a-card);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.pf-ask-input span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-ask-side {
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
  min-width: 0;
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .pf-ask-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pf-ask-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: var(--a-pane);
  border-radius: 18px;
  transition: background-color 0.35s;
}

.pf-ask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pf-ask-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--a-ink);
}
.pf-ask-head small {
  font-size: 11px;
  color: var(--a-mute);
}
.pf-ask-head b {
  padding: 2px 9px;
  font-size: 11.5px;
  color: #13995f;
  background: var(--a-hi);
  border-radius: 99px;
}

.pf-ask-src {
  display: grid;
  gap: 6px;
  height: 196px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.pf-ask-src p {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--a-mute);
  background: var(--a-card);
  border-left: 3px solid transparent;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.pf-ask-src p.is-on {
  color: var(--a-ink);
  background: var(--a-hi);
  border-left-color: var(--pf-accent);
}
.pf-ask-src span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pf-accent);
}

.pf-ask-checks {
  display: grid;
  grid-template-rows: repeat(8, 30px);
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-ask-checks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--a-ink);
  background: var(--a-card);
  border-radius: 8px;
}
.pf-ask-checks i {
  font-size: 14px;
}
.pf-ask-checks .is-ok i {
  color: #19c27b;
}
.pf-ask-checks .is-warn i {
  color: #e5484d;
}
.pf-ask-checks .is-wait i {
  color: var(--a-mute);
  opacity: 0.5;
}

.pf-ask-cite {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-style: normal;
  color: #04170e;
  vertical-align: 2px;
  background: var(--pf-accent);
  border-radius: 4px;
}

.pf-jy-ico.is-alt {
  color: #fff;
  background: var(--pf-accent-2);
}

.pf-viz-panes {
  display: flex;
  gap: 4px;
  height: 34px;
}
.pf-viz-panes i {
  width: 14px;
  background: rgba(255, 255, 255, 0.14);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.pf-viz-panes i.is-on {
  width: 30px;
  background: rgba(var(--pf-accent-rgb), 0.55);
}

.pf-viz-tiles {
  display: grid;
  grid-template-columns: repeat(2, 16px);
  gap: 4px;
}
.pf-viz-tiles i {
  width: 16px;
  height: 15px;
  background: var(--c);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-panes i,
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-tiles i {
  transform: scale(0.4);
}

.pf-viz-looks.is-doc span {
  width: 48px;
  background: linear-gradient(160deg, #ffffff, #e5f8f4);
}
.pf-viz-looks.is-doc span:nth-child(2) {
  background: linear-gradient(160deg, #262626, #111111);
  box-shadow: inset 0 0 0 1px var(--pf-accent);
}

@media (prefers-reduced-motion: reduce) {
  .pf-ask-log li,
  .pf-ask-log .is-typing::after {
    animation: none;
  }
}
.pf-trip {
  --tr-panel: rgba(8, 14, 36, 0.72);
  --tr-card: rgba(255, 255, 255, 0.035);
  --tr-line: rgba(255, 255, 255, 0.1);
  --tr-navy: 74, 120, 255;
  margin-top: 48px;
  padding: clamp(14px, 2.4vw, 30px);
  isolation: isolate;
  background: none;
}
.pf-trip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-trip::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-trip-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pf-trip-tabs button {
  --al-border-bg: var(--tr-line);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  background: var(--tr-card);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
}
.pf-trip-tabs button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.pf-trip-tabs button[aria-selected=true] {
  --al-border-bg: var(--pf-accent);
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.16);
}
.pf-trip-tabs button[aria-selected=true] i {
  color: var(--pf-accent);
}
.pf-trip-tabs button:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-trip-search {
  --al-border-bg: rgba(var(--tr-navy), 0.45);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
  padding: 16px;
  background: linear-gradient(120deg, rgba(var(--tr-navy), 0.22), rgba(var(--tr-navy), 0.06));
}
@media (max-width: 767.98px) {
  .pf-trip-search {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-trip-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 991.98px) {
  .pf-trip-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .pf-trip-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pf-trip-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
  animation: pf-s-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-trip-fields span {
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pf-trip-fields b {
  --al-border-bg: var(--tr-line);
  overflow: hidden;
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  background: rgba(4, 8, 24, 0.6);
}

.pf-trip-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--pf-accent);
}

.pf-trip-body {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 991.98px) {
  .pf-trip-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-trip-filter {
  --al-border-bg: var(--tr-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--tr-panel);
}
.pf-trip-filter > b {
  font-size: 15px;
  color: #fff;
}
.pf-trip-filter label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
}
.pf-trip-filter output {
  font-weight: 700;
  color: #fff;
}
.pf-trip-filter input[type=range] {
  width: 100%;
  accent-color: var(--pf-accent);
}
.pf-trip-filter > small {
  margin-top: auto;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

.pf-trip-eye {
  --al-border-bg: var(--tr-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: #fff;
  background: var(--tr-card);
  border: 0;
}
.pf-trip-eye[aria-pressed=true] {
  --al-border-bg: rgb(var(--tr-navy));
  background: rgba(var(--tr-navy), 0.2);
}
.pf-trip-eye[aria-pressed=true] i {
  color: rgb(var(--tr-navy));
}
.pf-trip-eye:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-trip-list {
  display: grid;
  align-content: start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-trip-list > li {
  --al-border-bg: var(--tr-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  color: #fff;
  background: var(--tr-panel);
  transition: background-color 0.3s;
  animation: pf-s-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--k, 0) * 0.06s);
}
.pf-trip-list > li:hover {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.5);
}
.pf-trip-list > li.is-agent {
  --al-border-bg: rgba(var(--tr-navy), 0.45);
}
.pf-trip-list > li.is-empty {
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  min-height: 80px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.02);
}

.pf-trip-sub,
.pf-trip-fare {
  height: 1.5em;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 575.98px) {
  .pf-trip-sub,
  .pf-trip-fare {
    height: 3em;
  }
}

.pf-trip-sub {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.55);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
@media (max-width: 575.98px) {
  .pf-trip-sub {
    -webkit-line-clamp: 2;
  }
}
.is-agent .pf-trip-sub {
  display: none;
}

.pf-trip-fare {
  display: none;
  flex-wrap: wrap;
  gap: 0 14px;
  overflow: hidden;
}
.is-agent .pf-trip-fare {
  display: flex;
  animation: pf-s-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-trip-fare > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.pf-trip-fare small {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--tr-navy));
}
.pf-trip-fare b {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}

.pf-trip-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
}
@media (max-width: 575.98px) {
  .pf-trip-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
  }
  .pf-trip-row button {
    grid-column: 1/-1;
  }
}
.pf-trip-row button {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--pf-accent);
  border: 0;
  pointer-events: none;
}

.pf-trip-ico {
  --al-border-bg: rgba(var(--pf-accent-rgb), 0.4);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 19px;
  color: var(--pf-accent);
  background: rgba(var(--pf-accent-rgb), 0.1);
}

.pf-trip-what {
  min-width: 0;
}
.pf-trip-what > b {
  display: block;
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-trip-price {
  display: grid;
  grid-template-rows: 16px 26px 16px;
  align-items: center;
  text-align: end;
}
.pf-trip-price s {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.pf-trip-price b {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.pf-trip-price small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.pf-admin {
  --ad-ink: #2a2b33;
  --ad-mute: #7a7d8c;
  --ad-line: #eceef3;
  --ad-purple: #7b1fe8;
  margin-top: 48px;
  padding: clamp(10px, 1.6vw, 18px);
  color: var(--ad-ink);
  isolation: isolate;
  background: none;
}
.pf-admin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-admin::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-admin-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ad-line);
}

.pf-admin-tabs,
.pf-admin-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pf-admin-tabs button,
.pf-admin-roles button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ad-ink);
  background: #f5f6fa;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
  transition: background-color 0.25s, color 0.25s;
}
.pf-admin-tabs button[aria-selected=true], .pf-admin-tabs button[aria-pressed=true],
.pf-admin-roles button[aria-selected=true],
.pf-admin-roles button[aria-pressed=true] {
  color: #fff;
  background: var(--ad-purple);
  border-color: var(--ad-purple);
}
.pf-admin-tabs button:focus-visible,
.pf-admin-roles button:focus-visible {
  outline: 2px solid var(--ad-purple);
  outline-offset: 2px;
}
.pf-admin-tabs > span,
.pf-admin-roles > span {
  font-size: 12px;
  color: var(--ad-mute);
}

.pf-admin-roles button {
  padding: 5px 10px;
  font-size: 12px;
}

.pf-admin-shell {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  padding-top: 12px;
}
@media (max-width: 767.98px) {
  .pf-admin-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-admin-nav {
  display: grid;
  grid-template-rows: repeat(8, 54px);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767.98px) {
  .pf-admin-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 54px);
  }
}
.pf-admin-nav li {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  font-size: 11.5px;
  text-align: center;
  color: var(--ad-mute);
  border-radius: 8px;
  transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}
.pf-admin-nav li > i:first-child {
  font-size: 16px;
  color: #9aa0b4;
}
.pf-admin-nav li.is-on {
  color: var(--ad-purple);
  background: #f3ecfe;
}
.pf-admin-nav li.is-on > i:first-child {
  color: var(--ad-purple);
}
.pf-admin-nav li.is-locked {
  opacity: 0.45;
}

.pf-admin-lock {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  color: rgb(255, 84, 104);
}

.pf-admin-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(10px, 1.4vw, 16px);
  background: #f5f6fa;
  border-radius: 18px;
}

.pf-admin-hello {
  display: grid;
}
.pf-admin-hello b {
  font-size: 18px;
  font-weight: 600;
}
.pf-admin-hello em {
  font-style: normal;
  color: var(--ad-purple);
}
.pf-admin-hello small {
  min-height: 1.5em;
  font-size: 12.5px;
  color: var(--ad-mute);
}
@media (max-width: 575.98px) {
  .pf-admin-hello small {
    min-height: 3em;
  }
}

.pf-admin-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 991.98px) {
  .pf-admin-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pf-admin-kpis li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 72px;
  padding: 0 12px;
  background: #fff;
  border-radius: 10px;
  animation: pf-s-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--k) * 0.06s);
}
.pf-admin-kpis small {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--ad-mute);
}
.pf-admin-kpis b {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.pf-admin-kpis em {
  display: grid;
  padding: 4px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--ad-line);
  border-radius: 6px;
}
.pf-admin-kpis em small {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: none;
  color: var(--ad-ink);
}

.pf-admin-kico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 17px;
  color: #fff;
  background: var(--ad-purple);
  border-radius: 50%;
  box-shadow: 0 0 0 4px #f0e6fd;
}

.pf-admin .is-up {
  color: #1a9a62;
}

.pf-admin .is-down {
  color: #e5484d;
}

.pf-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
}
@media (max-width: 991.98px) {
  .pf-admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pf-admin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
}

.pf-admin-card-title {
  font-size: 14px;
  font-weight: 600;
}

.pf-admin-legend {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px;
  height: 28px;
  overflow: hidden;
}
.pf-admin-legend button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  color: var(--ad-ink);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
}
.pf-admin-legend button i {
  width: 18px;
  height: 9px;
  border-radius: 2px;
}
.pf-admin-legend button.is-a i {
  background: #1f4ea8;
}
.pf-admin-legend button.is-b i {
  background: #14957b;
}
.pf-admin-legend button.is-c i {
  background: #e8245b;
}
.pf-admin-legend button[aria-pressed=false] {
  color: var(--ad-mute);
  text-decoration: line-through;
}
.pf-admin-legend button[aria-pressed=false] i {
  opacity: 0.3;
}
.pf-admin-legend button:focus-visible {
  outline: 2px solid var(--ad-purple);
}

.pf-admin-chart {
  display: grid;
  grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr));
  gap: 2px;
  height: 220px;
  padding: 8px 4px 0;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
}

.pf-admin-col {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 18px;
  min-width: 0;
}
.pf-admin-col small {
  font-size: 9.5px;
  text-align: center;
  color: var(--ad-mute);
}

.pf-admin-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  border-right: 1px solid var(--ad-line);
}
.pf-admin-bars i {
  flex: 0 1 8px;
  height: calc(var(--v) * 1%);
  border-radius: 2px 2px 0 0;
  transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  animation: pf-admin-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-admin-bars i.is-a {
  background: #1f4ea8;
}
.pf-admin-bars i.is-b {
  background: #14957b;
}
.pf-admin-bars i.is-c {
  background: #e8245b;
}

@keyframes pf-admin-grow {
  from {
    height: 0;
  }
}
.pf-admin-side {
  display: grid;
  grid-template-rows: repeat(5, 46px);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-admin-side li {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 0.9fr;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--ad-line);
  border-radius: 8px;
  animation: pf-s-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pf-admin-side li.is-stat {
  grid-template-columns: minmax(0, 1fr) auto;
}
.pf-admin-side small {
  display: block;
  font-size: 10px;
  color: var(--ad-mute);
}
.pf-admin-side b {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 575.98px) {
  .pf-admin-side li:not(.is-stat) {
    grid-template-columns: 1.2fr 1fr 0.9fr;
  }
  .pf-admin-side li:not(.is-stat) > span:nth-child(3) {
    display: none;
  }
}

.pf-admin-num {
  text-align: end;
}

.pf-admin-meter {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 4px;
  margin-top: 6px;
  background: var(--ad-line);
  border-radius: 2px;
}
.pf-admin-meter em {
  display: block;
  height: 100%;
  background: var(--ad-purple);
  border-radius: 2px;
}

.pf-preview {
  margin-top: 48px;
  padding: 10px;
  isolation: isolate;
  background: none;
}
.pf-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.035);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  pointer-events: none;
}
.pf-preview::after {
  clip-path: polygon(evenodd, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px, 16px 0, calc(16px + 0.42px) 1px, 1px calc(16px + 0.42px), 1px calc(100% - 16px - 0.42px), calc(16px + 0.42px) calc(100% - 1px), calc(100% - 16px - 0.42px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px - 0.42px), calc(100% - 1px) calc(16px + 0.42px), calc(100% - 16px - 0.42px) 1px, calc(16px + 0.42px) 1px) !important;
}

.pf-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 4px 6px 12px;
}

.pf-preview-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 5px 12px;
  font-family: var(--bs-font-monospace);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
}

.pf-preview-devs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-preview-devs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  transition: background-color 0.25s, color 0.25s;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-preview-devs button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.pf-preview-devs button[aria-pressed=true] {
  color: var(--pf-on-accent);
  background: var(--pf-accent);
}
.pf-preview-devs button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .pf-preview-devs button span {
    display: none;
  }
}

.pf-preview-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--pf-accent);
  text-decoration: none;
}
.pf-preview-open:hover {
  text-decoration: underline;
}

.pf-preview-stage {
  position: relative;
  overflow: hidden;
  height: clamp(420px, 62vw, 760px);
  background: #0b0d1a;
  border-radius: 10px;
}
.pf-preview-stage iframe {
  position: absolute;
  top: 0;
  left: 50%;
  border: 0;
  background: #fff;
  transform-origin: top center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pf-preview-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: saturate(0.85) brightness(0.55);
  transition: opacity 0.4s;
}
.is-live .pf-preview-poster {
  opacity: 0;
  pointer-events: none;
}

.pf-preview-cta {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.pf-preview-cta small {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.is-live .pf-preview-cta {
  display: none;
}

.pf-viz-modes {
  display: flex;
  gap: 4px;
}
.pf-viz-modes i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  color: #fff;
  background: rgba(var(--pf-accent-rgb), 0.35);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.pf-viz-modes i:first-child {
  background: var(--pf-accent);
}

.pf-viz-tiers {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}
.pf-viz-tiers i {
  width: 14px;
  height: calc(12px + var(--k) * 10px);
  background: rgba(var(--pf-accent-rgb), calc(0.35 + var(--k) * 0.3));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}

.pf-viz-fare {
  display: grid;
  gap: 3px;
  width: 48px;
}
.pf-viz-fare i {
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}
.pf-viz-fare i:last-child {
  background: var(--pf-accent);
}

.pf-viz-minibars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.pf-viz-minibars i {
  width: 7px;
  height: calc(var(--v) * 1%);
  background: var(--pf-accent);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom;
}
.pf-viz-minibars i:nth-child(2n) {
  background: #e8245b;
}

.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-modes i,
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-tiers i,
.pf-inview-ready [data-pf-inview]:not(.is-in) .pf-viz-minibars i {
  transform: scale(0.3);
}

.pf-frame-web {
  overflow: hidden;
  background: #0b1a33;
}
.pf-frame-web .pf-screen {
  aspect-ratio: var(--pf-screen-ratio, 1920/920);
}

.pf-frame-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 575.98px) {
  .pf-frame-bar {
    height: 26px;
    padding: 0 10px;
  }
}

.pf-frame-dots {
  display: flex;
  flex: none;
  gap: 8px;
}
.pf-frame-dots i {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}
.pf-frame-dots i:nth-child(1) {
  background: #ff5f57;
}
.pf-frame-dots i:nth-child(2) {
  background: #febc2e;
}
.pf-frame-dots i:nth-child(3) {
  background: #28c840;
}
@media (max-width: 575.98px) {
  .pf-frame-dots {
    gap: 6px;
  }
  .pf-frame-dots i {
    width: 6px;
    height: 6px;
  }
}

.pf-frame-url {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 360px;
  height: 22px;
  margin-inline: auto;
  overflow: hidden;
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.pf-frame-url i {
  font-size: 9px;
}
@media (max-width: 575.98px) {
  .pf-frame-url {
    height: 16px;
    font-size: 9px;
  }
}

.pf-tour-ready .pf-tour-view {
  width: min(100%, (var(--pf-stage-h) - 48px - 36px - 46px) * var(--pf-screen-aspect, 2.087));
  margin-inline: auto;
}
@media (max-width: 991.98px) {
  .pf-tour-ready .pf-tour-view {
    width: 100%;
  }
}

.pf-tour:not(.pf-tour-ready) .pf-frame-web .pf-screen {
  aspect-ratio: auto;
}

.pf-tour:not(.pf-tour-ready) .pf-shot-modal {
  aspect-ratio: var(--pf-screen-ratio, 1920/920);
}

/*# sourceMappingURL=portfolioWeb.css.map */