/*
 * 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-split-size: 50%;
    --bevel-kanban-lane: 274px;
    --bevel-kanban-gap: 14px;
    --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);

    /* Source colour. Five roles borrow a page hue so a code surface still reads
       as a Bevel surface; attribute names and numbers need two hues the page
       does not have, or they collapse into the tag and string colours. */
    --bevel-syn-tag:     var(--bevel-brass);
    --bevel-syn-string:  var(--bevel-teal);
    --bevel-syn-comment: var(--bevel-faint);
    --bevel-syn-punct:   var(--bevel-muted);
    --bevel-syn-invalid: var(--bevel-ox);
    --bevel-syn-plum:    light-dark(#6E4076, #C39BD8);
    --bevel-syn-rust:    light-dark(#8A4A28, #E0906A);

    /* The software keyboard inset. iOS does not shrink the layout viewport when
       the keyboard opens, so a bar pinned to the bottom lands underneath it. The
       code editor measures the visual viewport and writes this on its own root. */
    --bevel-keyboard-inset: 0px;
    --bevel-available-height: calc(100dvh - 32px);

    /* 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; }
}

@media (max-width: 640px) {
  .bevel-app-shell > .bevel-sidebar { display: none; }
  .bevel-button.bevel-sidebar-mobile-trigger { display: inline-flex; margin-block-end: 12px; }
  .bevel-app-content { padding: 18px 14px; }
}



@layer components {
  .bevel-modal,
  .bevel-drawer,
  .bevel-menu,
  .bevel-popconfirm,
  .bevel-combobox__listbox,
  .bevel-multiselect__panel {
    color: var(--bevel-ink);
    background: var(--bevel-surface);
    border: 1px solid var(--bevel-line-2);
    box-shadow: 8px 8px 0 var(--bevel-shadow);
    padding: 0;
    max-height: var(--bevel-available-height, calc(100dvh - 32px));
  }
  .bevel-modal { inline-size: min(620px, calc(100vw - 32px)); }
  .bevel-modal::backdrop,
  .bevel-drawer::backdrop { background: color-mix(in srgb, var(--bevel-ground) 70%, transparent); }
  .bevel-modal__header,
  .bevel-drawer__header { border-bottom: 1px solid var(--bevel-line-2); padding: 20px 68px 18px 22px; position: relative; }
  .bevel-modal__body,
  .bevel-drawer__body { overflow: auto; padding: 22px; }
  .bevel-modal__footer,
  .bevel-drawer__footer { border-top: 1px solid var(--bevel-line-2); padding: 14px 22px; display: flex; justify-content: flex-end; gap: 10px; }
  .bevel-modal__close,
  .bevel-drawer__close { position: absolute; inset: 0 0 auto auto; inline-size: 68px; block-size: 68px; color: var(--bevel-ink); background: var(--bevel-face); border: 0; border-left: 1px solid var(--bevel-line-2); border-bottom: 1px solid var(--bevel-line-2); }
  .bevel-drawer { margin: 0 0 0 auto; inline-size: min(460px, 100vw); block-size: 100dvh; max-block-size: 100dvh; }
  .bevel-menu,
  .bevel-popconfirm,
  .bevel-combobox__listbox,
  .bevel-multiselect__panel { position: fixed; margin: 0; inline-size: max-content; min-inline-size: 220px; padding: 6px; overflow: auto; }
  .bevel-menu [role="menuitem"],
  .bevel-combobox [role="option"] { display: flex; inline-size: 100%; padding: 8px 10px; border: 0; background: transparent; color: var(--bevel-ink); text-align: left; }
  .bevel-menu [role="menuitem"]:focus,
  .bevel-combobox [role="option"][aria-selected="true"] { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
  .bevel-popconfirm { max-inline-size: 310px; padding: 18px; }
  .bevel-popconfirm__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
  .bevel-combobox,
  .bevel-multiselect { position: relative; }
  .bevel-multiselect__summary,
  .bevel-inline-edit__value,
  .bevel-inline-edit__input,
  .bevel-pagination__range,
  .bevel-kanban__search,
  .bevel-kanban__count,
  .bevel-kanban__title,
  .bevel-kanban__description { min-inline-size: 0; }
  .bevel-multiselect__tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .bevel-choice-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 22px; background: var(--bevel-surface); border: 1px solid var(--bevel-line-2); cursor: pointer; }
  .bevel-choice-cards { display:grid; gap:16px; }
  .bevel-choice-cards .bevel-choice-card { inline-size:100%; }
  .bevel-choice-card:has(input:checked) { border-color: var(--bevel-brass); background: color-mix(in srgb,var(--bevel-brass-soft) 60%,var(--bevel-surface)); box-shadow: inset 3px 0 var(--bevel-brass); }
  .bevel-choice-card:has(:disabled) { opacity: .7; cursor: not-allowed; }
  .bevel-choice-card__copy strong { display:block; font-size:15.5px; font-weight:500; }
  .bevel-choice-card__copy p { margin:5px 0 10px; color:var(--bevel-ink-2); font-size:13.5px; }
  .bevel-choice-card .bevel-badge { text-transform:none; letter-spacing:0; font-weight:400; }
  .bevel-dropzone { background: transparent; }
  .bevel-dropzone__target { display:grid; justify-items:center; gap:8px; padding:32px; border:1px dashed var(--bevel-line-2); text-align:center; background:var(--bevel-surface); }
  .bevel-dropzone__target svg { inline-size:28px; block-size:28px; color:var(--bevel-brass); }
  .bevel-dropzone__title { margin:0; font:500 15.5px/1.3 var(--bevel-font-sans); }
  .bevel-dropzone__hint { margin:0 0 8px; color:var(--bevel-muted); font-size:13px; }
  .bevel-dropzone__target .bevel-button { position:relative; }
  .bevel-dropzone[data-bevel-dragging] { outline: 3px solid var(--bevel-brass); outline-offset: -4px; }
  .bevel-upload { display:grid; grid-template-columns:minmax(0, 1fr); margin-top:0; }
  .bevel-upload__row { display:flex; gap:12px; align-items:center; padding:15px 0; border-bottom:1px solid var(--bevel-line); background:transparent; }
  .bevel-upload__preview { display:grid; flex:0 0 auto; place-items:center; inline-size:50px; block-size:44px; color:var(--bevel-muted); }
  .bevel-upload__preview img { inline-size:100%; block-size:100%; object-fit:cover; }
  .bevel-upload__preview svg { inline-size:26px; block-size:26px; stroke-width:1.5; }
  .bevel-upload__preview img:not([hidden]) + svg,
  .bevel-upload__preview:has(img:not([hidden])) > svg { display:none; }
  .bevel-upload__copy { display:block; flex:1; min-inline-size:0; text-align:left; }
  .bevel-upload__name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; }
  .bevel-upload__meta,
  .bevel-upload__status { color:var(--bevel-muted); font-size:12px; }
  .bevel-upload__meta + .bevel-upload__status::before { content:" · "; }
  .bevel-upload__row[data-bevel-status="error"] .bevel-upload__status,
  .bevel-upload__rejection { color:var(--bevel-ox); }
  .bevel-upload__progress { display:block; inline-size:100%; block-size:4px; margin-top:8px; border:0; border-radius:0; background:var(--bevel-line); appearance:none; }
  .bevel-upload__progress::-webkit-progress-bar { background:var(--bevel-line); }
  .bevel-upload__progress::-webkit-progress-value { background:var(--bevel-brass); }
  .bevel-upload__progress::-moz-progress-bar { background:var(--bevel-brass); }
  .bevel-upload__row:not([data-bevel-status="uploading"]) .bevel-upload__progress { display:none; }
  .bevel-upload__state { flex:0 0 auto; color:var(--bevel-ink); font:500 12px/1 var(--bevel-font-mono); }
  .bevel-upload__row[data-bevel-status="uploading"] .bevel-upload__state { padding:3px 7px; color:var(--bevel-brass); background:var(--bevel-brass-soft); }
  .bevel-upload__row[data-bevel-status="uploaded"] .bevel-upload__state { color:var(--bevel-teal); }
  .bevel-upload__row[data-bevel-status="error"] .bevel-upload__state { color:var(--bevel-ox); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
  .bevel-upload__actions { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; gap:8px; }
  .bevel-upload__actions .bevel-button { min-height:30px; padding:3px 9px; font-size:12px; }
  .bevel-upload__actions .bevel-button[hidden] { display:none; }
  .bevel-upload__row:not([data-bevel-status="selected"]) [data-bevel-upload-select-action] { display:none; }
  .bevel-upload__row[data-bevel-status="uploaded"] [data-bevel-upload-retry],
  .bevel-upload__row[data-bevel-status="uploading"] [data-bevel-upload-retry] { display:none; }
  .bevel-upload__link { color:var(--bevel-brass); font-size:12px; }
  .bevel-upload__rejection { margin:0; padding:10px 12px; border-inline-start:3px solid var(--bevel-ox); background:var(--bevel-surface); font-size:12px; text-align:left; }
  .bevel-dropzone__transport { margin:12px 0 0; color:var(--bevel-muted); font-size:12px; }
  @media (max-width:540px) {
    .bevel-dropzone__target { padding:24px 18px; }
    .bevel-upload__row { flex-wrap:wrap; }
    .bevel-upload__preview { inline-size:50px; block-size:44px; }
    .bevel-upload__actions { justify-content:flex-start; }
  }
  .bevel-inline-edit__editor { display: none; }
  .bevel-inline-edit[data-bevel-editing] > .bevel-inline-edit__editor { display: flex; gap: 8px; }
  .bevel-inline-edit[data-bevel-editing] > .bevel-inline-edit__display { display: none; }
  .bevel-inline-edit--title { max-inline-size:520px; margin:38px auto 0; }
  .bevel-inline-edit__eyebrow { font:500 10px/1.6 var(--bevel-font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--bevel-muted); }
  .bevel-inline-edit__hint .bevel-inline-edit__eyebrow { color:var(--bevel-brass); }
  .bevel-inline-edit__row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; margin-top:22px; border-block:1px solid var(--bevel-line); }
  .bevel-inline-edit--title .bevel-inline-edit__value { margin:0; font:400 32px/1.1 var(--bevel-font-serif); overflow-wrap:anywhere; }
  .bevel-inline-edit__note { margin:12px 0 0; font-size:13px; color:var(--bevel-muted); }
  .bevel-inline-edit--title[data-bevel-editing] > .bevel-inline-edit__editor { display:block; }
  .bevel-inline-edit__hint { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:22px; }
  .bevel-inline-edit__keys { color:var(--bevel-muted); font-size:11px; }
  .bevel-inline-edit__keys kbd { font-family:var(--bevel-font-mono); border:1px solid var(--bevel-line-2); padding:1px 4px; }
  .bevel-inline-edit--title .bevel-inline-edit__input { position:relative; margin:0; padding:18px 0 16px; min-height:0; font:400 32px/1.1 var(--bevel-font-serif); border:0; border-top:1px solid var(--bevel-line); border-bottom:2px solid var(--bevel-brass); color:var(--bevel-ink); background:transparent; outline:0; overflow-wrap:anywhere; }
  .bevel-inline-edit--title .bevel-inline-edit__input[aria-invalid="true"] { border-bottom-color:var(--bevel-ox); color:var(--bevel-ox); }
  .bevel-inline-edit--title .bevel-inline-edit__input::before { position:absolute; inset:18px 0 auto; font-style:italic; }
  .bevel-inline-edit__error { display:flex; align-items:center; gap:6px; color:var(--bevel-ox); font-size:12.5px; margin:8px 0; }
  .bevel-inline-edit__error[hidden] { display:none; }
  .bevel-inline-edit__actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
  .bevel-inline-edit--title .bevel-button { min-height:36px; padding:5px 13px; font-size:13.5px; }
  @media (max-width:540px) {
    .bevel-inline-edit--title { margin-top:24px; }
    .bevel-inline-edit--title .bevel-inline-edit__input,
    .bevel-inline-edit--title .bevel-inline-edit__value { font-size:27px; }
  }
  .bevel-settings { border-bottom:1px solid var(--bevel-line-2); }
  .bevel-settings__row { display:grid; grid-template-columns:1fr 190px; gap:24px; align-items:center; padding:20px 0; border-bottom:1px solid var(--bevel-line); }
  .bevel-settings__row:last-child { border-bottom:0; }
  .bevel-settings__copy strong { font-size:15px; font-weight:500; }
  .bevel-settings__copy p { margin:4px 0 0; max-width:44ch; color:var(--bevel-ink-2); font-size:13px; }
  .bevel-settings__control { justify-self:end; width:190px; }
  .bevel-settings__row > .bevel-button.bevel-settings__control { min-width:120px; width:auto; }
  .bevel-settings .bevel-select__field { min-height:36px; height:36px; padding:6px 32px 6px 11px; font-size:14px; }
  .bevel-settings .bevel-button { min-height:36px; height:36px; font-size:13.5px; }
  .bevel-errors { display:flex; align-items:flex-start; gap:12px; border:0; border-left:3px solid var(--bevel-ox); background:var(--bevel-ox-soft); padding:14px 16px; font-size:13.5px; line-height:1.5; }
  .bevel-errors[hidden] { display:none; }
  .bevel-errors__list { margin:6px 0 0; padding-left:18px; display:grid; gap:3px; }
  .bevel-errors__list a { color:var(--bevel-ox); font-weight:500; }
  .bevel-errors > svg { flex:none; margin-top:2px; color:var(--bevel-ox); }
  .bevel-field-error { display:flex; align-items:center; gap:6px; margin-top:6px; color:var(--bevel-ox); font-size:12.5px; }
  .bevel-field-error[hidden] { display:none; }
  .bevel-field-error svg { flex:none; }
  .bevel-validation-form__fields { display:grid; gap:14px; margin-top:18px; }
  .bevel-validation-form__field { display:grid; gap:4px; color:var(--bevel-ink); font-size:14px; }
  .bevel-validation-form__field:has(input[aria-invalid="true"]) { color:var(--bevel-ox); }
  .bevel-validation-form .bevel-input { background:var(--bevel-surface); color:var(--bevel-ink); }
  .bevel-validation-form .bevel-input[aria-invalid="true"] { min-height:38px; height:38px; background:color-mix(in srgb, var(--bevel-ox-soft) 32%, var(--bevel-ground)); color:var(--bevel-ink); border-color:var(--bevel-ox); outline:1px solid var(--bevel-ox); outline-offset:-1px; }
  .bevel-validation-form__field > small[hidden] { display:none; }
  .bevel-validation-form__actions .bevel-button { min-height:36px; padding:5px 13px; font-size:13.5px; }
  .bevel-validation-form__actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--bevel-line); }
  .bevel-split-button { display:inline-flex; align-items:stretch; height:36px; border:2px solid; border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi); background:var(--bevel-face); position:relative; }
  .bevel-split-button[hidden], .bevel-edge-cases[hidden] { display:none; }
  .bevel-split-button > button { height:32px; min-height:0; border:0; background:var(--bevel-face); color:var(--bevel-ink); box-shadow:none; transform:none; font-size:13.5px; }
  .bevel-split-button > .bevel-button { padding:0 12px 0 11px; }
  .bevel-split-button > .bevel-button .bevel-button__label { display:inline-flex; align-items:center; gap:8px; }
  .bevel-split-button > .bevel-split-button__caret { display:inline-grid; place-items:center; width:30px; padding:0; border-left:1px solid var(--bevel-edge-lo); box-shadow:inset 1px 0 var(--bevel-edge-hi); }
  .bevel-split-button__caret[aria-expanded="true"] svg { transform:rotate(180deg); }
  .bevel-split-button:has(:disabled) { opacity:.5; }
  .bevel-split-button .bevel-menu { inset:auto; }
  .bevel-document-panel { min-height:345px; padding:24px; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); }
  .bevel-document-panel__label { margin:0 0 16px; color:var(--bevel-muted); font:11px var(--bevel-font-mono); letter-spacing:.04em; }
  .bevel-document-panel__row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .bevel-document-panel h2 { margin:0; font:400 26px var(--bevel-font-serif); }
  .bevel-document-panel__description { margin:6px 0 0; color:var(--bevel-muted); font-size:13px; }
  .bevel-document-panel__note { margin:38px 0 0; color:var(--bevel-muted); font-size:13px; }
  .bevel-app-shell { display: flex; min-block-size: 380px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-navigation-example { max-inline-size: 1120px; margin-inline: auto; padding: 48px 38px; }
  .bevel-navigation-example > .bevel-example__header { max-width: none; margin-bottom: 26px; padding-block-end: 18px; border-bottom: 1px solid var(--bevel-line-2); }
  .bevel-navigation-example > .bevel-example__header .bevel-eyebrow { margin-bottom: 10px; padding: 0; border: 0; font-size: 10px; line-height: 1.6; letter-spacing: .16em; }
  .bevel-navigation-example > .bevel-example__header h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.022em; }
  .bevel-navigation-example > .bevel-example__header p { margin: 8px 0 0; color: var(--bevel-ink-2); font-size: 14px; }
  .bevel-sidebar { position: relative; display: flex; flex: 0 0 212px; flex-direction: column; inline-size: 212px; background: var(--bevel-sunk); border-right: 1px solid var(--bevel-line-2); transition: inline-size 160ms ease, flex-basis 160ms ease; }
  .bevel-sidebar[data-bevel-collapsed] { flex-basis: 68px; inline-size: 68px; }
  .bevel-sidebar__brand { display: flex; align-items: center; gap: 9px; min-block-size: 64px; padding: 16px 12px 16px 16px; border-bottom: 1px solid var(--bevel-line); }
  .bevel-sidebar__brand > svg { width: 18px; height: 18px; color: var(--bevel-brass); }
  .bevel-sidebar__brand strong { flex: 1; overflow: hidden; font: 400 18px var(--bevel-font-serif); text-overflow: ellipsis; white-space: nowrap; }
  .bevel-sidebar__collapse { display: grid; flex: 0 0 26px; place-items: center; inline-size: 26px; block-size: 26px; margin-inline-start: auto; padding: 0; border: 2px solid; border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi); background: var(--bevel-face); color: var(--bevel-ink); }
  .bevel-sidebar__collapse svg { transition: transform 160ms ease; }
  .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__collapse svg { transform: rotate(180deg); }
  .bevel-sidebar__links { flex: 1; padding: 14px 9px; }
  .bevel-sidebar__section { padding: 0 9px 8px; color: var(--bevel-muted); font: 500 10px/1.6 var(--bevel-font-mono); letter-spacing: .14em; text-transform: uppercase; }
  .bevel-sidebar__link { display: flex; align-items: center; gap: 9px; inline-size: 100%; min-block-size: 36px; margin: 2px 0; padding: 8px 9px; color: var(--bevel-ink-2); font-size: 13.5px; text-decoration: none; }
  .bevel-sidebar__link[aria-current="page"] { color: var(--bevel-ink); background: var(--bevel-surface); box-shadow: inset 2px 0 var(--bevel-brass), 0 0 0 1px var(--bevel-line); }
  .bevel-sidebar__count { margin-inline-start: auto; padding: 1px 5px; border: 1px solid var(--bevel-line); background: var(--bevel-surface); color: var(--bevel-muted); font: 500 10.5px var(--bevel-font-mono); }
  .bevel-sidebar__identity { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-top: 1px solid var(--bevel-line-2); font-size: 12px; }
  .bevel-sidebar__avatar { display: grid; flex: 0 0 34px; place-items: center; inline-size: 34px; block-size: 34px; border: 1px solid var(--bevel-line); background: var(--bevel-ink); color: var(--bevel-ground); font: 500 11px var(--bevel-font-mono); }
  .bevel-sidebar__identity-copy { flex: 1; min-inline-size: 0; }
  .bevel-sidebar__identity-copy strong, .bevel-sidebar__identity-copy small { display: block; white-space: nowrap; }
  .bevel-sidebar__identity-copy strong { font-size: 13px; font-weight: 500; }
  .bevel-sidebar__identity-copy small { color: var(--bevel-muted); margin-top: 1px; font-size: 11px; }
  .bevel-sidebar__account { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--bevel-muted); }
  .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__account { display: none; }
  .bevel-sidebar__link svg { color: var(--bevel-muted); }
  .bevel-sidebar__link[aria-current="page"] svg { color: var(--bevel-ink); }
  .bevel-sidebar__link[aria-current="page"] .bevel-sidebar__count { color: var(--bevel-ink); background: var(--bevel-brass-soft); border-color: color-mix(in srgb, var(--bevel-brass) 25%, var(--bevel-brass-soft)); }
  .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__brand { flex-direction: column; gap: 12px; padding: 16px 8px; }
  .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__collapse { margin: 0; }
  .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__label, .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__section, .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__count, .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__identity-copy { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__link, .bevel-sidebar[data-bevel-collapsed] .bevel-sidebar__identity { justify-content: center; padding-inline: 0; }
  .bevel-app-content { flex: 1; min-inline-size: 0; padding: 22px 26px; }
  .bevel-app-content > .bevel-eyebrow { border: 0; padding: 0; color: var(--bevel-muted); font-size: 10px; line-height: 1.6; }
  .bevel-app-content h2 { margin: 2px 0 0; font: 400 27px/1.15 var(--bevel-font-serif); }
  .bevel-app-content > p { margin: 8px 0 14px; color: var(--bevel-muted); font-size: 13px; }
  .bevel-document-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--bevel-line); color: var(--bevel-ink); text-decoration: none; }
  .bevel-document-row > div { flex: 1; min-width: 0; }
  .bevel-document-row strong { font-size: 14px; font-weight: 500; }
  .bevel-document-row p { margin: 2px 0 0; font-size: 12px; color: var(--bevel-muted); }
  .bevel-document-row > svg { color: var(--bevel-muted); }
  .bevel-document-row > svg:last-child { color: var(--bevel-faint); }
  .bevel-button.bevel-sidebar-mobile-trigger { display: none; }
  .bevel-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 12px; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); }
  .bevel-toolbar__group { display:inline-flex; align-items:center; }
  .bevel-toolbar__icon { display:inline-grid; flex:0 0 auto; place-items:center; inline-size:34px; block-size:34px; padding:0; border:2px solid; border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi); background:var(--bevel-face); color:var(--bevel-ink); cursor:pointer; }
  .bevel-toolbar__icon:hover:not(:disabled) { background:color-mix(in srgb,var(--bevel-face),var(--bevel-edge-hi) 45%); }
  .bevel-toolbar__icon[aria-pressed="true"], .bevel-toolbar__icon[aria-expanded="true"] { position:relative; z-index:1; border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); background:var(--bevel-face-in); }
  .bevel-toolbar__icon[aria-pressed="true"] svg, .bevel-toolbar__icon[aria-expanded="true"] svg { translate:1px 1px; }
  .bevel-toolbar__icon:disabled { opacity:.45; cursor:not-allowed; }
  .bevel-toolbar__group .bevel-toolbar__icon + .bevel-toolbar__icon { margin-inline-start:-2px; }
  .bevel-toolbar__separator { inline-size:1px; block-size:24px; margin-inline:2px; background:var(--bevel-line-2); }
  .bevel-toolbar__spacer { flex:1; }
  .bevel-toolbar__search { display:flex; align-items:center; gap:8px; inline-size:220px; block-size:34px; padding:0 8px 0 10px; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); color:var(--bevel-muted); }
  .bevel-toolbar__search:focus-within { border-color:var(--bevel-brass); outline:2px solid var(--bevel-brass); outline-offset:1px; }
  .bevel-toolbar__search .bevel-input { flex:1; min-inline-size:0; block-size:100%; padding:0; border:0; outline:0; background:transparent; font-size:13.5px; }
  .bevel-toolbar__search kbd { padding:2.5px 5px; border:1px solid var(--bevel-line-2); background:var(--bevel-sunk); color:var(--bevel-muted); font:500 10px/1 var(--bevel-font-mono); white-space:nowrap; }
  .bevel-toolbar__menu { inline-size:230px; }
  .bevel-toolbar-example__list { margin-block-start:22px; border-top:1px solid var(--bevel-line); }
  .bevel-toolbar-example__summary { display:flex; justify-content:space-between; gap:12px; padding-block:18px 4px; }
  .bevel-toolbar-example__summary span { color:var(--bevel-muted); font:11px var(--bevel-font-mono); }
  .bevel-toolbar-example__row { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--bevel-line); }
  .bevel-toolbar-example__file { display:inline-grid; flex:0 0 auto; place-items:center; inline-size:34px; block-size:34px; border:1px solid var(--bevel-line); background:var(--bevel-sunk); color:var(--bevel-muted); }
  .bevel-toolbar-example__row strong { font-size:14px; font-weight:500; }
  .bevel-toolbar-example__row small { color:var(--bevel-muted); font-size:12px; }
  .bevel-local-result { display:block; min-block-size:1.5em; margin-block-start:14px; color:var(--bevel-muted); font:12px var(--bevel-font-mono); }
  .bevel-breadcrumbs { padding:12px 0 14px; border-bottom:1px solid var(--bevel-line); font-size:13.5px; }
  .bevel-breadcrumbs ol { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
  .bevel-breadcrumbs li { display:inline-flex; align-items:center; gap:8px; min-inline-size:0; }
  .bevel-breadcrumbs a { padding:2px 0; color:var(--bevel-brass); text-decoration:none; }
  .bevel-breadcrumbs a:hover { text-decoration:underline; }
  .bevel-breadcrumbs [aria-hidden="true"] { display:inline-grid; flex:0 0 auto; color:var(--bevel-faint); }
  .bevel-breadcrumbs [aria-current="page"] { min-inline-size:0; overflow:hidden; color:var(--bevel-ink); font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
  .bevel-breadcrumbs__overflow { display:none; position:relative; }
  .bevel-breadcrumbs__overflow summary { display:inline-grid; place-items:center; min-inline-size:30px; min-block-size:24px; padding:3px 7px 5px; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); color:var(--bevel-muted); font:600 13px/1 var(--bevel-font-mono); cursor:pointer; list-style:none; }
  .bevel-breadcrumbs__overflow summary::-webkit-details-marker { display:none; }
  .bevel-breadcrumbs__overflow-links { position:absolute; z-index:2; inset:calc(100% + 6px) auto auto 0; display:grid; min-inline-size:200px; padding:6px; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); box-shadow:var(--bevel-shadow); }
  .bevel-breadcrumbs__overflow-links a { padding:8px 10px; color:var(--bevel-ink); }
  .bevel-breadcrumb-example__article > .bevel-eyebrow { color: var(--bevel-muted); font-size: 10px; margin-bottom: 12px; }
  .bevel-breadcrumb-example__article { padding-block-start:32px; }
  .bevel-breadcrumb-example__article h1 { margin:0; font:400 40px/1.1 var(--bevel-font-serif); }
  .bevel-breadcrumb-example__article p { max-inline-size:420px; margin:20px 0 0; color:var(--bevel-ink-2); font-size:15px; }
  .bevel-breadcrumb-example__byline { display:flex; align-items:center; gap:12px; margin-block-start:24px; padding-block-start:18px; border-top:1px solid var(--bevel-line); }
  .bevel-breadcrumb-example__avatar { display:inline-grid; flex:0 0 auto; place-items:center; inline-size:34px; block-size:34px; border:1px solid color-mix(in srgb,var(--bevel-brass) 30%,var(--bevel-brass-soft)); background:var(--bevel-brass-soft); color:var(--bevel-brass); font:500 11px/1 var(--bevel-font-mono); }
  .bevel-breadcrumb-example__byline small { color:var(--bevel-muted); }
  .bevel-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-block-start:18px; padding-block-start:16px; border-top:1px solid var(--bevel-line); }
  .bevel-pagination__range { color:var(--bevel-muted); font:12px var(--bevel-font-mono); font-variant-numeric:tabular-nums; }
  .bevel-pagination__pages { display:inline-flex; align-items:center; gap:4px; margin-inline-start:auto; }
  .bevel-pagination__pages .bevel-button { min-inline-size:34px; block-size:34px; padding:0 8px; font:500 13px var(--bevel-font-mono); }
  .bevel-pagination__pages .bevel-button svg { color:var(--bevel-ink); }
  .bevel-pagination__pages .bevel-button:disabled svg { color:var(--bevel-muted); }
  .bevel-pagination__page[aria-current="page"] { position:relative; z-index:1; border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); background:var(--bevel-face-in); color:var(--bevel-ink); }
  .bevel-pagination__page[aria-current="page"] .bevel-button__label { translate:1px 1px; }
  .bevel-pagination__gap { display:inline-grid; place-items:center; min-inline-size:24px; block-size:34px; color:var(--bevel-faint); font:13px var(--bevel-font-mono); letter-spacing:.1em; }
  .bevel-pagination__size { display:flex; flex:0 0 100%; align-items:center; justify-content:flex-end; gap:8px; color:var(--bevel-muted); font-size:12px; }
  .bevel-pagination__size .bevel-select__field { inline-size:auto; min-block-size:32px; padding-block:3px; font-size:12px; }
  .bevel-pagination-example__table { inline-size:100%; border-collapse:collapse; font-size:13px; }
  .bevel-pagination-example__table th { padding:13px 12px; background:var(--bevel-sunk); color:var(--bevel-muted); font-size:11px; font-weight:500; letter-spacing:.055em; text-align:left; text-transform:uppercase; }
  .bevel-pagination-example__table td { padding:12px; border-bottom:1px solid var(--bevel-line); }
  .bevel-pagination-example__table th:nth-child(3), .bevel-pagination-example__table td:nth-child(3) { text-align:right; }
  .bevel-pagination-example__table td:first-child, .bevel-pagination-example__table td:nth-child(3) { font-family:var(--bevel-font-mono); white-space:nowrap; }
  .bevel-pagination-example__table .bevel-badge[data-bevel-tone="good"] { border-color:color-mix(in srgb,var(--bevel-teal) 28%,var(--bevel-teal-soft)); background:var(--bevel-teal-soft); color:var(--bevel-teal); }
  .bevel-pagination-example__table .bevel-badge[data-bevel-tone="bad"] { border-color:color-mix(in srgb,var(--bevel-ox) 28%,var(--bevel-ox-soft)); background:var(--bevel-ox-soft); color:var(--bevel-ox); }
  .bevel-pagination-example__table .bevel-badge { padding:3px 7px; font-family:var(--bevel-font-mono); font-size:11px; font-weight:400; letter-spacing:0; line-height:1.5; text-transform:none; }
  .bevel-pagination-example__table-wrap { overflow:auto; }
  @media (max-width:640px) {
    .bevel-toolbar { gap:6px; }
    .bevel-toolbar__search { order:9; inline-size:100%; }
    .bevel-toolbar__spacer { display:none; }
    .bevel-toolbar__more { margin-inline-start:auto; }
    .bevel-breadcrumbs li.bevel-breadcrumbs__middle { display:none; }
    .bevel-breadcrumbs__overflow { display:inline-block; }
    .bevel-breadcrumb-example__article h1 { font-size:32px; }
    .bevel-pagination { align-items:flex-start; flex-direction:column; }
    .bevel-pagination__pages { margin-inline-start:0; }
    .bevel-pagination__size { justify-content:flex-start; }
  }
  @media (max-width:540px) {
    .bevel-navigation-example > .bevel-example__header h1 { font-size:31px; }
    .bevel-toolbar__icon { inline-size:32px; block-size:32px; }
    .bevel-pagination-example__table th, .bevel-pagination-example__table td { padding:10px 8px; }
  }
  .bevel-tree { max-inline-size: 480px; padding: 6px 8px 8px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-tree__head { display: flex; justify-content: space-between; align-items: center; margin-block-end: 6px; padding: 12px 10px; border-bottom: 1px solid var(--bevel-line); }
  .bevel-tree__head strong { color: var(--bevel-muted); font: 500 10px/1.6 var(--bevel-font-mono); letter-spacing: .14em; text-transform: uppercase; }
  .bevel-tree .bevel-badge { background: transparent; font: 500 10.5px/1.3 var(--bevel-font-mono); letter-spacing: 0; }
  .bevel-tree summary .bevel-badge { margin-left: 2px; padding: 1px 5px; font-size: 9.5px; }
  .bevel-tree summary, .bevel-tree__item { display: flex; align-items: center; gap: 8px; inline-size: 100%; block-size: 28px; margin: 8px 0; padding: 0 8px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--bevel-ink-2); font: 500 13.5px/1 var(--bevel-font-sans); text-align: left; list-style: none; }
  .bevel-tree summary::-webkit-details-marker { display: none; }
  .bevel-tree summary { border-left: 0; color: var(--bevel-ink); font-size: 14px; }
  .bevel-tree__item { margin-block: 10px; padding-left: 10px; font-weight: 400; }
  .bevel-tree__item[aria-selected="true"] { margin-bottom: 12.5px; font-weight: 500; }
  .bevel-tree summary svg, .bevel-tree__item svg { flex-shrink: 0; color: var(--bevel-muted); }
  .bevel-tree__item[aria-selected="true"] svg { color: var(--bevel-brass); }
  .bevel-tree summary:hover, .bevel-tree__item:hover { background: var(--bevel-sunk); }
  .bevel-tree [aria-selected="true"] { border-left-color: var(--bevel-brass); background: var(--bevel-brass-soft); color: var(--bevel-ink); }
  .bevel-tree [aria-disabled="true"], .bevel-tree :disabled { opacity: .45; cursor: not-allowed; }
  .bevel-tree__caret { display: grid; flex: 0 0 14px; place-items: center; inline-size: 14px; block-size: 14px; color: var(--bevel-muted); transition: transform 120ms ease; }
  .bevel-tree details[open] > summary .bevel-tree__caret { transform: rotate(90deg); }
  .bevel-tree__group { margin-inline-start: 15px; padding-inline-start: 12px; border-left: 1px solid var(--bevel-line); }
  .bevel-tree__empty { display: flex; gap: 8px; margin: 6px 8px 10px 34px; color: var(--bevel-muted); font-size: 12px; }
  /* ============================ FILE TREE ============================ */
  /* The sidebar file tree. The panel carries two things at once: the classic
     rows below, and every documented --trees-*-override that @pierre/trees
     reads. Custom properties inherit across a shadow boundary, so the React
     adapter mounts pierre inside this element and its shadow root draws with
     Bevel tokens without a second palette. Same rule as integrations/richclay.css:
     a peer's variables are mapped onto tokens, never onto literals. */
  .bevel-file-tree {
    display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; overflow: auto;
    background: var(--bevel-ground); color: var(--bevel-ink-2);
    font-family: var(--bevel-font-sans); font-size: 13px;

    --trees-font-family-override: var(--bevel-font-sans);
    --trees-font-size-override: 13px;
    --trees-font-weight-regular-override: 400;

    --trees-bg-override: var(--bevel-ground);
    --trees-fg-override: var(--bevel-ink-2);
    --trees-fg-muted-override: var(--bevel-muted);
    --trees-bg-muted-override: var(--bevel-sunk);
    --trees-border-color-override: var(--bevel-line-2);
    --trees-indent-guide-bg-override: var(--bevel-line-2);

    --trees-accent-override: var(--bevel-brass);
    --trees-selected-bg-override: var(--bevel-sunk);
    --trees-selected-fg-override: var(--bevel-ink);
    --trees-selected-focused-border-color-override: var(--bevel-brass);
    --trees-focus-ring-color-override: var(--bevel-brass);
    --trees-focus-ring-width-override: 1px;

    --trees-border-radius-override: 0px;
    --trees-item-margin-x-override: 0px;
    --trees-item-padding-x-override: 14px;
    --trees-padding-inline-override: 0px;
    --trees-item-row-gap-override: 6px;
    --trees-icon-width-override: 16px;
    /* 4.5px lands each nesting level exactly 18px right of its parent, given
       icon-width 16 and row-gap 6: pierre advances a level by
       level-gap + row-gap + icon-width / 2 - 0.5. */
    --trees-level-gap-override: 4.5px;

    --trees-search-bg-override: var(--bevel-surface);
    --trees-search-fg-override: var(--bevel-ink);
    --trees-search-font-weight-override: 500;
    --trees-scrollbar-thumb-override: color-mix(in srgb, var(--bevel-line-2), var(--bevel-muted) 25%);
    --trees-scrollbar-gutter-override: 0px;
  }
  /* The classic rows. Flat, full bleed, 28px, one 16px icon lane. Depth is a
     run of indent spacers inside the row rather than padding on the group, so
     the hover tint and the brass selection bar still reach the panel edge. */
  .bevel-file-tree__group { display: block; }
  .bevel-file-tree__group[hidden] { display: none; }
  .bevel-file-tree__row {
    display: flex; align-items: center; gap: 6px; inline-size: 100%; block-size: 28px;
    padding: 0 14px; border: 0; background: transparent; color: inherit;
    font: 400 13px/1 var(--bevel-font-sans); text-align: left; text-decoration: none;
    white-space: nowrap; cursor: pointer;
  }
  .bevel-file-tree__row[hidden] { display: none; }
  .bevel-file-tree__row:hover { background: var(--bevel-sunk); }
  .bevel-file-tree__row:focus-visible { outline: 1px solid var(--bevel-brass); outline-offset: -1px; }
  .bevel-file-tree__row[aria-selected="true"] {
    position: relative; background: var(--bevel-sunk); color: var(--bevel-ink); font-weight: 500;
  }
  .bevel-file-tree__row[aria-selected="true"]::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 2px; background: var(--bevel-brass); pointer-events: none;
  }
  .bevel-file-tree__row[aria-selected="true"] .bevel-file-tree__icon { color: var(--bevel-brass); }
  .bevel-file-tree__row[data-bevel-drop-target] {
    background: var(--bevel-brass-soft); box-shadow: inset 0 0 0 1px var(--bevel-brass);
  }
  .bevel-file-tree__row--upload { color: var(--bevel-faint); }
  .bevel-file-tree__row--upload .bevel-file-tree__icon { color: var(--bevel-faint); }
  /* 12px plus the 6px row gap advances each level by 18px, and the guides land
     18px apart with it. */
  .bevel-file-tree__indent {
    flex: none; align-self: stretch; inline-size: 12px;
    border-inline-start: 1px solid var(--bevel-line-2); opacity: .75;
  }
  .bevel-file-tree__caret {
    display: grid; flex: none; place-items: center; inline-size: 16px; block-size: 16px;
    color: var(--bevel-muted); transition: rotate 120ms ease;
  }
  .bevel-file-tree__caret svg { display: block; }
  .bevel-file-tree__row[aria-expanded="true"] > .bevel-file-tree__caret { rotate: 90deg; }
  .bevel-file-tree__icon {
    display: grid; flex: none; place-items: center; inline-size: 16px; block-size: 16px;
    color: var(--bevel-muted);
  }
  .bevel-file-tree__icon svg { display: block; }
  .bevel-file-tree__folder-open { display: none; }
  .bevel-file-tree__row[aria-expanded="true"] .bevel-file-tree__folder-open { display: inline; }
  .bevel-file-tree__row[aria-expanded="true"] .bevel-file-tree__folder-shut { display: none; }
  .bevel-file-tree__name { overflow: hidden; min-inline-size: 0; text-overflow: ellipsis; }
  .bevel-file-tree__empty { padding: 6px 14px; color: var(--bevel-muted); font-size: 12px; }
  .bevel-file-tree__empty[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .bevel-file-tree__caret { transition: none; }
  }
  .bevel-tree__item .bevel-badge { margin-inline-start: auto; padding: 2px 5px; color: var(--bevel-brass); border-color: color-mix(in srgb, var(--bevel-brass) 40%, transparent); font-size: 9.5px; }
  .bevel-wizard { display:grid; grid-template-columns:176px minmax(0, 1fr); gap:34px; }
  .bevel-wizard__steps { border-right:1px solid var(--bevel-line); padding-right:22px; position:relative; }
  .bevel-wizard__step { position:relative; display:block; width:100%; min-height:56px; padding:0 0 26px 40px; border:0; background:none; color:var(--bevel-muted); text-align:left; font:400 13px/1.35 var(--bevel-font-sans); }
  .bevel-wizard__step::before { content:""; position:absolute; left:14px; top:30px; bottom:-2px; width:1px; background:var(--bevel-line-2); }
  .bevel-wizard__step:last-child::before { display:none; }
  .bevel-wizard__marker { position:absolute; left:0; top:-1px; display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); color:var(--bevel-muted); font:500 12px/1 var(--bevel-font-mono); }
  .bevel-wizard__marker svg { display:none; }
  .bevel-wizard__step[data-bevel-state="done"] { color:var(--bevel-ink-2); }
  .bevel-wizard__step[data-bevel-state="done"]::before { background:var(--bevel-teal); }
  .bevel-wizard__step[data-bevel-state="done"] .bevel-wizard__marker { color:var(--bevel-teal); border-color:color-mix(in srgb,var(--bevel-teal) 45%,var(--bevel-line-2)); background:var(--bevel-teal-soft); }
  .bevel-wizard__step[data-bevel-state="done"] .bevel-wizard__marker span { display:none; }
  .bevel-wizard__step[data-bevel-state="done"] .bevel-wizard__marker svg { display:block; }
  .bevel-wizard__step[data-bevel-state="current"] { color:var(--bevel-ink); font-weight:600; }
  .bevel-wizard__step[data-bevel-state="current"] .bevel-wizard__marker { background:var(--bevel-ink); color:var(--bevel-ground); border-color:var(--bevel-ink); }
  .bevel-wizard__step:disabled { cursor:not-allowed; opacity:.5; }
  .bevel-wizard__step-note { display:block; margin-top:3px; color:var(--bevel-muted); font:400 11px var(--bevel-font-mono); letter-spacing:.02em; }
  .bevel-wizard__step[data-bevel-state="done"] .bevel-wizard__step-note { color:var(--bevel-teal); }
  .bevel-wizard__step[data-bevel-state="current"] .bevel-wizard__step-note { color:var(--bevel-brass); }
  .bevel-wizard__panel > .bevel-overlay__eyebrow { color:var(--bevel-brass); }
  .bevel-wizard__panel h2 { margin:6px 0 0; font:400 27px/1.15 var(--bevel-font-serif); }
  .bevel-wizard__lede { margin:10px 0 22px; color:var(--bevel-ink-2); font-size:14px; }
  .bevel-wizard__panel .bevel-validation-form__field { gap:7px; font-size:13px; font-weight:500; }
  .bevel-wizard__panel .bevel-input, .bevel-wizard__panel .bevel-select__field { font-size:15px; }
  .bevel-wizard__panel .bevel-validation-form__field + .bevel-validation-form__field { margin-top:16px; }
  .bevel-wizard__actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--bevel-line); }
  .bevel-wizard__actions .bevel-button { min-height:36px; padding:6px 13px; font-size:14px; }
  .bevel-wizard__note { margin:14px 0 0; color:var(--bevel-muted); font-size:12px; }
  .bevel-wizard__complete-card { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--bevel-sunk); border:1px solid var(--bevel-line); }
  .bevel-wizard__complete-card > svg { flex-shrink:0; color:var(--bevel-muted); }
  .bevel-wizard__complete-card > div { flex:1; min-width:0; }
  .bevel-wizard__complete-card strong, .bevel-wizard__complete-card small { display:block; }
  .bevel-wizard__complete-card strong { font-size:14px; font-weight:500; }
  .bevel-wizard__complete-card small { margin-top:2px; color:var(--bevel-muted); }
  .bevel-anchor-example:has(.bevel-wizard) .bevel-anchor-example__header { padding-bottom:18px; border-bottom-color:var(--bevel-line-2); }
  .bevel-toast-stage { display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; min-height:330px; padding:22px; border:1px solid var(--bevel-line); background:var(--bevel-sunk); }
  .bevel-toasts { display:grid; gap:10px; inline-size:min(400px,100%); }
  body > .bevel-toasts { position:fixed; inset:auto 18px 18px auto; inline-size:min(400px,calc(100% - 36px)); z-index:1000; }
  .bevel-toast { display:flex; align-items:flex-start; gap:12px; flex-wrap:nowrap; inline-size:100%; padding:14px 12px 14px 16px; box-shadow:var(--bevel-shadow); background:var(--bevel-surface); border:1px solid var(--bevel-line-2); border-inline-start:3px solid var(--bevel-brass); }
  .bevel-toast[data-bevel-tone="success"] { border-inline-start-color:var(--bevel-teal); }
  .bevel-toast[data-bevel-tone="error"] { border-inline-start-color:var(--bevel-ox); }
  .bevel-toast__icon { padding-top:1px; color:var(--bevel-brass); }
  .bevel-toast[data-bevel-tone="success"] .bevel-toast__icon { color:var(--bevel-teal); }
  .bevel-toast[data-bevel-tone="error"] .bevel-toast__icon { color:var(--bevel-ox); }
  .bevel-toast__icon svg { inline-size:16px; block-size:16px; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
  .bevel-toast__body { flex:1; min-inline-size:120px; }
  .bevel-toast__title { margin:0; font:600 14px/1.3 var(--bevel-font-sans); }
  .bevel-toast__message { margin:3px 0 0; color:var(--bevel-ink-2); font-size:12.5px; }
  .bevel-toast .bevel-toast__action { height:26px; min-height:26px; margin-top:10px; padding:0 9px; font-size:12px; }
  .bevel-toast__action svg { color:var(--bevel-muted); inline-size:15px; block-size:15px; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
  .bevel-toast__close { flex-shrink:0; cursor:pointer; margin:-2px -2px 0 0; display:inline-grid; place-items:center; inline-size:24px; block-size:24px; padding:0; border:0; background:transparent; color:var(--bevel-muted); }
  .bevel-toast__close svg { inline-size:14px; block-size:14px; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
  .bevel-toast__close:hover { color:var(--bevel-ink); background:var(--bevel-sunk); }
  .bevel-action-banner { display:flex; align-items:flex-start; flex-wrap:wrap; gap:16px; padding:20px; background:var(--bevel-brass-soft); border-inline-start:3px solid var(--bevel-brass); }
  .bevel-action-banner[hidden] { display:none; }
  .bevel-action-banner__icon { color:var(--bevel-brass); }
  .bevel-action-banner__icon svg { inline-size:23px; block-size:23px; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
  .bevel-action-banner__body { flex:1; min-inline-size:200px; }
  .bevel-action-banner__body h2 { margin:0; font:500 16px/1.3 var(--bevel-font-sans); }
  .bevel-action-banner__body p { margin:5px 0 0; color:var(--bevel-ink-2); font-size:13px; }
  .bevel-action-banner__actions { display:flex; align-items:center; gap:8px; }
  .bevel-action-banner__dismiss { border:0; background:transparent; color:var(--bevel-muted); font-size:18px; }
  .bevel-action-banner__dismiss svg { inline-size:14px; block-size:14px; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
  .bevel-action-banner[data-bevel-condition="resolved"] { border-inline-start-color:var(--bevel-teal); }
  .bevel-action-banner[data-bevel-condition="resolved"] .bevel-action-banner__icon { color:var(--bevel-teal); }
  .bevel-action-banner--running, .bevel-action-banner--uncertain { flex-wrap:nowrap; gap:12px; padding:13px 16px; background:var(--bevel-surface); border:1px solid var(--bevel-line-2); border-inline-start:3px solid var(--bevel-brass); }
  .bevel-action-banner--running .bevel-action-banner__icon, .bevel-action-banner--uncertain .bevel-action-banner__icon { padding-top:1px; }
  .bevel-action-banner--running .bevel-action-banner__icon svg, .bevel-action-banner--uncertain .bevel-action-banner__icon svg { display:block; inline-size:16px; block-size:16px; }
  .bevel-action-banner--running .bevel-action-banner__icon svg { rotate:-35deg; animation:bevel-spin 1.2s linear infinite; }
  .bevel-action-banner--running .bevel-action-banner__body, .bevel-action-banner--uncertain .bevel-action-banner__body { min-inline-size:0; }
  .bevel-action-banner--running .bevel-action-banner__body h2, .bevel-action-banner--uncertain .bevel-action-banner__body h2 { font:600 14px/1.35 var(--bevel-font-sans); }
  .bevel-action-banner--running .bevel-action-banner__body p, .bevel-action-banner--uncertain .bevel-action-banner__body p { margin-top:3px; font-size:12.5px; }
  .bevel-action-banner--uncertain .bevel-action-banner__body .bevel-action-banner__observation { margin-top:6px; padding:7px 9px; color:var(--bevel-muted); background:var(--bevel-sunk); border:1px solid var(--bevel-line); font:11.5px/1.5 var(--bevel-font-mono); overflow-wrap:anywhere; }
  .bevel-action-banner--uncertain .bevel-action-banner__actions { flex-wrap:wrap; margin-top:11px; }
  .bevel-action-banner__meta { margin-inline-start:auto; color:var(--bevel-muted); font:11px/1.4 var(--bevel-font-mono); }
  .bevel-action-banner__head { display:flex; align-items:baseline; gap:12px; }
  .bevel-action-banner__head h2 { min-inline-size:0; }
  .bevel-action-banner__count { flex:0 0 auto; margin-inline-start:auto; color:var(--bevel-muted); font:12px/1.35 var(--bevel-font-mono); white-space:nowrap; }
  .bevel-action-banner__progress { display:block; inline-size:100%; block-size:4px; margin:7px 0; border:0; border-radius:0; background:var(--bevel-line); appearance:none; }
  .bevel-action-banner__progress::-webkit-progress-bar { background:var(--bevel-line); }
  .bevel-action-banner__progress::-webkit-progress-value { background:var(--bevel-brass); }
  .bevel-action-banner__progress::-moz-progress-bar { background:var(--bevel-brass); }
  .bevel-action-banner__body .bevel-action-banner__status { color:var(--bevel-ink-2); }
  @keyframes bevel-spin { from { rotate:-35deg; } to { rotate:325deg; } }
  @media (prefers-reduced-motion: reduce) { .bevel-action-banner--running .bevel-action-banner__icon svg { animation:none; } }
  .bevel-bulk-bar { display:flex; align-items:center; gap:4px; inline-size:max-content; max-inline-size:100%; block-size:44px; padding:0 8px 0 16px; color:var(--bevel-ink); background:var(--bevel-surface); border:1px solid color-mix(in srgb,var(--bevel-line-2),var(--bevel-ink) 12%); box-shadow:6px 6px 0 color-mix(in srgb,var(--bevel-ink) 10%,transparent); font-family:var(--bevel-font-sans); }
  .bevel-bulk-bar[hidden] { display:none; }
  .bevel-bulk-bar--floating { position:fixed; inset-block-end:26px; inset-inline-start:50%; z-index:50; translate:-50% 0; }
  .bevel-bulk-bar__count { margin-inline-end:6px; font:500 12px/1 var(--bevel-font-mono); letter-spacing:.04em; white-space:nowrap; }
  .bevel-bulk-bar__rule { flex:0 0 auto; inline-size:1px; block-size:20px; margin-inline:6px; background:var(--bevel-line-2); }
  .bevel-bulk-bar__action { display:inline-flex; flex:0 0 auto; align-items:center; gap:7px; block-size:30px; padding:0 10px; border:0; background:transparent; color:var(--bevel-ink); font:500 13px/1 var(--bevel-font-sans); white-space:nowrap; cursor:pointer; }
  .bevel-bulk-bar__action:hover:not(:disabled,[aria-disabled="true"]) { background:var(--bevel-sunk); }
  .bevel-bulk-bar__action:is(:disabled,[aria-disabled="true"]) { opacity:.45; cursor:not-allowed; }
  .bevel-bulk-bar__action--danger { color:var(--bevel-ox); }
  .bevel-bulk-bar__action svg, .bevel-bulk-bar__clear svg { flex:0 0 auto; inline-size:14px; block-size:14px; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
  .bevel-bulk-bar__clear { display:inline-grid; flex:0 0 auto; place-items:center; inline-size:28px; block-size:28px; padding:0; border:0; background:transparent; color:var(--bevel-muted); cursor:pointer; }
  .bevel-bulk-bar__clear:hover { background:var(--bevel-sunk); color:var(--bevel-ink); }

  @media (max-width: 640px) {
    .bevel-bulk-bar--floating { inset-inline:0; inset-block-end:0; inline-size:auto; block-size:46px; padding:0 6px 0 12px; gap:2px; translate:none; border-width:1px 0 0; box-shadow:0 -6px 0 color-mix(in srgb,var(--bevel-ink) 10%,transparent); }
    .bevel-bulk-bar--floating .bevel-bulk-bar__action { padding:0 8px; font-size:12.5px; }
    .bevel-bulk-bar--floating .bevel-bulk-bar__rule:has(+ .bevel-bulk-bar__clear) { display:none; }
    .bevel-bulk-bar--floating .bevel-bulk-bar__clear { margin-inline-start:auto; }
  }
  .bevel-bulk-bar-example { contain:layout; min-block-size:300px; padding:22px 22px 96px; border:1px solid var(--bevel-line); background:var(--bevel-sunk); }
  .bevel-bulk-bar-example__list { display:grid; margin:0; padding:0; list-style:none; border:1px solid var(--bevel-line-2); background:var(--bevel-surface); }
  .bevel-bulk-bar-example__list li { padding:10px 14px; border-top:1px solid var(--bevel-line); }
  .bevel-bulk-bar-example__list li:first-child { border-top:0; }
  .bevel-bulk-bar-example__list li:has(input:checked) { background:color-mix(in srgb,var(--bevel-brass-soft) 55%,var(--bevel-surface)); }
  .bevel-bulk-bar-example__list .bevel-checkbox { font-size:14px; }
  .bevel-action-banner-example__panel ~ .bevel-action-banner { margin-top:12px; }
  .bevel-action-banner-example__panel + .bevel-action-banner { margin-top:20px; }
  .bevel-action-banner-example__panel ~ .bevel-buttons { margin-top:12px; }
  .bevel-bulk-bar-example ~ output { display:block; min-block-size:1.5em; margin-top:8px; color:var(--bevel-muted); font:500 11px/1.4 var(--bevel-font-mono); }
  .bevel-action-banner-example__panel { margin-top:20px; padding:22px; border:1px solid var(--bevel-line); background:var(--bevel-surface); }
  .bevel-action-banner-example__panel > div { display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .bevel-action-banner-example__panel h2 { margin:0; font:400 25px/1.15 var(--bevel-font-serif); }
  .bevel-action-banner-example__panel p { margin:14px 0 0; color:var(--bevel-muted); }
  .bevel-action-banner-example__badge { padding:3px 7px; border:1px solid var(--bevel-line-2); color:var(--bevel-muted); font:600 10px/1.2 var(--bevel-font-mono); letter-spacing:.08em; text-transform:uppercase; }
  .bevel-action-banner-example__transport { display:block; margin-top:8px; color:var(--bevel-muted); font:500 10px/1.3 var(--bevel-font-mono); }
  .bevel-saved { position:fixed; inset:auto 18px 18px auto; z-index:1000; padding:7px 11px; border:1px solid var(--bevel-teal); border-radius:8px; color:var(--bevel-teal); background:var(--bevel-teal-soft); font:500 12px/1.2 var(--bevel-font-mono); }
  .bevel-saved-page { min-height:100dvh; padding:30px 38px; }
  .bevel-saved-page > header { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--bevel-line); }
  .bevel-saved-page article { max-inline-size:650px; margin:84px auto 0; }
  .bevel-saved-page h1 { margin:12px 0 22px; font:400 42px/1.08 var(--bevel-font-serif); }
  .bevel-saved-page p { color:var(--bevel-ink-2); line-height:1.7; }
  .bevel-saved-page .bevel-button { margin-top:18px; }
  .bevel-grid-example { margin:auto; padding:32px 36px 36px; font-size:15px; line-height:1.5; }
  .bevel-grid-example__header { margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--bevel-line-2); }
  .bevel-grid-example__header h1 { margin:0; font:400 36px/1.08 var(--bevel-font-serif); letter-spacing:-.022em; }
  .bevel-grid-example__header p { margin:8px 0 0; color:var(--bevel-ink-2); font-size:14px; }
  .bevel-grid-example__header .bevel-overlay__eyebrow { margin-bottom:10px; color:var(--bevel-brass); font:500 10px/1.6 var(--bevel-font-mono); letter-spacing:.16em; }
  .bevel-filter-panel,.bevel-columns-panel { border:1px solid var(--bevel-line-2); background:var(--bevel-surface); }
  .bevel-filter-panel { padding:20px 22px; }
  .bevel-filter__heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .bevel-filter__heading strong { font-size:15px; font-weight:500; }
  .bevel-filter__mode,.bevel-grid-result__label { color:var(--bevel-muted); font:600 10px var(--bevel-font-mono); letter-spacing:.1em; text-transform:uppercase; }
  .bevel-filter__rules,.bevel-filter__draft { display:grid; gap:10px; }
  .bevel-filter__rules[hidden],.bevel-filter__draft[hidden] { display:none; }
  .bevel-filter__rule { display:grid; grid-template-columns:52px 1fr 1fr 1.1fr 32px; align-items:center; gap:8px; }
  .bevel-filter__rule > span:first-child { color:var(--bevel-muted); font:500 10.5px var(--bevel-font-mono); letter-spacing:.1em; text-align:right; padding-right:4px; text-transform:uppercase; }
  .bevel-filter__rule .bevel-select__field { font-size:13px; padding:7px 28px 7px 10px; }
  .bevel-filter__rule [data-bevel-filter-value] { min-width:0; }
  .bevel-filter__rule .bevel-input { font-size:13px; padding:7px 10px; }
  .bevel-filter__actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--bevel-line); }
  .bevel-filter__actions [data-bevel-filter-add] { margin-right:auto; }
  .bevel-filter__rule [data-bevel-filter-remove] { border:0; background:transparent; color:var(--bevel-muted); }
  .bevel-filter:not([data-bevel-editing]) [data-bevel-filter-apply],.bevel-filter:not([data-bevel-editing]) [data-bevel-filter-cancel],.bevel-filter[data-bevel-editing] [data-bevel-filter-edit] { display:none; }
  .bevel-filter[data-bevel-invalid] { border-color:var(--bevel-ox); }
  .bevel-grid-result { margin-top:20px; padding-top:18px; border-top:1px solid var(--bevel-line); }
  .bevel-grid-result__label { display:block; margin-bottom:6px; color:var(--bevel-muted); font-weight:500; }
  .bevel-grid-result .bevel-grid { border:0; box-shadow:none; background:transparent; }
  .bevel-grid-result .bevel-grid__table { background:transparent; }
  .bevel-grid-result .bevel-grid__table thead { display:none; }
  .bevel-grid-result .bevel-grid .bevel-grid__row { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border:0; }
  .bevel-grid-result .bevel-grid .bevel-grid__row[hidden] { display:none; }
  .bevel-grid-result .bevel-grid .bevel-grid__row td { padding:0; border:0; background:transparent; }
  .bevel-grid-result .bevel-grid [data-bevel-column="invoice"],.bevel-grid-result .bevel-grid [data-bevel-column="status"] { display:none; }
  .bevel-grid-result .bevel-grid [data-bevel-column="client"] { width:auto; }
  .bevel-grid-result .bevel-grid [data-bevel-column="client"] strong { display:block; font-size:14.5px; font-weight:500; }
  .bevel-grid-result .bevel-grid [data-bevel-column="client"] small { display:block; margin-top:3px; color:var(--bevel-muted); font-size:12px; font-weight:400; }
  .bevel-grid-result .bevel-grid [data-bevel-column="amount"] { width:auto; font:15px var(--bevel-font-mono); }
  .bevel-columns-panel { max-inline-size:470px; margin-inline:auto; }
  .bevel-columns__heading { padding:16px 20px; border-bottom:1px solid var(--bevel-line); }
  .bevel-columns__heading h2 { margin:0; font:400 26px/1.1 var(--bevel-font-serif); }
  .bevel-columns__heading p { margin:8px 0 0; color:var(--bevel-muted); font-size:12.5px; }
  .bevel-columns { display:block; }
  .bevel-columns__item { display:flex; align-items:center; gap:10px; padding:8px 12px 8px 10px; border-bottom:1px solid var(--bevel-line); }
  .bevel-columns__item label { flex:1; }
  .bevel-columns__item .bevel-checkbox__label { font-size:14px; color:var(--bevel-ink); }
  .bevel-columns__item:has(:disabled) .bevel-checkbox__label { color:var(--bevel-ink-2); }
  .bevel-columns__item:has(input:not(:checked)) .bevel-checkbox__label { color:var(--bevel-muted); }
  .bevel-columns__grip { display:inline-grid; place-items:center; width:16px; color:var(--bevel-faint); cursor:grab; touch-action:none; }
  .bevel-columns__position { min-width:18px; text-align:right; font:500 11px var(--bevel-font-mono); color:var(--bevel-muted); }
  .bevel-columns__badge { font:500 9.5px/1.4 var(--bevel-font-mono); padding:2px 6px; background:var(--bevel-sunk); color:var(--bevel-muted); border:1px solid var(--bevel-line); }
  .bevel-columns__button { display:inline-grid; place-items:center; flex-shrink:0; width:28px; height:28px; padding:0; border:2px solid; border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi); background:var(--bevel-face); color:var(--bevel-ink); cursor:pointer; }
  .bevel-columns__button:disabled { opacity:.45; cursor:not-allowed; }
  .bevel-columns__item[data-bevel-drop-target] { box-shadow:inset 0 2px var(--bevel-brass); }
  .bevel-columns__item[data-bevel-drop-target="after"] { box-shadow:inset 0 -2px var(--bevel-brass); }
  .bevel-columns__footer { display:flex; align-items:center; gap:8px; padding:16px 20px; background:var(--bevel-sunk); color:var(--bevel-muted); font-size:12px; }
  .bevel-columns__footer svg { color:var(--bevel-faint); flex-shrink:0; }
  .bevel-columns__spacer { flex:1; }
  .bevel-columns__footer small { font-size:12px; }
  .bevel-columns__footer .bevel-columns__summary { font:11px var(--bevel-font-mono); }
  .bevel-grid-preview { margin-top:20px; }
  .bevel-grid__table { width:100%; border-collapse:collapse; background:var(--bevel-surface); }
  .bevel-grid__table th,.bevel-grid__table td { padding:12px 14px; border-bottom:1px solid var(--bevel-line); text-align:left; }
  .bevel-grid__row[hidden] { display:none; }
  .bevel-grid__table th { color:var(--bevel-muted); font:600 10px var(--bevel-font-mono); text-transform:uppercase; }
  .bevel-grid__table [data-bevel-pinned] { position:sticky; z-index:1; background:var(--bevel-surface); }
  .bevel-grid__resize { position:absolute; inset:0 -4px 0 auto; width:8px; padding:0; border:0; background:transparent; cursor:col-resize; }
  .bevel-grid__table th:has(.bevel-grid__resize) { position:relative; }
  .bevel-grid__table th[data-bevel-pinned] { position:sticky; }
  .bevel-grid__cell { position:relative; text-align:right; }
  .bevel-grid__cell > [data-bevel-cell-edit] { width:100%; border:0; background:transparent; color:var(--bevel-ink); text-align:right; }
  .bevel-grid__cell-value { white-space:nowrap; }
  .bevel-grid__cell-editor { display:flex; align-items:center; }
  .bevel-grid__cell-input { width:100%; min-height:32px; border:0; border-bottom:2px solid var(--bevel-brass); background:transparent; color:var(--bevel-ink); text-align:right; }
  .bevel-grid__cell[data-bevel-editing] > [data-bevel-cell-edit] { display:none; }
  .bevel-grid__cell-error { display:block; color:var(--bevel-ox); font-size:11px; }
  .bevel-grid__cell-error[hidden] { display:none; }
  .bevel-grid__cell[data-bevel-invalid] { background:var(--bevel-ox-soft); }
  .bevel-grid-edit-note { display:flex; align-items:center; gap:8px; margin-top:16px; color:var(--bevel-muted); font-size:12.5px; }
  .bevel-grid-edit-note > svg { color:var(--bevel-faint); }
  .bevel-grid.bevel-grid-edit-example { box-shadow:none; border:0; background:transparent; }
  .bevel-grid-edit-example .bevel-grid__table { background:transparent; }
  .bevel-grid-edit-example .bevel-grid__table thead th { font-weight:400; background:var(--bevel-sunk); }
  .bevel-grid-edit-example .bevel-grid__row > td { height:48px; padding:0 12px; background:transparent; }
  .bevel-grid-edit-example [data-bevel-column="invoice"],.bevel-grid-edit-example td[data-bevel-column="amount"] { font:13px var(--bevel-font-mono); }
  .bevel-grid-edit-example .bevel-badge { font:400 11px/1.4 var(--bevel-font-mono); padding:3px 7px; letter-spacing:.02em; text-transform:none; }
  .bevel-grid-edit-example .bevel-grid__cell > [data-bevel-cell-edit] { display:inline-flex; justify-content:flex-end; align-items:center; gap:8px; margin-right:-8px; padding:4px 8px; border:1px dashed transparent; font:inherit; cursor:text; }
  .bevel-grid-edit-example .bevel-grid__cell > [data-bevel-cell-edit] svg { color:var(--bevel-faint); display:none; }
  .bevel-grid-edit-example tr[data-bevel-key="0432"] [data-bevel-cell-edit] svg,.bevel-grid-edit-example [data-bevel-cell-edit]:is(:hover,:focus-visible) svg { display:block; }
  .bevel-grid-edit-example tr[data-bevel-key="0432"] .bevel-grid__cell-value,.bevel-grid-edit-example [data-bevel-cell-edit]:is(:hover,:focus-visible) .bevel-grid__cell-value { text-decoration:underline dotted var(--bevel-faint); text-underline-offset:4px; }
  .bevel-grid-edit-example .bevel-grid__cell[data-bevel-editing] > [data-bevel-cell-edit] { display:none; }
  .bevel-grid__cell-editor { display:inline-flex; height:32px; border:1px solid var(--bevel-brass); outline:2px solid var(--bevel-brass); outline-offset:1px; background:var(--bevel-surface); }
  .bevel-grid__cell-input { min-height:0; width:92px; min-width:0; padding:0 6px; font:13px var(--bevel-font-mono); border:0; outline:0; }
  .bevel-grid__cell-action { display:grid; place-items:center; width:28px; padding:0; border:0; border-left:1px solid var(--bevel-line); background:var(--bevel-sunk); color:var(--bevel-teal); }
  .bevel-grid__cell-action[data-bevel-cell-action="cancel"] { color:var(--bevel-ox); }
  .bevel-grid__cell[data-bevel-invalid] .bevel-grid__cell-editor { border-color:var(--bevel-ox); outline-color:var(--bevel-ox); }

  @media(max-width:540px){.bevel-grid-example{padding:24px 20px 28px}.bevel-grid-example__header h1{font-size:31px}.bevel-grid-example__header{margin-bottom:20px;padding-bottom:14px}.bevel-filter__rule{grid-template-columns:1fr 1fr 28px}.bevel-filter__rule>span:first-child{grid-column:1/-1;text-align:left;padding:0}.bevel-filter__rule .bevel-input,.bevel-filter__rule .bevel-select:has([data-bevel-filter-value]){grid-column:1/3}.bevel-filter__rule [data-bevel-filter-remove]{grid-column:3;grid-row:2/4}.bevel-columns__item{grid-template-columns:20px 1fr 58px 28px 28px;padding-inline:10px}.bevel-grid{overflow:auto}.bevel-grid-result .bevel-grid__table thead{display:none}.bevel-grid-result .bevel-grid__row{display:flex;justify-content:space-between;flex-wrap:wrap}.bevel-grid-result .bevel-grid__row[hidden]{display:none}.bevel-grid-result .bevel-grid__row td{border:0;padding:3px}.bevel-grid-result .bevel-grid__row [data-bevel-column="client"]{order:-2;width:70%;font-weight:500}.bevel-grid-result .bevel-grid__row [data-bevel-column="amount"]{order:-1;width:30%;text-align:right}.bevel-grid-result .bevel-grid__row [data-bevel-column="invoice"],.bevel-grid-result .bevel-grid__row [data-bevel-column="status"]{color:var(--bevel-muted);font-size:11px}}
  @media (max-width:540px) {
    .bevel-toast-stage { padding:14px; min-height:0; }
    .bevel-toast { padding:12px 10px 12px 14px; }
    .bevel-action-banner__body { min-inline-size:150px; }
    .bevel-saved-page { padding:24px 20px; }
    .bevel-saved-page article { margin-top:58px; }
    .bevel-saved-page h1 { font-size:34px; }
  }
  .bevel-reference-example { padding: 32px 36px 36px; }
  .bevel-reference-example > .bevel-example__header { max-width: none; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--bevel-line-2); }
  .bevel-reference-example > .bevel-example__header .bevel-eyebrow { margin: 0 0 10px; padding: 0; border: 0; font-size: 10px; line-height: 1.6; letter-spacing: .16em; }
  .bevel-reference-example > .bevel-example__header h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.022em; }
  .bevel-reference-example > .bevel-example__header p { margin: 8px 0 0; color: var(--bevel-ink-2); font-size: 14px; }
  .bevel-reference-note { margin: 14px 0 0; color: var(--bevel-muted); font-size: 12.5px; }
  @media (max-width: 640px) {
    .bevel-reference-example > .bevel-example__header h1 { font-size: 31px; }
    .bevel-reference-example > .bevel-example__header { margin-bottom: 20px; }
    .bevel-code .bevel-code__header { padding: 10px 12px; }
    .bevel-code .bevel-code__meta { display: none; }
  }
  .bevel-code { min-width: 0; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); }
  .bevel-code__header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-code__name { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--bevel-font-mono); }
  .bevel-code__header svg { flex-shrink: 0; color: var(--bevel-muted); }
  .bevel-code__meta { color: var(--bevel-muted); font: 11px var(--bevel-font-mono); }
  .bevel-code__language { padding: 3px 7px; border: 1px solid var(--bevel-line); background: var(--bevel-sunk); color: var(--bevel-muted); font: 500 11px/1.4 var(--bevel-font-mono); }
  .bevel-code__spacer { flex: 1; }
  .bevel-code__header .bevel-button { gap: 7px; padding: 4px 11px; font-size: 13px; }
  .bevel-code__header .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); }
  .bevel-code pre { overflow: auto; margin: 0; padding: 14px 0; font: 12.5px/1.9 var(--bevel-font-mono); scrollbar-width: thin; scrollbar-color: var(--bevel-line-2) transparent; }
  .bevel-code pre code { font: inherit; }
  .bevel-code__line { position: relative; display: inline-block; min-width: 100%; padding: 0 18px 0 44px; vertical-align: top; }
  .bevel-code__line::before { content: attr(data-line) / ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30px; padding-right: 14px; border-right: 1px solid var(--bevel-line); color: var(--bevel-faint); text-align: right; user-select: none; }
  .bevel-code__line:hover { background: color-mix(in srgb, var(--bevel-surface) 50%, var(--bevel-sunk)); }
  .bevel-code[data-bevel-wrap] pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .bevel-code[data-bevel-wrap] .bevel-code__line { width: 100%; min-width: 0; }
  .bevel-code__tag { color: var(--bevel-teal); }
  .bevel-code__attribute { color: var(--bevel-brass); }
  .bevel-code__string { color: var(--bevel-ink-2); }
  .bevel-code__notice { margin: 0; padding: 10px 16px; color: var(--bevel-ink-2); font-size: 13px; }
  .bevel-code__fallback { display: block; width: calc(100% - 32px); min-height: 120px; margin: 0 16px 16px; padding: 10px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); color: var(--bevel-ink); font: 12px/1.6 var(--bevel-font-mono); }
  .bevel-diff { min-width: 0; overflow: hidden; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-diff__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--bevel-line-2); font: 500 12.5px var(--bevel-font-mono); }
  .bevel-diff__group, .bevel-diff__controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .bevel-diff__header svg { color: var(--bevel-muted); }
  .bevel-diff__count { padding: 2px 7px; border: 1px solid var(--bevel-line); font: 500 10.5px/1.3 var(--bevel-font-mono); }
  .bevel-diff__count[data-bevel-kind="add"] { color: var(--bevel-teal); background: var(--bevel-teal-soft); }
  .bevel-diff__count[data-bevel-kind="remove"] { color: var(--bevel-ox); background: var(--bevel-ox-soft); }
  .bevel-diff__controls { gap: 0; }
  .bevel-diff__controls .bevel-button { padding: 3px 10px; font-size: 12.5px; }
  .bevel-diff__controls .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); }
  .bevel-diff__hunk { padding: 7px 16px; border-block: 1px solid var(--bevel-line); background: var(--bevel-sunk); color: var(--bevel-muted); font: 11px var(--bevel-font-mono); }
  .bevel-diff__line { display: flex; gap: 10px; padding: 6px 12px; color: var(--bevel-ink); font: 12px/1.7 var(--bevel-font-mono); }
  .bevel-diff__line > span:first-child { flex: 0 0 22px; color: var(--bevel-faint); text-align: right; }
  .bevel-diff__line > span:nth-child(2) { flex: 0 0 12px; text-align: center; font-weight: 600; }
  .bevel-diff__line code { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; font: inherit; }
  .bevel-diff__line[data-bevel-kind="add"] { background: color-mix(in srgb, var(--bevel-teal-soft) 70%, var(--bevel-surface)); }
  .bevel-diff__line[data-bevel-kind="remove"] { background: color-mix(in srgb, var(--bevel-ox-soft) 70%, var(--bevel-surface)); }
  .bevel-diff__line[data-bevel-kind="add"] > span:nth-child(2) { color: var(--bevel-teal); }
  .bevel-diff__line[data-bevel-kind="remove"] > span:nth-child(2) { color: var(--bevel-ox); }
  .bevel-diff__line mark { color: inherit; }
  .bevel-diff__line[data-bevel-kind="add"] mark { background: color-mix(in srgb, var(--bevel-teal) 32%, transparent); }
  .bevel-diff__line[data-bevel-kind="remove"] mark { background: color-mix(in srgb, var(--bevel-ox) 30%, transparent); text-decoration: line-through; }
  .bevel-diff[data-bevel-layout="split"] .bevel-diff__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bevel-diff__body section + section { border-left: 1px solid var(--bevel-line-2); }
  .bevel-diff__body h3 { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0; padding: 9px 16px; border-bottom: 1px solid var(--bevel-line); background: var(--bevel-sunk); color: var(--bevel-ink-2); text-transform: uppercase; letter-spacing: .1em; font: 500 10.5px/1.4 var(--bevel-font-mono); }
  .bevel-diff__body h3 small { color: var(--bevel-faint); font-size: 10px; text-transform: none; letter-spacing: 0; }
  .bevel-diff > footer { padding: 10px 16px; border-top: 1px solid var(--bevel-line); color: var(--bevel-muted); font: 11px var(--bevel-font-mono); }
  .bevel-display-example { min-block-size: 100dvh; padding: 32px 36px 36px; font-size: 15px; line-height: 1.5; }
  .bevel-display-example > .bevel-example__header { max-inline-size: none; margin-block-end: 26px; padding-block-end: 18px; }
  .bevel-display-example > .bevel-example__header h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.022em; }
  .bevel-display-example > .bevel-example__header .bevel-eyebrow,
  .bevel-chart__header .bevel-eyebrow { display: block; margin-block-end: 12px; padding: 0; border: 0; color: var(--bevel-muted); font-size: 10px; letter-spacing: .13em; }
  .bevel-display-example > .bevel-example__header .bevel-eyebrow { margin-block-end: 10px; color: var(--bevel-brass); font-weight: 500; letter-spacing: .16em; }
  .bevel-display-example > .bevel-example__header p { max-inline-size: 520px; margin: 8px 0 0; color: var(--bevel-ink-2); font-size: 14px; }
  .bevel-display-example:has(.bevel-activity) > .bevel-example__header,
  .bevel-display-example:has(.bevel-avatars) > .bevel-example__header { border-bottom: 1px solid var(--bevel-line-2); }
  .bevel-display-example__foot { display: flex; justify-content: space-between; gap: 18px; margin-block-start: 18px; padding-block-start: 14px; color: var(--bevel-ink-2); font-size: 12.5px; }
  .bevel-display-example__foot time { color: var(--bevel-muted); font: 11px var(--bevel-font-mono); letter-spacing: .04em; }
  .bevel-activity__day { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--bevel-brass); font: 500 10px var(--bevel-font-mono); letter-spacing: .13em; text-transform: uppercase; }
  .bevel-activity__day::after { content: ""; flex: 1; block-size: 1px; background: var(--bevel-line); }
  .bevel-activity__day:not(:first-child) { margin-block-start: 24px; }
  .bevel-activity:is(ol) { padding-inline-start: 18px; border-left: 1px solid var(--bevel-line-2); }
  .bevel-activity__list { margin: 0 0 0 17px; padding: 0 0 0 28px; border-left: 1px solid var(--bevel-line-2); list-style: none; }
  .bevel-activity > .bevel-activity__item { padding: 10px 0; }
  .bevel-activity__item { position: relative; min-block-size: 34px; padding: 0 0 20px; }
  .bevel-activity__avatar { position: absolute; inset: -2px auto auto -46px; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); box-shadow: 0 0 0 4px var(--bevel-ground); color: var(--bevel-ink-2); font: 500 11px/1 var(--bevel-font-mono); letter-spacing: .02em; }
  .bevel-activity__avatar[data-bevel-person="mira"] { border-color: color-mix(in srgb, var(--bevel-brass) 30%, var(--bevel-brass-soft)); background: var(--bevel-brass-soft); color: var(--bevel-brass); }
  .bevel-activity__avatar[data-bevel-person="alex"] { border-color: color-mix(in srgb, var(--bevel-teal) 30%, var(--bevel-teal-soft)); background: var(--bevel-teal-soft); color: var(--bevel-teal); }
  .bevel-activity__avatar[data-bevel-person="jules"] { border-color: var(--bevel-ink); background: var(--bevel-ink); color: var(--bevel-ground); }
  .bevel-activity__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .bevel-activity__head p { margin: 0; color: var(--bevel-ink-2); font-size: 14px; }
  .bevel-activity__head strong { color: var(--bevel-ink); font-weight: 500; }
  .bevel-activity__head time { color: var(--bevel-muted); font: 11px var(--bevel-font-mono); }
  .bevel-activity__detail { margin: 4px 0 0; color: var(--bevel-muted); font-size: 13px; }
  .bevel-activity__more { margin-block-start: 4px; }
  .bevel-activity__more svg { color: var(--bevel-muted); }
  .bevel-activity__more[aria-expanded="true"] svg { transform: rotate(180deg); }
  .bevel-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--bevel-line-2); }
  .bevel-stats__tile { min-inline-size: 0; padding: 22px 22px 20px; }
  .bevel-stats__tile + .bevel-stats__tile { border-left: 1px solid var(--bevel-line-2); }
  .bevel-stats__tile dd { margin: 0; }
  .bevel-stats__label { margin: 0; color: var(--bevel-muted); font: 500 10px var(--bevel-font-mono); letter-spacing: .13em; text-transform: uppercase; }
  .bevel-stats__value { margin: 10px 0 6px; overflow-wrap: anywhere; color: var(--bevel-ink); font: 38px/1 var(--bevel-font-mono); letter-spacing: -.05em; }
  .bevel-stats__delta { display: inline-flex; align-items: center; gap: 4px; color: var(--bevel-muted); font: 500 11.5px var(--bevel-font-mono); }
  .bevel-stats__delta[data-bevel-direction="up"] { color: var(--bevel-teal); }
  .bevel-stats__delta[data-bevel-direction="down"] { color: var(--bevel-ox); }
  .bevel-stats__delta[data-bevel-tone="bad"] { color: var(--bevel-ox); }
  .bevel-stats__spark { display: block; inline-size: 100%; block-size: 40px; margin-block-start: 20px; color: var(--bevel-brass); }
  .bevel-avatars { position: relative; }
  .bevel-avatars:has(.bevel-avatars__stack) { padding: 22px 24px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-avatars > .bevel-chart__header { align-items: center; margin-block-end: 0; }
  .bevel-avatars > .bevel-chart__header h2 { margin: 0; }
  .bevel-avatars > .bevel-chart__header h2 { font-size: 26px; }
  .bevel-avatars > .bevel-chart__header p { margin: 7px 0 0; color: var(--bevel-muted); font-size: 13px; }
  .bevel-avatars > .bevel-chart__header .bevel-badge { padding: 3px 7px; border-color: var(--bevel-line-2); background: transparent; color: var(--bevel-ink); font: 400 10px/1.3 var(--bevel-font-mono); letter-spacing: .05em; text-transform: none; }
  .bevel-avatars:not(:has(.bevel-avatars__stack)) { display: flex; align-items: center; padding-inline-start: 10px; }
  .bevel-avatars:not(:has(.bevel-avatars__stack)) > .bevel-avatars__avatar { inline-size: 36px; block-size: 36px; margin-inline-start: -10px; border: 2px solid var(--bevel-ground); border-radius: 50%; }
  .bevel-avatars__stack { isolation: isolate; display: flex; align-items: center; margin: 24px 0; padding-inline-start: 5px; }
  .bevel-avatars__person { position: relative; display: inline-flex; flex: 0 0 auto; margin-inline-start: -5px; box-shadow: 0 0 0 3px var(--bevel-surface); }
  .bevel-avatars__avatar,
  .bevel-avatars__image { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); color: var(--bevel-ink-2); font: 500 11px/1 var(--bevel-font-mono); letter-spacing: .02em; object-fit: cover; }
  .bevel-avatars__avatar { position: relative; }
  .bevel-avatars__avatar[data-bevel-person="mira"] { border-color: color-mix(in srgb, var(--bevel-brass) 30%, var(--bevel-brass-soft)); background: var(--bevel-brass-soft); color: var(--bevel-brass); }
  .bevel-avatars__avatar[data-bevel-person="alex"] { border-color: color-mix(in srgb, var(--bevel-teal) 30%, var(--bevel-teal-soft)); background: var(--bevel-teal-soft); color: var(--bevel-teal); }
  .bevel-avatars__fallback[hidden],
  .bevel-avatars__image[hidden] { display: none; }
  .bevel-avatars__status { position: absolute; z-index: 2; inset: auto -3px -3px auto; inline-size: 10px; block-size: 10px; background: var(--bevel-teal); box-shadow: 0 0 0 2px var(--bevel-surface); }
  .bevel-avatars__overflow,
  .bevel-avatars__count { position: relative; z-index: 1; display: grid; flex: 0 0 auto; place-items: center; inline-size: 42px; block-size: 42px; margin-inline-start: 3px; padding: 0; border: 1px dashed var(--bevel-line-2); background: var(--bevel-surface); color: var(--bevel-muted); font: 500 11px/1 var(--bevel-font-mono); }
  .bevel-avatars__directory { display: grid; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--bevel-line); list-style: none; }
  .bevel-avatars__directory .bevel-avatars__avatar,
  .bevel-avatars__directory .bevel-avatars__overflow { inline-size: 34px; block-size: 34px; }
  .bevel-avatars__member { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bevel-line); }
  .bevel-avatars__member:last-child { border-bottom: 0; }
  .bevel-avatars__member strong { display: block; color: var(--bevel-ink); font-size: 13.5px; font-weight: 500; }
  .bevel-avatars__member p { margin: 1px 0 0; color: var(--bevel-muted); font-size: 12px; }
  .bevel-avatars__presence-dot { display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 6px; background: var(--bevel-teal); vertical-align: 1px; }
  .bevel-avatars__members { min-inline-size: min(310px, calc(100vw - 32px)); padding: 14px; }
  .bevel-avatars__members h3 { margin: 0 0 8px; font: 400 20px var(--bevel-font-serif); }
  .bevel-avatars__members .bevel-avatars__directory { margin: 0; padding: 0; border-top: 0; }
  .bevel-chart { position: relative; color: var(--bevel-ink); }
  .bevel-chart:is(svg) { display: block; inline-size: 100%; block-size: auto; }
  .bevel-chart:is(svg) text { fill: var(--bevel-muted); font: 500 11px var(--bevel-font-mono); }
  .bevel-chart + .bevel-chart { margin-block-start: 42px; }
  .bevel-chart__header { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-block-end: 24px; }
  .bevel-chart__header h2 { margin: 0; color: var(--bevel-ink); font: 400 30px/1.2 var(--bevel-font-serif); }
  .bevel-chart > .bevel-chart__header .bevel-badge { padding: 3px 7px; font: 500 11px/1.4 var(--bevel-font-mono); letter-spacing: .02em; text-transform: none; }
  .bevel-chart__plot { display: block; inline-size: 100%; block-size: auto; overflow: visible; color: var(--bevel-brass); }
  .bevel-chart__plot text { fill: var(--bevel-muted); font: 500 11px var(--bevel-font-mono); }
  .bevel-chart__grid { stroke: var(--bevel-line); }
  .bevel-chart__data { fill: var(--bevel-brass); }
  .bevel-chart__line { fill: none; stroke: var(--bevel-brass); stroke-width: 2.5; }
  .bevel-chart [data-bevel-series-key][hidden] { display: none; }
  .bevel-chart__legend { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: 16px; padding-block-start: 14px; border-top: 1px solid var(--bevel-line); color: var(--bevel-ink-2); font-size: 12.5px; }
  .bevel-chart__series { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; background: transparent; color: var(--bevel-ink-2); }
  .bevel-chart__series[aria-pressed="false"] { color: var(--bevel-muted); text-decoration: line-through; }
  .bevel-chart__swatch { display: inline-block; inline-size: 9px; block-size: 9px; background: var(--bevel-brass); }
  .bevel-chart__total { color: var(--bevel-ink); font: 12px var(--bevel-font-mono); }
  .bevel-chart__table { position: absolute; inset: 0 auto auto 0; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bevel-chart__spark { display: flex; align-items: flex-end; gap: 36px; }
  .bevel-chart__spark-value { flex: 0 0 auto; }
  .bevel-chart__spark-value strong { display: block; margin-block-end: 6px; color: var(--bevel-ink); font: 34px var(--bevel-font-mono); letter-spacing: -.06em; }
  .bevel-chart__spark-body { flex: 1; min-inline-size: 0; }
  .bevel-chart__spark-body .bevel-chart__plot { block-size: 64px; }
  .bevel-chart__days { display: grid; grid-template-columns: repeat(7, 1fr); margin-block-start: 8px; padding-block-start: 8px; border-top: 1px solid var(--bevel-line); }
  .bevel-chart__days span { display: grid; justify-items: center; gap: 2px; color: var(--bevel-faint); font: 10px var(--bevel-font-mono); letter-spacing: .06em; text-transform: uppercase; }
  .bevel-chart__days b { color: var(--bevel-ink); font-size: 12px; font-weight: 500; letter-spacing: 0; }
  .bevel-chart__days [data-bevel-peak] b { color: var(--bevel-brass); }
  @media (max-width: 520px) {
    .bevel-display-example { padding: 24px 20px 28px; }
    .bevel-display-example > .bevel-example__header { margin-block-end: 20px; padding-block-end: 14px; }
    .bevel-display-example > .bevel-example__header h1 { font-size: 31px; }
    .bevel-activity__list { margin-inline-start: 14px; padding-inline-start: 24px; }
    .bevel-activity__avatar { inset-inline-start: -41px; inline-size: 30px; block-size: 30px; font-size: 10px; }
    .bevel-stats { grid-template-columns: 1fr; }
    .bevel-stats__tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 14px 0; }
    .bevel-stats__tile + .bevel-stats__tile { border-top: 1px solid var(--bevel-line); border-left: 0; }
    .bevel-stats__value { margin: 4px 0 0; font-size: 30px; }
    .bevel-stats__delta { grid-column: 2; grid-row: 1 / 3; justify-self: end; text-align: right; }
    .bevel-stats__spark { display: none; }
    .bevel-chart__spark { flex-direction: column; align-items: stretch; gap: 16px; }
    .bevel-chart__days span { font-size: 9px; }
  }
  .bevel-grid__cell[data-bevel-edit] { position: relative; }
  .bevel-split { display: grid; grid-template-columns: minmax(0, var(--bevel-split-size)) 10px minmax(0, 1fr); min-block-size: 300px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-split__pane { min-inline-size: 0; min-block-size: 0; overflow: auto; padding: 18px 14px; }
  .bevel-split__pane:first-child { background: var(--bevel-sunk); }
  .bevel-split__divider { display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; border-inline: 1px solid var(--bevel-line-2); background: var(--bevel-face); color: var(--bevel-muted); }
  .bevel-split__divider > svg { flex-shrink: 0; }
  .bevel-split__divider[hidden] { display: none; }
  .bevel-split__divider[aria-disabled="true"] { cursor: default; }
  .bevel-split__divider:focus-visible { outline-offset: -2px; }
  .bevel-split__eyebrow { margin-bottom: 7px; padding: 0 7px 8px; color: var(--bevel-muted); font: 500 10px/1.6 var(--bevel-font-mono); letter-spacing: .14em; text-transform: uppercase; }
  .bevel-split__item { display: flex; align-items: center; gap: 9px; margin: 2px 0; padding: 8px; border-left: 2px solid transparent; color: var(--bevel-ink-2); font-size: 13.5px; line-height: 1.5; }
  .bevel-split__item svg { color: var(--bevel-muted); flex-shrink: 0; }
  .bevel-split__item[aria-current] { background: var(--bevel-surface); border-left-color: var(--bevel-brass); color: var(--bevel-ink); font-weight: 500; }
  .bevel-split__item[aria-current] svg { color: var(--bevel-brass); }
  .bevel-split__pane pre { margin: 0; padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.8 var(--bevel-font-mono); }
  .bevel-split__pane--detail { padding: 22px 26px; }
  .bevel-split__pane--detail h2 { margin: 2px 0 0; font: 400 27px/1.15 var(--bevel-font-serif); }
  .bevel-split__pane--detail p { margin: 12px 0 0; color: var(--bevel-ink-2); font-size: 14px; }
  .bevel-split__byline { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bevel-line); }
  .bevel-split__avatar { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--bevel-line); background: var(--bevel-brass-soft); color: var(--bevel-brass); font: 500 10px var(--bevel-font-mono); }
  .bevel-split__time { color: var(--bevel-muted); font-size: 12px; }
  .bevel-split__caption { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--bevel-muted); font: 11px var(--bevel-font-mono); }
  .bevel-split[data-bevel-orientation="vertical"] { height: 420px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, var(--bevel-split-size)) 10px minmax(0, 1fr); }
  .bevel-split[data-bevel-orientation="vertical"] > .bevel-split__divider { cursor: row-resize; border-inline: 0; border-block: 1px solid var(--bevel-line-2); }
  @media (max-width: 640px) {
    .bevel-split, .bevel-split[data-bevel-orientation="vertical"] { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
    .bevel-split > .bevel-split__divider { display: none; }
    .bevel-split > .bevel-split__pane { padding: 16px 12px; }
    .bevel-split__pane--detail h2 { font-size: 22px; }
    .bevel-split__caption { display: none; }
  }
  .bevel-richtext { border: 1px solid var(--bevel-line-2); }
  .bevel-richtext__toolbar { display: flex; gap: 4px; padding: 7px; border-bottom: 1px solid var(--bevel-line-2); }
  .bevel-kanban { overflow-x: auto; }
  .bevel-kanban__toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
  .bevel-kanban__columns { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 12px; min-inline-size: 1060px; }
  .bevel-kanban__column { background: var(--bevel-sunk); border: 1px solid var(--bevel-line-2); }
  .bevel-kanban__column-header { padding: 12px; border-bottom: 1px solid var(--bevel-line-2); }
  .bevel-kanban__list { display: grid; gap: 8px; padding: 8px; min-block-size: 120px; }
  .bevel-kanban__card { padding: 12px; background: var(--bevel-surface); border: 1px solid var(--bevel-line-2); }
  .bevel-kanban__card[aria-selected="true"] { outline: 2px solid var(--bevel-brass); }
  [data-bevel-pending] { opacity: .72; }
  @media (max-width: 640px) {
    .bevel-settings__row { grid-template-columns:1fr; gap:12px; padding:16px 0; }
    .bevel-settings__control { justify-self:start; }
    .bevel-settings__row .bevel-select.bevel-settings__control { width:100%; }
    .bevel-choice-card { padding:16px; }
    .bevel-document-panel__row { align-items:flex-start; flex-wrap:wrap; }
    .bevel-document-panel__note { margin-top:24px; }
    .bevel-drawer { inline-size: 100vw; max-inline-size: none; box-sizing: border-box; }
    .bevel-wizard { grid-template-columns:1fr; gap:18px; }
    .bevel-wizard__steps { display:flex; gap:6px; border-right:0; border-bottom:1px solid var(--bevel-line); padding:0 0 14px; }
    .bevel-wizard__step { flex:1; min-height:0; padding:0 0 0 36px; font-size:11.5px; }
    .bevel-wizard__step::before { display:none; }
    .bevel-wizard__marker { top:0; width:28px; height:28px; }
    .bevel-wizard__step-note { display:none; }
    .bevel-wizard__actions { margin-top:18px; }
    .bevel-anchor-example:has(.bevel-wizard) .bevel-anchor-example__header { margin-bottom:20px; padding-bottom:14px; }
    .bevel-settings__row { grid-template-columns: 1fr; }
  }
  /* 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:where(:not(:disabled, [aria-disabled="true"])) {
    border-color: var(--bevel-edge-lo) var(--bevel-edge-hi) var(--bevel-edge-hi) var(--bevel-edge-lo);
  }
  .bevel-button:active:where(:not(:disabled, [aria-disabled="true"])) .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; }

  /* ============================ FILES TABLE ============================ */
  .bevel-files { min-width: 0; container: bevel-files / inline-size; color: var(--bevel-ink); font-family: var(--bevel-font-sans); background: var(--bevel-surface); border: 1px solid var(--bevel-line-2); }
  .bevel-files__scroll { position: relative; overflow-x: auto; }
  .bevel-files__table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
  .bevel-files__table th {
    height: 38px; padding: 0 12px; text-align: left; white-space: nowrap;
    font: 500 11px/1.4 var(--bevel-font-mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--bevel-muted); background: var(--bevel-ground); border-bottom: 1px solid var(--bevel-line-2);
  }
  .bevel-files__table td { height: 46px; padding: 0 12px; vertical-align: middle; border-bottom: 1px solid var(--bevel-line); }
  .bevel-files__table tbody > tr:last-child:not([data-bevel-drop-target]) > td { border-bottom: 0; }
  .bevel-files__sort {
    display: inline-flex; align-items: center; gap: 5px; height: 38px; margin: 0; padding: 0;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
    background: none; border: 0; border-radius: 0; cursor: pointer;
  }
  .bevel-files__sort:hover, .bevel-files__table th:is([aria-sort="ascending"], [aria-sort="descending"]) .bevel-files__sort { color: var(--bevel-ink); }
  .bevel-files__sort:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
  .bevel-files__arrow { display: none; flex-shrink: 0; }
  .bevel-files__table th:is([aria-sort="ascending"], [aria-sort="descending"]) .bevel-files__arrow { display: block; }
  .bevel-files__table th[aria-sort="descending"] .bevel-files__arrow { rotate: 180deg; }

  .bevel-files__table .bevel-files__pick { width: 44px; padding-right: 0; }
  .bevel-files__pick .bevel-checkbox { display: flex; }
  .bevel-files__pick .bevel-checkbox__box { width: 16px; height: 16px; margin-top: 0; }
  .bevel-files__table .bevel-files__name { min-width: 240px; }
  .bevel-files__table .bevel-files__status { width: 230px; }
  .bevel-files__table .bevel-files__editor { width: 110px; }
  .bevel-files__table .bevel-files__updated { width: 120px; }
  .bevel-files__table .bevel-files__size { width: 90px; text-align: right; }
  .bevel-files__table .bevel-files__actions { width: 112px; text-align: right; }
  .bevel-files__table td:is(.bevel-files__updated, .bevel-files__size) { font: 12.5px/1.4 var(--bevel-font-mono); color: var(--bevel-muted); }

  .bevel-files__row { cursor: pointer; }
  .bevel-files__row:hover td { background: var(--bevel-sunk); }
  .bevel-files__row:is([data-bevel-selected], :has(:checked)) td { background: color-mix(in srgb, var(--bevel-brass-soft) 55%, var(--bevel-surface)); }
  .bevel-files__row[data-bevel-drop-target] td { background: var(--bevel-brass-soft); border-top: 2px dashed var(--bevel-brass); border-bottom: 2px dashed var(--bevel-brass); }
  .bevel-files__row[data-bevel-drop-target] td:first-child { border-left: 2px dashed var(--bevel-brass); }
  .bevel-files__row[data-bevel-drop-target] td:last-child { border-right: 2px dashed var(--bevel-brass); }

  .bevel-files__anchor { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .bevel-files__kind { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; color: var(--bevel-muted); background: var(--bevel-sunk); border: 1px solid var(--bevel-line); }
  .bevel-files__row:hover .bevel-files__kind { background: var(--bevel-surface); }
  .bevel-files__label { display: flex; flex-direction: column; flex: 1 1 0; width: 0; line-height: 1.25; }
  .bevel-files__title {
    display: block; width: fit-content; max-width: 100%; margin: 0; padding: 0;
    font: inherit; font-weight: 500; color: var(--bevel-ink); text-align: left; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: none; border: 0; border-radius: 0; cursor: pointer;
  }
  .bevel-files__title:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
  .bevel-files__detail { margin-top: 3px; font: 11.5px/1.25 var(--bevel-font-mono); color: var(--bevel-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bevel-files__detail--location { color: var(--bevel-muted); }
  .bevel-files__detail:empty { display: none; }

  .bevel-files__pill {
    display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; padding: 4px 7px; vertical-align: middle; white-space: nowrap;
    font: 600 10px/1 var(--bevel-font-mono); letter-spacing: .09em; text-transform: uppercase;
    color: var(--bevel-muted); background: var(--bevel-sunk); border: 1px solid var(--bevel-line);
  }
  .bevel-files__pill::before { content: ""; width: 4px; height: 4px; background: currentColor; }
  .bevel-files__pill:has(svg)::before { display: none; }
  .bevel-files__pill--accent { color: color-mix(in srgb, var(--bevel-brass) 80%, var(--bevel-ink)); background: var(--bevel-brass-soft); border-color: color-mix(in srgb, var(--bevel-brass) 28%, var(--bevel-brass-soft)); }
  .bevel-files__pill--good { color: var(--bevel-teal); background: var(--bevel-teal-soft); border-color: color-mix(in srgb, var(--bevel-teal) 28%, var(--bevel-teal-soft)); }
  .bevel-files__pill--alert { color: var(--bevel-ox); background: var(--bevel-ox-soft); border-color: color-mix(in srgb, var(--bevel-ox) 28%, var(--bevel-ox-soft)); }
  .bevel-files__drop-hint { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 500 11px/1 var(--bevel-font-mono); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--bevel-brass) 82%, var(--bevel-ink)); }

  .bevel-files__avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; font: 500 9.5px/1 var(--bevel-font-mono); letter-spacing: .02em; color: var(--bevel-ink-2); background: var(--bevel-sunk); border: 1px solid var(--bevel-line-2); }
  .bevel-files__avatar--accent { color: color-mix(in srgb, var(--bevel-brass) 80%, var(--bevel-ink)); background: var(--bevel-brass-soft); border-color: color-mix(in srgb, var(--bevel-brass) 30%, var(--bevel-brass-soft)); }
  .bevel-files__avatar--good { color: var(--bevel-teal); background: var(--bevel-teal-soft); border-color: color-mix(in srgb, var(--bevel-teal) 30%, var(--bevel-teal-soft)); }

  .bevel-files__tools { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
  .bevel-files__tool { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; color: var(--bevel-muted); text-decoration: none; background: none; border: 0; border-radius: 0; cursor: pointer; }
  .bevel-files__tool:hover { color: var(--bevel-ink); background: var(--bevel-sunk); }
  .bevel-files__tool:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: -2px; }
  .bevel-files__tool--reveal { opacity: 0; }
  .bevel-files__row:is(:hover, :focus-within) .bevel-files__tool--reveal { opacity: 1; }
  @media (hover: none) {
    .bevel-files__tool--reveal { opacity: 1; }
  }

  .bevel-files__skeleton { cursor: default; }
  .bevel-files__table .bevel-files__skeleton > td { border-bottom: 0; }
  .bevel-files__lines { display: grid; gap: 6px; min-width: 0; }
  .bevel-files__bar { display: block; max-width: 100%; height: 9px; background: var(--bevel-sunk); border: 1px solid var(--bevel-line); animation: bevel-skel 1.5s ease-in-out infinite; }
  .bevel-files__bar--short { height: 7px; opacity: .7; animation-delay: .12s; }
  .bevel-files__size .bevel-files__bar { margin-left: auto; }
  .bevel-files__table .bevel-files__notice > td { height: auto; padding: 4px 12px 16px; text-align: center; font-size: 12.5px; color: var(--bevel-muted); }
  .bevel-files__table .bevel-files__empty > td { height: auto; padding: 44px 16px; }
  .bevel-files__blank { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 30ch; margin: 0 auto; text-align: center; }
  .bevel-files__blank-tile { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 2px; color: var(--bevel-muted); background: var(--bevel-sunk); border: 1px solid var(--bevel-line); }
  .bevel-files__blank-title { margin: 0; font: 500 14.5px/1.3 var(--bevel-font-sans); color: var(--bevel-ink); }
  .bevel-files__blank-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--bevel-muted); }
  .bevel-files__blank .bevel-button { margin-top: 6px; }

  .bevel-files__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 9px 14px;
    font: 11.5px/1.5 var(--bevel-font-mono); color: var(--bevel-faint); background: var(--bevel-ground); border-top: 1px solid var(--bevel-line-2);
  }
  .bevel-files__foot:has(.bevel-files__more) { padding: 8px 12px; }
  .bevel-files__spacer { flex: 1; }
  .bevel-files__more { padding: 2px 9px; font-family: var(--bevel-font-sans); font-size: 12.5px; }

  @container bevel-files (max-width: 800px) {
    .bevel-files__table, .bevel-files__table > tbody { display: block; }
    .bevel-files__table > thead { display: none; }
    .bevel-files__table td { height: auto; padding: 0; border-bottom: 0; }
    .bevel-files__row {
      display: grid; grid-template-columns: auto auto minmax(0, max-content) minmax(0, max-content) 1fr auto; grid-template-rows: auto auto;
      align-items: center; column-gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--bevel-line);
    }
    .bevel-files__table tbody > tr:last-child:not([data-bevel-drop-target]) { border-bottom: 0; }
    .bevel-files__row > .bevel-files__name, .bevel-files__row .bevel-files__anchor, .bevel-files__row .bevel-files__label { display: contents; }
    .bevel-files__table .bevel-files__pick { grid-column: 1; grid-row: 1 / 3; width: auto; }
    .bevel-files__row .bevel-files__kind { grid-column: 2; grid-row: 1 / 3; }
    .bevel-files__row .bevel-files__title { grid-column: 3; grid-row: 1; min-width: 0; }
    .bevel-files__table .bevel-files__status { grid-column: 4; grid-row: 1; width: auto; min-width: 0; }
    .bevel-files__row .bevel-files__detail { grid-column: 3 / 6; grid-row: 2; min-width: 0; }
    .bevel-files__table .bevel-files__actions { grid-column: 6; grid-row: 1 / 3; width: auto; }
    .bevel-files__table :is(.bevel-files__editor, .bevel-files__updated, .bevel-files__size) { display: none; }
    .bevel-files__tool--reveal { display: none; }
    .bevel-files__row .bevel-files__detail:empty { display: block; }
    .bevel-files__detail::after { content: attr(data-fold); }
    .bevel-files__row:hover { background: var(--bevel-sunk); }
    .bevel-files__row:is([data-bevel-selected], :has(:checked)) { background: color-mix(in srgb, var(--bevel-brass-soft) 55%, var(--bevel-surface)); }
    .bevel-files__row[data-bevel-drop-target] { background: var(--bevel-brass-soft); border: 2px dashed var(--bevel-brass); }
    .bevel-files__row:is(:hover, [data-bevel-selected], :has(:checked), [data-bevel-drop-target]) td { background: none; }
    .bevel-files__row[data-bevel-drop-target] td, .bevel-files__row[data-bevel-drop-target] td:is(:first-child, :last-child) { border: 0; }
    .bevel-files__skeleton { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
    .bevel-files__table .bevel-files__skeleton > .bevel-files__pick { width: 16px; }
    .bevel-files__notice, .bevel-files__empty { display: block; }
    .bevel-files__table :is(.bevel-files__notice, .bevel-files__empty) > td { display: block; }
  }
  .bevel-files-example__section { margin-block-start: 40px; }
  .bevel-files-example__section > .bevel-kicker { margin-block-end: 12px; }

  /* ============================ 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; }
  .bevel-seg--links { gap: 0; }
  .bevel-seg--links > .bevel-button { padding: 5px 13px; color: var(--bevel-muted); }
  .bevel-seg--links > .bevel-button:hover { background: var(--bevel-face); color: var(--bevel-ink); }
  .bevel-seg--links > .bevel-button[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);
    color: var(--bevel-ink); position: relative; z-index: 1;
  }
  .bevel-seg--links > .bevel-button[aria-current="page"] .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; }

  .bevel-example-page { min-height: 100dvh; background: var(--bevel-ground); }
  .bevel-example { min-height: 100dvh; padding: 38px; }
  .bevel-example__header { max-width: 560px; margin-bottom: 30px; }
  .bevel-example__header h1 { margin: 0; font: 400 38px/1.1 var(--bevel-font-serif); letter-spacing: -.025em; }
  .bevel-example__header p { color: var(--bevel-muted); }
  .bevel-example__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .bevel-drawer-context { min-block-size: 100dvh; padding: 35px 26px; background: var(--bevel-sunk); }
  .bevel-drawer-context__title { margin: 0; font: 400 30px/1.1 var(--bevel-font-serif); }
  .bevel-drawer-context__note { margin: 10px 0 18px; color: var(--bevel-muted); font-size: 12px; }
  .bevel-drawer-context__list { max-inline-size: 420px; border-block: 1px solid var(--bevel-line); }
  .bevel-drawer-context__row { display: grid; grid-template-columns: 76px 1fr; gap: 0; padding: 13px 10px; border-bottom: 1px solid var(--bevel-line); font-size: 13px; }
  .bevel-drawer-context__row[data-current] { border-left: 2px solid var(--bevel-brass); background: var(--bevel-surface); }

  .bevel-modal,
  .bevel-drawer {
    color: var(--bevel-ink); background: var(--bevel-surface); border: 2px solid var(--bevel-ink);
    border-radius: 0; box-shadow: var(--bevel-shadow); padding: 0; overflow: visible;
  }
  .bevel-modal::backdrop,
  .bevel-drawer::backdrop { background: color-mix(in srgb, var(--bevel-ground) 70%, transparent); }
  .bevel-modal { inline-size: min(490px, calc(100vw - 36px)); max-inline-size: 490px; max-block-size: calc(100dvh - 36px); }
  .bevel-modal__inner { display: flex; flex-direction: column; max-block-size: calc(100dvh - 40px); }
  .bevel-modal__header { padding: 38px 40px 0; border-bottom: 0; }
  .bevel-modal__heading,
  .bevel-drawer__heading { margin: 0; font: 400 34px/1.1 var(--bevel-font-serif); letter-spacing: -.018em; }
  .bevel-modal__description { margin: 10px 0 0; color: var(--bevel-ink-2); font-size: 14px; line-height: 1.55; }
  .bevel-modal:has(.bevel-overlay__close) .bevel-modal__heading:first-child { padding-inline-end: 52px; }
  .bevel-modal__body { min-block-size: 0; overflow: auto; padding: 22px 40px 4px; }
  .bevel-modal__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin: 22px 40px 30px; padding: 22px 0 0; border-top: 1px solid var(--bevel-line); }
  .bevel-modal__scroll { max-block-size: 250px; overflow: auto; padding-right: 14px; }
  .bevel-modal__scroll h3 { margin: 12px 0 0; font: 400 23px/1.1 var(--bevel-font-serif); }
  .bevel-modal__scroll p { margin: 12px 0; color: var(--bevel-muted); }
  .bevel-overlay__close {
    position: absolute; inset: -1px -1px auto auto; z-index: 2; inline-size: 68px; block-size: 68px;
    padding: 0; border: 0; background: transparent; color: var(--bevel-ink); cursor: pointer;
    clip-path: polygon(0 4%, 0 0, 100% 0, 100% 100%, 94% 100%);
  }
  .bevel-drawer .bevel-overlay__close { inset: 0 0 auto auto; inline-size: 68px; block-size: 68px; }
  .bevel-overlay__close svg { display: block; inline-size: 100%; block-size: 100%; }
  .bevel-overlay__close-bg { fill: var(--bevel-sunk); }
  .bevel-overlay__close:is(:hover, :focus-visible) .bevel-overlay__close-bg { fill: var(--bevel-face); }
  .bevel-overlay__close-x { fill: var(--bevel-ink); }
  .bevel-overlay__close:focus-visible .bevel-overlay__close-bg { fill: var(--bevel-brass); }
  .bevel-overlay__close:focus-visible .bevel-overlay__close-x { fill: var(--bevel-face); }
  .bevel-drawer .bevel-overlay__close-bg { fill: var(--bevel-sunk); }
  .bevel-drawer .bevel-overlay__close-x { fill: var(--bevel-ink); }
  .bevel-overlay__eyebrow { margin-bottom: 12px; color: var(--bevel-muted); font: 500 10px var(--bevel-font-mono); letter-spacing: .13em; text-transform: uppercase; }
  .bevel-modal :where(.bevel-button),
  .bevel-drawer :where(.bevel-button) { padding: 6px 13px; font-size: 14px; }
  .bevel-overlay__stack { display: grid; gap: 16px; }
  .bevel-overlay__field { display: grid; gap: 7px; font-size: 13px; font-weight: 500; }
  .bevel-overlay__well { display: flex; align-items: center; gap: 12px; padding: 18px; background: var(--bevel-sunk); }
  .bevel-overlay__mono { font-family: var(--bevel-font-mono); }
  .bevel-overlay__badge { display: inline-flex; padding: 3px 7px; font-size: 11px; }
  .bevel-overlay__badge--bad { color: var(--bevel-ox); background: var(--bevel-ox-soft); border: 1px solid var(--bevel-ox); }
  .bevel-overlay__bad { color: var(--bevel-ox); }

  .bevel-drawer { margin: 0 0 0 auto; inline-size: min(430px, 100vw); block-size: 100dvh; max-block-size: 100dvh; }
  .bevel-drawer__inner { display: flex; flex-direction: column; block-size: 100%; }
  .bevel-drawer__header { padding: 30px 28px 20px; border-bottom: 1px solid var(--bevel-line); }
  .bevel-drawer__header > .bevel-overlay__eyebrow { min-block-size: 20px; padding-right: 48px; }
  .bevel-drawer__heading { font-size: 28px; }
  .bevel-drawer:has(.bevel-overlay__close) .bevel-drawer__heading:first-child { padding-inline-end: 56px; }
  .bevel-drawer__amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
  .bevel-drawer__amount .bevel-overlay__mono { font-size: 26px; letter-spacing: -.03em; }
  .bevel-drawer__body { flex: 1; min-block-size: 0; overflow: auto; padding: 22px 28px; }
  .bevel-drawer__details { display: grid; grid-template-columns: 96px 1fr; gap: 12px 16px; margin: 0; font-size: 13.5px; }
  .bevel-drawer__details dt { color: var(--bevel-muted); font: 500 10px/1.8 var(--bevel-font-mono); letter-spacing: .12em; text-transform: uppercase; }
  .bevel-drawer__details dd { margin: 0; }
  .bevel-drawer__section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bevel-line); }
  .bevel-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--bevel-line); font-size: 13.5px; }
  .bevel-drawer__row:last-child { border-bottom: 0; }
  .bevel-drawer__row small,
  .bevel-drawer__footer small { color: var(--bevel-muted); }
  .bevel-drawer__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--bevel-line); }

  @media (max-width: 520px) {
    .bevel-example { padding: 26px 20px; }
    .bevel-modal__header { padding: 34px 25px 0; }
    .bevel-modal__body { padding-inline: 25px; }
    .bevel-modal__footer { margin-inline: 25px; margin-bottom: 25px; }
    .bevel-modal__heading { font-size: 29px; }
    .bevel-drawer { inline-size: 100vw; }
    .bevel-drawer__header,
    .bevel-drawer__body,
    .bevel-drawer__footer { padding-left: 20px; padding-right: 20px; }
    .bevel-drawer__header > .bevel-overlay__eyebrow { padding-right: 48px; }
  }

  .bevel-anchor-example { min-height: 100dvh; padding: 34px 38px; }
  .bevel-anchor-example__header { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--bevel-line); }
  .bevel-anchor-example__header h1 { margin: 0; font: 400 38px/1.1 var(--bevel-font-serif); letter-spacing: -.025em; }
  .bevel-anchor-example__header p { margin: 10px 0 0; color: var(--bevel-muted); }
  .bevel-anchor-example__header > .bevel-overlay__eyebrow { color:var(--bevel-brass); }
  .bevel-anchor-example__header p { font-size:13.5px; }
  .bevel-anchor-stage { position: relative; min-height: 360px; padding: 24px; background: var(--bevel-sunk); }
  .bevel-anchor-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .bevel-icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; 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-icon-button--flat { width: 28px; height: 28px; color: var(--bevel-muted); background: none; border: 0; cursor: pointer; }
  .bevel-icon-button--flat:hover { background: var(--bevel-sunk); color: var(--bevel-ink); }
  .bevel-icon-button--flat:disabled, .bevel-icon-button--flat[aria-disabled="true"] { opacity: .5; cursor: not-allowed; background: none; color: var(--bevel-muted); }
  .bevel-app-shell:has(> .bevel-app-shell__bar) { flex-direction: column; }
  .bevel-app-shell__bar { display: flex; flex-shrink: 0; align-items: center; gap: 14px; min-block-size: 54px; padding: 0 18px 0 20px; border-bottom: 1px solid var(--bevel-line-2); background: var(--bevel-ground); color: var(--bevel-ink); }
  .bevel-app-shell__brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 9px; color: var(--bevel-ink); text-decoration: none; }
  .bevel-app-shell__mark { display: inline-grid; flex-shrink: 0; place-items: center; inline-size: 26px; block-size: 26px; color: var(--bevel-brass); }
  .bevel-app-shell__mark > svg { display: block; inline-size: 100%; block-size: 100%; }
  .bevel-app-shell__word { font: 500 19px/1 var(--bevel-font-serif); letter-spacing: -.005em; white-space: nowrap; }
  .bevel-app-shell__rule { flex-shrink: 0; inline-size: 1px; block-size: 22px; margin: 0 2px; background: var(--bevel-line-2); }
  .bevel-app-shell__switcher { display: inline-flex; align-items: center; gap: 7px; min-inline-size: 0; block-size: 30px; padding: 0 9px 0 8px; border: 0; background: none; color: var(--bevel-ink); font-size: 13.5px; font-weight: 500; line-height: 1.5; cursor: pointer; }
  .bevel-app-shell__switcher:hover { background: var(--bevel-sunk); }
  .bevel-app-shell__switcher:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
  .bevel-app-shell__switcher:disabled, .bevel-app-shell__switcher[aria-disabled="true"] { background: none; cursor: default; }
  .bevel-app-shell__switcher-icon, .bevel-app-shell__caret { display: inline-grid; flex-shrink: 0; place-items: center; }
  .bevel-app-shell__switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bevel-app-shell__caret { color: var(--bevel-muted); }
  .bevel-app-shell__tabs { flex-shrink: 0; margin-left: 6px; }
  .bevel-app-shell__spacer { flex: 1; }
  .bevel-app-shell__nav-toggle { display: none; }
  .bevel-app-shell__account { flex-shrink: 0; width: 32px; height: 32px; }
  .bevel-app-shell__body { display: flex; flex: 1; min-block-size: 0; }
  .bevel-app-shell__side { display: flex; flex: 0 0 256px; flex-direction: column; min-inline-size: 0; border-right: 1px solid var(--bevel-line-2); background: var(--bevel-ground); }
  .bevel-app-shell__side-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 12px; border-bottom: 1px solid var(--bevel-line); }
  .bevel-app-shell__side-toggle { flex-shrink: 0; margin-inline-start: auto; }
  .bevel-app-shell__main { flex: 1; min-inline-size: 0; background: var(--bevel-surface); }
  .bevel-app-shell__content { max-inline-size: 1600px; margin-inline: auto; padding: 26px 32px 40px; }
  @media (min-width: 641px) {
    .bevel-app-shell__side[data-bevel-collapsed] { flex-basis: 45px; }
    .bevel-app-shell__side[data-bevel-collapsed] > *, .bevel-app-shell__side[data-bevel-collapsed] .bevel-app-shell__side-head > * { display: none; }
    .bevel-app-shell__side[data-bevel-collapsed] > .bevel-app-shell__side-head { display: flex; padding-inline: 8px; }
    .bevel-app-shell__side[data-bevel-collapsed] .bevel-app-shell__side-head > .bevel-app-shell__side-toggle { display: inline-grid; }
  }
  @media (max-width: 640px) {
    .bevel-app-shell__bar { flex-wrap: wrap; align-content: flex-start; gap: 9px 8px; min-block-size: 50px; padding: 9px 8px 0 12px; }
    .bevel-app-shell__mark { inline-size: 24px; block-size: 24px; }
    .bevel-app-shell__word { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .bevel-app-shell__rule, .bevel-app-shell__switcher-icon, .bevel-app-shell__side-toggle { display: none; }
    .bevel-app-shell__switcher { padding: 0 6px; }
    .bevel-app-shell__tabs { flex: 1 0 100%; order: 1; margin: 0 -8px 0 -12px; padding: 8px 12px; border-top: 1px solid var(--bevel-line-2); background: var(--bevel-ground); }
    .bevel-app-shell__tabs > .bevel-button { flex: 1; }
    .bevel-app-shell__nav-toggle { display: inline-grid; }
    .bevel-app-shell__side { display: none; }
    .bevel-app-shell[data-bevel-nav-open] .bevel-app-shell__side { position: static; display: flex; flex: 1; min-block-size: 0; overflow-y: auto; border-right: 0; }
    .bevel-app-shell[data-bevel-nav-open] .bevel-app-shell__main { display: none; }
    .bevel-app-shell__content { padding: 14px 12px 22px; }
  }
  .bevel-app-shell-example__tree { max-inline-size: none; padding: 4px 6px; border: 0; background: none; }
  .bevel-app-shell-example__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
  .bevel-app-shell-example__head h2 { margin: 0; font: 400 28px/1.1 var(--bevel-font-serif); letter-spacing: -.005em; }
  .bevel-app-shell-example__rows { border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-app-shell-example__rows > .bevel-document-row { gap: 12px; padding: 8px 8px 8px 12px; }
  .bevel-app-shell-example__rows > .bevel-document-row:last-child { border-bottom: 0; }
  .bevel-file-tree-example__frame { display: flex; block-size: 460px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-file-tree-example__side { display: flex; flex: 0 0 256px; flex-direction: column; min-inline-size: 0; border-inline-end: 1px solid var(--bevel-line-2); background: var(--bevel-ground); }
  .bevel-file-tree-example__head { display: flex; flex: none; align-items: center; gap: 6px; padding: 10px 8px 10px 12px; border-bottom: 1px solid var(--bevel-line); }
  .bevel-file-tree-example__main { flex: 1; min-inline-size: 0; padding: 22px 26px; color: var(--bevel-ink-2); font-size: 13px; }
  .bevel-file-tree-example__main h2 { margin: 0 0 10px; font: 400 22px/1.2 var(--bevel-font-serif); color: var(--bevel-ink); }
  .bevel-file-tree-example__facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
  .bevel-file-tree-example__facts dt { color: var(--bevel-muted); font: 500 11px/1.6 var(--bevel-font-mono); letter-spacing: .08em; text-transform: uppercase; }
  .bevel-file-tree-example__facts dd { margin: 0; }
  @media (max-width: 640px) {
    .bevel-file-tree-example__frame { flex-direction: column; block-size: auto; }
    .bevel-file-tree-example__side { flex: none; border-inline-end: 0; border-bottom: 1px solid var(--bevel-line-2); }
    .bevel-file-tree { max-block-size: 300px; }
  }
  .bevel-menu { width: 272px; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px; }
  .bevel-menu__title { padding: 8px 12px; color: var(--bevel-muted); font: 10px var(--bevel-font-mono); letter-spacing: .08em; }
  .bevel-menu__title { text-transform: uppercase; }
  .bevel-menu [role^="menuitem"] { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--bevel-ink); text-align: left; font-size: 14px; }
  .bevel-menu a[role^="menuitem"] { text-decoration: none; }
  .bevel-menu [role^="menuitem"] > span:first-child { display: inline-grid; place-items: center; width: 18px; color: var(--bevel-muted); }
  .bevel-menu [role^="menuitem"]:hover,
  .bevel-menu [role^="menuitem"]:focus { background: var(--bevel-sunk); outline: 0; }
  .bevel-menu [role^="menuitem"][disabled] { color: var(--bevel-faint); }
  .bevel-menu [role^="menuitem"][data-tone="danger"] { color: var(--bevel-ox); }
  .bevel-menu [role^="menuitem"][data-tone="danger"] > span:first-child { color: var(--bevel-ox); }
  .bevel-menu kbd { margin-left: auto; padding: 2px 5px; border: 1px solid var(--bevel-line-2); color: var(--bevel-muted); font: 10px var(--bevel-font-mono); }
  .bevel-menu__state { margin-left: auto; color: var(--bevel-muted); font: 10px var(--bevel-font-mono); }
  .bevel-menu hr { margin: 5px; border: 0; border-top: 1px solid var(--bevel-line); }

  .bevel-document-card { padding: 22px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-document-card__identity { display: flex; align-items: center; gap: 13px; }
  .bevel-document-card__status { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--bevel-muted); }
  .bevel-document-card__status--good { color: var(--bevel-teal); }
  .bevel-document-card__status .bevel-button { margin-left: auto; }
  .bevel-popconfirm { width: min(340px, calc(100vw - 24px)); max-width: 340px; padding: 18px 20px 16px; overflow: visible; }
  .bevel-popconfirm__arrow { position: absolute; width: 12px; height: 12px; background: var(--bevel-surface); border-top: 1px solid var(--bevel-line-2); border-left: 1px solid var(--bevel-line-2); transform: rotate(45deg); }
  .bevel-popconfirm[data-bevel-actual-placement^="bottom"] .bevel-popconfirm__arrow { top: -7px; }
  .bevel-popconfirm[data-bevel-actual-placement^="top"] .bevel-popconfirm__arrow { bottom: -7px; transform: rotate(225deg); }
  .bevel-popconfirm[data-bevel-actual-placement^="left"] .bevel-popconfirm__arrow { right: -7px; transform: rotate(135deg); }
  .bevel-popconfirm[data-bevel-actual-placement^="right"] .bevel-popconfirm__arrow { left: -7px; transform: rotate(-45deg); }
  .bevel-popconfirm__head { display: flex; align-items: center; gap: 9px; }
  .bevel-popconfirm__head { color: var(--bevel-ox); }
  .bevel-popconfirm__head h3 { margin: 0; color: var(--bevel-ink); font: 600 15.5px/1.1 var(--bevel-font-sans); }
  .bevel-popconfirm__description { margin: 8px 0 0; color: var(--bevel-ink-2); font-size: 13.5px; line-height: 1.5; }
  .bevel-popconfirm__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

  .bevel-combobox,
  .bevel-multiselect { width: min(440px, 100%); margin: 0; }
  .bevel-picker__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
  .bevel-combobox__control,
  .bevel-multiselect__control { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); }
  .bevel-combobox__control { min-height: 42px; padding: 0 4px 0 12px; }
  .bevel-combobox__toggle { width: 30px; height: 30px; border-color: transparent; background: transparent; }
  .bevel-combobox__toggle svg { transition: none; }
  .bevel-combobox__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .bevel-combobox:has(.bevel-combobox__listbox:popover-open) .bevel-combobox__toggle svg { transform: rotate(180deg); }
  .bevel-combobox__control:focus-within,
  .bevel-multiselect__control:focus-within { border-color: var(--bevel-brass); }
  .bevel-combobox__control:focus-within,
  .bevel-multiselect:has(.bevel-multiselect__panel:popover-open) > .bevel-multiselect__control { outline: 2px solid var(--bevel-brass); outline-offset: 1px; }
  .bevel-combobox__control input,
  .bevel-multiselect__search { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; }
  .bevel-combobox__listbox,
  .bevel-multiselect__panel { width: min(440px, calc(100vw - 16px)); padding: 6px; }
  .bevel-multiselect__search-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--bevel-line-2); color: var(--bevel-muted); }
  .bevel-combobox__option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: var(--bevel-ink); text-align: left; }
  .bevel-combobox__option[hidden],
  .bevel-multiselect__option[hidden],
  .bevel-combobox [role="option"][data-bevel-filtered],
  .bevel-multiselect__option[data-bevel-filtered] { display: none; }
  .bevel-combobox__option[aria-selected="true"],
  .bevel-combobox__option:hover { background: var(--bevel-sunk); }
  .bevel-combobox__option[aria-selected="true"] { box-shadow: inset 2px 0 var(--bevel-brass); outline: 0; }
  .bevel-combobox .bevel-combobox__option[aria-selected="true"] { outline: 0; }
  .bevel-combobox__option > svg { margin-left: auto; color: var(--bevel-brass); opacity: 0; }
  .bevel-combobox__option[aria-selected="true"] > svg { opacity: 1; }
  .bevel-combobox__option[aria-disabled="true"] { color: var(--bevel-faint); }
  .bevel-picker__avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid var(--bevel-line-2); background: var(--bevel-brass-soft); color: var(--bevel-brass); font: 9.5px var(--bevel-font-mono); }
  .bevel-picker__avatar--teal { background: var(--bevel-teal-soft); color: var(--bevel-teal); }
  .bevel-picker__avatar--ink { background: var(--bevel-ink); color: var(--bevel-ground); }
  .bevel-picker__person { display: grid; }
  .bevel-picker__person strong { color: var(--bevel-ink); font-size: 14px; font-weight: 500; }
  .bevel-picker__person small { color: var(--bevel-muted); }
  .bevel-picker__person small { font-size: 12px; }
  .bevel-combobox__empty,
  .bevel-multiselect__empty { padding: 24px 12px; color: var(--bevel-muted); text-align: center; }
  .bevel-picker__foot { margin-top: 10px; color: var(--bevel-muted); font: 10px var(--bevel-font-mono); }
  .bevel-multiselect__tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .bevel-multiselect__toggle { opacity: 0; }
  .bevel-multiselect__tag { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); font-size: 12px; }
  .bevel-multiselect__tag:has(.bevel-label-dot--brass) { background: var(--bevel-brass-soft); }
  .bevel-multiselect__tag:has(.bevel-label-dot--teal) { background: var(--bevel-teal-soft); }
  .bevel-multiselect__tag button { padding: 0; border: 0; background: transparent; color: var(--bevel-muted); font-size: 17px; }
  .bevel-multiselect__option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; font-size: 14px; }
  .bevel-multiselect .bevel-multiselect__option[hidden] { display: none; }
  .bevel-multiselect__option:has(input:checked) { background: transparent; }
  .bevel-multiselect__option:has(input:disabled) { color: var(--bevel-faint); }
  .bevel-label-dot { width: 8px; height: 8px; flex: none; background: var(--bevel-faint); }
  .bevel-label-dot--brass { background: var(--bevel-brass); }
  .bevel-label-dot--teal { background: var(--bevel-teal); }
  .bevel-label-dot--blue { background: var(--bevel-muted); }
  .bevel-label-dot--ox { background: var(--bevel-ox); }
  .bevel-combobox__listbox:has(.bevel-picker__foot--panel),
  .bevel-multiselect__panel:has(.bevel-picker__foot--panel) { overflow: visible; }
  .bevel-picker__foot--panel { position: absolute; top: 100%; left: 0; width: 100%; margin: 0; padding: 10px 12px; border: 0; }
  .bevel-combobox:has(.bevel-combobox__listbox:popover-open) > .bevel-picker__foot,
  .bevel-multiselect:has(.bevel-multiselect__panel:popover-open) > .bevel-picker__foot { visibility: hidden; }

  @media (max-width: 520px) {
    .bevel-anchor-example { padding: 26px 20px; }
    .bevel-anchor-example__header h1 { font-size: 29px; }
    .bevel-anchor-stage { padding: 20px; }
    .bevel-popconfirm { width: calc(100vw - 87px); }
    .bevel-document-card:has(.bevel-popconfirm:popover-open) { min-height: 255px; }
  }

/* Kanban board */
/* kanban.css — Fable's independent Kanban board. Four open lanes drawn on
   the ground with a ruled top edge instead of lane containers, dense sans
   cards, the blocking dependency shown on both ends, an aggregate tape, a
   filter bar and a task panel that pushes the board into a scrollable strip.
   Loads after fable.css. Every colour is a Bevel token. */

