/* Pekan spatial material: shared by the shell and every application. */
@import url("brand-type.css?v=brand-phone.1");
:root {
  color-scheme: light;
  --pk-ground: #f3f8fc;
  --pk-accent: #5956e9;
  --pk-accent-deep: #423ef3;
  --pk-accent-light: #838aff;
  --pk-brand-purple: #5956e9;
  --pk-brand-purple-deep: #423ef3;
  --pk-brand-purple-luminous: #838aff;
  --pk-brand-sunshine: #ffdc60;
  --pk-text: #163047;
  --pk-text-inverse: #fff;
  --pk-glass-surface: rgba(250, 253, 255, .9);
  --pk-glass-panel: rgba(255, 255, 255, .9);
  --pk-glass-border: rgba(80, 112, 135, .22);
  --pk-glass-hairline: rgba(60, 90, 115, .12);
  --pk-glass-highlight: rgba(255, 255, 255, .48);
  --pk-glass-shadow: 0 24px 70px rgba(23, 61, 90, .19), 0 8px 20px rgba(23, 61, 90, .08), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .06);
  --pk-glass-blur: blur(32px) saturate(125%);
  --pk-radius-window: 16px;
  --pk-radius-panel: 16px;
  --pk-radius-control: 10px;
  --pk-ease: cubic-bezier(.23, 1, .32, 1);
  --pk-duration: 180ms;
}
.pk-spatial-glass {
  color: var(--pk-text);
  background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(159, 222, 244, .06)), var(--pk-glass-surface);
  border: 1px solid var(--pk-glass-border);
  border-radius: var(--pk-radius-window);
  box-shadow: var(--pk-glass-shadow);
  -webkit-backdrop-filter: var(--pk-glass-blur);
  backdrop-filter: var(--pk-glass-blur);
}
.pk-spatial-glass :focus-visible {
  outline: 2px solid var(--pk-text);
  outline-offset: 3px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --pk-glass-surface: #f5faff; --pk-glass-panel: rgba(255, 255, 255, .1); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --pk-glass-surface: #f5faff; --pk-glass-blur: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --pk-duration: 0ms; }
}