/* Shared customer-facing identity. Loaded after each surface's layout rules. */
@font-face {
  font-family: 'Manrope Display';
  src: url('/fonts/manrope-800.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --nav: 64px;
}
body:is(.public-site, [data-application='studio'], [data-application='admin']) {
  --bg: var(--ui-bg);
  --panel: var(--ui-panel);
  --surface: var(--ui-surface);
  --hover: var(--ui-hover);
  --primary: var(--ui-accent);
  --primary-hover: var(--ui-accent-hover);
  --tint: var(--ui-tint);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --border: var(--ui-border);
  font-family: var(--ui-font-body);
  background: var(--ui-bg);
  color: var(--ui-text);
  scrollbar-color: #766b8c var(--ui-bg);
  caret-color: var(--ui-focus);
}
:is(.public-site, [data-application='studio'], [data-application='admin']) :is(h1, h2, h3) {
  font-family: var(--ui-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
:is(.public-site, [data-application='studio'], [data-application='admin']) ::selection {
  color: var(--ui-panel);
  background: var(--ui-focus);
}
:is(.public-site, [data-application='studio'], [data-application='admin']) :focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
:is(.public-site, [data-application='studio'], [data-application='admin']) .brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 44px;
  color: var(--ui-text);
  white-space: nowrap;
  text-decoration: none;
}
.brand .brand-name {
  font-family: var(--ui-font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.brand .brandmark {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--ui-focus);
}
.brand small {
  display: block;
  font-family: var(--ui-font-body);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ui-muted);
}
body .app-header,
.public-site .public-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ui-bg);
  border-bottom: 1px solid var(--ui-divider);
}
.public-site .public-header,
.app-header .topbar {
  height: 64px;
  min-height: 64px;
  gap: 20px;
  padding-block: 0;
  align-items: center;
}
.public-site .public-header nav,
.app-header .navlinks {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.public-site .public-header nav a,
.app-header :is(.navlinks, .mobile-nav) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--ui-radius);
  color: var(--ui-muted);
  text-decoration: none;
  transition:
    color var(--ui-motion-fast) var(--ui-ease),
    background-color var(--ui-motion-fast) var(--ui-ease);
}
.public-site .public-header nav a:hover,
.app-header :is(.navlinks, .mobile-nav) a:hover {
  color: var(--ui-text);
  background: var(--ui-hover);
}
.public-site .public-header nav a[aria-current],
.app-header :is(.navlinks, .mobile-nav) a[aria-current] {
  color: var(--ui-focus);
  background: var(--ui-tint);
  font-weight: 600;
}
.app-header .account-nav {
  margin-left: 0;
}
/* Full text actions share a shape; circular media controls retain their affordance. */
:is(.public-site, [data-application='studio'], [data-application='admin'])
  :is(
    .button,
    button.primary,
    button.outline,
    .home-action-primary,
    .editorial-primary,
    .discovery-controls button,
    .account-menu > summary
  ) {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius);
  font-family: var(--ui-font-body);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  transition:
    background-color var(--ui-motion-fast) var(--ui-ease),
    border-color var(--ui-motion-fast) var(--ui-ease),
    color var(--ui-motion-fast) var(--ui-ease);
}
:is(.public-site, [data-application='studio'], [data-application='admin'])
  :is(.primary, .home-action-primary, .editorial-primary) {
  background: var(--ui-accent);
  color: var(--ui-text);
  border-color: transparent;
}
:is(.public-site, [data-application='studio'], [data-application='admin'])
  :is(.primary, .home-action-primary, .editorial-primary):hover {
  background: var(--ui-accent-hover);
  color: var(--ui-text);
}
:is(.public-site, [data-application='studio'], [data-application='admin'])
  :is(.outline, .discovery-controls button) {
  border-color: var(--ui-border);
}
:is(.public-site, [data-application='studio'], [data-application='admin'])
  :is(button:disabled, [aria-disabled='true']) {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
:is(.public-site, [data-application='studio'], [data-application='admin'])
  :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select) {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius);
  border-color: var(--ui-border);
  font-family: var(--ui-font-body);
  caret-color: var(--ui-focus);
}
:is(.public-site, [data-application='studio'], [data-application='admin'])
  :is(input, textarea)::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}
body[data-application='studio'] :is(.char-card, .account-menu-panel, dialog) {
  border-radius: var(--ui-panel-radius);
  border-color: var(--ui-border);
}
.public-site :is(.public-footer),
body[data-application='studio'] .page-footer {
  border-top: 1px solid var(--ui-divider);
  font-family: var(--ui-font-body);
  font-size: 14px;
  color: var(--ui-muted);
}
#age-gate {
  font-family: var(--ui-font-body);
  border-color: var(--ui-border);
  border-radius: var(--ui-panel-radius);
}
#age-gate [data-age-confirm] {
  background: var(--ui-accent);
  border-color: transparent;
}
#age-gate [data-age-confirm]:hover {
  background: var(--ui-accent-hover);
}
#age-gate button:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
.startup-mark-base {
  fill: none;
  stroke: var(--ui-border);
}
.startup-mark-trace {
  stroke: var(--ui-focus);
}
@media (min-width: 761px) and (max-width: 1000px) {
  .public-site .public-header {
    gap: 12px;
  }
  .public-site .public-header nav {
    gap: 0;
  }
  .public-site .public-header nav a {
    padding-inline: 8px;
    font-size: 13px;
  }
  .public-site .public-header nav a svg {
    display: none;
  }
}
@media (max-width: 760px) {
  :root {
    --nav: 118px;
  }
  .public-site .public-header {
    height: 118px;
    min-height: 118px;
    flex-wrap: wrap;
    gap: 0 12px;
  }
  .public-site .public-header > .primary {
    margin-left: auto;
  }
  .public-site .public-header nav {
    order: 3;
    flex: 1 0 100%;
    height: 54px;
    margin: 0;
    justify-content: space-between;
    gap: 0;
  }
  .public-site .public-header nav a {
    flex-direction: column;
    min-width: 54px;
    gap: 2px;
    padding: 4px 8px;
    font-size: 12px;
  }
  .app-header .navlinks {
    display: none;
  }
  .app-header .account-nav {
    margin-left: auto;
  }
  .app-header .mobile-nav {
    display: flex;
    height: 54px;
    padding-inline: var(--site-content-inset);
    justify-content: space-between;
    gap: 0;
    font-size: 12px;
  }
  .app-header .mobile-nav a {
    flex-direction: column;
    min-width: 54px;
    gap: 2px;
    padding: 4px 8px;
  }
  .brand small {
    display: none;
  }
  :is(.public-site, [data-application='studio'], [data-application='admin']) .brand-name {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.public-site, [data-application='studio'], [data-application='admin']) *,
  :is(.public-site, [data-application='studio'], [data-application='admin']) *::before,
  :is(.public-site, [data-application='studio'], [data-application='admin']) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}