/* ---------------------------------------------------------------------------
   HATCH — components.

   Extracted 26 Aug 2026 from the three reference pages the theme shipped with:
   the component gallery, the sample screens and the bento grid. Their
   stylesheets are the same library three times over; this is the deduplicated
   union, 576 rules, nothing authored here.

   Buttons, chips, cards, bento tiles, tables, forms, selects, switches, ranges,
   steppers, tabs, accordion, alerts, toasts, modals, drawers, menus, side
   navigation, five progress variants, and the charts — bar, horizontal bar,
   sparkline, donut, heatmap, legend.

   FOUR THINGS WERE CHANGED, each to stop this file breaking what already ships.
   The site's own guards found three of them within a minute of the file
   landing, which is the argument for having them.

   1. Every token definition removed. The reference pages inline HATCH v1.3;
      `tokens.css` is v1.9, and a v1.3 block loading after it would quietly win.

   2. Ten class names are defined by both this library and the site — crumbs,
      eyebrow, hero, main, nav, num, page, progress, shell, stat. All ten carry
      an `h-` prefix here. Only those ten move; `.card`, `.btn`, `.chip`,
      `.bento` and the rest keep their names. The site's markup is on sixty live
      pages, so this file is the one that gives way.

   3. `height:100vh` → `100dvh`. The site bans plain vh: it jumps when a mobile
      URL bar shows and hides.

   4. The rename is applied with `url()` and quoted strings protected. The first
      attempt was not, and `.w3` matched inside `www.w3.org` — which would have
      broken the namespace on every inline SVG in the library, meaning no
      checkbox ticks and no select chevrons. `w3` was never a class in either
      system; it appeared in the collision list only because that URL is in
      both. It is not renamed.

   `test/guards.mjs` fails if an eleventh collision appears, from either side.

   Load it only on pages that use it — 62KB, and most pages do not.
--------------------------------------------------------------------------- */

/* Solid fallbacks — composited values for engines without backdrop-filter */
html{scroll-behavior:smooth; scroll-padding-top:24px}
body{
  margin:0; color:var(--ink); background-color:var(--canvas);
  background-image:
    radial-gradient(680px 420px at 8% 4%,  rgba(var(--mint-hue),.30), transparent 62%),
    radial-gradient(560px 420px at 92% 12%, rgba(var(--iris-hue),.28), transparent 60%),
    radial-gradient(620px 500px at 78% 52%, rgba(var(--sprout-hue),.18), transparent 62%),
    radial-gradient(520px 420px at 12% 74%, rgba(var(--rose-hue),.16), transparent 62%),
    radial-gradient(560px 460px at 60% 96%, rgba(var(--butter-hue),.20), transparent 62%);
  background-attachment:fixed;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85em;
  background:var(--glass-sunken); border:1px solid var(--line); padding:.12em .45em; border-radius:var(--r-xs)}
/* Focus: ink ring everywhere. The lime glow is reserved for the primary key. */
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-xs)}
/* Reusable glass primitive */
.glass{background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%); border:1px solid var(--glass-edge)}
/* ============================ DOC CHROME ============================ */
.h-shell{display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); gap:var(--s-10);
  max-width:1560px; margin:0 auto; padding:0 var(--gutter)}
.h-nav{position:sticky; top:0; align-self:start; height:100dvh; overflow-y:auto; padding:var(--s-8) 0 var(--s-12)}
.nav-brand{display:flex; align-items:center; gap:10px; margin-bottom:var(--s-6)}
.nav-mark{width:34px; height:34px; flex:none; border-radius:11px; background:var(--brand); color:var(--on-lime);
  display:grid; place-items:center; font-weight:800; font-size:15px}
.nav-name{font-weight:750; letter-spacing:-.03em; font-size:16px}
.nav-name small{display:block; font-weight:500; font-size:11px; color:var(--ink-4); letter-spacing:.06em; text-transform:uppercase}
.nav-group{margin-bottom:var(--s-5)}
.nav-group h5{margin:0 0 6px 10px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); font-weight:700}
.h-nav a{display:block; padding:6px 10px; border-radius:var(--r-sm); text-decoration:none;
  color:var(--ink-3); font-size:13.5px; transition:background var(--dur-2) var(--ease), color var(--dur-2)}
.h-nav a:hover{background:var(--glass); color:var(--ink)}
.h-main{padding:var(--s-8) 0 var(--s-32); min-width:0}
.h-hero{background:var(--glass); backdrop-filter:blur(var(--blur-lg)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(160%); border:1px solid var(--glass-edge);
  border-radius:var(--r-3xl); padding:var(--s-20) var(--s-16);
  box-shadow:var(--sh-lg); position:relative; overflow:hidden; margin-bottom:var(--s-16)}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  background:var(--mint-fill); border:1px solid var(--mint-line); padding:6px 14px; border-radius:var(--r-pill)}
.h-hero h1{font-size:clamp(34px,5.2vw,62px); font-weight:800; margin:var(--s-6) 0 var(--s-4); max-width:16ch}
.h-hero h1 em{font-style:normal; background:var(--brand); color:var(--on-lime);
  border-radius:var(--r-md); padding:0 .18em}
.h-hero p{max-width:60ch; color:var(--ink-2); font-size:17px}
.hero-keys{display:flex; gap:10px; margin-top:var(--s-8); flex-wrap:wrap}
.hkey{width:56px; height:56px; border-radius:var(--r-pill); display:grid; place-items:center;
  font-weight:700; font-size:13px; color:var(--ink); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.sec{margin-bottom:var(--s-32); scroll-margin-top:24px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6);
  padding-bottom:var(--s-5); border-bottom:1px solid var(--line); margin-bottom:var(--s-10); flex-wrap:wrap}
.sec-head h2{font-size:clamp(24px,3vw,34px); font-weight:780}
.sec-head p{color:var(--ink-2); max-width:58ch; margin-top:8px}
.sec-num{font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--ink-4); text-transform:uppercase}
.sub{margin:var(--s-12) 0 var(--s-6)}
.sub h3{font-size:19px; font-weight:720}
.sub p{color:var(--ink-2); margin-top:6px; max-width:66ch; font-size:14px}
.sub:first-child{margin-top:0}
.panel{background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  border-radius:var(--r-2xl); padding:var(--s-10); box-shadow:var(--sh-sm); border:1px solid var(--glass-edge)}
.panel + .panel{margin-top:var(--s-6)}
.row{display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center}
.row-top{align-items:flex-start}
.stack{display:flex; flex-direction:column; gap:var(--s-4)}
.spec{font-size:12px; color:var(--ink-3); letter-spacing:.02em}
/* grid/flex children must be allowed to shrink below their content */
.grid-2>*,.grid-3>*,.grid-4>*,.form-grid>*,.bento>*{min-width:0}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--s-6)}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s-5)}
.grid-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:var(--s-5)}
/* ============================ COLOR DOC BITS ============================ */
.swatch{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--glass-edge); background:var(--glass)}
.swatch-body{height:92px; display:flex; align-items:flex-end; padding:10px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.swatch-meta{padding:10px 12px 12px; border-top:1px solid var(--line)}
.swatch-meta b{display:block; font-size:13px; font-weight:680}
.swatch-meta span{font-size:11.5px; color:var(--ink-3); font-family:ui-monospace,Menlo,monospace; text-transform:uppercase}
.ramp{display:grid; grid-template-columns:repeat(10,1fr); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs)}
.ramp div{height:74px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px;
  font-size:10px; font-weight:700; letter-spacing:.03em}
