:root {
  /* Emphasis panels (balance, architecture): inverse in light; in dark an elevated
     surface, because the inverse there is white and a white slab beside dark cards glares. */
  --emph-bg: var(--surface-inverse);
  --emph-text: var(--text-on-inverse);
  /* Component-level aliases on top of design-system tokens (tokens.css via design-system.css). */
  --inv-secondary: color-mix(in srgb, var(--emph-text) 68%, transparent);
  --inv-tertiary: color-mix(in srgb, var(--emph-text) 45%, transparent);
  --inv-separator: color-mix(in srgb, var(--emph-text) 12%, transparent);
  --inv-stroke: color-mix(in srgb, var(--emph-text) 28%, transparent);
  --inv-accent: color-mix(in oklab, var(--action-brand) 72%, var(--emph-text));
  --selection: color-mix(in srgb, var(--focus-ring) 22%, transparent);
  --focus-halo: 0 0 0 4px color-mix(in srgb, var(--focus-ring) 22%, transparent);
  --hover-overlay: linear-gradient(color-mix(in srgb, currentColor calc(var(--state-hover-strong) * 100%), transparent) 0 0);
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --emph-bg: var(--surface-elevated);
  --emph-text: var(--text-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --emph-bg: var(--surface-elevated);
    --emph-text: var(--text-primary);
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 115px;
}
body {
  margin: 0;
  background: var(--bg-grouped);
  color: var(--text-primary);
  font-size: var(--text-callout-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  word-break: keep-all;
  text-wrap: balance;
}
p,
dd,
summary {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1,
h2,
h3 {
  font-weight: 600;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--stroke-width-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--selection);
}
.container {
  width: min(1200px, calc(100% - 96px));
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  left: 20px;
  top: -100px;
  padding: 12px 18px;
  background: var(--surface-card);
  z-index: 200;
}
.skip:focus {
  top: 12px;
}
.accent {
  color: var(--action-brand);
}
.site-header {
  height: 90px;
  background: var(--material-bar);
  border-bottom: 1px solid var(--stroke-separator);
  backdrop-filter: var(--blur-bar);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  width: min(1440px, calc(100% - 96px));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img {
  display: block;
  object-fit: contain;
  width: 190px;
  height: auto;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: var(--text-subhead-size);
  font-weight: 500;
}
.main-nav a {
  color: var(--text-secondary);
  padding: 12px 0;
  position: relative;
}
.main-nav a[aria-current] {
  color: var(--text-primary);
}
.main-nav a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--text-primary);
  opacity: 0.25;
}
.language {
  border: 1px solid var(--stroke-default);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
  padding: 9px 10px;
  min-width: 45px;
  min-height: 38px;
  font-size: var(--text-caption-2-size);
  font-weight: 500;
  white-space: nowrap;
}
.language:hover {
  background: var(--fill-faint);
  border-color: var(--stroke-strong);
}

.eyebrow {
  font-size: var(--text-caption-2-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  letter-spacing: 0.12em;
  font-size: var(--text-caption-2-size);
}

.intro {
  max-width: 370px;
  color: var(--text-secondary);
  font-size: var(--text-callout-size);
  line-height: 1.5;
  margin-top: 24px;
}

.address-field {
  display: flex;
  align-items: center;
  background: var(--fill-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.address-field:focus-within {
  background: var(--surface-card);
  border-color: var(--focus-ring);
  box-shadow: var(--focus-halo);
}
.address-field:has([aria-invalid="true"]) {
  border-color: var(--error-text);
}
.address-field input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0 !important;
  font-size: var(--text-subhead-size);
  padding: 19px 17px;
  color: var(--text-primary);
  letter-spacing: 0;
}
.address-field input::placeholder {
  color: var(--text-placeholder);
}
.clear-input {
  border: 0;
  background: var(--fill-default);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 21px;
  height: 21px;
  line-height: 1;
  margin-right: 16px;
  flex-shrink: 0;
  padding: 0;
}

.form-error {
  font-size: var(--text-caption-1-size);
  color: var(--error-text);
  margin-top: 10px;
  line-height: 1.5;
}

.samples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.samples button {
  background: transparent;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-s);
  padding: 7px 11px;
  font-size: var(--text-caption-1-size);
  color: var(--text-primary);
  transition:
    border-color 0.2s,
    background 0.2s;
  min-height: 34px;
}
.samples button:hover:not(:disabled) {
  border-color: var(--text-primary);
  background: var(--fill-subtle);
}
.samples button:disabled {
  opacity: var(--state-disabled);
}
.samples button.selected {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--fill-subtle);
}

.loading {
  margin-top: 25px;
  padding-top: 23px;
  border-top: 1px solid var(--stroke-separator);
}
.loading-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.loading-top strong {
  font-size: var(--text-footnote-size);
  font-weight: 500;
}
.loading-top button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  text-decoration: underline;
  min-height: 32px;
}
.loading p {
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}
.spinner {
  width: 14px;
  height: 14px;
  border: 1.6px solid var(--fill-default);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
.loading-track {
  height: 3px;
  background: var(--fill-subtle);
  margin-top: 17px;
  overflow: hidden;
  border-radius: var(--radius-xs);
}
.loading-track i {
  display: block;
  background: var(--ui-accent); /* progress is a control state, not the brand: never brand red */
  width: 35%;
  height: 100%;
  animation: loading 1.8s ease-in-out infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(390%);
  }
}
.intro-guide {
  border-top: 1px solid var(--stroke-separator);
  padding: 39px 0 60px;
}

.report {
  padding: 20px 0 0;
  animation: arrive 0.6s var(--ease-standard);
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.report-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
}
.report-heading h2 {
  font-size: var(--text-title-1-size);
  line-height: 1.5;
  letter-spacing: var(--tracking-title);
  margin-top: 8px;
}
.report-heading h2:focus {
  outline: none;
}
.report-identity {
  display: flex;
  gap: 13px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
.report-identity > span {
  overflow-wrap: anywhere;
}
.report-identity button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stroke-strong);
  padding: 0;
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
}
.report-meta {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: var(--text-caption-2-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.data-note {
  border-left: 2px solid var(--warning-fill);
  padding: 8px 15px;
  margin-bottom: 25px;
  color: var(--warning-text);
  font-size: var(--text-caption-1-size);
  line-height: 1.5;
}
.summary-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  scroll-margin-top: 155px;
}
.score-panel,
.balance-panel {
  border-radius: var(--radius-card);
  padding: 33px 35px;
  min-width: 0;
}
.score-panel {
  background: var(--surface-card);
  border: 1px solid var(--stroke-elevated);
}
.panel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.panel-label h3 {
  font-size: var(--text-subhead-size);
  font-weight: 500;
  letter-spacing: var(--tracking-title);
}
.small-pill {
  font-size: var(--text-caption-2-size);
  padding: 4px 8px;
  border: 1px solid var(--stroke-default);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.score-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 26px;
}
.score-number {
  font-size: 78px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums;
}
.score-total {
  font-size: var(--text-callout-size);
  color: var(--text-tertiary);
}
.grade-badge {
  margin-left: auto;
  align-self: center;
  text-align: right;
}
.grade-badge strong {
  display: block;
  font-size: var(--text-title-1-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  color: var(--action-brand);
}
.grade-badge > span {
  display: block;
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  margin-top: 5px;
}
.score-explanation {
  font-size: var(--text-caption-1-size);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 14px;
  min-height: 44px;
}
.score-track {
  height: 6px;
  border-radius: var(--radius-s);
  background: var(--fill-subtle);
  overflow: hidden;
  margin-top: 19px;
}
.score-track > div {
  height: 100%;
  background: var(--action-brand);
  border-radius: var(--radius-s);
  width: 0;
  transition: width 1s var(--ease-standard);
}
.score-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-caption-2-size);
  color: var(--text-tertiary);
  margin-top: 7px;
}
.score-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
}
.score-bottom a {
  color: var(--action-brand);
  white-space: nowrap;
}
.balance-panel {
  background: var(--emph-bg);
  color: var(--emph-text);
}
.balance-panel .panel-label h3 {
  color: var(--emph-text);
}
.currency-label {
  font-size: var(--text-caption-2-size);
  color: var(--inv-secondary);
}
.balance-number {
  font-size: 45px;
  line-height: 1.3;
  letter-spacing: var(--tracking-title);
  font-weight: 500;
  margin-top: 27px;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.balance-caption {
  font-size: var(--text-caption-2-size);
  color: var(--inv-secondary);
  line-height: 1.5;
  margin-top: 8px;
}
.balance-ledger {
  margin: 25px 0 0;
}
.balance-ledger > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding: 9px 0;
  font-size: var(--text-caption-1-size);
}
.balance-ledger dt {
  color: var(--inv-secondary);
}
.balance-ledger dd {
  margin: 0;
  font-size: var(--text-subhead-size);
  font-variant-numeric: tabular-nums;
}
.active-chains {
  border-top: 1px solid var(--inv-separator);
  margin-top: 16px;
  padding-top: 14px;
  font-size: var(--text-caption-2-size);
  color: var(--inv-secondary);
  line-height: 1.5;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-end;
  margin-bottom: 25px;
}
.section-heading h2 {
  font-size: var(--text-title-2-size);
  letter-spacing: var(--tracking-title);
  line-height: 1.5;
}
.section-heading p {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 375px;
}

.risk-section {
  margin-top: 44px;
}
.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--stroke-separator);
  border-bottom: 1px solid var(--stroke-separator);
}
.risk-item {
  padding: 24px 24px 24px 0;
  min-width: 0;
}
.risk-item:nth-child(n + 4) {
  border-top: 1px solid var(--stroke-separator);
}
.risk-item:not(:nth-child(3n + 1)) {
  padding-left: 30px;
  border-left: 1px solid var(--stroke-separator);
}
.risk-label {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.risk-value {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.risk-value strong {
  font-size: var(--text-title-1-size);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
}
.status {
  font-size: var(--text-caption-2-size);
  white-space: nowrap;
}
.status.good {
  color: var(--success-text);
}
.status.warn {
  color: var(--warning-text);
}
.status.bad {
  color: var(--error-text);
}
.status.na {
  color: var(--text-secondary);
}
.risk-description {
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  margin-top: 9px;
  line-height: 1.5;
}
.terms-section {
  border-bottom: 1px solid var(--stroke-separator);
  margin-top: 14px;
}
.terms-section summary {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  cursor: pointer;
}
.terms-section h3 {
  font-size: var(--text-subhead-size);
  font-weight: 500;
}
.terms-section summary p {
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  margin-top: 3px;
}
summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
.terms-content {
  padding: 0 0 28px;
}
.terms-content dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 0;
  padding: 15px 0 25px;
}
.terms-content dt {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
.terms-content dd {
  margin: 7px 0 0;
  font-size: var(--text-title-1-size);
  font-variant-numeric: tabular-nums;
}
.terms-content > p,
.detail-note {
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  line-height: 1.5;
}
.report-section {
  padding: 50px 0 0;
  scroll-margin-top: 130px;
}
.factor-list {
  border-top: 1px solid var(--stroke-separator);
}
.factor-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 35px;
  padding: 23px 0;
  border-bottom: 1px solid var(--stroke-separator);
  align-items: center;
}
.factor-name {
  font-size: var(--text-subhead-size);
  font-weight: 500;
}

.factor-description {
  font-size: var(--text-caption-2-size);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 7px 0 0 31px;
}
.factor-score-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  margin-bottom: 9px;
}
.factor-score-top strong {
  font-size: var(--text-callout-size);
  color: var(--text-primary);
  font-weight: 500;
}
.factor-score-top strong span {
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  font-weight: 400;
}
.factor-track {
  height: 4px;
  background: var(--fill-subtle);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.factor-track i {
  display: block;
  height: 100%;
  background: var(--chart-1);
  border-radius: var(--radius-xs);
}
.position-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--stroke-separator);
  border-radius: var(--radius-l);
  background: var(--surface-card);
}
.position-table-wrap table {
  border-collapse: collapse;
  min-width: 890px;
  width: 100%;
  text-align: right;
  font-size: var(--text-caption-1-size);
  font-variant-numeric: tabular-nums;
}
.position-table-wrap th {
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  font-weight: 400;
  background: var(--fill-faint);
  padding: 15px 16px;
  white-space: nowrap;
}
.position-table-wrap th:first-child,
.position-table-wrap td:first-child {
  text-align: left;
}
.position-table-wrap td {
  padding: 19px 16px;
  border-top: 1px solid var(--stroke-separator);
  white-space: nowrap;
}
.instrument-name {
  font-weight: 500;
}
.instrument-meta {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-caption-2-size);
  margin-top: 4px;
}
.positive {
  color: var(--market-up);
}
.negative {
  color: var(--market-down);
}
.empty-position {
  padding: 44px 25px;
  text-align: center;
  background: var(--fill-subtle);
  border-radius: var(--radius-card);
}

.empty-position h3 {
  font-size: var(--text-callout-size);
  font-weight: 500;
}
.empty-position p {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
  margin-top: 10px;
}
.stress-section {
  border-bottom: 1px solid var(--stroke-separator);
  margin-top: 15px;
}
.stress-section summary {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 22px 0;
  cursor: pointer;
  font-size: var(--text-footnote-size);
}
.stress-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.stress-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--stroke-separator);
}
.stress-row div > span {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
.stress-row small {
  display: block;
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  margin-top: 5px;
}
.stress-row strong {
  font-size: var(--text-body-size);
  font-weight: 500;
}
.stress-section > .detail-note {
  margin: 10px 0 25px;
}

.weight-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.weight-list li {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--stroke-separator);
  font-size: var(--text-caption-2-size);
  gap: 20px;
}
.weight-list li:last-child {
  border: 0;
}
.weight-list strong {
  font-weight: 500;
  color: var(--text-primary);
}
footer {
  background: var(--fill-faint);
  padding: 34px 0 37px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: 45px;
  align-items: center;
}
.footer-inner .brand img {
  width: 150px;
}
.footer-inner p {
  font-size: var(--text-caption-2-size);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 470px;
}
.footer-inner > span {
  font-size: var(--text-caption-2-size);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.has-result .intro-guide {
  display: none;
}

@media (max-width: 1100px) {
  .container {
    width: calc(100% - 64px);
  }
  .header-inner {
    width: calc(100% - 64px);
  }
  
  
  
  
  .intro {
    font-size: var(--text-subhead-size);
  }
  
  .score-panel,
  .balance-panel {
    padding: 27px;
  }
  .balance-number {
    font-size: 36px;
  }
  
  .footer-inner {
    gap: 25px;
    grid-template-columns: 160px 1fr;
  }
  .footer-inner > span {
    grid-column: 2;
  }
  
}
@media (max-width: 800px) {
  .container,
  .header-inner {
    width: calc(100% - 48px);
  }
  
  
  
  .intro {
    max-width: 420px;
    font-size: var(--text-subhead-size);
    margin-top: 16px;
  }
  
  
  
  
  
  
  
  
  
  
  
  .summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .score-panel,
  .balance-panel {
    padding: 23px;
  }
  .panel-label h3 {
    font-size: var(--text-caption-1-size);
  }
  .small-pill {
    font-size: var(--text-caption-2-size);
  }
  .score-number {
    font-size: 58px;
  }
  .score-total {
    font-size: var(--text-caption-2-size);
  }
  .grade-badge strong {
    font-size: var(--text-title-2-size);
  }
  .grade-badge > span {
    font-size: var(--text-caption-2-size);
  }
  .balance-number {
    font-size: var(--text-title-1-size);
  }
  .score-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .section-heading {
    gap: 25px;
    align-items: start;
    flex-direction: column;
  }
  .section-heading > p {
    max-width: 100%;
    margin-top: -15px;
  }
  .section-heading h2 {
    font-size: var(--text-title-2-size);
  }
  .risk-item:not(:nth-child(3n + 1)) {
    padding-left: 20px;
  }
  .risk-item {
    padding-right: 20px;
  }
  
  
  
  
}
@media (max-width: 560px) {
  html {
    scroll-padding-top: 95px;
  }
  .site-header {
    height: 72px;
  }
  .header-inner {
    gap: 13px;
  }
  .brand img {
    width: 138px;
  }
  .main-nav {
    gap: 14px;
    font-size: var(--text-caption-2-size);
  }
  .language {
    font-size: var(--text-caption-2-size);
    padding-left: 13px;
    min-width: 30px;
  }
  .container,
  .header-inner {
    width: calc(100% - 40px);
  }
  
  .eyebrow {
    font-size: var(--text-caption-2-size);
    letter-spacing: 0.09em;
    gap: 9px;
  }
  
  
  .intro {
    font-size: var(--text-footnote-size);
    line-height: 1.5;
    max-width: 330px;
  }
  
  
  
  
  
  
  
  
  
  .address-field input {
    font-size: var(--text-callout-size);
    padding: 16px 13px;
  }
  .address-field input::placeholder {
    font-size: var(--text-footnote-size);
  }
  
  .samples {
    gap: 7px;
  }
  .samples button {
    font-size: var(--text-caption-1-size);
    padding: 7px 9px;
    min-height: 36px;
  }
  
  
  .intro-guide {
    padding-top: 29px;
    padding-bottom: 20px;
  }
  
  
  
  
  
  
  
  .report {
    padding-top: 0;
  }
  .report-heading {
    display: block;
  }
  .report-heading h2 {
    font-size: var(--text-title-1-size);
    margin-top: 6px;
  }
  
  .report-identity {
    font-size: var(--text-caption-1-size);
    margin-top: 7px;
  }
  .report-meta {
    margin-top: 15px;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    gap: 15px;
    font-size: var(--text-caption-2-size);
  }
  
  
  .summary-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    scroll-margin-top: 135px;
  }
  .score-panel,
  .balance-panel {
    padding: 27px 25px;
    border-radius: var(--radius-card);
  }
  .panel-label h3 {
    font-size: var(--text-subhead-size);
  }
  .small-pill {
    font-size: var(--text-caption-2-size);
  }
  .score-display {
    margin-top: 22px;
  }
  .score-number {
    font-size: 75px;
  }
  .score-total {
    font-size: var(--text-subhead-size);
  }
  .grade-badge strong {
    font-size: var(--text-title-1-size);
  }
  .grade-badge > span {
    font-size: var(--text-caption-2-size);
  }
  .score-explanation {
    font-size: var(--text-caption-2-size);
    min-height: 0;
  }
  .score-bottom {
    flex-direction: row;
    align-items: center;
    font-size: var(--text-caption-2-size);
    gap: 10px;
  }
  .balance-number {
    font-size: 40px;
    margin-top: 23px;
  }
  .balance-caption {
    font-size: var(--text-caption-2-size);
  }
  .balance-ledger {
    margin-top: 22px;
  }
  .balance-ledger > div {
    font-size: var(--text-caption-1-size);
  }
  .risk-section {
    margin-top: 33px;
  }
  .section-heading h2 {
    font-size: var(--text-title-3-size);
    line-height: 1.5;
    letter-spacing: var(--tracking-title);
  }
  .section-heading {
    gap: 25px;
    margin-bottom: 21px;
  }
  .section-heading p {
    font-size: var(--text-caption-2-size);
    line-height: 1.5;
  }
  .risk-grid {
    grid-template-columns: 1fr 1fr;
  }
  .risk-item {
    padding: 20px 16px 20px 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
  }
  .risk-item:nth-child(even) {
    padding-left: 18px !important;
    border-left: 1px solid var(--stroke-separator) !important;
  }
  .risk-item:nth-child(n + 3) {
    border-top: 1px solid var(--stroke-separator) !important;
  }
  .risk-value strong {
    font-size: var(--text-title-2-size);
  }
  .risk-value {
    gap: 8px;
    flex-wrap: wrap;
  }
  .risk-label {
    font-size: var(--text-caption-2-size);
  }
  .risk-description {
    font-size: var(--text-caption-2-size);
  }
  .status {
    font-size: var(--text-caption-2-size);
  }
  .terms-section h3 {
    font-size: var(--text-footnote-size);
  }
  .terms-section summary p {
    font-size: var(--text-caption-2-size);
  }
  .terms-content dl {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 7px;
  }
  .terms-content dl > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: baseline;
  }
  .terms-content dt {
    font-size: var(--text-caption-2-size);
  }
  .terms-content dd {
    font-size: var(--text-title-2-size);
    margin: 0;
  }
  .report-section {
    padding-top: 36px;
    scroll-margin-top: 110px;
  }
  .factor-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .factor-name {
    font-size: var(--text-footnote-size);
  }
  .factor-description {
    font-size: var(--text-caption-2-size);
    margin-left: 26px;
  }
  
  .factor-measure {
    margin-left: 26px;
  }
  .factor-score-top {
    margin-bottom: 7px;
    font-size: var(--text-caption-2-size);
  }
  .factor-score-top strong {
    font-size: var(--text-subhead-size);
  }
  .empty-position {
    padding: 35px 20px;
  }
  .empty-position h3 {
    font-size: var(--text-subhead-size);
  }
  .empty-position p {
    font-size: var(--text-caption-2-size);
  }
  .stress-section summary {
    font-size: var(--text-caption-1-size);
  }
  .stress-list {
    grid-template-columns: 1fr;
  }
  
  
  
  
  
  
  
  .detail-note {
    font-size: var(--text-caption-2-size);
  }
  
  
  
  
  
  
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 19px;
  }
  .footer-inner p {
    font-size: var(--text-caption-2-size);
  }
  .footer-inner > span {
    grid-column: auto;
    font-size: var(--text-caption-2-size);
  }
  .footer-inner .brand img {
    width: 139px;
  }
  footer {
    padding: 29px 0 32px;
  }
  
}
@media (max-width: 360px) {
  
  
  
  .main-nav {
    font-size: var(--text-caption-2-size);
  }
  .brand img {
    width: 125px;
  }
  .score-bottom {
    font-size: var(--text-caption-2-size);
  }
  
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .loading-track i {
    transform: none;
    width: 100%;
    opacity: 0.4;
  }
}
@media print {
  .site-header,
  .intro-guide,
  .copy-address,
  footer {
    display: none !important;
  }
  .container {
    width: 100%;
  }
  body {
    background: #fff;
  }
  .report {
    padding: 0;
  }
  .balance-panel {
    background: #eee;
    color: #222;
  }
  .report-section {
    break-inside: avoid;
  }
  .report-meta {
    font-size: 10px;
  }
}

