/* Generated by node scripts/build-shell-css.mjs. Edit the source files, then regenerate. */
/* Source: assets/css/mbticalc-tokens.css */
/* mbticalc v2 proposed — user-directed Omni visual reference, 2026-09-22.
   Layout/color/font changes authorized by “你严格按Omni设计”; sample approval is pending. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-latin-700.woff2") format("woff2"); }
:root {
  color-scheme: light;

  --mb-home-panel: #F8F9FB;
  --mb-home-tint: linear-gradient(180deg, rgb(247 249 255 / 0%) 0%, #F7F9FF 100%), linear-gradient(110deg, #E9ECFF 0%, #FBF3E5 30%, #F4E8F3 55%, #E5ECFF 75%, #F8F9FB 100%);
  --mb-page: #F7F9FF;
  --mb-surface: #FFFFFF;
  --mb-surface-subtle: #F8F9FB;
  --mb-text: #212427;
  --mb-text-secondary: #4D5259;
  --mb-text-muted: #606772;
  --mb-border: #C3C8D4;           /* 装饰性分隔，不用于唯一的控件识别 */
  --mb-control-border: #7A8698;  /* 输入框等必要边界 */

  --mb-brand: #3B61EE;
  --mb-brand-hover: #2945B8;
  --mb-brand-active: #223B9B;
  --mb-brand-soft: #EEF2FF;
  --mb-on-brand: #FFFFFF;
  --mb-focus: #3B61EE;

  --mb-success: #176B45;
  --mb-success-soft: #EDF8F1;
  --mb-warning: #8A5200;
  --mb-warning-soft: #FFF7E6;
  --mb-danger: #B42318;
  --mb-danger-soft: #FFF1F0;
  --mb-disabled-bg: #F1F3F6;
  --mb-disabled-text: #606E80;

  --mb-series-1: #3B61EE;
  --mb-series-2: #7C3EC8;
  --mb-series-3: #117F7A;
  --mb-series-4: #A65A00;
  --mb-series-5: #B42367;

  --mb-font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --mb-text-sm: 0.875rem;
  --mb-text-base: 1rem;
  --mb-text-lg: 1.125rem;
  --mb-text-xl: 1.25rem;
  --mb-heading-2: 1.5rem;
  --mb-heading-1: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
  --mb-home-title: 1.875rem;
  --mb-result-number: clamp(2rem, 1.5rem + 2vw, 3rem);
  --mb-weight-regular: 400;
  --mb-weight-medium: 600;
  --mb-weight-bold: 700;
  --mb-leading-body: 1.6;
  --mb-leading-ui: 1.4;
  --mb-leading-heading: 1.25;

  --mb-space-1: 0.25rem;
  --mb-space-2: 0.5rem;
  --mb-space-3: 0.75rem;
  --mb-space-4: 1rem;
  --mb-space-5: 1.25rem;
  --mb-space-6: 1.5rem;
  --mb-space-8: 2rem;
  --mb-space-10: 2.5rem;
  --mb-space-12: 3rem;
  --mb-space-16: 4rem;

  --mb-radius-sm: 0.375rem;
  --mb-radius-control: 0.5rem;
  --mb-radius-card: 0.5rem;
  --mb-radius-pill: 999px;
  --mb-border-width: 1px;
  --mb-shadow-card: 0 1px 2px rgb(59 104 252 / 10%);
  --mb-shadow-hover: 0 4px 12px rgb(24 35 54 / 8%);
  --mb-shadow-overlay: 0 12px 32px rgb(24 35 54 / 14%);

  --mb-container: 84rem;
  --mb-reading: 44rem;
  --mb-question-width: 44rem;
  --mb-sidebar: 20rem;
  --mb-gutter: 1.5rem;
  --mb-header-min-height: 3.75rem;
  --mb-control-min-height: 3rem;
  --mb-target-min: 2.75rem;
  --mb-icon-sm: 1rem;
  --mb-icon: 1.25rem;
  --mb-icon-lg: 1.5rem;
  --mb-motion-fast: 120ms;
  --mb-motion-normal: 180ms;
  --mb-motion-easing: ease-out;
  --mb-z-sticky: 20;
  --mb-z-menu: 40;
  --mb-z-dialog: 60;
  --mb-z-toast: 80;
}

/* 固定断点：40rem / 64rem；不能在每个页面另创一套。 */
@media (min-width: 40rem) {
  :root { --mb-gutter: 1.5rem; }
}
@media (min-width: 64rem) {
  :root {
    --mb-gutter: 3rem;
    --mb-header-min-height: 4.5rem;
  }
}