.family{border-radius:var(--r-lg); border:1px solid var(--glass-edge); overflow:hidden; background:var(--glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur))}
.family-strip{display:grid; grid-template-columns:repeat(4,1fr); height:64px}
.family-strip i{display:block; height:100%; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.family-info{padding:12px 14px}
.family-info b{font-size:13.5px}
.family-info p{font-size:12px; color:var(--ink-2); margin-top:4px}
.family-info .hexes{font-size:10.5px; font-family:ui-monospace,Menlo,monospace; color:var(--ink-3); margin-top:8px; letter-spacing:.02em}
/* Layer demo — proves the glass actually transmits */
.layer-demo{position:relative; height:210px; border-radius:var(--r-xl); overflow:hidden;
  background:
    radial-gradient(300px 200px at 20% 30%, rgba(var(--mint-hue),.55), transparent 60%),
    radial-gradient(280px 200px at 78% 65%, rgba(var(--rose-hue),.45), transparent 60%),
    repeating-linear-gradient(45deg, rgba(var(--ink-hue),.06) 0 10px, transparent 10px 20px),
    var(--canvas)}
.layer-demo .pane{position:absolute; border-radius:var(--r-lg); padding:14px 18px;
  border:1px solid var(--glass-edge); box-shadow:var(--sh-md);
  backdrop-filter:blur(var(--blur)) saturate(170%); -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);
  font-size:12.5px; font-weight:650}
/* ============================ 01 · KEYCAP PRIMITIVE ============================ */
.btn{
  --key:var(--glass); --key-hover:var(--glass-strong); --key-ink:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 22px; border:1px solid var(--glass-edge); border-radius:var(--r-pill);
  background:var(--key); color:var(--key-ink);
  backdrop-filter:blur(var(--blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  font:inherit; font-size:14.5px; font-weight:650; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap; text-decoration:none; box-shadow:none;
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn:hover{background:var(--key-hover); border-color:var(--line-strong)}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn.is-disabled{background:var(--glass-sunken); color:var(--ink-4);
  border-color:transparent; cursor:not-allowed; transform:none}
/* THE rationed variant. Opt in only when this is the decision. */
.btn--primary{--key:var(--brand); --key-hover:var(--lime-600); --key-ink:var(--on-lime);
  border:0; padding:0 23px; backdrop-filter:none; -webkit-backdrop-filter:none}
.btn--primary.btn--sm{padding:0 17px}
.btn--primary.btn--lg{padding:0 31px}
.btn--primary.btn--icon{padding:0}
.btn--primary:hover{box-shadow:0 12px 28px -12px var(--brand-throw)}
.btn--primary:focus-visible{outline:none; box-shadow:var(--ring)}
.btn--secondary{--key:var(--glass); --key-hover:var(--glass-strong)}
.btn--soft{--key:var(--iris-fill); --key-hover:var(--iris-fill-2); --key-ink:var(--iris-deep); border-color:transparent}
.btn--danger{--key:var(--rose-fill); --key-hover:var(--rose-fill-2); --key-ink:var(--rose-deep); border-color:transparent}
.btn--ghost{--key:transparent; --key-hover:var(--glass-hover); color:var(--ink-2);
  border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}
.btn--ghost:hover{border-color:transparent}
.btn--link{background:none; height:auto; padding:0; color:var(--brand-text);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px;
  text-decoration-color:var(--line-strong); border-radius:var(--r-xs); border:0; backdrop-filter:none}
.btn--link:hover{transform:none; background:none; text-decoration-color:var(--brand-text)}
.btn--sm{height:36px; padding:0 16px; font-size:13px}
.btn--lg{height:54px; padding:0 30px; font-size:16px}
.btn--icon{width:44px; padding:0}
.btn--icon.btn--sm{width:34px}
.btn--block{display:flex; width:100%}
.btn-loading{width:15px; height:15px; border-radius:50%; border:2px solid rgba(var(--ink-hue),.22);
  border-top-color:var(--brand-edge); animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fab{position:relative; width:60px; height:60px; border-radius:50%; font-size:24px; padding:0}
/* ============================ 02 · CHIPS · BADGES · EYEBROWS ============================ */
.chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px;
  border-radius:var(--r-pill); background:var(--iris-fill); color:var(--ink);
  backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%);
  font-size:13px; font-weight:600; border:1px solid var(--iris-line);
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease)}
.chip--sprout{background:var(--sprout-fill); border-color:var(--sprout-line)}
.chip--butter{background:var(--butter-fill); border-color:var(--butter-line)}
.chip--mint{background:var(--mint-fill); border-color:var(--mint-line)}
.chip--sand{background:var(--sand-fill); border-color:var(--sand-line)}
.chip--rose{background:var(--rose-fill); border-color:var(--rose-line)}
.chip--outline{background:transparent; border-color:var(--line-strong); color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--brand); color:var(--on-lime); border-color:transparent}
.chip button{all:unset; cursor:pointer; display:grid; place-items:center; width:16px; height:16px;
  border-radius:50%; background:rgba(var(--ink-hue),.10); font-size:11px; line-height:1}
.chip button:hover{background:rgba(var(--ink-hue),.14)}
.chip-dot{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55}
.badge{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
  border-radius:var(--r-xs); font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; background:var(--glass-sunken); color:var(--ink-2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.badge--ok{background:var(--ok-bg); color:var(--ok)}
.badge--warn{background:var(--warn-bg); color:var(--warn)}
.badge--danger{background:var(--danger-bg); color:var(--danger)}
.badge--info{background:var(--info-bg); color:var(--info)}
.count{min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--rose-line);
  color:var(--rose-deep); font-size:11px; font-weight:700; display:inline-grid; place-items:center}
.h-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3)}
.h-eyebrow::before{content:""; width:22px; height:3px; border-radius:2px; background:var(--ink-4)}
.eyebrow--pill{padding:5px 13px; border-radius:var(--r-pill); background:var(--mint-fill);
  border:1px solid var(--mint-line); color:var(--mint-deep);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.eyebrow--pill::before{display:none}
/* ============================ 03 · FORM CONTROLS ============================ */
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field > label{font-size:13px; font-weight:650; color:var(--ink-2); display:flex; gap:6px; align-items:center}
.field .req{color:var(--rose-deep); font-weight:700}
.hint{font-size:12px; color:var(--ink-3)}
.err{font-size:12px; color:var(--danger); font-weight:600; display:flex; gap:6px; align-items:center}
.input,.select,.textarea{
  width:100%; height:50px; padding:0 18px; border-radius:var(--r-md);
  border:1.5px solid var(--line-strong); background:var(--glass-2); color:var(--ink);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font:inherit; font-size:14.5px; box-shadow:var(--sh-inset);
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2)}
.textarea{height:auto; min-height:112px; padding:13px 15px; resize:vertical; line-height:1.55}
.input::placeholder,.textarea::placeholder{color:var(--ink-4)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--iris-solid)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--brand);
  box-shadow:var(--ring)}
