/* MIAN docs: the website itself. Built from MIAN tokens, so the whole site
   follows whichever noodle is selected. */
html { scroll-padding-top: 5rem; }
body { margin: 0; min-height: 100vh; }
:where(body) *, :where(body) *::before, :where(body) *::after { box-sizing: border-box; }
.site-skip { position: absolute; left: -999px; top: .5rem; z-index: 200; padding: .5rem .9rem; border-radius: var(--mn-radius-field); background: var(--mn-fg); color: var(--mn-bg); }
.site-skip:focus { left: .5rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--mn-border); background: color-mix(in srgb, var(--mn-bg) 93%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header-in { display: flex; align-items: center; gap: 1.25rem; max-width: 90rem; height: 3.75rem; margin: 0 auto; padding: 0 1.5rem; }
.site-logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--mn-fg); text-decoration: none; font: 800 1.05rem/1 var(--mn-font); letter-spacing: .08em; }
.site-logo svg { width: 1.5rem; height: 1.5rem; }
.site-logo small { font-weight: 500; letter-spacing: 0; color: var(--mn-muted); font-size: .75rem; }
.site-nav { display: flex; gap: .1rem; }
.site-nav a { padding: .45rem .7rem; border-radius: var(--mn-radius-field); color: var(--mn-muted); text-decoration: none; font-size: .875rem; font-weight: 500; }
.site-nav a:hover { color: var(--mn-fg); background: var(--mn-hover); }
.site-nav a[aria-current] { color: var(--mn-fg); }
.site-nav a:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.site-tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.site-search { width: 15rem; justify-content: space-between; color: var(--mn-muted); font-weight: 400; }
.site-search .mn-kbd { height: 1.3rem; font-size: .6875rem; }
.site-menu { display: none; }
.site-noodle { width: 9.5rem; }
@media (max-width: 64rem) { .site-search { width: var(--_h); padding-inline: 0; justify-content: center; } .site-search .site-search-label, .site-search .mn-kbd { display: none; } }
@media (max-width: 52rem) { .site-nav { display: none; } .site-menu { display: inline-flex; } .site-noodle { width: 7.5rem; } }
@media (max-width: 26rem) { .site-logo small { display: none; } .site-header-in { gap: .5rem; padding: 0 1rem; } .site-tools { gap: .3rem; } .site-noodle { width: 6.25rem; } }
@media (max-width: 23rem) { .site-header .site-logo span { display: none; } .site-noodle { width: 5.75rem; } }

/* ---------- docs layout ---------- */
.docs { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 3rem; max-width: 90rem; margin: 0 auto; padding: 0 1.5rem; }
.docs-side { position: sticky; top: 3.75rem; align-self: start; height: calc(100vh - 3.75rem); overflow-y: auto; padding: 0 .25rem 3rem 0; scrollbar-width: thin; overscroll-behavior: contain; }
.docs-main { min-width: 0; width: 100%; max-width: 66rem; margin-inline: auto; padding: 2.25rem 0 5rem; }
@media (min-width: 64rem) { .docs { padding-inline-end: 3rem; } }
@media (max-width: 80rem) { .docs { grid-template-columns: 14.5rem minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 52rem) { .docs { grid-template-columns: minmax(0, 1fr); padding: 0 1rem; } .docs-side { display: none; } .docs-main { padding-top: 1.5rem; padding-bottom: 6.5rem; } }
.docs-section > :is(p, ul, ol), .docs-head > .mn-lead { max-width: 48rem; }

.docs-head { margin-bottom: 2rem; }
.docs-crumb { margin-bottom: .75rem; }
.docs-title { margin: 0 0 .6rem; }
.docs-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; padding-block: 4px; }
.docs-section { margin-top: 3rem; }
.docs-section > h2 { margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--mn-border); font: var(--mn-heading-weight) 1.4rem/1.3 var(--mn-font-heading); letter-spacing: -.015em; }
.docs-section > h3 { margin: 2rem 0 .6rem; font: 600 1.05rem/1.3 var(--mn-font); }
.docs-section p, .docs-section li { color: var(--mn-fg); line-height: 1.7; font-size: .9375rem; }
.docs-section p.mn-muted { color: var(--mn-muted); }
.docs-section ul { padding-inline-start: 1.25rem; }
.docs-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--mn-border); }
.docs-pager a { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); color: var(--mn-fg); text-decoration: none; font-weight: 600; font-size: .9375rem; min-width: 0; }
.docs-pager a:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 30%); }
.docs-pager a small { color: var(--mn-muted); font-weight: 400; font-size: .75rem; }
.docs-pager a:last-child { margin-inline-start: auto; text-align: end; }

/* ---------- examples ---------- */
.ex { margin: 1.75rem 0 2.75rem; }
.ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.ex-title { margin: 0; font: 600 1.05rem/1.3 var(--mn-font); }
.ex-desc { margin: 0 0 .75rem; color: var(--mn-muted); font-size: .875rem; }
.ex .mn-tabs { gap: .75rem; }
.ex-preview {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem;
  min-height: 11rem; padding: 2.5rem 1.5rem;
  border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box);
  background-color: var(--mn-bg); color: var(--mn-fg);
  background-image: radial-gradient(color-mix(in oklab, var(--mn-fg) 9%, transparent) 1px, transparent 1px), var(--mn-bg-image);
  background-size: 16px 16px, cover;
}
.ex-tools { display: flex; align-items: center; gap: .35rem; flex: none; }
.ex-noodle { width: 8.5rem; }
@media (max-width: 26rem) { .ex-head { flex-wrap: wrap; } }
.ex-preview[data-fill] { display: block; }
.ex-preview[data-fill] > * { margin-inline: auto; }
@media (max-width: 40rem) { .ex-preview { padding: 1.75rem 1rem; } }

