:root {
  color-scheme: light dark;
  --mb-ink: #24313c;
  --mb-muted: #52616d;
  --mb-surface: #fff;
  --mb-soft: #f5f1fc;
  --mb-soft-2: #eef5f7;
  --mb-border: #d8e3e8;
  --mb-accent: #7251a6;
  --mb-accent-dark: #4f347d;
  --mb-focus: #f4d35e;
  --mb-code: #f7f8fa;
  --mb-shadow: rgba(40, 29, 66, .15);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f7f9fa;
  color: var(--mb-ink);
  font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: clip;
}
a { color: var(--mb-accent-dark); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--mb-focus); outline-offset: 3px; }
.mb-shell { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; padding: 24px 0 56px; }
.mb-back { display: inline-flex; margin-bottom: 1rem; font-weight: 750; text-decoration: none; }
.mb-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 1.5rem; align-items: center;
  padding: clamp(1.25rem, 3vw, 2.2rem); border: 1px solid #d4c8e9; border-left: 7px solid var(--mb-accent);
  border-radius: 12px; background: linear-gradient(120deg, #f8f4ff, #f0e9fc 68%, #e8f2f4);
  box-shadow: 0 10px 28px var(--mb-shadow);
}
.mb-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .75rem; }
.mb-chip { padding: .22rem .62rem; border: 1px solid #c7b7e2; border-radius: 999px; background: #eee6fa; color: #493168; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mb-hero h1 { margin: 0; padding: 0; border: 0; background: transparent; color: #302344; -webkit-text-fill-color: #302344; background-image: none; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.12; }
.mb-hero h1 .mb-title-text { color: #302344!important; -webkit-text-fill-color: #302344!important; background: none!important; -webkit-background-clip: border-box!important; background-clip: border-box!important; }
.mb-hero p { margin: .75rem 0 0; color: #493d58; font-size: 1.05rem; }
.mb-guide { justify-self: end; text-align: center; }
.mb-guide img { display: block; width: 104px; height: 104px; margin: 0 auto .35rem; border: 3px solid #bba5df; border-radius: 50%; background: rgba(255,255,255,.72); object-fit: contain; box-shadow: 0 6px 18px rgba(49,34,75,.18); }
.mb-guide strong { color: #523875; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.mb-target { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin: 1rem 0 1.5rem; }
.mb-target div { padding: .85rem 1rem; border: 1px solid var(--mb-border); border-radius: 8px; background: var(--mb-surface); }
.mb-target span { display: block; color: var(--mb-accent-dark); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mb-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 1.25rem; align-items: start; }
.mb-content { min-width: 0; }
.mb-nav { position: sticky; top: 16px; padding: 1rem; border: 1px solid var(--mb-border); border-radius: 8px; background: var(--mb-surface); }
.mb-nav strong { display: block; margin-bottom: .45rem; color: var(--mb-accent-dark); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.mb-nav ol { margin: 0; padding-left: 1.25rem; }
.mb-nav li + li { margin-top: .35rem; }
.mb-nav a { color: var(--mb-ink); font-size: .88rem; font-weight: 650; }
.mb-card { margin-bottom: 1.1rem; padding: clamp(1rem,2.5vw,1.45rem); border: 1px solid var(--mb-border); border-radius: 8px; background: var(--mb-surface); }
.mb-card p { overflow-wrap: anywhere; }
.mb-card h2 { margin: 0 0 .75rem; color: #3a294f; font-size: clamp(1.3rem,2.5vw,1.6rem); line-height: 1.25; }
.mb-card h3 { margin: 1.15rem 0 .45rem; color: #47335f; font-size: 1.05rem; }
.mb-phoebe { margin: .85rem 0; padding: .8rem 1rem; border-left: 4px solid var(--mb-accent); border-radius: 0 8px 8px 0; background: var(--mb-soft); }
.mb-equation { margin: .65rem 0; padding: .8rem 1rem; border: 1px solid var(--mb-border); border-left: 4px solid var(--mb-accent); border-radius: 7px; background: var(--mb-code); color: #2d2635; font: clamp(.82rem,2vw,1rem)/1.55 "SFMono-Regular",Consolas,monospace; overflow-x: auto; white-space: nowrap; }
.mb-move { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .75rem; margin: .65rem 0; padding: .75rem .85rem; border: 1px solid var(--mb-border); border-radius: 8px; background: var(--mb-soft-2); }
.mb-move b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mb-accent); color: #fff; }
.mb-move p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.mb-label { display: block; color: var(--mb-accent-dark); font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mb-figure {
  margin: 1rem 0; padding: clamp(.55rem,1.8vw,.9rem); border: 1px solid var(--mb-border);
  border-radius: 8px; background: var(--mb-soft-2); overflow: hidden;
}
.mb-figure img {
  display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: 6px; background: #f8fbff;
}
.mb-figure figcaption {
  margin-top: .65rem; padding: 0; border: 0; background: transparent!important;
  color: var(--mb-muted)!important; font-size: .88rem; line-height: 1.5;
}
.mb-table-wrap { overflow-x: auto; }
table { width: 100%; margin: .75rem 0; border-collapse: collapse; font-size: .93rem; }
th,td { padding: .62rem .7rem; border: 1px solid var(--mb-border); text-align: left; vertical-align: top; }
th { background: var(--mb-soft-2); color: #35434d; }
.mb-checks details { margin: .65rem 0; padding: .7rem .85rem; border: 1px solid var(--mb-border); border-radius: 7px; background: var(--mb-soft-2); }
.mb-checks summary { cursor: pointer; color: #3e2b58; font-weight: 750; }
.mb-honesty { border: 1px solid #d5b46b; border-left: 5px solid #b7791f; border-radius: 8px; background: #fff8e8; }
.mb-honesty strong { color: #68410d; }
.mb-boundary-lead { margin: .35rem 0 .7rem; color: var(--mb-ink); }
.mb-boundary-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 .75rem; margin: .65rem 0; padding: 0; }
.mb-boundary-list > div {
  display: grid; grid-template-columns: minmax(8.5rem,.7fr) minmax(0,1fr); gap: .75rem;
  padding: .48rem .6rem; border-top: 1px solid rgba(104,65,13,.2);
}
.mb-boundary-list > div:last-child { border-bottom: 1px solid rgba(104,65,13,.2); }
.mb-boundary-list dt { min-width: 0; color: #56360c; font-weight: 780; overflow-wrap: anywhere; }
.mb-boundary-list dd { margin: 0; color: #5f5548; font-size: .86rem; }
.mb-boundary-limits { margin: .7rem 0 0; font-size: .88rem; font-weight: 650; }
.mb-story {
  margin: 0 0 .8rem; padding: .65rem .8rem; border-left: 4px solid #197f8d;
  border-radius: 0 7px 7px 0; background: #edf8f9; color: #22383c; font-weight: 680;
}
.mb-why { display: block; margin: .35rem 0 .45rem; color: #35515a; font-size: .9rem; }
.mb-interactive { border-top: 5px solid #197f8d; }
.mb-interactive-line { margin: .7rem 0; }
.mb-ramp-label {
  display: inline-block; min-width: 4.7rem; margin-right: .45rem; color: #165f69;
  font-size: .74rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase;
}
.mb-widget {
  margin: .8rem 0; padding: 1rem; border: 1px solid var(--mb-border); border-radius: 8px;
  background: var(--mb-soft-2);
}
.mb-widget label { display: block; color: var(--mb-ink); font-weight: 750; }
.mb-widget input[type="range"] { width: 100%; margin: .65rem 0; accent-color: #197f8d; }
.mb-widget-readouts { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: .65rem; }
.mb-widget-readout { padding: .65rem .75rem; border: 1px solid var(--mb-border); border-radius: 8px; background: var(--mb-surface); }
.mb-widget-readout span { display: block; color: var(--mb-muted); font-size: .76rem; font-weight: 750; }
.mb-widget-readout output { display: block; color: #165f69; font-size: 1.15rem; font-weight: 850; }
.mb-boundary { margin-top: .8rem; padding: .8rem .9rem; border-left: 4px solid #b96824; border-radius: 0 8px 8px 0; background: #fff5e9; font-size: .9rem; }
@media (max-width: 820px) { .mb-layout { grid-template-columns: 1fr; } .mb-nav { position: static; columns: 2; } .mb-boundary-list { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .mb-shell { width: min(100% - 24px,1180px); padding-top: 14px; } .mb-hero { grid-template-columns: 1fr; } .mb-guide { justify-self: start; } .mb-guide img { width: 76px; height: 76px; } .mb-target { grid-template-columns: 1fr; } .mb-nav { columns: 1; } .mb-equation { overflow-wrap: anywhere; white-space: normal; font-size: .78rem; } .mb-boundary-list > div { grid-template-columns: 1fr; gap: .08rem; } }
@media (prefers-color-scheme: dark) {
  :root { --mb-ink:#e7edf2; --mb-muted:#bac5ce; --mb-surface:#18232c; --mb-soft:#2a2139; --mb-soft-2:#20313a; --mb-border:#3a4c59; --mb-accent:#b999ee; --mb-accent-dark:#d5c1f4; --mb-code:#121b22; --mb-shadow:rgba(0,0,0,.35); }
  body { background:#111920; } .mb-hero { border-color:#665283; background:linear-gradient(120deg,#271f36,#332849 68%,#1f353c); }
  .mb-shell, .mb-shell p, .mb-shell li, .mb-target strong, .mb-move p { color:#e7edf2!important; }
  .mb-chip { border-color:#766092; background:#392c50; color:#eadfff; } .mb-hero h1 { color:#f1eafd!important; -webkit-text-fill-color:#f1eafd!important; } .mb-card h2,.mb-card h3 { color:#f1eafd!important; }
  .mb-hero h1 .mb-title-text { color:#f1eafd!important; -webkit-text-fill-color:#f1eafd!important; }
  .mb-hero p { color:#ddd4e7; } .mb-guide strong,.mb-label,.mb-nav strong { color:#d8c2f4; } .mb-equation { color:#edf1f4; }
  th { color:#e5edf2; } .mb-checks summary { color:#e6d8fa; } .mb-honesty { border-color:#8a6a2f; background:#332914; } .mb-honesty p { color:#f4e7c7!important; } .mb-honesty strong { color:#ffd98a!important; }
  .mb-boundary-list > div { border-color:rgba(255,217,138,.22); } .mb-boundary-list dt { color:#ffe0a3; } .mb-boundary-list dd { color:#ded1bc; }
  .mb-ramp-label,.mb-widget-readout output { color:#8ed9e2; } .mb-boundary { background:#352719; } .mb-story { background:#183238; color:#dff6f8!important; } .mb-why { color:#b9d9de; }
}