mevebu 1.2.0 → 1.4.0

package/mevebu/app/tailwind.src.css

@@ -1,162 +1,201 @@
-/* mevebu styles, authored in Tailwind CSS v4.
+/* mevebu styles.
 
-   Owner decision, recorded in AGENTS.md section 3: the repo writes its styles with
-   Tailwind and builds one stylesheet that ships inside mevebu/. Nothing loads from a
-   CDN, so the app stays offline and makes no third-party request.
+   Everything you see is a Tailwind utility written where the element is built:
+   either in mevebu/app/mevebu.js for the shell, in mevebu/libs/js/core.js for the
+   controls every tool shares, or in a tool file for a one-off. This file holds
+   only what a utility cannot express: the tokens, the type scale, and four
+   element level rules (see "base" below). There is no component layer and no
+   class of our own, so a control is styled in exactly one place in the markup.
 
    Source of truth: this file.
    Built output:    mevebu/app/tailwind.css   (committed, never edit by hand)
    Rebuild:         npm run css
+   Pinned values:   DESIGN.md section 3, so this file and the doc never disagree.
 
-   Component classes keep the mvb- prefix and the exact names the tools already pass,
-   so no tool file has to know how the design system is implemented. Every token lives
-   in the :root blocks below, so no rule hardcodes a colour. Raw Tailwind utilities are
-   welcome for one-off layout inside a single tool.
-
-   The five things this file is opinionated about:
-   1. One place for actions. A tool's buttons sit on a card edge, never floating mid column.
-   2. One spacing rhythm. 4px base, 16px inside a group, 24px between groups.
-   3. Phone first. Two columns arrive at 60rem, never before.
-   4. Dark mode is a real theme, not the light theme inverted.
-   5. You type into a raised surface and read results on a recessed one. */
+   The four rules this design is opinionated about:
+   1. One control height. Every button, field, select, chip and switch is
+      --ctl tall, so a row of them lines up on the pixel.
+   2. Six text sizes and three display sizes. Nothing in between.
+   3. Green is the only accent, and it carries exactly one meaning: the thing to
+      press next. Everything else is a surface, a line or ink.
+   4. Results are never the same surface as inputs. You type on deck, you read on
+      deck-2. */
 
 @import "tailwindcss" source(none);
 
-@source "./index.html";
-@source "./app";
-@source "./libs/js";
+/* Paths are relative to this file, and every class in the app lives in one of
+   these three places. Nothing scans a file that is not listed here. */
+@source "../index.html";
+@source "./";
+@source "../libs/js";
 
 /* The app switches theme with <html data-theme>, so dark: follows that attribute. */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
-/* ---------- tokens ---------- */
+/* ---------- tokens ----------
+   Three scales, one meaning each. Nothing below this block hardcodes a value. */
 
+/* Light is the same jade seen in daylight: white deck, ink text, the mark still there. */
 :root {
-  --mvb-void: #eef1f7;
-  --mvb-deck: #ffffff;
-  --mvb-deck-2: #f1f4fa;
-  --mvb-ink: #151d2e;
-  --mvb-ink-2: #4b5871;
-  --mvb-ink-3: #69748c;
-  --mvb-orbit: #dfe4ef;
-  --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-track: #c2cbdf;
-  --mvb-scrim: rgb(6 10 24 / 0.5);
-
-  --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;
+  --void: #eef1ed;
+  --deck: #ffffff;
+  --deck-2: #f2f5f1;
+  --ink: #101a15;
+  --ink-2: #46574d;
+  --ink-3: #5c6d61;
+  --orbit: #dce2dc;
+  --orbit-hard: #bfcac1;
+  --jade: #0f6b4a;
+  --jade-deep: #0a5138;
+  --on-jade: #ffffff;
+  --jade-soft: #e0f0e7;
+  --danger: #b0231d;
+  --star: #b37700;
+  --track: #bfcac1;
+  --scrim: rgb(8 14 11 / 0.5);
+  --shadow: 0 18px 44px -18px rgb(9 22 15 / 0.35);
+
+  /* Line tints for the diff tool. Derived here, so the dark theme gets its own
+     by re-declaring --jade, --danger and --deck, with no second rule. */
+  --add: color-mix(in srgb, var(--jade) 14%, var(--deck));
+  --del: color-mix(in srgb, var(--danger) 12%, var(--deck));
+
+  --r1: 10px;
+  --r2: 16px;
+  --r3: 24px;
+
+  --margin: clamp(20px, 5vw, 44px);
+  --gutter: clamp(14px, 2vw, 24px);
+  --bench: 1120px;
+  --bar: 60px;
+
+  /* One control height for the whole app, raised to 44px on a phone at the
+     bottom of this file, so nothing repeats the number. */
+  --ctl: 40px;
+  --card-pad: clamp(20px, 3vw, 32px);
+  --band-pad: clamp(12px, 2vw, 16px);
+
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+  --t: 150ms;
+  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
 
   /* native controls and the select caret follow the theme through these */
-  --mvb-caret: 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>");
+  --caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6d61' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
   color-scheme: light;
 }
 
 :root[data-theme="dark"] {
-  --mvb-void: #05080f;
-  --mvb-deck: #0e1526;
-  --mvb-deck-2: #16203a;
-  --mvb-ink: #e9eefb;
-  --mvb-ink-2: #aeb9d2;
-  --mvb-ink-3: #8b97b3;
-  --mvb-orbit: #24324f;
-  --mvb-orbit-hard: #35476f;
-  --mvb-comet: #5f8bff;
-  --mvb-comet-deep: #7ba1ff;
-  --mvb-on-comet: #060b18;
-  --mvb-nebula: #131e3c;
-  --mvb-aurora: #4ad69c;
-  --mvb-danger: #ff8a80;
-  --mvb-star: #ffcf4d;
-  --mvb-track: #35476f;
-  --mvb-scrim: rgb(2 4 10 / 0.68);
-  --mvb-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b97b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+  --void: #060d0a;
+  --deck: #0c1610;
+  --deck-2: #122019;
+  --ink: #e7f0ea;
+  --ink-2: #a7bbae;
+  --ink-3: #85978a;
+  --orbit: #1d2c23;
+  --orbit-hard: #2b4033;
+  --jade: #4ad69a;
+  --jade-deep: #6ee6b0;
+  --on-jade: #04120b;
+  --jade-soft: #10291f;
+  --danger: #ff8a80;
+  --star: #ffcf4d;
+  --track: #2b4033;
+  --scrim: rgb(2 6 4 / 0.68);
+  --shadow: 0 22px 50px -20px rgb(0 0 0 / 0.7);
+  --caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385978a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
   color-scheme: dark;
 }
 