.code { position: relative; }
.code pre { margin: 0; max-height: 30rem; overflow: auto; padding: 1rem 1.1rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface-2); font: 400 .8125rem/1.65 var(--mn-font-mono); tab-size: 2; }
.code pre:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.code code { white-space: pre; color: var(--mn-fg); }
.code-copy { position: absolute; top: .5rem; right: .5rem; z-index: 1; }
.code-label { display: block; margin-bottom: .4rem; font: 500 .75rem/1 var(--mn-font-mono); color: var(--mn-muted); }
.hl-t { color: light-dark(#be185d, #f472b6); }
.hl-a { color: light-dark(#7c3aed, #c4b5fd); }
.hl-s { color: light-dark(#047857, #6ee7b7); }
.hl-c { color: var(--mn-muted); font-style: italic; }
.hl-p { color: var(--mn-muted); }

/* ---------- reference tables ---------- */
.ref td:first-child { font: 500 .8125rem/1.5 var(--mn-font-mono); white-space: normal; word-break: break-word; min-width: 12rem; }
.ref td { vertical-align: top; }

/* ---------- component index ---------- */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.ccard { display: flex; flex-direction: column; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); color: var(--mn-fg); text-decoration: none; overflow: hidden; transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease); }
.ccard:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 30%); box-shadow: var(--mn-shadow-md); }
.ccard:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.ccard-thumb { position: relative; height: 9.5rem; overflow: hidden; border-bottom: 1px solid var(--mn-border); background-color: var(--mn-bg); background-image: radial-gradient(color-mix(in oklab, var(--mn-fg) 8%, transparent) 1px, transparent 1px); background-size: 14px 14px; }
.ccard-thumb > div { position: absolute; left: 50%; top: 50%; width: calc(100% / var(--ts, .72)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: .5rem; padding: 1rem 1.25rem; transform: translate(-50%, -50%) scale(var(--ts, .72)); transform-origin: center; pointer-events: none; }
.ccard-thumb > div[data-fill] { display: block; }
.ccard-thumb > div[data-fill] > * { margin-inline: auto; }
/* Taller than the frame even at the smallest scale: show the top, not a slice of the middle. */
.ccard-thumb > div[data-crop] { top: 0; transform: translate(-50%, 0) scale(var(--ts, .72)); transform-origin: top center; }
.ccard-body { padding: .85rem 1rem 1rem; }
.ccard-name { margin: 0 0 .2rem; font: 600 .9375rem/1.3 var(--mn-font); }
.ccard-desc { margin: 0; color: var(--mn-muted); font-size: .8125rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- home ---------- */
.hero { max-width: 90rem; margin: 0 auto; padding: clamp(3.5rem, 9vw, 7rem) 1.5rem 3rem; text-align: center; }
.hero .mn-h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); letter-spacing: -.04em; line-height: 1.02; max-width: 16ch; margin: 1.25rem auto 1.25rem; }
.hero .mn-lead { max-width: 40rem; margin: 0 auto; font-size: clamp(1.05rem, 2.2vw, 1.25rem); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.hero-install { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.75rem; padding: .35rem .35rem .35rem 1rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-field); background: var(--mn-surface-2); font: 400 .8125rem/1 var(--mn-font-mono); max-width: 100%; }
.hero-install code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band { max-width: 90rem; margin: 0 auto; padding: 3rem 1.5rem; }
.band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.band-head p { margin: .4rem 0 0; color: var(--mn-muted); max-width: 44rem; }
.noodle-strip { display: flex; gap: .4rem; flex-wrap: wrap; }
.noodle-strip button { display: inline-flex; align-items: center; gap: .45rem; height: 2.1rem; padding: 0 .75rem 0 .45rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-badge); background: var(--mn-surface); color: var(--mn-fg); font: 500 .8125rem/1 var(--mn-font); cursor: pointer; }
.noodle-strip button[aria-pressed="true"] { border-color: var(--mn-fg); box-shadow: inset 0 0 0 1px var(--mn-fg); }
.noodle-strip button:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.noodle-strip .mn-swatch { transform: scale(.85); }

.showcase { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.showcase > * { min-width: 0; }
.sc-4 { grid-column: span 4; } .sc-5 { grid-column: span 5; } .sc-7 { grid-column: span 7; } .sc-8 { grid-column: span 8; } .sc-12 { grid-column: span 12; } .sc-6 { grid-column: span 6; } .sc-3 { grid-column: span 3; }
@media (max-width: 70rem) { .sc-4, .sc-5, .sc-7, .sc-8, .sc-3 { grid-column: span 6; } }
@media (max-width: 44rem) { .showcase > * { grid-column: span 12 !important; } }

.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.ncard { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-bg); background-image: var(--mn-bg-image); color: var(--mn-fg); text-decoration: none; box-shadow: var(--mn-shadow-sm); transition: transform var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease); }
.ncard:hover { box-shadow: var(--mn-shadow-lg); transform: translateY(-2px); }
.ncard:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.ncard-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ncard-name { margin: 0; font: var(--mn-heading-weight) 1.25rem/1.2 var(--mn-font-heading); letter-spacing: -.01em; }
.ncard-tag { margin: .15rem 0 0; color: var(--mn-muted); font-size: .8125rem; }
.ncard-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; pointer-events: none; }
.ncard-demo .mn-row { flex-wrap: wrap; }
.ncard-demo .mn-row:has(.mn-switch) { flex-wrap: nowrap; }
.ncard-demo .mn-row > .mn-input { flex: 1; min-width: 0; }
.ncard-colors { display: flex; gap: 4px; }
.ncard-colors i { flex: 1; height: 1.4rem; border-radius: min(6px, var(--mn-radius-field)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.feature { padding: 1.25rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); }
.feature-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .9rem; border-radius: var(--mn-radius-field); background: color-mix(in oklab, var(--mn-primary) 12%, transparent); color: var(--mn-primary-text); }
.feature-icon svg { width: 1.2rem; height: 1.2rem; }
.feature h3 { margin: 0 0 .35rem; font: 600 1rem/1.3 var(--mn-font); }
.feature p { margin: 0; color: var(--mn-muted); font-size: .875rem; line-height: 1.6; }

