/* GamifyAnywhere-derived web theme for readable HTML documents. */
:root {
  color-scheme: light dark;
  --aa-primary: #556397;
  --aa-on-primary: #ffffff;
  --aa-page-top: #dde7fb;
  --aa-page-middle: #eef3fa;
  --aa-page-bottom: #f6f9fc;
  --aa-surface: rgba(255, 255, 255, 0.94);
  --aa-surface-strong: #ffffff;
  --aa-surface-inset: #f3f3fb;
  --aa-surface-dock: rgba(235, 237, 249, 0.94);
  --aa-surface-border: rgba(67, 83, 108, 0.14);
  --aa-surface-shadow: rgba(213, 223, 237, 0.86);
  --aa-ink: #43536c;
  --aa-heading: #243047;
  --aa-text-secondary: #7b8997;
  --aa-link: #3482d1;
  --aa-accent-sky: #4cc8ff;
  --aa-accent-leaf: #0fea94;
  --aa-accent-gold: #ffd100;
  --aa-accent-coral: #ff5553;
  --aa-accent-orange: #ff924b;
  --aa-button-blue-label: #0073cc;
  --aa-button-green-label: #007c69;
  --aa-button-gold-label: #bd4e04;
  --aa-button-coral-label: #af0036;
  --aa-button-radius-sm: 6px;
  --aa-button-radius-md: 8px;
  --aa-inset-radius: 14px;
  --aa-card-radius: 18px;
  --aa-space-xs: 4px;
  --aa-space-sm: 8px;
  --aa-space-md: 12px;
  --aa-space-lg: 16px;
  --aa-space-xl: 24px;

  --bg: var(--aa-page-bottom);
  --paper: var(--aa-surface);
  --text: var(--aa-ink);
  --muted: var(--aa-text-secondary);
  --line: var(--aa-surface-border);
  --soft: var(--aa-surface-inset);
  --accent: var(--aa-primary);
  --accent-soft: rgba(76, 200, 255, 0.14);
  --good: var(--aa-button-green-label);
  --warn: var(--aa-button-gold-label);
  --warn-bg: rgba(255, 209, 0, 0.16);
  --warning: var(--aa-button-gold-label);
  --warning-bg: rgba(255, 209, 0, 0.16);
  --code-bg: #eef3fa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --aa-page-top: #0d1118;
    --aa-page-middle: #111722;
    --aa-page-bottom: #141b25;
    --aa-surface: rgba(21, 27, 36, 0.94);
    --aa-surface-strong: #1a212b;
    --aa-surface-inset: #202733;
    --aa-surface-dock: rgba(20, 24, 38, 0.94);
    --aa-surface-border: rgba(212, 217, 220, 0.16);
    --aa-surface-shadow: rgba(5, 7, 13, 0.62);
    --aa-ink: #d4d9dc;
    --aa-heading: #f1f4ff;
    --aa-text-secondary: #97a6b5;
    --aa-link: #58a6ff;
    --accent-soft: rgba(76, 200, 255, 0.12);
    --code-bg: #202733;
  }
}

html {
  background: var(--aa-page-bottom);
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--aa-page-top) 0%, var(--aa-page-middle) 48%, var(--aa-page-bottom) 100%) fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  text-rendering: optimizeLegibility;
}

.page {
  padding-top: 34px;
}

header,
section,
article,
.summary,
.toc {
  border: 1px solid var(--line);
  border-radius: var(--aa-card-radius);
  background: var(--paper);
  box-shadow: 0 10px 26px var(--aa-surface-shadow);
}

@supports (backdrop-filter: blur(18px)) {
  header,
  section,
  article,
  .summary,
  .toc,
  .sticky-result {
    backdrop-filter: blur(18px);
  }
}

header {
  position: relative;
  overflow: hidden;
}

header::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--aa-accent-sky), var(--aa-accent-leaf), var(--aa-accent-gold), var(--aa-accent-coral));
}

h1,
h2,
h3,
h4,
.summary strong,
.profile-card strong,
.decision-flow strong,
.result-card strong,
.sticky-result-title {
  color: var(--aa-heading);
}

h1 {
  font-weight: 800;
}

h2,
h3,
h4 {
  font-weight: 750;
}

a {
  color: var(--aa-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.meta,
.source-ref,
.toc a,
.card p,
.field-help,
.field-unit,
.group-total,
.profile-card span,
.decision-flow span,
.why,
.axis-note,
.spectrum-copy span,
.concern span,
.result-card small {
  color: var(--muted);
}

.grid {
  gap: var(--aa-space-lg);
}

.card {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--aa-card-radius);
  background: var(--paper);
  box-shadow: 0 10px 26px var(--aa-surface-shadow);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--aa-accent-sky), var(--aa-accent-leaf));
}