/* ------------------------------ frame ------------------------------ */
.bevel-avatar{display:inline-grid;place-items:center;width:34px;height:34px;flex-shrink:0;font:500 11px/1 var(--bevel-font-mono);letter-spacing:.02em;border:1px solid var(--bevel-line-2);background:var(--bevel-sunk);color:var(--bevel-ink-2)}
.bevel-avatar--small{width:26px;height:26px;font-size:9.5px}
.bevel-avatar[data-who="MC"]{background:var(--bevel-brass-soft);color:var(--bevel-brass);border-color:color-mix(in srgb,var(--bevel-brass) 30%,var(--bevel-brass-soft))}
.bevel-avatar[data-who="AR"]{background:var(--bevel-teal-soft);color:var(--bevel-teal);border-color:color-mix(in srgb,var(--bevel-teal) 30%,var(--bevel-teal-soft))}
.bevel-avatar[data-who="JP"]{background:var(--bevel-ink);color:var(--bevel-ground);border-color:var(--bevel-ink)}

.bevel-kanban{--bevel-kanban-lane:248px;--bevel-kanban-gap:18px;padding:26px 32px 24px;min-height:580px;font-size:13.5px;line-height:1.45;color:var(--bevel-ink);background:var(--bevel-ground)}
.bevel-kanban svg{flex-shrink:0}
.bevel-kanban h1,.bevel-kanban h2,.bevel-kanban h3,.bevel-kanban h4,.bevel-kanban p{margin:0}
.bevel-kanban .bevel-kanban__people{display:inline-flex}
.bevel-kanban .bevel-kanban__people .bevel-avatar{box-shadow:0 0 0 2px var(--bevel-ground)}
.bevel-kanban .bevel-kanban__people .bevel-avatar+.bevel-avatar{margin-left:-7px}
.bevel-kanban__spacer{flex:1}
.bevel-kanban__icon{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;background:none;color:var(--bevel-muted);cursor:pointer}
.bevel-kanban__icon:hover{color:var(--bevel-ink);background:var(--bevel-sunk);border-color:var(--bevel-line)}
.bevel-kanban__id{font:500 11px/1 var(--bevel-font-mono);letter-spacing:.04em;color:var(--bevel-muted)}