/* ---------- noodle page ---------- */
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .75rem; }
.chip-color { display: flex; flex-direction: column; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-field); overflow: hidden; font-size: .75rem; }
.chip-color > div { display: grid; grid-template-columns: 1fr 1fr; height: 3rem; }
.chip-color > span { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; font-family: var(--mn-font-mono); }
.chip-color > span b { font-family: var(--mn-font); font-weight: 600; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr); } }
.stage { padding: 1.25rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-bg); background-image: var(--mn-bg-image); color: var(--mn-fg); }
.stage-label { display: inline-flex; margin-bottom: 1rem; }

/* ---------- footer ---------- */
.site-foot { margin-top: 4rem; border-top: 1px solid var(--mn-border); }
.site-foot-in { display: flex; flex-wrap: wrap; gap: 2rem 4rem; max-width: 90rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; font-size: .875rem; }
.site-foot h2 { margin: 0 0 .6rem; font-size: .8125rem; font-weight: 600; }
.site-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.site-foot a { color: var(--mn-muted); text-decoration: none; }
.site-foot a:hover { color: var(--mn-fg); }
.site-foot p { width: 100%; margin: 0; color: var(--mn-muted); font-size: .8125rem; }
.site-foot p + p { margin-top: -1.25rem; }
.site-foot-agents code { font: 500 .75rem var(--mn-font-mono); overflow-wrap: anywhere; }
.license-text { white-space: pre-wrap; font-size: .8125rem; }

/* mode toggle icon follows the resolved mode */
.ic-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .ic-sun { display: contents; } :root:not([data-mode="light"]) .ic-moon { display: none; } }
[data-mode="dark"] .ic-sun { display: contents; }
[data-mode="dark"] .ic-moon { display: none; }
.ic-sun, .ic-moon { line-height: 0; }

/* ---------- noodle specimen ---------- */
.insp { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.insp li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 1rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); font-size: .9375rem; }
.insp li span:first-child { font-weight: 600; }
.insp li b { color: var(--mn-primary-text); }
.insp li span:last-child { color: var(--mn-muted); }
@media (max-width: 40rem) { .insp li { grid-template-columns: 1fr; gap: .2rem; } .insp li b { display: none; } }
.stage + .stage { margin-top: 0; }
#specimen .split { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 30rem) { .stage { padding: .9rem; } }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.spec-wide { grid-column: 1 / -1; }
.spec-cell h4 { margin: 0 0 .75rem; font: 600 .6875rem/1 var(--mn-font); letter-spacing: .1em; text-transform: uppercase; color: var(--mn-muted); }
@media (max-width: 52rem) { .spec { grid-template-columns: minmax(0, 1fr); } }