.input[disabled],.textarea[disabled],.select[disabled]{background:var(--glass-sunken); color:var(--ink-4); cursor:not-allowed; box-shadow:none}
.input.is-error,.textarea.is-error{border-color:var(--rose-deep); background:var(--rose-wash)}
.input.is-error:focus{box-shadow:0 0 0 4px var(--rose-fill)}
.input.is-valid{border-color:var(--sprout-deep)}
.select{appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A5566' stroke-width='3' stroke-linecap='round'><path d='M5 9l7 7 7-7'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center}
.input-group{display:flex; align-items:stretch; width:100%}
.input-group .input{border-radius:var(--r-md) 0 0 var(--r-md)}
.input-affix{display:grid; place-items:center; padding:0 15px; font-size:13.5px; font-weight:650;
  color:var(--ink-2); background:var(--glass-sunken); border:1.5px solid var(--line-strong);
  border-left:0; border-radius:0 var(--r-md) var(--r-md) 0}
.input-icon{position:relative; width:100%}
.input-icon .input{padding-left:44px}
.input-icon svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-4)}
.check{display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:14px}
.check input{appearance:none; margin:0; flex:none; width:22px; height:22px; border-radius:7px;
  border:1.5px solid var(--line-strong); background:var(--glass-2); cursor:pointer;
  box-shadow:var(--sh-inset); transition:all var(--dur-2) var(--ease)}
.check input[type=radio]{border-radius:50%}
.check input:hover{border-color:var(--iris-solid)}
.check input:checked{background:var(--brand); border-color:var(--brand-edge)}
.check input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F1B24' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-repeat:no-repeat; background-position:center}
.check input[type=radio]:checked{background:var(--glass-2); border:6.5px solid var(--brand-edge); box-shadow:none}
.check input[disabled]{background:var(--glass-sunken); border-color:var(--line); cursor:not-allowed}
.check span small{display:block; color:var(--ink-3); font-size:12.5px}
.switch{display:inline-flex; align-items:center; gap:11px; cursor:pointer; font-size:14px}
.switch input{appearance:none; margin:0; width:50px; height:29px; border-radius:var(--r-pill);
  background:rgba(var(--ink-hue),.16); position:relative; cursor:pointer; flex:none;
  box-shadow:var(--sh-inset); transition:background var(--dur-2) var(--ease)}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:23px; height:23px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(var(--ink-hue),.35);
  transition:transform var(--dur-2) var(--ease-key)}
.switch input:checked{background:var(--brand-edge)}
.switch input:checked::after{transform:translateX(21px)}
.switch input[disabled]{opacity:.5; cursor:not-allowed}
.range{appearance:none; width:100%; height:10px; border-radius:var(--r-pill); cursor:pointer;
  background:linear-gradient(to right, var(--brand) 0 var(--p,50%), var(--glass-sunken) var(--p,50%) 100%);
  box-shadow:var(--sh-inset)}
.range::-webkit-slider-thumb{appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--surface-solid); border:0; cursor:grab;
  box-shadow:0 0 0 3px var(--brand), 0 0 0 9px var(--brand-glow), 0 4px 10px -3px rgba(var(--ink-hue),.30)}
.range::-webkit-slider-thumb:active{cursor:grabbing; box-shadow:0 0 0 3px var(--brand), 0 0 0 12px var(--brand-glow)}
.range::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--surface-solid); border:0;
  box-shadow:0 0 0 3px var(--brand), 0 0 0 9px var(--brand-glow)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--brand), 0 0 0 9px var(--brand-glow), 0 0 0 10.5px var(--lime-900)}
.segmented{display:inline-flex; padding:4px; gap:3px; background:var(--glass-sunken);
  border-radius:var(--r-pill); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.segmented button{all:unset; cursor:pointer; padding:8px 18px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:620; color:var(--ink-3); transition:all var(--dur-2) var(--ease)}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-selected="true"]{background:var(--glass); color:var(--ink); box-shadow:var(--sh-sm)}
.stepper{display:inline-flex; align-items:center; gap:4px; padding:4px; background:var(--glass-sunken);
  border-radius:var(--r-pill); border:1px solid var(--line)}
.stepper button{all:unset; cursor:pointer; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--glass); box-shadow:var(--sh-xs); font-weight:700}
.stepper button:active{transform:translateY(1px)}
.stepper input{all:unset; width:44px; text-align:center; font-weight:680; font-size:14px}
.dropzone{border:2px dashed var(--line-strong); border-radius:var(--r-2xl); padding:var(--s-12);
  text-align:center; background:var(--glass-2); transition:all var(--dur-2) var(--ease); cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.dropzone:hover{border-color:var(--mint-deep); background:var(--mint-wash)}
.dropzone b{display:block; font-size:14.5px; margin-bottom:4px}
.dropzone span{font-size:12.5px; color:var(--ink-3)}
.file-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md);
  background:var(--glass-2); border:1px solid var(--line)}
.file-ico{width:34px; height:34px; border-radius:10px; background:var(--mint-fill); display:grid;
  place-items:center; font-size:11px; font-weight:750; color:var(--mint-deep); flex:none}
.form-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-5)}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-12{grid-column:span 12}
@media(max-width:640px){.col-6,.col-4{grid-column:span 12}}
.form-actions{display:flex; gap:var(--s-3); justify-content:flex-end; padding-top:var(--s-5);
  border-top:1px solid var(--line); margin-top:var(--s-6)}
/* ============================ 03b · THEMED SELECT ============================
   A native select element renders its popup in the OS, not the page — it
   themed. This is a button + listbox that can. Keep the native one for long
   or platform-critical lists; use this everywhere the popup is visible. */
.selectx{position:relative; width:100%}
.selectx-btn{width:100%; height:50px; padding:0 44px 0 18px; border-radius:var(--r-md);
  border:1.5px solid var(--line-strong); background:var(--glass-2); color:var(--ink);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font:inherit; font-size:14.5px; text-align:left; cursor:pointer; box-shadow:var(--sh-inset);
  display:flex; align-items:center; gap:8px;
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease)}
.selectx-btn:hover{border-color:var(--iris-solid)}
.selectx-btn:focus-visible{outline:none; border-color:var(--brand); box-shadow:var(--ring)}
.selectx-btn::after{content:""; position:absolute; right:18px; top:50%; width:9px; height:9px;
  border-right:2.2px solid var(--ink-3); border-bottom:2.2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); border-radius:1px;
  transition:transform var(--dur-2) var(--ease)}
.selectx[data-open="true"] .selectx-btn::after{transform:translateY(-25%) rotate(225deg)}
.selectx[data-open="true"] .selectx-btn{border-color:var(--brand); box-shadow:var(--ring)}
.selectx-list{position:absolute; z-index:40; top:calc(100% + 8px); left:0; right:0; margin:0; padding:6px;
  list-style:none; border-radius:var(--r-xl); background:var(--surface-modal); border:1px solid var(--glass-edge);
  box-shadow:var(--sh-lg); backdrop-filter:blur(var(--blur-lg)) saturate(170%);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(170%);
  max-height:264px; overflow-y:auto;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; visibility:hidden;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), visibility var(--dur-2)}
.selectx[data-open="true"] .selectx-list{opacity:1; transform:none; pointer-events:auto; visibility:visible}
.selectx-list li{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:var(--r-sm);
  font-size:14.5px; color:var(--ink-2); cursor:pointer; min-height:44px}
.selectx-list li:hover,.selectx-list li.is-active{background:var(--glass-hover); color:var(--ink)}
.selectx-list li[aria-selected="true"]{background:var(--brand); color:var(--on-lime); font-weight:640}
.selectx-list li::before{content:"✓"; width:14px; font-weight:800; opacity:0; flex:none; font-size:12px}
.selectx-list li[aria-selected="true"]::before{opacity:1}
@media(prefers-reduced-motion:reduce){.selectx-list{transition:none}}
/* ============================ 04 · CARDS & BENTO ============================ */
.card{background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r-2xl);
  padding:var(--s-8); box-shadow:var(--sh-md);
  backdrop-filter:blur(var(--blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  transition:transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease)}