/* ---------------------------- masthead ----------------------------- */
.bevel-kanban__mast{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:2px solid var(--bevel-ink)}
.bevel-kanban__kicker{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--bevel-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bevel-brass);margin-bottom:12px}
.bevel-kanban__kicker i{font-style:normal;color:var(--bevel-faint)}
.bevel-kanban__mast h1{font:400 40px/1 var(--bevel-font-serif);letter-spacing:-.024em}
.bevel-kanban__mast-title p{margin-top:10px;font-size:14px;color:var(--bevel-ink-2);max-width:54ch}
.bevel-kanban__mast-side{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-bottom:2px}
.bevel-kanban__team{display:flex;align-items:center;gap:10px;margin-right:8px}
.bevel-kanban__team small{font:11px var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}
.bevel-kanban .bevel-button{white-space:nowrap}

/* ------------------------------ views ------------------------------ */
.bevel-kanban__views{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--bevel-line-2)}
.bevel-kanban__views a{display:inline-flex;align-items:center;gap:7px;padding:13px 12px 11px;margin-bottom:-1px;font-size:13.5px;color:var(--bevel-ink-2);text-decoration:none;border-bottom:2px solid transparent}
.bevel-kanban__views a b{font:500 10.5px/1 var(--bevel-font-mono);padding:3px 5px;background:var(--bevel-sunk);color:var(--bevel-muted)}
.bevel-kanban__views a[aria-current="page"]{color:var(--bevel-ink);border-bottom-color:var(--bevel-brass)}
.bevel-kanban__views a[aria-current="page"] b{background:var(--bevel-brass-soft);color:var(--bevel-brass)}
.bevel-kanban__views a[aria-current="page"] svg{color:var(--bevel-brass)}
.bevel-kanban__views-note{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:11px var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}