-/* The tokens above become Tailwind utilities: bg-deck, text-ink-2, border-orbit,
-   rounded-r2, ring-nebula. `inline` keeps them as var() references, so every utility
-   follows the theme switch without a second class. */
+/* A finger needs 44px. One override, not twelve. */
+@media (max-width: 45rem) {
+  :root { --ctl: 44px; }
+}
+
+/* The tokens above become utilities: bg-deck, text-ink-2, border-orbit, rounded-r2,
+   ring-jade-soft. `inline` keeps them as var() references, so every utility follows
+   the theme switch without a second class. */
 @theme inline {
-  --color-void: var(--mvb-void);
-  --color-deck: var(--mvb-deck);
-  --color-deck-2: var(--mvb-deck-2);
-  --color-ink: var(--mvb-ink);
-  --color-ink-2: var(--mvb-ink-2);
-  --color-ink-3: var(--mvb-ink-3);
-  --color-orbit: var(--mvb-orbit);
-  --color-orbit-hard: var(--mvb-orbit-hard);
-  --color-comet: var(--mvb-comet);
-  --color-comet-deep: var(--mvb-comet-deep);
-  --color-on-comet: var(--mvb-on-comet);
-  --color-nebula: var(--mvb-nebula);
-  --color-aurora: var(--mvb-aurora);
-  --color-danger: var(--mvb-danger);
-  --color-star: var(--mvb-star);
+  --color-void: var(--void);
+  --color-deck: var(--deck);
+  --color-deck-2: var(--deck-2);
+  --color-ink: var(--ink);
+  --color-ink-2: var(--ink-2);
+  --color-ink-3: var(--ink-3);
+  --color-orbit: var(--orbit);
+  --color-orbit-hard: var(--orbit-hard);
+  --color-jade: var(--jade);
+  --color-jade-deep: var(--jade-deep);
+  --color-on-jade: var(--on-jade);
+  --color-jade-soft: var(--jade-soft);
+  --color-danger: var(--danger);
+  --color-star: var(--star);
+  --color-track: var(--track);
+
+  --radius-r1: var(--r1);
+  --radius-r2: var(--r2);
+  --radius-r3: var(--r3);
+
+  --font-sans: var(--sans);
+  --font-mono: var(--mono);
+}
 
-  --radius-r1: var(--mvb-r1);
-  --radius-r2: var(--mvb-r2);
-  --radius-r3: var(--mvb-r3);
+/* The type scale. Six text sizes, three display sizes, four weights. A size that
+   is not on this list does not exist in the product. */
+@theme {
+  --text-2xs: 13px;
+  --text-2xs--line-height: 1.45;
+  --text-sm: 14px;
+  --text-sm--line-height: 1.5;
+  --text-base: 16px;
+  --text-base--line-height: 1.55;
+  --text-md: 17px;
+  --text-md--line-height: 1.5;
+  --text-lg: 20px;
+  --text-lg--line-height: 1.35;
+  --text-xl: 22px;
+  --text-xl--line-height: 1.3;
+  --text-title: clamp(26px, 4vw, 36px);
+  --text-title--line-height: 1.1;
+  --text-lead: clamp(28px, 5vw, 44px);
+  --text-lead--line-height: 1.06;
+  --text-hero: clamp(34px, 6vw, 58px);
+  --text-hero--line-height: 1.03;
+  /* One oversized glyph size, for a single character that fills a shape
+     (the coin face). Not for text. */
+  --text-display: 44px;
+  --text-display--line-height: 1;
+
+  --animate-toss: toss 450ms ease;
+}
 
-  --font-sans: var(--mvb-sans);
-  --font-mono: var(--mvb-mono);
+@keyframes toss {
+  0% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.12) rotate(180deg); }
+  100% { transform: scale(1) rotate(360deg); }
 }
 
-/* ---------- base ---------- */
+/* ---------- base ----------
+   Four element rules, and no more. Preflight already resets type, lists, controls
+   and media, so everything here is a decision preflight cannot make. */
 
 @layer base {
   html {
     -webkit-text-size-adjust: 100%;
   }
 
-  body {
-    margin: 0;
-    min-height: 100dvh;
-    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, h4, h5, h6, p, ul, ol, pre, figure { margin: 0; }
-  ul, ol { list-style: none; padding: 0; }
-  button, input, textarea, select { font: inherit; color: inherit; }
-  a { color: inherit; }
-  img, svg, canvas, video { display: block; max-width: 100%; }
-
   /* The card head and foot are rendered with a hidden attribute rather than removed,
-     and their own display rule would otherwise win over the browser default. */
+     and a flex utility would otherwise win over the browser default. */
   [hidden] { display: none !important; }
 
   :focus-visible {
-    outline: 2px solid var(--mvb-comet);
+    outline: 2px solid var(--jade);
     outline-offset: 2px;
     border-radius: 6px;
   }
 
-  ::selection { background: var(--mvb-nebula); }
+  ::selection { background: var(--jade-soft); }
 
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
@@ -166,1007 +205,3 @@
     }
   }
 }