/* Source: assets/css/mbticalc-ui.css */
/* mbticalc UI v2 proposed, based on observed Omni desktop/mobile layouts. Scoped to the migrated shell; legacy pages are unaffected. */
.mb-shell, .mb-shell * { box-sizing: border-box; }
.mb-shell { margin: 0; background: var(--mb-page); color: var(--mb-text); font: var(--mb-weight-regular) var(--mb-text-base)/var(--mb-leading-body) var(--mb-font); }
.mb-shell :where(h1,h2,h3,h4,p,ul,ol,figure) { margin: 0; }
.mb-shell :where(h1,h2,h3,h4) { line-height: var(--mb-leading-heading); overflow-wrap: anywhere; }
.mb-shell h1 { font-size: var(--mb-heading-1); font-weight: var(--mb-weight-bold); }
.mb-shell h2 { font-size: var(--mb-heading-2); font-weight: var(--mb-weight-bold); }
.mb-shell h3, .mb-shell h4 { font-size: var(--mb-text-xl); font-weight: var(--mb-weight-medium); }
.mb-shell a { color: var(--mb-brand); text-underline-offset: var(--mb-space-1); }
.mb-shell a:hover { color: var(--mb-brand-hover); }
.mb-shell :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 2px solid var(--mb-focus); outline-offset: 2px; }
.mb-shell img { max-width: 100%; height: auto; }
.mb-shell :where(button,input,select,textarea) { font: inherit; }
.mb-shell :where(button,a,input,select,textarea) { -webkit-tap-highlight-color: transparent; }
.mb-container { width: min(var(--mb-container), calc(100% - var(--mb-gutter) * 2)); margin-inline: auto; }
.mb-skip-link { position: absolute; z-index: var(--mb-z-toast); left: var(--mb-gutter); top: var(--mb-space-2); padding: var(--mb-space-3); background: var(--mb-surface); transform: translateY(-200%); }
.mb-skip-link:focus { transform: none; }
.mb-header { background: var(--mb-surface); border-bottom: var(--mb-border-width) solid var(--mb-border); }
.mb-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--mb-space-4); min-height: var(--mb-header-min-height); padding-block: var(--mb-space-2); }
.mb-brand { grid-column: 2; grid-row: 1; justify-self: center; display: inline-flex; align-items: center; gap: var(--mb-space-2); text-decoration: none; color: var(--mb-brand); font-size: 1.75rem; font-weight: var(--mb-weight-medium); }
.mb-brand img { width: var(--mb-space-10); height: var(--mb-space-10); object-fit: contain; }
.mb-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-space-2); padding-block: var(--mb-space-3); border-top: var(--mb-border-width) solid var(--mb-border); }
.mb-nav a { display: flex; align-items: center; min-height: var(--mb-target-min); padding: var(--mb-space-2) var(--mb-space-3); color: var(--mb-text-secondary); text-decoration: none; border-radius: var(--mb-radius-control); }
.mb-nav a:hover, .mb-nav a[aria-current="page"] { background: var(--mb-brand-soft); color: var(--mb-brand); }
.mb-nav-toggle { grid-row: 1; grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: var(--mb-space-2); min-height: var(--mb-target-min); padding: var(--mb-space-2); border: 0; border-radius: var(--mb-radius-control); color: var(--mb-text); background: var(--mb-surface); cursor: pointer; }
.mb-nav-toggle:hover, .mb-shell .mbticalc-modal-close:hover { background: var(--mb-brand-soft); }
.mb-nav-toggle:active, .mb-shell .mbticalc-modal-close:active { border-color: var(--mb-brand-active); }
.mb-preview-banner { padding-block: var(--mb-space-2); background: var(--mb-surface-subtle); color: var(--mb-text-secondary); font-size: var(--mb-text-sm); border-bottom: var(--mb-border-width) solid var(--mb-border); }
.mb-preview-banner .mb-container { display: flex; flex-wrap: wrap; gap: var(--mb-space-2) var(--mb-space-4); align-items: center; }
.mb-preview-banner nav { display: flex; flex-wrap: wrap; gap: var(--mb-space-3); }
.mb-preview-banner a { padding-block: var(--mb-space-2); }
.mb-preview-banner summary { display: list-item; min-height: var(--mb-target-min); align-content: center; color: var(--mb-brand); cursor: pointer; }
.mb-preview-banner details[open] { flex-basis: 100%; }
.mb-main { padding-block: var(--mb-space-8); }
.mb-page-heading { display: grid; gap: var(--mb-space-3); margin-bottom: var(--mb-space-6); }
.mb-page-heading > p { max-width: var(--mb-reading); color: var(--mb-text-secondary); }
.mb-home-heading h1 { font-size: var(--mb-home-title); }
.mb-eyebrow { color: var(--mb-brand); font-weight: var(--mb-weight-medium); font-size: var(--mb-text-sm); }
.mb-section { margin-top: var(--mb-space-8); }
.mb-section > h2, .mb-section-heading { margin-bottom: var(--mb-space-5); }
.mb-section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--mb-space-3); }
.mb-section-heading > a { font-size: var(--mb-text-sm); }
.mb-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--mb-space-4); }
.mb-card { min-width: 0; padding: var(--mb-space-4); border: var(--mb-border-width) solid var(--mb-border); border-radius: var(--mb-radius-card); background: var(--mb-surface); box-shadow: var(--mb-shadow-card); }
.mb-shell .mb-card :where(h2,h3) { font-size: var(--mb-text-lg); font-weight: var(--mb-weight-medium); }
.mb-card p { color: var(--mb-text-secondary); margin-top: var(--mb-space-2); }
a.mb-card { display: grid; align-content: start; gap: var(--mb-space-2); color: var(--mb-text); text-decoration: none; transition: border-color var(--mb-motion-fast) var(--mb-motion-easing), box-shadow var(--mb-motion-fast) var(--mb-motion-easing); }
a.mb-card:hover { border-color: var(--mb-brand); box-shadow: var(--mb-shadow-hover); }
a.mb-card:hover h3 { color: var(--mb-brand); text-decoration: underline; }