/* Landing-aligned editorial shell. Keep the engine's workflow, change its visual voice. */
.site-header {
  height: 88px;
  background: var(--material-bar);
  border-bottom-color: var(--stroke-separator);
}
.header-inner {
  width: min(1440px, calc(100% - 10%));
}
.main-nav a[aria-current]::after {
  background: var(--action-brand);
}
.language {
  color: var(--text-secondary);
  border-left-color: var(--stroke-separator);
}

.intro {
  color: var(--text-secondary);
  font-size: var(--text-body-size);
}

.address-field {
  background: var(--fill-subtle);
}
.address-field:focus-within {
  background: var(--surface-card);
  border-color: var(--focus-ring);
  box-shadow: var(--focus-halo);
}

/* Secondary (tinted) per design-system v1: fill, no outline; currentColor overlay for states */
.samples button {
  border-color: transparent;
  background-color: var(--fill-subtle);
  color: var(--text-primary);
  font-weight: 500;
  transition:
    transform var(--motion-release) var(--ease-standard),
    background-color var(--motion-release) var(--ease-standard);
}
.samples button:hover:not(:disabled) {
  background-color: var(--fill-subtle);
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--state-hover-soft) * 100%), transparent) 0 0);
}
.samples button:active:not(:disabled) {
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--state-pressed-soft) * 100%), transparent) 0 0);
  transform: scale(var(--state-press-scale));
  transition-duration: var(--motion-press);
}
.samples button.selected {
  background-color: var(--action-primary);
  color: var(--action-on-primary);
}
.samples button:disabled {
  opacity: var(--state-disabled);
}
.intro-guide {
  border-top-color: var(--stroke-separator);
}

@media (max-width: 700px) {
  
  
  
  .intro {
    font-size: var(--text-callout-size);
  }
  
}

/* Published model documentation: restrained research typography and real weights. */

.engine-research {
  margin-top: 60px;
}

.factor-method-number {
  color: var(--text-secondary);
  font-size: var(--text-caption-2-size);
  font-variant-numeric: tabular-nums;
}

.factor-method-body {
  padding: 15px 30px 4px;
  font-size: var(--text-caption-1-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

.baseline-dot {
  width: 6px;
  height: 6px;
  background: var(--success-fill);
  border-radius: 50%;
  flex-shrink: 0;
}

.planned-label {
  font-size: var(--text-caption-2-size);
  border: 1px solid var(--stroke-default);
  color: var(--text-secondary);
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .engine-research {
    margin-top: 35px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .factor-method-body {
    padding-inline: 25px 5px;
    font-size: var(--text-caption-2-size);
  }
  
  
  
  
  
  
  
  
  
  
}
@media print {
  .engine-research {
    display: none !important;
  }
}
.rwa-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--stroke-separator);
}
.rwa-summary > span {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
.rwa-summary strong {
  font-size: var(--text-title-1-size);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rwa-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
  gap: 25px;
  padding: 18px 0;
  border-top: 1px solid var(--stroke-separator);
  font-size: var(--text-footnote-size);
}
.rwa-row > div:not(:first-child) {
  text-align: right;
}
.rwa-row small {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-caption-2-size);
  margin-bottom: 4px;
}
.rwa-row strong {
  font-weight: 500;
}
.rwa-row span {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .rwa-row {
    gap: 10px;
    font-size: var(--text-caption-2-size);
  }
  .rwa-row small {
    font-size: var(--text-caption-2-size);
  }
  
}

/* Final research values only; structure lives in the published block above. */

.factor-method-number {
  color: var(--text-tertiary);
}

.factor-method-body {
  padding: 14px 35px 7px;
  font-size: var(--text-subhead-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  .factor-method-body {
    padding: 12px 0 7px 25px;
    font-size: var(--text-footnote-size);
  }
  
  
  
  
}

/* Header: identical to the landing header (landing/dist/style.css · Header).
   Logo left; page links and the language switch on the right, one size and style;
   the current page is a quiet pill. */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}
html:root .site-header {
  height: 80px;
  background: var(--material-bar);
  -webkit-backdrop-filter: var(--blur-bar);
  backdrop-filter: var(--blur-bar);
  border-bottom: 1px solid var(--stroke-separator);
}
html:root .header-inner {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0 max(clamp(20px, 4vw, 48px), calc((100% - 1200px) / 2));
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
html:root .site-header .brand {
  margin-right: auto;
}
html:root .site-header .brand img {
  width: auto;
  height: 26px;
}
html:root .brand .brand-logo-dark {
  display: none;
}
:root[data-theme="dark"] .brand .brand-logo-light {
  display: none;
}
:root[data-theme="dark"] .brand .brand-logo-dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .brand-logo-light {
    display: none;
  }
  :root:not([data-theme="light"]) .brand .brand-logo-dark {
    display: block;
  }
}
html:root .main-nav {
  display: flex;
  gap: var(--space-4);
}
html:root .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-m);
  min-height: 0;
  min-width: 0;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-m);
  background-color: transparent;
  color: var(--text-secondary);
  font-size: var(--text-subhead-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
html:root .nav-link:hover {
  color: var(--text-primary);
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--state-hover-soft) * 100%), transparent) 0 0);
}
html:root .nav-link[aria-current="page"] {
  color: var(--text-primary);
  background-color: var(--fill-subtle);
}
html:root .nav-link[aria-current="page"]::after {
  display: none;
}
html:root .nav-link:focus-visible {
  outline: var(--stroke-width-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* A hairline separates page links from the language switch */
html:root .language.nav-link {
  margin-left: var(--space-12);
}
html:root .language.nav-link::before {
  content: "";
  position: absolute;
  left: calc(var(--space-8) * -1);
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--stroke-default);
}

@media (max-width: 700px) {
  html:root .site-header {
    height: 64px;
  }
  html:root .site-header .brand img {
    height: 22px;
  }
  
}
/* Phones: two rows so both page links always show (2026-10-21). Row 1 logo + language, row 2 the
   page links, their text on the logo's left edge.
   Row 2 is a tab bar: text links, the current page underlined on the header's hairline (no pills,
   which read heavy under the logo). 52 + 44 = 96 (+1 hairline). The sticky report tabs and every scroll offset below move down by the extra 32. */
@media (max-width: 700px) {
  html:root {
    scroll-padding-top: 127px;
  }
  html:root .site-header {
    height: auto;
  }
  html:root .header-inner {
    flex-wrap: wrap;
    row-gap: 0;
    height: auto;
  }
  /* body in the selector: beats the phone touch-target rule (html:root body .brand, padding 10 / margin -10) */
  html:root body .site-header .brand {
    height: 52px;
    margin: 0 auto 0 0;
    padding: 0;
  }
  html:root .main-nav {
    order: 3;
    width: 100%;
    gap: var(--space-24);
  }
  html:root .main-nav .nav-link {
    padding: 0;
    border-radius: 0;
  }
  html:root .main-nav .nav-link:hover,
  html:root .main-nav .nav-link[aria-current="page"] {
    background: none;
  }
  html:root .main-nav .nav-link[aria-current="page"]::after {
    content: "";
    display: block;
    position: absolute;
    inset: auto 0 calc(var(--stroke-width-hairline) * -1);
    height: var(--stroke-width-focus);
    background: var(--text-primary);
    opacity: 1;
  }
  html:root .language.nav-link {
    margin-left: 0;
  }
  html:root .language.nav-link::before {
    display: none;
  }
  html:root .report-section {
    scroll-margin-top: 142px;
  }
  html:root .summary-grid {
    scroll-margin-top: 167px;
  }
}

/* ---------------------------------------------------------------------------
   Credit engine layout, design system v1 (decisions/log.md).
   Grouped screen: grey page, white cards (one cue: colour difference, no border).
   Type roles: display 44 · section 28 · card title 17 · body 17/15 · caption 13.
   ------------------------------------------------------------------------- */
:root {
  --page-max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
}
html:root body {
  font-size: var(--text-body-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
:lang(ko) {
  word-break: keep-all;
}
html:root :is(h1, h2, h3) {
  text-wrap: balance;
  letter-spacing: var(--tracking-title);
}
html:root :is(p, li, dd) {
  text-wrap: pretty;
}
html:root .container,
.ce-frame {
  width: min(var(--page-max), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

/* Entry: one centred task. Title, one sentence, the address field and its button. */
.ce-entry {
  padding: 96px 0 64px;
  text-align: center;
}
.ce-entry-inner {
  display: grid;
  justify-items: center;
}
.ce-display {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.3;
}
.ce-display span {
  display: inline;
}
.ce-display .accent {
  color: var(--action-brand);
}
.ce-lead {
  max-width: 34em;
  margin-top: var(--space-12);
  font-size: var(--text-body-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
.ce-entry .ce-lead {
  margin-inline: auto;
}
.ce-search {
  display: flex;
  gap: var(--space-8);
  width: min(680px, 100%);
  margin-top: var(--space-32);
  text-align: left;
}
html:root .ce-search .address-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--control-l);
  padding: 0 var(--space-8) 0 var(--space-16);
  border: 1px solid var(--stroke-default);
  border-radius: var(--radius-l);
  background: var(--surface-card);
  box-shadow: none;
  transition: border-color var(--motion-release) var(--ease-standard);
}
html:root .ce-search .address-field:focus-within {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 var(--stroke-width-focus) var(--focus-ring);
}
html:root .ce-search .address-field:has([aria-invalid="true"]) {
  border: var(--stroke-width-emphasis) solid var(--error-fill);
  background: var(--error-bg);
}
.address-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}
html:root .ce-search .address-field input {
  flex: 1;
  height: 100%;
  padding: 0;
  font-size: var(--text-body-size);
  color: var(--text-primary);
  font-family: inherit;
}
html:root .ce-search .address-field input::placeholder {
  color: var(--text-placeholder);
}
html:root .clear-input {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-tertiary);
}
html:root .clear-input .icon {
  width: 20px;
  height: 20px;
}
html:root .clear-input[hidden] {
  display: none;
}
/* Buttons (v1): Primary navy inside forms; the red Brand CTA never sits in a form */
.ce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: var(--control-m);
  padding: 0 var(--space-16);
  border: 0;
  border-radius: var(--radius-m);
  font: 600 var(--text-subhead-size) / 1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  --o: 0;
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--o) * 100%), transparent) 0 0);
  transition: transform var(--motion-release) var(--ease-standard);
}
.ce-button.large {
  height: var(--control-l);
  padding: 0 22px;
  border-radius: var(--radius-l);
  font-size: var(--text-callout-size);
}
.ce-button.primary {
  background-color: var(--action-primary);
  color: var(--action-on-primary);
}
.ce-button.primary:hover {
  --o: var(--state-hover-strong);
}
.ce-button.primary:active {
  --o: var(--state-pressed-strong);
  transform: scale(var(--state-press-scale));
  transition-duration: var(--motion-press);
}
.ce-button:disabled {
  opacity: var(--state-disabled);
  cursor: default;
}
.ce-button:focus-visible,
.ce-chip:focus-visible,
.ce-faq-item summary:focus-visible {
  outline: var(--stroke-width-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
html:root .form-error {
  margin-top: var(--space-12);
  font-size: var(--text-subhead-size);
  color: var(--error-text);
}
.ce-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 680px;
  margin-top: var(--space-12);
  font-size: var(--text-footnote-size);
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
}
.ce-hint .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
html:root .ce-entry .loading {
  width: min(680px, 100%);
  margin-top: var(--space-16);
  padding: var(--space-16);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--surface-card);
  text-align: left;
}
html:root .ce-entry .loading p {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
/* Example wallets: chips (v1 32/r8), grouped by kind */
.ce-samples {
  display: grid;
  gap: var(--space-12);
  width: min(680px, 100%);
  margin-top: var(--space-40);
  padding-top: var(--space-24);
  border-top: 1px solid var(--stroke-separator);
  text-align: left;
}
.ce-samples-title {
  font-size: var(--text-subhead-size);
  font-weight: 600;
}
.ce-sample-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: start;
  gap: var(--space-12);
}
.ce-sample-label {
  padding-top: 6px;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
.ce-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.ce-chip {
  height: 32px;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-s);
  background-color: var(--fill-subtle);
  color: var(--text-primary);
  font: 600 var(--text-footnote-size) / 1 var(--font-sans);
  cursor: pointer;
  --o: 0;
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--o) * 100%), transparent) 0 0);
}
.ce-chip:hover {
  --o: var(--state-hover-soft);
}
.ce-chip:active {
  --o: var(--state-pressed-soft);
  transform: scale(var(--state-press-scale));
}
.ce-chip.selected {
  background-color: var(--action-primary);
  color: var(--action-on-primary);
}
.ce-chip:disabled {
  opacity: var(--state-disabled);
}
.ce-sources summary {
  display: inline-block;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.ce-sources summary::-webkit-details-marker {
  display: none;
}
.ce-sources p {
  margin-top: var(--space-8);
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
.ce-sources div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  margin-top: var(--space-8);
  font-size: var(--text-footnote-size);
}
.ce-sources a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sections: title, one-line lead, then cards */
.ce-section {
  padding: var(--space-64) 0;
}
.ce-section + .ce-section,
.engine-research .ce-section:first-child {
  border-top: 1px solid var(--stroke-separator);
}
.ce-section-head {
  max-width: 40em;
  margin-bottom: var(--space-32);
}
.ce-section-head h2 {
  margin: 0;
  font-size: var(--text-title-1-size);
  font-weight: 700;
  line-height: 1.3;
}
.ce-eyebrow {
  margin-bottom: var(--space-8);
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--text-secondary);
}
.ce-cards {
  display: grid;
  gap: var(--space-16);
}
.ce-cards.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ce-card {
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
.ce-card h3 {
  margin: var(--space-16) 0 0;
  font-size: var(--text-headline-size);
  font-weight: 600;
  line-height: 1.5;
}
.ce-card > p:not([class]) {
  margin-top: var(--space-4);
  font-size: var(--text-subhead-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
.ce-tile {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: var(--fill-subtle);
  color: var(--text-primary);
}
.ce-tile .icon {
  width: 22px;
  height: 22px;
}
.ce-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--stroke-separator);
  font-size: var(--text-footnote-size);
  color: var(--text-primary);
}
.ce-meta > span:first-child {
  color: var(--text-secondary);
}
.ce-note {
  max-width: 48em;
  margin-top: var(--space-16);
  font-size: var(--text-footnote-size);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Steps: five cards in reading order, numbered, joined by a line */
.ce-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.ce-steps .ce-card {
  position: relative;
  padding: var(--space-20);
}
.ce-step-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ce-step-no {
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.ce-steps .ce-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  right: calc(var(--space-12) * -1);
  width: var(--space-12);
  height: 1px;
  background: var(--stroke-strong);
}
.ce-sources-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  margin-top: var(--space-12);
}
.ce-sources-card h3 {
  margin: 0;
  font-size: var(--text-subhead-size);
}
.ce-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}
.ce-tags li {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-s);
  background: var(--fill-subtle);
  font-size: var(--text-footnote-size);
  font-weight: 500;
}

