mevebu 0.0.0-stage → 0.2.0

package/mevebu/app/mevebu.css

@@ -0,0 +1,1162 @@
+/* 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; }
+
+/* ---------- 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; }
+
+@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;
+  }
+}