mevebu 1.0.0 → 1.2.0

package/mevebu/app/mevebu.css

@@ -1,1207 +0,0 @@
-/* mevebu. Every product class starts with mvb-. Tokens first, then the frame,
-   then components. See DESIGN.md for the reasoning behind each decision. */
-
-/* ---------- tokens ---------- */
-
-:root {
-  --mvb-void: #f2f4f8;
-  --mvb-deck: #ffffff;
-  --mvb-deck-2: #e9edf4;
-  --mvb-ink: #151d2e;
-  --mvb-ink-2: #4b5871;
-  --mvb-ink-3: #69748c;
-  --mvb-orbit: #dbe1ee;
-  --mvb-orbit-hard: #c2cbdf;
-  --mvb-comet: #2456d6;
-  --mvb-comet-deep: #1a43ad;
-  --mvb-on-comet: #ffffff;
-  --mvb-nebula: #e3ebfd;
-  --mvb-aurora: #0d7a56;
-  --mvb-danger: #b3261e;
-  --mvb-star: #e6a100;
-
-  --mvb-r1: 10px;
-  --mvb-r2: 16px;
-  --mvb-r3: 24px;
-
-  --mvb-margin: clamp(20px, 5vw, 44px);
-  --mvb-gutter: clamp(14px, 2vw, 24px);
-  --mvb-bench: 1120px;
-  --mvb-bar: 60px;
-
-  --mvb-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --mvb-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-
-  --mvb-ease: cubic-bezier(0.22, 0.9, 0.28, 1);
-  --mvb-t: 150ms;
-  color-scheme: light;
-}
-
-:root[data-theme="dark"] {
-  --mvb-void: #070b18;
-  --mvb-deck: #0d1428;
-  --mvb-deck-2: #16203a;
-  --mvb-ink: #e9eefb;
-  --mvb-ink-2: #aeb9d2;
-  --mvb-ink-3: #8b97b3;
-  --mvb-orbit: #1d2a4d;
-  --mvb-orbit-hard: #2c3d68;
-  --mvb-comet: #5f8bff;
-  --mvb-comet-deep: #7ba1ff;
-  --mvb-on-comet: #060b18;
-  --mvb-nebula: #131e3c;
-  --mvb-aurora: #4ad69c;
-  --mvb-danger: #ff8a80;
-  --mvb-star: #ffcf4d;
-  color-scheme: dark;
-}
-
-/* ---------- reset ---------- */
-
-*,
-*::before,
-*::after { box-sizing: border-box; }
-
-html { -webkit-text-size-adjust: 100%; }
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--mvb-void);
-  color: var(--mvb-ink);
-  font-family: var(--mvb-sans);
-  font-size: 16px;
-  line-height: 1.55;
-  -webkit-font-smoothing: antialiased;
-}
-
-h1, h2, h3, p, ul, pre, figure { margin: 0; }
-ul { list-style: none; padding: 0; }
-button, input, textarea, select { font: inherit; color: inherit; }
-a { color: inherit; }
-
-[hidden] { display: none !important; }
-
-:focus-visible {
-  outline: 2px solid var(--mvb-comet);
-  outline-offset: 2px;
-  border-radius: 6px;
-}
-
-::selection { background: var(--mvb-nebula); }
-
-/* ---------- icons ---------- */
-
-.mvb-ico {
-  width: 18px;
-  height: 18px;
-  flex: none;
-  display: block;
-}
-.mvb-ico--lg { width: 26px; height: 26px; }
-.mvb-ico--sm { width: 15px; height: 15px; }
-
-/* ---------- header ---------- */
-
-.mvb-bar {
-  position: sticky;
-  top: 0;
-  z-index: 30;
-  background: color-mix(in srgb, var(--mvb-deck) 88%, transparent);
-  border-bottom: 1px solid var(--mvb-orbit);
-  backdrop-filter: saturate(140%) blur(10px);
-  -webkit-backdrop-filter: saturate(140%) blur(10px);
-}
-
-.mvb-bar__in {
-  height: var(--mvb-bar);
-  margin-inline: var(--mvb-margin);
-  display: flex;
-  align-items: center;
-  gap: clamp(14px, 3vw, 32px);
-}
-
-.mvb-mark {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 18px;
-  letter-spacing: -0.01em;
-  color: var(--mvb-ink);
-}
-
-.mvb-mark img {
-  width: 30px;
-  height: 30px;
-  border-radius: 9px;
-  display: block;
-  box-shadow: 0 0 0 1px var(--mvb-orbit);
-}
-
-.mvb-nav {
-  display: flex;
-  gap: 4px;
-  margin-inline-start: auto;
-  background: var(--mvb-deck-2);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r2);
-  padding: 4px;
-}
-
-.mvb-nav__link {
-  color: var(--mvb-ink-2);
-  text-decoration: none;
-  font-size: 14.5px;
-  font-weight: 600;
-  padding: 7px 12px;
-  border-radius: 8px;
-  transition: background var(--mvb-t) ease, color var(--mvb-t) ease;
-}
-
-.mvb-nav__link:hover { color: var(--mvb-ink); background: color-mix(in srgb, var(--mvb-ink) 6%, transparent); }
-.mvb-nav__link.mvb-on { color: var(--mvb-ink); background: var(--mvb-deck); box-shadow: 0 0 0 1px var(--mvb-orbit); }
-
-.mvb-bar__end { display: flex; align-items: center; gap: 2px; }
-
-.mvb-icobtn {
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: var(--mvb-r1);
-  color: var(--mvb-ink-2);
-  cursor: pointer;
-  transition: background var(--mvb-t) ease, color var(--mvb-t) ease;
-}
-
-.mvb-icobtn:hover { background: var(--mvb-deck-2); color: var(--mvb-ink); }
-.mvb-icobtn:focus-visible { border-color: var(--mvb-comet); }
-.mvb-bar__menu { display: none; }
-
-/* search button that opens the palette */
-
-.mvb-searchbtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: 40px;
-  padding: 0 10px 0 12px;
-  background: var(--mvb-deck-2);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r1);
-  color: var(--mvb-ink-2);
-  font-size: 14px;
-  font-weight: 550;
-  cursor: pointer;
-  margin-inline-end: 4px;
-  min-width: 180px;
-  transition: border-color var(--mvb-t) ease, color var(--mvb-t) ease, background var(--mvb-t) ease;
-}
-
-.mvb-searchbtn:hover { border-color: var(--mvb-orbit-hard); color: var(--mvb-ink); background: var(--mvb-deck); }
-.mvb-searchbtn:focus-visible { border-color: var(--mvb-comet); }
-.mvb-searchbtn .mvb-ico { color: var(--mvb-ink-3); width: 15px; height: 15px; }
-
-.mvb-searchbtn__txt { font-size: 14px; flex: 1; text-align: start; }
-
-.mvb-searchbtn__key {
-  font-family: var(--mvb-sans);
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--mvb-ink-3);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: 4px;
-  padding: 1px 6px;
-  background: var(--mvb-deck);
-}
-
-@media (max-width: 720px) {
-  .mvb-searchbtn { display: none; }
-}
-
-.mvb-sheet {
-  border-top: 1px solid var(--mvb-orbit);
-  background: var(--mvb-deck);
-  padding: 6px var(--mvb-margin) 14px;
-  display: grid;
-}
-
-.mvb-sheet__link {
-  padding: 13px 0;
-  font-size: 17px;
-  font-weight: 550;
-  text-decoration: none;
-  border-bottom: 1px solid var(--mvb-orbit);
-  background: none;
-  text-align: start;
-  color: var(--mvb-ink);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.mvb-sheet__link:last-child { border-bottom: 0; }
-.mvb-sheet__link .mvb-ico { color: var(--mvb-ink-3); }
-.mvb-sheet__action { color: var(--mvb-comet); }
-
-/* ---------- frame ---------- */
-
-.mvb-main {
-  flex: 1;
-  outline: none;
-}
-
-.mvb-page { padding-inline: var(--mvb-margin); }
-
-.mvb-page--tool,
-.mvb-page--narrow {
-  max-width: var(--mvb-bench);
-  margin-inline: auto;
-}
-
-.mvb-link { color: var(--mvb-comet); text-underline-offset: 3px; }
-
-.mvb-kbd {
-  font-family: var(--mvb-sans);
-  font-size: 12.5px;
-  border: 1px solid var(--mvb-orbit);
-  border-radius: 5px;
-  padding: 1px 7px;
-  background: var(--mvb-deck-2);
-  color: var(--mvb-ink-2);
-}
-
-/* hero, only on the home page */
-
-.mvb-hero {
-  position: relative;
-  overflow: clip;
-  border-bottom: 1px solid var(--mvb-orbit);
-  background:
-    radial-gradient(560px 300px at 12% -40px, var(--mvb-nebula), transparent 70%),
-    var(--mvb-deck);
-}
-
-.mvb-hero__in {
-  max-width: var(--mvb-bench);
-  margin-inline: auto;
-  padding: clamp(48px, 8vw, 104px) var(--mvb-margin) clamp(40px, 6vw, 80px);
-  display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
-  gap: clamp(24px, 5vw, 72px);
-  align-items: center;
-}
-
-.mvb-hero__title {
-  font-size: clamp(34px, 6vw, 60px);
-  line-height: 1.02;
-  letter-spacing: -0.03em;
-  font-weight: 700;
-  text-wrap: balance;
-}
-
-.mvb-hero__cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
-
-.mvb-hero__orbit { justify-self: center; width: min(300px, 70vw); }
-.mvb-hero__orbit img { width: 100%; height: auto; border-radius: var(--mvb-r3); display: block; }
-
-/* index sections */
-
-.mvb-section { padding-block: clamp(32px, 5vw, 60px) 0; }
-
-.mvb-section__head {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.mvb-section__title {
-  font-size: clamp(21px, 3vw, 27px);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.mvb-section__title .mvb-ico { color: var(--mvb-comet); width: 22px; height: 22px; }
-
-.mvb-section__count {
-  margin-left: 6px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--mvb-ink-3);
-  background: var(--mvb-deck-2);
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-variant-numeric: tabular-nums;
-}
-
-.mvb-section__more {
-  margin-inline-start: auto;
-  font-size: 14.5px;
-  font-weight: 600;
-  color: var(--mvb-comet);
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.mvb-section__more:hover { text-decoration: underline; }
-
-/* ---------- column system: mvb-cols for any grid ---------- */
-
-.mvb-cols { display: grid; gap: var(--mvb-gutter); }
-.mvb-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.mvb-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.mvb-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-.mvb-cols--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
-.mvb-cols--side { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
-
-.mvb-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
-.mvb-col { min-width: 0; }
-.mvb-col--grow { flex: 1; }
-.mvb-col--shrink { flex: none; }
-
-@media (max-width: 960px) {
-  .mvb-cols--3, .mvb-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .mvb-cols--side { grid-template-columns: 1fr; }
-}
-@media (max-width: 640px) {
-  .mvb-cols--2, .mvb-cols--3, .mvb-cols--4 { grid-template-columns: 1fr; }
-}
-
-/* legacy alias kept for the cards on home and tools pages */
-
-.mvb-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--mvb-gutter);
-}
-
-.mvb-card {
-  position: relative;
-  display: grid;
-  gap: 6px;
-  padding: 20px;
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r2);
-  text-decoration: none;
-  transition: border-color var(--mvb-t) ease, transform var(--mvb-t) var(--mvb-ease);
-}
-
-.mvb-card:hover { border-color: var(--mvb-comet); }
-
-.mvb-card__top { display: flex; align-items: center; gap: 12px; }
-
-.mvb-card__sigil {
-  width: 42px;
-  height: 42px;
-  flex: none;
-  display: grid;
-  place-items: center;
-  border-radius: 13px;
-  background: var(--mvb-nebula);
-  color: var(--mvb-comet);
-}
-
-.mvb-card__sigil .mvb-ico { width: 21px; height: 21px; }
-
-.mvb-card__name { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
-
-.mvb-card__note { font-size: 14.5px; color: var(--mvb-ink-2); text-wrap: pretty; min-height: 44px; }
-
-.mvb-card__foot {
-  margin-top: 6px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13.5px;
-  font-weight: 600;
-  color: var(--mvb-ink-3);
-}
-
-/* compact rows inside category and favorites pages */
-
-.mvb-rows { display: grid; background: var(--mvb-deck); border: 1px solid var(--mvb-orbit); border-radius: var(--mvb-r2); overflow: clip; }
-
-.mvb-row { display: flex; align-items: center; border-bottom: 1px solid var(--mvb-orbit); }
-.mvb-row:last-child { border-bottom: 0; }
-
-.mvb-row__link {
-  flex: 1;
-  min-width: 0;
-  display: grid;
-  gap: 1px;
-  padding: 13px 6px 13px 18px;
-  text-decoration: none;
-}
-
-.mvb-row__link:hover .mvb-row__name { color: var(--mvb-comet); }
-
-.mvb-row__name { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
-.mvb-row__note { font-size: 14px; color: var(--mvb-ink-2); }
-
-.mvb-star {
-  width: 44px;
-  height: 44px;
-  flex: none;
-  margin-right: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: 0;
-  border-radius: var(--mvb-r1);
-  color: var(--mvb-orbit-hard);
-  cursor: pointer;
-  transition: color var(--mvb-t) ease, transform var(--mvb-t) var(--mvb-ease);
-}
-
-.mvb-star:hover { color: var(--mvb-ink-2); }
-.mvb-star.mvb-on { color: var(--mvb-star); }
-.mvb-star.mvb-on .mvb-ico { fill: var(--mvb-star); }
-.mvb-star:active { transform: scale(0.88); }
-
-/* filter */
-
-.mvb-filter {
-  margin-top: clamp(22px, 4vw, 36px);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r2);
-  padding: 0 14px;
-  transition: border-color var(--mvb-t) ease;
-}
-
-.mvb-filter:focus-within { border-color: var(--mvb-comet); }
-
-.mvb-filter__icon { color: var(--mvb-ink-3); display: flex; }
-
-.mvb-filter__in {
-  flex: 1;
-  min-width: 0;
-  height: 52px;
-  border: 0;
-  background: none;
-  font-size: 17px;
-}
-
-.mvb-filter__in:focus { outline: none; }
-.mvb-filter__in::placeholder { color: var(--mvb-ink-3); }
-
-.mvb-filter__key {
-  font-family: var(--mvb-sans);
-  font-size: 12px;
-  color: var(--mvb-ink-3);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: 5px;
-  padding: 2px 7px;
-}
-
-.mvb-filter__meta {
-  display: flex;
-  gap: 14px;
-  align-items: baseline;
-  margin-top: 10px;
-  min-height: 22px;
-  font-size: 14px;
-  color: var(--mvb-ink-3);
-}
-
-.mvb-tally { color: var(--mvb-danger); }
-
-/* headings on secondary pages */
-
-.mvb-lead {
-  font-size: clamp(28px, 5vw, 44px);
-  line-height: 1.06;
-  letter-spacing: -0.025em;
-  font-weight: 700;
-  text-wrap: balance;
-  max-width: 20ch;
-  margin-top: clamp(28px, 5vw, 56px);
-}
-
-.mvb-lede { margin-top: 12px; font-size: 17px; color: var(--mvb-ink-2); max-width: 60ch; text-wrap: pretty; }
-
-/* ---------- tool page ---------- */
-
-.mvb-head { margin-block: clamp(24px, 4vw, 44px) clamp(22px, 3vw, 32px); }
-
-.mvb-head__back {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 15px;
-  font-weight: 550;
-  color: var(--mvb-ink-2);
-  text-decoration: none;
-  margin-bottom: 16px;
-}
-
-.mvb-head__back:hover { color: var(--mvb-ink); }
-
-.mvb-head__row { display: flex; align-items: flex-start; gap: 8px; }
-
-.mvb-head__title {
-  font-size: clamp(26px, 4vw, 36px);
-  line-height: 1.1;
-  letter-spacing: -0.025em;
-  font-weight: 700;
-  text-wrap: balance;
-  flex: 1;
-}
-
-.mvb-head__actions { display: flex; align-items: center; gap: 2px; padding-top: 4px; }
-
-.mvb-head__about { margin-top: 8px; font-size: 17px; color: var(--mvb-ink-2); max-width: 58ch; text-wrap: pretty; }
-
-.mvb-helpbtn {
-  width: 38px;
-  height: 38px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--mvb-deck-2);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: 999px;
-  color: var(--mvb-ink-2);
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 700;
-  font-family: var(--mvb-sans);
-  transition: background var(--mvb-t) ease, color var(--mvb-t) ease, border-color var(--mvb-t) ease;
-}
-
-.mvb-helpbtn:hover { background: var(--mvb-deck); color: var(--mvb-ink); border-color: var(--mvb-orbit-hard); }
-.mvb-helpbtn:focus-visible { border-color: var(--mvb-comet); }
-
-.mvb-more { margin-top: clamp(40px, 6vw, 72px); }
-.mvb-more__title { font-size: 15px; font-weight: 700; color: var(--mvb-ink-3); margin-bottom: 10px; }
-
-/* ---------- tool card: header, body, footer ---------- */
-
-.mvb-toolcard {
-  display: flex;
-  flex-direction: column;
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r2);
-  overflow: clip;
-}
-
-.mvb-toolcard__head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  padding: clamp(12px, 2vw, 16px) clamp(20px, 3vw, 32px);
-  border-bottom: 1px solid var(--mvb-orbit);
-  background: var(--mvb-deck-2);
-}
-
-.mvb-toolcard__head .mvb-actions {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.mvb-toolcard__body {
-  flex: 1;
-  padding: clamp(20px, 3vw, 32px);
-}
-
-.mvb-toolcard__foot {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  padding: clamp(12px, 2vw, 16px) clamp(20px, 3vw, 32px);
-  border-top: 1px solid var(--mvb-orbit);
-  background: var(--mvb-deck-2);
-  justify-content: flex-end;
-}
-
-.mvb-toolcard__foot[hidden],
-.mvb-toolcard__head[hidden] { display: none; }
-
-.mvb-toolcard .mvb-bench,
-.mvb-toolcard .mvb-stage { gap: clamp(16px, 2.4vw, 24px); }
-
-@media (max-width: 720px) {
-  .mvb-toolcard__body { padding: 18px; }
-  .mvb-toolcard__head,
-  .mvb-toolcard__foot { padding-inline: 18px; }
-}
-
-/* ---------- bench ---------- */
-
-.mvb-bench {
-  display: grid;
-  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
-  gap: clamp(20px, 3vw, 36px);
-  align-items: start;
-}
-
-.mvb-bench__side, .mvb-bench__main { min-width: 0; }
-
-.mvb-stage {
-  display: grid;
-  justify-items: center;
-  gap: 16px;
-  max-width: 560px;
-  margin-inline: auto;
-  text-align: center;
-}
-
-.mvb-stack { display: grid; gap: 14px; align-content: start; }
-.mvb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-
-/* ---------- form atoms ---------- */
-
-.mvb-field { display: grid; gap: 6px; min-width: 0; }
-.mvb-field__label { font-size: 14px; font-weight: 600; color: var(--mvb-ink-2); }
-.mvb-field__hint { font-size: 13px; color: var(--mvb-ink-3); }
-
-.mvb-field--error .mvb-in,
-.mvb-field--error .mvb-pick { border-color: var(--mvb-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvb-danger) 14%, transparent); }
-.mvb-field--error .mvb-field__hint { color: var(--mvb-danger); }
-.mvb-field--good .mvb-in,
-.mvb-field--good .mvb-pick { border-color: var(--mvb-aurora); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvb-aurora) 14%, transparent); }
-.mvb-field--good .mvb-field__hint { color: var(--mvb-aurora); }
-
-.mvb-in {
-  width: 100%;
-  min-width: 0;
-  padding: 10px 12px;
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r1);
-  color: var(--mvb-ink);
-  font: inherit;
-  transition: border-color var(--mvb-t) ease, box-shadow var(--mvb-t) ease, background var(--mvb-t) ease;
-}
-
-.mvb-in:hover { border-color: var(--mvb-orbit-hard); }
-.mvb-in:focus { outline: none; border-color: var(--mvb-comet); box-shadow: 0 0 0 3px var(--mvb-nebula); }
-.mvb-in::placeholder { color: var(--mvb-ink-3); }
-
-.mvb-in[disabled],
-.mvb-in[readonly] { background: var(--mvb-deck-2); color: var(--mvb-ink-3); cursor: default; }
-.mvb-in[disabled] { cursor: not-allowed; opacity: 0.7; }
-
-.mvb-in--area { resize: vertical; min-height: 96px; line-height: 1.5; font-family: var(--mvb-mono); font-size: 14px; }
-.mvb-in--num { width: 96px; }
-.mvb-in--mono { font-family: var(--mvb-mono); font-size: 14px; }
-
-.mvb-in--select {
-  appearance: none;
-  -webkit-appearance: none;
-  padding-inline-end: 36px;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369748C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  background-size: 14px;
-  cursor: pointer;
-}
-
-.mvb-in--file { padding: 6px; }
-.mvb-in--file::file-selector-button {
-  margin-right: 10px;
-  padding: 4px 10px;
-  border: 1px solid var(--mvb-orbit-hard);
-  border-radius: var(--mvb-r1);
-  background: var(--mvb-deck-2);
-  color: var(--mvb-ink);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.mvb-check {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 15px;
-  cursor: pointer;
-  padding: 8px 12px 8px 10px;
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r1);
-  background: var(--mvb-deck);
-  transition: border-color var(--mvb-t) ease, background var(--mvb-t) ease;
-}
-
-.mvb-check:has(.mvb-check__box:checked) { border-color: var(--mvb-comet); background: var(--mvb-nebula); }
-.mvb-check__box { width: 16px; height: 16px; accent-color: var(--mvb-comet); margin: 0; }
-
-/* switch */
-
-.mvb-switch {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 15px;
-  cursor: pointer;
-  user-select: none;
-}
-.mvb-switch__box { position: absolute; opacity: 0; pointer-events: none; }
-.mvb-switch__track {
-  position: relative;
-  width: 38px;
-  height: 22px;
-  border-radius: 999px;
-  background: var(--mvb-orbit-hard);
-  transition: background var(--mvb-t) ease;
-}
-.mvb-switch__thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--mvb-deck);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
-  transition: transform var(--mvb-t) var(--mvb-ease);
-}
-.mvb-switch__box:checked + .mvb-switch__track { background: var(--mvb-comet); }
-.mvb-switch__box:checked + .mvb-switch__track .mvb-switch__thumb { transform: translateX(16px); }
-.mvb-switch__box:focus-visible + .mvb-switch__track { box-shadow: 0 0 0 3px var(--mvb-nebula); }
-
-.mvb-range {
-  width: 100%;
-  accent-color: var(--mvb-comet);
-}
-
-.mvb-pick {
-  width: 52px;
-  height: 40px;
-  flex: none;
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r1);
-  background: var(--mvb-deck);
-  padding: 2px;
-  cursor: pointer;
-}
-.mvb-pick:hover { border-color: var(--mvb-orbit-hard); }
-.mvb-pick:focus { outline: none; border-color: var(--mvb-comet); box-shadow: 0 0 0 3px var(--mvb-nebula); }
-
-.mvb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
-
-.mvb-chip {
-  min-height: 38px;
-  padding: 0 13px;
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r1);
-  color: var(--mvb-ink-2);
-  font-size: 14px;
-  font-weight: 550;
-  cursor: pointer;
-  transition: background var(--mvb-t) ease, border-color var(--mvb-t) ease, color var(--mvb-t) ease;
-}
-
-.mvb-chip:hover { border-color: var(--mvb-orbit-hard); color: var(--mvb-ink); }
-.mvb-chip.mvb-on { background: var(--mvb-nebula); border-color: var(--mvb-comet); color: var(--mvb-ink); }
-
-/* ---------- action bar: thumbs-up on the right ---------- */
-
-.mvb-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-/* An action row that sits at the end of a column keeps its own top spacing.
-   Inside a card header or footer the container owns the spacing instead. */
-
-.mvb-bench .mvb-actions,
-.mvb-stack > .mvb-actions { margin-top: 4px; }
-
-/* buttons */
-
-.mvb-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  min-height: 40px;
-  padding: 0 16px;
-  border-radius: var(--mvb-r1);
-  border: 1px solid transparent;
-  font-size: 15px;
-  font-weight: 650;
-  cursor: pointer;
-  text-decoration: none;
-  transition: background var(--mvb-t) ease, border-color var(--mvb-t) ease, transform var(--mvb-t) var(--mvb-ease);
-}
-
-.mvb-btn:active { transform: scale(0.97); }
-
-.mvb-btn--fill { background: var(--mvb-comet); color: var(--mvb-on-comet); }
-.mvb-btn--fill:hover { background: var(--mvb-comet-deep); }
-
-.mvb-btn--plain { background: var(--mvb-deck); border-color: var(--mvb-orbit); color: var(--mvb-ink); }
-.mvb-btn--plain:hover { border-color: var(--mvb-orbit-hard); }
-
-.mvb-btn--quiet { background: none; color: var(--mvb-ink-2); padding-inline: 8px; }
-.mvb-btn--quiet:hover { color: var(--mvb-ink); background: var(--mvb-deck-2); }
-
-.mvb-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
-
-/* readouts */
-
-.mvb-out {
-  width: 100%;
-  margin: 0;
-  padding: 12px 14px;
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r1);
-  font-family: var(--mvb-mono);
-  font-size: 14px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  overflow: auto;
-  max-height: 340px;
-}
-
-textarea.mvb-out { resize: vertical; }
-
-.mvb-note { font-size: 14px; color: var(--mvb-ink-3); }
-.mvb-note--error { color: var(--mvb-danger); }
-.mvb-note--good { color: var(--mvb-aurora); }
-
-.mvb-blank {
-  display: grid;
-  justify-items: center;
-  gap: 10px;
-  padding: clamp(28px, 6vw, 56px) 16px;
-  border: 1px dashed var(--mvb-orbit-hard);
-  border-radius: var(--mvb-r2);
-  color: var(--mvb-ink-3);
-  text-align: center;
-}
-
-.mvb-blank p { max-width: 34ch; }
-
-.mvb-code {
-  font-family: var(--mvb-mono);
-  font-size: 14px;
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r1);
-  padding: 12px 14px;
-  overflow-x: auto;
-  white-space: pre-wrap;
-}
-
-:not(pre) > code {
-  font-family: var(--mvb-mono);
-  font-size: 0.92em;
-  background: var(--mvb-deck-2);
-  border-radius: 4px;
-  padding: 1px 5px;
-}
-
-/* about blocks */
-
-.mvb-about { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--mvb-orbit); max-width: 62ch; display: grid; gap: 10px; }
-.mvb-about__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
-.mvb-about p { color: var(--mvb-ink-2); text-wrap: pretty; }
-
-/* ---------- modal ---------- */
-
-.mvb-veil {
-  position: fixed;
-  inset: 0;
-  z-index: 80;
-  display: grid;
-  place-items: start center;
-  padding: clamp(60px, 10vh, 120px) 20px 20px;
-  background: rgb(4 8 20 / 0.5);
-  opacity: 0;
-  transition: opacity 180ms ease;
-}
-
-.mvb-veil.mvb-open { opacity: 1; }
-.mvb-veil.mvb-off { opacity: 0; }
-
-.mvb-modal {
-  width: min(440px, 100%);
-  background: var(--mvb-deck);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r3);
-  padding: 28px;
-  text-align: center;
-  transform: translateY(14px) scale(0.96);
-  transition: transform 220ms var(--mvb-ease);
-}
-
-.mvb-veil.mvb-open .mvb-modal { transform: none; }
-.mvb-veil.mvb-off .mvb-modal { transform: translateY(10px) scale(0.97); }
-
-.mvb-modal__art img { width: 88px; height: 88px; border-radius: 22px; margin-inline: auto; display: block; }
-
-.mvb-modal__title { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
-.mvb-modal__body p { margin-top: 8px; color: var(--mvb-ink-2); font-size: 15.5px; text-wrap: pretty; }
-.mvb-modal__actions { margin-top: 20px; display: grid; gap: 8px; }
-
-/* version readout inside the update modal */
-.mvb-vers { margin-top: 18px; border: 1px solid var(--mvb-orbit); border-radius: var(--mvb-r2); overflow: hidden; }
-.mvb-vers__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
-.mvb-vers__row + .mvb-vers__row { border-top: 1px solid var(--mvb-orbit); }
-.mvb-vers__label { font-size: 14px; color: var(--mvb-ink-3); }
-.mvb-vers__val { font-family: var(--mvb-mono); font-size: 15px; font-weight: 600; }
-.mvb-vers__row--new .mvb-vers__val { color: var(--mvb-comet); }
-.mvb-vers__hint { margin-top: 14px !important; font-size: 14px !important; }
-
-.mvb-cmd {
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  background: var(--mvb-deck-2);
-  border: 1px solid var(--mvb-orbit);
-  border-radius: var(--mvb-r2);
-  padding: 10px 10px 10px 16px;
-}
-.mvb-cmd__text { flex: 1 1 auto; min-width: 0; font-family: var(--mvb-mono); font-size: 14px; overflow-wrap: anywhere; }
-
-/* ---------- command palette ---------- */
-
-.mvb-veil--pal { padding: clamp(60px, 12vh, 140px) 20px 20px; }
-.mvb-veil--pal .mvb-modal {
-  width: min(640px, 100%);
-  text-align: start;
-  padding: 0;
-  overflow: hidden;
-}
-
-/* help/tutorial modal */
-
-.mvb-veil--help { padding: clamp(60px, 10vh, 120px) 20px 20px; }
-.mvb-veil--help .mvb-modal {
-  width: min(560px, 100%);
-  text-align: start;
-  padding: 28px;
-  overflow: hidden;
-}
-
-.mvb-help__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
-.mvb-help__sigil { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--mvb-nebula); color: var(--mvb-comet); }
-.mvb-help__sigil .mvb-ico { width: 22px; height: 22px; }
-.mvb-help__title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
-.mvb-help__note { color: var(--mvb-ink-2); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; margin-bottom: 14px; }
-.mvb-help__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
-.mvb-help__steps li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; color: var(--mvb-ink); font-size: 14.5px; line-height: 1.5; }
-.mvb-help__steps li::before { content: counter(mvb-step); counter-increment: mvb-step; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--mvb-nebula); color: var(--mvb-comet); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
-.mvb-help__steps { counter-reset: mvb-step; }
-
-.mvb-help__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; justify-content: flex-end; }
-
-.mvb-pal__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--mvb-orbit); }
-.mvb-pal__icon { color: var(--mvb-ink-3); }
-.mvb-pal__in { flex: 1; min-width: 0; height: 40px; border: 0; background: none; font-size: 17px; }
-.mvb-pal__in:focus { outline: none; }
-.mvb-pal__in::placeholder { color: var(--mvb-ink-3); }
-
-.mvb-pal__count { padding: 8px 18px 0; font-size: 12.5px; color: var(--mvb-ink-3); margin: 0; }
-
-.mvb-pal__list {
-  list-style: none;
-  margin: 6px 0 0;
-  padding: 0 8px 8px;
-  max-height: min(60vh, 360px);
-  overflow-y: auto;
-}
-
-.mvb-pal__item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: var(--mvb-r1);
-  cursor: pointer;
-  background: none;
-  border: 0;
-  width: 100%;
-  text-align: start;
-  color: var(--mvb-ink);
-  transition: background var(--mvb-t) ease;
-}
-.mvb-pal__item.mvb-on { background: var(--mvb-nebula); }
-.mvb-pal__item.mvb-on .mvb-pal__name { color: var(--mvb-comet); }
-
-.mvb-pal__sigil {
-  width: 32px;
-  height: 32px;
-  flex: none;
-  display: grid;
-  place-items: center;
-  border-radius: 8px;
-  background: var(--mvb-deck-2);
-  color: var(--mvb-comet);
-}
-.mvb-pal__sigil .mvb-ico { width: 16px; height: 16px; }
-.mvb-pal__text { display: grid; gap: 1px; min-width: 0; flex: 1; }
-.mvb-pal__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
-.mvb-pal__note { font-size: 13.5px; color: var(--mvb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.mvb-pal__cat { font-size: 12.5px; color: var(--mvb-ink-3); white-space: nowrap; }
-
-.mvb-pal__empty { padding: 18px; color: var(--mvb-ink-3); font-size: 14px; }
-
-.mvb-pal__foot {
-  margin: 0;
-  padding: 10px 18px;
-  border-top: 1px solid var(--mvb-orbit);
-  font-size: 12.5px;
-  color: var(--mvb-ink-3);
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.mvb-pal__key {
-  font-family: var(--mvb-sans);
-  font-size: 11px;
-  border: 1px solid var(--mvb-orbit);
-  border-radius: 4px;
-  padding: 1px 6px;
-  background: var(--mvb-deck-2);
-  color: var(--mvb-ink-2);
-}
-
-/* ---------- footer ---------- */
-
-.mvb-foot { border-top: 1px solid var(--mvb-orbit); margin-top: clamp(56px, 8vw, 96px); background: var(--mvb-deck-2); }
-
-.mvb-foot__in { padding: clamp(36px, 5vw, 56px) var(--mvb-margin) clamp(24px, 3vw, 36px); max-width: var(--mvb-bench); margin-inline: auto; }
-
-.mvb-foot__top {
-  display: grid;
-  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
-  gap: clamp(20px, 4vw, 56px);
-  align-items: start;
-}
-
-.mvb-foot__brand { display: grid; gap: 10px; }
-
-.mvb-foot__mark { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--mvb-ink); }
-.mvb-foot__mark img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px var(--mvb-orbit); }
-
-.mvb-foot__tag { font-size: 14px; color: var(--mvb-ink-2); max-width: 38ch; text-wrap: pretty; }
-
-.mvb-foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px clamp(20px, 4vw, 40px); }
-.mvb-foot__nav h4 { font-size: 12px; font-weight: 700; color: var(--mvb-ink-3); text-transform: none; letter-spacing: 0; margin: 0 0 8px; }
-.mvb-foot__nav ul { display: grid; gap: 6px; }
-.mvb-foot__nav a { color: var(--mvb-ink-2); text-decoration: none; font-size: 14.5px; }
-.mvb-foot__nav a:hover { color: var(--mvb-comet); }
-
-.mvb-foot__bottom {
-  margin-top: clamp(24px, 4vw, 36px);
-  padding-top: 18px;
-  border-top: 1px solid var(--mvb-orbit);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px clamp(14px, 3vw, 28px);
-  align-items: center;
-}
-.mvb-foot__legal { font-size: 13.5px; color: var(--mvb-ink-3); display: flex; align-items: center; gap: 7px; }
-.mvb-foot__count { font-variant-numeric: tabular-nums; }
-.mvb-foot__count:empty { display: none; }
-
-/* version chip in the footer; turns into an update button when npm has a newer one */
-.mvb-version {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 10px;
-  min-height: 28px;
-  font: inherit;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-  color: var(--mvb-ink-3);
-  background: transparent;
-  border: 1px solid var(--mvb-orbit);
-  border-radius: 999px;
-  cursor: pointer;
-  transition: color var(--mvb-t) var(--mvb-ease), border-color var(--mvb-t) var(--mvb-ease), background var(--mvb-t) var(--mvb-ease);
-}
-.mvb-version:hover { color: var(--mvb-ink); border-color: var(--mvb-orbit-hard); }
-.mvb-version:focus-visible { outline: 2px solid var(--mvb-comet); outline-offset: 2px; }
-.mvb-version--new { color: var(--mvb-comet); border-color: var(--mvb-comet); background: var(--mvb-nebula); font-weight: 600; }
-.mvb-version--new:hover { color: var(--mvb-on-comet); background: var(--mvb-comet); }
-.mvb-version .mvb-ico { width: 15px; height: 15px; }
-
-@media (max-width: 720px) {
-  .mvb-foot__top { grid-template-columns: 1fr; }
-  .mvb-foot__nav { grid-template-columns: repeat(2, 1fr); }
-}
-
-/* ---------- toast ---------- */
-
-.mvb-toast {
-  position: fixed;
-  left: 50%;
-  bottom: 24px;
-  transform: translate(-50%, 12px);
-  padding: 10px 16px;
-  background: var(--mvb-ink);
-  color: var(--mvb-void);
-  border-radius: var(--mvb-r1);
-  font-size: 14px;
-  font-weight: 600;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--mvb-t) ease, transform var(--mvb-t) ease;
-  z-index: 90;
-}
-
-.mvb-toast.mvb-on { opacity: 1; transform: translate(-50%, 0); }
-
-/* ---------- responsive ---------- */
-
-@media (max-width: 960px) {
-  .mvb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .mvb-hero__in { grid-template-columns: minmax(0, 1fr); }
-  .mvb-hero__orbit { display: none; }
-  .mvb-bench { grid-template-columns: minmax(0, 1fr); }
-}
-
-@media (max-width: 720px) {
-  .mvb-nav { display: none; }
-  .mvb-bar__menu { display: inline-flex; }
-  .mvb-bar__end { margin-inline-start: auto; }
-  .mvb-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
-  .mvb-card { padding: 16px; }
-  .mvb-card__note { min-height: 0; }
-  .mvb-filter__in { height: 48px; }
-  .mvb-btn { min-height: 44px; }
-  .mvb-chip { min-height: 44px; }
-  .mvb-stage { text-align: start; justify-items: stretch; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}