/* Factors and weights: list on the left, the score calculation on the right */
.ce-model {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--space-16);
  align-items: start;
}
.ce-weight-bar {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-8);
}
.ce-weight-bar i {
  flex: var(--w) 1 0;
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: var(--radius-xs);
  font-style: normal;
  font-size: var(--text-caption-1-size);
  font-weight: 700;
  color: var(--white);
}
.ce-weight-bar i:nth-child(1),
.ce-factors li:nth-child(1) .ce-swatch {
  background: var(--chart-1);
}
.ce-weight-bar i:nth-child(2),
.ce-factors li:nth-child(2) .ce-swatch {
  background: var(--chart-2);
}
.ce-weight-bar i:nth-child(3),
.ce-factors li:nth-child(3) .ce-swatch {
  background: var(--chart-3);
}
.ce-weight-bar i:nth-child(4),
.ce-factors li:nth-child(4) .ce-swatch {
  background: var(--chart-4);
}
.ce-weight-bar i:nth-child(5),
.ce-factors li:nth-child(5) .ce-swatch {
  background: var(--chart-5);
}
.ce-weight-bar i:nth-child(6),
.ce-factors li:nth-child(6) .ce-swatch {
  background: var(--fill-strong);
}
.ce-weight-bar i:nth-child(4),
.ce-weight-bar i:nth-child(6) {
  color: var(--text-primary);
}
.ce-factors {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ce-factors li {
  padding: var(--space-20) 0;
  border-bottom: 1px solid var(--stroke-separator);
}
.ce-factors li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.ce-factor-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-12);
}
.ce-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.ce-factor-head h3 {
  margin: 0;
  font-size: var(--text-headline-size);
  font-weight: 600;
  line-height: 1.5;
}
.ce-weight {
  font-size: var(--text-headline-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ce-factors li > p:not(.ce-meta) {
  margin: var(--space-4) 0 0 22px;
  font-size: var(--text-subhead-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
.ce-factors .ce-meta {
  margin-left: 22px;
  padding-top: 0;
  border-top: 0;
  margin-top: var(--space-8);
}
.ce-score-card {
  position: sticky;
  top: 96px;
}
.ce-score-card h3 {
  margin: 0;
}
.ce-equation {
  margin-top: var(--space-12);
  font-size: var(--text-title-2-size);
  font-weight: 600;
  white-space: nowrap;
}
.ce-equation sub {
  font-size: 0.6em;
}
.ce-small {
  margin-top: var(--space-4);
  font-size: var(--text-footnote-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
.ce-small-label {
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
.ce-divider {
  height: 1px;
  margin: var(--space-20) 0;
  background: var(--stroke-separator);
}
.ce-range {
  margin-top: var(--space-4);
  font-size: var(--text-title-1-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ce-grades {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.ce-grades li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid var(--stroke-separator);
  font-size: var(--text-subhead-size);
  font-variant-numeric: tabular-nums;
}
.ce-grades li:last-child {
  border-bottom: 0;
}
.ce-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  font-size: var(--text-caption-1-size);
  font-weight: 700;
}

/* Risk formulas: the explanation first, the formula as supporting detail */
.ce-formula {
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-m);
  background: var(--fill-faint);
}
.ce-formula > span {
  display: block;
  font-size: var(--text-caption-1-size);
  font-weight: 600;
  color: var(--text-secondary);
}
.ce-formula code {
  display: block;
  margin-top: 2px;
  font-family: inherit;
  font-size: var(--text-subhead-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* FAQ: question 17 semibold, answer 15, chevron */
.ce-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-48);
  border-top: 1px solid var(--stroke-separator);
}
.ce-faq-list {
  border-radius: var(--radius-card);
  background: var(--surface-card);
  padding: 0 var(--space-24);
}
.ce-faq-item {
  border-bottom: 1px solid var(--stroke-separator);
}
.ce-faq-item:last-child {
  border-bottom: 0;
}
.ce-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  min-height: 60px;
  font-size: var(--text-headline-size);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ce-faq-item summary::-webkit-details-marker {
  display: none;
}
.ce-faq-item summary .icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: transform var(--motion-release) var(--ease-standard);
}
.ce-faq-item[open] summary .icon {
  transform: rotate(180deg);
}
.ce-faq-answer {
  padding-bottom: var(--space-20);
  font-size: var(--text-subhead-size);
  line-height: 1.6;
  color: var(--text-secondary);
}
.ce-faq-answer .weight-list {
  margin-top: var(--space-12);
}
.has-result .ce-entry {
  padding-bottom: var(--space-32);
}
.has-result .ce-guide {
  display: none;
}

@media (max-width: 1050px) {
  .ce-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ce-steps .ce-card::after {
    display: none;
  }
  .ce-model,
  .ce-faq {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
  .ce-score-card {
    position: static;
  }
}
@media (max-width: 700px) {
  .ce-entry {
    padding: 56px 0 40px;
    text-align: left;
  }
  .ce-entry-inner {
    justify-items: start;
  }
  .ce-search {
    flex-direction: column;
  }
  .ce-search .ce-button {
    width: 100%;
  }
  .ce-sample-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ce-cards.three,
  .ce-sources-card {
    grid-template-columns: 1fr;
  }
  .ce-steps {
    grid-template-columns: 1fr;
  }
  .ce-section {
    padding: var(--space-48) 0;
  }
  .ce-weight-bar span {
    display: none;
  }
}

/* ---------- Report (after a lookup) ---------- */
html:root .report {
  padding-top: var(--space-24);
}
html:root .report-heading {
  align-items: flex-end;
}
html:root .report-heading h2 {
  margin: 0;
  font-size: var(--text-title-1-size);
  font-weight: 700;
  line-height: 1.3;
}
html:root .report-identity {
  gap: var(--space-12);
  margin-top: var(--space-8);
  font-size: var(--text-subhead-size);
  color: var(--text-secondary);
}
.ce-text-button,
html:root .report-identity button {
  height: 32px;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--fill-subtle);
  color: var(--text-primary);
  font: 600 var(--text-footnote-size) / 1 var(--font-sans);
  cursor: pointer;
}
html:root .report-meta {
  font-size: var(--text-footnote-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Report tabs: top tab with a navy underline (v1 selection) */

/* Data note: a v1 warning alert */
html:root .data-note {
  margin-bottom: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border: 0;
  border-radius: var(--radius-l);
  background: var(--warning-bg);
  color: var(--text-primary);
  font-size: var(--text-subhead-size);
}
/* Summary: the score is the inverse panel (log.md · 반전 면: 점수 요약 패널); net assets a white card */
html:root .summary-grid {
  gap: var(--space-16);
}
html:root .summary-grid .score-panel {
  padding: var(--space-32);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}
html:root .summary-grid .balance-panel {
  padding: var(--space-32);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  color: var(--text-primary);
}
html:root .panel-label h3 {
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: inherit;
}
html:root .score-panel .panel-label h3 {
  color: var(--inv-secondary);
}
html:root .score-panel .small-pill {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--inv-separator);
  color: var(--text-on-inverse);
  font-size: var(--text-caption-1-size);
  font-weight: 600;
}
html:root .score-display {
  align-items: baseline;
  margin-top: var(--space-16);
}
html:root .score-number {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-title);
  color: var(--text-on-inverse);
}
html:root .score-total {
  font-size: var(--text-headline-size);
  color: var(--inv-secondary);
}
html:root .grade-badge {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-align: left;
}
html:root .grade-badge strong {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-full);
  background: var(--text-on-inverse);
  color: var(--surface-inverse);
  font-size: var(--text-subhead-size);
  font-weight: 700;
}
html:root .grade-badge span {
  font-size: var(--text-subhead-size);
  color: var(--inv-secondary);
}
html:root .score-explanation {
  margin-top: var(--space-12);
  font-size: var(--text-subhead-size);
  line-height: 1.5;
  color: var(--inv-secondary);
}
html:root .score-track {
  height: 8px;
  margin-top: var(--space-24);
  border-radius: var(--radius-full);
  background: var(--inv-separator);
}
html:root .score-track > div {
  height: 100%;
  border-radius: inherit;
  background: var(--text-on-inverse);
}
html:root .score-scale {
  margin-top: var(--space-8);
  font-size: var(--text-caption-1-size);
  color: var(--inv-secondary);
}
html:root .score-bottom {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid var(--inv-separator);
  font-size: var(--text-footnote-size);
  color: var(--inv-secondary);
}
.ce-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--text-on-inverse);
}
.ce-link .icon {
  width: 16px;
  height: 16px;
}
html:root .balance-number {
  margin-top: var(--space-16);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
html:root .balance-caption {
  margin-top: var(--space-4);
  font-size: var(--text-subhead-size);
  color: var(--text-secondary);
}
html:root .balance-ledger {
  margin-top: var(--space-20);
}
html:root .balance-ledger > div {
  min-height: 48px;
  border-top: 1px solid var(--stroke-separator);
  font-size: var(--text-subhead-size);
}
html:root .balance-ledger dt {
  color: var(--text-secondary);
}
html:root .balance-ledger dd {
  font-weight: 600;
  color: var(--text-primary);
}
html:root .active-chains {
  padding-top: var(--space-12);
  border-top: 1px solid var(--stroke-separator);
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
/* Section heads inside the report: same as the page sections */
html:root .report .section-heading {
  display: block;
  margin: var(--space-48) 0 var(--space-16);
}
html:root .report .section-heading h2 {
  margin: 0;
  font-size: var(--text-title-2-size);
  font-weight: 700;
  line-height: 1.3;
}
html:root .report .section-heading p {
  max-width: 40em;
  margin-top: var(--space-4);
  font-size: var(--text-subhead-size);
  color: var(--text-secondary);
}

/* Risk indicators: cards with value and a status badge */
html:root .risk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  border: 0;
}
html:root .risk-item {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-8);
  padding: var(--space-20);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
html:root .risk-label {
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--text-secondary);
}
html:root .risk-number {
  font-size: var(--text-title-2-size);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:root .risk-description {
  font-size: var(--text-footnote-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
html:root .status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-caption-1-size);
  font-weight: 700;
  white-space: nowrap;
}
html:root .status .icon {
  width: 14px;
  height: 14px;
}
html:root .status.good {
  background: var(--success-bg);
  color: var(--success-text);
}
html:root .status.good .icon {
  color: var(--success-fill);
}
/* warning badges: the label stays in the text colour (amber-700 text reads as muddy brown);
   the amber triangle carries the state, the same icon as the summary's risk count */
html:root .status.warn {
  background: var(--warning-bg);
  color: var(--text-primary);
}
html:root .status.warn .icon {
  color: var(--warning-fill);
}
html:root .status.bad {
  background: var(--error-bg);
  color: var(--error-text);
}
html:root .status.bad .icon {
  color: var(--error-fill);
}
html:root .status.na {
  padding-left: 10px;
  background: var(--fill-subtle);
  color: var(--text-secondary);
}
/* Disclosures (reference terms, stress): white cards */
html:root :is(.terms-section, .stress-section) {
  margin-top: var(--space-12);
  padding: 0 var(--space-20);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
html:root :is(.terms-section, .stress-section) > summary {
  align-items: center;
  min-height: 64px;
  padding: var(--space-16) 0;
  font-size: var(--text-headline-size);
  font-weight: 600;
}
html:root body .stress-section > summary .icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: transform var(--motion-release) var(--ease-standard);
}
html:root body .stress-section[open] > summary .icon {
  transform: rotate(180deg);
}
html:root .terms-section summary h3 {
  font-size: var(--text-headline-size);
  font-weight: 600;
}
html:root .terms-section summary p {
  margin-top: 2px;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .stress-row {
  min-height: 56px;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--stroke-separator);
  font-size: var(--text-subhead-size);
}
html:root .stress-row small,
html:root .terms-content > p,
html:root .detail-note {
  font-size: var(--text-footnote-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Factor breakdown: one card, name and reason on the left, score, bar and weight on the right */
html:root .factor-list {
  padding: 0 var(--space-24);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
html:root .factor-row {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
  gap: var(--space-32);
  align-items: center;
  padding: var(--space-20) 0;
  border-bottom: 1px solid var(--stroke-separator);
}
html:root .factor-row:last-child {
  border-bottom: 0;
}
html:root .factor-name {
  font-size: var(--text-headline-size);
  font-weight: 600;
  line-height: 1.5;
}
html:root .factor-description {
  margin-top: 2px;
  font-size: var(--text-subhead-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
html:root .factor-score-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
html:root .factor-score-top strong {
  font-size: var(--text-headline-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html:root .factor-score-top strong span,
html:root .factor-score-top > span {
  font-size: var(--text-footnote-size);
  font-weight: 400;
  color: var(--text-secondary);
}
html:root .factor-track {
  height: 6px;
  margin-top: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--fill-default);
}
html:root .factor-track i {
  border-radius: inherit;
  background: var(--text-primary);
}
/* Positions: empty state card; the table is always Compact (log.md · 글자) */
html:root .empty-position {
  display: grid;
  justify-items: center;
  gap: var(--space-8);
  padding: var(--space-40) var(--space-24);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  text-align: center;
}
html:root .empty-position h3 {
  margin-top: var(--space-8);
  font-size: var(--text-headline-size);
  font-weight: 600;
}
html:root .empty-position p {
  font-size: var(--text-subhead-size);
  color: var(--text-secondary);
}
html:root .position-table-wrap {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
html:root .position-table-wrap th {
  height: 40px;
  padding: 0 var(--space-16);
  background: transparent;
  border-bottom: 1px solid var(--stroke-separator);
  font-size: var(--text-caption-1-size);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
}
html:root .position-table-wrap td {
  height: 48px;
  padding: 0 var(--space-16);
  border-bottom: 1px solid var(--stroke-separator);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
html:root .position-table-wrap :is(th, td):first-child {
  text-align: left;
}
html:root .position-table-wrap tr:last-child td {
  border-bottom: 0;
}
html:root .instrument-name {
  font-weight: 600;
}
html:root .instrument-meta {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .positive {
  color: var(--market-up);
}
html:root .negative {
  color: var(--market-down);
}
/* RWA: one card, the total on top, holdings as rows */
html:root .rwa-summary {
  display: block;
  padding: var(--space-16) 0 var(--space-20);
  border: 0;
  border-bottom: 1px solid var(--stroke-separator);
  background: none;
}
html:root .rwa-summary > span {
  display: block;
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
html:root .rwa-summary strong {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-title-1-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
html:root .rwa-holdings {
  padding: 0;
  background: none;
}
html:root .rwa-row {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid var(--stroke-separator);
  font-size: var(--text-subhead-size);
  font-variant-numeric: tabular-nums;
}
html:root .rwa-row:last-child {
  border-bottom: 0;
}
html:root .rwa-row small {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .report > .detail-note,
html:root .report-section > .detail-note {
  margin-top: var(--space-12);
}
@media (max-width: 900px) {
  html:root .risk-grid {
    grid-template-columns: 1fr 1fr;
  }
  html:root .factor-row {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}
@media (max-width: 600px) {
  html:root .risk-grid {
    grid-template-columns: 1fr;
  }
  html:root .score-number {
    font-size: 52px;
  }
  html:root .balance-number {
    font-size: 36px;
  }
}
html:root .score-bottom .ce-link {
  color: var(--text-on-inverse);
}
html:root .factor-description {
  margin-left: 0;
  padding-left: 0;
}
html:root .factor-row > div:first-child {
  padding-left: 0;
}

/* In the app, red means only up, error and the logo dot (log.md · 브랜드 레드의 쓰임) */
html:root .ce-display .accent {
  color: inherit;
}
html:root footer {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
@media (max-width: 700px) {
  html:root .ce-search .address-field {
    flex: none;
    width: 100%;
  }
}

/* Report tabs: same language as the header nav. A pill row on the page colour;
   the current section is a white pill (v1 selection on a grey surface). */
html:root .report-nav {
  position: sticky;
  top: 80px;
  z-index: 20;
  display: flex;
  gap: var(--space-4);
  margin: var(--space-24) 0;
  padding: var(--space-8) 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--bg-grouped) 88%, transparent);
  -webkit-backdrop-filter: var(--blur-bar);
  backdrop-filter: var(--blur-bar);
  border: 0;
}
html:root .report-nav::-webkit-scrollbar {
  display: none;
}
html:root .report-nav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 36px;
  padding: 0 var(--space-16);
  border: 0;
  border-radius: var(--radius-m);
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
html:root .report-nav a:hover {
  color: var(--text-primary);
  background-image: linear-gradient(color-mix(in srgb, currentColor calc(var(--state-hover-soft) * 100%), transparent) 0 0);
}
html:root .report-nav a.active {
  color: var(--text-primary);
  background-color: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
html:root .report-nav a:focus-visible {
  outline: var(--stroke-width-focus) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
@media (max-width: 700px) {
  html:root .report-nav {
    top: 97px; /* under the two-row phone header: 96 + its hairline */
  }
}

/* Data status: one card. Two figures, then network responses, then data sources. */
.source-card {
  padding: var(--space-8) var(--space-24) var(--space-12);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
html:root .source-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  padding: var(--space-16) 0 var(--space-20);
  border-bottom: 1px solid var(--stroke-separator);
}
html:root .source-summary span {
  display: block;
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
html:root .source-summary strong {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-title-1-size);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.source-heading {
  margin-top: var(--space-20);
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
html:root .source-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-32);
  margin-top: var(--space-4);
}
html:root .source-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  min-height: 48px;
  border-bottom: 1px solid var(--stroke-separator);
  font-size: var(--text-subhead-size);
}
html:root .source-info {
  margin: var(--space-4) 0 0;
}
html:root .source-info > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  min-height: 48px;
  border-bottom: 1px solid var(--stroke-separator);
  font-size: var(--text-subhead-size);
}
html:root .source-info > div:last-child {
  border-bottom: 0;
}
html:root .source-info dt {
  color: var(--text-secondary);
}
html:root .source-info dd {
  margin: 0;
  color: var(--text-primary);
  text-align: right;
}
.source-card + .detail-note {
  margin-top: var(--space-12);
}
@media (max-width: 600px) {
  html:root .source-list {
    grid-template-columns: 1fr;
  }
  html:root .source-info > div {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: var(--space-8) 0;
  }
  html:root .source-info dd {
    text-align: left;
  }
}

/* Reference terms: three figure tiles instead of lines pressed against the text */
html:root .terms-content {
  padding-bottom: var(--space-20);
}
html:root .terms-content dl {
  gap: var(--space-12);
  padding: 0 0 var(--space-16);
}
html:root .terms-content dl > div {
  padding: var(--space-16);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--fill-faint);
}
html:root .terms-content dt {
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
html:root .terms-content dd {
  margin-top: var(--space-4);
  font-size: var(--text-title-2-size);
  font-weight: 700;
  line-height: 1.3;
}
@media (max-width: 600px) {
  html:root .terms-content dl {
    grid-template-columns: 1fr;
  }
}
.sample-rwa .samples {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rwa-classes {
  margin: -8px 0 18px;
  font-size: 12px;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .sample-rwa .samples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Method cards: the closing row (fields read, formula) sits on the same baseline in every card */
.ce-cards > .ce-card {
  display: flex;
  flex-direction: column;
}
.ce-cards > .ce-card > p:not([class]) {
  margin-bottom: var(--space-16);
}
.ce-cards > .ce-card > :is(.ce-meta, .ce-formula) {
  margin-top: auto;
}

/* Price-move estimates: one tile per figure. Label, value, then what it assumes. */
html:root .stress-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-12);
  padding-bottom: var(--space-16);
}
html:root .stress-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-16);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--fill-faint);
}
html:root .stress-row > div {
  display: contents;
}
html:root .stress-row div > span {
  order: 1;
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
html:root .stress-row strong {
  order: 2;
  font-size: var(--text-title-2-size);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:root .stress-row small {
  order: 3;
  margin: 0;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .stress-section > .detail-note {
  margin: 0 0 var(--space-20);
}

/* Treasuries and gold split: its own line under the total, clear of the separator */
html:root .rwa-classes {
  margin: var(--space-12) 0 var(--space-4);
  font-size: var(--text-subhead-size);
  color: var(--text-secondary);
}
html:root .rwa-card .rwa-summary {
  border-bottom: 0;
  padding-bottom: 0;
}
html:root .rwa-holdings:not(:empty) {
  margin-top: var(--space-12);
  border-top: 1px solid var(--stroke-separator);
}

/* Entry, two columns: the task on the left, what you get on the right (an example result that
   runs a lookup in one click). A faint gauge arc from the logo sits behind the preview. */
html:root .ce-entry {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  text-align: left;
}
html:root .ce-entry::before {
  content: "";
  position: absolute;
  right: -12vw;
  top: -18vw;
  width: 62vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(36px, 5vw, 80px) solid color-mix(in srgb, var(--text-primary) 4%, transparent);
  border-bottom-color: transparent;
  border-right-color: transparent;
  transform: rotate(-20deg);
  pointer-events: none;
}
html:root .ce-entry-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  justify-items: stretch;
}
.ce-entry-main {
  display: grid;
  justify-items: start;
  min-width: 0;
}
html:root .ce-entry .ce-lead {
  margin-inline: 0;
}
html:root .ce-search,
html:root .ce-hint,
html:root .ce-samples,
html:root .ce-entry .loading {
  width: 100%;
  max-width: 640px;
}
html:root .ce-sample-row {
  grid-template-columns: 132px 1fr;
}

.ce-preview {
  display: grid;
  gap: var(--space-16);
  padding: var(--space-24);
  border-radius: var(--radius-sheet);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}
.ce-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ce-preview-wallet {
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--text-secondary);
}
.ce-preview-gauge {
  position: relative;
  width: min(260px, 100%);
  margin: 0 auto;
}
.ce-preview-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pg-track,
.pg-value {
  fill: none;
  stroke-width: 0.9;
  stroke-linecap: round;
}
.pg-track {
  stroke: var(--fill-default);
}
.pg-value {
  stroke: var(--text-primary);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--f));
  animation: pg-draw 1200ms var(--ease-standard) 200ms both;
}
.pg-dot {
  fill: var(--action-brand);
  animation: pg-dot 500ms var(--ease-standard) 1300ms both;
}
@keyframes pg-draw {
  from {
    stroke-dashoffset: 1;
  }
}
@keyframes pg-dot {
  from {
    opacity: 0;
  }
}
.ce-preview-score {
  position: absolute;
  inset: 26% 0 auto;
  display: grid;
  justify-items: center;
  gap: 2px;
}
.ce-preview-score b {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
}
.ce-preview-score span {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
.ce-preview-score em {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  font-size: var(--text-caption-1-size);
  font-style: normal;
  font-weight: 700;
}
.ce-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
}
.ce-preview-stats > div {
  padding: var(--space-12);
  border-radius: var(--radius-m);
  background: var(--fill-faint);
}
.ce-preview-stats dt {
  font-size: var(--text-caption-1-size);
  font-weight: 600;
  color: var(--text-secondary);
}
.ce-preview-stats dd {
  margin: 2px 0 0;
  font-size: var(--text-headline-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ce-preview-cta {
  width: 100%;
}
.ce-preview-note {
  font-size: var(--text-footnote-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .pg-value,
  .pg-dot {
    animation: none;
  }
}
@media (max-width: 1050px) {
  html:root .ce-entry-inner {
    grid-template-columns: 1fr;
  }
  .ce-preview {
    max-width: 520px;
  }
}
.pg-track,
.pg-value {
  stroke-width: 0.5;
}
.pg-dot {
  r: 0.36;
}
.ce-preview-gauge {
  width: min(240px, 100%);
}
.ce-preview-score {
  inset: auto 0;
  top: 54.2%;
  transform: translateY(-50%);
}
.ce-preview-score b {
  font-size: 44px;
}
html:root .ce-entry::before {
  right: -14vw;
  top: -6vw;
  width: 44vw;
  border-width: clamp(28px, 3.6vw, 56px);
}

/* English titles: tighter leading and tracking than Korean (Latin x-height is lower) */
html[lang="en"]:root .ce-display {
  line-height: 1.12;
  letter-spacing: -0.03em;
}
html[lang="en"]:root :is(.ce-section-head h2, .report-heading h2, .report .section-heading h2) {
  line-height: 1.18;
  letter-spacing: -0.025em;
}
html[lang="en"]:root :is(.ce-card h3, .ce-factor-head h3, .factor-name, .ce-faq-item summary) {
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* Positions table: room around two-line cells; side (long/short) as a small tag after the
   instrument; venue on its own line. Table text stays Compact (log.md). */
html:root .position-table-wrap td {
  height: auto;
  padding: var(--space-12) var(--space-16);
  vertical-align: middle;
}
html:root .position-table-wrap th {
  padding: var(--space-12) var(--space-16);
}
html:root .position-table-wrap td:first-child {
  min-width: 150px;
}
html:root .instrument-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
html:root .instrument-name > span {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
html:root .instrument-name > .positive {
  background: color-mix(in srgb, var(--market-up) 10%, transparent);
}
html:root .instrument-name > .negative {
  background: color-mix(in srgb, var(--market-down) 10%, transparent);
}
html:root .instrument-meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
}
html:root .position-table-wrap tbody tr:hover td {
  background: var(--fill-faint);
}
/* Model disclaimer under the estimates: a footnote with its own rule, not a stray line */
html:root .stress-section > .detail-note {
  margin: 0;
  padding: var(--space-12) 0 var(--space-16);
  border-top: 1px solid var(--stroke-separator);
}

/* Five steps as one flow: numbered nodes on a line, what each step produces below it */
.ce-flow {
  padding: var(--space-32) var(--space-24);
}
.ce-flow ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ce-flow ol::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--text-primary), color-mix(in srgb, var(--text-primary) 25%, transparent));
}
.ce-flow li {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-4);
  text-align: center;
}
.ce-flow-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--action-primary);
  color: var(--action-on-primary);
  box-shadow: 0 0 0 6px var(--surface-card);
}
.ce-flow-node .icon {
  width: 22px;
  height: 22px;
}
.ce-flow-no {
  position: absolute;
  top: -6px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1.5px var(--text-primary);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ce-flow h3 {
  margin: 0;
  font-size: var(--text-headline-size);
  font-weight: 600;
}
.ce-flow p {
  font-size: var(--text-subhead-size);
  color: var(--text-secondary);
}
.ce-flow-out {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-top: var(--space-8);
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  font-size: var(--text-caption-1-size);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* What the engine reads: three groups with an icon, a count and colour-dot chips */
.ce-coverage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-12);
}
.ce-coverage .ce-card {
  padding: var(--space-20);
}
.ce-coverage header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
.ce-coverage header h3 {
  flex: 1;
  margin: 0;
  font-size: var(--text-headline-size);
}
.ce-coverage header b {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  font-size: var(--text-footnote-size);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1050px) {
  .ce-flow ol {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }
  .ce-flow ol::before {
    top: 24px;
    bottom: 24px;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
    background: var(--stroke-strong);
  }
  .ce-flow li {
    grid-template-columns: 48px 1fr;
    justify-items: start;
    column-gap: var(--space-16);
    text-align: left;
  }
  .ce-flow-node {
    grid-row: span 3;
    margin: 0;
  }
  .ce-flow-out {
    grid-column: 2;
    margin-top: var(--space-4);
  }
  .ce-coverage {
    grid-template-columns: 1fr;
  }
}

/* Report summary: score as a gauge on the inverse panel, four key numbers beside it */
.ce-sum {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-16);
}
.ce-sum-score {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-32);
  border-radius: var(--radius-card);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}
.ce-sum-score header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ce-sum-score h3 {
  margin: 0;
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--inv-secondary);
}
.ce-sum-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--inv-separator);
  font-size: var(--text-caption-1-size);
  font-weight: 600;
}
.ce-sum-gauge {
  position: relative;
  width: min(280px, 100%);
  margin: 0 auto;
}
.ce-sum-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.sg-track,
.sg-value {
  fill: none;
  stroke-width: 0.5;
  stroke-linecap: round;
}
.sg-track {
  stroke: var(--inv-separator);
}
.sg-value {
  stroke: var(--text-on-inverse);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--f, 0));
  transition: stroke-dashoffset 1200ms var(--ease-standard) 150ms;
}
.sg-dot {
  fill: var(--action-brand);
  opacity: 0;
}
.ce-sum-gauge.is-drawn .sg-dot {
  opacity: 1;
  transition: opacity 400ms var(--ease-standard) 1250ms;
}
.ce-sum-value {
  position: absolute;
  inset: auto 0;
  top: 54%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
}
.ce-sum-value > b {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
}
.ce-sum-value > span {
  font-size: var(--text-footnote-size);
  color: var(--inv-secondary);
}
.ce-sum-grade {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-8);
}
.ce-sum-grade strong {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--text-on-inverse);
  color: var(--surface-inverse);
  font-size: var(--text-caption-1-size);
  font-weight: 700;
}
.ce-sum-grade span {
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--inv-secondary);
}
.ce-sum-scale {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  font-size: var(--text-caption-1-size);
  color: var(--inv-tertiary);
  font-variant-numeric: tabular-nums;
}
.ce-sum-factors {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--inv-separator);
}
.ce-sum-factors > div {
  display: grid;
  gap: 2px;
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--inv-separator);
}
.ce-sum-factors dt {
  font-size: var(--text-caption-1-size);
  font-weight: 600;
  color: var(--inv-tertiary);
}
.ce-sum-factors dd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-12);
  margin: 0;
  font-size: var(--text-subhead-size);
  font-weight: 600;
}
.ce-sum-factors dd b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ce-sum-factors dd small {
  font-size: var(--text-caption-1-size);
  font-weight: 500;
  color: var(--inv-tertiary);
}
html:root .ce-sum-score .ce-link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--text-on-inverse);
}
.ce-sum-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}
.ce-sum-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
.ce-sum-tile h3 {
  margin: 0;
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--text-secondary);
}
.ce-sum-num {
  margin: var(--space-4) 0 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ce-sum-sub {
  margin-top: auto;
  padding-top: var(--space-12);
  font-size: var(--text-footnote-size);
  line-height: 1.5;
  color: var(--text-secondary);
}
.ce-sum-sub b {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ce-sum-sub .status {
  margin-right: 4px;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .sg-value,
  .ce-sum-gauge.is-drawn .sg-dot {
    transition: none;
  }
}
@media (max-width: 1050px) {
  .ce-sum {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .ce-sum-tiles {
    gap: var(--space-8);
  }
  .ce-sum-tile {
    padding: var(--space-16);
  }
  .ce-sum-num {
    font-size: 26px;
  }
}
.ce-sum-tile header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
}
.ce-sum-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-m);
  background: var(--fill-faint);
  color: var(--text-primary);
}
.ce-sum-icon .icon {
  width: 20px;
  height: 20px;
}
.ce-sum-gauge {
  width: min(248px, 100%);
}
.ce-sum-score {
  gap: var(--space-16);
  padding: var(--space-24) var(--space-32);
}