/* Contact */
.contact { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.contact .docs-head { margin-bottom: 1.75rem; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1.5rem; align-items: start; }
@media (max-width: 52rem) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-form { min-width: 0; }
.contact-form .mn-card-footer { justify-content: flex-end; }
.contact-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-side { display: grid; gap: 1rem; min-width: 0; }
.contact-links > li { padding: 0; }
.contact-links > li > a { margin: 0; }
.contact-owner { margin: 0; font-size: .8125rem; }
#contact-status:empty { display: none; }
.contact-done { display: grid; justify-items: start; gap: .75rem; padding: .5rem 0; }
.contact-done h3 { margin: 0; font: var(--mn-heading-weight) 1.25rem/1.3 var(--mn-font-heading); }
.contact-done p { margin: 0; color: var(--mn-muted); }

/* FAQ */
.faq .mn-accordion-content p { margin: 0; }
.faq code { font-family: var(--mn-font-mono); font-size: .9em; overflow-wrap: anywhere; }

/* The hero badge wraps on narrow phones instead of pushing the page wider. */
.hero > .mn-badge { max-width: 100%; height: auto; min-height: 1.6rem; white-space: normal; text-align: center; line-height: 1.35; padding-block: .3rem; }

/* Preview mode toggles show the preview's own mode, not the page's. */
.ex-tools button[aria-pressed] .ic-sun { display: none; }
.ex-tools button[aria-pressed] .ic-moon { display: contents; }
.ex-tools button[aria-pressed="true"] .ic-sun { display: contents; }
.ex-tools button[aria-pressed="true"] .ic-moon { display: none; }

/* Home: the demo dashboard re-cooks inside its own stage. */
.noodle-picker { display: grid; gap: .55rem; margin-bottom: 1.25rem; }
.noodle-family { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.noodle-family-name { font-size: .75rem; font-weight: 600; color: var(--mn-muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 40rem) { .noodle-family { grid-template-columns: minmax(0, 1fr); gap: .35rem; } }
.try-stage { padding: clamp(.75rem, 2vw, 1.5rem); border: 1px solid var(--mn-border); border-radius: calc(var(--mn-radius-box) + 6px); background-color: var(--mn-bg); background-image: var(--mn-bg-image); color: var(--mn-fg); }
.ncard-family { display: block; margin-bottom: .2rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-muted); }

/* The Mian story */
.story-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem 3rem; align-items: start; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--mn-border); border-radius: calc(var(--mn-radius-box) + 6px); }
.story-in p { max-width: 44rem; color: var(--mn-muted); line-height: 1.7; }
.story-in h2 + p { margin-top: .75rem; }
.story-glyph { margin: 0; font: 300 clamp(5rem, 14vw, 10rem)/1 ui-serif, "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif; color: var(--mn-fg); }
@media (max-width: 40rem) { .story-in { grid-template-columns: minmax(0, 1fr); } }

/* Noodle index: families */
.family { margin-top: 2.5rem; }
.family-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin-bottom: 1rem; }
.family-head h2 { margin: 0; }
.family-head p { margin: 0; color: var(--mn-muted); }

/* Noodle page: design language */
.dl-essence { font-size: 1.0625rem; line-height: 1.7; max-width: 46rem; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin: 1.25rem 0; }
.dl-grid > div { padding: 1rem 1.1rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); }
.dl-grid h3 { margin: 0 0 .35rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-muted); }
.dl-grid p { margin: 0; font-size: .875rem; line-height: 1.6; }
.dl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; }
.dl-cols ul { padding-inline-start: 1.1rem; line-height: 1.65; }
.dl-cols h3 { font-size: 1rem; margin: 0 0 .5rem; }
.story-page p { max-width: 46rem; line-height: 1.75; }
.story-inline { font: 400 1.35em/1 ui-serif, "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif; }

/* ---------- templates ---------- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.tcard { border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease); }
.tcard:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 30%); box-shadow: var(--mn-shadow-md); }
.tcard-link { display: block; color: inherit; text-decoration: none; }
.tcard-link:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-box); }
.tthumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--mn-border); background: var(--mn-surface-2); }
.tthumb iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .25)); pointer-events: none; background: transparent; }
.tcard-body { display: grid; gap: .4rem; padding: 1rem 1.1rem 1.15rem; }
.tcard-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tcard-name { margin: 0; font: 600 1.0625rem/1.3 var(--mn-font); }
.tcard-desc { margin: 0; color: var(--mn-muted); font-size: .875rem; line-height: 1.5; }
.tcard-meta { margin: .2rem 0 0; color: var(--mn-muted); font-size: .8125rem; }
.tpl-all { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.25rem; }
.tpl-all .ex-noodle { width: 12rem; }
.tpl-viewer { margin: 1.5rem 0 2.5rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }
.tpl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem; border-bottom: 1px solid var(--mn-border); }
.tpl-pages { flex-wrap: wrap; max-width: 100%; }
.tpl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tpl-tools .ex-noodle { width: 9.5rem; }
.tpl-widths > button { padding: 0 .6em; }
.tpl-widths svg { width: 1rem; height: 1rem; }
.tpl-stage { display: flex; justify-content: center; padding: 0; background-color: var(--mn-surface-2); background-image: radial-gradient(color-mix(in oklab, var(--mn-fg) 9%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.tpl-stage iframe { display: block; width: 100%; max-width: 100%; height: min(78vh, 52rem); border: 0; background: var(--mn-bg); transition: width 300ms var(--mn-ease); }
.tpl-stage:has(iframe[style*="px"]) { padding: 1rem; }
.tpl-stage iframe[style*="px"] { border: 1px solid var(--mn-border); border-radius: 12px; box-shadow: var(--mn-shadow-lg); }
.tpl-pairs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .6rem .75rem; border-top: 1px solid var(--mn-border); font-size: .8125rem; color: var(--mn-muted); }
.tpl-pairs > span { margin-inline-end: .25rem; }
.tpl-pairs .mn-swatch { margin-inline-end: .1rem; }
.tpl-h3 { margin: 1.25rem 0 .6rem; font: 600 .9375rem/1.3 var(--mn-font); }
.tpl-src { margin-top: .6rem; }
.tpl-src .code pre { max-height: 26rem; }
.home-templates .tgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.guide-steps { display: grid; gap: .6rem; padding-inline-start: 1.4rem; }
.guide-tells td { vertical-align: top; width: 50%; line-height: 1.55; }
.guide-tells td:first-child { color: var(--mn-muted); }
.guide-pages { display: grid; gap: .6rem; }
.guide-pages ol { padding-inline-start: 1.3rem; display: grid; gap: .3rem; }
.guide-fam dd { line-height: 1.6; }

.hero-agents { margin: 1rem 0 0; color: var(--mn-muted); font-size: .875rem; }
.hero-agents a { color: var(--mn-fg); text-underline-offset: 3px; }
.ai-steps { display: grid; gap: .75rem; margin: 0; padding-left: 1.25rem; }
.ai-steps li::marker { font-weight: 600; }
.docs-main :is(p, li, dd, td) { overflow-wrap: break-word; }
.ai-page { max-width: 54rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

/* ---------- sidebar: collapsible groups ---------- */
.side { gap: .1rem; }
.side-filter { position: sticky; top: 0; z-index: 1; padding: 1.25rem 0 .6rem; background: var(--mn-bg); }
.mn-drawer .side-filter { padding-top: 0; background: var(--mn-surface); }
.side-group > summary { display: flex; align-items: center; gap: .55rem; padding: .44rem .65rem; border-radius: var(--mn-radius-field); cursor: pointer; list-style: none; font-size: .8125rem; font-weight: 600; color: var(--mn-fg); user-select: none; -webkit-user-select: none; }
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary::before { content: ""; flex: none; width: .4rem; height: .4rem; margin-inline-start: .1rem; border: solid var(--mn-muted); border-width: 0 1.5px 1.5px 0; rotate: -45deg; transition: rotate 200ms var(--mn-ease); }
.side-group[open] > summary::before { rotate: 45deg; }
.side-group > summary:hover { background: var(--mn-hover); }
.side-group > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }
.side-group > summary small { margin-inline-start: auto; color: var(--mn-muted); font-weight: 500; font-size: .6875rem; font-variant-numeric: tabular-nums; }
.side-links { display: flex; flex-direction: column; gap: 1px; margin: .1rem 0 .5rem .95rem; padding-inline-start: .45rem; border-inline-start: 1px solid var(--mn-border); }
.side-label { margin: .9rem 0 .25rem; padding: 0 .65rem; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-muted); }
.side-empty { margin: .75rem .65rem; color: var(--mn-muted); font-size: .8125rem; }
.side [hidden] { display: none; }
@supports (interpolate-size: allow-keywords) {
  .side { interpolate-size: allow-keywords; }
  .side-group::details-content { block-size: 0; overflow: clip; transition: block-size 220ms cubic-bezier(.16, 1, .3, 1), content-visibility 220ms allow-discrete; }
  .side-group[open]::details-content { block-size: auto; }
}