/* ------------------------------ tools ------------------------------ */
.bevel-kanban__tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0 0}
.bevel-kanban__search{display:flex;align-items:center;gap:8px;flex:0 1 250px;min-width:180px;height:32px;padding:0 8px 0 10px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);box-shadow:inset 0 1px 0 var(--bevel-edge-in);color:var(--bevel-muted)}
.bevel-kanban__search input{flex:1;min-width:0;border:0;background:none;padding:0;font-size:13.5px;color:var(--bevel-ink)}
.bevel-kanban__search input::placeholder{color:var(--bevel-muted)}
.bevel-kanban__search kbd{border-color:var(--bevel-line);background:var(--bevel-sunk)}
.bevel-kanban__chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;font-size:12.5px;font-weight:500;color:var(--bevel-ink-2);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);cursor:pointer;white-space:nowrap}
.bevel-kanban__chip:hover{background:color-mix(in srgb,var(--bevel-face),var(--bevel-edge-hi) 45%)}
.bevel-kanban__chip[aria-pressed="true"]{color:var(--bevel-ink);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-kanban__chip[aria-pressed="true"] svg:first-child{color:var(--bevel-brass)}
.bevel-kanban__chip[aria-pressed="true"] svg:last-child{color:var(--bevel-muted);margin-left:2px}
.bevel-kanban__chip-quiet{background:none;border-color:transparent;color:var(--bevel-muted);font-weight:400}
.bevel-kanban__chip-quiet:hover{background:var(--bevel-sunk);border-color:transparent;color:var(--bevel-ink)}

/* ------------------------------- tape ------------------------------ */
.bevel-kanban__tape{display:flex;align-items:stretch;margin:14px 0 0;padding:0;border-top:1px solid var(--bevel-line);border-bottom:1px solid var(--bevel-line)}
.bevel-kanban__tape>div{display:flex;flex-direction:column;gap:5px;padding:10px 18px 11px 0;margin-right:18px;border-right:1px solid var(--bevel-line)}
.bevel-kanban__tape>div:last-child{border-right:0;margin-right:0}
.bevel-kanban__tape dt{font:500 10px/1 var(--bevel-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bevel-muted)}
.bevel-kanban__tape dd{margin:0;font:400 22px/1 var(--bevel-font-serif);letter-spacing:-.01em;color:var(--bevel-ink)}
.bevel-kanban__tape dd small{font:11px var(--bevel-font-mono);color:var(--bevel-muted);margin-left:5px}
.bevel-kanban__tape dd[data-tone="ox"]{color:var(--bevel-ox)}
.bevel-kanban__tape-meter{flex:1;min-width:160px}
.bevel-kanban__tape-meter dd{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--bevel-font-mono);color:var(--bevel-ink-2);padding-top:6px}
.bevel-kanban__tape-meter .bevel-kanban__check-bar{flex:1;height:8px}