/* Logos: the mark sits on a white disc with a hairline so every brand colour reads the same way */
.ce-logo {
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
  object-fit: contain;
}
.ce-logo.is-mark {
  background: var(--fill-default);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.ce-logos {
  display: grid;
  gap: var(--space-16) var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ce-logos.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ce-logos li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}
.ce-logos .ce-logo {
  width: 40px;
  height: 40px;
  padding: 6px;
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--stroke-separator);
}
.ce-logos .ce-logo.is-mark {
  padding: 0;
  background: var(--fill-subtle);
  box-shadow: none;
  font-size: var(--text-subhead-size);
}
.ce-logos .ce-logo.is-treasury {
  background: color-mix(in srgb, var(--chart-2) 14%, transparent);
  color: color-mix(in srgb, var(--chart-2) 70%, var(--text-primary));
}
.ce-logos li > span {
  display: grid;
  min-width: 0;
}
.ce-logos b {
  font-size: var(--text-subhead-size);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ce-logos small {
  font-size: var(--text-caption-1-size);
  line-height: 1.4;
  color: var(--text-secondary);
}
.ce-logos-label {
  margin: 0 0 var(--space-12);
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
.ce-logos + .ce-logos-label {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid var(--stroke-separator);
}
/* Chip (log: 32px, radius 8, fill-subtle, no outline) with a logo in front */
.ce-sum-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 6px;
  border-radius: var(--radius-s);
  background: var(--fill-subtle);
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-primary);
}
.ce-sum-chip .ce-logo {
  width: 20px;
  height: 20px;
  padding: 1px;
  background: var(--surface-card);
}
html:root .instrument-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html:root .instrument-meta .ce-logo {
  width: 16px;
  height: 16px;
}

/* Coin-style logos: each brand mark on its own colour, clipped to a circle; letter marks match */
.ce-logos .ce-logo {
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  box-shadow: none;
}
.ce-logos .ce-logo.is-mark {
  background: var(--action-primary);
  color: var(--action-on-primary);
  font-size: var(--text-subhead-size);
}
.ce-logos .ce-logo.is-treasury {
  background: var(--chart-2);
  color: var(--white, #fff);
}
.ce-sum-chip .ce-logo {
  padding: 0;
  background: none;
}
.ce-sum-chip .ce-logo.is-mark,
html:root .instrument-meta .ce-logo.is-mark {
  background: var(--action-primary);
  color: var(--action-on-primary);
  font-size: 10px;
}
.ce-coverage {
  align-items: stretch;
}

/* Active chains: overlapping coin logos beside the count, names below */
.ce-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.ce-stack {
  display: flex;
  padding-left: 8px;
}
.ce-stack .ce-logo {
  width: 32px;
  height: 32px;
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--surface-card);
}
.ce-stack .ce-logo.is-mark {
  background: var(--action-primary);
  color: var(--action-on-primary);
  font-size: 12px;
}
#active-chains span + span::before {
  content: " · ";
}

/* Positions: coin logo before the instrument */
.ce-inst {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.ce-inst > div {
  display: grid;
  gap: 2px;
}
.ce-inst > .ce-logo {
  width: 32px;
  height: 32px;
}
.ce-inst > .ce-logo.is-mark {
  background: var(--action-primary);
  color: var(--action-on-primary);
  font-size: 13px;
}
.ce-logos small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Separators: a line goes between rows of a list or table (the eye travels from label to value)
   and between zones inside one card. No line between page sections, between cards, above a
   note, or after the last row where the card edge already closes the group. */
html:root body :is(
  .loading, .intro-guide, .ce-samples, .ce-section, .ce-faq,
  .factor-list, .stress-section, .stress-row, .stress-section > .detail-note, .terms-section,
  .risk-grid, .risk-item, .rwa-holdings
) {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
html:root body :is(
  .factor-row, .ce-factors li, .ce-grades li, .weight-list li, .source-item, .source-info > div,
  .rwa-row, .ce-sum-factors > div
):last-child {
  border-bottom: 0 !important;
}
html:root body .position-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* Spacing, one scale for the report: section 64 · heading→content 16 · card↔card 16 ·
   tiles inside a card 12 · card→note 12 · card padding 24 */
html:root body #results > .report-section {
  padding-top: 0;
  margin-top: var(--space-64);
}
html:root body #results > .risk-section {
  margin-top: var(--space-64);
}
html:root body #results > .terms-section,
html:root body .position-table-wrap + .stress-section {
  margin-top: var(--space-16);
}
html:root body :is(.risk-grid, .ce-coverage) {
  gap: var(--space-16);
}
html:root body .ce-coverage {
  margin-top: var(--space-16);
}
html:root body :is(.ce-sum-score, .ce-sum-tile, .risk-item, .ce-coverage .ce-card) {
  padding: var(--space-24);
}
html:root body :is(.terms-section, .stress-section, .factor-list) {
  padding-left: var(--space-24);
  padding-right: var(--space-24);
}
html:root body .source-card {
  padding: var(--space-8) var(--space-24);
}

/* Two-column network list: the last row of the left column closes too */
html:root body .source-item:nth-last-child(2):nth-child(odd) {
  border-bottom: 0 !important;
}
/* Data status: the metrics and the source list are set apart by space */
html:root body :is(.source-summary, .source-info > div) {
  border-bottom: 0 !important;
  border-top: 0 !important;
}

/* Position cards exist for phones only */
.ce-pos-cards {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ───── Phones (≤640px) ─────
   One layer on the v1 scale, written last so it wins over older phone rules.
   Text: body 15, secondary 13, smallest 12. Taps: 44. Page gutter 20. Cards pad 20, gap 12. */
@media (max-width: 640px) {
  /* Entry: input first, then the example result (the thing to tap), then the example list */
  html:root body .ce-entry-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* the desktop grid centres rows; in a column that centred a one-line title */
    gap: 0;
  }
  html:root body .ce-entry-main {
    display: contents;
  }
  /* the example result is a teaser people can scroll past: it leads, the form follows */
  html:root body .ce-preview {
    order: -1;
    max-width: none;
    margin: 0 0 var(--space-32);
    padding: var(--space-20);
  }
  html:root body .ce-samples {
    order: 2;
    margin-top: var(--space-32);
  }
  html:root body .ce-sample-row {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  html:root body .ce-sample-label {
    font-size: var(--text-footnote-size);
  }
  html:root body .ce-preview-gauge {
    width: min(208px, 100%);
  }
  html:root body .brand {
    padding: 10px 0;
    margin: -10px 0;
  }

  /* Report text: nothing under 12px */
  html:root body #results :is(.section-heading p, .risk-description, .factor-description) {
    font-size: var(--text-footnote-size);
    line-height: 1.5;
  }
  html:root body #results :is(.risk-label, .status, .factor-score-top) {
    font-size: var(--text-footnote-size);
  }
  html:root body #results .factor-name {
    font-size: var(--text-subhead-size);
  }

  /* Summary: the score card, then the four numbers as one list (label left, number right) */
  html:root body .ce-sum .ce-sum-score {
    padding: var(--space-20);
  }
  html:root body .ce-sum-gauge {
    width: min(232px, 100%);
  }
  html:root body .ce-sum-tiles {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--space-4) var(--space-20);
    border-radius: var(--radius-card);
    background: var(--surface-card);
  }
  html:root body .ce-sum-tiles .ce-sum-tile {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title num"
      "icon sub   sub";
    column-gap: var(--space-12);
    row-gap: 2px;
    align-items: center;
    padding: var(--space-16) 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--stroke-separator);
  }
  html:root body .ce-sum-tile:last-child {
    border-bottom: 0;
  }
  html:root body .ce-sum-tile header {
    display: contents;
  }
  html:root body .ce-sum-tile h3 {
    grid-area: title;
    font-size: var(--text-subhead-size);
  }
  html:root body .ce-sum-icon {
    grid-area: icon;
    align-self: start;
  }
  html:root body .ce-sum-num {
    grid-area: num;
    margin: 0;
    font-size: var(--text-title-3-size);
    text-align: right;
  }
  html:root body .ce-sum-sub {
    grid-area: sub;
    margin: 0;
    padding: 0;
    font-size: var(--text-footnote-size);
  }
  html:root body .ce-sum-row {
    gap: var(--space-8);
  }
  html:root body .ce-stack .ce-logo {
    width: 22px;
    height: 22px;
    margin-left: -6px;
  }

  /* Risk indicators: two per row */
  html:root body .risk-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  html:root body .risk-item {
    padding: var(--space-16) !important;
    border: 0 !important;
  }
  html:root body .risk-number {
    font-size: var(--text-title-3-size);
  }

  /* Factor rows: score and bar align with the title */
  html:root body :is(.factor-description, .factor-measure) {
    margin-left: 0;
  }
  html:root body .factor-row {
    gap: var(--space-12);
    padding: var(--space-20) 0;
  }

  /* Positions: cards instead of a sideways-scrolling table */
  html:root body .position-table-wrap {
    display: none;
  }
  html:root body .ce-pos-cards {
    display: grid;
    gap: var(--space-12);
  }
  html:root body .ce-pos-cards:empty {
    display: none;
  }
  html:root body .ce-pos-cards + .stress-section {
    margin-top: var(--space-16);
  }
  .ce-pos-card {
    padding: var(--space-20);
    border-radius: var(--radius-card);
    background: var(--surface-card);
  }
  .ce-pos-card header {
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }
  .ce-pos-card .ce-logo {
    width: 40px;
    height: 40px;
  }
  .ce-pos-name {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .ce-pos-pnl {
    display: grid;
    justify-items: end;
    gap: 2px;
  }
  .ce-pos-pnl small {
    font-size: var(--text-caption-1-size);
    color: var(--text-secondary);
  }
  .ce-pos-pnl b {
    font-size: var(--text-headline-size);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ce-pos-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12) var(--space-16);
    margin: var(--space-16) 0 0;
    padding-top: var(--space-16);
    border-top: 1px solid var(--stroke-separator);
  }
  .ce-pos-card dt {
    font-size: var(--text-caption-1-size);
    color: var(--text-secondary);
  }
  .ce-pos-card dd {
    margin: 2px 0 0;
    font-size: var(--text-subhead-size);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Stress estimates: two per row, the odd one out spans */
  html:root body .stress-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  html:root body .stress-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Intro: five-step flow joins node to node only; coverage lists two across */
  html:root body .ce-flow ol::before {
    display: none;
  }
  html:root body .ce-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: calc(-1 * var(--space-20) + 4px);
    width: 2px;
    background: var(--stroke-strong);
  }
  html:root body .ce-coverage .ce-logos {
    grid-template-columns: 1fr 1fr;
  }
  html:root body .ce-coverage .ce-card {
    padding: var(--space-20);
  }
  html:root body .ce-coverage .ce-logos .ce-logo {
    width: 36px;
    height: 36px;
  }
}
html:root body .ce-pos-cards + .stress-section {
  margin-top: var(--space-16);
}
@media (max-width: 640px) {
  html:root body .ce-section {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
  }
  html:root body .ce-chip {
    min-height: 36px;
  }
}
@media (max-width: 640px) {
  /* Smallest text 12; taps 44 */
  html:root body :is(.instrument-name .positive, .instrument-name .negative, .ce-flow-no) {
    font-size: var(--text-caption-1-size);
  }
  html:root body .weight-list :is(span, strong) {
    font-size: var(--text-footnote-size);
  }
  html:root body .footer-inner :is(p, span) {
    font-size: var(--text-caption-1-size);
  }
  html:root body :is(.ce-sources > summary, .footer-inner a) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  html:root body .clear-input {
    width: 44px;
    height: 44px;
  }
}

/* Gray button (secondary): navy text on a light fill */
.ce-button.ghost {
  background-color: var(--fill-subtle);
  color: var(--text-primary);
}
.ce-button.ghost:hover {
  --o: var(--state-hover-soft);
}
.ce-button.ghost:active {
  --o: var(--state-pressed-soft);
  transform: scale(var(--state-press-scale));
}
.ce-button.small {
  height: var(--control-s);
  padding: 0 var(--space-12);
  border-radius: var(--radius-s);
  font-size: var(--text-footnote-size);
}
.ce-button .icon {
  width: 16px;
  height: 16px;
}