.mb-icon { flex: none; width: var(--mb-icon); height: var(--mb-icon); color: var(--mb-brand); }
.mb-button, .mb-shell .mbticalc-primary-btn, .mb-shell .mbticalc-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mb-space-2); min-height: var(--mb-control-min-height); min-width: var(--mb-target-min); max-width: 100%; padding: var(--mb-space-3) var(--mb-space-5); border: var(--mb-border-width) solid var(--mb-brand); border-radius: var(--mb-radius-control); background: var(--mb-brand); color: var(--mb-on-brand); line-height: var(--mb-leading-ui); font-weight: var(--mb-weight-medium); text-decoration: none; text-align: center; white-space: normal; cursor: pointer; transition: background var(--mb-motion-fast) var(--mb-motion-easing); }
.mb-shell a.mb-button { color: var(--mb-on-brand); }
.mb-button:hover, .mb-shell .mbticalc-primary-btn:hover, .mb-shell .mbticalc-share-btn:hover { background: var(--mb-brand-hover); border-color: var(--mb-brand-hover); }
.mb-button:active, .mb-shell .mbticalc-primary-btn:active, .mb-shell .mbticalc-share-btn:active { background: var(--mb-brand-active); }
.mb-button-secondary, .mb-shell a.mb-button-secondary { background: var(--mb-surface); border-color: var(--mb-control-border); color: var(--mb-brand); }
.mb-button-secondary:hover { background: var(--mb-brand-soft); color: var(--mb-brand-hover); }
.mb-button:disabled, .mb-shell .mbticalc-share-btn:disabled, .mb-shell :where(input,select,textarea):disabled { background: var(--mb-disabled-bg); color: var(--mb-disabled-text); border-color: var(--mb-border); cursor: not-allowed; }
.mb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-space-4); }
.mb-field { display: grid; gap: var(--mb-space-2); min-width: 0; }
.mb-field label, .mb-field > span { font-weight: var(--mb-weight-medium); }
.mb-shell :where(input:not([type="radio"]):not([type="checkbox"]),select,textarea) { width: 100%; min-width: 0; min-height: var(--mb-control-min-height); padding: var(--mb-space-3); border: var(--mb-border-width) solid var(--mb-control-border); border-radius: var(--mb-radius-control); background: var(--mb-surface); color: var(--mb-text); }
.mb-shell :where(input,select,textarea)[aria-invalid="true"] { border-color: var(--mb-danger); }
.mb-shell :where(input[type="radio"],input[type="checkbox"]) { accent-color: var(--mb-brand); width: var(--mb-icon); height: var(--mb-icon); flex: none; }
.mb-shell fieldset { min-width: 0; margin: 0; border: var(--mb-border-width) solid var(--mb-border); border-radius: var(--mb-radius-control); padding: var(--mb-space-4); }
.mb-shell legend { font-weight: var(--mb-weight-medium); padding-inline: var(--mb-space-2); }
.mb-shell fieldset label { display: flex; align-items: center; gap: var(--mb-space-3); min-height: var(--mb-target-min); }
.mb-shell fieldset label:has(input:checked) { color: var(--mb-brand); background: var(--mb-brand-soft); border-radius: var(--mb-radius-sm); }
.mb-note, .mb-error { padding: var(--mb-space-4); border-radius: var(--mb-radius-control); background: var(--mb-brand-soft); color: var(--mb-text-secondary); }
.mb-error { color: var(--mb-danger); background: var(--mb-danger-soft); }
.mb-badge { display: inline-flex; align-items: center; align-self: start; width: fit-content; padding: var(--mb-space-1) var(--mb-space-2); border-radius: var(--mb-radius-sm); background: var(--mb-brand-soft); color: var(--mb-brand); font-size: var(--mb-text-sm); font-weight: var(--mb-weight-medium); }
.mb-reading { max-width: var(--mb-reading); }
.mb-reading :where(p,ul,ol) + :where(p,ul,ol) { margin-top: var(--mb-space-4); }
.mb-reading :where(h2,h3,h4) { margin-top: var(--mb-space-8); margin-bottom: var(--mb-space-4); }
.mb-reading > :first-child { margin-top: 0; }
.mb-reading li + li { margin-top: var(--mb-space-2); }
.mb-breadcrumbs { margin-bottom: var(--mb-space-5); font-size: var(--mb-text-sm); color: var(--mb-text-muted); }
.mb-breadcrumbs a { margin-right: var(--mb-space-2); }
.mb-footer { margin-top: var(--mb-space-8); padding-block: var(--mb-space-6); background: var(--mb-surface); border-top: var(--mb-border-width) solid var(--mb-border); color: var(--mb-text-muted); }
.mb-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mb-space-4); }
.mb-footer nav { display: flex; flex-wrap: wrap; gap: var(--mb-space-4); }
.mb-footer a { display: inline-flex; align-items: center; min-height: var(--mb-target-min); color: var(--mb-text-secondary); }
.mb-game-stage { padding: var(--mb-space-8); border: var(--mb-border-width) dashed var(--mb-control-border); border-radius: var(--mb-radius-card); background: var(--mb-surface-subtle); }
/* Existing calculator hooks are retained inside this scope. */
.mb-shell .mbticalc-card { padding: var(--mb-space-4); background: var(--mb-surface); border: var(--mb-border-width) solid var(--mb-border); border-radius: var(--mb-radius-card); box-shadow: var(--mb-shadow-card); }
.mb-calculator-heading { padding-bottom: var(--mb-space-5); margin-bottom: var(--mb-space-5); border-bottom: var(--mb-border-width) solid var(--mb-border); }
.mb-calculator-heading h2 { font-size: var(--mb-text-xl); }
.mb-calculator-heading p { margin-top: var(--mb-space-2); color: var(--mb-text-secondary); }
.mb-calculator-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--mb-space-6); }
.mb-shell .mbticalc-controls { display: grid; gap: var(--mb-space-5); align-content: start; min-width: 0; }
.mb-shell .mbticalc-select-row { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--mb-space-4); }
.mb-shell .mbticalc-secondary-btn { display: inline-flex; align-items: center; min-height: var(--mb-target-min); }
.mb-calculator-help { display: grid; align-content: start; gap: var(--mb-space-3); color: var(--mb-text-secondary); }
.mb-calculator-help h3 { color: var(--mb-text); font-size: var(--mb-text-lg); }
.mb-calculator-help ol { padding-left: var(--mb-space-5); }
.mb-calculator-help li + li { margin-top: var(--mb-space-2); }
.mb-shell .home-pf-cta { display: grid; gap: var(--mb-space-3); margin-top: var(--mb-space-6); padding: var(--mb-space-5); border-left: var(--mb-space-1) solid var(--mb-border); background: var(--mb-surface); }
.mb-shell .home-pf-cta-title { font-weight: var(--mb-weight-medium); font-size: var(--mb-text-lg); }
.mb-shell .home-pf-cta-label { color: var(--mb-text-muted); font-size: var(--mb-text-sm); }
.mb-shell .home-pf-cta-text { color: var(--mb-text-secondary); }
.mb-shell .home-pf-cta-note { color: var(--mb-text-secondary); }
.mb-shell .home-pf-cta-btn { display: inline-flex; align-items: center; min-height: var(--mb-target-min); }
/* Scroll the overlay, leaving the export target at its full natural height. */
.mb-shell .mbticalc-modal { position: fixed; inset: 0; z-index: var(--mb-z-dialog); align-items: flex-start; justify-content: center; overflow-y: auto; padding: var(--mb-space-4); }
.mb-shell .mbticalc-modal-backdrop { position: fixed; inset: 0; background: rgb(24 35 54 / 45%); }
.mb-shell .mbticalc-modal-dialog { position: relative; width: min(100%, var(--mb-reading)); margin-block: auto; flex-shrink: 0; padding: var(--mb-space-6); border-radius: var(--mb-radius-card); background: var(--mb-surface); box-shadow: var(--mb-shadow-overlay); }
.mb-shell.mbticalc-modal-open { overflow: hidden; }
.mb-shell .mbticalc-modal-close { display: flex; align-items: center; justify-content: center; margin-left: auto; margin-bottom: var(--mb-space-3); width: var(--mb-target-min); height: var(--mb-target-min); border: var(--mb-border-width) solid var(--mb-control-border); border-radius: var(--mb-radius-control); background: var(--mb-surface); color: var(--mb-text); font-size: var(--mb-text-xl); cursor: pointer; }
.mb-shell .mbticalc-result-box { display: grid; gap: var(--mb-space-3); }
.mb-shell .mbticalc-score { font-size: var(--mb-result-number); line-height: var(--mb-leading-heading); color: var(--mb-brand); font-weight: var(--mb-weight-bold); }
.mb-shell .mbticalc-patternfold { display: grid; gap: var(--mb-space-3); padding-top: var(--mb-space-5); margin-top: var(--mb-space-5); border-top: var(--mb-border-width) solid var(--mb-border); color: var(--mb-text-secondary); }
.mb-shell .pf-title { color: var(--mb-text); font-weight: var(--mb-weight-medium); }
.mb-shell .pf-eyebrow { color: var(--mb-text-muted); font-size: var(--mb-text-sm); }
.mb-shell .pf-points { display: flex; flex-wrap: wrap; gap: var(--mb-space-2); }
.mb-shell .pf-chip { padding: var(--mb-space-1) var(--mb-space-2); background: var(--mb-surface-subtle); border-radius: var(--mb-radius-sm); font-size: var(--mb-text-sm); }
.mb-shell .pf-cta-domain { display: block; font-size: var(--mb-text-sm); }
.mb-shell .mbticalc-share-btn { margin-top: var(--mb-space-5); }
/* Honor visibility from the preserved calculator code without specificity overrides. */
.mb-shell .is-hidden { display: none; }
/* Real matrix: scrolling is confined to its two-dimensional region. */
.mb-shell .pf-chart-card { min-width: 0; }
.mb-shell .pf-chart-title { margin-bottom: var(--mb-space-4); }
.mb-shell .pf-chart-intro { max-width: var(--mb-reading); color: var(--mb-text-secondary); }
.mb-shell .pf-chart-intro p + p { margin-top: var(--mb-space-4); }
.mb-shell .pf-chart-legend { display: flex; flex-wrap: wrap; gap: var(--mb-space-3); margin-block: var(--mb-space-5); }
.mb-shell .pf-chart-legend span { padding: var(--mb-space-2) var(--mb-space-3); border-radius: var(--mb-radius-sm); font-size: var(--mb-text-sm); }
.mb-shell .pf-chart-section { margin-top: var(--mb-space-8); }
.mb-shell .pf-chart-section h2 { margin-bottom: var(--mb-space-5); }
.mb-shell .pf-chart-scroll { max-width: 100%; overflow: auto; border: var(--mb-border-width) solid var(--mb-control-border); border-radius: var(--mb-radius-card); background: var(--mb-surface); }
.mb-shell .pf-compatibility-chart { width: 100%; min-width: var(--mb-container); border-collapse: separate; border-spacing: 0; font-size: var(--mb-text-base); }
.mb-shell .pf-compatibility-chart caption { position: sticky; left: 0; width: min(var(--mb-container), calc(100vw - var(--mb-gutter) * 2 - 2px)); padding: var(--mb-space-4); text-align: left; font-weight: var(--mb-weight-medium); }
.mb-shell .pf-compatibility-chart :where(th,td) { padding: var(--mb-space-3); border-bottom: var(--mb-border-width) solid var(--mb-border); border-right: var(--mb-border-width) solid var(--mb-border); text-align: center; }
.mb-shell .pf-compatibility-chart th { background: var(--mb-surface-subtle); font-weight: var(--mb-weight-medium); }
.mb-shell .pf-compatibility-chart tbody th { position: sticky; left: 0; z-index: 1; }
.mb-shell .pf-compatibility-chart tbody th a { display: inline-flex; align-items: center; min-height: var(--mb-target-min); }
/* Score values and labels remain intact; neutral brand intensity avoids ranking people by red/green. */
.mb-shell .pf-score-high { background: var(--mb-brand); color: var(--mb-on-brand); }
.mb-shell .pf-score-good { background: var(--mb-brand-soft); color: var(--mb-text); }
.mb-shell .pf-score-neutral { background: var(--mb-surface-subtle); color: var(--mb-text); }
.mb-shell .pf-score-tough { background: var(--mb-surface); color: var(--mb-text); }
.mb-shell .pf-link-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--mb-space-3); }
.mb-shell .pf-link-grid a { padding: var(--mb-space-3) var(--mb-space-4); min-height: var(--mb-target-min); border: var(--mb-border-width) solid var(--mb-border); border-radius: var(--mb-radius-control); background: var(--mb-surface); text-decoration: none; }
.mb-shell .pf-link-grid a:hover { border-color: var(--mb-brand); text-decoration: underline; }
.mb-muted { color: var(--mb-text-muted); font-size: var(--mb-text-sm); }
.mb-stack { display: grid; gap: var(--mb-space-4); }
.mb-form-grid { display: grid; gap: var(--mb-space-4); }
/* Native hidden states must win over component display styles. */
.mb-shell [hidden] { display: none !important; }
.mb-shell:not(.mb-js) .mb-nav-toggle { display: none; }
@media (max-width: 39.999rem) {
  .mb-nav { align-items: stretch; flex-direction: column; }
  .mb-shell.mb-js .mb-nav-toggle { display: inline-flex; }
  .mb-shell.mb-js .mb-nav:not(.is-open) { display: none; }
  .mb-preview-banner nav { column-gap: var(--mb-space-4); row-gap: 0; }
  .mb-actions > .mb-button, .mb-actions > .mbticalc-primary-btn { width: 100%; }
}
@media (min-width: 40rem) {
  .mb-grid, .mb-form-grid, .mb-shell .mbticalc-select-row, .mb-shell .pf-link-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mb-card, .mb-shell .mbticalc-card { padding: var(--mb-space-6); }
  .mb-header-inner { gap: var(--mb-space-2); }
  .mb-nav { gap: 0; }
}
@media (min-width: 64rem) {
  .mb-main { padding-block: var(--mb-space-10); }
  .mb-section { margin-top: var(--mb-space-12); }
  .mb-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--mb-space-6); }
  .mb-shell .pf-link-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .mb-calculator-layout { grid-template-columns: minmax(0,1fr) var(--mb-sidebar); gap: var(--mb-space-8); }
  .mb-calculator-help { padding-left: var(--mb-space-8); border-left: var(--mb-border-width) solid var(--mb-border); }
  .mb-nav { gap: var(--mb-space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .mb-shell :where(a,button) { transition: none; }
}

/* First release: the existing tool remains the main task; only real products are linked. */
.mb-launch-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:var(--mb-space-10); padding:var(--mb-space-8); border-radius:var(--mb-radius-card); background:var(--mb-home-tint); }
.mb-launch-heading { display:grid; gap:var(--mb-space-3); }
.mb-launch-heading h1 { font-size:var(--mb-home-title); }
.mb-launch-heading > p:last-child { color:var(--mb-text-secondary); }
.mb-launch-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--mb-space-4); margin-block:var(--mb-space-6) var(--mb-space-8); }
.mb-launch-shortcuts a { display:flex; align-items:center; justify-content:space-between; gap:var(--mb-space-3); min-height:var(--mb-control-min-height); padding:var(--mb-space-3) var(--mb-space-4); background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:var(--mb-radius-card); text-decoration:none; font-size:var(--mb-text-sm); }
.mb-launch-shortcuts a:hover { border-color:var(--mb-brand); background:var(--mb-brand-soft); }
.mb-launch-workspace { display:grid; grid-template-columns:minmax(0,1fr) var(--mb-sidebar); gap:var(--mb-space-6); align-items:start; }
.mb-launch-workspace > * { min-width:0; }
.mb-launch-game { display:grid; gap:var(--mb-space-4); }
.mb-launch-game p { margin:0; }
.mb-friend-chips { display:flex; gap:var(--mb-space-2); }
.mb-friend-chips span { display:grid; place-items:center; width:var(--mb-space-10); height:var(--mb-space-10); border-radius:var(--mb-radius-pill); color:var(--mb-brand); background:var(--mb-brand-soft); font-weight:var(--mb-weight-medium); }
.mb-faq { padding-block:var(--mb-space-4); border-bottom:1px solid var(--mb-border); }
.mb-faq summary { min-height:var(--mb-target-min); cursor:pointer; color:var(--mb-brand); font-weight:var(--mb-weight-medium); }
.mb-faq[open] p { margin-top:var(--mb-space-3); }
.mb-section.mb-reading { margin-inline:0; }
@media (max-width:63.999rem) { .mb-launch-workspace { grid-template-columns:minmax(0,1fr); } }
@media (max-width:39.999rem) {
  .mb-launch-hero { grid-template-columns:minmax(0,1fr); gap:var(--mb-space-6); padding:var(--mb-space-5); }
  .mb-launch-heading h1 { font-size:var(--mb-heading-2); }
  .mb-launch-shortcuts { grid-template-columns:minmax(0,1fr); gap:var(--mb-space-2); }
}