/* ---------------------------- empty note --------------------------- */
.bevel-kanban__empty-note{margin-top:16px;padding:12px 14px;font-size:13.5px;color:var(--bevel-ink-2);background:var(--bevel-sunk);border-left:3px solid var(--bevel-brass)}
.bevel-kanban__empty-note strong{font-weight:500;color:var(--bevel-ink)}

/* ------------------------------- work ------------------------------ */
.bevel-kanban__work{display:flex;align-items:flex-start;gap:0;margin-top:22px}
.bevel-kanban__board{display:grid;grid-template-columns:repeat(4,minmax(var(--bevel-kanban-lane),1fr));gap:0 var(--bevel-kanban-gap);flex:1;min-width:0;align-items:start}
.bevel-kanban__board:focus-visible{outline:2px solid var(--bevel-brass);outline-offset:6px}

/* lanes: no containers, a ruled head on the ground */
.bevel-kanban__column{min-width:0}
.bevel-kanban__board>.bevel-kanban__column{background:none;border:0}
.bevel-kanban__column-head{display:flex;align-items:center;gap:8px;padding:0 0 10px;border-bottom:1px solid var(--bevel-ink);margin-bottom:12px}
.bevel-kanban__column-head h2{font:500 13.5px/1 var(--bevel-font-sans);letter-spacing:.01em;color:var(--bevel-ink)}
.bevel-kanban__column-mark{width:8px;height:8px;background:var(--bevel-faint)}
.bevel-kanban__column-mark[data-bevel-column-key="next"]{background:var(--bevel-brass)}
.bevel-kanban__column-mark[data-bevel-column-key="progress"]{background:var(--bevel-teal)}
.bevel-kanban__column-mark[data-bevel-column-key="done"]{background:var(--bevel-ink)}
.bevel-kanban__count{font:500 11px/1 var(--bevel-font-mono);padding:4px 6px;background:var(--bevel-sunk);color:var(--bevel-ink-2);border:1px solid var(--bevel-line)}
.bevel-kanban__wip{font:500 10px/1 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bevel-muted);white-space:nowrap}
.bevel-kanban__wip[data-full="true"]{color:var(--bevel-ox)}
.bevel-kanban__column-head .bevel-kanban__icon{margin-left:auto;width:24px;height:24px}
.bevel-kanban__board .bevel-kanban__list{display:flex;flex-direction:column;gap:10px;padding:0;min-block-size:0}
.bevel-kanban__add{display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;border:1px dashed var(--bevel-line-2);background:none;color:var(--bevel-muted);font-size:12.5px;cursor:pointer;text-align:left}
.bevel-kanban__add:hover{color:var(--bevel-ink);border-color:var(--bevel-muted);background:var(--bevel-sunk)}