-
-@layer components {
-  /* ---------- icons ---------- */
-
-  .mvb-ico { @apply block size-[18px] flex-none; }
-  .mvb-ico--lg { @apply size-[26px]; }
-  .mvb-ico--sm { @apply size-[15px]; }
-
-  /* ---------- masthead ---------- */
-
-  .mvb-bar {
-    @apply sticky top-0 z-30 border-b border-orbit;
-    background: color-mix(in srgb, var(--mvb-deck) 88%, transparent);
-    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);
-    @apply flex items-center gap-[clamp(14px,3vw,32px)];
-  }
-
-  .mvb-mark {
-    @apply inline-flex flex-none items-center gap-2.5 text-lg font-bold tracking-[-0.01em] text-ink no-underline;
-  }
-
-  .mvb-mark img {
-    @apply block size-[30px] rounded-[9px];
-    box-shadow: 0 0 0 1px var(--mvb-orbit);
-  }
-
-  .mvb-nav {
-    @apply ms-auto flex flex-none gap-1 rounded-r2 border border-orbit bg-deck-2 p-1;
-  }
-
-  .mvb-nav__link {
-    @apply whitespace-nowrap rounded-lg px-3 py-[7px] text-[0.90625rem] font-semibold text-ink-2 no-underline transition-colors duration-150;
-  }
-
-  .mvb-nav__link:hover {
-    @apply bg-ink/6 text-ink;
-  }
-
-  .mvb-nav__link.mvb-on {
-    @apply bg-deck text-ink;
-    box-shadow: 0 0 0 1px var(--mvb-orbit);
-  }
-
-  .mvb-bar__end { @apply flex items-center gap-0.5; }
-
-  .mvb-icobtn {
-    @apply inline-flex size-10 cursor-pointer items-center justify-center rounded-r1 border border-transparent bg-transparent text-ink-2 transition-colors duration-150;
-  }
-
-  .mvb-icobtn:hover { @apply bg-deck-2 text-ink; }
-  .mvb-icobtn:focus-visible { @apply border-comet; }
-
-  .mvb-bar__menu { @apply hidden; }
-
-  /* search button that opens the palette */
-
-  .mvb-searchbtn {
-    @apply me-1 inline-flex h-10 min-w-[180px] cursor-pointer items-center gap-2 rounded-r1 border border-orbit bg-deck-2 ps-3 pe-2.5 text-sm font-medium text-ink-2 transition-colors duration-150;
-  }
-
-  .mvb-searchbtn:hover { @apply border-orbit-hard bg-deck text-ink; }
-  .mvb-searchbtn:focus-visible { @apply border-comet; }
-  .mvb-searchbtn .mvb-ico { @apply size-[15px] text-ink-3; }
-
-  .mvb-searchbtn__txt { @apply flex-1 text-start text-sm; }
-
-  /* nav sheet on a phone */
-
-  .mvb-sheet {
-    @apply grid border-t border-orbit bg-deck px-[var(--mvb-margin)] pt-1.5 pb-3.5;
-  }
-
-  .mvb-sheet__nav { @apply grid; }
-
-  .mvb-sheet__link {
-    @apply flex items-center gap-2 border-b border-orbit bg-transparent py-[13px] text-start text-[1.0625rem] font-medium text-ink no-underline;
-  }
-
-  .mvb-sheet__link:last-child { @apply border-b-0; }
-  .mvb-sheet__link .mvb-ico { @apply text-ink-3; }
-  .mvb-sheet__action { @apply text-comet; }
-
-  /* ---------- frame ---------- */
-
-  .mvb-main { @apply flex-1 outline-none; }
-
-  .mvb-page { @apply px-[var(--mvb-margin)]; }
-
-  .mvb-page--tool,
-  .mvb-page--narrow {
-    max-width: var(--mvb-bench);
-    @apply mx-auto;
-  }
-
-  .mvb-link { @apply text-comet underline-offset-[3px]; }
-
-  /* One key chip for the whole app: the search button, the filter, the palette
-     footer and the help modal all point at the same key. It sits on a raised and a
-     recessed surface in turn, so it carries its own border instead of a fill. */
-  .mvb-kbd {
-    @apply rounded-[5px] border border-orbit-hard px-[7px] py-px font-sans text-[0.8125rem] leading-[1.45] text-ink-3;
-  }
-
-  /* hero, only on the home page */
-
-  .mvb-hero {
-    @apply relative border-b border-orbit;
-    overflow: clip;
-    background:
-      radial-gradient(560px 300px at 12% -40px, var(--mvb-nebula), transparent 70%),
-      var(--mvb-deck);
-  }
-
-  .mvb-hero__in {
-    max-width: var(--mvb-bench);
-    @apply mx-auto grid items-center gap-[clamp(24px,5vw,72px)] px-[var(--mvb-margin)] pt-[clamp(48px,8vw,104px)] pb-[clamp(40px,6vw,80px)];
-    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
-  }
-
-  .mvb-hero__title {
-    @apply text-balance text-[clamp(34px,6vw,60px)] font-bold leading-[1.02] tracking-[-0.03em];
-  }
-
-  .mvb-hero__cta { @apply mt-6 flex flex-wrap gap-2.5; }
-
-  .mvb-hero__orbit { @apply w-[min(300px,70vw)] justify-self-center; }
-  .mvb-hero__orbit img { @apply block h-auto w-full rounded-r3; }
-
-  /* index sections */
-
-  .mvb-section { @apply pt-[clamp(32px,5vw,60px)]; }
-
-  .mvb-section__head { @apply mb-4 flex items-baseline gap-3; }
-
-  .mvb-section__title {
-    @apply flex items-center gap-2.5 text-[clamp(21px,3vw,27px)] font-bold tracking-[-0.02em];
-  }
-
-  .mvb-section__title .mvb-ico { @apply size-[22px] text-comet; }
-
-  .mvb-section__count {
-    @apply ms-1.5 rounded-full bg-deck-2 px-2 py-px text-[0.8125rem] font-semibold tabular-nums text-ink-3;
-  }
-
-  .mvb-section__more {
-    @apply ms-auto whitespace-nowrap text-[0.90625rem] font-semibold text-comet no-underline;
-  }
-
-  .mvb-section__more:hover { @apply underline; }
-
-  /* ---------- column system ----------
-     Every grid climbs through three states, so a tablet gets a layout of its own
-     instead of a stretched stack or four crammed columns. */
-
-  .mvb-cols { @apply grid gap-[var(--mvb-gutter)]; }
-  .mvb-cols--2 { @apply grid-cols-1 sm:grid-cols-2; }
-  .mvb-cols--3 { @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3; }
-  .mvb-cols--4 { @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-4; }
-  .mvb-cols--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
-  .mvb-cols--side { @apply grid-cols-1 min-[60rem]:grid-cols-[minmax(0,20rem)_minmax(0,1fr)]; }
-
-  .mvb-row { @apply flex min-w-0 flex-wrap items-center gap-2; }
-  .mvb-col { @apply min-w-0; }
-  .mvb-col--grow { @apply flex-1; }
-  .mvb-col--shrink { @apply flex-none; }
-
-  .mvb-grid { @apply grid grid-cols-1 gap-[var(--mvb-gutter)] sm:grid-cols-2 lg:grid-cols-3; }
-
-  .mvb-card {
-    @apply relative grid gap-1.5 rounded-r2 border border-orbit bg-deck p-5 no-underline transition-colors duration-150;
-  }
-
-  .mvb-card:hover { @apply border-comet; }
-
-  .mvb-card__top { @apply flex items-center gap-3; }
-
-  .mvb-card__sigil {
-    @apply grid size-[42px] flex-none place-items-center rounded-[13px] bg-nebula text-comet;
-  }
-
-  .mvb-card__sigil .mvb-ico { @apply size-[21px]; }
-
-  .mvb-card__name { @apply text-[1.0625rem] font-semibold tracking-[-0.01em]; }
-
-  .mvb-card__note { @apply min-h-11 text-pretty text-[0.90625rem] text-ink-2; }
-
-  .mvb-card__foot {
-    @apply mt-1.5 flex items-center gap-2 text-[0.84375rem] font-semibold text-ink-3;
-  }
-
-  /* ---------- tool list (category and favorites pages) ---------- */
-
-  .mvb-list {
-    @apply grid overflow-clip rounded-r2 border border-orbit bg-deck;
-  }
-
-  .mvb-listrow {
-    @apply flex items-center border-b border-orbit;
-  }
-
-  .mvb-listrow:last-child { @apply border-b-0; }
-
-  .mvb-listrow__link {
-    @apply grid min-w-0 flex-1 gap-px py-[13px] pe-1.5 ps-[18px] no-underline;
-  }
-
-  .mvb-listrow__link:hover .mvb-listrow__name { @apply text-comet; }
-
-  .mvb-listrow__name { @apply text-[1.03125rem] font-semibold tracking-[-0.01em]; }
-  .mvb-listrow__note { @apply text-sm text-ink-2; }
-
-  .mvb-star {
-    @apply me-2 inline-flex size-11 flex-none cursor-pointer items-center justify-center rounded-r1 border-0 bg-transparent text-orbit-hard transition-[color,transform] duration-150;
-  }
-
-  .mvb-star:hover { @apply text-ink-2; }
-  .mvb-star.mvb-on { @apply text-star; }
-  .mvb-star.mvb-on .mvb-ico { fill: var(--mvb-star); }
-  .mvb-star:active { @apply scale-[0.88]; }
-
-  /* ---------- filter ---------- */
-
-  .mvb-filter {
-    @apply mt-[clamp(22px,4vw,36px)] flex items-center gap-2.5 rounded-r2 border border-orbit bg-deck px-3.5 transition-colors duration-150;
-  }
-
-  .mvb-filter:focus-within { @apply border-comet; }
-
-  .mvb-filter__icon { @apply flex text-ink-3; }
-
-  .mvb-filter__in {
-    @apply min-w-0 flex-1 border-0 bg-transparent text-[1.0625rem];
-    height: 52px;
-  }
-
-  .mvb-filter__in:focus { @apply outline-none; }
-  .mvb-filter__in::placeholder { @apply text-ink-3; }
-
-  .mvb-filter__meta {
-    @apply mt-2.5 flex min-h-[22px] items-baseline gap-3.5 text-sm text-ink-3;
-  }
-
-  /* ---------- page headings ---------- */
-
-  .mvb-lead {
-    @apply mt-[clamp(28px,5vw,56px)] max-w-[20ch] text-balance text-[clamp(28px,5vw,44px)] font-bold leading-[1.06] tracking-[-0.025em];
-  }
-
-  .mvb-lede { @apply mt-3 max-w-[60ch] text-pretty text-[1.0625rem] text-ink-2; }
-
-  /* ---------- tool page ---------- */
-
-  .mvb-head { @apply my-[clamp(24px,4vw,44px)] mb-[clamp(22px,3vw,32px)]; }
-
-  .mvb-head__back {
-    @apply mb-4 inline-flex items-center gap-[7px] text-[0.9375rem] font-medium text-ink-2 no-underline;
-  }
-
-  .mvb-head__back:hover { @apply text-ink; }
-
-  .mvb-head__row { @apply flex items-start gap-2; }
-
-  .mvb-head__title {
-    @apply flex-1 text-balance text-[clamp(26px,4vw,36px)] font-bold leading-[1.1] tracking-[-0.025em];
-  }
-
-  .mvb-head__actions { @apply flex items-center gap-0.5 pt-1; }
-
-  .mvb-head__about { @apply mt-2 max-w-[58ch] text-pretty text-[1.0625rem] text-ink-2; }
-
-  .mvb-helpbtn {
-    @apply inline-flex size-[38px] cursor-pointer items-center justify-center rounded-full border border-orbit bg-deck-2 font-sans text-base font-bold text-ink-2 transition-colors duration-150;
-  }
-
-  .mvb-helpbtn:hover { @apply border-orbit-hard bg-deck text-ink; }
-  .mvb-helpbtn:focus-visible { @apply border-comet; }
-
-  .mvb-more { @apply mt-[clamp(40px,6vw,72px)]; }
-  .mvb-more__title { @apply mb-2.5 text-[0.9375rem] font-bold text-ink-3; }
-
-  /* ---------- tool card ----------
-     Head and foot are the only places a tool may put an action row, so the buttons
-     always land on a card edge. The body is the working surface. */
-
-  .mvb-toolcard {
-    @apply flex flex-col overflow-clip rounded-r2 border border-orbit bg-deck;
-  }
-
-  .mvb-toolcard__head {
-    @apply flex flex-wrap items-center gap-2 border-b border-orbit bg-deck-2 px-[clamp(20px,3vw,32px)] py-[clamp(12px,2vw,16px)];
-  }
-
-  .mvb-toolcard__body {
-    @apply flex-1 p-[clamp(20px,3vw,32px)];
-  }
-
-  .mvb-toolcard__foot {
-    @apply flex flex-wrap items-center justify-end gap-2 border-t border-orbit bg-deck-2 px-[clamp(20px,3vw,32px)] py-[clamp(12px,2vw,16px)];
-  }
-
-  /* ---------- bench ----------
-     One column until there is real room for two, so the phone reads top to bottom
-     and a tablet is not a stretched stack. */
-
-  .mvb-bench { @apply grid items-start gap-5; }
-
-  .mvb-bench__side,
-  .mvb-bench__main { @apply min-w-0; }
-
-  @media (min-width: 60rem) {
-    .mvb-bench {
-      @apply gap-6;
-      grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
-    }
-  }
-
-  .mvb-stage {
-    @apply mx-auto grid max-w-[560px] justify-items-center gap-4 text-center;
-  }
-
-  .mvb-stack { @apply grid content-start gap-4; }
-
-  /* ---------- field ---------- */
-
-  .mvb-field { @apply grid min-w-0 content-start gap-1.5; }
-  .mvb-field__label { @apply text-[0.875rem] font-semibold text-ink-2; }
-  .mvb-field__hint { @apply text-[0.8125rem] text-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 { @apply text-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 { @apply text-aurora; }
-
-  /* ---------- inputs ----------
-     You type into a raised surface. Results live in .mvb-out on a recessed one. */
-
-  .mvb-in {
-    @apply w-full min-w-0 rounded-r1 border border-orbit bg-deck px-3 py-2.5 text-ink transition-[border-color,box-shadow] duration-150;
-  }
-
-  .mvb-in:hover { @apply border-orbit-hard; }
-  .mvb-in:focus { @apply border-comet outline-none ring-3 ring-nebula; }
-  .mvb-in::placeholder { @apply text-ink-3; }
-
-  .mvb-in[disabled],
-  .mvb-in[readonly] { @apply cursor-default bg-deck-2 text-ink-3; }
-
-  .mvb-in[disabled] { @apply cursor-not-allowed opacity-70; }
-
-  .mvb-in--area {
-    @apply min-h-24 resize-y py-2.5 font-mono text-[0.875rem] leading-normal;
-  }
-
-  .mvb-in--num { width: 96px; }
-  .mvb-in--mono { @apply font-mono text-[0.875rem]; }
-
-  .mvb-in--select {
-    @apply cursor-pointer py-2.5 pe-9;
-    appearance: none;
-    -webkit-appearance: none;
-    background-image: var(--mvb-caret);
-    background-repeat: no-repeat;
-    background-position: right 12px center;
-    background-size: 14px;
-  }
-
-  .mvb-in--file { @apply p-1.5; }
-
-  .mvb-in--file::file-selector-button {
-    @apply me-2.5 cursor-pointer rounded-r1 border border-orbit-hard bg-deck-2 px-2.5 py-1 text-[0.8125rem] font-semibold text-ink;
-  }
-
-  .mvb-check {
-    @apply inline-flex cursor-pointer items-center gap-2 rounded-r1 border border-orbit bg-deck py-2 ps-2.5 pe-3 text-[0.9375rem] transition-[border-color,background-color] duration-150;
-  }
-
-  .mvb-check:has(.mvb-check__box:checked) { @apply border-comet bg-nebula; }
-
-  .mvb-check__box {
-    @apply m-0 size-4;
-    accent-color: var(--mvb-comet);
-  }
-
-  /* switch */
-
-  .mvb-switch {
-    @apply inline-flex cursor-pointer select-none items-center gap-2.5 text-[0.9375rem];
-  }
-
-  .mvb-switch__box { @apply pointer-events-none absolute opacity-0; }
-
-  .mvb-switch__track {
-    @apply relative h-[22px] w-[38px] rounded-full transition-colors duration-150;
-    background: var(--mvb-track);
-  }
-
-  .mvb-switch__thumb {
-    @apply absolute top-0.5 left-0.5 size-[18px] rounded-full bg-deck transition-transform duration-150;
-    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
-  }
-
-  .mvb-switch__box:checked + .mvb-switch__track { background: var(--mvb-comet); }
-  .mvb-switch__box:checked + .mvb-switch__track .mvb-switch__thumb { @apply translate-x-4; }
-  .mvb-switch__box:focus-visible + .mvb-switch__track { box-shadow: 0 0 0 3px var(--mvb-nebula); }
-
-  .mvb-range {
-    @apply w-full;
-    accent-color: var(--mvb-comet);
-  }
-
-  .mvb-pick {
-    @apply h-10 w-[52px] flex-none cursor-pointer rounded-r1 border border-orbit bg-deck p-0.5;
-  }
-
-  .mvb-pick:hover { @apply border-orbit-hard; }
-  .mvb-pick:focus { @apply border-comet outline-none ring-3 ring-nebula; }
-
-  /* chips */
-
-  .mvb-chips { @apply flex flex-wrap gap-1.5; }
-
-  .mvb-chip {
-    @apply min-h-[38px] cursor-pointer rounded-r1 border border-orbit bg-deck px-[13px] text-sm font-medium text-ink-2 transition-colors duration-150;
-  }
-
-  .mvb-chip:hover { @apply border-orbit-hard text-ink; }
-  .mvb-chip.mvb-on { @apply border-comet bg-nebula text-ink; }
-
-  /* ---------- actions ----------
-     One row, one alignment, one gap. Third position is not an option: a tool's
-     actions belong on a card edge. */
-
-  .mvb-actions { @apply flex flex-wrap items-center justify-end gap-2; }
-
-  .mvb-toolcard__head .mvb-actions,
-  .mvb-toolcard__foot .mvb-actions { @apply w-full; }
-
-  /* An action row that ends a column keeps a small top gap; a card edge owns its own
-     padding instead. */
-  .mvb-stack > .mvb-actions { @apply mt-1; }
-
-  /* buttons */
-
-  .mvb-btn {
-    @apply inline-flex min-h-10 cursor-pointer items-center justify-center gap-[7px] rounded-r1 border border-transparent px-4 text-[0.9375rem] font-semibold no-underline transition-[background-color,border-color,color,transform] duration-150;
-  }
-
-  .mvb-btn:active { @apply scale-[0.97]; }
-
-  .mvb-btn--fill { @apply border-comet bg-comet text-on-comet; }
-  .mvb-btn--fill:hover { @apply border-comet-deep bg-comet-deep; }
-
-  .mvb-btn--plain { @apply border-orbit bg-deck text-ink; }
-  .mvb-btn--plain:hover { @apply border-orbit-hard; }
-
-  .mvb-btn--quiet { @apply bg-transparent px-2 text-ink-2; }
-  .mvb-btn--quiet:hover { @apply bg-deck-2 text-ink; }
-
-  .mvb-btn:disabled { @apply cursor-not-allowed opacity-45; }
-
-  /* readouts: the recessed half of the pair, so a result never reads as an input */
-
-  .mvb-out {
-    @apply m-0 max-h-[340px] w-full overflow-auto rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3 font-mono text-[0.875rem] leading-normal;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-
-  textarea.mvb-out { @apply resize-y; }
-
-  /* An empty readout is a waiting slot, not data. Dashed already means "nothing yet"
-     in this system (.mvb-blank, .mvb-drop), so an empty one says the same thing
-     instead of reading as a mysterious grey bar. Only <pre> can be matched safely:
-     a textarea holds its text in a property, so :empty would lie about it. */
-  pre.mvb-out:empty { @apply border-dashed bg-transparent; }
-
-  /* notices. A state is never colour alone: the rule marks it as well. */
-
-  .mvb-note { @apply border-s-[3px] border-transparent ps-2 text-sm text-ink-3; }
-
-  .mvb-note--error {
-    @apply border-s-danger text-danger;
-  }
-
-  .mvb-note--good {
-    @apply border-s-aurora text-aurora;
-  }
-
-  .mvb-blank {
-    @apply grid justify-items-center gap-2.5 rounded-r2 border border-dashed border-orbit-hard bg-deck-2 px-4 py-[clamp(28px,6vw,56px)] text-center text-ink-3;
-  }
-
-  .mvb-blank p { @apply max-w-[34ch]; }
-
-  .mvb-code {
-    @apply overflow-x-auto whitespace-pre-wrap rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3 font-mono text-[0.875rem];
-  }
-
-  :not(pre) > code {
-    @apply rounded-[4px] bg-deck-2 px-[5px] py-px font-mono text-[0.92em];
-  }
-
-  /* about blocks */
-
-  .mvb-about {
-    @apply mt-8 grid max-w-[62ch] gap-2.5 border-t border-orbit pt-6;
-  }
-
-  .mvb-about__title { @apply text-lg font-bold tracking-[-0.01em]; }
-  .mvb-about p { @apply text-pretty text-ink-2; }
-
-  /* ---------- modal ---------- */
-
-  .mvb-veil {
-    @apply fixed inset-0 z-80 grid items-start justify-items-center px-5 pt-[clamp(60px,10vh,120px)] pb-5;
-    background: var(--mvb-scrim);
-    opacity: 0;
-    transition: opacity 180ms ease;
-  }
-
-  .mvb-veil.mvb-open { opacity: 1; }
-  .mvb-veil.mvb-off { opacity: 0; }
-
-  .mvb-modal {
-    @apply w-[min(440px,100%)] rounded-r3 border border-orbit bg-deck p-7 text-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 { @apply mx-auto block size-[88px] rounded-[22px]; }
-
-  .mvb-modal__title { @apply mt-3.5 text-[1.375rem] font-bold tracking-[-0.02em]; }
-  .mvb-modal__body p { @apply mt-2 text-pretty text-[0.96875rem] text-ink-2; }
-  .mvb-modal__actions { @apply mt-5 grid gap-2; }
-
-  /* version readout inside the update modal */
-  .mvb-vers { @apply mt-[18px] overflow-hidden rounded-r2 border border-orbit; }
-  .mvb-vers__row { @apply flex items-center justify-between gap-3 px-4 py-3; }
-  .mvb-vers__row + .mvb-vers__row { @apply border-t border-orbit; }
-  .mvb-vers__label { @apply text-sm text-ink-3; }
-  .mvb-vers__val { @apply font-mono text-[0.9375rem] font-semibold; }
-  .mvb-vers__row--new .mvb-vers__val { @apply text-comet; }
-  .mvb-vers__hint { @apply mt-3.5 text-sm; }
-
-  .mvb-cmd {
-    @apply mt-2.5 flex flex-wrap items-center gap-2 rounded-r2 border border-orbit bg-deck-2 py-2.5 pe-2.5 ps-4;
-  }
-
-  .mvb-cmd__text {
-    @apply min-w-0 flex-1 wrap-anywhere font-mono text-sm;
-  }
-
-  /* ---------- command palette ---------- */
-
-  .mvb-veil--pal { @apply pt-[clamp(60px,12vh,140px)]; }
-
-  .mvb-veil--pal .mvb-modal {
-    @apply w-[min(640px,100%)] overflow-hidden p-0 text-start;
-  }
-
-  .mvb-pal__head {
-    @apply flex items-center gap-3 border-b border-orbit px-[18px] py-4;
-  }
-
-  .mvb-pal__icon { @apply text-ink-3; }
-
-  .mvb-pal__in {
-    @apply h-10 min-w-0 flex-1 border-0 bg-transparent text-[1.0625rem];
-  }
-
-  .mvb-pal__in:focus { @apply outline-none; }
-  .mvb-pal__in::placeholder { @apply text-ink-3; }
-
-  .mvb-pal__count { @apply m-0 px-[18px] pt-2 text-[0.8125rem] text-ink-3; }
-
-  .mvb-pal__list {
-    @apply m-0 mt-1.5 max-h-[min(60vh,360px)] overflow-y-auto px-2 pb-2;
-  }
-
-  .mvb-pal__item {
-    @apply flex w-full cursor-pointer items-center gap-3 rounded-r1 border-0 bg-transparent px-3 py-2.5 text-start text-ink transition-colors duration-150;
-  }
-
-  .mvb-pal__item.mvb-on { @apply bg-nebula; }
-  .mvb-pal__item.mvb-on .mvb-pal__name { @apply text-comet; }
-
-  .mvb-pal__sigil {
-    @apply grid size-8 flex-none place-items-center rounded-lg bg-deck-2 text-comet;
-  }
-
-  .mvb-pal__sigil .mvb-ico { @apply size-4; }
-  .mvb-pal__text { @apply grid min-w-0 flex-1 gap-px; }
-  .mvb-pal__name { @apply text-[0.9375rem] font-semibold tracking-[-0.01em]; }
-  .mvb-pal__note { @apply overflow-hidden text-[0.84375rem] text-ellipsis whitespace-nowrap text-ink-2; }
-  .mvb-pal__cat { @apply whitespace-nowrap text-[0.8125rem] text-ink-3; }
-
-  .mvb-pal__empty { @apply p-[18px] text-sm text-ink-3; }
-
-  .mvb-pal__foot {
-    @apply m-0 flex flex-wrap items-center gap-2.5 border-t border-orbit px-[18px] py-2.5 text-[0.8125rem] text-ink-3;
-  }
-
-  /* ---------- help modal ---------- */
-
-  .mvb-veil--help { @apply pt-[clamp(60px,10vh,120px)]; }
-
-  .mvb-veil--help .mvb-modal {
-    @apply w-[min(560px,100%)] overflow-hidden p-7 text-start;
-  }
-
-  .mvb-help__head { @apply mb-3 flex items-center gap-3.5; }
-
-  .mvb-help__sigil {
-    @apply grid size-11 place-items-center rounded-xl bg-nebula text-comet;
-  }
-
-  .mvb-help__sigil .mvb-ico { @apply size-[22px]; }
-
-  .mvb-help__title { @apply text-xl font-bold tracking-[-0.02em]; }
-  .mvb-help__note { @apply mb-3.5 text-pretty text-[0.96875rem] leading-normal text-ink-2; }
-
-  .mvb-help__steps {
-    @apply m-0 grid list-none gap-2.5 p-0;
-    counter-reset: mvb-step;
-  }
-
-  .mvb-help__steps li {
-    @apply grid grid-cols-[22px_1fr] items-start gap-2 text-[0.90625rem] leading-normal text-ink;
-  }
-
-  .mvb-help__steps li::before {
-    content: counter(mvb-step);
-    counter-increment: mvb-step;
-    @apply grid size-[22px] place-items-center rounded-full bg-nebula text-[0.8125rem] font-bold tabular-nums text-comet;
-  }
-
-  /* ---------- footer ---------- */
-
-  .mvb-foot {
-    @apply mt-[clamp(56px,8vw,96px)] border-t border-orbit bg-deck-2;
-  }
-
-  .mvb-foot__in {
-    max-width: var(--mvb-bench);
-    @apply mx-auto px-[var(--mvb-margin)] pt-[clamp(36px,5vw,56px)] pb-[clamp(24px,3vw,36px)];
-  }
-
-  .mvb-foot__top {
-    @apply grid items-start gap-[clamp(20px,4vw,56px)] min-[60rem]:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)];
-  }
-
-  .mvb-foot__brand { @apply grid gap-2.5; }
-
-  .mvb-foot__mark {
-    @apply inline-flex items-center gap-2.5 text-[1.375rem] font-bold tracking-[-0.02em] text-ink no-underline;
-  }
-
-  .mvb-foot__mark img {
-    @apply size-[34px] rounded-[10px];
-    box-shadow: 0 0 0 1px var(--mvb-orbit);
-  }
-
-  .mvb-foot__tag { @apply max-w-[38ch] text-pretty text-sm text-ink-2; }
-
-  .mvb-foot__nav {
-    @apply grid grid-cols-2 gap-x-[clamp(20px,4vw,40px)] gap-y-1.5;
-  }
-
-  .mvb-foot__nav h4 { @apply m-0 mb-2 text-[0.8125rem] font-bold tracking-normal text-ink-3 normal-case; }
-  .mvb-foot__nav ul { @apply grid gap-1.5; }
-  .mvb-foot__nav a { @apply text-[0.90625rem] text-ink-2 no-underline; }
-  .mvb-foot__nav a:hover { @apply text-comet; }
-
-  .mvb-foot__bottom {
-    @apply mt-[clamp(24px,4vw,36px)] flex flex-wrap items-center gap-x-[clamp(14px,3vw,28px)] gap-y-1.5 border-t border-orbit pt-[18px];
-  }
-
-  .mvb-foot__legal { @apply flex items-center gap-[7px] text-[0.84375rem] text-ink-3; }
-  .mvb-foot__count { @apply tabular-nums; }
-  .mvb-foot__count:empty { @apply hidden; }
-
-  /* version chip in the footer; turns into an update button when npm has a newer one */
-  .mvb-version {
-    @apply inline-flex min-h-7 cursor-pointer items-center gap-1.5 rounded-full border border-orbit bg-transparent px-2.5 py-[3px] font-sans text-[0.8125rem] tabular-nums text-ink-3 transition-colors duration-150;
-  }
-
-  .mvb-version:hover { @apply border-orbit-hard text-ink; }
-  .mvb-version:focus-visible { @apply outline-2 outline-comet outline-offset-2; }
-
-  .mvb-version--new {
-    @apply border-comet bg-nebula font-semibold text-comet;
-  }
-
-  .mvb-version--new:hover { @apply bg-comet text-on-comet; }
-
-  .mvb-version .mvb-ico { @apply size-[15px]; }
-
-  /* ---------- toast ---------- */
-
-  .mvb-toast {
-    @apply pointer-events-none fixed bottom-6 left-1/2 z-90 rounded-r1 bg-ink px-4 py-2.5 text-sm font-semibold text-void;
-    transform: translate(-50%, 12px);
-    opacity: 0;
-    transition: opacity 150ms ease, transform 150ms ease;
-  }
-
-  .mvb-toast.mvb-on { opacity: 1; transform: translate(-50%, 0); }
-
-  /* ==========================================================================
-     Objects a tool renders itself
-     ========================================================================== */
-
-  /* ---------- wheel ---------- */
-
-  .mvb-wheel { @apply h-auto w-[min(320px,100%)]; }
-
-  .mvb-wheel__status {
-    @apply text-balance text-xl font-bold tracking-[-0.01em];
-  }
-
-  .mvb-wheel__history {
-    @apply flex max-w-[340px] flex-wrap justify-center gap-1.5;
-  }
-
-  .mvb-wheel__chip {
-    @apply rounded-full border border-orbit bg-deck-2 px-2.5 py-1 text-[0.8125rem] font-semibold;
-  }
-
-  /* ---------- coin ---------- */
-
-  .mvb-coin {
-    @apply grid size-32 select-none place-items-center rounded-full bg-comet text-[44px] font-bold text-on-comet;
-  }
-
-  .mvb-coin.mvb-toss { animation: mvb-toss 450ms ease; }
-
-  @keyframes mvb-toss {
-    0% { transform: scale(1) rotate(0deg); }
-    50% { transform: scale(1.12) rotate(180deg); }
-    100% { transform: scale(1) rotate(360deg); }
-  }
-
-  .mvb-flip__result { @apply text-[1.1875rem] font-bold tracking-[-0.01em]; }
-
-  /* ---------- meter ---------- */
-
-  .mvb-meter { @apply h-2 overflow-hidden rounded-full bg-deck-2; }
-
-  .mvb-meter__fill {
-    @apply h-full w-0 rounded-full transition-[width,background-color] duration-150;
-    background: var(--mvb-orbit-hard);
-  }
-
-  .mvb-meter__fill.mvb-weak { background: var(--mvb-danger); }
-  .mvb-meter__fill.mvb-ok { background: var(--mvb-comet); }
-  .mvb-meter__fill.mvb-strong { background: var(--mvb-aurora); }
-
-  /* ---------- swatch and picker ---------- */
-
-  .mvb-swatch {
-    @apply h-14 rounded-r1 border border-orbit-hard bg-deck-2;
-  }
-
-  /* ---------- case list ---------- */
-
-  .mvb-cases { @apply grid gap-1; }
-
-  .mvb-case {
-    @apply flex w-full cursor-pointer items-baseline justify-between gap-3 rounded-r1 border border-transparent bg-transparent px-3 py-[9px] text-start transition-colors duration-150;
-  }
-
-  .mvb-case:hover { @apply bg-deck-2; }
-  .mvb-case.mvb-on { @apply border-comet bg-nebula; }
-
-  .mvb-case__name { @apply flex-none text-[0.8125rem] font-semibold text-ink-2; }
-  .mvb-case.mvb-on .mvb-case__name { @apply text-ink; }
-  .mvb-case__value { @apply wrap-anywhere text-end font-mono text-sm; }
-
-  /* ---------- dropzone and camera ---------- */
-
-  .mvb-drop {
-    @apply grid cursor-pointer justify-items-center gap-2 rounded-r2 border border-dashed border-orbit-hard px-4 py-7 text-[0.9375rem] text-ink-3 transition-colors duration-150;
-  }
-
-  .mvb-drop:hover,
-  .mvb-drop.mvb-drag { @apply border-comet bg-nebula; }
-
-  .mvb-qrview {
-    @apply w-[min(420px,100%)] rounded-r2 border border-orbit-hard bg-black;
-  }
-
-  .mvb-qrcode {
-    @apply h-auto w-[min(300px,100%)];
-    image-rendering: pixelated;
-  }
-
-  /* ---------- tables ---------- */
-
-  .mvb-scroll { @apply max-h-80 overflow-auto; }
-
-  .mvb-ttable {
-    @apply w-full border-collapse font-mono text-sm;
-  }
-
-  .mvb-ttable th,
-  .mvb-ttable td { @apply wrap-anywhere border-b border-orbit px-2.5 py-2 text-start; }
-
-  .mvb-ttable th { @apply font-sans text-[0.8125rem] font-semibold text-ink-2; }
-
-  .mvb-ttable tbody tr:last-child th,
-  .mvb-ttable tbody tr:last-child td { @apply border-b-0; }
-
-  /* ---------- secrets ---------- */
-
-  .mvb-secret { @apply grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2; }
-
-  /* ---------- stat tiles ---------- */
-
-  .mvb-stats {
-    @apply grid gap-2.5;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  }
-
-  .mvb-stat {
-    @apply grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3;
-  }
-
-  .mvb-stat__v { @apply wrap-anywhere text-[1.375rem] font-bold tracking-[-0.02em] tabular-nums; }
-  .mvb-stat__k { @apply text-[0.8125rem] font-semibold text-ink-3; }
-
-  /* ---------- diff view ---------- */
-
-  .mvb-diff {
-    @apply grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit;
-  }
-
-  .mvb-diff__row {
-    @apply grid bg-deck font-mono text-[0.84375rem];
-    grid-template-columns: 34px minmax(0, 1fr);
-  }
-
-  .mvb-diff__row > span { @apply wrap-anywhere px-2.5 py-[3px] whitespace-pre-wrap; }
-
-  .mvb-diff__sign {
-    @apply border-e border-orbit text-center text-ink-3 select-none;
-  }
-
-  .mvb-diff__row--add { background: color-mix(in srgb, var(--mvb-aurora) 14%, var(--mvb-deck)); }
-  .mvb-diff__row--del { background: color-mix(in srgb, var(--mvb-danger) 12%, var(--mvb-deck)); }
-  .mvb-diff__row--add .mvb-diff__sign { @apply text-aurora; }
-  .mvb-diff__row--del .mvb-diff__sign { @apply text-danger; }
-
-  /* ---------- key/value list ---------- */
-
-  .mvb-kv {
-    @apply grid gap-px overflow-hidden rounded-r1 border border-orbit bg-orbit;
-  }
-
-  .mvb-kv__row {
-    @apply grid gap-3 bg-deck px-3 py-[9px];
-    grid-template-columns: minmax(90px, 34%) minmax(0, 1fr);
-  }
-
-  .mvb-kv__k { @apply wrap-anywhere text-[0.84375rem] font-semibold text-ink-2; }
-  .mvb-kv__v { @apply wrap-anywhere font-mono text-[0.84375rem]; }
-
-  /* ---------- preview pane and highlights ---------- */
-
-  .mvb-pane {
-    @apply min-h-[120px] max-h-[380px] overflow-auto wrap-anywhere rounded-r1 border border-orbit bg-deck-2 px-4 py-3.5 leading-normal;
-  }
-
-  .mvb-pane > :first-child { @apply mt-0; }
-  .mvb-pane > :last-child { @apply mb-0; }
-  .mvb-pane h1, .mvb-pane h2, .mvb-pane h3 { @apply my-4 tracking-[-0.01em]; }
-  .mvb-pane p, .mvb-pane ul, .mvb-pane ol, .mvb-pane pre { @apply mb-2.5; }
-  .mvb-pane ul, .mvb-pane ol { @apply ps-[22px]; }
-  .mvb-pane code { @apply rounded-[5px] bg-deck px-[5px] py-px font-mono text-[0.8125rem]; }
-  .mvb-pane pre { @apply overflow-auto rounded-r1 bg-deck px-3 py-2.5; }
-  .mvb-pane pre code { @apply bg-transparent p-0; }
-  .mvb-pane a { @apply text-comet; }
-  .mvb-pane table { @apply border-collapse; }
-  .mvb-pane th, .mvb-pane td { @apply border border-orbit px-[9px] py-1.5; }
-
-  .mvb-hl { background: color-mix(in srgb, var(--mvb-star) 40%, transparent); @apply rounded-[3px]; }
-  .mvb-hl--on { @apply rounded-[3px] bg-comet text-on-comet; }
-
-  /* ---------- design previews ---------- */
-
-  .mvb-swatches {
-    @apply grid gap-2;
-    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
-  }
-
-  .mvb-swatchcard {
-    @apply grid cursor-pointer gap-1.5 rounded-r1 border border-orbit bg-deck p-2 text-start transition-colors duration-150;
-  }
-
-  .mvb-swatchcard:hover { @apply border-comet; }
-  .mvb-swatchcard__chip { @apply h-[52px] rounded-lg border border-orbit-hard; }
-  .mvb-swatchcard__code { @apply font-mono text-[0.8125rem] text-ink-2; }
-
-  .mvb-preview {
-    @apply grid min-h-40 place-items-center overflow-hidden rounded-r1 border border-orbit bg-deck-2 p-[22px];
-  }
-
-  .mvb-preview__box {
-    @apply grid h-[120px] w-[min(200px,100%)] place-items-center bg-comet text-[0.8125rem] text-on-comet;
-  }
-
-  .mvb-preview__sample {
-    @apply w-full rounded-lg border border-orbit bg-deck px-[18px] py-4;
-  }
-
-  .mvb-slider {
-    @apply grid items-center gap-2.5;
-    grid-template-columns: 88px minmax(0, 1fr) 62px;
-  }
-
-  .mvb-slider__label { @apply text-[0.84375rem] font-semibold text-ink-2; }
-  .mvb-slider__val { @apply text-end font-mono text-[0.8125rem] text-ink-2; }
-
-  /* ---------- narrow states ----------
-     A phone is its own layout, not a narrowed desktop: one column, calmer gaps,
-     full-width actions, and 16px inputs so the browser keyboard does not zoom. */
-
-  @media (max-width: 60rem) {
-    .mvb-toolcard__head,
-    .mvb-toolcard__foot { @apply px-[18px]; }
-    .mvb-toolcard__body { @apply p-[18px]; }
-
-    /* The header is the tightest row in the app: mark, four links, the search pill
-       and two buttons. Drop the search pill first, because the sheet still offers
-       Search and the tools page has its own filter. Only below 45rem, when the
-       links no longer fit either, do they move into the sheet. */
-    .mvb-searchbtn { @apply hidden; }
-  }
-
-  @media (max-width: 45rem) {
-    .mvb-nav { @apply hidden; }
-    .mvb-bar__menu { @apply inline-flex; }
-    .mvb-bar__end { @apply ms-auto; }
-
-    .mvb-hero__in { grid-template-columns: minmax(0, 1fr); }
-    .mvb-hero__orbit { @apply hidden; }
-
-    .mvb-card { @apply p-4; }
-    .mvb-card__note { @apply min-h-0; }
-
-    .mvb-filter__in { height: 48px; }
-
-    .mvb-stage { @apply justify-items-stretch text-start; }
-
-    .mvb-btn { @apply min-h-11; }
-    .mvb-chip { @apply min-h-11; }
-
-    /* The action row keeps the same right alignment as every wider width. Stretching
-       every button to fill the bar instead would wrap a longer label such as
-       "Copy Base64" onto two lines and make the footer taller than the buttons need. */
-    .mvb-toolcard__foot .mvb-actions,
-    .mvb-toolcard__head .mvb-actions { @apply gap-2; }
-
-    .mvb-slider { grid-template-columns: minmax(0, 1fr) 62px; }
-    .mvb-slider__label { @apply col-span-2; }
-
-    /* 16px on every field and readout: below that the browser zooms the page when a
-       field takes focus, and a table cell or a panel can otherwise shrink a control
-       below its own scale. Inline text stays where it is; this is about controls. */
-    .mvb-in,
-    .mvb-out,
-    .mvb-filter__in,
-    select { @apply text-base; }
-
-    /* A colour swatch and a bare icon button are still tap targets. */
-    .mvb-pick { @apply h-11; }
-    .mvb-icobtn { @apply size-11; }
-
-    /* And so are a slider, a checkbox chip and a switch: on a phone they are the
-       control, not a decoration beside a larger one. */
-    .mvb-range { @apply min-h-11; }
-    .mvb-check { @apply min-h-11; }
-    .mvb-switch { @apply min-h-11; }
-  }
-}