/* Report heading: a small title, then the wallet itself with its copy action beside it */
html:root body .report-heading {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
html:root body .report-heading h2 {
  margin: 0;
  font-size: var(--text-subhead-size);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-secondary);
}
html:root body .report-identity {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
}
.report-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--action-primary);
  color: var(--action-on-primary);
}
.report-avatar .icon {
  width: 22px;
  height: 22px;
}
.report-name {
  display: grid;
  min-width: 0;
}
.report-name strong {
  font-size: var(--text-title-2-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-name span {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.report-name span:empty {
  display: none;
}
html:root body .report-identity #copy-address {
  margin-left: var(--space-4);
  border: 0;
}
html:root body .report-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin: 0;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
  text-align: left;
}
html:root body .report-meta .ce-link {
  min-height: 44px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}

/* Example wallets: say plainly that a tap runs the lookup */
.ce-samples-help {
  margin: 2px 0 var(--space-12);
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root body .ce-coverage header {
  margin-bottom: var(--space-16);
}

@media (max-width: 640px) {
  /* Entry: the example result leads as a teaser people can scroll past, then the title and
     input, then the example wallets */
  html:root body .ce-samples {
    order: 0;
    margin-top: var(--space-32);
  }
  html:root body .ce-preview {
    order: -1;
    margin: 0 0 var(--space-32);
  }
  .report-name strong {
    font-size: var(--text-title-3-size);
  }
  html:root body .report-identity #copy-address span {
    display: none;
  }
  html:root body .report-identity #copy-address {
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
  }

  /* Factors fold to name and weight; a tap opens the explanation */
  html:root body .ce-factors li {
    padding: var(--space-16) 0;
  }
  html:root body .ce-factor-head {
    cursor: pointer;
    min-height: 28px;
  }
  /* disclosure caret: the Phosphor caret-down SVG as a mask in a square box, so it turns about its
     own centre; no hand-drawn borders, no translate offsets */
  html:root body .ce-factor-head::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: var(--space-8);
    background: var(--text-secondary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    transition: transform var(--motion-release) var(--ease-standard);
  }
  html:root body .ce-factors li.is-open .ce-factor-head::after {
    transform: rotate(180deg);
  }
  html:root body .ce-factors li:not(.is-open) > p {
    display: none;
  }
  html:root body .ce-factors li.is-open > p:not(.ce-meta) {
    margin-top: var(--space-8);
  }
  /* Grade bands two across */
  html:root body .ce-grades {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-16);
  }
  html:root body .ce-grades li {
    border: 0 !important;
    padding: 0;
  }
}
html:root body .report-identity .report-name strong {
  color: var(--text-primary);
}
html:root body .report-identity .report-name span {
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  html:root body .report-identity #copy-address {
    width: 36px;
    height: 36px;
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  html:root body .ce-factors .ce-factor-head {
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }
  html:root body .ce-factors .ce-factor-head h3 {
    flex: 1;
    min-width: 0;
  }
  html:root body .ce-factors .ce-factor-head::after {
    flex: none;
    margin-left: 0;
  }
}
html:root body .report-heading > * {
  justify-self: stretch;
}
html:root body .report-heading .report-meta {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  margin: 0;
}
html:root body .report-heading .report-meta > span {
  display: inline;
  margin: 0;
}
html:root body .report-heading {
  grid-template-columns: minmax(0, 1fr);
}

/* Summary tiles carry no icon; phones list them as title + number, sub line below */
@media (max-width: 640px) {
  html:root body .ce-sum-tiles .ce-sum-tile {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title num"
      "sub   sub";
  }
}

/* Risk indicators: the status badge sits top right, beside the label */
html:root body .risk-item {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label status"
    "num   num"
    "desc  desc";
  align-items: center;
  column-gap: var(--space-8);
}
html:root body .risk-item .risk-label {
  grid-area: label;
}
html:root body .risk-item .status {
  grid-area: status;
  justify-self: end;
}
html:root body .risk-item .risk-number {
  grid-area: num;
}
html:root body .risk-item .risk-description {
  grid-area: desc;
}
@media (max-width: 640px) {
  html:root body .risk-item {
    grid-template-areas:
      "label label"
      "num   status"
      "desc  desc";
  }
}
@media (max-width: 640px) {
  html:root body .risk-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
  }
  html:root body .risk-item :is(.risk-label, .risk-description) {
    flex: 0 0 100%;
  }
  html:root body .risk-item .risk-number {
    white-space: nowrap;
  }
  html:root body .risk-item .status {
    margin-left: auto;
  }
}

/* Phones: risk indicators as one list, like the summary. Name and note on the left,
   value with its status on the right; every row reads the same way. */
@media (max-width: 640px) {
  html:root body .risk-grid {
    display: block;
    padding: var(--space-4) var(--space-20);
    border-radius: var(--radius-card);
    background: var(--surface-card);
  }
  html:root body .risk-grid .risk-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label num"
      "desc  status";
    column-gap: var(--space-16);
    row-gap: var(--space-4);
    align-items: center;
    padding: var(--space-16) 0 !important;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--stroke-separator) !important;
  }
  html:root body .risk-grid .risk-item:last-child {
    border-bottom: 0 !important;
  }
  html:root body .risk-grid .risk-label {
    grid-area: label;
    font-size: var(--text-subhead-size);
    font-weight: 600;
    color: var(--text-primary);
  }
  html:root body .risk-grid .risk-description {
    grid-area: desc;
    align-self: start;
    font-size: var(--text-caption-1-size);
    line-height: 1.45;
  }
  html:root body .risk-grid .risk-number {
    grid-area: num;
    justify-self: end;
    font-size: var(--text-headline-size);
    white-space: nowrap;
  }
  html:root body .risk-grid .status {
    grid-area: status;
    justify-self: end;
    align-self: start;
    margin: 0;
  }
}

/* Phones: position card in three bands — instrument, P&L, then label/value rows */
@media (max-width: 640px) {
  html:root body .ce-pos-card {
    display: grid;
    gap: var(--space-16);
  }
  html:root body .ce-pos-card header {
    gap: var(--space-12);
  }
  html:root body .ce-pos-card .instrument-meta {
    white-space: nowrap;
  }
  html:root body .ce-pos-card .ce-pos-pnl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-m);
    background: var(--fill-faint);
  }
  html:root body .ce-pos-card .ce-pos-pnl small {
    font-size: var(--text-footnote-size);
  }
  html:root body .ce-pos-card .ce-pos-pnl b {
    font-size: var(--text-headline-size);
  }
  html:root body .ce-pos-card dl {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    border: 0;
  }
  html:root body .ce-pos-card dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-12);
  }
  html:root body .ce-pos-card dt {
    font-size: var(--text-footnote-size);
  }
  html:root body .ce-pos-card dd {
    margin: 0;
    font-size: var(--text-subhead-size);
  }
}

/* Phones: stress estimates and reference limits read as label/value rows, like every list */
@media (max-width: 640px) {
  html:root body .stress-list {
    display: block;
    padding: 0;
  }
  html:root body .stress-list .stress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-16);
    padding: var(--space-12) 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--stroke-separator) !important;
  }
  html:root body .stress-list .stress-row:last-child {
    border-bottom: 0 !important;
  }
  html:root body .stress-list .stress-row > div {
    display: grid;
    gap: 2px;
  }
  html:root body .stress-list .stress-row span {
    font-size: var(--text-subhead-size);
    font-weight: 600;
    color: var(--text-primary);
  }
  html:root body .stress-list .stress-row small {
    font-size: var(--text-caption-1-size);
    color: var(--text-secondary);
  }
  html:root body .stress-list .stress-row strong {
    margin: 0;
    font-size: var(--text-headline-size);
    white-space: nowrap;
    text-align: right;
  }
  html:root body .terms-content dl {
    gap: 0;
  }
  html:root body .terms-content dl > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-12) 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--stroke-separator);
  }
  html:root body .terms-content dl > div:last-child {
    border-bottom: 0;
  }
  html:root body .terms-content dt {
    font-size: var(--text-subhead-size);
    font-weight: 600;
    color: var(--text-primary);
  }
  html:root body .terms-content dd {
    font-size: var(--text-headline-size);
  }
}

/* Phones: each treasury/gold holding — token and value on top, balance and price as rows */
@media (max-width: 640px) {
  html:root body .rwa-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head  value"
      "bal   bal"
      "price price";
    gap: var(--space-8) var(--space-16);
    padding: var(--space-16) 0;
  }
  html:root body .rwa-row > div {
    min-width: 0;
  }
  html:root body .rwa-row > div:nth-child(1) {
    grid-area: head;
    display: grid;
    gap: 2px;
  }
  html:root body .rwa-row > div:nth-child(2) {
    grid-area: bal;
  }
  html:root body .rwa-row > div:nth-child(3) {
    grid-area: price;
  }
  html:root body .rwa-row > div:nth-child(4) {
    grid-area: value;
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
  }
  html:root body .rwa-row > div:is(:nth-child(2), :nth-child(3)) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-12);
    text-align: left;
  }
  html:root body .rwa-row small {
    font-size: var(--text-caption-1-size);
    color: var(--text-secondary);
  }
  html:root body .rwa-row span {
    font-size: var(--text-subhead-size);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  html:root body .rwa-row > div:nth-child(4) span {
    font-size: var(--text-headline-size);
  }
}

/* The wallet sits at the top of the score card: whose score this is, then the score */
html:root body .report-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
}
html:root body .report-heading h2 {
  font-size: var(--text-title-2-size);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  color: var(--text-primary);
}
html:root body .report-heading #new-lookup {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
}
html:root body .ce-sum-score .report-identity {
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--inv-separator);
}
html:root body .ce-sum-score .report-avatar {
  width: 40px;
  height: 40px;
  background: var(--inv-separator);
  color: var(--text-on-inverse);
}
html:root body .ce-sum-score .report-avatar .icon {
  width: 20px;
  height: 20px;
}
html:root body .ce-sum-score .report-name strong {
  font-size: var(--text-headline-size);
  color: var(--text-on-inverse);
}
html:root body .ce-sum-score .report-name span {
  font-size: var(--text-caption-1-size);
  color: var(--inv-secondary);
}
html:root body .ce-sum-score #copy-address {
  margin-left: auto;
  background-color: var(--inv-separator);
  color: var(--text-on-inverse);
}
.ce-sum-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin-top: auto;
}
html:root body .ce-sum-score .ce-sum-foot .ce-link {
  margin-top: 0;
}
.report-stamp {
  font-size: var(--text-caption-1-size);
  color: var(--inv-tertiary);
}
@media (max-width: 640px) {
  html:root body .report-heading h2 {
    font-size: var(--text-title-3-size);
  }
  html:root body .ce-sum-score #copy-address {
    width: 36px;
    height: 36px;
    margin-left: auto;
  }
}
html:root body .report-heading #new-lookup {
  white-space: nowrap;
}
/* Phones: "new lookup" is a search icon button; its name stays for screen readers */
@media (max-width: 640px) {
  html:root body .report-heading #new-lookup {
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--fill-subtle);
  }
  html:root body .report-heading #new-lookup span {
    display: none;
  }
  html:root body .report-heading #new-lookup .icon {
    width: 20px;
    height: 20px;
  }
}
html:root body .ce-preview-stats dt {
  white-space: nowrap;
}
/* Flow step tags never run past the card */
html:root body .ce-flow-out {
  max-width: 100%;
  height: auto;
  min-height: 24px;
  padding-top: 3px;
  padding-bottom: 3px;
  white-space: normal;
  line-height: 1.35;
}

