@panphora/bevel 0.1.0

package/examples/components/reference/baseline/bevel.css

@@ -0,0 +1,1339 @@
+/*
+ * bevel.css — the bevel UI kit, 0.1.0.
+ * Hand-written, no build. Beveled controls in an editorial page: IBM Plex Sans
+ * body, Newsreader headings, IBM Plex Mono for anything with a digit. Every
+ * component is a semantic BEM class in @layer components, so utilities and
+ * unlayered consumer rules always win with zero !important.
+ *
+ * Two hinges (inherited from mirk-interface):
+ *   1. Components live in @layer components → utilities win.
+ *   2. State serializes into the DOM (native attrs, :has(), inline --bevel-value)
+ *      so document.documentElement.outerHTML round-trips every visible state.
+ *
+ * Fonts are declared by family name only; bevel-fonts.css loads the files.
+ * Without it the fallbacks are Georgia, system-ui and ui-monospace.
+ */
+@layer base, components;
+
+@layer base {
+  *, ::before, ::after { box-sizing: border-box; }
+  button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; }
+  html { -webkit-text-size-adjust: 100%; }
+
+  /* 27 colour tokens, one light-dark() each: cream by day, navy by night (mirk's
+     Pixel Quiet palette), plus the three that draw the bevel, the three that
+     draw a pressed-in control, the two that draw the switch knob and the four
+     that draw the danger button. Every in-between state on the page is a
+     color-mix() of two of these. */
+  :root {
+    color-scheme: light dark;
+
+    --bevel-ground:     light-dark(#FDF8F0, #0B0C13);
+    --bevel-surface:    light-dark(#FFFCF6, #11131E);
+    --bevel-sunk:       light-dark(#F4ECDF, #1A1D2C);
+    --bevel-ink:        light-dark(#2B241B, #ECEAF2);
+    --bevel-ink-2:      light-dark(#4A4033, #C9CDE0);
+    --bevel-muted:      light-dark(#6B5942, #8A90AB);
+    --bevel-faint:      light-dark(#9A8A70, #6A7090);
+    --bevel-line:       light-dark(#E8DCC6, #262B42);
+    --bevel-line-2:     light-dark(#D8C8AF, #353B52);
+    --bevel-brass:      light-dark(#8F6310, #D9A445);
+    --bevel-brass-soft: light-dark(#F0E4CC, #3A2F17);
+    --bevel-ox:         light-dark(#A83A2C, #FF5566);
+    --bevel-ox-soft:    light-dark(#F6DED6, #3A2226);
+    --bevel-teal:       light-dark(#256056, #63AE9E);
+    --bevel-teal-soft:  light-dark(#DCEBE7, #17332E);
+
+    /* The raised face is a material of its own, a step off the page in both
+       modes (bone on cream, slate on navy), so a resting control reads as a
+       closed shape on the ground and on a card. The shadow wall clears the
+       navy ground at night while staying darker than the raised face. */
+    --bevel-face:       light-dark(#F1E7D4, #22273E);
+    --bevel-edge-hi:    light-dark(#FFF9ED, #3C4260);
+    --bevel-edge-lo:    light-dark(#D6C3A5, #1B2033);
+
+    /* A pressed-in control is a body, not a lip: a floor, the wall the light
+       misses (top, left) and the wall it reaches (bottom, right). In light all
+       three sit below the cream; in dark all three sit above the navy, so no
+       side of the perimeter can vanish into the ground. Literal stops, never a
+       mix: a mix between a navy face and a near-black edge lands on gray. */
+    --bevel-face-in:    light-dark(#E3D0B3, #28304D);
+    --bevel-edge-in:    light-dark(#B89F7B, #1F2339);
+    --bevel-edge-in-hi: light-dark(#F0E1C9, #4D587A);
+
+    /* The switch knob is lighter than its on channel in both modes, so an on
+       switch never reads as a hole. In light it sits a step above the face,
+       so it also clears its own channel. */
+    --bevel-knob:       light-dark(#FCF8F1, #4A5275);
+    --bevel-knob-hi:    light-dark(#FFF9ED, #6C759A);
+
+    /* The danger button is a solid block like the primary, so it carries its
+       own face, its own two edges and the cream that sits on it. A dark red
+       nearing brown, brighter by a step at night so it still reads as red on
+       navy. Literal stops: no neutral token is dark in both modes. */
+    --bevel-ox-face:    light-dark(#7A2A1F, #842E22);
+    --bevel-ox-edge-hi: light-dark(#AE4F3E, #B85A47);
+    --bevel-ox-edge-lo: light-dark(#451510, #3E1410);
+    --bevel-ox-ink:     light-dark(#FBEEE8, #FBEEE8);
+
+    --bevel-font-sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
+    --bevel-font-serif: Newsreader, Georgia, "Times New Roman", serif;
+    --bevel-font-mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;
+
+    --bevel-shadow: 0 1px 2px rgba(23, 28, 36, .05), 0 8px 24px -12px rgba(23, 28, 36, .14);
+
+    background: var(--bevel-ground);
+    color: var(--bevel-ink);
+  }
+
+  /* The one non-colour token, so it cannot ride light-dark(): a media default
+     for the OS, then explicit forced-mode overrides. */
+  @media (prefers-color-scheme: dark) {
+    :root { --bevel-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .6); }
+  }
+  [data-theme="light"], .light {
+    color-scheme: light;
+    --bevel-shadow: 0 1px 2px rgba(23, 28, 36, .05), 0 8px 24px -12px rgba(23, 28, 36, .14);
+    background: var(--bevel-ground); color: var(--bevel-ink);
+  }
+  [data-theme="dark"], .dark {
+    color-scheme: dark;
+    --bevel-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .6);
+    background: var(--bevel-ground); color: var(--bevel-ink);
+  }
+
+  body {
+    margin: 0;
+    font-family: var(--bevel-font-sans);
+    font-size: 17px; line-height: 1.6;
+    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+    font-variant-numeric: tabular-nums;
+    accent-color: var(--bevel-brass);
+  }
+  ::selection { background: var(--bevel-brass-soft); color: var(--bevel-ink); }
+  :focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+}
+
+@layer components {
+  /* Visually hidden, still focusable and announced. The hidden native input
+     behind every drawn control relies on it. */
+  .bevel-sr-only {
+    position: absolute; width: 1px; height: 1px;
+    padding: 0; margin: -1px; overflow: hidden;
+    clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
+  }
+
+  /* ============================ BUTTON ============================ */
+  /* The raised bevel: light top+left, dark right+bottom, real borders so the
+     corners mitre. Press it and the edges swap and the label sinks 1px. */
+  .bevel-button {
+    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
+    font-family: var(--bevel-font-sans); font-size: 17px; font-weight: 500; line-height: 1.5;
+    cursor: pointer; user-select: none; text-align: center; text-decoration: none;
+    color: var(--bevel-ink);
+    background: var(--bevel-face);
+    border: 2px solid;
+    border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+    border-radius: 0;
+    padding: 6px 15px;
+    outline: none;
+  }
+  .bevel-button__label { white-space: nowrap; user-select: none; display: inline-block; }
+  .bevel-button:hover { background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%); }
+  .bevel-button:active {
+    border-color: var(--bevel-edge-lo) var(--bevel-edge-hi) var(--bevel-edge-hi) var(--bevel-edge-lo);
+  }
+  .bevel-button:active .bevel-button__label { translate: 1px 1px; }
+  .bevel-button:focus-visible,
+  .bevel-button:has(:focus-visible) { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+  .bevel-button:disabled, .bevel-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
+  .bevel-button:disabled .bevel-button__label { translate: none; }
+
+  .bevel-button--small { font-size: 14px; padding: 3px 11px; }
+
+  /* Primary: ink acts. The bevel is derived from the ink so it embosses in
+     both modes. Exactly one per view. */
+  .bevel-button--primary {
+    --bevel-face: var(--bevel-ink);
+    --bevel-edge-hi: color-mix(in srgb, var(--bevel-ink), white 24%);
+    --bevel-edge-lo: color-mix(in srgb, var(--bevel-ink), black 32%);
+    color: var(--bevel-ground);
+  }
+  .bevel-button--primary:hover { background: color-mix(in srgb, var(--bevel-ink), var(--bevel-ground) 12%); }
+
+  /* Danger: ox destroys. A solid dark-red block with its own three stops, so
+     the base rules for hover and press work unchanged on it. */
+  .bevel-button--danger {
+    --bevel-face: var(--bevel-ox-face);
+    --bevel-edge-hi: var(--bevel-ox-edge-hi);
+    --bevel-edge-lo: var(--bevel-ox-edge-lo);
+    color: var(--bevel-ox-ink);
+  }
+
+  /* Quiet: a link wearing padding. Transparent border keeps the hit area and
+     the baseline aligned with neighbouring bevel buttons. */
+  .bevel-button--quiet {
+    background: none; border-color: transparent; color: var(--bevel-brass);
+  }
+  .bevel-button--quiet:hover { background: var(--bevel-sunk); color: color-mix(in srgb, var(--bevel-brass) 80%, var(--bevel-ink)); }
+  .bevel-button--quiet:active { border-color: transparent; }
+
+  /* ============================ TEXT INPUT ============================ */
+  /* Flat and recessed: a hairline on the surface. Typed text is sans because
+     most of it is language; --mono for a figure, a hex, an id. */
+  .bevel-input {
+    width: 100%; display: block;
+    font-family: var(--bevel-font-sans); font-size: 17px; line-height: 1.5;
+    color: var(--bevel-ink); background: var(--bevel-surface);
+    border: 1px solid var(--bevel-line-2); border-radius: 0;
+    padding: 7px 12px; outline: none;
+    transition: border-color .14s, background-color .14s;
+  }
+  .bevel-input::placeholder { color: var(--bevel-faint); }
+  .bevel-input:hover:not(:disabled) { border-color: var(--bevel-faint); }
+  .bevel-input:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 1px; border-color: var(--bevel-brass); }
+  .bevel-input:disabled { background: var(--bevel-sunk); color: var(--bevel-faint); border-color: var(--bevel-line); cursor: not-allowed; }
+  .bevel-input--mono { font-family: var(--bevel-font-mono); font-size: 15px; }
+  .bevel-input--small { font-size: 14px; padding: 4px 10px; }
+  input[type="search"].bevel-input { -webkit-appearance: none; appearance: none; }
+  input[type="search"].bevel-input::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+  /* ============================ TEXTAREA ============================ */
+  .bevel-textarea {
+    width: 100%; display: block; min-height: 104px; resize: vertical;
+    font-family: var(--bevel-font-sans); font-size: 17px; line-height: 1.55;
+    color: var(--bevel-ink); background: var(--bevel-surface);
+    border: 1px solid var(--bevel-line-2); border-radius: 0;
+    padding: 8px 12px; outline: none;
+    transition: border-color .14s, background-color .14s;
+  }
+  .bevel-textarea::placeholder { color: var(--bevel-faint); }
+  .bevel-textarea:hover:not(:disabled) { border-color: var(--bevel-faint); }
+  .bevel-textarea:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 1px; border-color: var(--bevel-brass); }
+  .bevel-textarea:disabled { background: var(--bevel-sunk); color: var(--bevel-faint); border-color: var(--bevel-line); cursor: not-allowed; }
+  .bevel-textarea--small { font-size: 14px; padding: 5px 10px; min-height: 80px; }
+
+  /* ============================ NUMBER ============================ */
+  /* A flat field with two beveled steps stacked at its right edge. */
+  .bevel-number {
+    display: flex; align-items: stretch; width: 100%;
+    background: var(--bevel-surface);
+    border: 1px solid var(--bevel-line-2); border-radius: 0;
+    transition: border-color .14s;
+  }
+  .bevel-number:hover { border-color: var(--bevel-faint); }
+  .bevel-number:has(:focus-visible) { outline: 2px solid var(--bevel-brass); outline-offset: 1px; border-color: var(--bevel-brass); }
+  .bevel-number__input {
+    flex: 1; min-width: 0; background: transparent; color: var(--bevel-ink);
+    font-family: var(--bevel-font-mono); font-size: 15px; line-height: 1.5;
+    padding: 7px 10px 7px 12px; border: 0; outline: none;
+    appearance: textfield; -webkit-appearance: textfield;
+  }
+  .bevel-number__input::-webkit-outer-spin-button,
+  .bevel-number__input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; }
+  .bevel-number__steps { display: flex; flex-direction: column; padding: 2px; gap: 2px; }
+  .bevel-number__step {
+    flex: 1; position: relative; width: 26px; cursor: pointer; padding: 0; line-height: 0;
+    background: var(--bevel-face); outline: none; color: var(--bevel-ink-2);
+    border: 2px solid;
+    border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+    border-radius: 0; font-size: 0;
+  }
+  /* The step glyph is a hairline chevron drawn from two borders. */
+  .bevel-number__step::before {
+    content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
+    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
+  }
+  .bevel-number__step[data-step="up"]::before { transform: translate(-50%, -25%) rotate(-135deg); }
+  .bevel-number__step[data-step="down"]::before { transform: translate(-50%, -75%) rotate(45deg); }
+  .bevel-number__step:hover { background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%); color: var(--bevel-ink); }
+  .bevel-number__step:active {
+    border-color: var(--bevel-edge-lo) var(--bevel-edge-hi) var(--bevel-edge-hi) var(--bevel-edge-lo);
+  }
+  .bevel-number__step:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 1px; }
+  .bevel-number--small .bevel-number__input { font-size: 13px; padding: 4px 8px 4px 10px; }
+  .bevel-number--small .bevel-number__step { width: 22px; }
+
+  /* ============================ SELECT ============================ */
+  /* Native <select>, OS arrow hidden, a hairline chevron drawn on the wrapper
+     and kept out of the click path. */
+  .bevel-select { position: relative; display: block; }
+  .bevel-select__field {
+    width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer;
+    font-family: var(--bevel-font-sans); font-size: 17px; line-height: 1.5;
+    color: var(--bevel-ink); background: var(--bevel-surface);
+    border: 1px solid var(--bevel-line-2); border-radius: 0;
+    padding: 7px 36px 7px 12px; outline: none;
+    transition: border-color .14s;
+  }
+  .bevel-select__field:hover:not(:disabled) { border-color: var(--bevel-faint); }
+  .bevel-select__field:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 1px; border-color: var(--bevel-brass); }
+  .bevel-select__field:disabled { background: var(--bevel-sunk); color: var(--bevel-faint); cursor: not-allowed; }
+  .bevel-select::after {
+    content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
+    border-right: 1.5px solid var(--bevel-muted); border-bottom: 1.5px solid var(--bevel-muted);
+    transform: translateY(-65%) rotate(45deg); pointer-events: none;
+  }
+  .bevel-select--small .bevel-select__field { font-size: 14px; padding: 4px 30px 4px 10px; }
+  .bevel-select--small::after { right: 11px; width: 6px; height: 6px; }
+
+  /* ============================ CHECKBOX ============================ */
+  /* Hidden native input, a beveled box, a mark drawn from two borders.
+     Checked is the PROVISIONAL shallow recess (DECISIONS 0001): the edges swap
+     but the dark one sits at half depth and the face keeps its colour. */
+  .bevel-checkbox {
+    display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; width: fit-content;
+    position: relative; font-size: 17px; line-height: 1.5; user-select: none;
+  }
+  .bevel-checkbox__box {
+    position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px;
+    background: var(--bevel-face); border-radius: 0;
+    border: 2px solid;
+    border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+  }
+  .bevel-checkbox__box::after {
+    content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
+    border-right: 2px solid var(--bevel-ink); border-bottom: 2px solid var(--bevel-ink);
+    transform: rotate(42deg); opacity: 0;
+  }
+  .bevel-checkbox__label { color: var(--bevel-ink); }
+  .bevel-checkbox:hover .bevel-checkbox__box { background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%); }
+  .bevel-checkbox:has(:checked) .bevel-checkbox__box {
+    background: var(--bevel-face-in);
+    border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in);
+  }
+  .bevel-checkbox:has(:checked) .bevel-checkbox__box::after { opacity: 1; translate: 1px 1px; }
+  .bevel-checkbox:has(:focus-visible) .bevel-checkbox__box { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+  .bevel-checkbox:has(:disabled) { color: var(--bevel-faint); cursor: not-allowed; }
+  .bevel-checkbox:has(:disabled) .bevel-checkbox__box { opacity: .5; }
+  .bevel-checkbox--small { font-size: 14px; gap: 8px; }
+  .bevel-checkbox--small .bevel-checkbox__box { width: 16px; height: 16px; margin-top: 2px; }
+  .bevel-checkbox--small .bevel-checkbox__box::after { left: 3.5px; top: 0; width: 4px; height: 8px; border-width: 1.5px; }
+  /* Mixed (the JS indeterminate flag, which a grid's select-all derives from
+     its rows): the same recess, the mark a sunk dash instead of a tick. */
+  .bevel-checkbox:has(:indeterminate) .bevel-checkbox__box {
+    background: var(--bevel-face-in);
+    border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in);
+  }
+  .bevel-checkbox:has(:indeterminate) .bevel-checkbox__box::after {
+    opacity: 1; transform: none; translate: 1px 1px;
+    left: 4px; top: 7px; width: 8px; height: 0; border-right: 0;
+  }
+  .bevel-checkbox--small:has(:indeterminate) .bevel-checkbox__box::after { left: 3px; top: 5px; width: 6px; }
+
+  /* ============================ RADIO ============================ */
+  /* Round, so the two edge colours come as inset shadows: a lit rim on a
+     circle. Checked is the recess body with only its shadow wall: on a circle
+     the lit lower lip read as a highlight, not an edge, so it is left off.
+     The dot does not sink: with one wall the well is already off centre, and
+     a 1px sink on top of it read as a misplaced dot. It is centred in the
+     ring, wall included. */
+  .bevel-radio {
+    display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; width: fit-content;
+    position: relative; font-size: 17px; line-height: 1.5; user-select: none;
+  }
+  .bevel-radio__ring {
+    position: relative; flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px;
+    border-radius: 50%; background: var(--bevel-face);
+    box-shadow: inset 2px 2px 0 var(--bevel-edge-hi), inset -2px -2px 0 var(--bevel-edge-lo);
+  }
+  .bevel-radio__ring::after {
+    content: ""; position: absolute; inset: 7px; border-radius: 50%;
+    background: var(--bevel-ink); opacity: 0;
+  }
+  .bevel-radio__label { color: var(--bevel-ink); }
+  .bevel-radio:hover .bevel-radio__ring { background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%); }
+  .bevel-radio:has(:checked) .bevel-radio__ring {
+    background: var(--bevel-face-in);
+    box-shadow: inset 2px 2px 0 var(--bevel-edge-in);
+  }
+  .bevel-radio:has(:checked) .bevel-radio__ring::after { opacity: 1; }
+  .bevel-radio:has(:focus-visible) .bevel-radio__ring { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+  .bevel-radio:has(:disabled) { color: var(--bevel-faint); cursor: not-allowed; }
+  .bevel-radio:has(:disabled) .bevel-radio__ring { opacity: .5; }
+  .bevel-radio--small { font-size: 14px; gap: 8px; }
+  .bevel-radio--small .bevel-radio__ring { width: 18px; height: 18px; margin-top: 1px; }
+  .bevel-radio--small .bevel-radio__ring::after { inset: 6px; }
+
+  /* ============================ TOGGLE ============================ */
+  /* A recessed channel and a beveled thumb. On is a lighter track, never an
+     accent. Switches are for settings that apply immediately. The thumb has
+     its own two tokens so it stays lighter than the on channel in dark. */
+  .bevel-toggle {
+    display: inline-flex; align-items: center; gap: 10px; cursor: pointer; width: fit-content;
+    position: relative; font-size: 17px; line-height: 1.5; user-select: none;
+  }
+  .bevel-toggle__track {
+    position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 0;
+    background: var(--bevel-sunk); border: 1px solid var(--bevel-line-2);
+    transition: background-color .14s, border-color .14s;
+  }
+  .bevel-toggle__thumb {
+    position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
+    background: var(--bevel-knob);
+    border: 2px solid;
+    border-color: var(--bevel-knob-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-knob-hi);
+    transition: translate .15s cubic-bezier(.4, 0, .2, 1);
+  }
+  .bevel-toggle__label { color: var(--bevel-ink); }
+  .bevel-toggle:hover .bevel-toggle__track { border-color: var(--bevel-faint); }
+  .bevel-toggle:has(:checked) .bevel-toggle__track { background: var(--bevel-line-2); border-color: var(--bevel-faint); }
+  .bevel-toggle:has(:checked) .bevel-toggle__thumb { translate: 20px 0; }
+  .bevel-toggle:has(:focus-visible) .bevel-toggle__track { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+  .bevel-toggle:has(:disabled) { color: var(--bevel-faint); cursor: not-allowed; }
+  .bevel-toggle:has(:disabled) .bevel-toggle__track { opacity: .5; }
+  .bevel-toggle--small { font-size: 14px; gap: 8px; }
+  .bevel-toggle--small .bevel-toggle__track { width: 38px; height: 20px; }
+  .bevel-toggle--small .bevel-toggle__thumb { width: 14px; height: 14px; }
+  .bevel-toggle--small:has(:checked) .bevel-toggle__thumb { translate: 18px 0; }
+
+  /* ============================ SLIDER ============================ */
+  /* Hidden native range over a drawn track, fill and nub. The wrapper's
+     inline --bevel-value matches value= so the fill is right before any script. */
+  .bevel-slider { position: relative; height: 32px; width: 100%; --bevel-value: 0%; }
+  .bevel-slider__input {
+    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
+    opacity: 0; cursor: pointer; z-index: 10;
+  }
+  .bevel-slider__track {
+    position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; height: 8px;
+    background: var(--bevel-sunk); border: 1px solid var(--bevel-line-2); overflow: hidden;
+  }
+  .bevel-slider__fill { height: 100%; width: var(--bevel-value); background: var(--bevel-line-2); }
+  .bevel-slider__nub {
+    position: absolute; top: 50%; left: var(--bevel-value); translate: -50% -50%;
+    width: 20px; height: 20px; pointer-events: none;
+    background: var(--bevel-face);
+    border: 2px solid;
+    border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+  }
+  .bevel-slider__input:active ~ .bevel-slider__nub {
+    border-color: var(--bevel-edge-lo) var(--bevel-edge-hi) var(--bevel-edge-hi) var(--bevel-edge-lo);
+  }
+  .bevel-slider__input:focus-visible ~ .bevel-slider__nub { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+  .bevel-slider__input:disabled { cursor: not-allowed; }
+  .bevel-slider__input:disabled ~ .bevel-slider__nub { opacity: .5; }
+  .bevel-slider--small { height: 24px; }
+  .bevel-slider--small .bevel-slider__track { height: 6px; }
+  .bevel-slider--small .bevel-slider__nub { width: 16px; height: 16px; }
+  /* A slider beside its readout: <output> in mono, kept honest by bevel.js. */
+  .bevel-sliderrow { display: flex; align-items: center; gap: 14px; }
+  .bevel-sliderrow .bevel-slider { flex: 1; }
+  .bevel-sliderrow__value {
+    font-family: var(--bevel-font-mono); font-size: 13.5px; font-weight: 600;
+    min-width: 44px; text-align: right; color: var(--bevel-ink);
+  }
+
+  /* ============================ DATE ============================ */
+  .bevel-date { position: relative; display: block; }
+  .bevel-date__field {
+    width: 100%;
+    font-family: var(--bevel-font-mono); font-size: 15px; line-height: 1.5;
+    color: var(--bevel-ink); background: var(--bevel-surface);
+    border: 1px solid var(--bevel-line-2); border-radius: 0;
+    padding: 7px 44px 7px 12px; outline: none;
+    transition: border-color .14s;
+  }
+  .bevel-date__field:hover:not(:disabled) { border-color: var(--bevel-faint); }
+  .bevel-date__field:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 1px; border-color: var(--bevel-brass); }
+  .bevel-date__field:disabled { background: var(--bevel-sunk); color: var(--bevel-faint); cursor: not-allowed; }
+  .bevel-date__field::-webkit-calendar-picker-indicator {
+    opacity: 0; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; margin: 0; cursor: pointer;
+  }
+  .bevel-date__field::-webkit-inner-spin-button,
+  .bevel-date__field::-webkit-clear-button { -webkit-appearance: none; appearance: none; }
+  .bevel-date__icon {
+    pointer-events: none; position: absolute; right: 13px; top: 50%; translate: 0 -50%;
+    width: 18px; height: 18px; color: var(--bevel-muted); line-height: 0;
+  }
+  .bevel-date__icon svg { width: 100%; height: 100%; display: block; }
+  .bevel-date--small .bevel-date__field { font-size: 13px; padding: 4px 36px 4px 10px; }
+  .bevel-date--small .bevel-date__field::-webkit-calendar-picker-indicator { width: 36px; }
+  .bevel-date--small .bevel-date__icon { right: 10px; width: 16px; height: 16px; }
+
+  /* The native file and image inputs are visually hidden; their styled label
+     drives them, and the focus ring rides :has(:focus-visible) on the button. */
+  .bevel-file__input, .bevel-image__input {
+    position: absolute; width: 1px; height: 1px;
+    padding: 0; margin: -1px; overflow: hidden;
+    clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
+  }
+
+  /* ============================ FILE ============================ */
+  .bevel-file { display: flex; align-items: center; gap: 12px; width: 100%; }
+  .bevel-file__name {
+    font-family: var(--bevel-font-mono); font-size: 14px; line-height: 1.5;
+    color: var(--bevel-muted);
+    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .bevel-file__name[data-filled] { color: var(--bevel-ink); }
+  a.bevel-file__name { text-decoration: underline; text-underline-offset: 2px; }
+  .bevel-file--compact {
+    padding: 4px 8px 4px 4px; background: var(--bevel-surface);
+    border: 1px solid var(--bevel-line-2); border-radius: 0;
+  }
+  .bevel-file--compact:has(:focus-visible) { outline: 2px solid var(--bevel-brass); outline-offset: 1px; }
+  .bevel-file--compact .bevel-button:focus-visible,
+  .bevel-file--compact .bevel-button:has(:focus-visible) { outline: none; }
+  .bevel-file__remove {
+    appearance: none; -webkit-appearance: none; flex-shrink: 0;
+    width: 18px; height: 18px; border-radius: 50%;
+    display: inline-flex; align-items: center; justify-content: center;
+    margin: 0; padding: 0; cursor: pointer; line-height: 0;
+    color: var(--bevel-ink); background: var(--bevel-face);
+    box-shadow: inset 1px 1px 0 var(--bevel-edge-hi), inset -1px -1px 0 var(--bevel-edge-lo);
+    border: 0;
+  }
+  .bevel-file__remove svg { display: block; width: 60%; height: 60%; }
+  .bevel-file__remove:hover { color: var(--bevel-ox); }
+  .bevel-file--small { gap: 8px; }
+  .bevel-file--small .bevel-file__name { font-size: 12.5px; }
+
+  /* ============================ IMAGE ============================ */
+  .bevel-image { display: flex; flex-direction: column; gap: 8px; }
+  .bevel-image__frame {
+    position: relative; width: 120px; height: 120px; overflow: hidden; border-radius: 0;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--bevel-sunk); border: 1px solid var(--bevel-line-2);
+    color: var(--bevel-faint); font-size: 13.5px; line-height: 1.5;
+  }
+  .bevel-image__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .bevel-image__placeholder { padding: 0 8px; text-align: center; }
+  .bevel-image .bevel-button { width: fit-content; }
+  .bevel-image--compact { flex-direction: row; align-items: center; gap: 0; }
+  .bevel-image__thumb { position: relative; display: inline-block; width: fit-content; margin: 0; line-height: 0; }
+  .bevel-image--compact .bevel-image__frame { width: 56px; height: 56px; }
+  .bevel-image--compact .bevel-image__preview { position: static; inset: auto; display: block; }
+  .bevel-image__remove {
+    position: absolute; top: -7px; right: -7px;
+    width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 0;
+    display: inline-flex; align-items: center; justify-content: center;
+    appearance: none; -webkit-appearance: none; cursor: pointer; line-height: 0;
+    color: var(--bevel-ink); background: var(--bevel-face);
+    box-shadow: inset 1px 1px 0 var(--bevel-edge-hi), inset -1px -1px 0 var(--bevel-edge-lo);
+  }
+  .bevel-image__remove svg { display: block; width: 10px; height: 10px; }
+  .bevel-image__remove:hover { color: var(--bevel-ox); }
+
+  /* ============================ TAGS ============================ */
+  /* A flat field holding beveled chips. Chips are real DOM with a hidden
+     input each, so the tag set round-trips. */
+  .bevel-tags {
+    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px;
+    background: var(--bevel-surface); border: 1px solid var(--bevel-line-2);
+    border-radius: 0; cursor: text; transition: border-color .14s;
+  }
+  .bevel-tags:hover { border-color: var(--bevel-faint); }
+  .bevel-tags:has(:focus-visible) { outline: 2px solid var(--bevel-brass); outline-offset: 1px; border-color: var(--bevel-brass); }
+  .bevel-tags__chip {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 1px 6px 1px 9px; font-size: 14px; line-height: 1.5; font-weight: 500;
+    color: var(--bevel-ink); background: var(--bevel-face);
+    border: 2px solid;
+    border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+  }
+  .bevel-tags__remove {
+    appearance: none; -webkit-appearance: none;
+    margin: 0; padding: 0 2px; border: 0; background: none; color: var(--bevel-muted);
+    cursor: pointer; font-size: 15px; line-height: 1;
+  }
+  .bevel-tags__remove:hover { color: var(--bevel-ox); }
+  .bevel-tags__input {
+    appearance: none; -webkit-appearance: none; border: 0; padding: 4px 4px;
+    flex: 1; min-width: 120px; background: transparent; color: var(--bevel-ink);
+    outline: none; font-size: 17px; line-height: 1.5;
+  }
+  .bevel-tags__input::placeholder { color: var(--bevel-faint); }
+  .bevel-tags--small { gap: 4px; padding: 4px 6px; }
+  .bevel-tags--small .bevel-tags__chip { font-size: 12.5px; padding: 0 5px 0 8px; }
+  .bevel-tags--small .bevel-tags__input { font-size: 14px; min-width: 90px; padding: 2px 4px; }
+
+  /* ============================ SORTABLE ============================ */
+  .bevel-sortable { display: flex; flex-direction: column; gap: 8px; }
+  .bevel-sortable__item {
+    display: flex; flex-direction: row; width: 100%;
+    background: var(--bevel-surface); border: 1px solid var(--bevel-line-2);
+  }
+  .bevel-sortable__grip {
+    width: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+    cursor: grab; touch-action: none; border-right: 1px solid var(--bevel-line-2); background: var(--bevel-sunk);
+  }
+  .bevel-sortable__grip:active { cursor: grabbing; }
+  .bevel-sortable__item.is-dragging { position: relative; z-index: 1; border-color: var(--bevel-faint); box-shadow: var(--bevel-shadow); }
+  .bevel-sortable__dots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
+  .bevel-sortable__dot {
+    display: block; width: 4px; height: 4px; background: var(--bevel-line-2);
+    box-shadow: 1px 1px 0 0 var(--bevel-edge-lo);
+  }
+  .bevel-sortable__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
+  .bevel-sortable__row { padding: 8px 14px 9px; }
+  .bevel-sortable__row:not(:last-child) { border-bottom: 1px solid var(--bevel-line); }
+  .bevel-sortable__label {
+    display: block; margin-bottom: 2px;
+    font-family: var(--bevel-font-mono); font-size: 10.5px; font-weight: 500;
+    letter-spacing: .13em; text-transform: uppercase; color: var(--bevel-muted);
+  }
+  .bevel-sortable__field {
+    width: 100%; background: transparent; color: var(--bevel-ink); border: 0; padding: 0;
+    font-family: var(--bevel-font-sans); font-size: 17px; line-height: 1.5; outline: none;
+  }
+  .bevel-sortable__field::placeholder { color: var(--bevel-faint); }
+  .bevel-sortable__field:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 3px; }
+  .bevel-sortable--small { gap: 6px; }
+  .bevel-sortable--small .bevel-sortable__grip { width: 24px; }
+  .bevel-sortable--small .bevel-sortable__row { padding: 5px 11px 6px; }
+  .bevel-sortable--small .bevel-sortable__label { font-size: 10px; margin-bottom: 1px; }
+  .bevel-sortable--small .bevel-sortable__field { font-size: 14px; }
+
+  /* ============================ CHIP ============================ */
+  /* A collapsible recovery prompt: a small bevel button that expands into the
+     kit's one raised panel. State lives in classes so it round-trips. In a
+     Hyperclay app, mark the block save-remove. */
+  .bevel-chip { display: inline-flex; flex-direction: column; align-items: flex-start; }
+  .bevel-chip__panel { display: none; }
+  .bevel-chip--open .bevel-chip__trigger { display: none; }
+  .bevel-chip--open .bevel-chip__panel { display: flex; }
+  .bevel-chip__trigger .bevel-button__label { display: inline-flex; align-items: center; gap: 6px; }
+  .bevel-chip__trigger { box-shadow: var(--bevel-shadow); }
+  .bevel-chip__warn { color: var(--bevel-ox); fill: currentColor; }
+  .bevel-chip__trigger .bevel-chip__warn { vertical-align: -2px; }
+  .bevel-chip__panel {
+    width: 320px; max-width: calc(100vw - 44px);
+    background: var(--bevel-surface); color: var(--bevel-ink);
+    border: 1px solid var(--bevel-line-2); border-radius: 0;
+    box-shadow: var(--bevel-shadow);
+    padding: 14px 16px 14px; flex-direction: column; gap: 12px;
+  }
+  .bevel-chip__head { display: flex; gap: 10px; align-items: flex-start; }
+  .bevel-chip__icon { flex-shrink: 0; line-height: 0; margin-top: 1px; }
+  .bevel-chip__headtext { min-width: 0; }
+  .bevel-chip__eyebrow {
+    font-family: var(--bevel-font-mono); font-size: 10.5px; font-weight: 500;
+    text-transform: uppercase; letter-spacing: .14em; color: var(--bevel-muted); margin-bottom: 3px;
+  }
+  .bevel-chip__title { margin: 0; font-family: var(--bevel-font-sans); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--bevel-ink); }
+  .bevel-chip__collapse {
+    margin-left: auto; flex-shrink: 0; width: 24px; height: 24px;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: none; border: 0; cursor: pointer; padding: 0; color: var(--bevel-muted);
+  }
+  .bevel-chip__collapse:hover { color: var(--bevel-ink); }
+  .bevel-chip__collapse svg { display: block; }
+  .bevel-chip__meta { font-family: var(--bevel-font-mono); font-size: 12px; color: var(--bevel-muted); }
+  .bevel-chip__changes-toggle {
+    background: none; border: 0; cursor: pointer; font: inherit; padding: 0 0 0 4px;
+    color: var(--bevel-brass); text-decoration: underline; text-underline-offset: 2px;
+  }
+  .bevel-chip__changes-toggle:hover { color: var(--bevel-ink); }
+  .bevel-chip__preview {
+    display: none; flex-direction: column; gap: 10px;
+    background: var(--bevel-sunk); border: 1px solid var(--bevel-line);
+    padding: 10px 11px;
+  }
+  .bevel-chip__panel.is-changes .bevel-chip__preview { display: flex; }
+  .bevel-chip__row { display: flex; flex-direction: column; gap: 2px; }
+  .bevel-chip__key {
+    font-family: var(--bevel-font-mono); font-size: 10.5px; font-weight: 500;
+    text-transform: uppercase; letter-spacing: .1em; color: var(--bevel-muted);
+  }
+  .bevel-chip__old, .bevel-chip__new { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
+  .bevel-chip__old { color: var(--bevel-ox); text-decoration: line-through; opacity: .85; }
+  .bevel-chip__new { color: var(--bevel-ink); }
+  .bevel-chip__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 1px; }
+  .bevel-chip__actions .bevel-button { width: 100%; }
+
+  /* ============================ FIELD ============================ */
+  /* Label, control, one line of small print. The label is mono caps like every
+     other label on the page, and it follows the control's state. */
+  .bevel-field { display: flex; flex-direction: column; gap: 6px; }
+  .bevel-field__label, .bevel-fieldset > legend {
+    font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500;
+    letter-spacing: .13em; text-transform: uppercase; color: var(--bevel-muted);
+  }
+  .bevel-field + .bevel-field { margin-block-start: 18px; }
+  .bevel-field:has(:user-invalid) .bevel-field__label,
+  .bevel-field:has([aria-invalid="true"]) .bevel-field__label { color: var(--bevel-ox); }
+  .bevel-field:has(:disabled) .bevel-field__label { color: var(--bevel-faint); }
+  .bevel-field .bevel-hint--alert { display: none; }
+  .bevel-field:has(:user-invalid) .bevel-hint--alert,
+  .bevel-field:has([aria-invalid="true"]) .bevel-hint--alert { display: block; }
+  .bevel-fieldset { border: 1px solid var(--bevel-line); border-radius: 0; padding: 16px 20px 18px; margin: 0; min-width: 0; }
+  .bevel-fieldset > legend { padding: 0 8px; margin-left: -8px; }
+  .bevel-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
+  .bevel-form__full { grid-column: 1 / -1; }
+  @media (max-width: 640px) { .bevel-form { grid-template-columns: 1fr; } }
+  .bevel-choices { display: flex; flex-wrap: wrap; gap: 12px 26px; }
+  .bevel-buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+
+  /* ============================ INPUT GROUP ============================ */
+  .bevel-igroup {
+    display: flex; align-items: stretch;
+    background: var(--bevel-surface); border: 1px solid var(--bevel-line-2); border-radius: 0;
+    transition: border-color .14s;
+  }
+  .bevel-igroup:hover { border-color: var(--bevel-faint); }
+  .bevel-igroup > .bevel-input { border: 0; background: transparent; flex: 1; min-width: 0; }
+  .bevel-igroup > .bevel-input:focus-visible { outline: 0; }
+  .bevel-igroup:focus-within { outline: 2px solid var(--bevel-brass); outline-offset: 1px; border-color: var(--bevel-brass); }
+  .bevel-igroup__affix {
+    display: flex; align-items: center; padding: 0 11px; background: var(--bevel-sunk);
+    font-family: var(--bevel-font-mono); font-size: 13px; color: var(--bevel-muted); white-space: nowrap;
+  }
+  .bevel-igroup__affix:first-child { border-right: 1px solid var(--bevel-line); }
+  .bevel-igroup__affix:last-child { border-left: 1px solid var(--bevel-line); }
+
+  /* ============================ INVALID ============================ */
+  /* Native constraint validation, styled. :user-invalid fires only after the
+     person interacts. aria-invalid="true" covers server-side errors. */
+  .bevel-input:user-invalid, .bevel-input[aria-invalid="true"],
+  .bevel-textarea:user-invalid, .bevel-textarea[aria-invalid="true"],
+  .bevel-date__field:user-invalid, .bevel-date__field[aria-invalid="true"],
+  .bevel-select__field:user-invalid, .bevel-select__field[aria-invalid="true"],
+  .bevel-number:has(.bevel-number__input:user-invalid),
+  .bevel-number:has(.bevel-number__input[aria-invalid="true"]),
+  .bevel-tags:has(:user-invalid), .bevel-igroup:has([aria-invalid="true"]) {
+    border-color: var(--bevel-ox);
+    background: color-mix(in srgb, var(--bevel-ox-soft) 32%, var(--bevel-surface));
+  }
+  .bevel-input:user-invalid:focus-visible, .bevel-input[aria-invalid="true"]:focus-visible,
+  .bevel-textarea:user-invalid:focus-visible, .bevel-textarea[aria-invalid="true"]:focus-visible { outline-color: var(--bevel-ox); }
+  .bevel-checkbox:has(:user-invalid) .bevel-checkbox__box,
+  .bevel-toggle:has(:user-invalid) .bevel-toggle__track { border-color: var(--bevel-ox); }
+  .bevel-radio:has(:user-invalid) .bevel-radio__ring { box-shadow: inset 0 0 0 2px var(--bevel-ox); }
+
+  /* ============================ PROGRESS ============================ */
+  /* A native <progress> in the slider's clothes: ink by default (a bar in a
+     broadsheet is a black bar), recoloured only when the reading is a judgement.
+     Keep the -webkit and -moz rules in separate blocks. */
+  .bevel-progress {
+    appearance: none; -webkit-appearance: none;
+    display: block; width: 100%; height: 8px;
+    border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); border-radius: 0;
+  }
+  .bevel-progress::-webkit-progress-bar { background: transparent; }
+  .bevel-progress::-webkit-progress-value { background: var(--bevel-ink); }
+  .bevel-progress::-moz-progress-bar { background: var(--bevel-ink); }
+  .bevel-progress--small { height: 6px; }
+  .bevel-progress--ok::-webkit-progress-value { background: var(--bevel-teal); }
+  .bevel-progress--ok::-moz-progress-bar { background: var(--bevel-teal); }
+  .bevel-progress--warn::-webkit-progress-value { background: var(--bevel-brass); }
+  .bevel-progress--warn::-moz-progress-bar { background: var(--bevel-brass); }
+  .bevel-progress--bad::-webkit-progress-value { background: var(--bevel-ox); }
+  .bevel-progress--bad::-moz-progress-bar { background: var(--bevel-ox); }
+  .bevel-progress--blocks::-webkit-progress-value {
+    background: repeating-linear-gradient(to right, var(--bevel-ink) 0 6px, transparent 6px 8px);
+  }
+  .bevel-progress--blocks::-moz-progress-bar {
+    background: repeating-linear-gradient(to right, var(--bevel-ink) 0 6px, transparent 6px 8px);
+  }
+
+  /* ============================ GAUGE ============================ */
+  /* A label, a bar, a mono value on one hairline row. */
+  .bevel-gauges { border-top: 1px solid var(--bevel-line); }
+  .bevel-gauge {
+    display: grid; grid-template-columns: 170px 1fr auto; gap: 16px; align-items: center;
+    padding: 12px 0; border-bottom: 1px solid var(--bevel-line);
+  }
+  .bevel-gauge__label {
+    font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500;
+    letter-spacing: .1em; text-transform: uppercase; color: var(--bevel-muted);
+  }
+  .bevel-gauge__value {
+    font-family: var(--bevel-font-mono); font-size: 13px; font-weight: 600;
+    min-width: 56px; text-align: right; color: var(--bevel-ink);
+  }
+  .bevel-gauge--ok .bevel-gauge__value { color: var(--bevel-teal); }
+  .bevel-gauge--warn .bevel-gauge__value { color: color-mix(in srgb, var(--bevel-brass) 80%, var(--bevel-ink)); }
+  .bevel-gauge--bad .bevel-gauge__value { color: var(--bevel-ox); }
+  @media (max-width: 560px) {
+    .bevel-gauge { grid-template-columns: 1fr auto; gap: 6px 16px; }
+    .bevel-gauge__label { grid-column: 1 / -1; }
+  }
+
+  /* ============================ NOTE ============================ */
+  /* A callout with a grade. Flat on purpose: bevel means pressable, a note is
+     content. Tints mix the soft accent nearly away so a stack stays readable. */
+  .bevel-note {
+    display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline;
+    padding: 14px 18px; background: var(--bevel-surface);
+    border: 1px solid var(--bevel-line); border-radius: 0;
+    font-size: 15px; line-height: 1.55; color: var(--bevel-ink-2);
+  }
+  .bevel-note__tag {
+    font-family: var(--bevel-font-mono); font-size: 10.5px; font-weight: 600;
+    letter-spacing: .12em; text-transform: uppercase; color: var(--bevel-muted); white-space: nowrap;
+  }
+  .bevel-note__body { margin: 0; }
+  .bevel-note__body p { margin: 0; }
+  .bevel-note__body p + p { margin-top: 8px; }
+  .bevel-note--ok { background: color-mix(in srgb, var(--bevel-teal-soft) 45%, var(--bevel-surface)); border-color: color-mix(in srgb, var(--bevel-teal) 24%, var(--bevel-line)); }
+  .bevel-note--ok .bevel-note__tag { color: var(--bevel-teal); }
+  .bevel-note--warn { background: color-mix(in srgb, var(--bevel-brass-soft) 45%, var(--bevel-surface)); border-color: color-mix(in srgb, var(--bevel-brass) 24%, var(--bevel-line)); }
+  .bevel-note--warn .bevel-note__tag { color: color-mix(in srgb, var(--bevel-brass) 80%, var(--bevel-ink)); }
+  .bevel-note--bad { background: color-mix(in srgb, var(--bevel-ox-soft) 45%, var(--bevel-surface)); border-color: color-mix(in srgb, var(--bevel-ox) 24%, var(--bevel-line)); }
+  .bevel-note--bad .bevel-note__tag { color: var(--bevel-ox); }
+  .bevel-note--stack { grid-template-columns: 1fr; gap: 6px; }
+  .bevel-notes { display: grid; gap: 10px; }
+  @media (max-width: 480px) { .bevel-note { grid-template-columns: 1fr; gap: 3px; } }
+
+  /* ============================ CALLOUT ============================ */
+  /* A recessed aside for the paragraph the reader must not skim. No accent. */
+  .bevel-callout {
+    padding: 16px 18px; background: var(--bevel-sunk);
+    border: 1px solid var(--bevel-line); border-radius: 0;
+    font-size: 15.5px; line-height: 1.6; color: var(--bevel-ink-2);
+  }
+  .bevel-callout p { margin: 0; }
+  .bevel-callout p + p { margin-top: 10px; }
+
+  /* ============================ HINT ============================ */
+  .bevel-hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bevel-muted); }
+  .bevel-hint--alert { color: var(--bevel-ox); font-weight: 500; }
+
+  /* ============================ LIST ============================ */
+  /* Square markers for a set of rules, zero-padded mono counters for a sequence. */
+  .bevel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.6; }
+  .bevel-list li { position: relative; padding-left: 22px; }
+  ul.bevel-list > li::before {
+    content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px;
+    background: var(--bevel-ink-2);
+  }
+  ol.bevel-list { counter-reset: bevel-li; }
+  ol.bevel-list > li { counter-increment: bevel-li; padding-left: 38px; }
+  ol.bevel-list > li::before {
+    content: counter(bevel-li, decimal-leading-zero);
+    position: absolute; left: 0; top: .1em;
+    font-family: var(--bevel-font-mono); font-size: 13px; font-weight: 500; color: var(--bevel-muted);
+  }
+  .bevel-list ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+  .bevel-list ul > li::before {
+    content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px;
+    background: transparent; border: 1.5px solid var(--bevel-ink-2);
+  }
+  .bevel-list--small { font-size: 14px; gap: 4px; }
+  .bevel-list--small li { padding-left: 18px; }
+  ul.bevel-list--small > li::before, .bevel-list--small ul > li::before { width: 5px; height: 5px; }
+  ol.bevel-list--small > li { padding-left: 32px; }
+  ol.bevel-list--small > li::before { font-size: 11px; }
+
+  /* ============================ BADGE ============================ */
+  /* A static label in mono caps. Grades judge a claim: --for confirms,
+     --against contradicts, --note is unresolved; --alert is ox. */
+  .bevel-badge {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-family: var(--bevel-font-mono); font-size: 10.5px; font-weight: 600;
+    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
+    padding: 3px 8px; border-radius: 0; vertical-align: 2px;
+    background: var(--bevel-sunk); color: var(--bevel-muted);
+    border: 1px solid var(--bevel-line);
+  }
+  .bevel-badge--for { background: var(--bevel-teal-soft); color: var(--bevel-teal); border-color: color-mix(in srgb, var(--bevel-teal) 28%, var(--bevel-teal-soft)); }
+  .bevel-badge--against { background: var(--bevel-brass-soft); color: color-mix(in srgb, var(--bevel-brass) 80%, var(--bevel-ink)); border-color: color-mix(in srgb, var(--bevel-brass) 28%, var(--bevel-brass-soft)); }
+  .bevel-badge--note { background: var(--bevel-sunk); color: var(--bevel-muted); }
+  .bevel-badge--alert { background: var(--bevel-ox-soft); color: var(--bevel-ox); border-color: color-mix(in srgb, var(--bevel-ox) 28%, var(--bevel-ox-soft)); }
+  .bevel-badge--accent { background: var(--bevel-brass-soft); color: color-mix(in srgb, var(--bevel-brass) 80%, var(--bevel-ink)); border-color: color-mix(in srgb, var(--bevel-brass) 28%, var(--bevel-brass-soft)); }
+
+  /* ============================ PILL ============================ */
+  /* Operational status: a square marker in a tinted box. Pills grade things,
+     badges grade claims. --live breathes. */
+  .bevel-pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-family: var(--bevel-font-mono); font-size: 10.5px; font-weight: 600;
+    letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
+    min-height: 22px; padding: 3px 9px; border-radius: 0; vertical-align: 1px;
+    background: var(--bevel-sunk); color: var(--bevel-muted); border: 1px solid var(--bevel-line);
+  }
+  .bevel-pill::before { content: ""; width: 5px; height: 5px; background: currentColor; flex-shrink: 0; }
+  .bevel-pill--live { background: var(--bevel-teal-soft); color: var(--bevel-teal); border-color: color-mix(in srgb, var(--bevel-teal) 28%, var(--bevel-teal-soft)); }
+  .bevel-pill--live::before { animation: bevel-pulse 2.4s ease-in-out infinite; }
+  .bevel-pill--warn { background: var(--bevel-brass-soft); color: color-mix(in srgb, var(--bevel-brass) 80%, var(--bevel-ink)); border-color: color-mix(in srgb, var(--bevel-brass) 28%, var(--bevel-brass-soft)); }
+  .bevel-pill--down { background: var(--bevel-ox-soft); color: var(--bevel-ox); border-color: color-mix(in srgb, var(--bevel-ox) 28%, var(--bevel-ox-soft)); }
+  .bevel-pills { display: flex; flex-wrap: wrap; gap: 10px; }
+  @keyframes bevel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
+
+  /* ============================ TABLE ============================ */
+  /* Always mono, always inside .bevel-scroll, opened by a caption in the sans.
+     <b> is a cell's value and <i> its context. State helpers by descent:
+     win, lose, nil, dn, sel. */
+  .bevel-scroll { overflow-x: auto; border: 1px solid var(--bevel-line); border-radius: 0; background: var(--bevel-surface); box-shadow: var(--bevel-shadow); }
+  .bevel-table { border-collapse: collapse; width: 100%; font-family: var(--bevel-font-mono); font-size: 13.5px; line-height: 1.5; }
+  .bevel-table caption { text-align: left; padding: 16px 18px 0; font-family: var(--bevel-font-sans); font-size: 13.5px; color: var(--bevel-muted); line-height: 1.5; caption-side: top; }
+  .bevel-table thead th {
+    position: sticky; top: 0; background: var(--bevel-surface); text-align: center;
+    font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
+    color: var(--bevel-muted); padding: 14px 12px 11px; border-bottom: 1px solid var(--bevel-line-2); white-space: nowrap;
+  }
+  .bevel-table thead th span { display: block; font-size: 10px; font-weight: 400; color: var(--bevel-faint); letter-spacing: .1em; margin-top: 2px; }
+  .bevel-table thead th:first-child { text-align: left; }
+  .bevel-table tbody th { text-align: left; font-weight: 500; padding: 9px 14px; border-bottom: 1px solid var(--bevel-line); white-space: nowrap; background: var(--bevel-surface); }
+  .bevel-table tbody th b { font-weight: 600; }
+  .bevel-table tbody th i { display: block; font-style: normal; font-size: 10.5px; color: var(--bevel-faint); letter-spacing: .04em; }
+  .bevel-table td { text-align: center; padding: 9px 12px; border-bottom: 1px solid var(--bevel-line); white-space: nowrap; vertical-align: top; }
+  .bevel-table td b { display: block; font-weight: 600; font-size: 13.5px; }
+  .bevel-table td i { display: block; font-style: normal; font-size: 10.5px; color: var(--bevel-faint); letter-spacing: .03em; margin-top: 1px; }
+  .bevel-table tbody tr:last-child th, .bevel-table tbody tr:last-child td { border-bottom: 0; }
+  .bevel-table tfoot th, .bevel-table tfoot td { border-top: 1px solid var(--bevel-line-2); border-bottom: 0; padding: 10px 12px; white-space: nowrap; background: var(--bevel-surface); }
+  .bevel-table tfoot th { text-align: left; font-weight: 600; padding-left: 14px; }
+  .bevel-table tfoot td { text-align: center; color: var(--bevel-ink-2); }
+  .bevel-table td.nil { color: var(--bevel-faint); }
+  .bevel-table td.win { background: var(--bevel-teal-soft); }
+  .bevel-table td.win b { color: var(--bevel-teal); }
+  .bevel-table td.lose { background: var(--bevel-sunk); }
+  .bevel-table td.lose b { color: var(--bevel-faint); }
+  .bevel-table .dn { color: var(--bevel-ox); }
+  .bevel-table tr.sel th { box-shadow: inset 3px 0 0 var(--bevel-ox); }
+  .bevel-table tr.sel th b { color: var(--bevel-ox); }
+  .bevel-table--striped tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bevel-sunk) 55%, var(--bevel-surface)); }
+  .bevel-table--hover tbody tr { transition: background-color .12s; }
+  .bevel-table--hover tbody tr:hover :is(th, td) { background: color-mix(in srgb, var(--bevel-sunk) 55%, var(--bevel-surface)); }
+  .bevel-table tbody tr:has(.bevel-table__pick input:checked) :is(th, td) { background: color-mix(in srgb, var(--bevel-sunk) 85%, var(--bevel-surface)); }
+  .bevel-table__pick { width: 38px; text-align: center; }
+  .bevel-table__pick .bevel-checkbox { display: inline-grid; vertical-align: middle; }
+  .bevel-table__pick .bevel-checkbox__box { margin-top: 0; }
+  .bevel-table--small { font-size: 12.5px; }
+  .bevel-table--small thead th { padding: 10px 10px 8px; font-size: 10px; }
+  .bevel-table--small td, .bevel-table--small tbody th { padding: 6px 10px; }
+  .bevel-table--left td { text-align: left; }
+
+  /* ============================ GRID ============================ */
+  /* The data table. bevel-table is content, a grid is a tool: a frame holding
+     a toolbar, a scroll box with a sticky head, a sticky spine (pick, row
+     number, anchor) and a sticky aggregate strip, then a status bar with the
+     pages. Language is sans, anything with a digit is mono, and alignment
+     follows the type: text left, figures right. Every state is an attribute:
+     aria-sort on the head, checked on the pick, aria-expanded on the toggle,
+     data-page on the frame, value on the search. Column heads sort flat, like
+     tabs: a row of twelve bevels would out-shout the data. The table is
+     border-collapse: separate because a collapsed border does not travel with
+     a sticky cell. */
+  .bevel-grid {
+    display: flex; flex-direction: column;
+    background: var(--bevel-surface); border: 1px solid var(--bevel-line-2); border-radius: 0;
+    box-shadow: var(--bevel-shadow); font-size: 14px; line-height: 1.5; color: var(--bevel-ink);
+  }
+  .bevel-grid__masthead { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 20px; padding: 26px 26px 22px; }
+  .bevel-grid__masthead .bevel-grid__title { display: block; margin: 7px 0 6px; font-family: var(--bevel-font-serif); font-size: 42px; font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
+  .bevel-grid__description { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bevel-muted); }
+  .bevel-grid__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--bevel-line-2); background: var(--bevel-ground); }
+  .bevel-grid__stat { padding: 15px 24px 17px; border-right: 1px solid var(--bevel-line); }
+  .bevel-grid__stat:last-child { border-right: 0; }
+  .bevel-grid__stat dt { font-family: var(--bevel-font-mono); font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--bevel-muted); }
+  .bevel-grid__stat dd { margin: 5px 0 0; font-family: var(--bevel-font-mono); font-size: clamp(18px, 2.2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.06em; }
+  .bevel-grid__views { display: flex; overflow-x: auto; padding: 0 18px; gap: 14px; border-bottom: 1px solid var(--bevel-line); }
+  .bevel-grid__view { appearance: none; background: none; color: var(--bevel-muted); border: 0; border-bottom: 3px solid transparent; padding: 14px 8px 11px; cursor: pointer; font-family: var(--bevel-font-sans); font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
+  .bevel-grid__view span { margin-left: 8px; font-family: var(--bevel-font-mono); font-size: 11px; }
+  .bevel-grid__view[aria-pressed="true"] { border-bottom-color: var(--bevel-brass); color: var(--bevel-ink); }
+  .bevel-grid__view:hover { color: var(--bevel-ink); }
+  .bevel-grid__view:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -4px; }
+  .bevel-grid__masthead > .bevel-grid__id { font-size: 11px; color: var(--bevel-muted); }
+  @media (max-width: 640px) {
+    .bevel-grid__masthead { padding: 20px; }
+    .bevel-grid__masthead .bevel-grid__title { font-size: 34px; }
+    .bevel-grid__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .bevel-grid__stat { padding: 14px 18px; }
+    .bevel-grid__stat:nth-child(-n+2) { border-bottom: 1px solid var(--bevel-line); }
+    .bevel-grid__stat:nth-child(2) { border-right: 0; }
+  }
+  .bevel-grid__bar {
+    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
+    padding: 12px 16px; border-bottom: 1px solid var(--bevel-line);
+  }
+  .bevel-grid__title { margin: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--bevel-font-sans); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--bevel-ink); }
+  .bevel-grid__count { font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--bevel-muted); }
+  .bevel-grid__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+  .bevel-grid__search { width: 220px; }
+  .bevel-grid__scroll { overflow: auto; scrollbar-width: thin; }
+  .bevel-grid__table { border-collapse: separate; border-spacing: 0; width: 100%; font-family: var(--bevel-font-sans); font-size: 14px; line-height: 1.5; }
+
+  /* Head: mono caps, sticky, a line-2 rule under it. */
+  .bevel-grid__table thead th {
+    position: sticky; top: 0; z-index: 2;
+    background: var(--bevel-surface); text-align: left; vertical-align: bottom;
+    font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.5;
+    color: var(--bevel-muted); padding: 10px 12px 9px; border-bottom: 1px solid var(--bevel-line-2); white-space: nowrap;
+  }
+  .bevel-grid__head { text-align: left; }
+  .bevel-grid__head--num { text-align: right; }
+  .bevel-grid__head--center { text-align: center; }
+  .bevel-grid__sort {
+    appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
+    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; line-height: inherit;
+    display: inline-flex; align-items: center; gap: 7px; transition: color .14s;
+  }
+  .bevel-grid__sort::after {
+    content: ""; width: 5px; height: 5px; flex-shrink: 0;
+    border-right: 1.5px solid var(--bevel-brass); border-bottom: 1.5px solid var(--bevel-brass);
+    transform: translateY(-2px) rotate(45deg); opacity: 0; transition: opacity .14s;
+  }
+  .bevel-grid__sort:hover { color: var(--bevel-ink); }
+  .bevel-grid__sort:hover::after { opacity: .45; }
+  .bevel-grid__sort:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 3px; }
+  [aria-sort="ascending"] > .bevel-grid__sort, [aria-sort="descending"] > .bevel-grid__sort { color: var(--bevel-ink); }
+  [aria-sort="ascending"] > .bevel-grid__sort::after, [aria-sort="descending"] > .bevel-grid__sort::after { opacity: 1; }
+  [aria-sort="ascending"] > .bevel-grid__sort::after { transform: translateY(1px) rotate(-135deg); }
+
+  /* Cells paint their own surface so the sticky ones cover what scrolls under them. */
+  .bevel-grid__table td, .bevel-grid__table tbody th {
+    padding: 8px 12px; border-bottom: 1px solid var(--bevel-line); vertical-align: middle; white-space: nowrap;
+    background: var(--bevel-surface); text-align: left; font-weight: 400;
+  }
+  .bevel-grid__num { text-align: right; font-family: var(--bevel-font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
+  .bevel-grid__id { font-family: var(--bevel-font-mono); font-size: 13px; }
+  .bevel-grid__date { font-family: var(--bevel-font-mono); font-size: 13px; color: var(--bevel-ink-2); }
+  .bevel-grid__center { text-align: center; }
+  .bevel-grid__center .bevel-checkbox { display: inline-grid; vertical-align: middle; }
+  .bevel-grid__center .bevel-checkbox__box { margin-top: 0; }
+  .bevel-grid__actor { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
+  .bevel-grid__avatar {
+    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px;
+    font-family: var(--bevel-font-mono); font-size: 9.5px; font-weight: 600; font-style: normal; letter-spacing: .04em; line-height: 1;
+    color: var(--bevel-muted); background: var(--bevel-sunk); border: 1px solid var(--bevel-line-2);
+  }
+  .bevel-grid__meter { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
+  .bevel-grid__meter .bevel-progress { width: 64px; }
+  .bevel-grid__meter b { font-family: var(--bevel-font-mono); font-size: 12px; font-weight: 500; min-width: 34px; text-align: right; }
+  .bevel-grid__tags { display: inline-flex; gap: 4px; vertical-align: middle; }
+  .bevel-grid__tags .bevel-badge { vertical-align: 0; }
+
+  /* The spine: pick at 0, the row number beside it, the anchor after both,
+     each sticky at the sum of the widths before it. */
+  .bevel-grid__pick, .bevel-grid__n, .bevel-grid__anchor { position: sticky; left: 0; z-index: 1; }
+  .bevel-grid__table thead :is(.bevel-grid__pick, .bevel-grid__n, .bevel-grid__anchor) { z-index: 3; }
+  .bevel-grid__pick { width: 44px; min-width: 44px; padding-right: 0; padding-left: 12px; text-align: center; }
+  .bevel-grid__pick .bevel-checkbox { display: inline-grid; vertical-align: middle; }
+  .bevel-grid__pick .bevel-checkbox__box { margin-top: 0; }
+  .bevel-grid__n { width: 48px; min-width: 48px; padding-right: 10px; text-align: right; font-family: var(--bevel-font-mono); font-size: 11.5px; color: var(--bevel-faint); }
+  .bevel-grid__table tbody { counter-reset: bevel-row; }
+  .bevel-grid__row { counter-increment: bevel-row; }
+  .bevel-grid__table tbody > .bevel-grid__row > .bevel-grid__n::before { content: counter(bevel-row); }
+  .bevel-grid__table:has(.bevel-grid__pick) .bevel-grid__n { left: 44px; }
+  .bevel-grid__anchor { font-weight: 500; border-right: 1px solid var(--bevel-line-2); }
+  .bevel-grid__table:has(.bevel-grid__pick):not(:has(.bevel-grid__n)) .bevel-grid__anchor { left: 44px; }
+  .bevel-grid__table:has(.bevel-grid__n):not(:has(.bevel-grid__pick)) .bevel-grid__anchor { left: 48px; }
+  .bevel-grid__table:has(.bevel-grid__pick):has(.bevel-grid__n) .bevel-grid__anchor { left: 92px; }
+
+  /* Row states. Selected takes a brass tint and a brass bar on the spine,
+     hover the sunk tint, changed a brass dog-ear on its first cell. */
+  .bevel-grid__row:hover > :is(td, th) { background: color-mix(in srgb, var(--bevel-sunk) 55%, var(--bevel-surface)); }
+  .bevel-grid__row:has(.bevel-grid__pick input:checked) > :is(td, th) { background: color-mix(in srgb, var(--bevel-brass-soft) 55%, var(--bevel-surface)); }
+  .bevel-grid__row:has(.bevel-grid__pick input:checked) > :first-child { box-shadow: inset 3px 0 0 var(--bevel-brass); }
+  .bevel-grid__row--changed > :first-child { position: sticky; }
+  .bevel-grid__row--changed > :first-child::after {
+    content: ""; position: absolute; left: 0; top: 0; border: 5px solid var(--bevel-brass);
+    border-right-color: transparent; border-bottom-color: transparent;
+  }
+  .bevel-grid__row--disabled > :is(td, th) { color: var(--bevel-faint); }
+  .bevel-grid__row--disabled:hover > :is(td, th) { background: var(--bevel-surface); }
+  .bevel-grid__row:has(.bevel-grid__expand[aria-expanded="true"]) > :is(td, th) { background: color-mix(in srgb, var(--bevel-sunk) 55%, var(--bevel-surface)); border-bottom-color: transparent; }
+  .bevel-grid__detail > td { padding: 0; background: var(--bevel-sunk); border-bottom: 1px solid var(--bevel-line-2); white-space: normal; }
+  .bevel-grid__panel { position: sticky; left: 0; width: fit-content; max-width: 100%; padding: 12px 16px 16px 16px; color: var(--bevel-ink-2); font-size: 14px; }
+  .bevel-grid__panel p { margin: 0; }
+  .bevel-grid__panel p + p { margin-top: 6px; }
+  .bevel-grid__group > th {
+    position: sticky; left: 0; padding: 6px 12px; background: var(--bevel-sunk); text-align: left;
+    border-top: 1px solid var(--bevel-line-2); border-bottom: 1px solid var(--bevel-line);
+    font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bevel-muted);
+  }
+  .bevel-grid__group > th > span { position: sticky; left: 12px; display: inline-flex; gap: 8px; align-items: baseline; }
+
+  /* The expander is the details latch as a button; the menu is a raised
+     square carrying three dots. Both are pressable, so both get the bevel. */
+  .bevel-grid__expand, .bevel-grid__more {
+    appearance: none; -webkit-appearance: none; position: relative; cursor: pointer; padding: 0; line-height: 0;
+    width: 22px; height: 22px; vertical-align: middle; color: var(--bevel-ink);
+    background: var(--bevel-face); border: 2px solid;
+    border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+    border-radius: 0; outline: none;
+  }
+  .bevel-grid__expand { margin-right: 10px; }
+  .bevel-grid__expand:hover, .bevel-grid__more:hover { background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%); }
+  .bevel-grid__expand:active, .bevel-grid__more:active { border-color: var(--bevel-edge-lo) var(--bevel-edge-hi) var(--bevel-edge-hi) var(--bevel-edge-lo); }
+  .bevel-grid__expand:focus-visible, .bevel-grid__more:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+  .bevel-grid__expand::before {
+    content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
+    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
+    transform: translate(-65%, -50%) rotate(-45deg); transition: transform .14s;
+  }
+  .bevel-grid__expand[aria-expanded="true"] {
+    background: var(--bevel-face-in);
+    border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in);
+  }
+  .bevel-grid__expand[aria-expanded="true"]::before { transform: translate(calc(-50% + 1px), calc(-65% + 1px)) rotate(45deg); }
+  .bevel-grid__more::before {
+    content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; translate: -50% -50%;
+    background: currentColor; box-shadow: -5px 0 0 currentColor, 5px 0 0 currentColor;
+  }
+  .bevel-grid__menu { width: 44px; text-align: center; padding-left: 8px; padding-right: 8px; }
+
+  /* The aggregate strip: sticky at the foot of the scroll box, sunk, a mono
+     figure under a faint label. */
+  .bevel-grid__table tfoot :is(th, td) {
+    position: sticky; bottom: 0; z-index: 2; background: var(--bevel-sunk);
+    border-top: 1px solid var(--bevel-line-2); border-bottom: 0; padding: 6px 12px 7px; text-align: left;
+    font-family: var(--bevel-font-mono); font-size: 12.5px; font-weight: 500; color: var(--bevel-ink-2); white-space: nowrap;
+  }
+  .bevel-grid__table tfoot :is(.bevel-grid__pick, .bevel-grid__n, .bevel-grid__anchor) { z-index: 3; }
+  .bevel-grid__table tfoot i { display: block; font-style: normal; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bevel-faint); }
+
+  /* The status bar: selection and range in mono, pages as adjacent small
+     bevel buttons with the current one pressed in. */
+  .bevel-grid__foot {
+    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
+    padding: 10px 16px; border-top: 1px solid var(--bevel-line);
+  }
+  .bevel-grid__status { margin: 0; display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--bevel-font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--bevel-muted); }
+  .bevel-grid__status b, .bevel-grid__selected { font-weight: 600; color: var(--bevel-ink); }
+  .bevel-grid__range { font-variant-numeric: tabular-nums; }
+  .bevel-grid__pages { display: inline-flex; align-items: center; }
+  .bevel-grid__pages > .bevel-button { font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; padding: 3px 6px; min-width: 30px; }
+  .bevel-grid__pages > .bevel-button + .bevel-button { margin-left: -2px; }
+  .bevel-grid__page[aria-current="page"] {
+    background: var(--bevel-face-in);
+    border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in);
+    position: relative; z-index: 1;
+  }
+  .bevel-grid__page[aria-current="page"] .bevel-button__label { translate: 1px 1px; }
+  .bevel-grid__gap { min-width: 26px; text-align: center; font-family: var(--bevel-font-mono); font-size: 11px; color: var(--bevel-faint); }
+
+  /* Empty and loading rows live in the body so the head and the frame stay. */
+  .bevel-grid__empty > td { padding: 34px 24px; text-align: center; white-space: normal; color: var(--bevel-ink-2); border-bottom: 0; }
+  .bevel-grid__empty p { margin: 0; }
+  .bevel-grid__empty .bevel-kicker { margin-bottom: 6px; }
+  .bevel-grid__skel > td { padding: 12px; }
+  .bevel-grid__skel i { display: block; height: 11px; width: 72%; background: var(--bevel-sunk); animation: bevel-skel 1.5s ease-in-out infinite; }
+  .bevel-grid__skel:nth-child(even) i { width: 52%; animation-delay: .12s; }
+  .bevel-grid__skel:nth-child(3n) i { width: 88%; animation-delay: .24s; }
+
+  .bevel-grid--dense { font-size: 13px; }
+  .bevel-grid--dense .bevel-grid__table { font-size: 13px; }
+  .bevel-grid--dense .bevel-grid__table td, .bevel-grid--dense .bevel-grid__table tbody th { padding-top: 4px; padding-bottom: 4px; }
+  .bevel-grid--dense .bevel-grid__table thead th { padding: 7px 12px 6px; font-size: 10.5px; }
+  .bevel-grid--dense .bevel-grid__num, .bevel-grid--dense .bevel-grid__id, .bevel-grid--dense .bevel-grid__date { font-size: 12.5px; }
+  .bevel-grid--ruled .bevel-grid__table :is(td, th):not(:last-child) { border-right: 1px solid var(--bevel-line); }
+  .bevel-grid--ruled .bevel-grid__anchor { border-right-color: var(--bevel-line-2); }
+  .bevel-grid--striped .bevel-grid__row:nth-child(even of .bevel-grid__row) > :is(td, th) { background: color-mix(in srgb, var(--bevel-sunk) 40%, var(--bevel-surface)); }
+
+  /* ============================ SKELETON, EMPTY ============================ */
+  .bevel-skel { background: var(--bevel-surface); border: 1px solid var(--bevel-line); border-radius: 0; padding: 20px 22px; display: grid; gap: 11px; }
+  .bevel-skel i { display: block; height: 12px; background: var(--bevel-sunk); animation: bevel-skel 1.5s ease-in-out infinite; }
+  .bevel-skel i.hd { height: 17px; }
+  .bevel-skel i:nth-child(2) { animation-delay: .12s; }
+  .bevel-skel i:nth-child(3) { animation-delay: .24s; }
+  .bevel-skel i:nth-child(4) { animation-delay: .36s; }
+  @keyframes bevel-skel { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
+  .bevel-empty { border: 1px dashed var(--bevel-line-2); border-radius: 0; padding: 34px 24px; text-align: center; }
+  .bevel-empty > p { font-size: 14.5px; color: var(--bevel-ink-2); max-width: 46ch; margin: 8px auto 16px; }
+  .bevel-empty > .bevel-kicker { margin: 0; color: var(--bevel-muted); }
+
+  /* ============================ ROWS ============================ */
+  /* Labeled rows record decisions; evidence rows test claims. */
+  .bevel-rev { display: grid; gap: 14px; }
+  .bevel-rev__row {
+    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
+    padding: 14px 16px; background: var(--bevel-surface); border: 1px solid var(--bevel-line); border-radius: 0;
+  }
+  .bevel-rev__k { font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bevel-muted); white-space: nowrap; }
+  .bevel-rev__row p { margin: 0; font-size: 15px; }
+  .bevel-rev__row p b { font-family: var(--bevel-font-mono); font-size: 14px; color: var(--bevel-ox); }
+  .bevel-ev { border-top: 1px solid var(--bevel-line); }
+  .bevel-ev__row { display: grid; grid-template-columns: 132px 1fr; gap: 22px; padding: 19px 0; border-bottom: 1px solid var(--bevel-line); align-items: start; }
+  .bevel-ev__row > h4, .bevel-ev__row > p { grid-column: 2; }
+  .bevel-ev__row h4 { margin: 0; font-family: var(--bevel-font-sans); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; }
+  .bevel-ev__row p { margin: 5px 0 0; font-size: 15px; color: var(--bevel-ink-2); }
+  @media (max-width: 640px) {
+    .bevel-ev__row { grid-template-columns: 1fr; gap: 9px; }
+    .bevel-ev__row > h4, .bevel-ev__row > p { grid-column: auto; }
+  }
+
+  /* ============================ TABS ============================ */
+  /* Mono caps on a shared hairline; the selected tab re-inks and takes a 2px
+     brass underline. A tab is a place, not a press, so it stays flat. */
+  .bevel-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bevel-line); overflow-x: auto; scrollbar-width: thin; }
+  .bevel-tabs__tab {
+    appearance: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
+    font-family: var(--bevel-font-mono); font-size: 11.5px; font-weight: 500; line-height: 1.5;
+    letter-spacing: .09em; text-transform: uppercase; color: var(--bevel-muted);
+    padding: 10px 12px 9px; margin-bottom: -1px; border-bottom: 2px solid transparent;
+    transition: color .14s, border-color .14s;
+  }
+  .bevel-tabs__tab:hover { color: var(--bevel-ink); }
+  .bevel-tabs__tab[aria-selected="true"] { color: var(--bevel-ink); border-bottom-color: var(--bevel-brass); }
+  .bevel-tabs__tab:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
+  .bevel-tabpanel { padding-top: 16px; }
+  .bevel-tabpanel[hidden] { display: none; }
+
+  /* ============================ DETAILS ============================ */
+  /* A boxed stack of drawers. The summary is pressable, so it carries a
+     beveled latch that takes the checked recess while the drawer is open, and
+     the open body is a sunk panel directly under it, edge to edge, so every
+     line meets the box. Native details, so it works without script and the
+     open attribute round-trips. Body text aligns with the summary text. */
+  .bevel-details { background: var(--bevel-surface); border: 1px solid var(--bevel-line); border-radius: 0; }
+  .bevel-details + .bevel-details { border-top: 0; }
+  .bevel-details[open] + .bevel-details { border-top: 1px solid var(--bevel-line); }
+  .bevel-details > summary {
+    list-style: none; cursor: pointer; position: relative; user-select: none;
+    display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px;
+    font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--bevel-ink);
+  }
+  .bevel-details > summary::-webkit-details-marker { display: none; }
+  .bevel-details > summary:hover { background: color-mix(in srgb, var(--bevel-sunk) 55%, var(--bevel-surface)); }
+  .bevel-details > summary::before {
+    content: ""; flex-shrink: 0; width: 22px; height: 22px;
+    background: var(--bevel-face); border: 2px solid;
+    border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+  }
+  /* The chevron sits on the latch and points where the body will open. */
+  .bevel-details > summary::after {
+    content: ""; position: absolute; left: 23px; top: 50%; width: 6px; height: 6px;
+    border-right: 1.5px solid var(--bevel-ink); border-bottom: 1.5px solid var(--bevel-ink);
+    transform: translate(-65%, -50%) rotate(-45deg); transition: transform .14s;
+  }
+  .bevel-details[open] > summary::before {
+    background: var(--bevel-face-in);
+    border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in);
+  }
+  .bevel-details[open] > summary::after { transform: translate(calc(-50% + 1px), calc(-65% + 1px)) rotate(45deg); }
+  .bevel-details > summary:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
+  .bevel-details__body {
+    padding: 12px 16px 14px 46px; border-top: 1px solid var(--bevel-line);
+    background: var(--bevel-sunk); font-size: 15.5px; line-height: 1.55; color: var(--bevel-ink-2);
+  }
+  .bevel-details__body p { margin: 0; }
+  .bevel-details__body p + p { margin-top: 8px; }
+
+  /* ============================ SEGMENTED ============================ */
+  /* Adjacent bevel buttons; the pressed one takes the checked recess. */
+  .bevel-seg { display: inline-flex; }
+  .bevel-seg > .bevel-button { font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; }
+  .bevel-seg > .bevel-button + .bevel-button { margin-left: -2px; }
+  .bevel-seg > .bevel-button[aria-pressed="true"] {
+    background: var(--bevel-face-in);
+    border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in);
+    color: var(--bevel-ink); position: relative; z-index: 1;
+  }
+  .bevel-seg > .bevel-button[aria-pressed="true"] .bevel-button__label { translate: 1px 1px; }
+
+  /* ============================ STEPS ============================ */
+  .bevel-steps { list-style: none; margin: 0; padding: 0; position: relative; }
+  .bevel-steps::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 1px; background: var(--bevel-line); }
+  .bevel-steps > li { position: relative; padding: 0 0 22px 44px; counter-increment: bevel-step; }
+  .bevel-steps > li:last-child { padding-bottom: 0; }
+  .bevel-steps > li::before {
+    content: counter(bevel-step); position: absolute; left: 0; top: 0; width: 25px; height: 25px;
+    display: flex; align-items: center; justify-content: center;
+    font-family: var(--bevel-font-mono); font-size: 11.5px; font-weight: 600;
+    background: var(--bevel-surface); border: 1px solid var(--bevel-line-2); color: var(--bevel-muted);
+  }
+  .bevel-steps > li.done::before { content: "\2713"; background: var(--bevel-teal-soft); border-color: color-mix(in srgb, var(--bevel-teal) 40%, var(--bevel-teal-soft)); color: var(--bevel-teal); }
+  .bevel-steps > li.now::before { border-color: var(--bevel-brass); color: var(--bevel-brass); box-shadow: 0 0 0 2px var(--bevel-brass-soft); }
+  .bevel-steps > li h4 { margin: 0; font-family: var(--bevel-font-sans); font-size: 16px; font-weight: 600; line-height: 1.5; }
+  .bevel-steps > li.now h4::after { content: "now"; margin-left: 10px; font-family: var(--bevel-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bevel-brass); }
+  .bevel-steps > li p { margin: 3px 0 0; font-size: 15px; color: var(--bevel-muted); }
+  .bevel-steps > li:not(.done):not(.now) h4 { color: var(--bevel-muted); }
+
+  /* ============================ TIP, KBD ============================ */
+  .bevel-tip { font-style: normal; text-decoration: underline dotted; text-decoration-color: var(--bevel-faint); text-underline-offset: 3px; cursor: help; position: relative; }
+  .bevel-tip::after {
+    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+    background: var(--bevel-ink); color: var(--bevel-ground);
+    font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .02em;
+    padding: 5px 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .14s; z-index: 5;
+  }
+  .bevel-tip:hover::after, .bevel-tip:focus-visible::after { opacity: 1; }
+  .bevel-kbd, .bevel-page :where(kbd) {
+    font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500; line-height: 1;
+    background: var(--bevel-sunk); border: 1px solid var(--bevel-line-2); border-radius: 0;
+    padding: 2.5px 5.5px; color: var(--bevel-muted); white-space: nowrap;
+  }
+
+  /* ============================ EYEBROW, KICKER, PROSE ============================ */
+  .bevel-eyebrow {
+    display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0;
+    font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500;
+    letter-spacing: .17em; text-transform: uppercase; color: var(--bevel-brass);
+    padding-bottom: 9px; border-bottom: 1px solid var(--bevel-line);
+  }
+  .bevel-eyebrow span { color: var(--bevel-faint); letter-spacing: .09em; }
+  .bevel-eyebrow--bare { border-bottom: 0; padding-bottom: 0; display: block; }
+  .bevel-kicker { margin: 0; font-family: var(--bevel-font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bevel-muted); }
+  .bevel-lede { font-size: 18.5px; line-height: 1.58; color: var(--bevel-ink-2); }
+  .bevel-measure { max-width: 70ch; }
+  .bevel-pull {
+    font-family: var(--bevel-font-serif); font-size: clamp(22px, 3vw, 27px); font-style: italic; font-weight: 400;
+    line-height: 1.35; letter-spacing: -.012em; color: var(--bevel-ink); text-wrap: balance; margin: 0;
+    border-top: 1px solid var(--bevel-line); border-bottom: 1px solid var(--bevel-line); padding: 26px 0;
+  }
+  .bevel-pull cite { display: block; margin-top: 12px; font-family: var(--bevel-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--bevel-muted); font-style: normal; }
+
+  /* ============================ MASTHEAD, VERDICT ============================ */
+  .bevel-mast { border-bottom: 1px solid var(--bevel-line); padding: 46px 0 30px; }
+  .bevel-mast__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
+  .bevel-mast h1 { margin: 14px 0 0; font-family: var(--bevel-font-serif); font-weight: 500; font-size: clamp(38px, 5.6vw, 62px); line-height: 1.02; letter-spacing: -.022em; text-wrap: balance; }
+  .bevel-mast h1 em { font-style: normal; font-weight: 600; }
+  .bevel-mast__dek { margin: 20px 0 0; font-size: 18.5px; line-height: 1.58; color: var(--bevel-ink-2); max-width: 62ch; }
+  .bevel-mast__tape { display: flex; flex-wrap: wrap; gap: 0; margin: 30px 0 0; border: 1px solid var(--bevel-line); border-radius: 0; overflow: hidden; background: var(--bevel-surface); }
+  .bevel-mast__tape > div { flex: 1 1 128px; padding: 12px 16px; border-right: 1px solid var(--bevel-line); }
+  .bevel-mast__tape > div:last-child { border-right: 0; }
+  .bevel-mast__tape dt { margin: 0; font-family: var(--bevel-font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--bevel-faint); }
+  .bevel-mast__tape dd { margin: 3px 0 0; font-family: var(--bevel-font-mono); font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
+  .bevel-mast__tape dd small { font-size: 12px; font-weight: 400; color: var(--bevel-muted); letter-spacing: 0; }
+  .bevel-mast__tape .dn { color: var(--bevel-ox); }
+  .bevel-verdict { background: var(--bevel-surface); border: 1px solid var(--bevel-line); border-radius: 0; padding: 30px 32px; box-shadow: var(--bevel-shadow); }
+  .bevel-verdict h2 { margin: 0 0 14px; font-family: var(--bevel-font-serif); font-weight: 500; font-size: 27px; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
+  .bevel-verdict p { margin: 0; max-width: 74ch; }
+  .bevel-verdict p + p { margin-top: 13px; }
+  .bevel-card { background: var(--bevel-surface); border: 1px solid var(--bevel-line); border-radius: 0; padding: 20px 22px; box-shadow: var(--bevel-shadow); }
+
+  /* ============================ PAGE ============================ */
+  /* The scaffold: bevel-page on <body> gives a centered column and the
+     typographic defaults. Every rule rides :where() (zero specificity) so any
+     class beats it. Flow rhythm targets direct children only. */
+  .bevel-page { max-width: 768px; margin-inline: auto; padding: 48px 24px 96px; }
+  .bevel-page--wide { max-width: 1080px; }
+  .bevel-page :where(h1, h2, h3, h4) { margin: 0; font-family: var(--bevel-font-serif); font-weight: 400; line-height: 1.15; text-wrap: balance; }
+  .bevel-page :where(h1) { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.012em; }
+  .bevel-page :where(h2) { font-size: 29px; line-height: 1.18; letter-spacing: -.016em; }
+  .bevel-page :where(h3) { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
+  .bevel-page :where(h4) { font-family: var(--bevel-font-sans); font-size: 16px; font-weight: 600; line-height: 1.5; }
+  .bevel-page :where(h1 em, h2 em, h3 em) { font-style: normal; font-weight: 600; }
+  .bevel-page :where(p) { margin: 0; text-wrap: pretty; }
+  .bevel-page :where(p + p) { margin-block-start: 13px; }
+  .bevel-page :where(a) { color: var(--bevel-brass); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--bevel-brass) 40%, transparent); transition: text-decoration-color .14s; }
+  .bevel-page :where(a:hover) { text-decoration-color: var(--bevel-brass); }
+  .bevel-page :where(b, strong) { font-weight: 600; color: var(--bevel-ink); }
+  .bevel-page :where(code) { font-family: var(--bevel-font-mono); font-size: .85em; padding: 1px 5px; background: var(--bevel-sunk); border: 1px solid var(--bevel-line); color: var(--bevel-ink); }
+  .bevel-page :where(pre) { margin: 0; padding: 14px 16px; font-family: var(--bevel-font-mono); font-size: 13px; line-height: 1.55; overflow-x: auto; background: var(--bevel-sunk); border: 1px solid var(--bevel-line); color: var(--bevel-ink); scrollbar-width: thin; }
+  .bevel-page :where(pre code) { padding: 0; border: 0; background: none; font-size: inherit; }
+  .bevel-page :where(hr) { border: 0; border-top: 1px solid var(--bevel-line); margin: 0; }
+  .bevel-page :where(blockquote) { margin: 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--bevel-line-2); color: var(--bevel-ink-2); }
+
+  .bevel-page > :where(* + *) { margin-block-start: 14px; }
+  .bevel-page > :where(h1, h2, h3, h4):where(* + *) { margin-block-start: 40px; }
+  .bevel-page > :where(section + section) { margin-block-start: 56px; }
+  .bevel-page > :where(.bevel-eyebrow + *), .bevel-page > :where(* + .bevel-hint) { margin-block-start: 8px; }
+  .bevel-page > :where(.bevel-mast + *) { margin-block-start: 44px; }
+  .bevel-page > :where(.bevel-verdict + *) { margin-block-start: 56px; }
+  .bevel-section > :where(* + *) { margin-block-start: 14px; }
+  .bevel-section > :where(.bevel-eyebrow + *) { margin-block-start: 22px; }
+  .bevel-section > :where(h3):where(* + *) { margin-block-start: 30px; }
+  .bevel-section > :where(h3 + *) { margin-block-start: 9px; }
+}
+
+/* Respect the machine. Unlayered, so it beats every layered rule without !important. */
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after { transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
+  .bevel-button:active .bevel-button__label { translate: none; }
+}
+@media (forced-colors: active) {
+  .bevel-button, .bevel-checkbox__box, .bevel-radio__ring, .bevel-toggle__track, .bevel-slider__nub, .bevel-tags__chip, .bevel-details > summary::before, .bevel-grid__expand, .bevel-grid__more { border: 1px solid ButtonText; }
+  .bevel-radio__ring::after { background: ButtonText; }
+  .bevel-progress { forced-color-adjust: none; background: Canvas; border: 1px solid ButtonText; }
+  .bevel-progress::-webkit-progress-bar { background: Canvas; }
+  .bevel-progress::-webkit-progress-value, .bevel-progress::-moz-progress-bar { background: ButtonText; }
+}
+@media print {
+  :root { color-scheme: light; --bevel-shadow: none; }
+  .bevel-page { max-width: none; padding: 0; }
+  .bevel-verdict, .bevel-note, .bevel-card, .bevel-scroll { break-inside: avoid; }
+}