/* 对外介绍页与角色预览的简约视觉。 */
:root {
  --paper: #fff;
  --surface: #fff;
  --card: #fff;
  --sun: #31596d;
  --ink: #20282d;
  --muted: #6b757b;
  --line: #e2e6e8;
  --ochre: #31596d;
}

body {
  color: var(--ink);
  background: #fff;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

body :where(h1, h2, h3, h4, strong) {
  font-weight: 700;
}

body :where(p, dd, small) {
  color: var(--muted);
  font-weight: 300;
}

.demo-header,
.experience-header {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: none;
}

.brand-mark,
.product-logo {
  border: 1px solid #d7e0e4 !important;
  border-radius: 3px !important;
  color: var(--sun) !important;
  background: #f5f8f9 !important;
}

.overview-header-label,
.architecture-caption {
  display: none !important;
}

.overview-page .overview-intro,
.overview-page .overview-section,
.experience-main {
  background: #fff;
}

.overview-page :where(.system-architecture, .overview-role, .public-summary),
.preview-pane,
.desktop-frame,
.phone-frame {
  border-color: var(--line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  background: #fff !important;
}

.architecture-module,
.architecture-module[aria-pressed="true"],
.overview-role-identity,
.role-scope-note,
.architecture-foundation {
  border-color: var(--line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.architecture-module[aria-pressed="true"] {
  border-top: 2px solid var(--sun) !important;
}

.role-scope-note {
  padding-left: 0 !important;
  border-width: 0 0 1px !important;
}

.overview-role-identity {
  border-bottom: 1px solid var(--line) !important;
}

.overview-role-identity small,
.outcome-records strong {
  border: 0 !important;
  color: var(--muted) !important;
  background: transparent !important;
}

.overview-group-index,
.overview-entry-link,
.architecture-foundation a {
  color: var(--ochre) !important;
}

.overview-role-group > header {
  border-color: var(--line) !important;
}

.overview-role-identity .overview-entry-link,
.experience-info-button,
.viewer-toolbar button,
.view-modes button {
  border-radius: 2px !important;
}

.view-modes button[aria-pressed="true"],
.viewer-toolbar button:hover {
  color: var(--sun) !important;
  background: #fff !important;
  box-shadow: inset 0 -2px 0 var(--sun) !important;
}

.experience-heading h1,
.overview-intro h1 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.pane-heading,
.viewer-toolbar,
.browser-bar {
  border-color: var(--line) !important;
  background: #fff !important;
}

.mobile-preview-handle {
  border-color: var(--line) !important;
  background: #fff !important;
}

@media (max-width: 760px) {
  .experience-header {
    padding-block: 8px !important;
  }

  .experience-header .demo-brand strong {
    font-size: 16px;
  }

  .experience-heading {
    padding-top: 15px !important;
    padding-bottom: 12px !important;
  }

  .preview-pane {
    padding: 8px !important;
  }
}