.card--interactive{cursor:pointer}
.card--interactive:hover{transform:translateY(-6px); box-shadow:var(--sh-xl)}
.card--flat{box-shadow:none}
.card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4); margin-bottom:var(--s-3)}
.card h4{font-size:16.5px; font-weight:700}
.card p{color:var(--ink-2); font-size:14px; margin-top:6px}
.card-media{height:136px; margin:calc(var(--s-8) * -1) calc(var(--s-8) * -1) var(--s-6);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0}
.card-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4);
  margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--line)}
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); grid-auto-rows:minmax(160px,auto)}
.bento > *{border-radius:var(--r-2xl); padding:var(--s-8); border:1px solid var(--glass-edge);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-8); box-shadow:var(--sh-sm);
  backdrop-filter:blur(var(--blur)) saturate(170%); -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);
  transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out)}
.bento > *:hover{transform:translateY(-5px); box-shadow:var(--sh-lg)}
.b-2{grid-column:span 2}
.b-3{grid-column:span 3}
.b-4{grid-column:span 4}
.b-r2{grid-row:span 2}
@media(max-width:860px){.bento{grid-template-columns:repeat(2,1fr)} .b-3,.b-4{grid-column:span 2}}
@media(max-width:520px){.bento{grid-template-columns:1fr} .b-2,.b-3,.b-4{grid-column:span 1}}
.bento .k{font-size:clamp(26px,4vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1}
.bento .lbl{font-size:12px; font-weight:650; color:var(--ink-2)}
.tile-sprout{background:var(--sprout-wash)}
.tile-mint{background:var(--mint-wash)}
.tile-iris{background:var(--iris-wash)}
.tile-butter{background:var(--butter-wash)}
.tile-sand{background:var(--sand-wash)}
.tile-rose{background:var(--rose-wash)}
.tile-glass{background:var(--glass)}
.tile-iris-solid{background:var(--iris-line); border-color:transparent}
.tile-iris-solid .lbl{color:var(--iris-deep)}
.tile-critical{background:var(--brand); color:var(--on-lime); border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}
.h-stat{display:flex; flex-direction:column; gap:6px}
.trend{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700}
.trend--up{color:var(--sprout-deep)}
.trend--down{color:var(--rose-deep)}
.avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; background:var(--iris-fill); color:var(--iris-deep); flex:none;
  border:2px solid rgba(255,255,255,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.avatar--sm{width:28px; height:28px; font-size:11px}
.avatar--lg{width:56px; height:56px; font-size:18px}
.avatar-stack{display:flex}
.avatar-stack .avatar:not(:first-child){margin-left:-12px}
.avatar-stack .avatar--sm:not(:first-child){margin-left:-8px}
.avatar-stack .avatar--lg:not(:first-child){margin-left:-18px}
/* ============================ 05 · TABLE ============================ */
.table-wrap{background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r-2xl);
  overflow:hidden; box-shadow:var(--sh-sm);
  backdrop-filter:blur(var(--blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--blur)) saturate(160%)}
.table-top{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-5) var(--s-6); flex-wrap:wrap; min-width:0}
.table-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:640px}
thead th{text-align:left; padding:12px var(--s-6); background:var(--glass-sunken);
  font-size:11px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  border-block:1px solid var(--line); white-space:nowrap}
thead th.num, td.num{text-align:right; font-variant-numeric:tabular-nums}
tbody td{padding:14px var(--s-6); border-bottom:1px solid var(--line); color:var(--ink-2)}
tbody tr{transition:background var(--dur-2) var(--ease)}
tbody tr:hover{background:var(--glass-hover)}
tbody tr:last-child td{border-bottom:0}
tbody td b{color:var(--ink); font-weight:650}
.th-sort{cursor:pointer; user-select:none}
.th-sort::after{content:"↑"; margin-left:6px; opacity:.35}
.th-sort[aria-sort="descending"]::after{content:"↓"; opacity:1; color:var(--ink)}
.table-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4) var(--s-6); border-top:1px solid var(--line); background:var(--glass-sunken); flex-wrap:wrap}
.cell-user{display:flex; align-items:center; gap:11px}
/* ============================ 06 · NAV & DISCLOSURE ============================ */
.tabs{display:flex; gap:var(--s-6); border-bottom:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none}
.tabs button{all:unset; cursor:pointer; padding:12px 2px; font-size:14.5px; font-weight:640;
  color:var(--ink-4); border-bottom:3px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-2), border-color var(--dur-2)}
.tabs button:hover{color:var(--ink-2)}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--ink)}
.h-crumbs{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-3); flex-wrap:wrap}
.h-crumbs a{text-decoration:none; padding:3px 8px; border-radius:var(--r-xs)}
.h-crumbs a:hover{background:var(--glass-hover); color:var(--ink)}
.h-crumbs [aria-current]{color:var(--ink); font-weight:650}
.pager{display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:center}
.pager button{all:unset; cursor:pointer; min-width:36px; height:36px; padding:0 10px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:13.5px; font-weight:640; color:var(--ink-3)}
.pager button:hover{background:var(--glass-hover); color:var(--ink)}
.pager button[aria-current="page"]{background:var(--surface-solid); color:var(--ink); box-shadow:var(--sh-sm)}
.menu{width:238px; background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r-xl);
  padding:6px; box-shadow:var(--sh-lg);
  backdrop-filter:blur(var(--blur-lg)) saturate(170%); -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(170%)}
.menu-item{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-sm);
  font-size:14px; cursor:pointer; color:var(--ink-2)}
.menu-item:hover{background:var(--glass-hover); color:var(--ink)}
.menu-item kbd{margin-left:auto; font-size:11px; color:var(--ink-3); background:var(--glass-sunken);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:2px 6px; font-family:inherit}
.menu-item--danger{color:var(--danger)}
.menu-item--danger:hover{background:var(--rose-fill)}
.menu-sep{height:1px; background:var(--line); margin:6px 4px}
.menu-label{padding:8px 12px 5px; font-size:10.5px; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4)}
.accordion{border:1px solid var(--glass-edge); border-radius:var(--r-2xl); overflow:hidden; background:var(--glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur))}
.accordion details{border-bottom:1px solid var(--line); interpolate-size:allow-keywords}
.accordion details::details-content{block-size:0; overflow:hidden;
  transition:block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete}
.accordion details[open]::details-content{block-size:auto}
@media(prefers-reduced-motion:reduce){.accordion details::details-content{transition:none}}
.accordion details:last-child{border-bottom:0}
.accordion summary{list-style:none; cursor:pointer; padding:16px var(--s-5); font-weight:650; font-size:14.5px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+"; font-size:19px; color:var(--ink-4); font-weight:400; transition:transform var(--dur-2) var(--ease)}
.accordion details[open] summary::after{transform:rotate(45deg)}
.accordion details[open] summary{background:var(--glass-hover)}
.accordion .acc-body{padding:0 var(--s-5) 18px; color:var(--ink-2); font-size:14px; max-width:70ch}
.appbar{display:flex; align-items:center; gap:var(--s-5); padding:11px var(--s-5); min-width:0;
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r-pill); box-shadow:var(--sh-sm);
  backdrop-filter:blur(var(--blur-lg)) saturate(170%); -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(170%)}