.card::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0)), var(--aa-accent-sky);
  box-shadow: inset 0 -2px 0 rgba(0, 115, 204, 0.24), 0 8px 20px rgba(76, 200, 255, 0.28);
}

.card:nth-child(2)::before {
  background: linear-gradient(90deg, var(--aa-accent-gold), var(--aa-accent-orange));
}

.card:nth-child(2)::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0)), var(--aa-accent-gold);
  box-shadow: inset 0 -2px 0 rgba(189, 78, 4, 0.24), 0 8px 20px rgba(255, 209, 0, 0.28);
}

.card h3 {
  padding-right: 52px;
}

.card:hover {
  border-color: rgba(52, 130, 209, 0.44);
  background: var(--aa-surface-strong);
  box-shadow: 0 16px 34px rgba(166, 188, 218, 0.7);
  transform: translateY(-2px);
}

button,
.nav-link,
.link-button {
  appearance: none;
  min-height: 34px;
  border: 0;
  border-radius: var(--aa-button-radius-md);
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.38) 0%, rgba(0, 240, 255, 0) 100%), var(--aa-accent-sky);
  box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.07), inset 0 -2px 0 rgba(0, 115, 204, 0.32);
  color: var(--aa-button-blue-label);
  font-weight: 750;
  text-decoration: none;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

button:hover,
.nav-link:hover,
.link-button:hover {
  border: 0;
  filter: saturate(1.05) brightness(1.02);
  transform: translateY(-1px);
}

button:active,
.nav-link:active,
.link-button:active {
  transform: translateY(1px);
  box-shadow: inset 0 -1px 0 rgba(0, 115, 204, 0.26);
}

.actions button:nth-child(2),
.nav-link {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), var(--aa-surface-strong);
  box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 var(--aa-surface-inset);
  color: var(--aa-ink);
}

section,
.summary {
  margin-bottom: 18px;
}

.summary,
.panel,
.audience-block,
.axis-block,
.persona-note,
.profile-card,
.decision-flow li,
.rule-note,
.formula,
.result-card,
.note,
.review-evidence,
blockquote {
  border: 1px solid var(--line);
  border-radius: var(--aa-inset-radius);
  background: var(--aa-surface-inset);
}

.panel,
.audience-block,
.profile-card,
.decision-flow li,
.result-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.audience-block.primary {
  border-left-color: var(--aa-accent-sky);
}

.audience-block.secondary {
  border-left-color: var(--aa-accent-leaf);
}

.rule-note,
.persona-note {
  color: var(--aa-ink);
}

.note,
.review-evidence {
  background: var(--warning-bg);
  color: #735116;
}

.dont-list li {
  border: 1px solid rgba(189, 78, 4, 0.22);
  border-left: 4px solid var(--aa-accent-orange);
  border-radius: var(--aa-inset-radius);
  background: var(--aa-surface-strong);
  box-shadow: 0 4px 12px rgba(213, 223, 237, 0.42);
}

.dont-list summary::after {
  border-color: rgba(189, 78, 4, 0.24);
  border-radius: var(--aa-button-radius-sm);
  background: rgba(255, 209, 0, 0.16);
  color: var(--warning);
  font-weight: 700;
}

.review-evidence blockquote {
  border-left-color: var(--aa-accent-orange);
  background: rgba(255, 255, 255, 0.48);
}

.axis-header,
.axis-labels {
  background: var(--aa-surface-inset);
  border-bottom-color: var(--line);
}

.axis-col-label.young,
.concern.young-item {
  background: rgba(76, 200, 255, 0.12);
  color: var(--aa-button-blue-label);
}

.axis-col-label.old,
.concern.old-item {
  background: rgba(15, 234, 148, 0.12);
  color: var(--aa-button-green-label);
}

.axis-labels strong:first-child {
  color: var(--aa-button-blue-label);
}

.axis-labels .right {
  color: var(--aa-button-green-label);
}

.axis-line,
.spectrum-bar {
  background: linear-gradient(90deg, rgba(76, 200, 255, 0.54), rgba(255, 209, 0, 0.48), rgba(15, 234, 148, 0.42));
}

.axis-spine,
.spectrum-spine {
  background: var(--aa-surface-inset);
}