/* Flow: no badge on the icon; the step number sits above the title as a small label */
html:root body .ce-flow-no {
  display: none;
}
html:root body .ce-flow ol {
  counter-reset: flow-step;
}
html:root body .ce-flow li {
  counter-increment: flow-step;
}
html:root body .ce-flow h3::before {
  content: counter(flow-step, decimal-leading-zero);
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-caption-1-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Derivatives book: exposure, shock scenarios, track record.
   Long reads in the market-up colour and short in market-down, as in Korean market screens. */
html:root .ce-exposure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin: var(--space-8) 0 var(--space-24);
}
html:root .ce-exposure[hidden],
html:root .ce-exposure > [hidden] {
  display: none;
}
html:root .ce-exp-card header,
html:root .ce-track header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4) var(--space-12);
  margin-bottom: var(--space-12);
}
html:root .ce-exp-card h3,
html:root .ce-track h3 {
  margin: 0;
  font-size: var(--text-headline-size);
  font-weight: 600;
}
html:root .ce-exp-card header p,
html:root .ce-track header p {
  margin: 0;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .ce-exp-row {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) minmax(80px, 1.3fr) auto;
  align-items: center;
  gap: var(--space-12);
  min-height: 48px;
  border-top: 1px solid var(--stroke-separator);
  font-size: var(--text-subhead-size);
}
html:root .ce-exp-row.is-scen {
  grid-template-columns: 1fr auto;
}
html:root .ce-exp-row strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html:root .ce-exp-name small {
  margin-left: var(--space-8);
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
/* Diverging bar: short grows left from the centre, long grows right */
html:root .ce-exp-bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
}
html:root .ce-exp-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--stroke-strong);
}
html:root .ce-exp-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
}
html:root .ce-exp-bar i.long {
  left: 50%;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: var(--market-up);
}
html:root .ce-exp-bar i.short {
  right: 50%;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  background: var(--market-down);
}
html:root .ce-exp-vals {
  display: grid;
  justify-items: end;
  font-size: var(--text-caption-1-size);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
html:root .ce-exp-regions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  margin: var(--space-12) 0 0;
  padding-top: var(--space-12);
  border-top: 1px solid var(--stroke-separator);
  font-size: var(--text-footnote-size);
}
html:root .ce-exp-regions span {
  width: 100%;
  color: var(--text-secondary);
}
html:root .ce-exp-regions b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html:root .ce-track {
  grid-column: 1 / -1;
}
html:root .ce-track-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0 0 var(--space-12);
}
html:root .ce-track-stats dt {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .ce-track-stats dd {
  margin: var(--space-4) 0 0;
  font-size: var(--text-title-3-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html:root .ce-track-spark {
  display: block;
  width: 100%;
  height: 96px;
}
html:root .ce-track-spark .zero {
  stroke: var(--stroke-strong);
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
html:root .ce-track-spark .line {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
html:root .ce-track-spark .line.up {
  stroke: var(--market-up);
}
html:root .ce-track-spark .line.down {
  stroke: var(--market-down);
}
html:root .ce-track-spark .area {
  opacity: 0.1;
}
html:root .ce-track-spark .area.up {
  fill: var(--market-up);
}
html:root .ce-track-spark .area.down {
  fill: var(--market-down);
}
html:root .ce-track .detail-note {
  margin: var(--space-8) 0 0;
}
/* Stock and index marks: a two-letter market code in place of a coin logo */
html:root .ce-logo.is-mark:is(.is-equity, .is-index, .is-etf, .is-commodity, .is-fx, .is-bond):not(.is-flag):not(.is-emoji) {
  font-size: 10px;
  letter-spacing: 0.02em;
}
html:root .ce-pos-more {
  display: flex;
  margin: var(--space-16) auto 0;
}
html:root .ce-pos-more[hidden] {
  display: none;
}
@media (max-width: 800px) {
  html:root .ce-exposure {
    grid-template-columns: 1fr;
  }
  html:root .ce-track-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  html:root .ce-exp-row {
    grid-template-columns: minmax(72px, 1fr) minmax(56px, 1fr) auto;
    gap: var(--space-8);
  }
}

/* Report tabs: one panel at a time */
html:root .tab-off {
  display: none !important;
}

/* Financial activity: card payments, deposits and income, loan record, then the monthly cash flow */
html:root .ce-act {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-16);
}
html:root .ce-act[hidden],
html:root .ce-act > [hidden] {
  display: none;
}
html:root .ce-act-card,
html:root .ce-act-flow {
  padding: var(--space-20) var(--space-24);
}
html:root .ce-act-card header,
html:root .ce-act-flow header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4) var(--space-12);
}
html:root .ce-act-card h3,
html:root .ce-act-flow h3 {
  margin: 0;
  font-size: var(--text-headline-size);
  font-weight: 600;
}
html:root .ce-act-tag {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .ce-act-num {
  margin: var(--space-16) 0 0;
  font-size: var(--text-title-1-size);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
html:root .ce-act-cap {
  margin: var(--space-4) 0 var(--space-12);
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .ce-act-dl {
  margin: 0;
}
html:root .ce-act-dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 40px;
  align-items: center;
  border-top: 1px solid var(--stroke-separator);
  font-size: var(--text-subhead-size);
}
html:root .ce-act-dl dt {
  color: var(--text-secondary);
}
html:root .ce-act-dl dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
html:root .ce-act-flow {
  grid-column: 1 / -1;
}
html:root .ce-act-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin: 0;
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .ce-act-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: 0;
}
html:root .ce-act-legend .in::before {
  background: var(--success-fill);
}
html:root .ce-act-legend .out::before {
  background: var(--fill-strong);
}
html:root .ce-act-legend .card::before {
  background: var(--c, var(--card-gp));
}
html:root .ce-act-legend .card.is-gp { --c: var(--card-gp); }
html:root .ce-act-legend .card.is-ef { --c: var(--card-ef); }
html:root .ce-act-legend .card.is-mm { --c: var(--card-mm); }
html:root .ce-act-legend .card.is-f24 { --c: var(--card-f24); }
/* Each month: deposits grow up from the middle line, withdrawals down; each card is its own colour */
html:root .ce-act-bars {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-16);
}
html:root .ce-act-month {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: 64px 64px auto;
}
html:root .ce-act-month .up,
html:root .ce-act-month .down {
  display: flex;
  justify-content: center;
}
html:root .ce-act-month .up {
  align-items: flex-end;
  border-bottom: 1px solid var(--stroke-strong);
}
html:root .ce-act-month .down {
  align-items: flex-start;
}
html:root .ce-act-month i {
  display: flex;
  flex-direction: column;
  width: min(100%, 22px);
}
html:root .ce-act-month i.in {
  border-radius: 3px 3px 0 0;
  background: var(--success-fill);
}
html:root .ce-act-month i.out {
  border-radius: 0 0 3px 3px;
  background: var(--fill-strong);
  overflow: hidden;
}
html:root .ce-act-month b.card {
  display: block;
  flex: none;
  background: var(--c, var(--card-gp));
}
html:root .ce-act-month b.card.is-gp { --c: var(--card-gp); }
html:root .ce-act-month b.card.is-ef { --c: var(--card-ef); }
html:root .ce-act-month b.card.is-mm { --c: var(--card-mm); }
html:root .ce-act-month b.card.is-f24 { --c: var(--card-f24); }
html:root .ce-act-month span {
  margin-top: var(--space-4);
  font-size: var(--text-caption-2-size);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}
html:root #activity > .detail-note {
  margin-top: var(--space-12);
}
@media (max-width: 640px) {
  html:root .ce-act-card,
  html:root .ce-act-flow {
    padding: var(--space-16) var(--space-20);
  }
  html:root .ce-act-bars {
    gap: var(--space-4);
  }
  html:root .ce-act-month {
    grid-template-rows: 48px 48px auto;
  }
}

/* Bonds and commodities: colour per group, from the chart palette and the vivid band tokens
   (nearest match per group), shared by the mix bar, group list and row marks */
:root {
  --rwa-us: var(--chart-2);
  --rwa-eu: var(--chart-3);
  --rwa-uk: var(--band-near);
  --rwa-gold: var(--chart-4);
  --rwa-silver: var(--chart-5);
  --rwa-metal: var(--band-sub);
  --rwa-energy: var(--green-400);
  --rwa-fx: var(--band-prime);
  /* Property tokens: the lead chart colour (navy, white in dark mode), apart from bonds, metals and currencies */
  --rwa-estate: var(--chart-1);
}
html:root .rwa-mark {
  --rwa-c: var(--rwa-metal);
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--rwa-c) 16%, transparent);
  color: color-mix(in srgb, var(--rwa-c) 72%, var(--text-primary));
  box-shadow: none;
}
html:root .ce-logo.is-mark.is-flag,
html:root .ce-logo.is-mark.is-emoji,
html:root .ce-logo.is-mark.is-pic {
  overflow: hidden;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  /* lint-ok font/family: flags and commodity glyphs must render as colour emoji, not Pretendard */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
html:root .rwa-mark.is-flag,
html:root .rwa-mark.is-emoji,
html:root .rwa-mark.is-pic {
  font-size: 18px;
  color: inherit;
}
html:root .ce-logos .ce-logo.is-mark.rwa-mark {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--rwa-c) 18%, var(--surface-card));
  box-shadow: none;
  color: inherit;
}
html:root .ce-logos .rwa-mark.is-flag,
html:root .ce-logos .rwa-mark.is-emoji {
  font-size: 20px;
}
html:root .rwa-mark.is-pic img,
html:root .ce-logo.is-mark.is-pic img {
  width: 18px;
  height: 18px;
}
html:root .ce-logos .rwa-mark.is-pic img {
  width: 22px;
  height: 22px;
}
html:root .ce-sum-chip .ce-logo.is-mark.is-flag,
html:root .ce-sum-chip .ce-logo.is-mark.is-emoji,
html:root .ce-sum-chip .ce-logo.is-mark.is-pic,
html:root .instrument-meta .ce-logo.is-mark.is-flag,
html:root .instrument-meta .ce-logo.is-mark.is-emoji,
html:root .instrument-meta .ce-logo.is-mark.is-pic,
html:root .ce-stack .ce-logo.is-mark.is-flag,
html:root .ce-stack .ce-logo.is-mark.is-emoji,
html:root .ce-stack .ce-logo.is-mark.is-pic,
html:root .ce-inst > .ce-logo.is-mark.is-flag,
html:root .ce-inst > .ce-logo.is-mark.is-emoji,
html:root .ce-inst > .ce-logo.is-mark.is-pic {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
html:root :is(.rwa-mark, .rwa-mix-bar i).is-us { --rwa-c: var(--rwa-us); }
html:root :is(.rwa-mark, .rwa-mix-bar i).is-eu { --rwa-c: var(--rwa-eu); }
html:root :is(.rwa-mark, .rwa-mix-bar i).is-uk { --rwa-c: var(--rwa-uk); }
html:root :is(.rwa-mark, .rwa-mix-bar i).is-gold { --rwa-c: var(--rwa-gold); }
html:root :is(.rwa-mark, .rwa-mix-bar i).is-silver { --rwa-c: var(--rwa-silver); }
html:root :is(.rwa-mark, .rwa-mix-bar i).is-metal { --rwa-c: var(--rwa-metal); }
html:root :is(.rwa-mark, .rwa-mix-bar i).is-energy { --rwa-c: var(--rwa-energy); }
html:root :is(.rwa-mark, .rwa-mix-bar i).is-fx { --rwa-c: var(--rwa-fx); }
html:root :is(.rwa-mark, .rwa-mix-bar i).is-estate { --rwa-c: var(--rwa-estate); }
html:root .rwa-mix {
  margin-top: var(--space-16);
}
html:root .rwa-mix[hidden],
html:root .rwa-shocks[hidden] {
  display: none;
}
html:root .rwa-mix-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
}
html:root .rwa-mix-bar i {
  --rwa-c: var(--rwa-metal);
  display: block;
  min-width: 4px;
  background: var(--rwa-c);
}
html:root .rwa-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--space-8) var(--space-24);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
html:root .rwa-groups li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-8) 0;
}
html:root .rwa-groups li.is-rest .rwa-mark {
  --rwa-c: var(--text-tertiary);
}
html:root .rwa-groups li > span:not(.ce-logo) {
  display: grid;
  min-width: 0;
  flex: 1;
}
html:root .rwa-groups b {
  font-size: var(--text-subhead-size);
  font-weight: 600;
}
html:root .rwa-groups small {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
html:root .rwa-groups strong {
  font-size: var(--text-headline-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html:root .rwa-shocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-16);
}
html:root .rwa-shocks > div {
  display: grid;
  gap: 2px;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-m);
  background: var(--fill-faint);
}
html:root .rwa-shocks span {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .rwa-shocks strong {
  font-size: var(--text-title-3-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html:root .rwa-shocks small {
  font-size: var(--text-caption-1-size);
  color: var(--text-tertiary);
}
html:root .rwa-row {
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
  align-items: center;
}
html:root .rwa-row > div.rwa-name,
html:root body .rwa-row > div.rwa-name {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}
html:root .rwa-name strong {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
html:root .rwa-name small {
  margin: 2px 0 0;
}
html:root .rwa-futures {
  margin-top: var(--space-16);
}
html:root .rwa-card[hidden] + .rwa-futures {
  margin-top: 0;
}
html:root .rwa-card[hidden],
html:root .rwa-futures[hidden] {
  display: none;
}
html:root .rwa-logos small {
  line-height: 1.45;
}

/* Assessment in progress: the checks the engine runs, ticked off in order */
html:root .ce-an-meter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-16);
  font-variant-numeric: tabular-nums;
}
html:root .ce-an-meter b {
  font-size: var(--text-title-2-size);
  font-weight: 700;
  line-height: 1;
}
html:root .ce-an-meter span {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .loading-track.is-progress {
  margin-top: var(--space-8);
  height: 4px;
}
html:root .loading-track.is-progress i {
  width: 0;
  animation: none;
  transform: none;
  border-radius: var(--radius-full);
  transition: width 0.12s linear;
}
html:root .ce-an-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-16);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: an;
}
html:root .ce-an-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 26px;
  font-size: var(--text-footnote-size);
  color: var(--text-tertiary);
  transition: color 0.2s;
}
html:root .ce-an-steps li i {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--fill-default);
}
html:root .ce-an-steps li.is-active {
  color: var(--text-primary);
  font-weight: 600;
}
html:root .ce-an-steps li.is-active i {
  border-color: var(--fill-default);
  border-top-color: var(--ui-accent);
  animation: spin 0.8s linear infinite;
}
html:root .ce-an-steps li.is-done {
  color: var(--text-secondary);
}
html:root .ce-an-steps li.is-done i {
  border-color: var(--success-fill);
  background: var(--success-fill);
}
html:root .ce-entry .loading .ce-an-feed {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-s);
  background: var(--fill-faint);
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
  overflow: hidden;
  white-space: nowrap;
}
html:root .ce-an-feed code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:root .ce-an-caret {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-accent);
  animation: an-pulse 0.9s ease-in-out infinite;
}
@keyframes an-pulse {
  50% {
    opacity: 0.25;
  }
}
@media (max-width: 640px) {
  html:root .ce-an-steps {
    grid-template-columns: 1fr;
  }
  html:root .rwa-shocks {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  html:root .rwa-groups {
    grid-template-columns: 1fr;
  }
}

/* Summary: with no derivatives positions the tile is hidden and the last tile takes the row */
.ce-sum-tiles.no-positions > .ce-sum-tile:last-child {
  grid-column: 1 / -1;
}
/* Score built partly on fixed prices: the pill says so in the warning colour */
html:root .ce-sum-pill.is-estimated {
  background: var(--warning-fill);
  color: var(--navy-900);
}
/* Report tabs: an opaque bar across the full width, so content passing under it never shows
   through as a smear or leaves an edge where the bar ends */
html:root .report-nav {
  background: var(--bg-grouped);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 0 0 100vmax var(--bg-grouped);
  clip-path: inset(0 -100vmax);
}
/* More-tabs hint: when the bar scrolls sideways (narrow screens), a soft fade on the overflowing
   edge shows there are tabs that way. Pseudo-elements pinned to the content edges, over the tabs
   but under the full-width grey (which the box-shadow above paints); they do not scroll with it. */
html:root .report-nav::before,
html:root .report-nav::after {
  content: "";
  position: sticky;
  align-self: stretch;
  flex: none;
  width: 32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard);
}
/* each hugs one edge and is pulled back over the neighbouring tab, so it adds no width */
html:root .report-nav::before {
  left: 0;
  margin-right: -32px;
  background: linear-gradient(90deg, var(--bg-grouped), transparent);
}
html:root .report-nav::after {
  right: 0;
  margin-left: -32px;
  background: linear-gradient(270deg, var(--bg-grouped), transparent);
}
html:root .report-nav.has-start::before,
html:root .report-nav.has-end::after {
  opacity: 1;
}
/* Header: the thicker material, so the navy score card does not bleed through as a grey blur */
html:root .site-header {
  background: var(--material-thick);
}

/* Example wallets on phones: each group is one line that scrolls sideways, fading at the right
   edge, so the list stays short without hiding anything behind a toggle. Wider screens wrap. */
@media (max-width: 700px) {
  html:root .ce-samples .ce-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: var(--space-24);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  html:root .ce-samples .ce-chips::-webkit-scrollbar {
    display: none;
  }
  html:root .ce-samples .ce-chip {
    flex: none;
  }
}

/* Shared sections (model, factors, risk, scope, FAQ) are the same for every wallet, so they sit
   on a full-width band in the landing cream, apart from the wallet report above. The space before
   the band stays on the grey page, so the report's last line never runs straight into it. */
html:root .engine-research,
html:root .engine-research ~ .ce-faq {
  position: relative;
  background: var(--surface-brand);
  box-shadow: 0 0 0 100vmax var(--surface-brand);
  clip-path: inset(0 -100vmax);
}
html:root .engine-research {
  margin-top: var(--space-80);
  padding-top: var(--space-16);
}
html:root .engine-research .ce-section:first-child {
  border-top: 0;
}
@media (max-width: 600px) {
  html:root .engine-research {
    margin-top: var(--space-64);
  }
}

/* Five-step flow: a light rail, and a pulse that travels 01 → 05 while it is on screen; each step
   lifts as the pulse reaches it. Desktop runs across, tablets down one rail, phones per segment.
   Reduced motion keeps the light rail only. */