/* cards */
.bevel-kanban__card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 13px 11px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);border-bottom-color:color-mix(in srgb,var(--bevel-line-2) 60%,var(--bevel-ink));box-shadow:var(--bevel-shadow)}
.bevel-kanban__card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bevel-kanban__card h3{font:500 14px/1.3 var(--bevel-font-sans);letter-spacing:-.005em;color:var(--bevel-ink)}
.bevel-kanban__desc{font-size:12.5px;line-height:1.45;color:var(--bevel-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bevel-kanban__labels{display:flex;flex-wrap:wrap;gap:5px}
.bevel-kanban__label{display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 6px;font:500 10.5px/1.4 var(--bevel-font-mono);letter-spacing:.03em;color:var(--bevel-ink-2);background:var(--tone-soft,var(--bevel-sunk));border:1px solid color-mix(in srgb,var(--tone,var(--bevel-muted)) 26%,var(--tone-soft,var(--bevel-sunk)))}
.bevel-kanban__label::before{content:"";width:6px;height:6px;background:var(--tone,var(--bevel-muted))}
.bevel-kanban__label[data-bevel-label="design"]{--tone:var(--bevel-brass);--tone-soft:var(--bevel-brass-soft)}
.bevel-kanban__label[data-bevel-label="editorial"]{--tone:var(--bevel-teal);--tone-soft:var(--bevel-teal-soft)}
.bevel-kanban__label[data-bevel-label="engineering"]{--tone:var(--bevel-ink-2);--tone-soft:var(--bevel-sunk)}
.bevel-kanban__label[data-bevel-label="launch"]{--tone:var(--bevel-ox);--tone-soft:var(--bevel-ox-soft)}
.bevel-kanban__label[data-bevel-label="studio"]{--tone:var(--bevel-ink);--tone-soft:var(--bevel-sunk)}
.bevel-kanban__priority{display:inline-flex;align-items:center;gap:4px;font:500 10.5px/1 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bevel-muted)}
.bevel-kanban__priority[data-bevel-priority="high"]{color:var(--bevel-brass)}
.bevel-kanban__priority[data-bevel-priority="urgent"]{color:var(--bevel-ox-ink);background:var(--bevel-ox);padding:3px 6px 3px 5px}
.bevel-kanban__priority[data-bevel-priority="urgent"] svg{color:var(--bevel-ox-ink)}
.bevel-kanban__priority[data-bevel-priority="normal"] svg{display:none}
.bevel-kanban__cover{margin:-12px -13px 2px;border-bottom:1px solid var(--bevel-line-2);position:relative}
.bevel-kanban__cover img{display:block;width:100%;height:84px;object-fit:cover}
.bevel-kanban__cover figcaption{position:absolute;left:8px;bottom:8px;padding:2px 6px;font:500 10px/1.4 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--bevel-ink);color:var(--bevel-ground)}
.bevel-kanban__dep{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:11.5px;line-height:1.3;color:var(--bevel-ink-2);background:var(--bevel-sunk);border-left:2px solid var(--bevel-muted)}
.bevel-kanban__dep b{font-weight:500;font-family:var(--bevel-font-mono);font-size:11px;color:var(--bevel-ink)}
.bevel-kanban__dep span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bevel-kanban__dep.bevel-kanban--blocked{color:var(--bevel-ox);background:var(--bevel-ox-soft);border-left-color:var(--bevel-ox)}
.bevel-kanban__dep.bevel-kanban--blocked b{color:var(--bevel-ox)}
.bevel-kanban__check{display:flex;align-items:center;gap:8px}
.bevel-kanban__check-bar{display:block;flex:1;height:5px;background:var(--bevel-sunk);border:1px solid var(--bevel-line);font-style:normal}
.bevel-kanban__check-bar b{display:block;height:100%;background:var(--bevel-teal)}
.bevel-kanban__check-count{font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-muted)}
.bevel-kanban__card-foot{display:flex;align-items:center;gap:10px;margin-top:2px;padding-top:9px;border-top:1px solid var(--bevel-line)}
.bevel-kanban__due{display:inline-flex;align-items:center;gap:5px;font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}
.bevel-kanban__due[data-bevel-due="today"]{color:var(--bevel-brass)}
.bevel-kanban__due[data-bevel-due="overdue"]{color:var(--bevel-ox)}
.bevel-kanban__due[data-bevel-due="done"]{color:var(--bevel-teal)}
.bevel-kanban__meta{display:inline-flex;gap:9px;margin-left:auto}
.bevel-kanban__meta span{display:inline-flex;align-items:center;gap:4px;font:11px/1 var(--bevel-font-mono);color:var(--bevel-muted)}
.bevel-kanban__card-foot .bevel-kanban__people .bevel-avatar{width:22px;height:22px;font-size:8.5px}
.bevel-kanban__card-foot .bevel-kanban__people .bevel-avatar+.bevel-avatar{margin-left:-6px}