.appbar-links{display:flex; gap:3px; margin-left:var(--s-3)}
.appbar-links a{padding:8px 14px; border-radius:var(--r-pill); text-decoration:none; font-size:13.5px;
  font-weight:620; color:var(--ink-3)}
.appbar-links a:hover{background:var(--glass-hover); color:var(--ink)}
.appbar-links a[aria-current]{background:var(--surface-solid); color:var(--ink); box-shadow:var(--sh-sm)}
.sidenav{width:236px; background:var(--glass); border:1px solid var(--glass-edge);
  border-radius:var(--r-xl); padding:var(--s-4); box-shadow:var(--sh-sm);
  backdrop-filter:blur(var(--blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--blur)) saturate(160%)}
.sidenav a{display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:var(--r-md);
  text-decoration:none; font-size:14px; font-weight:600; color:var(--ink-3)}
.sidenav a:hover{background:var(--glass-hover); color:var(--ink)}
.sidenav a[aria-current]{background:var(--glass-sunken); color:var(--ink); position:relative}
.sidenav a[aria-current]::before{content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:2px; background:var(--brand-edge)}
.nav-ico{width:18px; display:inline-grid; place-items:center; flex:none; opacity:.7}
.sidenav-label{padding:12px 13px 6px; font-size:10.5px; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4)}
/* ============================ 06b · DRAWER / BOTTOM SHEET ============================
   Documented since v1.0, built in v1.9. Side panel on tablet and up,
   bottom sheet below 640 — the same element, the same focus rules. */
.drawer-scrim{position:fixed; inset:0; z-index:60; background:var(--scrim);
  backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%);
  opacity:0; pointer-events:none; transition:opacity var(--dur-3) var(--ease)}
.drawer{position:fixed; z-index:61; top:0; right:0; height:100dvh; width:420px; max-width:100%;
  display:flex; flex-direction:column; gap:var(--s-4); padding:var(--s-8);
  background:var(--surface-modal); box-shadow:var(--sh-float);
  backdrop-filter:blur(var(--blur-lg)) saturate(170%); -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(170%);
  border-radius:var(--r-3xl) 0 0 var(--r-3xl); overflow-y:auto;
  transform:translateX(101%); transition:transform var(--dur-4) var(--ease-out); visibility:hidden}
.drawer--left{left:0; right:auto; border-radius:0 var(--r-3xl) var(--r-3xl) 0; transform:translateX(-101%)}
[data-drawer="open"] .drawer{transform:none; visibility:visible}
[data-drawer="open"] .drawer-scrim{opacity:1; pointer-events:auto}
.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-4)}
.drawer-head h4{font-size:18px; font-weight:740}
.drawer-grab{display:none}
.drawer nav{display:flex; flex-direction:column; gap:3px}
.drawer nav a{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-md);
  text-decoration:none; font-size:16px; font-weight:640; color:var(--ink-2); min-height:48px}
.drawer nav a:hover{background:var(--glass-hover); color:var(--ink)}
.drawer nav a[aria-current]{background:var(--brand); color:var(--on-lime)}
.drawer-foot{margin-top:auto; padding-top:var(--s-6); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--s-3)}
@media(max-width:640px){
  .drawer{top:auto; bottom:0; left:0; right:0; width:100%; height:auto; max-height:86dvh;
    border-radius:var(--r-3xl) var(--r-3xl) 0 0; transform:translateY(101%);
    padding:var(--s-5) var(--s-6) calc(var(--s-8) + env(safe-area-inset-bottom))}
  .drawer--left{transform:translateY(101%)}
  .drawer-grab{display:block; width:44px; height:5px; border-radius:3px; background:var(--line-strong);
    margin:0 auto var(--s-4); flex:none}
}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}}
/* ---- app bar collapses to a menu button ---- */
.appbar-menu{display:none}
@media(max-width:880px){
  .appbar{border-radius:var(--r-xl); padding:10px var(--s-4); flex-wrap:nowrap}
  .appbar-links{display:none}
  .appbar-menu{display:inline-flex}
  .appbar .hide-sm{display:none}
}
/* ============================ 07 · FEEDBACK ============================ */
.alert{display:flex; gap:16px; padding:20px 22px; border-radius:var(--r-xl); background:var(--info-bg);
  border:1px solid var(--info-line);
  backdrop-filter:blur(var(--blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--blur)) saturate(160%)}
.alert-ico{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:14px; font-weight:800; background:rgba(255,255,255,.65)}
.alert b{display:block; font-size:14px; margin-bottom:3px}
.alert p{font-size:13.5px; color:var(--ink-2); max-width:70ch}
.alert--ok{background:var(--ok-bg); border-color:var(--ok-line)}
.alert--warn{background:var(--warn-bg); border-color:var(--warn-line)}
.alert--danger{background:var(--danger-bg); border-color:var(--danger-line)}
.alert--critical{background:rgba(221,255,79,.30); border-color:rgba(146,181,0,.45)}
.toast{display:flex; align-items:center; gap:13px; padding:15px 20px; border-radius:var(--r-xl);
  background:var(--surface-solid); color:var(--ink); box-shadow:var(--sh-float); max-width:400px;
  border:1px solid var(--line)}
.toast b{font-size:14px; font-weight:650}
.toast p{font-size:13px; color:var(--ink-3)}
.toast .dot{width:9px; height:9px; border-radius:50%; background:var(--brand-edge); flex:none}
.toast button{all:unset; cursor:pointer; margin-left:auto; font-size:13px; font-weight:650; color:var(--brand-text);
  text-decoration:underline; text-underline-offset:3px}
.modal{width:100%; max-width:480px; background:var(--surface-modal); border-radius:var(--r-3xl);
  box-shadow:var(--sh-float); overflow:hidden; border:1px solid var(--glass-edge);
  backdrop-filter:blur(var(--blur-lg)) saturate(170%); -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(170%)}
.modal-head{padding:var(--s-6) var(--s-6) var(--s-4); display:flex; gap:var(--s-4); align-items:flex-start}
.modal-head h4{font-size:19px; font-weight:730}
.modal-head p{color:var(--ink-2); font-size:14px; margin-top:7px}
.modal-body{padding:0 var(--s-6) var(--s-5)}
.modal-foot{display:flex; gap:var(--s-3); justify-content:flex-end; padding:var(--s-5) var(--s-6);
  background:var(--glass-sunken); border-top:1px solid var(--line)}
.scrim{background:var(--scrim); border-radius:var(--r-xl); padding:var(--s-8); display:grid; place-items:center;
  backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%)}
.tooltip{display:inline-flex; padding:8px 13px; border-radius:var(--r-sm); background:var(--surface-solid);
  color:var(--ink); font-size:12.5px; font-weight:600; box-shadow:var(--sh-lg); position:relative;
  border:1px solid var(--line)}
.tooltip::after{content:""; position:absolute; bottom:-6px; left:50%; margin-left:-6px;
  border:6px solid transparent; border-top-color:var(--surface-solid); border-bottom:0;
  filter:drop-shadow(0 1px 0 var(--line))}