/* ---------- page contents rail ---------- */
.rail { position: fixed; right: .4rem; top: 50%; translate: 0 -50%; z-index: 40; }
.rail-handle { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; padding: .7rem .4rem; border: 0; background: none; color: var(--mn-muted); cursor: pointer; transition: opacity 160ms; }
.rail-handle b { font: 600 .625rem/1 var(--mn-font-mono); font-variant-numeric: tabular-nums; margin-bottom: .2rem; }
.rail-handle i { display: block; width: 14px; height: 2px; border-radius: 2px; background: color-mix(in oklab, var(--mn-fg) 24%, transparent); transition: width 220ms cubic-bezier(.16, 1, .3, 1), background-color 160ms; }
.rail-handle i.sub { width: 8px; }
.rail-handle i.on { width: 22px; background: var(--mn-fg); }
.rail-handle:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; border-radius: 6px; }
.rail-panel { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; width: 17.5rem; max-height: min(72vh, 38rem); border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface); box-shadow: var(--mn-shadow-lg); opacity: 0; visibility: hidden; transform: translateX(10px) scale(.97); transform-origin: right center; transition: opacity 140ms, transform 240ms cubic-bezier(.16, 1, .3, 1), visibility 0s 140ms; }
.rail:hover .rail-panel, .rail:focus-within .rail-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rail:hover .rail-handle, .rail:focus-within .rail-handle { opacity: 0; }
.rail-top { display: grid; gap: .55rem; padding: .8rem .8rem .6rem; border-bottom: 1px solid var(--mn-border); }
.rail-read { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--mn-muted); }
.rail-read b { color: var(--mn-fg); font: 600 .75rem/1 var(--mn-font-mono); font-variant-numeric: tabular-nums; }
.rail-bar { height: 2px; border-radius: 2px; background: var(--mn-border); overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--mn-fg); }
.toc-list { margin: 0; padding: .4rem; list-style: none; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; }
.toc-list a { display: flex; justify-content: space-between; gap: .5rem; padding: .36rem .55rem; border-radius: var(--mn-radius-field); color: var(--mn-muted); text-decoration: none; font-size: .8125rem; line-height: 1.35; }
.toc-list a.sub { padding-inline-start: 1.25rem; }
.toc-list a:hover { background: var(--mn-hover); color: var(--mn-fg); }
.toc-list a[aria-current] { color: var(--mn-fg); font-weight: 600; background: var(--mn-active); }
.toc-list a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }
.toc-list a small { flex: none; color: var(--mn-muted); font: 500 .6875rem/1.6 var(--mn-font-mono); }
.toc-none { margin: 0; padding: .75rem .9rem; color: var(--mn-muted); font-size: .8125rem; }
@media (max-width: 64rem) { .rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail-panel, .rail-handle i { transition: none; } }