/* v2: measured directory-first reference layout; user requested strict Omni direction. */
.mb-shell.mb-js .mb-nav:not(.is-open) { display: none; }
/* Match the initialized layout before deferred scripts run; keep the static menu without JS. */
@media (scripting: enabled) {
  .mb-shell .mb-nav:not(.is-open) { display: none; }
  .mb-shell:not(.mb-js) .mb-nav-toggle { display: inline-flex; visibility: hidden; }
}
.mb-header { box-shadow: 0 1px 5px rgb(59 104 252 / 12%); position: relative; z-index: var(--mb-z-menu); }
.mb-header .mb-container { width: calc(100% - var(--mb-space-12)); max-width: none; }
.mb-header-actions { grid-row: 1; grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--mb-space-8); }
.mb-header-actions > a { color: var(--mb-text); text-decoration: none; font-size: var(--mb-text-sm); }
.mb-header-actions .mb-button { min-height: var(--mb-target-min); padding: var(--mb-space-2) var(--mb-space-4); border-radius: var(--mb-radius-sm); font-weight: var(--mb-weight-medium); }
.mb-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.mb-home .mb-main { width: 100%; margin: 0; padding: 0; }
.mb-home-discovery { position: relative; background: var(--mb-home-tint); padding: var(--mb-space-12) var(--mb-space-16) var(--mb-space-16); }
.mb-discovery-inner { max-width: 86rem; min-height: 8rem; margin-inline: auto; display: grid; grid-template-columns: 15rem minmax(0,1fr); align-items: center; gap: var(--mb-space-8); }
.mb-shell .mb-discovery-inner h1 { display: grid; align-content: center; gap: var(--mb-space-1); font-size: var(--mb-home-title); line-height: var(--mb-leading-heading); color: var(--mb-text); }
.mb-home-kicker { font-size: var(--mb-text-xl); font-weight: var(--mb-weight-medium); }
.mb-home-highlight { color: var(--mb-brand); }
.mb-search { position: relative; min-width: 0; z-index: var(--mb-z-sticky); }
.mb-search-field { display: flex; align-items: center; min-height: 3.5rem; gap: var(--mb-space-2); padding-inline: var(--mb-space-4) var(--mb-space-2); border: var(--mb-border-width) solid #DCE1F1; border-radius: var(--mb-radius-pill); background: var(--mb-home-panel); box-shadow: 0 2px 8px rgb(59 104 252 / 14%); }
.mb-shell .mb-search-field input { flex: 1; min-height: 3rem; border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--mb-text); font-size: var(--mb-text-sm); }
.mb-search-field input::placeholder { color: var(--mb-text-secondary); opacity: 1; }
.mb-search-field:focus-within { outline: 2px solid var(--mb-focus); outline-offset: 2px; }
.mb-shell .mb-search-field input:focus-visible { outline: none; /* The entire field retains a visible focus-within ring. */ }
.mb-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mb-search-field button { display: flex; align-items: center; justify-content: center; flex: none; width: var(--mb-target-min); height: var(--mb-target-min); padding: var(--mb-space-2); border: 0; border-radius: var(--mb-radius-pill); color: var(--mb-brand); background: transparent; cursor: pointer; font-size: var(--mb-text-xl); }
.mb-search-field button:hover { background: var(--mb-brand-soft); }
.mb-search-field button .mb-icon { width: 1.75rem; height: 1.75rem; }
.mb-search-field [hidden], .mb-search-results[hidden] { display: none; }
.mb-search-results { position: absolute; top: calc(100% + var(--mb-space-2)); inset-inline: 0; max-height: 28rem; max-height: min(28rem, 55vh); overflow-y: auto; background: var(--mb-surface); border: var(--mb-border-width) solid var(--mb-border); border-radius: var(--mb-radius-control); box-shadow: var(--mb-shadow-overlay); }
.mb-search-results > p { padding: var(--mb-space-4); color: var(--mb-text-secondary); font-size: var(--mb-text-sm); }
.mb-search-results ul { list-style: none; padding: 0; }
.mb-search-results a { display: grid; gap: var(--mb-space-1); padding: var(--mb-space-3) var(--mb-space-4); border-top: var(--mb-border-width) solid var(--mb-border); text-decoration: none; }
.mb-search-results a:hover { background: var(--mb-brand-soft); }
.mb-search-results span { font-weight: var(--mb-weight-medium); }
.mb-search-results small { color: var(--mb-text-secondary); font-size: var(--mb-text-sm); }
.mb-directory-panel { position: relative; margin: 0 var(--mb-space-6); padding: var(--mb-space-6); background: var(--mb-surface); border-radius: var(--mb-radius-card); }
.mb-directory-panel::before { content: ''; position: absolute; top: -0.875rem; left: 7rem; width: var(--mb-space-8); height: var(--mb-space-8); border-radius: var(--mb-radius-sm); background: var(--mb-surface); transform: rotate(45deg); }
.mb-directory { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--mb-space-4); list-style: none; padding: 0; }
.mb-directory li { min-width: 0; }
.mb-directory a { min-height: 11rem; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--mb-space-3); padding: var(--mb-space-8) var(--mb-space-2) var(--mb-space-6); background: var(--mb-home-panel); color: var(--mb-text); border: var(--mb-border-width) solid var(--mb-border); border-radius: var(--mb-radius-card); box-shadow: var(--mb-shadow-card); text-align: center; text-decoration: none; }
.mb-directory a:hover { border-color: var(--mb-brand); background: var(--mb-brand-soft); color: var(--mb-brand); }
.mb-directory a .mb-icon { width: 1.75rem; height: 1.75rem; }
.mb-directory-title { font-size: var(--mb-text-base); font-weight: var(--mb-weight-medium); line-height: var(--mb-leading-ui); }
.mb-directory-meta { margin-top: var(--mb-space-1); color: var(--mb-text-muted); font-size: 0.75rem; line-height: var(--mb-leading-ui); }
.mb-home-content { padding-top: var(--mb-space-12); }
.mb-home-about { text-align: center; max-width: var(--mb-reading); margin: 0 auto var(--mb-space-12); display: grid; gap: var(--mb-space-4); }
.mb-home-about p { color: var(--mb-text-secondary); }
.mb-home #mbticalc-widget { scroll-margin-top: var(--mb-space-4); }
.mb-home .mb-reading { margin-inline: auto; }
.mb-tool-search { max-width: var(--mb-reading); margin: 0 auto var(--mb-space-8); }
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .mb-directory { grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--mb-space-2); }
  .mb-directory-panel { padding: var(--mb-space-2); margin-inline: var(--mb-space-4); }
  .mb-home-discovery { padding: var(--mb-space-10) var(--mb-space-8) var(--mb-space-12); }
  .mb-discovery-inner { grid-template-columns: 15rem minmax(0,1fr); gap: var(--mb-space-6); }
  .mb-header-actions { gap: var(--mb-space-4); }
}
@media (max-width: 39.999rem) {
  .mb-header .mb-container { width: calc(100% - var(--mb-space-8)); }
  .mb-header-inner { grid-template-columns: minmax(0,1fr) auto auto; gap: var(--mb-space-2); }
  .mb-brand { grid-column: 1; justify-self: start; gap: var(--mb-space-1); font-size: var(--mb-text-lg); }
  .mb-brand img { width: var(--mb-space-8); height: var(--mb-space-8); }
  .mb-nav-toggle { grid-column: 2; font-size: var(--mb-text-sm); padding-inline: var(--mb-space-1); }
  .mb-nav-toggle .mb-icon { display: none; }
  .mb-header-actions { grid-column: 3; }
  .mb-header-actions > a:not(.mb-button) { display: none; }
  .mb-header-actions .mb-button { font-size: 0.75rem; padding-inline: var(--mb-space-2); }
  .mb-home-discovery { padding: var(--mb-space-8) var(--mb-space-6); }
  .mb-discovery-inner { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--mb-space-8); min-height: 0; }
  .mb-shell .mb-discovery-inner h1 { display: block; text-align: center; font-size: 1.5rem; line-height: var(--mb-leading-ui); }
  .mb-home-kicker { display: block; font-size: 1.5rem; font-weight: var(--mb-weight-bold); }
  .mb-home-highlight::after { content: ' '; white-space: pre; }
  .mb-search-field { min-height: 3rem; padding-inline: var(--mb-space-3) var(--mb-space-1); }
  .mb-search-field button .mb-icon { width: var(--mb-icon-lg); height: var(--mb-icon-lg); }
  .mb-directory-panel { padding: 0; margin-inline: var(--mb-space-6); background: transparent; }
  .mb-directory-panel::before { display: none; }
  .mb-directory { grid-template-columns: minmax(0,1fr); gap: var(--mb-space-1); }
  .mb-directory a { min-height: 3rem; flex-direction: row; gap: var(--mb-space-4); padding: var(--mb-space-2) var(--mb-space-3); background: var(--mb-surface); border-color: #E4E7F0; border-radius: 0.1875rem; text-align: left; }
  .mb-directory a .mb-icon { width: var(--mb-icon); height: var(--mb-icon); }
  .mb-directory-title { flex: 1; min-width: 0; font-size: var(--mb-text-sm); }
  .mb-directory-meta { margin-top: 0; flex-basis: 6.5rem; text-align: right; font-size: 0.6875rem; }
  .mb-home-content { padding-top: var(--mb-space-8); }
  .mb-home-about { margin-bottom: var(--mb-space-8); }
}
/* v2 chart sample: descriptive left column and a white tool panel on the right.
   Append after existing UI CSS. All selectors are scoped to the chart sample. */