html:root .ce-flow {
  --flow-period: 3.2s;
  --flow-rail: var(--stroke-default);
  --flow-pulse: var(--action-brand);
  --flow-ring: var(--surface-card); /* the gap around each node, matching the card behind it */
}
html:root .ce-flow-node {
  z-index: 1; /* above the rail and its pulse: the pulse passes behind each node, not over it */
  box-shadow: 0 0 0 6px var(--flow-ring);
}
html:root .ce-flow ol::before {
  background: var(--flow-rail);
}
html:root .ce-flow ol::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--flow-pulse) 50%, transparent) no-repeat;
  background-size: 22% 100%;
  background-position: -30% 0;
  opacity: 0;
  pointer-events: none;
}
html:root .ce-flow.is-flowing ol::after {
  animation: flow-across var(--flow-period) linear infinite;
}
@keyframes flow-across {
  0% { background-position: -30% 0; opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  88%, 100% { background-position: 130% 0; opacity: 0; }
}
html:root .ce-flow-node {
  transition: transform 0.3s var(--ease-standard);
}
/* Each node answers when the pulse actually reaches it. Desktop: the pulse centre crosses node n
   at 0.088 + 0.176·n of the period (rail spans 10–90%, pulse is 22% wide, travels −30%→130% over
   88%). Stacked layouts: segment n ends at 0.19·(n) of the period. The ripple peaks 10% in. */
html:root .ce-flow li {
  /* declared per step: a custom property resolves var(--step) where it is declared */
  --flow-arrive: calc(var(--flow-period) * (0.088 + 0.176 * var(--step, 0) - 0.1));
}
html:root .ce-flow.is-flowing .ce-flow-node {
  animation: flow-node var(--flow-period) ease-in-out infinite;
  animation-delay: var(--flow-arrive);
}
html:root .ce-flow li:nth-child(2) { --step: 1; }
html:root .ce-flow li:nth-child(3) { --step: 2; }
html:root .ce-flow li:nth-child(4) { --step: 3; }
html:root .ce-flow li:nth-child(5) { --step: 4; }
/* a soft ripple: the ring swells, then widens and fades out; nothing blinks */
@keyframes flow-node {
  0% { transform: scale(1); box-shadow: 0 0 0 6px var(--flow-ring), 0 0 0 6px color-mix(in srgb, var(--flow-pulse) 0%, transparent); }
  10% { transform: scale(1.04); box-shadow: 0 0 0 6px var(--flow-ring), 0 0 0 9px color-mix(in srgb, var(--flow-pulse) 16%, transparent); }
  38%, 100% { transform: scale(1); box-shadow: 0 0 0 6px var(--flow-ring), 0 0 0 18px color-mix(in srgb, var(--flow-pulse) 0%, transparent); }
}
@media (max-width: 1050px) {
  /* stacked steps: the rail is drawn as segments between nodes (one continuous line ran past
     the last step), and the pulse runs down each segment in turn */
  html:root body .ce-flow ol::before,
  html:root body .ce-flow ol::after {
    display: none;
  }
  html:root body .ce-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: calc(-1 * var(--space-20) + 4px);
    width: 2px;
    background:
      linear-gradient(180deg, transparent, var(--flow-pulse) 50%, transparent) no-repeat 0 -200% / 100% 60%,
      var(--flow-rail);
  }
  html:root body .ce-flow li {
    --flow-arrive: calc(var(--flow-period) * (0.19 * var(--step, 0) - 0.1));
  }
  html:root body .ce-flow.is-flowing li:not(:last-child)::after {
    animation: flow-segment var(--flow-period) linear infinite;
    animation-delay: calc(var(--step, 0) * var(--flow-period) * 0.19);
  }
  @keyframes flow-segment {
    /* with a 60%-tall pulse, -200% and 300% sit fully outside the segment: nothing lingers */
    0% { background-position: 0 -200%, 0 0; }
    19%, 100% { background-position: 0 300%, 0 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root .ce-flow.is-flowing ol::after,
  html:root .ce-flow.is-flowing .ce-flow-node,
  html:root body .ce-flow.is-flowing li::after {
    animation: none;
  }
}

/* Summary rows: one value and at most one supporting line. A warning is shown by the amber
   triangle beside the count (the line below says it in words); the count keeps the text colour,
   since warning-text (amber-700) reads as a muddy brown at this size. Chains are always logos. */
html:root .ce-sum-num.is-warn {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--text-primary);
}
html:root .ce-risk-ico {
  width: 0.8em;
  height: 0.8em;
  flex: none;
}
html:root .ce-sum-num.is-bad {
  color: var(--error-text);
}

/* Data status: sources that did not answer, said once inside the panel */
html:root .source-failed {
  margin: var(--space-8) 0 0;
  font-size: var(--text-footnote-size);
  color: var(--warning-text);
}

html:root .ce-act-where {
  margin: var(--space-12) 0 0;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-s);
  background: var(--fill-faint);
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .ce-act-where[hidden] {
  display: none;
}

/* Card statement: per-card totals, a filter, then the latest payments like a bank statement.
   Gnosis Pay's mark and cash-flow bars use brand navy (not the issuer's lime). Heat and calendar
   do not: they are a chart of when money moved, so they use the chart series, not the card colour. */
:root {
  --card-gp: var(--navy-700);
  --card-ef: #6b4fd8;
  --card-mm: #ff5c16; /* metamask.io --consumer-orange */
  --card-f24: #d6353a;
}
:root[data-theme="dark"] {
  --card-gp: var(--navy-400);
  --card-ef: #a493ff;
  --card-mm: #ff5c16;
  --card-f24: #ff7a7e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --card-gp: var(--navy-400);
    --card-ef: #a493ff;
    --card-mm: #ff5c16;
    --card-f24: #ff7a7e;
  }
}
html:root .ce-act-log-sub {
  margin: 0;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .ce-card-mark {
  --c: var(--card-gp);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 62%, #000));
  color: #fff;
  font-size: var(--text-caption-2-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
}
html:root .ce-card-mark.is-img {
  width: 38px;
  height: auto;
  background: none;
  box-shadow: none;
}
html:root .ce-card-mark.is-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
html:root .ce-card-mark.is-ef, html:root .ce-log-share i.is-ef { --c: var(--card-ef); }
html:root .ce-card-mark.is-mm, html:root .ce-log-share i.is-mm { --c: var(--card-mm); }
html:root .ce-card-mark.is-f24, html:root .ce-log-share i.is-f24 { --c: var(--card-f24); }
html:root .ce-log-progs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-16);
}
html:root .ce-log-prog {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
}
html:root .ce-log-prog > div {
  display: grid;
  flex: 1;
  min-width: 0;
}
html:root .ce-log-prog b {
  font-size: var(--text-subhead-size);
  font-weight: 600;
}
html:root .ce-log-prog small {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .ce-log-prog strong {
  font-size: var(--text-headline-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html:root .ce-log-share {
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  overflow: hidden;
}
html:root .ce-log-share i {
  --c: var(--card-gp);
  display: block;
  height: 100%;
  background: var(--c);
}
html:root .ce-log-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
}
html:root .ce-log-filter[hidden] {
  display: none;
}
html:root .ce-log-chip {
  min-height: 32px;
  padding: 0 var(--space-12);
  border: 1px solid var(--stroke-default);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-footnote-size);
  font-weight: 600;
  cursor: pointer;
}
html:root .ce-log-chip.is-on {
  border-color: var(--action-primary);
  background: var(--action-primary);
  color: var(--action-on-primary);
}
html:root .ce-log-list {
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}
html:root .ce-log-list li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--stroke-separator);
  animation: log-in 0.35s var(--ease-standard) both;
  animation-delay: calc(var(--i) * 35ms);
}
@keyframes log-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
html:root .ce-log-main {
  display: grid;
  flex: 1;
  min-width: 0;
}
html:root .ce-log-main b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-subhead-size);
  font-weight: 600;
}
html:root .ce-log-main em {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--text-caption-2-size);
  font-style: normal;
  font-weight: 700;
  background: var(--fill-subtle);
  color: var(--text-secondary);
}
html:root .ce-log-main em.is-credit {
  background: var(--warning-bg);
  color: var(--warning-text);
}
html:root .ce-log-main em.is-pix {
  background: var(--success-bg);
  color: var(--success-text);
}
html:root .ce-log-main em.is-ccy {
  background: var(--info-bg);
  color: var(--info-text);
}
html:root .ce-log-main small {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:root .ce-log-amt {
  display: grid;
  justify-items: end;
  gap: 2px;
}
html:root .ce-log-amt strong {
  font-size: var(--text-subhead-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html:root .ce-log-tx {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  text-decoration: none;
}
html:root .ce-log-tx .icon {
  width: 14px;
  height: 14px;
}
html:root .ce-log-tx:hover {
  color: var(--text-primary);
}
html:root .ce-log-tx:hover span {
  text-decoration: underline;
}
html:root .ce-log-more {
  display: flex;
  margin: var(--space-12) auto 0;
}
html:root .ce-log-more[hidden] {
  display: none;
}

/* Grade bands and persona accents, from the design system palette: vivid mid-scale steps (500/400
   in light, one step brighter in dark) rather than the dark -text ends, so nothing reads muddy.
   Grade prime=green, near=blue, sub=amber, high=red. Persona accents reuse these plus the chart
   palette (which carries its own light/dark variants). */
:root {
  --band-prime: var(--green-500);
  --band-near: var(--blue-600);
  --band-sub: var(--amber-400);
  --band-high: var(--red-500);
  /* default UI accent: controls and neutral charts that carry no grade meaning */
  --ui-accent: var(--blue-600);
  --persona-trader: var(--band-near);
  --persona-card: var(--chart-3);
  --persona-bond: var(--chart-2);
  --persona-gold: var(--chart-4);
  --persona-fx: var(--band-prime);
  --persona-loan: var(--band-sub);
  --persona-holder: var(--chart-5);
  --persona-estate: var(--chart-1);
}
:root[data-theme="dark"] {
  --band-prime: var(--green-400);
  --band-near: var(--blue-400);
  --band-sub: var(--amber-300);
  --band-high: var(--red-400);
  --ui-accent: var(--blue-400);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band-prime: var(--green-400);
    --band-near: var(--blue-400);
    --band-sub: var(--amber-300);
    --band-high: var(--red-400);
    --ui-accent: var(--blue-400);
  }
}
[data-band="prime"] { --band: var(--band-prime); }
[data-band="near"] { --band: var(--band-near); }
[data-band="sub"] { --band: var(--band-sub); }
[data-band="high"] { --band: var(--band-high); }
html:root .ce-sum-score[data-band] .sg-value {
  stroke: var(--band);
}
html:root .ce-sum-score[data-band] .sg-dot {
  fill: var(--band);
}
html:root .ce-sum-score[data-band] .ce-sum-grade strong {
  color: var(--band);
}

/* Persona banner: what kind of wallet this is, in its own colour */
html:root .ce-persona {
  --p: var(--persona-holder);
  position: relative;
  margin-bottom: var(--space-16);
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
html:root .ce-persona[hidden] { display: none; }
html:root .ce-persona[data-persona="trader"] { --p: var(--persona-trader); }
html:root .ce-persona[data-persona="card"] { --p: var(--persona-card); }
html:root .ce-persona[data-persona="bond"] { --p: var(--persona-bond); }
html:root .ce-persona[data-persona="gold"] { --p: var(--persona-gold); }
html:root .ce-persona[data-persona="fx"] { --p: var(--persona-fx); }
html:root .ce-persona[data-persona="loan"] { --p: var(--persona-loan); }
html:root .ce-persona[data-persona="estate"] { --p: var(--persona-estate); }
html:root .ce-persona-head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
html:root .ce-persona-head > div:not(.ce-persona-rank) {
  flex: 1;
  min-width: 0;
}
html:root .ce-persona-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-l);
  background: var(--p);
  color: #fff;
  box-shadow: 0 8px 20px -8px var(--p);
}
html:root .ce-persona-icon .icon {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
html:root .ce-persona-kicker {
  margin: 0;
  font-size: var(--text-caption-1-size);
  font-weight: 600;
  color: color-mix(in srgb, var(--p) 80%, var(--text-primary));
}
html:root .ce-persona-title {
  margin: 2px 0 0;
  font-size: var(--text-title-2-size);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
}
html:root .ce-persona-line {
  margin: var(--space-4) 0 0;
  font-size: var(--text-subhead-size);
  color: var(--text-secondary);
}
html:root .ce-persona-rank {
  flex: none;
  display: grid;
  justify-items: end;
  text-align: right;
}
html:root .ce-persona-rank b {
  font-size: var(--text-title-2-size);
  font-weight: 700;
  color: var(--p);
  font-variant-numeric: tabular-nums;
}
html:root .ce-persona-rank small {
  font-size: var(--text-caption-1-size);
  color: var(--text-tertiary);
}
html:root .ce-persona-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin: var(--space-16) 0 0;
}
html:root .ce-persona-stats > div {
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-m);
  background: var(--bg-grouped);
}
html:root .ce-persona-stats dt {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .ce-persona-stats dd {
  margin: 2px 0 0;
  font-size: var(--text-headline-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Coach mark: points at the tab that explains this wallet's persona. Shown once per result, under
   the tab (the bar sticks under the site header, so a bubble above it would be covered). It is fixed
   and follows the bar while it sticks; it closes when that tab opens or on ×. */
html:root .ce-coach {
  --caret: 50%;
  position: fixed;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 14px;
  border-radius: var(--radius-m);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  box-shadow: var(--shadow-md);
  transform-origin: var(--caret) 0;
}
/* appears where it points: a short fade and a 4px drop from the tab, scaled from the caret */
html:root .ce-coach.is-in {
  animation: coach-in 0.22s var(--ease-standard) both;
}
html:root .ce-coach[hidden] {
  display: none;
}
html:root .ce-coach::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--caret);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}
html:root .ce-coach-go {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--text-footnote-size);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
html:root .ce-coach-x {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
html:root .ce-coach-x:hover {
  opacity: 1;
}
html:root .ce-coach-x .icon {
  width: 14px;
  height: 14px;
}
@keyframes coach-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root .ce-coach {
    animation: none;
  }
}
@media (max-width: 640px) {
  html:root .ce-persona {
    padding: var(--space-16) var(--space-20);
  }
  html:root .ce-persona-head {
    flex-wrap: wrap;
  }
  html:root .ce-persona-rank {
    justify-items: start;
    text-align: left;
    width: 100%;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--space-8);
  }
  html:root .ce-persona-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* Factor bars by level, and the six-factor radar */
html:root .factor-track.is-hi i { background: var(--band-prime); }
html:root .factor-track.is-mid i { background: var(--band-sub); }
html:root .factor-track.is-lo i { background: var(--band-high); }
html:root body .ce-radar-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-24);
  margin-bottom: var(--space-16);
  padding: var(--space-20) var(--space-24);
}
html:root .ce-radar {
  width: 100%;
  max-width: 440px; /* the viewBox is fitted to the labels in app.js */
  height: auto;
  justify-self: center;
  overflow: visible;
}
html:root .ce-radar .grid {
  fill: none;
  stroke: var(--stroke-separator);
}
html:root .ce-radar .axis {
  stroke: var(--stroke-separator);
}
html:root .ce-radar .shape {
  fill: color-mix(in srgb, var(--ui-accent) 22%, transparent);
  stroke: var(--ui-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  animation: radar-in 0.4s var(--ease-standard) both;
}
@keyframes radar-in {
  from { opacity: 0; }
}
html:root .ce-radar .dot {
  fill: var(--ui-accent);
}
html:root .ce-radar .lbl {
  font-size: var(--text-caption-2-size);
  fill: var(--text-secondary);
}
html:root .ce-radar .val {
  font-size: var(--text-footnote-size);
  font-weight: 700;
}
html:root .ce-radar .val.is-hi { fill: var(--band-prime); }
html:root .ce-radar .val.is-mid { fill: var(--band-sub); }
html:root .ce-radar .val.is-lo { fill: var(--band-high); }
html:root .ce-radar-legend {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
html:root .ce-radar-legend li {
  display: grid;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-m);
  background: var(--fill-faint);
}
html:root .ce-radar-legend small {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .ce-radar-legend b {
  font-size: var(--text-headline-size);
}
html:root .ce-radar-legend span {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  html:root body .ce-radar-card {
    grid-template-columns: 1fr;
  }
}

/* Card spending pattern: insights, weekday x hour heatmap, 12-week calendar, ticket sizes */
html:root .ce-log-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-16);
}
html:root .ce-log-insights > div {
  display: grid;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-m);
  background: var(--fill-faint);
}
html:root .ce-log-insights small {
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .ce-log-insights b {
  font-size: var(--text-headline-size);
  font-weight: 700;
}
html:root .ce-log-pattern {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-16) var(--space-24);
  margin-top: var(--space-16);
}
html:root .ce-log-pattern[hidden],
html:root .ce-log-insights[hidden] {
  display: none;
}
html:root .ce-log-pattern figure {
  margin: 0;
}
html:root body .ce-tooltip {
  position: fixed;
  z-index: 30;
  display: grid;
  gap: 2px;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-s);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  box-shadow: var(--shadow-md);
  font-size: var(--text-caption-1-size);
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
}
html:root body .ce-tooltip[hidden] {
  display: none;
}
html:root body .ce-tooltip b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
html:root .ce-log-pattern figcaption {
  margin-bottom: var(--space-8);
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
html:root .ce-heat {
  grid-row: span 2;
}
html:root .ce-heat-grid {
  display: grid;
  grid-template-columns: 18px repeat(24, minmax(0, 1fr));
  gap: 3px;
}
html:root body .ce-heat-grid i,
html:root body .ce-cal-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--fill-faint);
}
html:root body .ce-heat-grid i:not(.is-empty),
html:root body .ce-cal-grid i:not(.is-empty) {
  /* Only cells with real activity receive heat colour. */
  background: color-mix(in srgb, var(--chart-3) calc(var(--v) * 46%), var(--fill-subtle));
}
html:root .ce-heat-day,
html:root .ce-heat-hr {
  font-size: var(--text-caption-2-size);
  color: var(--text-tertiary);
  align-self: center;
}
html:root .ce-cal-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
html:root .ce-ticket {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: 6px;
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root .ce-ticket-bar {
  display: block;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  overflow: hidden;
}
html:root .ce-ticket-bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--c, var(--chart-1));
}
html:root .ce-ticket-bar i.is-gp { --c: var(--card-gp); }
html:root .ce-ticket-bar i.is-ef { --c: var(--card-ef); }
html:root .ce-ticket-bar i.is-mm { --c: var(--card-mm); }
html:root .ce-ticket-bar i.is-f24 { --c: var(--card-f24); }
html:root .ce-ticket b {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
@media (max-width: 760px) {
  html:root .ce-log-pattern {
    grid-template-columns: 1fr;
  }
  html:root .ce-heat {
    grid-row: auto;
  }
  html:root .ce-heat-grid {
    gap: 2px;
  }
}

/* Score simulator */
/* body in the selector: .source-card's padding is set as `html:root body .source-card`, which beat
   the plain `html:root .ce-sim` and left the simulator at 8px top and bottom */
html:root body .ce-sim {
  margin-bottom: var(--space-16);
  padding: var(--space-40);
}
html:root .ce-sim header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-12);
}
html:root .ce-sim h3 {
  margin: 0;
  font-size: var(--text-headline-size);
}
html:root .ce-sim header p {
  margin: var(--space-4) 0 0;
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root .ce-sim-out {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 0 var(--space-8);
  text-align: right;
}
html:root .ce-sim-out b {
  font-size: var(--text-large-title-size);
  line-height: 1;
  font-weight: 700;
  color: var(--band);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
html:root .ce-sim-out span {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--band) 16%, transparent);
  color: var(--band);
  font-weight: 700;
  font-size: var(--text-footnote-size);
}
html:root .ce-sim-out small {
  grid-column: 1 / -1;
  font-size: var(--text-footnote-size);
  font-weight: 700;
  color: var(--text-tertiary);
}
html:root .ce-sim-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-20) var(--space-32);
  margin: var(--space-32) 0;
}
html:root .ce-sim-row {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) minmax(0, 1.2fr) 4ch; /* 128 fits the longest Korean name on one line */
  align-items: center;
  gap: var(--space-12);
  min-height: 44px;
}
html:root .ce-sim-row span {
  display: grid;
  font-size: var(--text-footnote-size);
  font-weight: 600;
}
html:root .ce-sim-row small {
  font-weight: 400;
  color: var(--text-tertiary);
}
/* Slider, iOS 26 style: a thin track filled to --v in the UI accent (not the grade colour, so six
   sliders stay calm while the score above changes colour), and a short horizontal glass capsule
   for the knob. While dragged the capsule grows and turns to clear glass, so the track shows
   through it. The input is 28px tall so the knob is easy to catch; the row keeps a 44px target. */
html:root .ce-sim-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
html:root .ce-sim-row input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--ui-accent) var(--v, 0%), var(--fill-default) var(--v, 0%));
}
html:root .ce-sim-row input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--fill-default);
}
html:root .ce-sim-row input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--ui-accent);
}
html:root .ce-sim-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px;
  height: 20px;
  margin-top: -8px;
  border: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(255 255 255 / 0.86));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12), 0 6px 14px rgb(0 0 0 / 0.08);
  -webkit-backdrop-filter: blur(4px) saturate(1.6);
  backdrop-filter: blur(4px) saturate(1.6);
  transition: transform 0.2s var(--ease-standard), background 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}
html:root .ce-sim-row input[type="range"]::-moz-range-thumb {
  width: 34px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(255 255 255 / 0.86));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12), 0 6px 14px rgb(0 0 0 / 0.08);
  transition: transform 0.2s var(--ease-standard), background 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}
html:root .ce-sim-row input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.18);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.22));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.85), inset 0 -4px 8px rgb(255 255 255 / 0.45), 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.14);
}
html:root .ce-sim-row input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.18);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.22));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.85), inset 0 -4px 8px rgb(255 255 255 / 0.45), 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.14);
}
html:root .ce-sim-row input[type="range"]:focus-visible { outline: none; }
html:root .ce-sim-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12), 0 6px 14px rgb(0 0 0 / 0.08), 0 0 0 2px var(--surface-card), 0 0 0 4px var(--focus-ring);
}
html:root .ce-sim-row input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12), 0 6px 14px rgb(0 0 0 / 0.08), 0 0 0 2px var(--surface-card), 0 0 0 4px var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  html:root .ce-sim-row input[type="range"]::-webkit-slider-thumb { transition: none; }
  html:root .ce-sim-row input[type="range"]::-moz-range-thumb { transition: none; }
}
html:root .ce-sim-row output {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Small motions: panels slide in when a tab opens, a factor row flashes when picked on the radar,
   cards lift a little under the pointer */
html:root [data-panel]:not(.tab-off) {
  animation: panel-in 0.2s var(--ease-standard) both;
}
@keyframes panel-in {
  from { opacity: 0; }
}
html:root .factor-row.is-flash {
  animation: flash 1.2s var(--ease-standard);
}
@keyframes flash {
  0%, 40% {
    background: color-mix(in srgb, var(--band-near) 14%, transparent);
  }
}
html:root .ce-radar .dot {
  cursor: pointer;
  transition: r 0.15s;
}
html:root .ce-radar .dot:hover,
html:root .ce-radar .dot:focus-visible {
  r: 8;
}
@media (hover: hover) {
  /* Only genuinely interactive marks respond to hover. Heat and calendar cells are read-only
     counts, so they must not take an outline — that reads as a focus ring on a thing you cannot
     click. The summary, persona-stat and log-insight cards no longer lift for the same reason. */
  html:root .ce-log-list li:hover {
    background: var(--fill-faint);
  }
}

/* ===== Summary (layout C): who → judgement (rail) beside observed facts (story) =====
   Decided in design-system/decisions/summary-layout.html. Selectors carry `body` so older summary
   rules (.ce-sum, .ce-sum-score, .report-identity …) can never outrank them. */
:root {
  --ring-high: var(--red-400);
  --ring-sub: var(--amber-300);
  --ring-near: var(--blue-400);
  --ring-prime: var(--green-400);
}
:root[data-theme="dark"] {
  --ring-high: var(--red-600);
  --ring-sub: var(--amber-500);
  --ring-near: var(--blue-600);
  --ring-prime: var(--green-600);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ring-high: var(--red-600);
    --ring-sub: var(--amber-500);
    --ring-near: var(--blue-600);
    --ring-prime: var(--green-600);
  }
}
html:root body .ce-sum2 {
  margin-bottom: var(--space-16);
}
/* ① who: one line on the page, no card */
html:root body .ce-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  /* 40px above: room for the coach mark under the tabs, so it never covers the wallet name */
  padding: var(--space-40) var(--space-4) var(--space-16);
}
html:root body .ce-id #report-address {
  font-size: var(--text-headline-size);
  font-weight: 700;
}
html:root body .ce-id-addr {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
html:root body .ce-id #copy-address {
  min-height: 28px;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--fill-subtle);
  color: var(--text-primary);
  font-size: var(--text-caption-1-size);
  font-weight: 600;
}
html:root body .ce-id-chains {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root body .ce-id-chains[hidden] {
  display: none;
}
html:root body .ce-id-chains .ce-stack .ce-logo,
html:root body .ce-facts .ce-stack .ce-logo {
  width: 22px;
  height: 22px;
  margin-left: -5px;
  box-shadow: 0 0 0 2px var(--bg-grouped);
}
html:root body .ce-facts .ce-stack .ce-logo {
  box-shadow: 0 0 0 2px var(--surface-card);
}
html:root body .ce-id-stamp {
  font-size: var(--text-caption-1-size);
  color: var(--text-tertiary);
}
html:root body .ce-id-chains[hidden] + .ce-id-stamp {
  margin-left: auto;
}
/* ② + ③ side by side */
html:root body .ce-c {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: stretch;
}
/* the rail: everything the model decided, on the inverse surface */
html:root body .ce-rail {
  /* secondary tones of whatever text sits on the inverse surface (navy in light, white in dark) */
  --r-2: color-mix(in srgb, var(--text-on-inverse) 68%, transparent);
  --r-3: color-mix(in srgb, var(--text-on-inverse) 45%, transparent);
  --r-sep: color-mix(in srgb, var(--text-on-inverse) 12%, transparent);
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}
html:root body .ce-rail header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
html:root body .ce-rail h3 {
  margin: 0;
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--r-2);
}
html:root body .ce-ring {
  position: relative;
  width: min(260px, 100%);
  margin: var(--space-4) auto var(--space-8);
}
html:root body .ce-ring svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
html:root body .ce-ring path {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}
html:root body .ce-ring .ring-track {
  stroke: var(--r-sep);
}
html:root body .ce-ring .ring-fill.ring-high { stroke: var(--ring-high); }
html:root body .ce-ring .ring-fill.ring-sub { stroke: var(--ring-sub); }
html:root body .ce-ring .ring-fill.ring-near { stroke: var(--ring-near); }
html:root body .ce-ring .ring-fill.ring-prime { stroke: var(--ring-prime); }
/* band edges: short ticks just outside the arc, in the colour of the band that starts there */
html:root body .ce-ring .ring-tick {
  stroke-width: 2;
  stroke-linecap: round;
}
html:root body .ce-ring .ring-tick.ring-sub { stroke: var(--ring-sub); }
html:root body .ce-ring .ring-tick.ring-near { stroke: var(--ring-near); }
html:root body .ce-ring .ring-tick.ring-prime { stroke: var(--ring-prime); }
html:root body .ce-ring .ring-lbl {
  font-size: 10px;
  font-weight: 600;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
html:root body .ce-ring .ring-lbl.ring-sub { fill: var(--ring-sub); }
html:root body .ce-ring .ring-lbl.ring-near { fill: var(--ring-near); }
html:root body .ce-ring .ring-lbl.ring-prime { fill: var(--ring-prime); }
/* the number sits in the ring's middle as HTML, so it can count up */
html:root body .ce-ring-c {
  /* centred on the ring's own centre (viewBox y 100 of -10…180 = 57.9%), not hung from the top */
  position: absolute;
  inset: 57.9% 0 auto;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
}
html:root body .ce-ring-c b {
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
html:root body .ce-ring-c > span {
  margin-top: 4px;
  font-size: var(--text-caption-1-size);
  color: var(--r-3);
}
html:root body .ce-ring-grade {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: var(--space-12) 0 0;
  font-size: var(--text-subhead-size);
  color: var(--r-2);
}
html:root body .ce-ring-grade strong {
  font-weight: 800;
}
html:root body .ce-rail[data-band="high"] .ce-ring-grade strong { color: var(--ring-high); }
html:root body .ce-rail[data-band="sub"] .ce-ring-grade strong { color: var(--ring-sub); }
html:root body .ce-rail[data-band="near"] .ce-ring-grade strong { color: var(--ring-near); }
html:root body .ce-rail[data-band="prime"] .ce-ring-grade strong { color: var(--ring-prime); }
html:root body .ce-why-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-12);
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--r-2);
}
html:root body .ce-why-h .ce-link {
  color: var(--text-on-inverse);
  font-size: var(--text-footnote-size);
}
html:root body .ce-why {
  margin: var(--space-4) 0 0;
}
html:root body .ce-why > div {
  padding: var(--space-12) 0;
}
html:root body .ce-why > div + div {
  border-top: 1px solid var(--r-sep);
}
html:root body .ce-why dt {
  font-size: var(--text-caption-1-size);
  color: var(--r-3);
}
html:root body .ce-why dd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-12);
  margin: 2px 0 0;
  font-size: var(--text-subhead-size);
  font-weight: 600;
}
html:root body .ce-why dd b {
  font-size: var(--text-headline-size);
  font-variant-numeric: tabular-nums;
}
html:root body .ce-why dd small {
  font-weight: 400;
  font-size: var(--text-caption-1-size);
  color: var(--r-3);
}
/* indicative terms: the quietest line, at the bottom */
html:root body .ce-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-12);
  margin: auto 0 0;
  padding-top: var(--space-16);
  border-top: 1px solid var(--r-sep);
  font-size: var(--text-footnote-size);
  color: var(--r-2);
}
html:root body .ce-terms b {
  color: var(--text-on-inverse);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html:root body .ce-terms small {
  flex-basis: 100%;
  font-size: var(--text-caption-1-size);
  color: var(--r-3);
}
/* the story: what this wallet is, and the facts behind it */
html:root body .ce-story {
  display: flex;
  flex-direction: column;
  padding: var(--space-32) var(--space-32) var(--space-8);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
html:root body .ce-story-kicker {
  margin: 0;
  font-size: var(--text-footnote-size);
  font-weight: 600;
  color: var(--text-secondary);
}
html:root body .ce-story-title {
  margin: 2px 0 0;
  font-size: var(--text-title-1-size);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
html:root body .ce-story-line {
  margin: var(--space-8) 0 var(--space-16);
  font-size: var(--text-callout-size);
  color: var(--text-secondary);
  text-wrap: pretty;
}
html:root body .ce-story-line b {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}
html:root body .ce-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}
html:root body .ce-facts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--space-16);
  min-height: 60px;
  padding: var(--space-12) 0;
  border-top: 1px solid var(--stroke-separator);
}
html:root body .ce-facts li[hidden] {
  display: none;
}
html:root body .ce-facts li > div {
  display: grid;
  gap: 2px;
}
html:root body .ce-facts li b {
  font-size: var(--text-subhead-size);
  font-weight: 600;
}
html:root body .ce-facts li small {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root body .ce-facts li > strong {
  font-size: var(--text-title-3-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:root body .ce-facts li.is-sub {
  min-height: 44px;
  padding-left: var(--space-16);
}
html:root body .ce-facts li.is-sub b {
  font-size: var(--text-footnote-size);
  font-weight: 500;
  color: var(--text-secondary);
}
html:root body .ce-facts #sum-risk {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--text-primary);
}
html:root body .ce-facts .ce-stack {
  margin-top: 4px;
  padding-left: 5px;
}
html:root body .ce-fact-share {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-4);
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root body .ce-fact-share[hidden] {
  display: none;
}
html:root body .ce-fact-share > span {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--fill-subtle);
  overflow: hidden;
}
html:root body .ce-fact-share i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-primary);
}
html:root body .ce-story-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  margin-top: auto;
  border-top: 1px solid var(--stroke-separator);
  color: var(--text-primary);
  font-size: var(--text-subhead-size);
  text-decoration: none;
}
html:root body .ce-story-link .icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}
@media (max-width: 860px) {
  html:root body .ce-c {
    grid-template-columns: 1fr;
  }
  html:root body .ce-id-chains {
    margin-left: 0;
    flex-basis: 100%;
  }
  html:root body .ce-story {
    padding: var(--space-24) var(--space-20) var(--space-4);
  }
  html:root body .ce-story-title {
    font-size: var(--text-title-2-size);
  }
}
html:root body .ce-rail .ce-sum-pill {
  background: var(--r-sep);
  color: var(--text-on-inverse);
}
html:root body .ce-rail .ce-sum-pill.is-estimated {
  background: var(--warning-fill);
  color: var(--navy-900);
}
html:root body .ce-rail-tools {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
html:root body .ce-rail-tools .ce-sum-pill[hidden] {
  display: none;
}
html:root body .ce-rail-how {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 4px;
  color: var(--r-2);
  font-size: var(--text-caption-1-size);
  font-weight: 600;
  text-decoration: none;
}
html:root body .ce-rail-how:hover {
  color: var(--text-on-inverse);
}
html:root body .ce-rail-how .icon {
  width: 14px;
  height: 14px;
}
html:root body .ce-ring .ring-dot.ring-high { fill: var(--ring-high); }
html:root body .ce-ring .ring-dot.ring-sub { fill: var(--ring-sub); }
html:root body .ce-ring .ring-dot.ring-near { fill: var(--ring-near); }
html:root body .ce-ring .ring-dot.ring-prime { fill: var(--ring-prime); }
/* the logo's dot: it stands in its own clear gap, so it needs no halo */
html:root body .ce-ring .ring-dot {
  stroke: none;
}

/* ===== Lookup in progress: quieter =====
   head (step + %) → one bar → meta (sources · time, cancel) → checklist. The note and the source chips
   only show when a network is slow (.is-slow, set in analysisFrame). */
html:root body .ce-entry .loading {
  margin-top: var(--space-20);
  padding: var(--space-20) var(--space-24);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
html:root body .ce-load-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 24px;
}
/* the headline spinner turns with the step spinners (same 0.8 s period, same clock) */
html:root body .ce-load-head .spinner {
  animation-duration: 0.8s;
}
html:root body .ce-load-head strong {
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--text-primary);
  /* one line always: a long "…응답 기다리는 중" must not wrap and push the card down mid-lookup */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:root body .ce-load-pct {
  margin-left: auto;
  font-size: var(--text-subhead-size);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
html:root body .ce-entry .loading .loading-track.is-progress {
  height: 4px;
  margin-top: var(--space-12);
  border-radius: var(--radius-full);
}
html:root body .ce-load-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  font-size: var(--text-caption-1-size);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
html:root body .ce-load-meta #cancel {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-caption-1-size);
  text-decoration: none;
  cursor: pointer;
}
html:root body .ce-load-meta #cancel:hover {
  color: var(--text-primary);
}
html:root body .ce-entry .loading .ce-an-steps {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--stroke-separator);
  gap: 2px var(--space-16);
}
/* pending: just a small dot; active: a small spinner; done: a quiet check */
html:root body .ce-entry .loading .ce-an-steps li i {
  width: 12px;
  height: 12px;
  border: 0;
  background: none;
}
html:root body .ce-entry .loading .ce-an-steps li i::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--fill-strong);
}
html:root body .ce-entry .loading .ce-an-steps li.is-active i {
  border: 1.5px solid var(--fill-default);
  border-top-color: var(--ui-accent);
  border-radius: 50%;
}
html:root body .ce-entry .loading .ce-an-steps li.is-active i::before,
html:root body .ce-entry .loading .ce-an-steps li.is-done i::before {
  content: none;
}