/* ---------- floating pill + sheets ---------- */
.pill { position: fixed; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 45; display: flex; align-items: center; gap: .15rem; max-width: calc(100vw - 1.5rem); padding: .3rem; border: 1px solid var(--mn-border); border-radius: 999px; background: color-mix(in srgb, var(--mn-surface) 94%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: var(--mn-shadow-lg); animation: pill-in 420ms cubic-bezier(.16, 1, .3, 1) both; }
.pill[hidden] { display: none; }
@keyframes pill-in { from { opacity: 0; translate: -50% 120%; } }
.pill button { display: inline-flex; align-items: center; gap: .45rem; height: 2.6rem; min-width: 2.6rem; padding: 0 .85rem; border: 0; border-radius: 999px; background: none; color: var(--mn-fg); font: 600 .8125rem/1 var(--mn-font); cursor: pointer; white-space: nowrap; }
.pill button:hover { background: var(--mn-hover); }
.pill button:active { scale: .96; }
.pill button:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 1px; }
.pill button svg { width: 1rem; height: 1rem; }
.pill-noodle [data-pill-name] { overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.pill-noodle > svg { color: var(--mn-muted); }
.pill .pill-btn { padding: 0; justify-content: center; }
.pill-btn[aria-pressed] .ic-sun { display: none; } .pill-btn[aria-pressed] .ic-moon { display: contents; }
.pill-btn[aria-pressed="true"] .ic-sun { display: contents; } .pill-btn[aria-pressed="true"] .ic-moon { display: none; }
.pill-toc { position: relative; }
.pill-toc::before { content: ""; position: absolute; inset: .3rem; border-radius: 50%; background: conic-gradient(var(--mn-fg) var(--p, 0%), color-mix(in oklab, var(--mn-fg) 14%, transparent) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.pill-toc span { font: 600 .625rem/1 var(--mn-font-mono); font-variant-numeric: tabular-nums; }
.pill:not([data-previews]) :is(.pill-noodle, [data-pill-mode]), .pill:not([data-near]) :is(.pill-noodle, [data-pill-mode]) { display: none; }
.pill:not([data-toc]) .pill-toc { display: none; }
.pill[data-nomode] [data-pill-mode] { display: none; }
@media (min-width: 64.01rem) { .pill-toc { display: none !important; } .pill:not([data-previews]), .pill:not([data-near]) { display: none; } }
/* On small screens the header already switches light and dark. */
@media (max-width: 64rem) { .pill [data-pill-mode] { display: none; } .pill:not([data-near]):not([data-toc]) { display: none; } }
html:has(dialog[open]) .pill { visibility: hidden; }
.sheet { max-height: 82dvh; }
.sheet-head { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem .75rem; border-bottom: 1px solid var(--mn-border); }
.sheet-head input { flex: 1; min-width: 0; }
.sheet-head strong { flex: 1; font-size: .9375rem; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: .25rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.sheet-group h3 { margin: 1rem 0 .45rem; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-muted); }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: .4rem; }
.sheet-grid button { display: flex; align-items: center; gap: .5rem; min-width: 0; height: 2.75rem; padding: 0 .7rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-field); background: var(--mn-surface); color: var(--mn-fg); font: 500 .8125rem/1 var(--mn-font); text-align: start; cursor: pointer; }
.sheet-grid button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-grid button:hover { background: var(--mn-hover); }
.sheet-grid button[aria-pressed="true"] { border-color: var(--mn-fg); box-shadow: inset 0 0 0 1px var(--mn-fg); }
.sheet-grid button:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 1px; }
.sheet [hidden] { display: none; }
.sheet .toc-list { padding: .5rem 0; }
.sheet .toc-list a { padding-block: .6rem; font-size: .9375rem; }
@media (min-width: 52rem) { .sheet.mn-drawer-bottom { inset: auto auto 1rem 50%; translate: -50% 0; width: min(46rem, 94vw); border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); } }

/* ---------- page-to-page motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .docs-side { view-transition-name: docs-side; }
  html:not(.mn-vt)::view-transition-old(root) { animation: 120ms ease-out both vt-out; }
  html:not(.mn-vt)::view-transition-new(root) { animation: 260ms cubic-bezier(.16, 1, .3, 1) both vt-in; }
  ::view-transition-group(site-header), ::view-transition-group(docs-side) { animation: none; }
  ::view-transition-old(site-header), ::view-transition-old(docs-side) { display: none; }
  ::view-transition-new(site-header), ::view-transition-new(docs-side) { animation: none; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- design guides ---------- */