/* card states */
.bevel-kanban__card.bevel-kanban--blocked{border-left:3px solid var(--bevel-ox);padding-left:11px}
.bevel-kanban__card.bevel-kanban--blocked .bevel-kanban__cover{margin-left:-11px}
.bevel-kanban__card.bevel-kanban--done{background:var(--bevel-ground);box-shadow:none;border-color:var(--bevel-line)}
.bevel-kanban__card.bevel-kanban--done h3{color:var(--bevel-ink-2);text-decoration:line-through;text-decoration-color:var(--bevel-faint);text-decoration-thickness:1px}
.bevel-kanban__card.bevel-kanban--done .bevel-kanban__check-bar b{background:var(--bevel-muted)}
.bevel-kanban__card.bevel-kanban--selected{border-color:var(--bevel-brass);border-top:3px solid var(--bevel-brass);padding-top:10px;box-shadow:0 0 0 1px var(--bevel-brass),var(--bevel-shadow)}
.bevel-kanban__card.bevel-kanban--selected.bevel-kanban--blocked{border-left-color:var(--bevel-ox)}

/* empty lane */
.bevel-kanban__column-empty{padding:18px 14px 20px;border:1px dashed var(--bevel-line-2);color:var(--bevel-muted);text-align:left}
.bevel-kanban__column-empty strong{display:block;font:500 13.5px/1.3 var(--bevel-font-sans);color:var(--bevel-ink-2)}
.bevel-kanban__column-empty p{margin-top:5px;font-size:12.5px;line-height:1.45}
.bevel-kanban__empty-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px}
.bevel-kanban[data-state="empty"] .bevel-kanban__column[data-bevel-column-key="backlog"] .bevel-kanban__column-empty{border-style:solid;border-color:var(--bevel-brass);background:var(--bevel-surface);color:var(--bevel-ink-2)}
.bevel-kanban[data-state="empty"] .bevel-kanban__column[data-bevel-column-key="backlog"] .bevel-kanban__column-empty strong{color:var(--bevel-ink)}

