:root {
  color-scheme: light;
  --kin-background: #faf9f5;
  --kin-foreground: #263d33;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    color-scheme: dark;
    --kin-background: #19251f;
    --kin-foreground: #e5eee7;
  }
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --kin-background: #19251f;
  --kin-foreground: #e5eee7;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--kin-background);
  color: var(--kin-foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#kin-viewport {
  position: fixed;
  top: var(--kin-viewport-top, 0px);
  left: 0;
  width: 100%;
  height: 100%;
  height: var(--kin-viewport-height, 100dvh);
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
:root[data-keyboard="open"] #kin-viewport { padding-bottom: 0; }
/* iOS standalone black-translucent status bars use light icons. Give only the
   hardware status area a dark backing, including when the app uses light mode. */
#kin-viewport::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #19251f;
  pointer-events: none;
}
#flutter-host { position: relative; width: 100%; height: 100%; }
#kin-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  text-align: center;
  gap: 16px;
}
#kin-loading button {
  color: var(--kin-background);
  background: var(--kin-foreground);
  border: 0;
  border-radius: 12px;
  padding: 14px 24px;
  font: inherit;
  cursor: pointer;
}