.h-progress{height:10px; border-radius:var(--r-pill); background:var(--glass-sunken); overflow:hidden; box-shadow:var(--sh-inset)}
.h-progress i{display:block; height:100%; border-radius:var(--r-pill); background:var(--iris-line)}
.progress--focus i{background:var(--brand)}
.progress--ok i{background:var(--sprout-line)}
.progress--warn i{background:var(--butter-line)}
.progress--thin{height:5px}
.progress--critical i{background:var(--brand-edge)}
.ring{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:750;
  background:conic-gradient(var(--iris-line) var(--p,68%), var(--glass-sunken) 0)}
.ring--focus{background:conic-gradient(var(--brand) var(--p,68%), var(--glass-sunken) 0)}
.ring span{width:48px; height:48px; border-radius:50%; background:var(--surface-solid); display:grid; place-items:center}
.skeleton{background:linear-gradient(90deg,rgba(var(--ink-hue),.05) 25%,rgba(var(--ink-hue),.10) 37%,rgba(var(--ink-hue),.05) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.empty{text-align:center; padding:var(--s-16) var(--s-8); border:2px dashed var(--line-strong);
  border-radius:var(--r-xl); background:var(--glass-2);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur))}
.empty-art{width:74px; height:74px; border-radius:24px; margin:0 auto var(--s-5); background:var(--butter-fill);
  display:grid; place-items:center; font-size:30px}
.empty h4{font-size:17px; font-weight:700}
.empty p{color:var(--ink-2); font-size:14px; margin:8px auto var(--s-6); max-width:44ch}
.steps{display:flex; gap:0; counter-reset:s}
.step{flex:1; display:flex; flex-direction:column; gap:9px; position:relative; padding-right:var(--s-4)}
.step-dot{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px;
  font-weight:750; background:var(--glass-sunken); color:var(--ink-4); z-index:1}
.step::before{content:""; position:absolute; top:15px; left:30px; right:0; height:2px; background:var(--line)}
.step:last-child::before{display:none}
.step.is-done .step-dot{background:var(--sprout-fill); color:var(--sprout-deep)}
.step.is-done::before{background:var(--sprout-line)}
.step.is-now .step-dot{background:var(--brand); color:var(--on-lime)}
.step b{font-size:13.5px; font-weight:650}
.step span{font-size:12px; color:var(--ink-3)}
/* ============================ 07b · HATCH TEXTURE ============================ */
.hatch{background-image:var(--hatch)}
.hatch-soft{background-image:var(--hatch-soft)}
.hatch-lime{background-image:var(--hatch-lime)}
.h-progress i.hatched{background:var(--brand); background-image:var(--hatch-lime)}
.h-progress.track-hatched{background-image:var(--hatch-soft)}
.barchart{display:flex; align-items:flex-end; gap:var(--s-5); height:190px}
.barchart figure{margin:0; flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; height:100%; justify-content:flex-end}
.barchart .bar{width:100%; max-width:72px; border-radius:var(--r-lg); background:var(--surface-3)}
.barchart .bar.solid{background:var(--brand)}
.barchart .bar.ruled{background-image:var(--hatch); background-color:transparent; box-shadow:inset 0 0 0 1.5px rgba(var(--ink-hue),.16)}
.barchart figcaption{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
/* ============================ 08 · DOC UTILITIES ============================ */
.dd{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5)}
@media(max-width:760px){.dd{grid-template-columns:1fr}}
.dd-card{border-radius:var(--r-lg); padding:var(--s-5); border:1px solid var(--glass-edge); background:var(--glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur))}
.dd-card h5{margin:0 0 4px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:750;
  display:flex; align-items:center; gap:8px}
.dd-card h5::before{content:""; width:16px; height:2px; border-radius:2px; background:var(--ink-4); flex:none}
.dd-dont h5{color:var(--ink-4)}
.dd-dont p{color:var(--ink-3)}
.dd-dont{background:var(--glass-sunken); border-color:transparent}
.dd-card p{font-size:13.5px; color:var(--ink-2); margin-top:6px}
.rule-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s-3)}
.rule-list li{position:relative; padding-left:22px; font-size:14px; color:var(--ink-2)}
.rule-list li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:3px; background:var(--ink-4)}
.spec-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:440px}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:calc(var(--s-2) * -1); padding-inline:var(--s-2)}
.spec-table th{text-align:left; padding:9px 12px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1px solid var(--line)}
.spec-table td{padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink-2)}
.spec-table td:first-child{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink); white-space:nowrap}
.spec-table tr:last-child td{border-bottom:0}
pre{background:var(--glass-sunken); color:var(--ink-2); padding:var(--s-6); border-radius:var(--r-lg); overflow-x:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.65; margin:0;
  border:1px solid var(--line)}
pre .c{color:var(--ink-4)}
pre .v{color:var(--lime-900); font-weight:650}
pre .p{color:var(--iris-deep); font-weight:650}
.demo{background:var(--glass-2); border:1px dashed var(--line-strong); border-radius:var(--r-lg); padding:var(--s-6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.demo + .demo{margin-top:var(--s-4)}
.demo-label{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:750;
  color:var(--ink-3); margin-bottom:var(--s-4)}
.space-bar{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.space-bar div{text-align:center}
.space-bar i{display:block; background:var(--iris-fill); border:1px solid var(--iris-line); border-radius:4px 4px 0 0}
.space-bar b{display:block; font-size:10.5px; margin-top:8px; font-family:ui-monospace,Menlo,monospace; color:var(--ink-3)}
.radius-demo{display:flex; gap:var(--s-4); flex-wrap:wrap}
.radius-demo div{width:112px; height:112px; background:var(--iris-fill); border:1.5px solid var(--iris-line);
  display:grid; place-items:end center; padding-bottom:10px; font-size:10.5px; font-weight:700; color:var(--iris-deep)}
.elev-demo{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:var(--s-8); padding:var(--s-4) 0 var(--s-10)}
.elev-demo div{height:120px; background:var(--surface-solid); border-radius:var(--r-xl); display:grid; place-items:center;
  font-size:11.5px; font-weight:700; color:var(--ink-3); font-family:ui-monospace,Menlo,monospace}
.grid-demo{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-3); height:78px}
.grid-demo i{background:var(--mint-fill); border:1px solid var(--mint-line); border-radius:var(--r-xs)}
.alpha-scale{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--s-4)}
.alpha-scale div{height:80px; border-radius:var(--r-md); border:1px solid var(--glass-edge);
  display:flex; align-items:flex-end; padding:10px; font-size:11px; font-weight:700; color:var(--ink-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
@media(max-width:1080px){
  .h-shell{grid-template-columns:1fr}
  .h-nav{position:static; height:auto; padding:var(--s-6) 0 0; border-bottom:1px solid var(--line)}
  .nav-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s-4)}
}
@media(max-width:1080px){ .sec{margin-bottom:var(--s-24)} }
@media(max-width:640px){
  .card-media{margin:calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5)}
  .h-hero{padding:var(--s-12) var(--s-6); border-radius:var(--r-2xl)}
  .panel{padding:var(--s-6); border-radius:var(--r-xl)}
  .sec{margin-bottom:var(--s-16)}
  .bento{gap:var(--s-4)} .bento > *{padding:var(--s-6); gap:var(--s-5)}
  .card{padding:var(--s-6)}
  .steps{flex-direction:column; gap:var(--s-4)} .step::before{display:none}
}
@media(prefers-reduced-motion:reduce){
}
@media(prefers-contrast:more){
  body{background-image:none}
}
/* Lime surfaces pin their own text — --ink flips with the theme, lime does not */
.tile-critical{color:var(--on-lime)}
.tile-critical .lbl,.tile-critical .spec,.tile-critical .h-eyebrow{color:var(--on-lime-2)}
.tile-critical .badge{color:var(--on-lime)}
/* ============================================================
   NIGHT THEME
   The light system's rule is "nothing is darker than its own text."
   Inverted, the rule is "nothing is LIGHTER than its own text" —
   no white cards, no white pills. Surfaces are white at low alpha
   over a plum-black canvas, and emphasis still climbs toward lime.
   ============================================================ */