.concern {
  border-radius: var(--aa-button-radius-md);
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--aa-inset-radius);
  background: var(--aa-surface-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

table {
  color: var(--text);
}

th,
td {
  border-color: var(--line);
}

th {
  background: var(--aa-surface-inset);
  color: var(--aa-heading);
}

tr:nth-child(even) td {
  background: rgba(243, 243, 251, 0.62);
}

td.humanity-cell,
tr:nth-child(even) td.humanity-cell {
  background: rgba(76, 200, 255, 0.12);
  color: var(--aa-heading);
}

input {
  border: 1px solid var(--line);
  border-radius: var(--aa-button-radius-md);
  background: var(--aa-surface-strong);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

input:focus {
  outline: 3px solid rgba(76, 200, 255, 0.26);
  border-color: var(--aa-link);
}

.field {
  color: var(--text);
}

.field-name,
.group-title {
  color: var(--aa-heading);
}

.group-title {
  border-top-color: var(--line);
}

.formula {
  border-color: rgba(85, 99, 151, 0.18);
  background: linear-gradient(180deg, rgba(76, 200, 255, 0.08), rgba(15, 234, 148, 0.06)), var(--aa-surface-inset);
  color: var(--aa-heading);
}

.result-card span,
.sticky-result-profit {
  color: var(--aa-primary);
}

.result-card.good span,
.sticky-result.good .sticky-result-profit {
  color: var(--good);
}

.result-card.warn span,
.sticky-result.warn .sticky-result-profit {
  color: var(--warn);
}

.sticky-result {
  border-top: 1px solid var(--line);
  background: var(--aa-surface-dock);
  box-shadow: 0 -14px 34px rgba(83, 101, 141, 0.22);
}

.sticky-result-button {
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  background: var(--aa-surface-strong);
  box-shadow: 0 6px 18px var(--aa-surface-shadow);
  color: inherit;
  transform: none;
}

.sticky-result-button:hover {
  transform: none;
}

.toc {
  scrollbar-color: rgba(85, 99, 151, 0.38) transparent;
}

.toc h2 {
  color: var(--aa-heading);
}

.toc a:hover {
  color: var(--aa-link);
}

code,
pre {
  background: var(--code-bg);
  border-color: var(--line);
}

@media (prefers-color-scheme: dark) {
  .card:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  }

  .actions button:nth-child(2),
  .nav-link,
  .sticky-result-button {
    background: var(--aa-surface-strong);
    color: var(--aa-ink);
  }

  .note,
  .review-evidence {
    color: #f0d18a;
  }

  tr:nth-child(even) td {
    background: rgba(32, 39, 51, 0.72);
  }
}

@media (max-width: 920px) {
  .page {
    width: min(calc(100% - 20px), 760px);
    padding-top: 14px;
  }

  header,
  section,
  article,
  .summary,
  .toc {
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page {
    width: calc(100vw - 20px);
    padding-bottom: 92px;
  }

  .page,
  .main,
  header,
  section,
  article,
  .summary,
  .toc,
  .panel,
  .calc-grid,
  .field-grid,
  .field,
  .group-title,
  .sticky-result-button {
    min-width: 0;
    max-width: 100%;
  }

  header,
  section,
  article,
  .summary,
  .toc {
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: 16px;
  }

  h1,
  h2,
  h3,
  h4,
  header h1,
  article,
  article p,
  article li,
  .meta,
  .toc a,
  .card,
  .card h3,
  .field-name,
  .field-help,
  .group-total,
  button,
  .link-button,
  .nav-link {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  header h1,
  article,
  article p,
  article li {
    word-break: break-all;
  }

  header h1 {
    font-size: clamp(24px, 7vw, 30px);
  }

  .card {
    min-height: 0;
  }

  .card::after {
    width: 32px;
    height: 32px;
  }

  .group-title {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
  }

  .group-total {
    margin-left: 0;
    text-align: left;
  }

  .field {
    grid-template-columns: minmax(0, 1fr);
  }

  .field input {
    grid-column: 1;
    justify-self: start;
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
  }

  .field-help,
  .field-unit {
    grid-column: 1;
    text-align: left;
  }

  .sticky-result-button {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: start;
  }

  .sticky-result-title {
    white-space: normal;
  }

  .sticky-result-profit {
    max-width: 100%;
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    justify-self: start;
  }

  .table-wrap {
    max-width: 100%;
  }
}

@media print {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --paper: #ffffff;
    --text: #111111;
    --muted: #555555;
    --line: #d8d8d8;
    --soft: #f5f5f5;
  }

  body {
    background: #ffffff !important;
    color: #111111;
  }

  header,
  section,
  article,
  .summary,
  .toc,
  .panel,
  .audience-block,
  .axis-block,
  .persona-note,
  .profile-card,
  .decision-flow li,
  .rule-note,
  .formula,
  .result-card,
  .note,
  .review-evidence,
  blockquote {
    box-shadow: none !important;
    background: #ffffff !important;
  }

  header::after,
  .card::before,
  .card::after {
    display: none !important;
  }
}