:root {
  --keyolie-coral: #fc896f;
  --keyolie-action: var(--keyolie-coral);
  --keyolie-action-hover: #ffa18c;
  --keyolie-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.keyolie-wordmark, .keyolie-mark { display: block; object-fit: contain; flex: none; }
.keyolie-wordmark { width: 106px; height: auto; }
.keyolie-mark { width: 44px; height: 44px; }
.auth-brand .keyolie-wordmark { width: 132px; }
html[data-theme="dark"] .brand .keyolie-wordmark,
html[data-theme="dark"] .dp-auth .keyolie-wordmark { content: url("/keyolie-light.png?v=2"); }
html[data-theme="dark"] .final-cta .keyolie-mark { content: url("/k-light.png"); }

body { font-family: var(--keyolie-font); }
main h1, main h2, .dp-auth h1 { letter-spacing: -.04em; }
.site-header .primary, .hero .primary, .final-cta .primary, .pricing .primary,
.dp-auth .auth-submit, .main button.primary, .main .btn-primary {
  background: var(--keyolie-action);
  color: #231611;
  box-shadow: none;
}
.site-header .primary:hover, .hero .primary:hover, .final-cta .primary:hover,
.pricing .primary:hover, .dp-auth .auth-submit:hover, .main button.primary:hover,
.main .btn-primary:hover { background: var(--keyolie-action-hover); }

html[data-theme="dark"] {
  --keyolie-action: var(--keyolie-coral);
  --keyolie-action-hover: #ffa18c;
}
.site-header { box-shadow: 0 10px 35px #2820210d; }
@media (max-width: 480px) {
  .site-header .keyolie-wordmark { width: 86px; }
}
@media (max-width: 850px) {
  .identity .keyolie-wordmark { width: 86px; }
}

.site-header a:focus-visible, .brand:focus-visible,
.dp-auth .auth-submit:focus-visible, .main .btn-primary:focus-visible {
  outline-color: var(--keyolie-coral);
}

.nav-bullet, .nav-item.active::after { background-color: var(--keyolie-coral); }
.platform-admin-dialog { width: min(56rem, calc(100% - 2rem)); max-height: 85vh; }
.platform-admin-table { overflow-x: auto; }
.platform-admin-table th, .platform-admin-table td { padding: .5rem; text-align: left; }
.platform-admin-dialog li { margin-block: .45rem; }

#platformAdminBtn {
  flex: 0 0 auto;
  width: auto;
  padding-inline: .75rem;
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
}

#editorWrap .editor { width: min(960px, calc(100vw - 24px)); }
#editorWrap .editor-scroll > .ai-assistant { margin-bottom: 24px; }

.site-header .brand-header-mark, .identity .brand-header-mark {
  width: 24px;
  height: 24px;
}
html[data-theme="dark"] .site-header .brand-header-mark { content: url("/k-light.png"); }
@media (max-width: 850px) {
  .identity .brand-header-mark { display: none; }
}