.mb-chart-page .mb-tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--mb-space-8);
}
.mb-chart-page .mb-tool-aside,
.mb-chart-page .mb-tool-content {
  min-width: 0;
}
.mb-chart-page .mb-tool-heading .pf-chart-title {
  margin-bottom: var(--mb-space-5);
  overflow-wrap: break-word;
}
.mb-chart-page .mb-tool-heading .pf-chart-intro {
  max-width: none;
}
.mb-chart-page .mb-tool-toc {
  margin-top: var(--mb-space-6);
  padding-top: var(--mb-space-5);
  border-top: var(--mb-border-width) solid var(--mb-border);
}
.mb-chart-page .mb-tool-toc h2 {
  margin-bottom: var(--mb-space-2);
  font-size: var(--mb-text-base);
  font-weight: var(--mb-weight-medium);
}
.mb-chart-page .mb-tool-toc ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mb-space-4);
  list-style: none;
  padding: 0;
}
.mb-chart-page .mb-tool-toc a {
  display: flex;
  align-items: center;
  min-height: var(--mb-target-min);
  padding-block: var(--mb-space-2);
  font-size: var(--mb-text-sm);
  text-decoration: none;
}
.mb-chart-page .mb-tool-toc a:hover {
  text-decoration: underline;
}
.mb-chart-page .mb-tool-panel {
  min-width: 0;
  margin-top: 0;
  padding: var(--mb-space-4);
  border: var(--mb-border-width) solid var(--mb-border);
  border-radius: var(--mb-radius-card);
  background: var(--mb-surface);
  box-shadow: var(--mb-shadow-card);
}
.mb-chart-page .mb-tool-panel h2 {
  margin-bottom: var(--mb-space-4);
  font-size: var(--mb-text-xl);
}
.mb-chart-page .mb-tool-panel .pf-chart-legend {
  gap: var(--mb-space-2);
  margin-block: 0 var(--mb-space-5);
}
.mb-chart-page .mb-tool-panel .pf-chart-legend span {
  padding: var(--mb-space-2);
}
.mb-chart-page .pf-chart-scroll {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--mb-radius-sm);
}
.mb-chart-page .pf-compatibility-chart {
  min-width: 64rem;
}
.mb-chart-page .pf-compatibility-chart caption {
  position: static;
  width: auto;
  font-size: var(--mb-text-sm);
}
.mb-chart-page .pf-compatibility-chart :where(th, td) {
  padding: var(--mb-space-2);
}
.mb-chart-page .mb-tool-method,
.mb-chart-page .mb-tool-related {
  margin-top: var(--mb-space-8);
  scroll-margin-top: var(--mb-space-6);
}
.mb-chart-page .mb-tool-panel {
  scroll-margin-top: var(--mb-space-6);
}
.mb-chart-page .mb-tool-method h2,
.mb-chart-page .mb-tool-related h2 {
  margin-bottom: var(--mb-space-4);
  font-size: var(--mb-text-xl);
}
.mb-chart-page .mb-tool-method p {
  color: var(--mb-text-secondary);
}
.mb-chart-page .mb-tool-method p + p {
  margin-top: var(--mb-space-4);
}
.mb-chart-page .pf-link-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mb-space-2);
}
.mb-chart-page .pf-link-grid a {
  font-size: var(--mb-text-sm);
}
@media (min-width: 40rem) {
  .mb-chart-page .mb-tool-panel {
    padding: var(--mb-space-6);
  }
  .mb-chart-page .pf-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .mb-chart-page .mb-tool-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    gap: var(--mb-space-12);
  }
  .mb-chart-page .mb-tool-toc {
    margin-top: var(--mb-space-8);
    padding-top: var(--mb-space-6);
  }
  .mb-chart-page .mb-tool-toc ul {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Source: assets/css/mbticalc-platform.css */
/* Full platform architecture. All colors, spacing and type reuse the shared tokens. */
.mb-platform-header .mb-container { width:min(var(--mb-container),calc(100% - var(--mb-gutter)*2)); max-width:var(--mb-container); }
.mb-platform-header .mb-header-inner { min-height:var(--mb-header-min-height); }
.mb-platform-header .mb-header-actions a { display:flex; align-items:center; gap:var(--mb-space-2); min-height:var(--mb-target-min); }
.mb-primary-nav { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); border-top:1px solid var(--mb-border); }
.mb-primary-nav a { display:flex; justify-content:center; align-items:center; min-height:var(--mb-target-min); padding:var(--mb-space-2); color:var(--mb-text-secondary); font-size:var(--mb-text-sm); text-decoration:none; border-bottom:3px solid transparent; }
.mb-primary-nav a:hover,.mb-primary-nav a[aria-current] { color:var(--mb-brand); background:var(--mb-brand-soft); border-bottom-color:var(--mb-brand); }
.mb-platform-header .mb-mega-menu { display:block; padding-block:var(--mb-space-6); }
.mb-mega-heading { display:flex; gap:var(--mb-space-4); justify-content:space-between; align-items:center; margin-bottom:var(--mb-space-5); }
.mb-mega-heading p { font-weight:var(--mb-weight-medium); }
.mb-mega-heading > a { padding:0; font-size:var(--mb-text-sm); color:var(--mb-brand); }
.mb-mega-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--mb-space-8) var(--mb-space-6); }
.mb-shell .mb-mega-grid h2 { font-size:var(--mb-text-base); }
.mb-mega-grid h2 a { gap:var(--mb-space-2); color:var(--mb-brand); padding:var(--mb-space-2) 0; border-radius:0; border-bottom:1px solid var(--mb-border); }
.mb-mega-grid h2 a > span { margin-left:auto; }
.mb-mega-grid ul { padding:var(--mb-space-2) 0 0; list-style:none; }
.mb-mega-grid li a { justify-content:space-between; gap:var(--mb-space-2); padding:var(--mb-space-2); font-size:var(--mb-text-sm); line-height:var(--mb-leading-ui); }
.mb-mega-grid small { color:var(--mb-text-muted); font-size:0.75rem; font-weight:var(--mb-weight-regular); }
.mb-module-icon { flex:none; width:var(--mb-icon-lg); height:var(--mb-icon-lg); color:var(--mb-brand); }
.mb-platform-footer { margin-top:var(--mb-space-6); padding-block:var(--mb-space-4); }
.mb-footer-bottom p { font-size:var(--mb-text-sm); }
.mb-footer-bottom { border-top:1px solid var(--mb-border); padding-top:var(--mb-space-4); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--mb-space-3); }
.mb-footer-bottom nav { font-size:var(--mb-text-sm); }
.mb-platform-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:var(--mb-space-10); background:var(--mb-home-tint); border-radius:var(--mb-radius-card); padding:var(--mb-space-8); margin-bottom:var(--mb-space-8); }
.mb-platform-hero h1 { font-size:var(--mb-home-title); margin-block:var(--mb-space-3); }
.mb-platform-hero > div > p:not(.mb-eyebrow) { color:var(--mb-text-secondary); max-width:38rem; }
.mb-platform-hero .mb-beginner-link { margin-top:var(--mb-space-4); font-size:var(--mb-text-sm); }
.mb-search-suggestions { font-size:var(--mb-text-sm); margin-top:var(--mb-space-4); padding-inline:var(--mb-space-4); }
.mb-module-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--mb-space-4); }
.mb-module-card { display:grid; grid-template-columns:1fr auto; align-content:start; gap:var(--mb-space-2); padding:var(--mb-space-5); background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:var(--mb-radius-card); text-decoration:none; color:var(--mb-text); min-width:0; }
.mb-module-card .mb-module-icon { margin-bottom:var(--mb-space-3); }
.mb-shell .mb-module-card h3 { color:var(--mb-text); font-size:var(--mb-text-lg); grid-column:1; }
.mb-module-card p { grid-column:1/-1; color:var(--mb-text-secondary); font-size:var(--mb-text-sm); }
.mb-module-arrow { grid-column:2; grid-row:1; align-self:start; }
.mb-module-card:hover { background:var(--mb-brand-soft); border-color:var(--mb-brand); }
.mb-module-card:hover h3 { color:var(--mb-brand); }
.mb-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--mb-space-6); }
.mb-feature { min-width:0; background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:var(--mb-radius-card); overflow:hidden; display:flex; flex-direction:column; }
.mb-feature-art { min-height:11rem; padding:var(--mb-space-6); background:var(--mb-brand-soft); display:flex; align-items:center; justify-content:center; gap:var(--mb-space-3); }
.mb-feature-content { padding:var(--mb-space-6); display:flex; flex-direction:column; align-items:start; gap:var(--mb-space-3); flex:1; }
.mb-feature-content h3 { font-size:var(--mb-text-xl); }
.mb-feature-content h3 a { color:var(--mb-text); text-decoration:none; }
.mb-feature-content h3 a:hover { color:var(--mb-brand); text-decoration:underline; }
.mb-feature-content > p:not(.mb-eyebrow) { color:var(--mb-text-secondary); font-size:var(--mb-text-sm); }
.mb-feature-link { display:flex; width:100%; justify-content:space-between; align-items:center; gap:var(--mb-space-3); min-height:var(--mb-target-min); margin-top:auto; padding-top:var(--mb-space-3); text-decoration:none; font-weight:var(--mb-weight-medium); font-size:var(--mb-text-sm); }
.mb-game-art { flex-direction:column; gap:var(--mb-space-2); }
.mb-game-art .mb-friend-chips span { background:var(--mb-surface); border:1px solid var(--mb-border); }
.mb-chat-preview { background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:var(--mb-radius-control); padding:var(--mb-space-2) var(--mb-space-4); font-size:var(--mb-text-sm); }
.mb-game-art p { font-size:0.75rem; color:var(--mb-text-muted); }
.mb-compare-art { background:var(--mb-surface-subtle); flex-wrap:wrap; gap:var(--mb-space-2); }
.mb-compare-art > span:not(.mb-compare-divider) { font-weight:var(--mb-weight-medium); border:1px solid var(--mb-border); background:var(--mb-surface); padding:var(--mb-space-3); border-radius:var(--mb-radius-control); color:var(--mb-brand); white-space:nowrap; }
.mb-types-art { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:center; background:var(--mb-surface-subtle); gap:var(--mb-space-2); }
.mb-types-art span { padding:var(--mb-space-2); border:1px solid var(--mb-border); background:var(--mb-surface); border-radius:var(--mb-radius-sm); font-size:var(--mb-text-sm); text-align:center; color:var(--mb-text-secondary); }
.mb-editorial-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--mb-space-12); padding-block:var(--mb-space-8); border-block:1px solid var(--mb-border); }
.mb-editorial-section > div:first-child { display:grid; align-content:start; gap:var(--mb-space-4); }
.mb-editorial-section p { color:var(--mb-text-secondary); }
.mb-reading-links { display:grid; gap:var(--mb-space-5); }
.mb-reading-links > a { display:grid; gap:var(--mb-space-2); padding-bottom:var(--mb-space-4); text-decoration:none; }
.mb-reading-links h3 { font-size:var(--mb-text-lg); color:var(--mb-text); }
.mb-reading-links > a > span:last-child { font-size:var(--mb-text-sm); }
.mb-home-note { max-width:var(--mb-reading); }
.mb-home-note h2 { font-size:var(--mb-text-xl); }
.mb-home-note p { color:var(--mb-text-secondary); }
.mb-category-heading { display:flex; gap:var(--mb-space-5); align-items:start; padding-bottom:var(--mb-space-8); margin-bottom:var(--mb-space-8); border-bottom:1px solid var(--mb-border); }
.mb-category-heading h1 { margin-block:var(--mb-space-2) var(--mb-space-3); }
.mb-category-heading p:not(.mb-eyebrow) { max-width:var(--mb-reading); color:var(--mb-text-secondary); }
.mb-category-emblem { padding:var(--mb-space-4); border:1px solid var(--mb-border); background:var(--mb-surface); border-radius:var(--mb-radius-card); display:flex; }
.mb-category-emblem svg { width:var(--mb-space-8); height:var(--mb-space-8); }
.mb-category-layout { display:block; }
.mb-shell .mb-category-sidebar h2 { font-size:var(--mb-text-sm); margin-bottom:var(--mb-space-3); color:var(--mb-text-muted); font-weight:var(--mb-weight-regular); }
.mb-category-sidebar nav { display:grid; gap:var(--mb-space-1); }
.mb-category-sidebar a { display:flex; gap:var(--mb-space-3); align-items:center; min-height:var(--mb-target-min); padding:var(--mb-space-2) var(--mb-space-3); color:var(--mb-text-secondary); text-decoration:none; border-radius:var(--mb-radius-control); }
.mb-category-sidebar a:hover,.mb-category-sidebar a[aria-current] { background:var(--mb-brand-soft); color:var(--mb-brand); }
.mb-category-sidebar svg { width:var(--mb-icon); height:var(--mb-icon); }
.mb-category-content { min-width:0; }
.mb-category-notice { padding:var(--mb-space-4); border-left:3px solid var(--mb-brand); background:var(--mb-brand-soft); color:var(--mb-text-secondary); margin-bottom:var(--mb-space-5); font-size:var(--mb-text-sm); }
.mb-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--mb-space-4); }
.mb-catalog-item { padding:var(--mb-space-5); background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:var(--mb-radius-card); display:grid; align-content:start; gap:var(--mb-space-3); scroll-margin-top:var(--mb-space-6); }
.mb-catalog-item:target { outline:2px solid var(--mb-brand); outline-offset:3px; }
.mb-item-meta { display:flex; justify-content:space-between; align-items:center; gap:var(--mb-space-3); font-size:0.75rem; color:var(--mb-text-muted); }
.mb-status { font-weight:var(--mb-weight-medium); padding:var(--mb-space-1) var(--mb-space-2); background:var(--mb-disabled-bg); border-radius:var(--mb-radius-sm); }
.mb-status-live { background:var(--mb-success-soft); color:var(--mb-success); }
.mb-catalog-item h3 { font-size:var(--mb-text-lg); }
.mb-catalog-item h3 a { display:inline-block; min-height:var(--mb-target-min); text-decoration:none; }
.mb-catalog-item h3 a:hover { text-decoration:underline; }
.mb-catalog-item p { color:var(--mb-text-secondary); font-size:var(--mb-text-sm); }
.mb-item-status-note { font-size:0.75rem; color:var(--mb-text-muted); }
.mb-category-next { border-top:1px solid var(--mb-border); padding-top:var(--mb-space-6); }
.mb-category-next h2 { font-size:var(--mb-text-xl); }
.mb-category-next p { color:var(--mb-text-secondary); margin-bottom:var(--mb-space-4); }
.mb-category-next .mb-actions > a { display:inline-flex; min-height:var(--mb-target-min); align-items:center; }
.mb-type-directory { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--mb-space-4); }
.mb-type-directory a { display:grid; gap:var(--mb-space-3); padding:var(--mb-space-5); background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:var(--mb-radius-card); text-decoration:none; }
.mb-type-directory strong { font-size:var(--mb-text-xl); }
.mb-type-directory span { color:var(--mb-text-secondary); font-size:var(--mb-text-sm); }
.mb-type-directory a:hover { background:var(--mb-brand-soft); border-color:var(--mb-brand); }
.mb-directory-intro { margin-bottom:var(--mb-space-5); max-width:var(--mb-reading); color:var(--mb-text-secondary); }
.mb-pair-directory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--mb-space-3); }
.mb-pair-directory a { display:flex; align-items:center; justify-content:space-between; gap:var(--mb-space-3); min-height:var(--mb-control-min-height); padding:var(--mb-space-3) var(--mb-space-4); background:var(--mb-surface); border:1px solid var(--mb-border); border-radius:var(--mb-radius-control); text-decoration:none; }
.mb-search-page-form { max-width:var(--mb-reading); }
.mb-search-page .mb-search-results { position:static; margin-top:var(--mb-space-4); max-height:none; box-shadow:none; }
.mb-shell .mb-search-group-title { margin:0; padding:var(--mb-space-2) var(--mb-space-4); background:var(--mb-surface-subtle); border-top:1px solid var(--mb-border); font-size:var(--mb-text-sm); font-weight:var(--mb-weight-medium); color:var(--mb-text-secondary); }
.mb-search-results .mb-search-result-meta { font-size:0.75rem; color:var(--mb-text-muted); }
#type-basics { scroll-margin-top:var(--mb-space-6); }
#type-basics:target { outline:2px solid var(--mb-brand); outline-offset:3px; }
#type-basics ul { padding-left:var(--mb-space-5); }
/* Retain legacy content and URLs while giving every page the same outer shell. */
.mb-legacy-page #wrapper { overflow:visible; background:var(--mb-page); }
.mb-legacy-page .mb-legacy-main { flex:1 0 auto; }
.mb-legacy-page .content-area { margin-block:var(--mb-space-8); }
.mb-legacy-page #primary.content-area { margin-block:var(--mb-space-8) !important; }
.mb-legacy-page .entry-related.alignfull { width:100%; max-width:100%; margin-inline:0; }
.mb-legacy-page .entry-related .entry-related-inner { width:100%; margin-inline:0; }
.mb-legacy-page .entry-related .entry-related-inner-content.alignwide { width:100%; max-width:100%; margin-inline:0; }
.mb-legacy-page .entry-related .splide { width:100%; max-width:100%; margin-inline:0; }
.mb-legacy-page .content-container { width:min(var(--mb-container),calc(100% - var(--mb-gutter)*2)); max-width:var(--mb-container); padding-inline:0; margin-inline:auto; }
.mb-legacy-page .entry-content-wrap { padding:var(--mb-space-6); }
.mb-legacy-page .entry-content :where(p,ul,ol) { margin-bottom:var(--mb-space-4); }
.mb-legacy-page .entry-content :where(h2,h3,h4) { margin-block:var(--mb-space-6) var(--mb-space-4); }
.mb-legacy-page .entry-content :where(ul,ol) { padding-left:var(--mb-space-6); }
.mb-legacy-page :where(.entry-content,.entry-header,.entry-summary) { font-family:var(--mb-font); }
.mb-legacy-page .entry-header { margin-bottom:var(--mb-space-6); }
.mb-legacy-score-note { margin-bottom:var(--mb-space-5); padding:var(--mb-space-4); border-left:3px solid var(--mb-brand); background:var(--mb-brand-soft); color:var(--mb-text-secondary); font-size:var(--mb-text-sm); }
.mb-legacy-page.archive .entry-hero { display:block !important; background:var(--mb-brand-soft); }
.mb-legacy-page.archive .entry-hero h1 { font-size:var(--mb-heading-1); }
@media(min-width:64rem) { .mb-platform-header .mb-primary-nav { max-width:56rem; border-top:0; } }
@media(max-width:63.999rem) {
  .mb-platform-hero { grid-template-columns:minmax(0,1fr); gap:var(--mb-space-6); }
  .mb-feature-grid { gap:var(--mb-space-4); }
  .mb-feature-content,.mb-feature-art { padding:var(--mb-space-4); }
  .mb-types-art { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-category-layout { grid-template-columns:minmax(0,1fr); }
  .mb-category-sidebar { display:none; }
  .mb-mega-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mb-pair-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:39.999rem) {
  .mb-platform-header .mb-header-inner { gap:var(--mb-space-2); }
  .mb-platform-header .mb-brand { font-size:var(--mb-text-xl); gap:var(--mb-space-1); }
  .mb-platform-header .mb-brand img { width:var(--mb-space-8); height:var(--mb-space-8); }
  .mb-platform-header .mb-nav-toggle { font-size:var(--mb-text-sm); padding-inline:0; }
  .mb-platform-header .mb-nav-toggle > span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .mb-platform-header .mb-nav-toggle::after { content:'Menu'; }
  .mb-platform-header .mb-header-actions span { display:none; }
  .mb-platform-header .mb-header-actions a { min-width:var(--mb-target-min); justify-content:center; }
  .mb-primary-nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mb-primary-nav a { font-size:0.8125rem; }
  .mb-mega-grid { grid-template-columns:minmax(0,1fr); gap:var(--mb-space-6); }
  .mb-mega-heading { flex-wrap:wrap; gap:0; }
  .mb-platform-hero { padding:var(--mb-space-5); gap:var(--mb-space-5); margin-bottom:var(--mb-space-6); }
  .mb-platform-hero h1 { font-size:var(--mb-heading-2); }
  .mb-platform-hero p { font-size:var(--mb-text-sm); }
  .mb-platform-hero .mb-search-field { padding-inline:var(--mb-space-3) var(--mb-space-1); }
  .mb-search-suggestions { padding:0; }
  .mb-module-grid { grid-template-columns:minmax(0,1fr); gap:var(--mb-space-2); }
  .mb-module-card { grid-template-columns:auto minmax(0,1fr) auto; align-items:center; padding:var(--mb-space-3) var(--mb-space-4); gap:var(--mb-space-3); }
  .mb-module-card .mb-module-icon { margin:0; }
  .mb-shell .mb-module-card h3 { grid-column:2; font-size:var(--mb-text-base); }
  .mb-module-card p { grid-column:2; grid-row:2; font-size:var(--mb-text-sm); }
  .mb-module-arrow { grid-column:3; align-self:center; }
  .mb-feature-grid,.mb-editorial-section,.mb-catalog-grid,.mb-pair-directory { grid-template-columns:minmax(0,1fr); }
  .mb-feature-art { min-height:9rem; }
  .mb-types-art { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mb-feature-content { padding:var(--mb-space-5); }
  .mb-editorial-section { gap:var(--mb-space-8); }
  .mb-category-heading { gap:var(--mb-space-3); margin-bottom:var(--mb-space-6); padding-bottom:var(--mb-space-6); }
  .mb-category-emblem { padding:var(--mb-space-2); }
  .mb-category-emblem svg { width:var(--mb-icon-lg); height:var(--mb-icon-lg); }
  .mb-category-heading h1 { font-size:var(--mb-heading-2); }
  .mb-type-directory { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--mb-space-3); }
  .mb-type-directory a { padding:var(--mb-space-3); }
  .mb-type-directory span { font-size:0.75rem; }
  .mb-legacy-page .entry-content-wrap { padding:var(--mb-space-4); }
}

/* Compact activity titles; retain the heading and useful instructions. */
.mb-shell .mb-main :is(.fx-root,.remaining-root,.orchard-page,.pumpkin-page,.mg-game) h1,
.mb-shell .cs-heading h1 { font-size:clamp(1.375rem,1.15rem + .5vw,1.5rem); margin-block:var(--mb-space-2); }