:root {
  color-scheme: light dark;
  --pk-safe-top: env(safe-area-inset-top, 0px);
  --pk-safe-right: env(safe-area-inset-right, 0px);
  --pk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pk-safe-left: env(safe-area-inset-left, 0px);
  --pk-tabbar-row: 46px;
  --pk-tabbar-pad-top: 8px;
  --pk-tabbar-pad-bottom: 24px;
  --pk-tabbar-h: 84px;
  --pk-header-h: 48px;
  --pk-top-h: calc(var(--pk-header-h) + var(--pk-safe-top));
  --pk-composer-h: 72px;
  --pk-kb: 0px;
  --pk-lift: 0px;
  --pk-bar: var(--pk-tabbar-h);
  --pk-comp: 0px;
  --pk-font:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    sans-serif;
  --pk-text-xs: 11px;
  --pk-text-sm: 13px;
  --pk-text-md: 15px;
  --pk-text-lg: 17px;
  --pk-text-xl: 20px;
  --pk-text-2xl: 24px;
  --pk-line: 1.4;
  --pk-s1: 4px;
  --pk-s2: 8px;
  --pk-s3: 12px;
  --pk-s4: 16px;
  --pk-s5: 24px;
  --pk-s6: 32px;
  --pk-r-sm: 8px;
  --pk-r-md: 12px;
  --pk-r-lg: 18px;
  --pk-r-pill: 999px;
  --pk-tap: 44px;
  --pk-bg: #ffffff;
  --pk-surface: #f5f5f4;
  --pk-fg: #1c1917;
  --pk-muted: #78716c;
  --pk-border: rgba(0, 0, 0, 0.1);
  --pk-accent: #2563eb;
  --pk-accent-soft: rgba(37, 99, 235, 0.14);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --pk-accent-soft: color-mix(in srgb, var(--pk-accent) 14%, transparent);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --pk-bg: #141414;
    --pk-surface: #1f1f1f;
    --pk-fg: #f5f5f4;
    --pk-muted: #a8a29e;
    --pk-border: rgba(255, 255, 255, 0.12);
  }
}
:root[data-keyboard=open] {
  --pk-bar: 0px;
  --pk-lift: var(--pk-kb);
}
:root:not(:has(.pk-tabbar:not([hidden], [hidden] .pk-tabbar))) {
  --pk-bar: 0px;
}
:root[data-pk-bar=none] {
  --pk-bar: 0px;
}
:root:has(.pk-composer:not([hidden], [hidden] .pk-composer)) {
  --pk-comp: var(--pk-composer-h);
}
:root[data-theme=light] {
  color-scheme: light;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --pk-bg: #141414;
  --pk-surface: #1f1f1f;
  --pk-fg: #f5f5f4;
  --pk-muted: #a8a29e;
  --pk-border: rgba(255, 255, 255, 0.12);
}
html {
  overscroll-behavior-y: none;
  scroll-padding-top: calc(var(--pk-top-h) + 8px);
  scroll-padding-bottom: calc(var(--pk-bar) + var(--pk-comp) + 8px);
}
[hidden] {
  display: none !important;
}
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: var(--pk-bg);
  color: var(--pk-fg);
  font-family: var(--pk-font);
  font-size: var(--pk-text-md);
  line-height: var(--pk-line);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior-y: none;
}
input,
textarea,
select {
  font-size: max(16px, 1em);
}
input,
textarea,
[contenteditable] {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}
.pk-app {
  min-height: 100vh;
  padding-top: var(--pk-top-h);
  padding-bottom: calc(var(--pk-bar) + var(--pk-comp));
  padding-left: var(--pk-safe-left);
  padding-right: var(--pk-safe-right);
  box-sizing: border-box;
}
.pk-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  box-sizing: border-box;
  min-height: calc(var(--pk-header-h) + var(--pk-safe-top));
  padding-top: var(--pk-safe-top);
  display: flex;
  align-items: center;
  gap: var(--pk-s2);
  padding-inline: calc(var(--pk-s3) + var(--pk-safe-left)) calc(var(--pk-s3) + var(--pk-safe-right));
  background: var(--pk-bg);
  border-bottom: 0.5px solid var(--pk-border);
}
.pk-main {
  overflow-x: clip;
  overscroll-behavior-x: none;
}
.pk-main::after {
  content: "";
  display: block;
  height: var(--pk-s4);
}
.pk-app:not(:has(.pk-header)) {
  padding-top: var(--pk-safe-top);
}
.pk-pane {
  position: fixed;
  top: var(--pk-top-h);
  left: 0;
  right: 0;
  bottom: calc(var(--pk-bar) + var(--pk-comp) + var(--pk-lift));
  padding-left: var(--pk-safe-left);
  padding-right: var(--pk-safe-right);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.pk-app:not(:has(.pk-header)) .pk-pane {
  top: var(--pk-safe-top);
}
.pk-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  height: var(--pk-tabbar-h);
  padding: var(--pk-tabbar-pad-top) calc(4px + var(--pk-safe-right)) var(--pk-tabbar-pad-bottom) calc(4px + var(--pk-safe-left));
  box-sizing: border-box;
  background: var(--pk-bg);
  border-top: 0.5px solid var(--pk-border);
}
.pk-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: var(--pk-tap);
  height: var(--pk-tabbar-row);
  border: 0;
  background: none;
  color: var(--pk-muted);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.2;
  cursor: pointer;
}
.pk-tab svg {
  width: 22px;
  height: 22px;
}
.pk-tab[aria-current=page] {
  color: var(--pk-accent);
}
:root[data-keyboard=open] .pk-tabbar {
  display: none;
}
.pk-composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--pk-bar) + var(--pk-lift));
  z-index: 20;
  box-sizing: border-box;
  padding: var(--pk-s2) calc(var(--pk-s3) + var(--pk-safe-right)) var(--pk-tabbar-pad-bottom) calc(var(--pk-s3) + var(--pk-safe-left));
  background: var(--pk-bg);
  border-top: 0.5px solid var(--pk-border);
}
:root[data-keyboard=open] .pk-composer {
  padding-bottom: var(--pk-s2);
}
:root:not([data-pk-bar=none]):has(.pk-tabbar:not([hidden], [hidden] .pk-tabbar)) .pk-composer {
  padding-bottom: var(--pk-s2);
}
@media (hover: none) {
  .pk-hover-reveal {
    opacity: 1 !important;
  }
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pk-safe-top);
  background: var(--pk-bg);
  z-index: 1000;
  pointer-events: none;
}
.pk-sheet-bottom {
  padding-bottom: calc(var(--pk-s4) + var(--pk-safe-bottom));
}
.pk-update {
  position: relative;
  display: none;
  align-items: center;
  height: 28px;
  padding: 0 var(--pk-s3);
  border: 0;
  border-radius: var(--pk-r-pill);
  background: var(--pk-accent);
  color: #fff;
  font: inherit;
  font-size: var(--pk-text-sm);
  font-weight: 600;
}
.pk-update[data-ready] {
  display: inline-flex;
}
.pk-update::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}