.guide-dl { display: grid; gap: .1rem; margin: 1rem 0; border-top: 1px solid var(--mn-border); }
.guide-dl > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .25rem 2rem; padding: .9rem 0; border-bottom: 1px solid var(--mn-border); }
.guide-dl dt { font-weight: 600; font-size: .9375rem; }
.guide-dl dd { margin: 0; color: var(--mn-fg); font-size: .9375rem; line-height: 1.65; }
@media (max-width: 44rem) { .guide-dl > div { grid-template-columns: minmax(0, 1fr); } }
.hue-grid, .voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.75rem 2rem; margin-top: 1.25rem; }
.hue, .voice { min-width: 0; }
.hue-chip { display: block; height: .5rem; margin-bottom: .9rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.hue h3, .voice h3 { margin: 0 0 .4rem; font: 600 1rem/1.3 var(--mn-font); }
.docs-section .hue p, .docs-section .voice p { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.6; }
.voice-sample { padding-bottom: .7rem; border-bottom: 1px solid var(--mn-border); font-size: 1.5rem !important; line-height: 1.2 !important; letter-spacing: -.01em; color: var(--mn-fg); overflow-wrap: anywhere; }
.brand-dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.brand-dims .mn-card-body { display: grid; gap: .6rem; align-content: start; }
.docs-section .brand-dims p { margin: 0; font-size: .875rem; }
.shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem 2rem; }
.shape { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.shape svg { width: 3rem; height: 3rem; color: var(--mn-fg); }
.shape h3 { margin: 0 0 .25rem; font: 600 1rem/1.3 var(--mn-font); }
.docs-section .shape p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--mn-muted); }

/* ---------- noodle page: psychology and palettes ---------- */
.psy-colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem 2rem; margin: 1.25rem 0; }
.psy-colour { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .9rem; }
.psy-chip { width: 2.5rem; height: 2.5rem; border-radius: var(--mn-radius-field); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-fg) 14%, transparent); }
.psy-colour h3 { margin: 0; font: 600 .9375rem/1.3 var(--mn-font); }
.docs-section .psy-colour p { margin: .3rem 0 0; font-size: .875rem; line-height: 1.6; }
.docs-section .psy-meta { margin: .1rem 0 0; color: var(--mn-muted); font: 400 .75rem/1.4 var(--mn-font-mono); }
.pal { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin: 0 0 1rem; padding: .7rem .8rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface-2); scroll-margin-top: 5rem; }
.pal-label { font-size: .8125rem; font-weight: 600; }
.pal-chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 auto; }
.pal-chip { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .65rem 0 .4rem; border: 1px solid var(--mn-border); border-radius: 999px; background: var(--mn-surface); color: var(--mn-fg); font: 500 .8125rem/1 var(--mn-font); cursor: pointer; }
.pal-chip i { width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.pal-chip[aria-pressed="true"] { border-color: var(--mn-fg); box-shadow: inset 0 0 0 1px var(--mn-fg); }
.pal-chip:focus-visible, .pal-own:focus-within { outline: 2px solid var(--mn-ring); outline-offset: 1px; }
.pal-own input { width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.pal-own input::-webkit-color-swatch-wrapper { padding: 0; } .pal-own input::-webkit-color-swatch { border: 0; border-radius: 50%; } .pal-own input::-moz-color-swatch { border: 0; border-radius: 50%; }
.pal-out { margin-top: 1rem; }
.pal-out pre { max-height: 16rem; }

/* ---------- studio and inspector ---------- */
.studio { max-width: 90rem; margin: 0 auto; padding: 2.25rem 1.5rem 5rem; }
.studio .docs-head { max-width: 52rem; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.studio-panel { position: sticky; top: 4.75rem; max-height: calc(100vh - 5.75rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.studio-h { margin: .25rem 0 0; font: 600 .75rem/1 var(--mn-font); letter-spacing: .08em; text-transform: uppercase; color: var(--mn-muted); }
.studio-panel .studio-h:not(:first-child) { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--mn-border); }
.studio-colour { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .5rem; }
.studio-colour input[type="color"] { width: 100%; height: var(--mn-size-md); padding: 2px; border: 1px solid var(--mn-input); border-radius: var(--mn-radius-field); background: var(--mn-surface); cursor: pointer; }
.studio-colour .mn-input { font-family: var(--mn-font-mono); }
.studio-presets { margin-top: .5rem; }
.studio-presets .pal-chip { padding: 0 .4rem; }
.studio-base { justify-content: flex-start; width: 100%; }
.studio-base > svg:last-child { margin-inline-start: auto; color: var(--mn-muted); }
.studio-moods, .studio-suggest { display: flex; flex-wrap: wrap; gap: .35rem; }
.studio-suggest { align-items: center; margin-top: .6rem; }
.studio-suggest:empty { display: none; }
.studio-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.studio-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.studio-bar svg { width: 1rem; height: 1rem; }
.studio-hero { display: grid; gap: .75rem; justify-items: start; margin-bottom: 1.5rem; padding: .5rem .25rem; }
.studio-hero > * { margin: 0; }
.studio-out { margin-top: 1rem; }
.studio-out > .studio-h { margin-bottom: .75rem; }
.studio-out pre { max-height: 22rem; }
.studio-actions { margin-top: .75rem; }
@media (max-width: 60rem) { .studio-grid { grid-template-columns: minmax(0, 1fr); } .studio-panel { position: static; max-height: none; } .studio { padding: 1.5rem 1rem 7rem; } }
.inspect-form { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 46rem; }
.inspect-field { flex: 1 1 18rem; height: var(--mn-size-lg); }
.inspect-field > svg { width: 1.1rem; height: 1.1rem; margin-inline-start: .9rem; color: var(--mn-muted); flex: none; align-self: center; }
.inspect-note { margin: .6rem 0 0; }
#inspect-status { margin-top: 1.5rem; max-width: 46rem; }
#inspect-status:empty { display: none; }
.inspect-top { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 52rem) { .inspect-top { grid-template-columns: minmax(0, 1fr); } }
.inspect-score .mn-card-body { display: grid; justify-items: center; text-align: center; gap: .2rem; }
.inspect-title { margin: .75rem 0 0; font: 600 1.0625rem/1.3 var(--mn-font); overflow-wrap: anywhere; }
.inspect-score p { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
.inspect-cat { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 2.5rem; align-items: center; gap: .9rem; padding: .55rem 0; font-size: .875rem; }
.inspect-cat b { text-align: end; font-variant-numeric: tabular-nums; }
.finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .9rem; align-items: start; padding: .9rem 0; border-bottom: 1px solid var(--mn-border); }
.finding .mn-badge { margin-top: .1rem; min-width: 4.4rem; justify-content: center; }
.finding h3 { margin: 0; font: 600 .9375rem/1.4 var(--mn-font); }
.docs-section .finding p { grid-column: 2; margin: 0; color: var(--mn-muted); font-size: .875rem; line-height: 1.6; }
.inspect-lang { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem 2.5rem; }
.inspect-lang h3 { margin: 0 0 .6rem; font: 600 .9375rem/1.3 var(--mn-font); }
.inspect-lang h3:not(:first-child) { margin-top: 1.25rem; }
.inspect-recook-bar { justify-content: space-between; margin-bottom: .75rem; }
.inspect-stage { padding: 0; overflow: hidden; }
.ncard-why { margin: 0; color: var(--mn-muted); font-size: .8125rem; line-height: 1.5; }

/* The floating pill replaces the per-example pickers on phones. */
@media (max-width: 40rem) { .ex-tools { display: none; } }
.studio [hidden], .inspect [hidden] { display: none !important; }

/* Home: tools */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0; border-top: 1px solid var(--mn-border); }
.tool { display: grid; align-content: start; gap: .5rem; padding: 1.5rem 1.5rem 1.5rem 0; color: var(--mn-fg); text-decoration: none; }
.tool + .tool { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--mn-border); }
.tool h3 { margin: 0; font: var(--mn-heading-weight) 1.25rem/1.25 var(--mn-font-heading); letter-spacing: -.02em; }
.tool p { margin: 0; color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; }
.tool-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .875rem; font-weight: 600; }
.tool-go svg { width: 1rem; height: 1rem; transition: translate var(--mn-dur, 200ms) var(--mn-ease-out, ease-out); }
.tool:hover .tool-go svg { translate: 3px 0; }
.tool:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; }
@media (max-width: 58rem) { .tool, .tool + .tool { padding-inline: 0; border-inline-start: 0; } .tool + .tool { border-top: 1px solid var(--mn-border); } }
.hero .mn-h1 { margin-top: 0; }