/* "current" is a raised surface, not a raised surface */
[data-theme="night"] .appbar-links a[aria-current],
[data-theme="night"] .pager button[aria-current="page"],
[data-theme="night"] .segmented button[aria-selected="true"]{background:var(--surface-solid); color:var(--ink)}
[data-theme="night"] .t--white,[data-theme="night"] .tile-white,
[data-theme="night"] .card,[data-theme="night"] .toast{background:var(--glass-strong)}
[data-theme="night"] .skeleton{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 37%,rgba(255,255,255,.05) 63%); background-size:400% 100%}
[data-theme="night"] .tooltip{background:var(--surface-solid)}
[data-theme="night"] .tooltip::after{border-top-color:var(--surface-solid)}
[data-theme="night"] .callout{background:var(--surface-solid)}
[data-theme="night"] .input.is-error,[data-theme="night"] .textarea.is-error{background:rgba(232,122,155,.10)}
html{color-scheme:light}
/* ===================== GALLERY ===================== */
/* removed: `body{padding:0}` — reference-page furniture, not a component. */
.wrap{max-width:1200px; margin:0 auto; padding:0 var(--s-6) var(--s-32)}
.topbar{position:sticky; top:0; z-index:20; padding:var(--s-4) 0; margin-bottom:var(--s-10);
  background:color-mix(in srgb, var(--canvas) 74%, transparent); backdrop-filter:blur(var(--blur-lg)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(160%); border-bottom:1px solid var(--line)}
.topbar-in{max-width:1200px; margin:0 auto; padding:0 var(--s-6); display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap}
.topbar a{padding:7px 14px; border-radius:var(--r-pill); text-decoration:none; font-size:13px;
  font-weight:640; color:var(--ink-3)}
.topbar a:hover{background:var(--glass-strong); color:var(--ink); box-shadow:var(--sh-xs)}
.masthead{padding:var(--s-16) 0 var(--s-10)}
.masthead h1{font-size:clamp(32px,5vw,54px); font-weight:800; letter-spacing:-.03em; max-width:18ch}
.masthead h1 em{font-style:normal; background:var(--brand); border-radius:var(--r-md); padding:0 .16em}
.masthead p{color:var(--ink-2); font-size:16px; margin-top:var(--s-5); max-width:62ch}
.gsec{margin-bottom:var(--s-32); scroll-margin-top:80px}
.gsec > h2{font-size:28px; font-weight:780; letter-spacing:-.02em; padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line); margin-bottom:var(--s-8)}
.gsec > h2 span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4);
  font-weight:700; display:block; margin-bottom:10px}
.gcard{background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%); border:1px solid var(--glass-edge);
  border-radius:var(--r-2xl); padding:var(--s-8); box-shadow:var(--sh-sm); margin-bottom:var(--s-6)}
.gcard > h3{font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:750;
  color:var(--ink-4); margin-bottom:var(--s-6)}
.gg{display:grid; gap:var(--s-6)}
.gg>*{min-width:0}
.chart-top{flex-wrap:wrap}
.gg-2{grid-template-columns:repeat(2,1fr)}
.gg-3{grid-template-columns:repeat(3,1fr)}
.gg-4{grid-template-columns:repeat(4,1fr)}
.gg-21{grid-template-columns:2fr 1fr}
@media(max-width:960px){.gg-2,.gg-3,.gg-4,.gg-21{grid-template-columns:1fr}}
.cap{font-size:11.5px; color:var(--ink-4); font-family:ui-monospace,Menlo,monospace; margin-top:10px; display:block}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart h4{font-size:16px; font-weight:720}
.chart .sub{font-size:12.5px; color:var(--ink-3); margin-top:5px}
.chart-top{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4); margin-bottom:var(--s-6)}
.legend{display:flex; gap:var(--s-5); flex-wrap:wrap; margin-top:var(--s-5)}
.legend span{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--ink-2)}
.legend i{width:13px; height:13px; border-radius:5px; flex:none}
.xax{display:flex; justify-content:space-between; margin-top:8px}
.xax span{font-size:10px; font-weight:650; color:var(--ink-4); letter-spacing:.04em}
@media(max-width:520px){
  /* 14 month labels will not fit a phone — drop every other tick */
  .xax span:nth-child(even){display:none}
}
.xax{overflow:hidden}
.hbars{display:flex; flex-direction:column; gap:var(--s-4)}
.hrow{display:grid; grid-template-columns:104px 1fr 62px; gap:var(--s-4); align-items:center}
.hrow .n{font-size:13px; font-weight:630; color:var(--ink-2)}
.hrow .v{font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.htrack{height:20px; border-radius:var(--r-pill); background:var(--glass-sunken); overflow:hidden; display:flex}
.htrack i{display:block; height:100%}
.cbx{appearance:none;margin:0;width:20px;height:20px;border-radius:7px;border:1.5px solid var(--line-strong);
  background:var(--glass-2);vertical-align:middle;cursor:pointer}
.cbx--on{background:var(--brand);border-color:var(--brand-edge);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F1B24' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  background-repeat:no-repeat;background-position:center}
.heat{display:grid; grid-template-columns:repeat(18,1fr); gap:5px}
.heat i{aspect-ratio:1; border-radius:5px; display:block}
.swatchbar{display:flex; gap:var(--s-3); flex-wrap:wrap}
.swatchbar div{flex:1; min-width:88px; height:70px; border-radius:var(--r-lg); display:flex; align-items:flex-end;
  padding:9px; font-size:10.5px; font-weight:700}
.gstat{display:flex; flex-direction:column; gap:5px}
.gstat b{font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1}
.gstat span{font-size:12.5px; font-weight:640; color:var(--ink-2)}
/* ===================== SHOWCASE LAYOUT ===================== */
/* removed: `body{padding:0}` — reference-page furniture, not a component. */
.app{max-width:1180px; margin:0 auto; padding:var(--s-8) var(--s-6) var(--s-32)}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6);
  margin:var(--s-12) 0 var(--s-8); flex-wrap:wrap}