html:root body .ce-entry .loading .ce-an-steps li.is-done {
  color: var(--text-secondary);
}
html:root body .ce-entry .loading .ce-an-feed,
html:root body .ce-entry .loading .ce-load-note {
  display: none;
}
/* finished: the spinner becomes a check before the report replaces the card */

/* Step and finish markers are SVG icons centred by flex, never hand-placed CSS shapes: every marker
   is a 14px box, its content centred, so a dot, a spinner and a check all share one centre. */
html:root body .ce-entry .loading .ce-an-steps li i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}
html:root body .ce-entry .loading .ce-an-steps li i .icon {
  display: none;
  width: 14px;
  height: 14px;
  color: var(--success-fill);
}
html:root body .ce-entry .loading .ce-an-steps li.is-done i {
  border: 0;
  background: none;
}
html:root body .ce-entry .loading .ce-an-steps li.is-done i::after {
  content: none;
}
html:root body .ce-entry .loading .ce-an-steps li.is-done i .icon {
  display: block;
}
html:root body .ce-load-done {
  display: none;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--success-fill);
}
html:root body .ce-load-done .icon {
  width: 16px;
  height: 16px;
}
html:root body .ce-entry .loading.is-complete .ce-load-head .spinner {
  display: none;
}
html:root body .ce-entry .loading.is-complete .ce-load-done {
  display: grid;
}
/* A step whose source failed ends with the shared warning mark instead of a check (is-warn, set in analysisFrame) */
html:root body .ce-entry .loading .ce-an-steps li i .icon.is-w {
  display: none;
}
html:root body .ce-entry .loading .ce-an-steps li.is-warn i::before {
  content: none;
}
html:root body .ce-entry .loading .ce-an-steps li.is-warn i .icon.is-w {
  display: block;
}
html:root body .ce-an-steps li.is-warn {
  color: var(--text-secondary);
}
/* Every source the server reads, on one quiet line under the meta row: faint until it answers, darker once it has,
   struck through if it never answered (the warning mark stays on the step). Nothing is inserted, so the line never
   rewraps and the card keeps its height. */
html:root body .ce-an-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  margin-top: var(--space-8);
  font-size: var(--text-caption-1-size);
  color: var(--text-tertiary);
}
html:root body .ce-an-sources span {
  transition: color 220ms var(--ease-standard);
}
html:root body .ce-an-sources span.is-in,
html:root body .ce-an-sources span.is-fail {
  color: var(--text-secondary);
}
html:root body .ce-an-sources span.is-fail {
  text-decoration: line-through;
}
/* The last step (한 줄 포커스): a header row, one focus line for what is being weighed now, and every factor and
   stress case on quiet lines that darken as they finish. Everything is there from the start, so the card keeps
   one height while it scores. Indented to the step text (marker 14 + gap 8). */
html:root body .ce-an-steps li.has-focus {
  flex-wrap: wrap;
  grid-column: 1 / -1;
}
html:root body .ce-an-focus {
  flex-basis: 100%;
  margin-top: var(--space-8);
  padding-left: calc(14px + var(--space-8));
  font-weight: 400;
}
html:root body .ce-an-focus-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-caption-1-size);
  color: var(--text-secondary);
}
html:root body .ce-an-focus-h span:first-child {
  font-weight: 600;
}
html:root body .ce-an-focus-h b {
  color: var(--text-primary);
  font-size: var(--text-footnote-size);
  font-weight: 700;
}
html:root body .ce-an-roll {
  position: relative;
  height: 28px;
  margin-top: var(--space-4);
  overflow: hidden;
  color: var(--text-primary);
}
html:root body .ce-an-focus:not(.is-active) .ce-an-roll,
html:root body .ce-an-focus:not(.is-active) .ce-an-focus-h b {
  color: var(--text-tertiary);
}
/* a quiet cross-fade, not a flip: the old label fades out and drifts up 4px while the new one settles in 6px from below, overlapping so the line is never blank */
html:root body .ce-an-line {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-subhead-size);
  font-weight: 600;
  transition:
    opacity 240ms var(--ease-standard),
    transform 400ms var(--ease-standard);
}
html:root body .ce-an-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:root body .ce-an-line b {
  flex: none;
  font-weight: 700;
}
html:root body .ce-an-line.is-enter {
  opacity: 0;
  transform: translateY(6px);
}
html:root body .ce-an-line.is-leave {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 240ms var(--ease-standard),
    transform 240ms var(--ease-standard);
}
html:root body .ce-an-done {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  margin-top: var(--space-8);
  font-size: var(--text-caption-1-size);
}
html:root body .ce-an-done span {
  color: var(--text-tertiary);
  transition: color 220ms var(--ease-standard);
}
html:root body .ce-an-done b {
  color: inherit;
  font-weight: 600;
  transition: color 220ms var(--ease-standard);
}
html:root body .ce-an-done span.is-in {
  color: var(--text-secondary);
}
html:root body .ce-an-done span.is-in b {
  color: var(--text-primary);
}
@media (prefers-reduced-motion: reduce) {
  html:root body .ce-an-line,
  html:root body .ce-an-done span,
  html:root body .ce-an-done b {
    transition: none;
  }
}

/* ===== Card insets: one rule =====
   Content cards are inset 24 on every side. The two exceptions are deliberate: the score simulator
   (40, one wide control panel) and the summary pair (rail + story, both 32 so they line up).
   List cards whose rows carry their own padding (bonds/commodities, data status) keep 8 · 24, which
   already reads as 24. The activity cards, the radar and the stress section had 8–20 above and below. */
html:root body :is(#act-card, #act-income, #act-credit, #act-log, #act-flow, .ce-exp-card, .ce-track).source-card,
html:root body .ce-radar-card {
  padding: var(--space-24);
}
/* these two end on 40px list rows, which already leave ~11px under the text */
html:root body :is(#act-card, #act-income, #act-credit).source-card {
  padding-bottom: var(--space-12);
}
html:root body :is(#act-card, #act-income, #act-credit, #act-log, #act-flow) > :first-child {
  margin-top: 0;
}
/* the stress section is a disclosure list: its summary row carries the inset */
html:root body .stress-section > summary {
  padding-block: var(--space-20);
}
html:root body .ce-rail {
  padding: var(--space-32);
}
/* the header row is as tall as the 산정 방식 link (28); top-align it so the label starts on the
   same line as the story's first line instead of 4px lower */
html:root body .ce-rail header {
  align-items: flex-start;
}
@media (max-width: 640px) {
  /* phones: every card 20 (the page gutter scale), the pair and the simulator included */
  html:root body :is(#act-log, #act-flow, .ce-exp-card, .ce-track).source-card,
  html:root body .ce-radar-card,
  html:root body .ce-rail,
  html:root body .ce-story {
    padding: var(--space-20);
  }
  html:root body .ce-sim {
    padding: var(--space-20);
  }
  html:root body :is(#act-card, #act-income, #act-credit).source-card {
    padding: var(--space-20) var(--space-20) var(--space-8);
  }
}
html:root body .stress-section > .detail-note {
  margin-bottom: 0;
  padding-bottom: var(--space-20);
}
@media (max-width: 640px) {
  /* phones: list cards share the 20px side inset too, so every card's text starts on one edge */
  html:root body :is(#factor-list, .stress-section, .source-card.rwa-card, #source-report .source-card) {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
  }
}

/* ===== Grade badge: one look in the summary ring and the simulator =====
   A pill tinted with the band colour, the grade in the band colour, 13/20, centred on the line
   it sits in. Beside it the band name or the score, centre-aligned rather than baseline-aligned
   (a 48px number and a 13px pill share no useful baseline). */
html:root body .ce-ring-grade {
  align-items: center;
  gap: var(--space-8);
}
html:root body .ce-ring-grade strong {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--g, var(--ring-prime)) 22%, transparent);
  color: var(--g, var(--ring-prime));
  font-size: var(--text-footnote-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}
html:root body .ce-rail[data-band="high"] { --g: var(--ring-high); }
html:root body .ce-rail[data-band="sub"] { --g: var(--ring-sub); }
html:root body .ce-rail[data-band="near"] { --g: var(--ring-near); }
html:root body .ce-rail[data-band="prime"] { --g: var(--ring-prime); }
html:root body .ce-rail[data-band] .ce-ring-grade strong {
  color: var(--g);
}
/* simulator: score and badge on one centre line, the change underneath, all right-aligned */
html:root body .ce-sim-out {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: end;
  gap: var(--space-4) var(--space-8);
}
html:root body .ce-sim-out b {
  line-height: 1;
}
html:root body .ce-sim-out span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-footnote-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}
html:root body .ce-sim-out small {
  grid-column: 1 / -1;
  justify-self: end;
}
/* desktop entry: the example result sits at the top of its column, level with the title */
@media (min-width: 641px) {
  html:root body .ce-entry-inner > .ce-preview {
    align-self: start;
  }
}

/* ===== Entry: example wallets under the hero, full width =====
   The example result now sits at the top of the right column, so the examples leave the left
   column and run across the page. On wide screens the categories flow into two balanced columns
   (CSS columns, so a ten-chip row and a three-chip row don't leave holes beside each other). */
html:root body .ce-entry-inner > .ce-samples {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}
@media (min-width: 1051px) {
  html:root body .ce-entry-inner > .ce-samples {
    display: block;
    columns: 2;
    column-gap: var(--space-48);
  }
  html:root body .ce-entry-inner > .ce-samples > .ce-samples-head {
    column-span: all;
  }
  html:root body .ce-entry-inner > .ce-samples > .ce-sample-row {
    break-inside: avoid;
    margin-bottom: var(--space-12);
  }
}

/* Examples sit closer to the hero, and their header carries the address-source note on the right */
@media (min-width: 641px) {
  html:root body .ce-entry-inner {
    row-gap: var(--space-40);
  }
  /* the grid's row gap spaces the examples here; on phones (no row gap) the phone block's 32 above them applies.
     This used to sit in the full-width rule above for every width and zeroed the phone spacing. */
  html:root body .ce-entry-inner > .ce-samples {
    margin-top: 0;
  }
  html:root .ce-entry {
    padding-top: var(--space-48);
  }
}
html:root body .ce-entry-inner > .ce-samples {
  padding-top: 0;
}
html:root body .ce-samples-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8) var(--space-24);
  margin-bottom: var(--space-16);
}
html:root body .ce-samples-head .ce-samples-help {
  margin: 2px 0 0;
}
html:root body .ce-samples-head .ce-sources {
  margin: 0;
}
html:root body .ce-samples-head .ce-sources summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
/* 주소 표기 출처: the last line of the examples, at the bottom right; it opens in place, the note
   right-aligned under its link at a readable width */
html:root body .ce-entry-inner > .ce-samples > .ce-sources {
  column-span: all;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: var(--space-8);
}
html:root body .ce-sources-panel {
  display: block;
  width: min(640px, 100%);
  margin: var(--space-8) 0 0;
  text-align: left;
}

/* ===== Method: weights in one navy ramp, grades in their band colours =====
   The six weights are an ordered quantity, so they read as one hue getting lighter as the weight
   falls (no odd grey sixth that looked disabled). The grade list shows the four bands it maps to. */
html:root body .ce-weight-bar i,
html:root body .ce-factors li .ce-swatch {
  background: color-mix(in srgb, var(--chart-1) var(--k, 100%), var(--surface-card));
  color: var(--text-on-inverse);
}
html:root body :is(.ce-weight-bar i:nth-child(1), .ce-factors li:nth-child(1) .ce-swatch) { --k: 100%; }
html:root body :is(.ce-weight-bar i:nth-child(2), .ce-factors li:nth-child(2) .ce-swatch) { --k: 84%; }
html:root body :is(.ce-weight-bar i:nth-child(3), .ce-factors li:nth-child(3) .ce-swatch) { --k: 68%; }
html:root body :is(.ce-weight-bar i:nth-child(4), .ce-factors li:nth-child(4) .ce-swatch) { --k: 52%; }
html:root body :is(.ce-weight-bar i:nth-child(5), .ce-factors li:nth-child(5) .ce-swatch) { --k: 38%; }
html:root body :is(.ce-weight-bar i:nth-child(6), .ce-factors li:nth-child(6) .ce-swatch) { --k: 26%; }
html:root body :is(.ce-weight-bar i:nth-child(5), .ce-weight-bar i:nth-child(6)) {
  color: var(--text-primary);
}
html:root body .ce-grades .ce-badge {
  min-width: 44px;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.02em;
}
html:root body .ce-grades li > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
html:root body .ce-grade-band {
  font-size: var(--text-footnote-size);
  color: var(--text-secondary);
}
html:root body .ce-grades li[data-band="prime"] .ce-badge { background: color-mix(in srgb, var(--success-fill) 20%, transparent); color: var(--success-text); }
html:root body .ce-grades li[data-band="near"] .ce-badge { background: var(--info-bg); color: var(--info-text); }
/* subprime: a soft amber tint with navy text (solid #FFCC00 was too loud; amber text reads brown) */
html:root body .ce-grades li[data-band="sub"] .ce-badge { background: color-mix(in srgb, var(--warning-fill) 30%, transparent); color: var(--navy-900); }
html:root body .ce-grades li[data-band="high"] .ce-badge { background: var(--error-bg); color: var(--error-text); }

/* ===== Financial activity: the small cards share the row evenly =====
   The grid used to be auto-fit 260px tracks; the full-width cash-flow card kept every track alive,
   so two small cards left half the row empty. Columns now follow how many small cards show. */
html:root body .ce-act {
  grid-template-columns: 1fr;
}
@media (min-width: 761px) {
  html:root body .ce-act:has(> .ce-act-card:not([hidden]) ~ .ce-act-card:not([hidden])) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html:root body .ce-act:has(> .ce-act-card:not([hidden]) ~ .ce-act-card:not([hidden]) ~ .ce-act-card:not([hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
html:root body .ce-act > :is(.ce-act-flow, .ce-act-log) {
  grid-column: 1 / -1;
}
/* the line under the big number is a caption in one card and a status badge in another: give it
   one height so the list rows below start level in every card */
html:root body .ce-act-card .ce-act-cap {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: var(--space-4) 0 var(--space-12);
}