/* The noodle sheet: compact on phones, never taller than about half the screen. */
@media (max-width: 52rem) {
  .sheet { max-height: 62dvh; }
  .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .sheet-grid button { height: 2.4rem; padding: 0 .45rem; gap: .35rem; font-size: .75rem; }
  .sheet-grid .mn-swatch { transform: scale(.8); transform-origin: left center; margin-inline-end: -.25rem; }
  .sheet-group h3 { margin: .7rem 0 .35rem; }
  /* Fields at 16px so phones never zoom the page when one is focused. */
  input, select, textarea { font-size: 16px !important; }
}
/* Room for the contents rail, so nothing sits under it. */
@media (min-width: 64.01rem) {
  .has-rail :is(.studio, .band, .hero, .contact, .ai-page, .site-foot-in) { padding-inline-end: 3.5rem; }
}
/* A noodle's page: the content is cooked in that noodle; the site around it stays Mian. */
.docs-main[data-noodle] { margin-block: 1.5rem 3rem; padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); background-color: var(--mn-bg); background-image: var(--mn-bg-image); }
@media (max-width: 52rem) { .docs-main[data-noodle] { margin-inline: -.5rem; padding-inline: .9rem; } }
/* Home: start from what you have */
.start { padding-block: 0 1.5rem; }
.tool h3 a { color: inherit; text-decoration: none; }
.tool h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tool-form { display: flex; gap: .4rem; margin-top: .5rem; min-width: 0; }
.tool-form .mn-input { flex: 1; min-width: 0; }
.tool-form input[type="color"] { flex: none; width: 2.6rem; height: var(--mn-size-md); padding: 2px; border: 1px solid var(--mn-input); border-radius: var(--mn-radius-field); background: var(--mn-surface); cursor: pointer; }

.inspect-snap { border: 1px solid var(--mn-border); border-radius: var(--mn-radius-box); overflow: hidden; background: var(--mn-surface-2); }
.inspect-snap iframe { display: block; width: 100%; height: min(80vh, 54rem); border: 0; background: #fff; }
.inspect-snap-none { margin: 0; padding: 2rem 1.25rem; color: var(--mn-muted); font-size: .9375rem; }
.inspect-recook-bar { gap: .6rem 1rem; }
.inspect-recook-bar > .mn-btn { margin-inline-start: auto; }