@font-face {
  font-family: Inter;
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* PWA surfaces share one palette, including the standalone offline reader. */
:root {
  --pwa-ink: #f4f4f5;
  --pwa-danger: #ef8b8b;
  --pwa-muted: #a8a8af;
  --pwa-surface: #101012;
  --pwa-hover: #1c1c20;
  --pwa-line: #ffffff17;
  --pwa-accent: #a9bcff;
  --pwa-bg: #000;
  --pwa-shadow: 0 8px 32px #0004;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --pwa-ink: #19191c;
    --pwa-danger: #b3261e;
    --pwa-muted: #626269;
    --pwa-surface: #f6f6f7;
    --pwa-hover: #ebebee;
    --pwa-line: #00000012;
    --pwa-accent: #2644a0;
    --pwa-bg: #fff;
    --pwa-shadow: 0 8px 32px #0000000d;
  }
}
:root[data-theme="light"] {
  --pwa-ink: #19191c;
  --pwa-danger: #b3261e;
  --pwa-muted: #626269;
  --pwa-surface: #f6f6f7;
  --pwa-hover: #ebebee;
  --pwa-line: #00000012;
  --pwa-accent: #2644a0;
  --pwa-bg: #fff;
  --pwa-shadow: 0 8px 32px #0000000d;
}
.kx-pwa-panel {
  display: grid;
  gap: 12px;
  padding: 20px 0;
  color: var(--pwa-ink);
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
}
.kx-pwa-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kx-pwa-heading > svg {
  flex: none;
  color: var(--pwa-accent);
}
.kx-pwa-panel h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.kx-pwa-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pwa-muted);
}
.kx-pwa-panel .kx-pwa-note {
  font-size: 12px;
}
.kx-pwa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.kx-pwa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--pwa-surface);
  color: var(--pwa-ink);
  font: 500 13px/1.4 var(--font-ui, Inter, system-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.kx-pwa-button > svg {
  flex: none;
}
.kx-pwa-button.primary {
  background: #2644a0;
  color: #fff;
}
.kx-pwa-button.quiet {
  background: transparent;
  color: var(--pwa-accent);
}
.kx-pwa-button.neutral {
  background: transparent;
  color: var(--pwa-muted);
}
.kx-pwa-button:focus-visible,
.kx-offline-open:focus-visible {
  outline: 2px solid var(--pwa-accent);
  outline-offset: 3px;
}
.kx-pwa-button:disabled {
  cursor: default;
  opacity: 0.55;
}
@media (hover: hover) {
  .kx-pwa-button:hover:not(:disabled) {
    background: var(--pwa-hover);
  }
  .kx-pwa-button.primary:hover:not(:disabled) {
    background: #203a8b;
  }
  .kx-pwa-button.quiet:hover:not(:disabled),
  .kx-pwa-button.neutral:hover:not(:disabled) {
    background: var(--pwa-hover);
  }
  .kx-offline-open:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
@media (pointer: coarse) {
  .kx-pwa-button {
    min-height: 44px;
  }
}
.kx-pwa-panel p[role="alert"] {
  color: var(--pwa-danger);
}
:root[data-theme="light"] .kx-pwa-panel p[role="alert"] {
  color: #b3261e;
}
.kx-pwa-save {
  padding: 16px 0;
  border-top: 1px solid var(--pwa-line);
}
.kx-pwa-save .kx-pwa-button {
  justify-content: flex-start;
  padding-left: 0;
}
.kx-pwa-save .kx-pwa-button:hover:not(:disabled) {
  background: transparent;
}
.kx-pwa-status {
  position: fixed;
  z-index: 200;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(calc(100vw - 32px), 420px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  padding: 14px 16px 12px;
  border: 1px solid var(--pwa-line);
  border-radius: 14px;
  background: var(--pwa-bg);
  color: var(--pwa-ink);
  box-shadow: var(--pwa-shadow);
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
}
.kx-pwa-status > svg {
  color: var(--pwa-accent);
  margin-top: 2px;
}
.kx-pwa-status p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.kx-pwa-status .kx-pwa-actions {
  grid-column: 2;
  margin-top: 10px;
}
.kx-offline-page {
  margin: 0;
  background: var(--pwa-bg);
  color: var(--pwa-ink);
  font:
    15px/1.65 Inter,
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
.kx-offline-page *,
.kx-offline-page *::before,
.kx-offline-page *::after {
  box-sizing: border-box;
}
.kx-offline-page main {
  max-width: 656px;
  margin: auto;
  padding: calc(28px + env(safe-area-inset-top)) 20px
    calc(40px + env(safe-area-inset-bottom));
}
.kx-offline-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 28px;
}
.kx-pwa-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.kx-offline-page h1 {
  margin: 0 0 12px;
  font-size: clamp(23px, 4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.kx-offline-page #detail,
.kx-offline-page #hint {
  max-width: 55ch;
  margin: 0;
  color: var(--pwa-muted);
  font-size: 13px;
  line-height: 1.7;
}
.kx-offline-page #notice {
  color: var(--pwa-accent);
  font-size: 13px;
}
.kx-offline-page #notice:empty {
  display: none;
}
.kx-offline-page nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 32px;
}
.kx-offline-page h2 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.kx-offline-page #library-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pwa-muted);
  margin-bottom: 12px;
}
.kx-offline-page #hint {
  margin-bottom: 16px;
  font-size: 12px;
}
.kx-offline-empty {
  padding: 24px 20px;
  border-radius: 14px;
  background: var(--pwa-surface);
  color: var(--pwa-muted);
  font-size: 14px;
  text-align: center;
}
.kx-offline-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pwa-line);
}
.kx-offline-open {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pwa-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.kx-offline-open strong {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.kx-offline-open small {
  font-size: 12px;
  color: var(--pwa-muted);
}
.kx-offline-remove {
  flex: none;
  width: 40px;
  padding: 8px;
}
.kx-offline-page #article-title {
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.35;
}
.kx-offline-page #creator {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--pwa-muted);
}
.kx-offline-page #body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.85;
}
.kx-offline-page [hidden] {
  display: none !important;
}
@media (min-width: 700px) {
  .kx-offline-page main {
    padding-top: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kx-pwa-button {
    transition: none;
  }
}

.kx-pwa-spin {
  animation: kx-pwa-spin 1s linear infinite;
}
@keyframes kx-pwa-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kx-pwa-spin {
    animation: none;
  }
}
@media (pointer: coarse) {
  .kx-offline-remove {
    width: 44px;
  }
}

.kx-pwa-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  color: var(--pwa-ink);
  border-radius: 10px;
}
.kx-pwa-back:focus-visible {
  outline: 2px solid var(--pwa-accent);
  outline-offset: 2px;
}