.page-head h1{font-size:34px; font-weight:790; letter-spacing:-.03em; margin:10px 0 0}
.page-head p{color:var(--ink-2); font-size:14.5px; margin-top:8px}
.rowgrid{display:grid; gap:var(--s-6); margin-bottom:var(--s-6); align-items:start}
.rowgrid>*{min-width:0}
.chart-head{flex-wrap:wrap}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-21{grid-template-columns:2fr 1fr}
.g-11{grid-template-columns:1fr 1fr}
@media(max-width:980px){.g-4{grid-template-columns:repeat(2,1fr)} .g-21,.g-11,.g-3{grid-template-columns:1fr}}
@media(max-width:560px){.g-4{grid-template-columns:1fr}}
.showcase-note{font-size:11px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); margin:var(--s-16) 0 var(--s-5); display:flex; align-items:center; gap:12px}
.showcase-note::after{content:""; flex:1; height:1px; background:var(--line)}
.metric .k{font-size:36px; font-weight:800; letter-spacing:-.03em; line-height:1; margin-top:6px}
.metric .lbl{font-size:12.5px; font-weight:650; color:var(--ink-2)}
.chart-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-5); margin-bottom:var(--s-6)}
.chart-head h3{font-size:17px; font-weight:730}
.chart-head p{font-size:13px; color:var(--ink-3); margin-top:5px}
.legend{display:flex; gap:var(--s-5); flex-wrap:wrap; margin-top:var(--s-6)}
.legend span{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); font-weight:600}
.legend i{width:14px; height:14px; border-radius:5px; flex:none}
.card > svg{display:block; width:100%; height:auto; overflow:visible}
.cbx{appearance:none;margin:0;width:19px;height:19px;border-radius:7px;
  border:1.5px solid var(--line-strong);background:var(--glass-2);vertical-align:middle;cursor:pointer}
.g-3{align-items:stretch}
.g-3 > .card{display:flex; flex-direction:column}
.g-3 > .card .card-foot{margin-top:auto}
.g-3 > .card .feature-list{margin-bottom:var(--s-6)}
.xaxis{display:flex; justify-content:space-between; margin-top:10px}
.xaxis span{font-size:10.5px; font-weight:650; color:var(--ink-4); letter-spacing:.04em}
@media(max-width:520px){
  /* 14 month labels will not fit a phone — drop every other tick */
  .xaxis span:nth-child(even){display:none}
}
.xaxis{overflow:hidden}
.hbar{display:flex; flex-direction:column; gap:var(--s-5)}
.hbar-row{display:grid; grid-template-columns:118px 1fr 64px; align-items:center; gap:var(--s-4)}
.hbar-row .nm{font-size:13px; font-weight:640; color:var(--ink-2)}
.hbar-row .vl{font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
.hbar-track{height:22px; border-radius:var(--r-pill); background:var(--glass-sunken); overflow:hidden}
.hbar-track i{display:block; height:100%; border-radius:var(--r-pill)}
.spark{width:80px; height:26px}
.price-row{display:flex; align-items:baseline; gap:8px; margin:var(--s-5) 0}
.price-row b{font-size:38px; font-weight:800; letter-spacing:-.03em}
.price-row span{font-size:13px; color:var(--ink-3)}
.feature-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.feature-list li{position:relative; padding-left:26px; font-size:13.5px; color:var(--ink-2)}
.feature-list li::before{content:"✓"; position:absolute; left:0; top:-1px; font-weight:800; color:var(--sprout-deep)}
/* ===================== BENTO PAGE ===================== */
/* removed: `body{padding:0}` — reference-page furniture, not a component. */
.h-page{max-width:1280px; margin:0 auto; padding:var(--s-16) var(--s-8) var(--s-32)}
.phead{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6);
  margin-bottom:var(--s-10); flex-wrap:wrap}
.phead h1{font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.03em; margin-top:12px}
.phead p{color:var(--ink-2); font-size:15px; margin-top:9px}
.bento12>*{min-width:0}
.bento12{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-6);
  grid-template-rows:auto auto auto}
.t{border-radius:var(--r-2xl); padding:var(--s-8); border:1px solid var(--glass-edge);
  box-shadow:var(--sh-sm); display:flex; flex-direction:column; position:relative; overflow:hidden;
  backdrop-filter:blur(var(--blur)) saturate(170%); -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);
  transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out)}
.t:hover{transform:translateY(-5px); box-shadow:var(--sh-lg)}
.t--white{background:var(--surface-solid); backdrop-filter:none; -webkit-backdrop-filter:none}
.t--mint{background:var(--mint-fill)}
.t--iris{background:var(--iris-fill)}
.t--sand{background:var(--sand-fill)}
.t--sprout{background:var(--sprout-fill)}
.t--lime{background:var(--brand); color:var(--on-lime); border-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}
.t--lime .t-k{color:var(--on-lime)}
.t--lime .t-lbl{color:var(--on-lime-2)}
.t--lime .badge{color:var(--on-lime)}
/* explicit placement — auto-flow would scramble a mixed-span bento */
.a{grid-column:1/5;  grid-row:1/4}
.b{grid-column:5/8;  grid-row:1/2}
.c{grid-column:5/8;  grid-row:2/3}
.d{grid-column:5/8;  grid-row:3/4}
.e{grid-column:8/13; grid-row:1/3}
.f{grid-column:8/13; grid-row:3/4}
.t--narrow{padding:var(--s-6)}
.t--narrow .t-k{font-size:clamp(26px,2.5vw,34px); white-space:nowrap}
.f{min-height:250px}
.f .dotleg{padding-top:var(--s-4)}
@media(max-width:1120px){
  .a{grid-column:1/7; grid-row:1/3} .b{grid-column:7/13; grid-row:1/2}
  .c{grid-column:7/13; grid-row:2/3} .d{grid-column:1/7; grid-row:3/4}
  .e{grid-column:7/13; grid-row:3/4} .f{grid-column:1/13; grid-row:4/5}
}
@media(max-width:720px){
  .bento12{grid-template-columns:1fr; grid-template-rows:none}
  .a,.b,.c,.d,.e,.f{grid-column:1/2; grid-row:auto}
  .t{padding:var(--s-6); border-radius:var(--r-xl)}
}
.t-top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-6)}
.t-title{font-size:15.5px; font-weight:720; letter-spacing:-.01em}
.t-sub{font-size:12.5px; color:var(--ink-3); margin-top:5px}
.t-k{font-size:clamp(30px,3.4vw,44px); font-weight:800; letter-spacing:-.035em; line-height:1}
.t-k small{font-size:.42em; font-weight:650; letter-spacing:0; color:var(--ink-3)}
.t-lbl{font-size:12.5px; font-weight:640; color:var(--ink-2); margin-top:9px}
.t-foot{margin-top:auto; padding-top:var(--s-6)}
.t svg{display:block; width:100%; height:auto; overflow:visible}
.t-grow{margin-top:auto}
.iconpill{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--surface-solid); box-shadow:var(--sh-sm); font-size:19px}
.legend-list{list-style:none; margin:var(--s-8) 0 0; padding:0; display:flex; flex-direction:column; gap:0}
.legend-list li{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px}
.legend-list li:last-child{border-bottom:0}
.legend-list i{width:11px; height:11px; border-radius:50%; flex:none}
.legend-list b{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums}
.legend-list span{font-weight:620; color:var(--ink-2)}
.donutwrap{position:relative; display:grid; place-items:center}
.donutwrap .mid{position:absolute; text-align:center}
.donutwrap .mid b{display:block; font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1}
.donutwrap .mid span{font-size:12px; font-weight:650; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}
.barlabel{font-size:11px; font-weight:750; letter-spacing:.02em}
.seeall{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-decoration:none}
.seeall::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--brand-edge)}
.callout{background:var(--surface-solid); border-radius:var(--r-sm); padding:6px 10px; box-shadow:var(--sh-md);
  font-size:11px; font-weight:700; text-align:center; line-height:1.35}
.callout span{display:block; font-size:9.5px; font-weight:650; color:var(--ink-4); letter-spacing:.08em}
.dotleg{display:flex; flex-direction:column; gap:7px}
.dotleg span{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:640; color:var(--ink-2)}
.dotleg i{width:9px; height:9px; border-radius:50%; flex:none}