/* --------------------------- board + panel ------------------------- */
.bevel-kanban__board-wrap{flex:1;min-width:0}
.bevel-kanban__work.bevel-kanban--has-panel{--bevel-kanban-lane:204px;--bevel-kanban-gap:14px}
.bevel-kanban__work.bevel-kanban--has-panel .bevel-kanban__board{display:flex;gap:var(--bevel-kanban-gap);overflow-x:auto;overscroll-behavior-x:contain;padding:0 2px 10px 2px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:none}
.bevel-kanban__work.bevel-kanban--has-panel .bevel-kanban__board::-webkit-scrollbar{display:none}
.bevel-kanban__scroll-rail{height:7px;background:var(--bevel-sunk);border:1px solid var(--bevel-line)}
.bevel-kanban__scroll-rail b{display:block;height:100%;background:var(--bevel-muted)}
.bevel-kanban__work.bevel-kanban--has-panel .bevel-kanban__column{flex:0 0 var(--bevel-kanban-lane);scroll-snap-align:start}
.bevel-kanban__work.bevel-kanban--has-panel .bevel-kanban__column-head h2{white-space:nowrap}
.bevel-kanban__work.bevel-kanban--has-panel .bevel-kanban__wip{display:none}
.bevel-kanban__board-wrap>.bevel-kanban__scroll-hint{margin-top:7px;font:11px/1.6 var(--bevel-font-mono);color:var(--bevel-muted)}
.bevel-kanban__scroll-hint svg{vertical-align:-2px;margin-right:6px}
.bevel-kanban__scroll-hint b{font-weight:500;color:var(--bevel-ink-2)}
.bevel-kanban__panel{flex:0 0 352px;margin-left:20px;padding:0 0 0 20px;border-left:2px solid var(--bevel-ink);font-size:13px}
.bevel-kanban__panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bevel-kanban__status{display:inline-flex;align-items:center;gap:5px;padding:4px 7px 4px 8px;font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-teal);background:var(--bevel-teal-soft);border:1px solid color-mix(in srgb,var(--bevel-teal) 30%,var(--bevel-teal-soft));white-space:nowrap}
.bevel-kanban__status svg{color:var(--bevel-teal)}
.bevel-kanban__panel h2{font:400 25px/1.12 var(--bevel-font-serif);letter-spacing:-.015em;color:var(--bevel-ink)}
.bevel-kanban__panel-lede{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--bevel-ink-2)}
.bevel-kanban__props{display:grid;grid-template-columns:82px 1fr;gap:0;margin:16px 0 0;border-top:1px solid var(--bevel-line)}
.bevel-kanban__props dt{padding:8px 0;font:500 10px/1.6 var(--bevel-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bevel-muted);border-bottom:1px solid var(--bevel-line)}
.bevel-kanban__props dd{display:flex;align-items:center;gap:8px;margin:0;padding:6px 0;min-height:32px;border-bottom:1px solid var(--bevel-line);color:var(--bevel-ink);font-size:13px}
.bevel-kanban__props dd.bevel-kanban__labels{gap:5px}
.bevel-kanban__props .bevel-kanban__due{font-size:12px;color:var(--bevel-brass)}
.bevel-kanban__props .bevel-kanban__mono{color:var(--bevel-ink-2)}
.bevel-kanban__panel-section{margin-top:18px}
.bevel-kanban__panel-section h4{display:flex;align-items:center;gap:8px;margin-bottom:9px;font:500 12.5px/1 var(--bevel-font-sans);color:var(--bevel-ink)}
.bevel-kanban__panel-section h4 .bevel-kanban__check-count{padding:3px 5px;background:var(--bevel-sunk);border:1px solid var(--bevel-line);color:var(--bevel-ink-2)}
.bevel-kanban__panel-section>.bevel-kanban__check-bar{height:6px;margin-bottom:10px}
.bevel-kanban__check-item{display:flex;padding:5px 0;font-size:13px}
.bevel-kanban__check-item:has(:checked) .bevel-checkbox__label{color:var(--bevel-muted);text-decoration:line-through;text-decoration-color:var(--bevel-faint)}
.bevel-kanban__dep-row{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--bevel-ox-soft);border-left:2px solid var(--bevel-ox);color:var(--bevel-ox)}
.bevel-kanban__dep-row>div{flex:1;min-width:0;color:var(--bevel-ink);line-height:1.35}
.bevel-kanban__dep-row b{font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-ox);margin-right:6px}
.bevel-kanban__dep-row small{display:block;margin-top:3px;font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
.bevel-kanban__dep-row .bevel-kanban__due{display:inline;font-size:11px}
.bevel-kanban__files{display:flex;flex-direction:column;gap:6px}
.bevel-kanban__file{display:flex;align-items:center;gap:10px;padding:6px 8px;text-decoration:none;color:var(--bevel-ink);background:var(--bevel-surface);border:1px solid var(--bevel-line)}
.bevel-kanban__file:hover{border-color:var(--bevel-line-2);background:var(--bevel-sunk)}
.bevel-kanban__file img{width:38px;height:28px;object-fit:cover;border:1px solid var(--bevel-line-2)}
.bevel-kanban__file>svg{width:38px;height:28px;padding:5px 0;color:var(--bevel-muted);background:var(--bevel-sunk);border:1px solid var(--bevel-line-2)}
.bevel-kanban__file span{display:flex;align-items:baseline;gap:8px;font:12.5px/1.2 var(--bevel-font-mono)}
.bevel-kanban__file small{font-size:11px;color:var(--bevel-muted)}
.bevel-kanban__comment{display:flex;gap:10px;padding:8px 0}
.bevel-kanban__comment>div{flex:1;min-width:0}
.bevel-kanban__comment b{display:flex;align-items:baseline;gap:8px;font-weight:500;font-size:13px}
.bevel-kanban__comment b small{font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
.bevel-kanban__comment p{margin-top:3px;font-size:13px;line-height:1.45;color:var(--bevel-ink-2)}
.bevel-kanban__event{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;padding:7px 0 7px 36px;font-size:12.5px;color:var(--bevel-ink-2)}
.bevel-kanban__event b{font-weight:500;color:var(--bevel-ink)}
.bevel-kanban__event small{width:100%;font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
.bevel-kanban__event-dot{position:absolute;left:10px;top:12px;width:6px;height:6px;background:var(--bevel-brass)}
.bevel-kanban__composer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 10px;color:var(--bevel-muted);font-size:13px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);box-shadow:inset 0 1px 0 var(--bevel-edge-in)}
.bevel-kanban__panel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:12px;border-top:1px solid var(--bevel-line)}
.bevel-kanban__panel-foot .bevel-kanban__mono{color:var(--bevel-muted)}

/* ------------------------------- foot ------------------------------ */
.bevel-kanban__foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:12px;border-top:1px solid var(--bevel-line);font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
.bevel-kanban__foot span{display:inline-flex;align-items:center;gap:6px}

/* ------------------------------ narrow ----------------------------- */
@media(max-width:960px){
  .bevel-kanban__board,.bevel-kanban__work.bevel-kanban--has-panel .bevel-kanban__board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px;overflow:visible;margin:0;padding:0}
  .bevel-kanban__scroll-hint,.bevel-kanban__scroll-rail{display:none}
  .bevel-kanban__work.bevel-kanban--has-panel{flex-direction:column;--bevel-kanban-lane:248px;--bevel-kanban-gap:18px}
  .bevel-kanban__board-wrap{width:100%}
  .bevel-kanban__panel{flex:none;width:auto;margin:20px 0 0;padding:20px 0 0;border-left:0;border-top:2px solid var(--bevel-ink)}
}
@media(max-width:600px){
  .bevel-kanban{padding:20px 18px 20px;--bevel-kanban-lane:100%}
  .bevel-kanban__mast{flex-direction:column;align-items:stretch;gap:16px}
  .bevel-kanban__mast h1{font-size:32px}
  .bevel-kanban__mast-side{flex-wrap:wrap;gap:8px}
  .bevel-kanban__team{flex-basis:100%;margin-right:0}
  .bevel-kanban__mast-side .bevel-button{flex:1;justify-content:center}
  .bevel-kanban__scroll-hint,.bevel-kanban__scroll-rail{display:none}
  .bevel-kanban__views{overflow-x:auto;scrollbar-width:none}
  .bevel-kanban__views a{padding:11px 9px 9px;white-space:nowrap}
  .bevel-kanban__views-note{display:none}
  .bevel-kanban__search{flex-basis:100%}
  .bevel-kanban__tools{gap:6px}
  .bevel-kanban__tape{flex-wrap:wrap;border-bottom:0}
  .bevel-kanban__tape>div{flex:1 1 40%;padding:10px 12px 10px 0;margin-right:12px;border-bottom:1px solid var(--bevel-line)}
  .bevel-kanban__tape>div:nth-child(2n){border-right:0;margin-right:0}
  .bevel-kanban__tape-meter{flex-basis:100%;border-right:0;margin-right:0}
  .bevel-kanban__board{display:flex;flex-direction:column;align-items:stretch;gap:26px}
  .bevel-kanban__work.bevel-kanban--has-panel .bevel-kanban__board{display:flex;flex-direction:column;align-items:stretch;overflow:visible;padding:0;margin:0}
  .bevel-kanban__work.bevel-kanban--has-panel .bevel-kanban__column{flex:none}
  .bevel-kanban__column-head{position:sticky;top:0;background:var(--bevel-ground);z-index:1}
  .bevel-kanban__foot{flex-direction:column;gap:6px}
}


[data-bevel-transient="kanban-inspector-body"]{display:contents}
.bevel-kanban__chip select{min-width:0;max-width:145px;border:0;background:transparent;color:inherit;font:inherit;padding:0}
.bevel-kanban__chip option{background:var(--bevel-surface);color:var(--bevel-ink)}
.bevel-kanban [data-bevel-check-row]{display:flex;align-items:center;gap:8px}
.bevel-kanban [data-bevel-check-row] .bevel-kanban__check-item{flex:1;min-width:0}
.bevel-kanban [data-bevel-kanban-check-remove]{flex:none;opacity:.55}
.bevel-kanban [data-bevel-kanban-check-remove]:is(:hover,:focus-visible){opacity:1}
.bevel-kanban [data-bevel-kanban-check-remove] svg{width:12px;height:12px}
.bevel-kanban span.bevel-kanban__chip-quiet{cursor:default}
.bevel-kanban [data-bevel-kanban-check-add]{margin-left:auto}
.bevel-kanban [data-bevel-kanban-check-form]{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.bevel-kanban [data-bevel-kanban-check-form] label{flex:1 0 100%;font-size:13px}
.bevel-kanban [data-bevel-kanban-check-form] input{width:100%;margin-top:5px}
.bevel-kanban [data-bevel-kanban-editor] label{display:grid;gap:6px;margin-bottom:12px}
.bevel-kanban [data-bevel-kanban-editor] :is(input,textarea,select){font:inherit;color:var(--bevel-ink);background:var(--bevel-surface);border:1px solid var(--bevel-line-2);padding:8px;min-width:0}
.bevel-kanban [data-bevel-kanban-filter="due-from"],.bevel-kanban [data-bevel-kanban-filter="due-to"]{display:block;margin:6px 0 12px;width:100%}
.bevel-kanban .bevel-kanban__composer{width:100%;text-align:left;cursor:pointer}

.bevel-kanban__card[data-bevel-dragging]{opacity:.58}
.bevel-kanban__card[data-bevel-drop-target="before"]{box-shadow:0 -3px 0 var(--bevel-brass)}
.bevel-kanban__card[data-bevel-drop-target="after"]{box-shadow:0 3px 0 var(--bevel-brass)}
.bevel-kanban__card[hidden],.bevel-kanban__card[data-bevel-archived],.bevel-kanban__checklist-data[hidden],.bevel-kanban__panel[hidden]{display:none}
.bevel-kanban [hidden]{display:none}
.bevel-kanban__panel-foot{display:grid;grid-template-columns:1fr auto}
.bevel-kanban__panel-actions{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bevel-kanban__panel-actions select{max-width:140px;min-height:28px;padding:3px 6px;background:var(--bevel-surface);color:var(--bevel-ink);border:1px solid var(--bevel-line-2);font:12px var(--bevel-font-sans)}
.bevel-kanban__editor .bevel-modal__body{display:grid;gap:12px}
.bevel-kanban__editor label{display:grid;gap:5px;font-size:12px;color:var(--bevel-muted)}
.bevel-kanban[data-bevel-zero-results] .bevel-kanban__board::after{content:"No tasks match these filters.";display:block;padding:24px;border:1px dashed var(--bevel-line-2);color:var(--bevel-muted)}

  /* ============================ CODE EDITOR ============================ */
  /* The chrome around a mounted editor: a file tab, a tool row, the editor
     surface, a status strip, and the bar that rides above a phone keyboard.
     The surface itself is drawn by the editor, so the frame only owns the
     border, the height and the scroll containment. */
  .bevel-code-editor { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); font-family: var(--bevel-font-sans); }
  .bevel-code-editor__tab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-block-end: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); }
  .bevel-code-editor__name { font: 500 12.5px/1.4 var(--bevel-font-mono); color: var(--bevel-ink); }
  .bevel-code-editor__dot { flex: 0 0 auto; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--bevel-brass); }
  .bevel-code-editor__host { font: 11px/1.4 var(--bevel-font-mono); color: var(--bevel-muted); }
  .bevel-code-editor__spacer { flex: 1 1 auto; min-inline-size: 0; }

  .bevel-code-editor__toolbar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-block-end: 1px solid var(--bevel-line-2); background: var(--bevel-ground); }
  .bevel-code-editor__tool { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; min-inline-size: 30px; block-size: 28px; padding: 0 8px; cursor: pointer; user-select: 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; font: 500 11px/1 var(--bevel-font-mono); letter-spacing: .06em; text-transform: uppercase; }
  .bevel-code-editor__tool:hover { background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%); }
  .bevel-code-editor__tool:active, .bevel-code-editor__tool[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); }
  .bevel-code-editor__tool:disabled { opacity: .45; cursor: not-allowed; }
  .bevel-code-editor__tool > span { display: inline-block; font-size: 14px; line-height: 1; }

  .bevel-code-editor__surface { position: relative; flex: 1 1 auto; min-block-size: 0; min-inline-size: 0; overflow: hidden; background: var(--bevel-surface); }

  .bevel-code-editor__status { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-block-start: 1px solid var(--bevel-line-2); background: var(--bevel-ground); color: var(--bevel-muted); font: 11px/1.5 var(--bevel-font-mono); }
  .bevel-code-editor__meta { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  /* The bar rides above the software keyboard. iOS keeps the layout viewport at
     full height while the keyboard is open, so the bar is lifted by the measured
     inset instead of trusting the bottom edge, and the frame gives that height
     back so the caret is never parked behind the keys. */
  .bevel-code-editor__bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50; display: none; align-items: center; gap: 6px; padding: 6px 8px; border-block-start: 1px solid var(--bevel-line-2); background: var(--bevel-surface); translate: 0 calc(-1 * var(--bevel-keyboard-inset, 0px)); }
  .bevel-code-editor__bar-tools { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }

  /* A still of what the editor draws, so the source palette is documented in
     both themes without loading an editor into the page. */
  .bevel-code-editor__sample { margin: 0; padding: 10px 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bevel-ink); font: 13.5px/1.65 var(--bevel-font-mono); }
  .bevel-code-editor__line { position: relative; display: block; padding-inline: 46px 12px; }
  .bevel-code-editor__line::before { content: attr(data-line) / ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 30px; padding-inline-end: 8px; border-inline-end: 1px solid var(--bevel-line); color: var(--bevel-faint); text-align: right; text-indent: 0; user-select: none; }
  .bevel-code-editor__tag { color: var(--bevel-syn-tag); font-weight: 500; }
  .bevel-code-editor__attr { color: var(--bevel-syn-plum); }
  .bevel-code-editor__string { color: var(--bevel-syn-string); }
  .bevel-code-editor__comment { color: var(--bevel-syn-comment); font-style: italic; }
  .bevel-code-editor__punct { color: var(--bevel-syn-punct); }
  .bevel-code-editor__number { color: var(--bevel-syn-rust); }
  .bevel-code-editor__invalid { color: var(--bevel-syn-invalid); text-decoration: underline wavy var(--bevel-syn-invalid); }

  /* The bar is fixed so an application can ride it above the keyboard. On the shared
     showcase that would pin it to the viewport for every other family's section too,
     so the example stage becomes its containing block. */
  .bevel-code-editor-example { contain: layout; }
  .bevel-code-editor-example .bevel-code-editor { block-size: 420px; }

  @media (max-width: 640px) {
    .bevel-code-editor__toolbar { display: none; }
    .bevel-code-editor__host { display: none; }
    .bevel-code-editor__bar { display: flex; }
    /* The host sets this attribute and --bevel-keyboard-inset; no Bevel code writes it on the
       classic side. React's useKeyboardInset does it automatically via data-bevel-react-keyboard,
       which the CSS projection generates from this line. */
    .bevel-code-editor[data-bevel-keyboard] { block-size: calc(100% - var(--bevel-keyboard-inset, 0px)); }
    .bevel-code-editor-example { padding-block-end: 64px; }
    .bevel-code-editor-example .bevel-code-editor { block-size: 340px; }
  }

}

/* 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; }
}