.wf-page {
  --wf-glass-card: color-mix(in srgb, var(--surface) 46%, transparent);
  --wf-glass-card-strong: color-mix(in srgb, var(--surface-2) 48%, transparent);
  --wf-glass-edge: color-mix(in srgb, #aa91ff 38%, var(--line));
}

.wf-page .nav {
  inset: 10px 12px auto;
  height: 66px;
  border: 1px solid color-mix(in srgb, #a78bfa 21%, var(--line));
  border-radius: 23px;
  background: color-mix(in srgb, var(--bg) 48%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
  box-shadow: 0 15px 45px #00000012, inset 0 1px 0 #ffffff12;
  overflow: visible;
}

.wf-page .nav-inner {
  min-height: 66px;
}

.wf-page .nav-links a {
  padding: 9px 12px;
  border-radius: 999px;
}

.wf-page .nav-links a::after {
  display: none;
}

.wf-page .nav-links a:hover,
.wf-page .nav-links a.active {
  background: color-mix(in srgb, #9476ff 15%, transparent);
}

.wf-page .theme-toggle,
.wf-page .menu-toggle {
  border-radius: 15px;
}

.wf-page .mobile-menu {
  top: 84px;
  right: 12px;
  left: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #a78bfa 36%, var(--line));
  border-radius: 27px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(32px) saturate(170%);
  backdrop-filter: blur(32px) saturate(170%);
  box-shadow: 0 30px 85px #0000002b, inset 0 1px 0 #ffffff14;
  overflow: hidden;
}

.wf-page .mobile-menu a {
  min-height: 48px;
  padding: 12px 15px;
  border-radius: 17px;
}

.wf-page .mobile-menu a:hover,
.wf-page .mobile-menu a:focus-visible,
.wf-page .mobile-menu a[aria-current="page"] {
  background: color-mix(in srgb, #9878ff 17%, transparent);
  border-color: color-mix(in srgb, #a78bfa 25%, transparent);
}

.wf-page select,
.wf-page .cf-ai-input,
.wf-page .cf-ai-query-field,
.wf-page .wf-fit textarea,
.wf-page .wf-fit input:not([type="checkbox"]),
.wf-page .wp-select {
  border-radius: 16px;
}

.wf-page .cf-ai-dashboard .cf-ai-select-wrap select,
.wf-page .wf-fit select,
.wf-page .wx-node select {
  border-radius: 15px;
}

.wf-page .wp-select {
  border-radius: 14px;
}

.wf-page .cf-ai-select-wrap {
  border-radius: 16px;
}

.wf-page .wf-log,
.wf-page .wf-log summary,
.wf-page details,
.wf-page details>summary {
  border-radius: 18px;
}

.wf-page [role="menu"],
.wf-page [role="listbox"],
.wf-page .dropdown-menu,
.wf-page .menu-popover,
.wf-page [data-dropdown-menu] {
  border: 1px solid color-mix(in srgb, #a78bfa 32%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
  box-shadow: 0 22px 60px #00000020, inset 0 1px 0 #ffffff10;
  overflow: hidden;
}

.wf-page .wf-work-card,
.wf-page .wx-story-card,
.wf-page .wp-item,
.wf-page .wx-node .wf-panel,
.wf-page .cf-ai-kpi,
.wf-page .cf-ai-panel,
.wf-page .wf-fit,
.wf-page .wf-scope>div {
  border-color: color-mix(in srgb, var(--line) 55%, #a78bfa 45%);
  background-color: var(--wf-glass-card);
  -webkit-backdrop-filter: blur(25px) saturate(150%);
  backdrop-filter: blur(25px) saturate(150%);
  box-shadow: 0 22px 66px #00000013, inset 0 1px 0 #ffffff10;
}

.wf-page .wf-work-card {
  border-radius: 27px;
}

.wf-page .wx-story-card {
  border-radius: 26px;
}

.wf-page .wp-item {
  border-radius: 31px;
}

.wf-page .wx-node .wf-panel {
  border-radius: 21px;
}

.wf-page .cf-ai-kpi,
.wf-page .cf-ai-panel {
  border-radius: 19px;
}

.wf-page .wf-fit {
  border-radius: 31px;
}

.wf-page .wf-work-card .wf-work-copy {
  background: color-mix(in srgb, var(--surface) 30%, transparent);
}

.wf-page .wf-work-card .wf-work-visual {
  background-color: color-mix(in srgb, var(--surface-2) 34%, transparent);
}

.wf-page .wx-story-card-copy {
  background: color-mix(in srgb, var(--surface) 37%, transparent);
}

.wf-page .wp-item {
  background: radial-gradient(ellipse at 15% 8%, color-mix(in srgb, var(--wp-glow) 15%, transparent), transparent 62%), color-mix(in srgb, var(--surface) 43%, transparent);
}

.wf-page .wx-node .wf-panel {
  background: radial-gradient(ellipse at 12% 0%, #9878ff12, transparent 70%), color-mix(in srgb, var(--surface) 44%, transparent);
}

.wf-page .wx-node.wx-node-ai .wf-panel {
  background: radial-gradient(ellipse at 12% 0%, #9878ff23, transparent 72%), color-mix(in srgb, var(--surface) 43%, transparent);
}

.wf-page .cf-ai-kpi {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 43%, transparent), color-mix(in srgb, var(--surface-2) 31%, transparent));
}

.wf-page .cf-ai-panel {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 45%, transparent), color-mix(in srgb, var(--surface-2) 31%, transparent));
}

.wf-page .cf-ai-dashboard {
  border-radius: 31px;
}

.wf-page .wx-system-shell,
.wf-page .wf-cashier-shell {
  border-radius: 29px;
  background: color-mix(in srgb, var(--surface) 53%, transparent);
}

.wf-page .wx-system-status,
.wf-page .wf-log {
  border: 1px solid color-mix(in srgb, var(--line) 65%, #a78bfa 35%);
}

.wf-page .wf-work-card,
.wf-page .wx-story-card,
.wf-page .wp-item,
.wf-page .wx-node .wf-panel,
.wf-page .cf-ai-kpi,
.wf-page .cf-ai-panel,
.wf-page .wf-fit,
.wf-page .wf-scope>div {
  position: relative;
  transition: transform .34s cubic-bezier(.2, .75, .25, 1), border-color .3s ease,
    box-shadow .34s ease, background-color .3s ease, filter .34s ease;
  will-change: transform;
}

.wf-page .wf-work-card .wf-work-visual::before {
  transition: transform .5s ease, opacity .4s ease;
}

.wf-page .wf-story-image img,
.wf-page .wx-story-image img {
  transition: transform .55s cubic-bezier(.2, .75, .25, 1), filter .4s ease;
}

.wf-page .wp-device {
  transition: transform .35s cubic-bezier(.2, .75, .25, 1), filter .35s ease;
}

@media (hover: hover) and (pointer: fine) {

  .wf-page .wf-work-card:hover,
  .wf-page .wf-work-card:focus-within {
    transform: translate3d(0, -8px, 0) scale(1.006);
    border-color: color-mix(in srgb, var(--work-accent, #a78bfa) 66%, var(--line));
    box-shadow: 0 32px 88px #00000028, 0 0 0 1px color-mix(in srgb, var(--work-accent, #a78bfa) 20%, transparent), inset 0 1px 0 #ffffff1a;
  }

  .wf-page .wf-work-card:hover .wf-work-visual::before {
    transform: scale(1.18);
    opacity: 1;
  }

  .wf-page .wx-story-card:hover,
  .wf-page .wx-story-card:focus-visible {
    transform: translate3d(0, -8px, 0);
    border-color: color-mix(in srgb, #a78bfa 72%, var(--line));
    box-shadow: 0 30px 78px #00000026, 0 0 0 1px #a78bfa28, inset 0 1px 0 #ffffff18;
  }

  .wf-page .wx-story-card:hover .wx-story-image img {
    transform: scale(1.065);
    filter: saturate(1.12) contrast(1.025);
  }

  .wf-page .wp-item:hover {
    transform: translate3d(0, -7px, 0);
    border-color: color-mix(in srgb, var(--wp-glow, #a78bfa) 58%, var(--line));
    box-shadow: 0 34px 85px #00000020, 0 0 40px color-mix(in srgb, var(--wp-glow, #a78bfa) 12%, transparent), inset 0 1px 0 #ffffff18;
  }

  .wf-page .wp-item:hover .wp-device {
    transform: translateY(-3px) scale(1.012);
    filter: drop-shadow(0 15px 26px color-mix(in srgb, var(--wp-glow, #a78bfa) 18%, transparent));
  }

  .wf-page .wx-node .wf-panel:hover,
  .wf-page .wx-node .wf-panel:focus-within {
    transform: translate3d(0, -5px, 0);
    border-color: color-mix(in srgb, #a78bfa 68%, var(--line));
    box-shadow: 0 24px 58px #00000022, 0 0 0 1px #9b7bff18, inset 0 1px 0 #ffffff15;
  }

  .wf-page .cf-ai-kpi:hover,
  .wf-page .cf-ai-panel:hover,
  .wf-page .wf-scope>div:hover {
    transform: translate3d(0, -4px, 0);
    border-color: color-mix(in srgb, #a78bfa 66%, var(--line));
    box-shadow: 0 22px 50px #0000001c, inset 0 1px 0 #ffffff18;
  }

  .wf-page .wf-fit:hover {
    border-color: color-mix(in srgb, #a78bfa 52%, var(--line));
  }
}

.wf-page .wp-platform-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}

.wf-page .wp-platform-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 53px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, #a78bfa 38%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 #ffffff10;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.wf-page .wp-platform-badge>svg {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
}

.wf-page .wp-platform-badge>span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wf-page .wp-platform-badge small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
}

.wf-page .wp-platform-badge strong {
  display: block;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.wf-page .wp-platform-note {
  display: block;
  margin: -9px 0 15px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .wf-page .wp-platform-badge:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, #a78bfa 68%, var(--line));
    background: color-mix(in srgb, #8a5cff 9%, var(--surface));
  }
}

html[data-theme="light"] .wf-page {
  --wf-glass-card: color-mix(in srgb, #ffffff 51%, transparent);
  --wf-glass-card-strong: color-mix(in srgb, #ffffff 57%, transparent);
}

html[data-theme="light"] .wf-page .nav {
  background: color-mix(in srgb, #faf9ff 49%, transparent);
}

html[data-theme="light"] .wf-page .mobile-menu {
  background: color-mix(in srgb, #ffffff 59%, transparent);
}

html[data-theme="light"] .wf-page .wf-work-card {
  background: color-mix(in srgb, #ffffff 49%, transparent);
}

html[data-theme="light"] .wf-page .wx-story-card {
  background: color-mix(in srgb, #ffffff 47%, transparent);
}

html[data-theme="light"] .wf-page .wp-item {
  background: radial-gradient(ellipse at 15% 8%, color-mix(in srgb, var(--wp-glow) 9%, transparent), transparent 62%), color-mix(in srgb, #ffffff 51%, transparent);
}

html[data-theme="light"] .wf-page .wx-node .wf-panel {
  background: color-mix(in srgb, #ffffff 49%, transparent);
}

html[data-theme="light"] .wf-page .wx-node.wx-node-ai .wf-panel {
  background: radial-gradient(ellipse at 12% 0%, #9878ff17, transparent 72%), color-mix(in srgb, #ffffff 47%, transparent);
}

html[data-theme="light"] .wf-page .cf-ai-kpi {
  background: color-mix(in srgb, #ffffff 48%, transparent);
}

html[data-theme="light"] .wf-page .cf-ai-panel {
  background: linear-gradient(145deg, color-mix(in srgb, #ffffff 50%, transparent), color-mix(in srgb, #f1edff 38%, transparent));
}

html[data-theme="light"] .wf-page .wp-platform-badge {
  background: color-mix(in srgb, #ffffff 52%, transparent);
}

html[data-theme="light"] .wf-page .wp-platform-badge small {
  color: #69647a;
}

@media (max-width: 760px) {
  .wf-page .nav {
    inset: 8px 8px auto;
    height: 66px;
    border-radius: 20px;
  }

  .wf-page .nav-inner {
    min-height: 66px;
  }

  .wf-page .mobile-menu {
    top: 82px;
    right: 8px;
    left: 8px;
    border-radius: 24px;
  }

  .wf-page .wp-platform-badges {
    gap: 7px;
  }

  .wf-page .wp-platform-badge {
    min-height: 49px;
    padding: 7px 8px;
    gap: 7px;
    border-radius: 14px;
  }

  .wf-page .wp-platform-badge>svg {
    width: 20px;
    height: 20px;
  }

  .wf-page .wp-platform-badge strong {
    font-size: 10px;
  }

  .wf-page .wp-platform-badge small {
    font-size: 8px;
  }
}

@media (max-width: 390px) {
  .wf-page .wp-platform-badges {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  .wf-page .wf-work-card,
  .wf-page .wx-story-card,
  .wf-page .wp-item,
  .wf-page .wx-node .wf-panel,
  .wf-page .cf-ai-kpi,
  .wf-page .cf-ai-panel,
  .wf-page .wf-fit,
  .wf-page .wf-scope>div,
  .wf-page .wp-device,
  .wf-page .wp-platform-badge,
  .wf-page .wf-work-card .wf-work-visual::before,
  .wf-page .wx-story-image img {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {

  .wf-page .nav,
  .wf-page .mobile-menu,
  .wf-page .wf-work-card,
  .wf-page .wx-story-card,
  .wf-page .wp-item,
  .wf-page .wx-node .wf-panel,
  .wf-page .cf-ai-kpi,
  .wf-page .cf-ai-panel,
  .wf-page .wf-fit,
  .wf-page .wp-platform-badge {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}