@livx.cc/bare-v3 0.1.0-alpha.17 → 0.1.0-alpha.5

package/README.md

@@ -15,7 +15,7 @@ bun lab replay <run-id> # verifies saved app hashes, then serves its isolated pr
 
 The comparison UI needs the fixture server for example links. Model outputs replay on separate local origins. Replay refuses missing or mismatched artifact hashes. `bun lab verify-evidence evidence.json protocol.json` checks recorded measurements against the protocol viewport and verifies the referenced PNG file, size, and hash. For matched captures, declare `viewport.expectedPresentation` with `theme`, `rootFontSize` and `direction`; the browser probe records these values and missing or mismatched values fail validation. The theme measurement uses the explicit bare-v3 root attribute; other strategy adapters must map their own theme mechanism rather than guess. It does not judge visual quality or declare release qualification. Run artifacts and judgments live under ignored `artifacts/`; retain that directory when sharing evidence. Browser/model tooling is development-only and excluded from the packed consumer.
 
-Install the published alpha with `bun add @livx.cc/bare-v3@alpha`; use `bun pm pack` for an unpublished local build. Import CSS from `@livx.cc/bare-v3/css` or `/css/min`. Put `class="b3-root"` on html and set `data-b3-theme="dark"` explicitly for dark mode. Component references are exported under `/references/*.md`; start with `/references/start.md`. Place generic link defaults in `@layer bare.reset` so they do not override button/navigation colors. Unlayered consumer CSS overrides library layers: scope custom palette colors to each theme rather than applying light-only colors unconditionally to `:root`.
+Install the local tarball with `bun pm pack`. Import CSS from `@livx.cc/bare-v3/css` or `/css/min`. Put `class="b3-root"` on html and set `data-b3-theme="dark"` explicitly for dark mode. Component references are exported under `/references/*.md`; start with `/references/start.md`. Place generic link defaults in `@layer bare.reset` so they do not override button/navigation colors. Unlayered consumer CSS overrides library layers: scope custom palette colors to each theme rather than applying light-only colors unconditionally to `:root`.
 
 `bun lab plan config.json` creates a seeded, capped development job plan. `bun lab prepare run.json` prepares one isolated workspace and manifest without invoking a model. The [visual playground](http://127.0.0.1:4313/fixtures/playground.html) demonstrates the current component contracts and shows the bare-v2 coverage audit. Composed apps include Signal (system performance), Elsewhere (local discovery/booking), Daylight (iOS/Android web studies), Relay, Gather setup and sign-in, Counter, Margin, Still, Fieldnotes, Interval, and the Forma project workspace. New components are an implemented subset, not full bare-v2 parity or a qualified release. Optional interactions are exported from `@livx.cc/bare-v3/ui`; call `mount(document)` once and use its returned cleanup on teardown.
 
@@ -25,11 +25,11 @@ Source organization: `src/bare.css` is the ordered CSS entry; `src/styles/` grou
 
 External TypeScript entrypoints use `<script type="module" src="app.ts">`. Assembly bundles local imports into a separate rendered artifact, preserves the original source, and rejects imports outside the workspace. Replay serves the rendered artifact. Inline TypeScript and package imports are not supported.
 
-Standalone matched comparisons remain pending. The worker uses the pinned AgentX SDK with explicit settings, Composer 2.5 and brokered OS isolation. A live creation and feature-edit pilot passed phone/desktop browser checks; this does not establish comparative design quality or total model cost. See [compact authoring](docs/llm-authoring.md) for protocol, evidence and the lab-only Pug candidate. Browser verification also runs through Composer/AgentX.
+Standalone matched app generation remains pending: the worker now invokes the pinned agentx CLI; verify configuration isolation and its complete bounded execution path live before qualification. Composer use is authorized through agentx, with app generation sequenced after the requested visual review. Browser verification already uses Composer through agentx. No live app-generation batch has run.
 
 The 24 briefs are provisional. Authored fixtures are implementation probes, not blind model evidence. Browser checks cover selected journeys across the authored apps, including themes, persistence, forms, command keyboard behavior, outlines, and narrow viewport emulation. The current evidence and remaining gaps are tracked in the implementation plan. A dedicated mobile-app track now requires matched iOS/Android routines flows, discovery/booking and mobile conversation, with separate native-look and actual-device gates. Actual iOS/Android, full accessibility, populated comparisons in the browser, and held-out qualification remain pending.
 
-See the [working task board](tasks.md), [implementation plan](docs/plan.md) and [experiment ledger](lab/experiments/ledger.json). The source repository is private; npm releases are public. The [production Offscript experiment](https://blank.bodify.bod.ee/a/a-offscript-v3) uses a pinned release. See tasks.md for integration and qualification status; source may advance beyond the published prerelease.
+See the [working task board](tasks.md), [implementation plan](docs/plan.md) and [experiment ledger](lab/experiments/ledger.json). The source repository is private. An alpha package release and production Blank experiment are in preparation; see tasks.md for actual shipping status.
 
 Playground work: edit one specimen in `fixtures/playground/specimens/`, its focused controller in `controllers/`, or a demo’s own folder. `app.js` only assembles controllers. Code/model guidance opens beside the relevant specimen. The expanded reference-page experiment is archived in `archive/reference-2026-09-08/` and excluded from normal builds.
 

package/dist/bare.css

@@ -26,15 +26,8 @@
   }
 
   :where(.b3-root) :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px;
-  }
-
-  @media (forced-colors: active) {
-    :where(.b3-root) :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
-      outline-offset: -2px;
-      outline: 1px solid highlight;
-    }
+    outline: 3px solid var(--b3-color-focus);
+    outline-offset: 3px;
   }
 
   :where(.b3-root) :where(img, svg) {
@@ -161,10 +154,6 @@
     display: flex;
   }
 
-  .b3-cluster > *, .b3-split > * {
-    min-inline-size: 0;
-  }
-
   .b3-inline {
     vertical-align: middle;
     align-items: center;
@@ -306,15 +295,6 @@
     display: inline-flex;
   }
 
-  .b3-button :where(svg) {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  .b3-button > :where([aria-hidden="true"]):has( > svg) {
-    flex-shrink: 0;
-  }
-
   .b3-button[data-b3-emphasis="quiet"] {
     color: var(--b3-color-text);
     border-color: var(--b3-color-border);
@@ -472,8 +452,8 @@
   }
 
   .b3-input-group:focus-within {
-    outline: none;
-    box-shadow: inset 0 0 0 2px;
+    outline: 3px solid var(--b3-color-focus);
+    outline-offset: 3px;
   }
 
   .b3-input-affix {
@@ -570,15 +550,6 @@
     margin-block: var(--b3-space);
   }
 
-  .b3-alert, .b3-toast {
-    overflow-wrap: anywhere;
-    min-inline-size: 0;
-  }
-
-  .b3-alert > *, .b3-toast > * {
-    min-inline-size: 0;
-  }
-
   .b3-alert {
     --b3-status-color: var(--b3-color-info);
     border: 1px solid var(--b3-status-color);
@@ -745,16 +716,13 @@
   }
 
   .b3-definition {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    grid-template-columns: minmax(7rem, 1fr) minmax(0, 2fr);
     gap: .75rem 1.5rem;
     margin: 0;
     display: grid;
-    container: b3-definition / inline-size;
   }
 
   .b3-definition dt {
-    overflow-wrap: anywhere;
-    min-inline-size: 0;
     color: var(--b3-color-muted);
   }
 
@@ -763,16 +731,6 @@
     margin: 0;
   }
 
-  @container b3-definition (width <= 26rem) {
-    .b3-definition > :is(dt, dd) {
-      grid-column: 1 / -1;
-    }
-
-    .b3-definition > dt:not(:first-child) {
-      margin-block-start: .75rem;
-    }
-  }
-
   .b3-stat {
     gap: .5rem;
     display: grid;
@@ -1352,23 +1310,6 @@
     display: grid;
   }
 
-  .b3-form-grid[data-b3-layout="inline"] {
-    flex-wrap: wrap;
-    align-items: end;
-    display: flex;
-  }
-
-  .b3-form-grid[data-b3-layout="inline"] > .b3-field {
-    flex: 12rem;
-    min-inline-size: 0;
-  }
-
-  .b3-form-grid[data-b3-layout="inline"] > .b3-button {
-    overflow-wrap: anywhere;
-    flex: 0 auto;
-    max-inline-size: 100%;
-  }
-
   .b3-fieldset {
     border: 0;
     min-inline-size: 0;
@@ -1486,8 +1427,8 @@
   }
 
   .b3-choice-card:has(input:focus-visible) {
-    outline: none;
-    box-shadow: inset 0 0 0 2px;
+    outline: 3px solid var(--b3-color-focus);
+    outline-offset: 3px;
   }
 
   .b3-choice-card:has(input:disabled) {
@@ -1619,7 +1560,7 @@
     display: flex;
   }
 
-  .b3-app-bar > :last-child:not(:first-child) {
+  .b3-app-bar > :last-child {
     margin-inline-start: auto;
   }
 
@@ -1711,10 +1652,6 @@
     background: #0007;
   }
 
-  .b3-sheet [data-b3-initial-focus]:focus {
-    outline: none;
-  }
-
   .b3-sheet-handle {
     min-block-size: 44px;
     inline-size: 5rem;
@@ -1773,45 +1710,4 @@
   .b3-root:has(dialog:modal) {
     overflow: hidden;
   }
-
-  .b3-app-frame {
-    block-size: var(--b3-frame-height, 100dvh);
-    min-block-size: 0;
-    max-inline-size: var(--b3-app-width, 70rem);
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
-    grid-template-rows: auto minmax(0, 1fr) auto;
-    margin-inline: auto;
-    display: grid;
-    overflow: clip;
-  }
-
-  .b3-app-frame > header {
-    grid-row: 1;
-    min-inline-size: 0;
-  }
-
-  .b3-app-frame > main {
-    overscroll-behavior: contain;
-    grid-row: 2;
-    min-block-size: 0;
-    min-inline-size: 0;
-    overflow: auto;
-  }
-
-  .b3-app-frame > :is(nav, footer) {
-    grid-row: 3;
-    min-inline-size: 0;
-    position: relative;
-  }
-
-  .b3-app-frame > .b3-app-bar {
-    padding-block-start: .75rem;
-  }
-
-  .b3-app-frame .b3-bottom-nav {
-    inline-size: 100%;
-    max-inline-size: none;
-    padding-block-end: .5rem;
-    position: static;
-  }
 }

package/dist/bare.min.css

@@ -1 +1 @@
-@layer bare.reset{:where(.b3-root),:where(.b3-root *){box-sizing:border-box}:where(.b3-root){font-family:var(--b3-font-body);background:var(--b3-color-canvas);color:var(--b3-color-text);color-scheme:light;margin:0;font-size:1rem;line-height:1.5}:where(.b3-root>body){margin:0}:where(.b3-root) :where(button,input,select,textarea){font:inherit}:where(.b3-root) :where(h1,h2,h3,p){margin:0}:where(.b3-root) :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:none;box-shadow:inset 0 0 0 2px}@media (forced-colors:active){:where(.b3-root) :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline-offset:-2px;outline:1px solid highlight}}:where(.b3-root) :where(img,svg){max-inline-size:100%}@media (prefers-reduced-motion:reduce){:where(.b3-root *),:where(.b3-root *):before,:where(.b3-root *):after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}[data-b3-motion=reduce] *,[data-b3-motion=reduce] :before,[data-b3-motion=reduce] :after,[data-b3-motion=reduce] ::backdrop{scroll-behavior:auto!important;transition:none!important;animation:none!important}:where(.b3-root [hidden]):not([hidden=until-found]){display:none!important}:where(.b3-root) :where(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--b3-color-accent)}}@layer bare.tokens{.b3-root{--b3-color-canvas:#f6f5f0;--b3-color-surface:#fff;--b3-color-text:#202923;--b3-color-muted:#59655d;--b3-color-border:#d5dbd3;--b3-color-accent:#245c42;--b3-color-on-accent:#fff;--b3-color-danger:#a62c35;--b3-color-focus:#276bdd;--b3-font-body:ui-sans-serif, system-ui, sans-serif;--b3-font-display:var(--b3-font-body);--b3-radius:.75rem;--b3-space:1rem;--b3-content:68rem}.b3-root[data-b3-theme=dark]{color-scheme:dark;--b3-color-canvas:#141c19;--b3-color-surface:#202c26;--b3-color-text:#edf3ec;--b3-color-muted:#a8b9ad;--b3-color-border:#415348;--b3-color-accent:#aadbb8;--b3-color-on-accent:#132b1b;--b3-color-danger:#ffadb1;--b3-color-focus:#9ac4ff}.b3-root{--b3-space-1:.25rem;--b3-space-2:.5rem;--b3-space-3:.75rem;--b3-space-4:1rem;--b3-space-6:1.5rem;--b3-space-8:2rem;--b3-space-12:3rem;--b3-radius-small:.375rem;--b3-radius-large:1.25rem;--b3-shadow:0 8px 32px #14231b14;--b3-shadow-raised:0 16px 56px #14231b24;--b3-color-success:#256443;--b3-color-warning:#805100;--b3-color-info:#275f99;--b3-duration:.16s}.b3-root[data-b3-theme=dark]{--b3-shadow:0 8px 32px #0004;--b3-shadow-raised:0 16px 56px #0007;--b3-color-success:#99d9ab;--b3-color-warning:#f2c76c;--b3-color-info:#a2cfff}}@layer bare.layout{.b3-shell{inline-size:min(100%, var(--b3-content));margin-inline:auto;padding:clamp(1rem,4vw,3rem)}.b3-stack{gap:var(--b3-space);flex-direction:column;min-inline-size:0;display:flex}.b3-stack:where(dialog:not([open])){display:none}.b3-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;flex:auto;min-block-size:0;min-inline-size:0;overflow:auto}.b3-stack:has(>.b3-scroll)>:not(.b3-scroll){flex-shrink:0}.b3-cluster{align-items:center;gap:var(--b3-space);flex-wrap:wrap;min-inline-size:0;display:flex}.b3-cluster>*,.b3-split>*{min-inline-size:0}.b3-inline{vertical-align:middle;align-items:center;gap:.5em;min-inline-size:0;max-inline-size:100%;display:inline-flex}.b3-inline>*{min-inline-size:0}.b3-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--b3-grid-min,17rem)), 1fr));gap:var(--b3-space);display:grid}.b3-split{justify-content:space-between;align-items:center;gap:var(--b3-space);flex-wrap:wrap;display:flex}.b3-page{flex-direction:column;min-block-size:100svh;display:flex}.b3-page-body{flex:1;min-inline-size:0}.b3-app-layout{grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);min-block-size:100svh;display:grid}.b3-sidebar{padding:var(--b3-space-6);border-inline-end:1px solid var(--b3-color-border);background:var(--b3-color-surface);min-inline-size:0}.b3-center{padding:var(--b3-space-6);place-items:center;display:grid}.b3-cover{min-block-size:min(42rem,85svh);padding-block:var(--b3-space-12);flex-direction:column;justify-content:center;display:flex}.b3-reel{gap:var(--b3-space);scroll-snap-type:x proximity;padding-block-end:var(--b3-space-2);display:flex;overflow-x:auto}.b3-reel>*{scroll-snap-align:start;flex:0 0 min(85%,20rem)}@media (width<=48rem){.b3-app-layout{grid-template-columns:minmax(0,1fr)}.b3-sidebar{border-inline-end:0;border-block-end:1px solid var(--b3-color-border)}}}@layer bare.components{.b3-title{font-family:var(--b3-font-display);letter-spacing:-.04em;overflow-wrap:anywhere;font-size:clamp(2rem,7vw,4rem);line-height:1.05}.b3-heading{font-family:var(--b3-font-display);letter-spacing:-.02em;font-size:1.375rem;line-height:1.25}.b3-muted{color:var(--b3-color-muted)}.b3-label{letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;font-weight:650}.b3-surface{background:var(--b3-color-surface);color:var(--b3-color-text);border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);padding:clamp(1rem,3vw,2rem)}.b3-button{border-radius:var(--b3-radius);background:var(--b3-color-accent);min-block-size:2.75rem;color:var(--b3-color-on-accent);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;font-weight:650;text-decoration:none;display:inline-flex}.b3-button :where(svg){flex-shrink:0;display:block}.b3-button>:where([aria-hidden=true]):has(>svg){flex-shrink:0}.b3-button[data-b3-emphasis=quiet]{color:var(--b3-color-text);border-color:var(--b3-color-border);background:0 0}.b3-button:disabled{opacity:.5;cursor:not-allowed}.b3-field{align-content:start;gap:.375rem;min-inline-size:0;display:grid}.b3-input{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);min-block-size:2.75rem;inline-size:100%;min-inline-size:0;color:var(--b3-color-text);padding:.625rem .75rem}.b3-error{color:var(--b3-color-danger);font-size:.875rem}select.b3-input:not([multiple]):not([size]),select.b3-input[size="1"]:not([multiple]){appearance:none;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:right calc(1rem + 5px) center,right 1rem center;background-repeat:no-repeat;background-size:5px 5px;padding-inline-end:2.5rem}select.b3-input:not([multiple]):not([size]):dir(rtl),select.b3-input[size="1"]:not([multiple]):dir(rtl){background-position:1rem,calc(1rem + 5px)}@media (forced-colors:active){select.b3-input:not([multiple]):not([size]),select.b3-input[size="1"]:not([multiple]){appearance:auto;background-image:none}}.b3-row{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding-block:1rem;display:flex}.b3-badge{border:1px solid var(--b3-color-border);border-radius:100vmax;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:650;display:inline-flex}.b3-progress{block-size:.5rem;inline-size:100%;accent-color:var(--b3-color-accent)}.b3-button{transition:box-shadow var(--b3-duration), border-color var(--b3-duration)}@media (hover:hover){.b3-button:not(:disabled):hover{box-shadow:inset 0 0 0 100vmax #00000012}}.b3-button:not(:disabled):active{box-shadow:inset 0 0 0 100vmax #00000024}.b3-button[data-b3-emphasis=outline]{color:var(--b3-color-accent);background:0 0;border-color:currentColor}.b3-button[data-b3-emphasis=danger]{background:var(--b3-color-danger);color:var(--b3-color-canvas)}.b3-button[data-b3-size=small]{padding:.5rem .75rem;font-size:.875rem}.b3-button[data-b3-size=large]{min-block-size:3.25rem;padding:.875rem 1.5rem}.b3-button[aria-busy=true]{cursor:progress}.b3-icon{vertical-align:-.2em;flex:none;block-size:1.25em;inline-size:1.25em;display:inline-block}.b3-input:disabled{opacity:.6;cursor:not-allowed}.b3-input[readonly]{background:var(--b3-color-canvas)}.b3-input::placeholder{color:var(--b3-color-muted);opacity:.8}.b3-input-group{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);align-items:stretch;min-inline-size:0;display:flex;overflow:clip}.b3-input-group>.b3-input{border:0;border-radius:0;flex:1}.b3-input-group:focus-within{outline:none;box-shadow:inset 0 0 0 2px}.b3-input-affix{color:var(--b3-color-muted);background:var(--b3-color-canvas);align-items:center;padding-inline:.75rem;display:flex}.b3-choice{cursor:pointer;align-items:start;gap:.75rem;padding-block:.5rem;display:flex}.b3-choice input{--b3-choice-control:1.125rem;inline-size:var(--b3-choice-control);block-size:var(--b3-choice-control);flex:none;margin:0;margin-block-start:max(0px, calc((1lh - var(--b3-choice-control)) / 2))}.b3-choice>.b3-switch{--b3-choice-control:1.625rem}.b3-switch{appearance:none;background:var(--b3-color-muted);border:2px solid var(--b3-color-muted);cursor:pointer;border-radius:2rem;position:relative;block-size:1.625rem!important;inline-size:2.75rem!important}.b3-switch:before{content:"";background:var(--b3-color-surface);border-radius:50%;block-size:1.125rem;inline-size:1.125rem;position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem}.b3-switch:checked{background:var(--b3-color-accent);border-color:var(--b3-color-accent)}.b3-switch:checked:before{background:var(--b3-color-on-accent);inset-inline-start:calc(100% - 1.25rem)}.b3-switch:disabled{opacity:.5;cursor:not-allowed}.b3-card-header,.b3-card-footer{justify-content:space-between;align-items:center;gap:var(--b3-space);flex-wrap:wrap;display:flex}.b3-card-header{margin-block-end:var(--b3-space-4)}.b3-card-footer{border-block-start:1px solid var(--b3-color-border);margin-block-start:var(--b3-space-4);padding-block-start:var(--b3-space-4)}.b3-surface[data-b3-elevation=raised]{box-shadow:var(--b3-shadow)}.b3-divider{border:0;border-block-start:1px solid var(--b3-color-border);margin-block:var(--b3-space)}.b3-alert,.b3-toast{overflow-wrap:anywhere;min-inline-size:0}.b3-alert>*,.b3-toast>*{min-inline-size:0}.b3-alert{--b3-status-color:var(--b3-color-info);border:1px solid var(--b3-status-color);border-radius:var(--b3-radius-small);color:var(--b3-color-text);background:color-mix(in srgb, var(--b3-status-color) 8%, var(--b3-color-surface));border-inline-start-width:4px;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-alert[data-b3-tone=success],.b3-badge[data-b3-tone=success]{--b3-status-color:var(--b3-color-success)}.b3-alert[data-b3-tone=warning],.b3-badge[data-b3-tone=warning]{--b3-status-color:var(--b3-color-warning)}.b3-alert[data-b3-tone=danger],.b3-badge[data-b3-tone=danger]{--b3-status-color:var(--b3-color-danger)}.b3-badge[data-b3-tone]{color:var(--b3-status-color,var(--b3-color-info));background:color-mix(in srgb, currentColor 7%, transparent);border-color:currentColor}.b3-toast-region{z-index:100;pointer-events:none;gap:.75rem;inline-size:min(24rem,100% - 2rem);display:grid;position:fixed;inset-block-end:1rem;inset-inline-end:1rem}.b3-toast{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);pointer-events:auto;align-items:start;gap:1rem;padding:1rem;display:flex}.b3-spinner{vertical-align:-.125em;border:2px solid;border-inline-end-color:#0000;border-radius:50%;flex:none;block-size:1.125em;inline-size:1.125em;animation:.8s linear infinite b3-spin;display:inline-block}@keyframes b3-spin{to{transform:rotate(360deg)}}.b3-skeleton{background:var(--b3-color-border);border-radius:var(--b3-radius-small);min-block-size:1rem;animation:1.8s ease-in-out infinite b3-pulse}@keyframes b3-pulse{50%{opacity:.45}}.b3-avatar{background:var(--b3-color-accent);block-size:2.5rem;inline-size:2.5rem;color:var(--b3-color-on-accent);border-radius:50%;flex:none;place-items:center;font-size:.875rem;font-weight:650;display:inline-grid;overflow:hidden}.b3-avatar>img{object-fit:cover;block-size:100%;inline-size:100%}.b3-avatar-stack{padding-inline-start:.5rem;display:flex}.b3-avatar-stack>.b3-avatar{border:2px solid var(--b3-color-surface);margin-inline-start:-.5rem}.b3-kbd{border:1px solid var(--b3-color-border);background:var(--b3-color-surface);color:var(--b3-color-muted);border-block-end-width:2px;border-radius:.25rem;padding:.15rem .35rem;font:.75rem ui-monospace,monospace}.b3-table-wrap{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);overflow-x:auto}.b3-table{border-collapse:collapse;text-align:start;font-variant-numeric:tabular-nums;inline-size:100%}.b3-table th{color:var(--b3-color-muted);background:var(--b3-color-canvas);font-size:.75rem;font-weight:650}.b3-table :is(th,td){border-block-end:1px solid var(--b3-color-border);text-align:start;vertical-align:middle;padding:.875rem 1rem}.b3-table tbody tr:last-child td{border-block-end:0}.b3-table[data-b3-density=compact] :is(th,td){padding:.5rem .75rem}.b3-table tbody tr[aria-selected=true]{background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface))}.b3-definition{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:.75rem 1.5rem;margin:0;display:grid;container:b3-definition/inline-size}.b3-definition dt{overflow-wrap:anywhere;min-inline-size:0;color:var(--b3-color-muted)}.b3-definition dd{overflow-wrap:anywhere;margin:0}@container b3-definition (width<=26rem){.b3-definition>:is(dt,dd){grid-column:1/-1}.b3-definition>dt:not(:first-child){margin-block-start:.75rem}}.b3-stat{gap:.5rem;display:grid}.b3-stat-value{letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-size:clamp(2rem,5vw,3rem);font-weight:650;line-height:1.1}.b3-nav{border-block-end:1px solid var(--b3-color-border);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem;display:flex}.b3-nav[data-b3-orientation=vertical]{border-block-end:0;flex-direction:column;align-items:stretch}.b3-nav-link{border-radius:var(--b3-radius-small);min-block-size:2.75rem;color:var(--b3-color-muted);align-items:center;gap:.5rem;padding:.625rem .875rem;text-decoration:none;display:flex}.b3-nav-link[aria-current=page]{background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface));color:var(--b3-color-accent);font-weight:650}.b3-nav-link:hover{background:var(--b3-color-surface);color:var(--b3-color-text)}.b3-breadcrumbs{color:var(--b3-color-muted);flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;font-size:.875rem;list-style:none;display:flex}.b3-breadcrumbs li+li:before{content:"/";color:var(--b3-color-border);margin-inline-end:.5rem}.b3-tablist{border-block-end:1px solid var(--b3-color-border);gap:.25rem;display:flex;overflow-x:auto}.b3-tab{appearance:none;color:var(--b3-color-muted);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-block-end:2px solid #0000;min-block-size:2.75rem;padding:.75rem 1rem}.b3-tab[aria-selected=true]{color:var(--b3-color-accent);border-block-end-color:currentColor;font-weight:650}.b3-tab:disabled{opacity:.5;cursor:not-allowed}.b3-tabpanel{padding-block:var(--b3-space-4)}.b3-accordion{border-block-end:1px solid var(--b3-color-border)}.b3-accordion>summary{cursor:pointer;padding:1rem .25rem;font-weight:650}.b3-accordion>:not(summary){padding:0 .25rem 1rem}.b3-dropdown{display:inline-block;position:relative}.b3-dropdown>summary{list-style:none}.b3-dropdown>summary::-webkit-details-marker{display:none}.b3-dropdown-panel{z-index:20;border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);max-block-size:70svh;inline-size:max-content;min-inline-size:min(12rem,85vw);max-inline-size:min(22rem,85vw);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);padding:.5rem;position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-start:0;overflow-y:auto}.b3-dialog{overscroll-behavior:contain;border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-large);background:var(--b3-color-surface);max-block-size:calc(100svh - 2rem);inline-size:min(32rem,100% - 2rem);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);padding:1.5rem;overflow:auto}.b3-dialog::backdrop{background:#101b17a6}.b3-dialog[data-b3-placement=end]{border-radius:0;block-size:100svh;max-block-size:100svh;inline-size:min(28rem,100%);margin:0;margin-inline-start:auto}@media (prefers-reduced-motion:no-preference){.b3-dialog[open]{animation:.28s cubic-bezier(.16,1,.3,1) b3-dialog-enter}.b3-dialog[open][data-b3-placement=end]{animation-name:b3-drawer-enter}.b3-dialog::backdrop,.b3-sheet::backdrop{transition:opacity .16s ease-out}.b3-dialog[data-b3-closing]::backdrop,.b3-sheet[data-b3-closing]::backdrop{opacity:0}@keyframes b3-dialog-enter{0%{opacity:0;transform:translateY(8px)scale(.96)}}@keyframes b3-drawer-enter{0%{opacity:0;translate:var(--b3-drawer-offset,1rem)}}.b3-dialog[dir=rtl][data-b3-placement=end],[dir=rtl] .b3-dialog[data-b3-placement=end]{--b3-drawer-offset:-1rem}}.b3-tree{border-inline-start:1px solid var(--b3-color-border);padding-inline-start:1rem;list-style:none}.b3-tree summary{cursor:pointer;padding-block:.5rem}.b3-prose{overflow-wrap:anywhere;max-inline-size:65ch;line-height:1.75}.b3-prose :is(p,ul,ol,blockquote,pre){margin-block:1rem}.b3-prose :is(h2,h3,h4){margin-block:1.75rem .75rem;line-height:1.25}.b3-prose blockquote{border-inline-start:3px solid var(--b3-color-accent);color:var(--b3-color-muted);margin-inline:0;padding-inline-start:1rem}.b3-prose pre{background:var(--b3-color-surface);border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-small);padding:1rem;overflow-x:auto}.b3-visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.b3-skip-link{z-index:1000;border-radius:var(--b3-radius-small);background:var(--b3-color-accent);max-inline-size:calc(100% - 1.5rem);color:var(--b3-color-on-accent);padding:.75rem 1rem;font-weight:650;position:fixed;inset-block-start:max(.75rem, env(safe-area-inset-top,0px));inset-inline-start:.75rem}.b3-skip-link:not(:focus){clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;padding:0;overflow:hidden}.b3-hero{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(2rem,6vw,6rem);padding-block:clamp(3rem,8vw,7rem);display:grid}.b3-hero[data-b3-align=center]{text-align:center;grid-template-columns:minmax(0,1fr);justify-items:center}.b3-hero-copy{gap:1.5rem;max-inline-size:40rem;display:grid}.b3-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,5vw,5rem);padding-block:clamp(2rem,6vw,5rem);display:grid}.b3-feature[data-b3-reverse=true]>:first-child{order:2}.b3-feature-icon{border-radius:var(--b3-radius);background:var(--b3-color-accent);block-size:3rem;inline-size:3rem;color:var(--b3-color-on-accent);place-items:center;display:inline-grid}.b3-pricing{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-large);background:var(--b3-color-surface);color:var(--b3-color-text);flex-direction:column;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);display:flex}.b3-pricing[data-b3-featured=true]{border:2px solid var(--b3-color-accent);box-shadow:var(--b3-shadow)}.b3-pricing>.b3-button:last-child{margin-block-start:auto}.b3-price{font-variant-numeric:tabular-nums;align-items:baseline;gap:.375rem;display:flex}.b3-price>strong{letter-spacing:-.05em;font-size:3.25rem;line-height:1.1}.b3-checklist{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.b3-checklist>li{align-items:start;gap:.625rem;display:flex}.b3-checklist>li:before{content:"✓";color:var(--b3-color-accent);font-weight:700}.b3-quote{border-inline-start:3px solid var(--b3-color-accent);margin:0;padding:1.5rem}.b3-quote blockquote{margin:0 0 1rem;font-size:1.25rem;line-height:1.5}.b3-art{isolation:isolate;border-radius:var(--b3-radius-large);background:var(--b3-color-surface);position:relative;overflow:hidden}.b3-art:before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0}.b3-art[data-b3-art=dots]:before{background-image:radial-gradient(var(--b3-color-border) 1px,transparent 1px);background-size:16px 16px}.b3-art[data-b3-art=glow]:before{background:radial-gradient(ellipse at 20% 20%,color-mix(in srgb,var(--b3-color-accent) 20%,transparent),transparent 65%)}.b3-art[data-b3-art=wash]:before{background:linear-gradient(135deg,color-mix(in srgb,var(--b3-color-accent) 14%,transparent),transparent 70%)}@media (width<=48rem){.b3-hero,.b3-feature{grid-template-columns:minmax(0,1fr)}.b3-feature[data-b3-reverse=true]>:first-child{order:initial}}.b3-reading{grid-template-columns:minmax(0,1fr) minmax(12rem,16rem);grid-template-areas:"content outline";align-items:start;gap:clamp(2rem,5vw,5rem);display:grid}.b3-reading>:not(.b3-toc){grid-area:content;min-inline-size:0}.b3-toc{max-block-size:calc(100svh - var(--b3-outline-top,1rem) - 1rem);border-inline-start:1px solid var(--b3-color-border);grid-area:outline;padding-inline-start:1rem;font-size:.875rem;position:sticky;inset-block-start:var(--b3-outline-top,1rem);overflow-y:auto}.b3-toc ol{gap:.25rem;margin:.75rem 0 0;padding:0;list-style:none;display:grid}.b3-toc ol ol{margin:.25rem 0;padding-inline-start:1rem}.b3-toc-link{border-radius:var(--b3-radius-small);color:var(--b3-color-muted);overflow-wrap:anywhere;padding:.625rem .75rem;text-decoration:none;display:block}.b3-toc-link:hover{color:var(--b3-color-text);background:var(--b3-color-surface)}.b3-toc-link[aria-current=location]{color:var(--b3-color-accent);background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface));font-weight:650}@media (width<=48rem){.b3-reading{grid-template-columns:minmax(0,1fr);grid-template-areas:"outline""content";gap:2rem}.b3-toc{max-block-size:none;position:static}}.b3-command{inline-size:min(38rem,100% - 2rem);padding:0}.b3-command-search{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding:1rem;display:flex}.b3-command-search>input{flex:1;min-inline-size:0}.b3-command-list{overscroll-behavior:contain;max-block-size:50svh;padding:.5rem;overflow-y:auto}.b3-command-group+.b3-command-group{border-block-start:1px solid var(--b3-color-border);margin-block-start:.5rem;padding-block-start:.5rem}.b3-command-group>:first-child:not([role=option]){color:var(--b3-color-muted);padding:.5rem .75rem;font-size:.75rem;display:block}.b3-command-item{border-radius:var(--b3-radius-small);cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;min-block-size:2.75rem;padding:.875rem .75rem;display:flex}.b3-command-item>:first-child{overflow-wrap:anywhere;min-inline-size:0}.b3-command-item[aria-selected=true]{background:var(--b3-color-accent);color:var(--b3-color-on-accent)}.b3-command-item[aria-selected=true] .b3-muted{color:inherit}.b3-command-item[aria-disabled=true]{opacity:.5;cursor:not-allowed}.b3-command-item:not([aria-disabled=true]):hover{outline:1px solid var(--b3-color-border);outline-offset:-1px}.b3-form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));align-items:start;gap:1.25rem;display:grid}.b3-form-grid[data-b3-layout=inline]{flex-wrap:wrap;align-items:end;display:flex}.b3-form-grid[data-b3-layout=inline]>.b3-field{flex:12rem;min-inline-size:0}.b3-form-grid[data-b3-layout=inline]>.b3-button{overflow-wrap:anywhere;flex:0 auto;max-inline-size:100%}.b3-fieldset{border:0;min-inline-size:0;margin:0;padding:0}.b3-fieldset>legend{padding:0 0 .75rem;font-weight:650}.b3-help{color:var(--b3-color-muted);font-size:.875rem}.b3-help[data-b3-tone=success]{color:var(--b3-color-success)}.b3-help[data-b3-tone=warning]{color:var(--b3-color-warning)}.b3-input[data-b3-size=small]{padding:.5rem .75rem}.b3-input[data-b3-size=large]{min-block-size:3.25rem;padding:.875rem 1rem}.b3-input[data-b3-emphasis=subtle]{background-color:var(--b3-color-canvas);border-color:#0000}.b3-input[data-b3-emphasis=outline]{background-color:#0000;border-width:2px}.b3-input[data-b3-tone=success]{border-color:var(--b3-color-success)}.b3-input[data-b3-tone=warning]{border-color:var(--b3-color-warning)}.b3-input[aria-invalid=true]{border-color:var(--b3-color-danger)}textarea.b3-input{resize:vertical}select.b3-input[multiple]{min-block-size:8rem}.b3-input[type=file]{padding:.375rem}.b3-input::file-selector-button{font:inherit;border-radius:var(--b3-radius-small);background:var(--b3-color-accent);color:var(--b3-color-on-accent);cursor:pointer;border:0;margin-inline-end:.75rem;padding:.5rem .75rem}.b3-input[type=color]{inline-size:5rem;padding:.25rem}.b3-range{min-block-size:2.75rem;inline-size:100%;accent-color:var(--b3-color-accent);margin:0}.b3-choice-card{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);cursor:pointer;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-choice-card>input{flex:none;block-size:1.125rem;inline-size:1.125rem;margin-block-start:.3rem}.b3-choice-card:has(input:checked){border-color:var(--b3-color-accent);background:color-mix(in srgb, var(--b3-color-accent) 7%, var(--b3-color-surface));box-shadow:inset 0 0 0 1px var(--b3-color-accent)}.b3-choice-card:has(input:focus-visible){outline:none;box-shadow:inset 0 0 0 2px}.b3-choice-card:has(input:disabled){opacity:.5;cursor:not-allowed}.b3-choice-card:has(input[aria-invalid=true]){border-color:var(--b3-color-danger)}.b3-range[aria-invalid=true]{accent-color:var(--b3-color-danger)}.b3-stepper{flex-wrap:wrap;gap:1rem 2rem;margin:0;padding:0;list-style:none;display:flex}.b3-step{color:var(--b3-color-muted);align-items:center;gap:.625rem;font-size:.875rem;display:flex}.b3-step-marker{border:1px solid var(--b3-color-border);font-variant-numeric:tabular-nums;border-radius:50%;flex:none;place-items:center;block-size:2rem;inline-size:2rem;display:grid}.b3-step[aria-current=step]{color:var(--b3-color-text);font-weight:650}.b3-step[aria-current=step] .b3-step-marker{background:var(--b3-color-accent);color:var(--b3-color-on-accent);border-color:var(--b3-color-accent)}.b3-step[data-b3-complete=true] .b3-step-marker{border-color:var(--b3-color-success);color:var(--b3-color-success)}.b3-conversation{gap:1.5rem;min-inline-size:0;margin:0;padding:0;list-style:none;display:grid}.b3-message{justify-self:start;gap:.375rem;min-inline-size:0;max-inline-size:min(85%,38rem);display:grid}.b3-message[data-b3-side=self]{justify-self:end}.b3-message-body{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);white-space:pre-wrap;overflow-wrap:anywhere;padding:.875rem 1rem}.b3-message[data-b3-side=self]>.b3-message-body{background:var(--b3-color-accent);color:var(--b3-color-on-accent);border-color:#0000}.b3-message-meta{color:var(--b3-color-muted);flex-wrap:wrap;gap:.35rem .75rem;font-size:.8125rem;display:flex}.b3-message[data-b3-side=self]>.b3-message-meta{justify-content:end}.b3-mobile-app{--b3-touch:44px;min-block-size:100svh;max-inline-size:var(--b3-app-width,70rem);margin-inline:auto;padding-block-end:calc(5.5rem + env(safe-area-inset-bottom,0px))}.b3-mobile-app[data-b3-platform=android]{--b3-touch:48px}.b3-mobile-app :where(button,.b3-button,select,input:not([type=checkbox],[type=radio])){min-block-size:var(--b3-touch)}.b3-app-bar{padding:max(.75rem, env(safe-area-inset-top,0px)) 1.25rem .75rem;align-items:center;gap:.75rem;display:flex}.b3-app-bar>:last-child:not(:first-child){margin-inline-start:auto}.b3-bottom-nav{z-index:10;max-inline-size:var(--b3-app-width,70rem);padding:.5rem 1rem max(.5rem, env(safe-area-inset-bottom,0px));background:var(--b3-color-surface);color:var(--b3-color-text);border-block-start:1px solid var(--b3-color-border);justify-content:space-around;gap:.5rem;margin-inline:auto;display:flex;position:fixed;inset-block-end:0;inset-inline:0}.b3-bottom-link{min-block-size:var(--b3-touch,44px);min-inline-size:0;color:var(--b3-color-muted);border-radius:1rem;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.15rem;padding:.25rem .5rem;font-size:.75rem;text-decoration:none;display:flex}.b3-bottom-link[aria-current=page]{color:var(--b3-color-accent);font-weight:700}[data-b3-platform=android] .b3-bottom-link[aria-current=page]{background:var(--b3-color-canvas)}.b3-mobile-list{border:1px solid var(--b3-color-border);background:var(--b3-color-surface);border-radius:1rem;margin:0;padding:0;list-style:none;overflow:hidden}.b3-mobile-list>li+li{border-block-start:1px solid var(--b3-color-border)}.b3-mobile-row{min-block-size:var(--b3-touch,44px);color:var(--b3-color-text);align-items:center;gap:1rem;padding:.875rem 1rem;text-decoration:none;display:flex}.b3-mobile-row>:last-child:not(:first-child){margin-inline-start:auto}.b3-sheet{inline-size:min(100%, var(--b3-overlay-width,32rem));max-inline-size:none;max-block-size:min(85dvh, calc(100dvh - env(safe-area-inset-top,0px) - 1rem));overscroll-behavior:contain;border:1px solid var(--b3-color-border);padding:1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom,0px));background:var(--b3-color-surface);color:var(--b3-color-text);border-radius:1.5rem 1.5rem 0 0;margin:0 auto;inset:auto 0 0;overflow-y:auto}.b3-sheet::backdrop{background:#0007}.b3-sheet [data-b3-initial-focus]:focus{outline:none}.b3-sheet-handle{min-block-size:44px;inline-size:5rem;color:var(--b3-color-muted);touch-action:none;cursor:grab;background:0 0;border:0;border-radius:1rem;flex:none;align-self:center;place-items:center;margin-block:-1rem -.5rem;padding:0;display:grid}.b3-sheet-handle:before{content:"";background:currentColor;border-radius:1rem;block-size:.25rem;inline-size:2.25rem}.b3-sheet[data-b3-dragging]{animation:none}.b3-sheet[data-b3-dragging] .b3-sheet-handle{cursor:grabbing}[data-b3-platform=android] .b3-mobile-list{border-radius:1.5rem}@media (prefers-reduced-motion:no-preference){.b3-sheet[open]{animation:.32s cubic-bezier(.16,1,.3,1) b3-sheet-enter}@keyframes b3-sheet-enter{0%{opacity:0;transform:translateY(3rem)}to{opacity:1;transform:translateY(0)}}}.b3-root:has(dialog:modal){overflow:hidden}.b3-app-frame{block-size:var(--b3-frame-height,100dvh);min-block-size:0;max-inline-size:var(--b3-app-width,70rem);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);grid-template-rows:auto minmax(0,1fr) auto;margin-inline:auto;display:grid;overflow:clip}.b3-app-frame>header{grid-row:1;min-inline-size:0}.b3-app-frame>main{overscroll-behavior:contain;grid-row:2;min-block-size:0;min-inline-size:0;overflow:auto}.b3-app-frame>:is(nav,footer){grid-row:3;min-inline-size:0;position:relative}.b3-app-frame>.b3-app-bar{padding-block-start:.75rem}.b3-app-frame .b3-bottom-nav{inline-size:100%;max-inline-size:none;padding-block-end:.5rem;position:static}}
+@layer bare.reset{:where(.b3-root),:where(.b3-root *){box-sizing:border-box}:where(.b3-root){font-family:var(--b3-font-body);background:var(--b3-color-canvas);color:var(--b3-color-text);color-scheme:light;margin:0;font-size:1rem;line-height:1.5}:where(.b3-root>body){margin:0}:where(.b3-root) :where(button,input,select,textarea){font:inherit}:where(.b3-root) :where(h1,h2,h3,p){margin:0}:where(.b3-root) :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--b3-color-focus);outline-offset:3px}:where(.b3-root) :where(img,svg){max-inline-size:100%}@media (prefers-reduced-motion:reduce){:where(.b3-root *),:where(.b3-root *):before,:where(.b3-root *):after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}[data-b3-motion=reduce] *,[data-b3-motion=reduce] :before,[data-b3-motion=reduce] :after,[data-b3-motion=reduce] ::backdrop{scroll-behavior:auto!important;transition:none!important;animation:none!important}:where(.b3-root [hidden]):not([hidden=until-found]){display:none!important}:where(.b3-root) :where(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--b3-color-accent)}}@layer bare.tokens{.b3-root{--b3-color-canvas:#f6f5f0;--b3-color-surface:#fff;--b3-color-text:#202923;--b3-color-muted:#59655d;--b3-color-border:#d5dbd3;--b3-color-accent:#245c42;--b3-color-on-accent:#fff;--b3-color-danger:#a62c35;--b3-color-focus:#276bdd;--b3-font-body:ui-sans-serif, system-ui, sans-serif;--b3-font-display:var(--b3-font-body);--b3-radius:.75rem;--b3-space:1rem;--b3-content:68rem}.b3-root[data-b3-theme=dark]{color-scheme:dark;--b3-color-canvas:#141c19;--b3-color-surface:#202c26;--b3-color-text:#edf3ec;--b3-color-muted:#a8b9ad;--b3-color-border:#415348;--b3-color-accent:#aadbb8;--b3-color-on-accent:#132b1b;--b3-color-danger:#ffadb1;--b3-color-focus:#9ac4ff}.b3-root{--b3-space-1:.25rem;--b3-space-2:.5rem;--b3-space-3:.75rem;--b3-space-4:1rem;--b3-space-6:1.5rem;--b3-space-8:2rem;--b3-space-12:3rem;--b3-radius-small:.375rem;--b3-radius-large:1.25rem;--b3-shadow:0 8px 32px #14231b14;--b3-shadow-raised:0 16px 56px #14231b24;--b3-color-success:#256443;--b3-color-warning:#805100;--b3-color-info:#275f99;--b3-duration:.16s}.b3-root[data-b3-theme=dark]{--b3-shadow:0 8px 32px #0004;--b3-shadow-raised:0 16px 56px #0007;--b3-color-success:#99d9ab;--b3-color-warning:#f2c76c;--b3-color-info:#a2cfff}}@layer bare.layout{.b3-shell{inline-size:min(100%, var(--b3-content));margin-inline:auto;padding:clamp(1rem,4vw,3rem)}.b3-stack{gap:var(--b3-space);flex-direction:column;min-inline-size:0;display:flex}.b3-stack:where(dialog:not([open])){display:none}.b3-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;flex:auto;min-block-size:0;min-inline-size:0;overflow:auto}.b3-stack:has(>.b3-scroll)>:not(.b3-scroll){flex-shrink:0}.b3-cluster{align-items:center;gap:var(--b3-space);flex-wrap:wrap;min-inline-size:0;display:flex}.b3-inline{vertical-align:middle;align-items:center;gap:.5em;min-inline-size:0;max-inline-size:100%;display:inline-flex}.b3-inline>*{min-inline-size:0}.b3-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--b3-grid-min,17rem)), 1fr));gap:var(--b3-space);display:grid}.b3-split{justify-content:space-between;align-items:center;gap:var(--b3-space);flex-wrap:wrap;display:flex}.b3-page{flex-direction:column;min-block-size:100svh;display:flex}.b3-page-body{flex:1;min-inline-size:0}.b3-app-layout{grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);min-block-size:100svh;display:grid}.b3-sidebar{padding:var(--b3-space-6);border-inline-end:1px solid var(--b3-color-border);background:var(--b3-color-surface);min-inline-size:0}.b3-center{padding:var(--b3-space-6);place-items:center;display:grid}.b3-cover{min-block-size:min(42rem,85svh);padding-block:var(--b3-space-12);flex-direction:column;justify-content:center;display:flex}.b3-reel{gap:var(--b3-space);scroll-snap-type:x proximity;padding-block-end:var(--b3-space-2);display:flex;overflow-x:auto}.b3-reel>*{scroll-snap-align:start;flex:0 0 min(85%,20rem)}@media (width<=48rem){.b3-app-layout{grid-template-columns:minmax(0,1fr)}.b3-sidebar{border-inline-end:0;border-block-end:1px solid var(--b3-color-border)}}}@layer bare.components{.b3-title{font-family:var(--b3-font-display);letter-spacing:-.04em;overflow-wrap:anywhere;font-size:clamp(2rem,7vw,4rem);line-height:1.05}.b3-heading{font-family:var(--b3-font-display);letter-spacing:-.02em;font-size:1.375rem;line-height:1.25}.b3-muted{color:var(--b3-color-muted)}.b3-label{letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;font-weight:650}.b3-surface{background:var(--b3-color-surface);color:var(--b3-color-text);border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);padding:clamp(1rem,3vw,2rem)}.b3-button{border-radius:var(--b3-radius);background:var(--b3-color-accent);min-block-size:2.75rem;color:var(--b3-color-on-accent);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;font-weight:650;text-decoration:none;display:inline-flex}.b3-button[data-b3-emphasis=quiet]{color:var(--b3-color-text);border-color:var(--b3-color-border);background:0 0}.b3-button:disabled{opacity:.5;cursor:not-allowed}.b3-field{align-content:start;gap:.375rem;min-inline-size:0;display:grid}.b3-input{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);min-block-size:2.75rem;inline-size:100%;min-inline-size:0;color:var(--b3-color-text);padding:.625rem .75rem}.b3-error{color:var(--b3-color-danger);font-size:.875rem}select.b3-input:not([multiple]):not([size]),select.b3-input[size="1"]:not([multiple]){appearance:none;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:right calc(1rem + 5px) center,right 1rem center;background-repeat:no-repeat;background-size:5px 5px;padding-inline-end:2.5rem}select.b3-input:not([multiple]):not([size]):dir(rtl),select.b3-input[size="1"]:not([multiple]):dir(rtl){background-position:1rem,calc(1rem + 5px)}@media (forced-colors:active){select.b3-input:not([multiple]):not([size]),select.b3-input[size="1"]:not([multiple]){appearance:auto;background-image:none}}.b3-row{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding-block:1rem;display:flex}.b3-badge{border:1px solid var(--b3-color-border);border-radius:100vmax;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:650;display:inline-flex}.b3-progress{block-size:.5rem;inline-size:100%;accent-color:var(--b3-color-accent)}.b3-button{transition:box-shadow var(--b3-duration), border-color var(--b3-duration)}@media (hover:hover){.b3-button:not(:disabled):hover{box-shadow:inset 0 0 0 100vmax #00000012}}.b3-button:not(:disabled):active{box-shadow:inset 0 0 0 100vmax #00000024}.b3-button[data-b3-emphasis=outline]{color:var(--b3-color-accent);background:0 0;border-color:currentColor}.b3-button[data-b3-emphasis=danger]{background:var(--b3-color-danger);color:var(--b3-color-canvas)}.b3-button[data-b3-size=small]{padding:.5rem .75rem;font-size:.875rem}.b3-button[data-b3-size=large]{min-block-size:3.25rem;padding:.875rem 1.5rem}.b3-button[aria-busy=true]{cursor:progress}.b3-icon{vertical-align:-.2em;flex:none;block-size:1.25em;inline-size:1.25em;display:inline-block}.b3-input:disabled{opacity:.6;cursor:not-allowed}.b3-input[readonly]{background:var(--b3-color-canvas)}.b3-input::placeholder{color:var(--b3-color-muted);opacity:.8}.b3-input-group{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);align-items:stretch;min-inline-size:0;display:flex;overflow:clip}.b3-input-group>.b3-input{border:0;border-radius:0;flex:1}.b3-input-group:focus-within{outline:3px solid var(--b3-color-focus);outline-offset:3px}.b3-input-affix{color:var(--b3-color-muted);background:var(--b3-color-canvas);align-items:center;padding-inline:.75rem;display:flex}.b3-choice{cursor:pointer;align-items:start;gap:.75rem;padding-block:.5rem;display:flex}.b3-choice input{--b3-choice-control:1.125rem;inline-size:var(--b3-choice-control);block-size:var(--b3-choice-control);flex:none;margin:0;margin-block-start:max(0px, calc((1lh - var(--b3-choice-control)) / 2))}.b3-choice>.b3-switch{--b3-choice-control:1.625rem}.b3-switch{appearance:none;background:var(--b3-color-muted);border:2px solid var(--b3-color-muted);cursor:pointer;border-radius:2rem;position:relative;block-size:1.625rem!important;inline-size:2.75rem!important}.b3-switch:before{content:"";background:var(--b3-color-surface);border-radius:50%;block-size:1.125rem;inline-size:1.125rem;position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem}.b3-switch:checked{background:var(--b3-color-accent);border-color:var(--b3-color-accent)}.b3-switch:checked:before{background:var(--b3-color-on-accent);inset-inline-start:calc(100% - 1.25rem)}.b3-switch:disabled{opacity:.5;cursor:not-allowed}.b3-card-header,.b3-card-footer{justify-content:space-between;align-items:center;gap:var(--b3-space);flex-wrap:wrap;display:flex}.b3-card-header{margin-block-end:var(--b3-space-4)}.b3-card-footer{border-block-start:1px solid var(--b3-color-border);margin-block-start:var(--b3-space-4);padding-block-start:var(--b3-space-4)}.b3-surface[data-b3-elevation=raised]{box-shadow:var(--b3-shadow)}.b3-divider{border:0;border-block-start:1px solid var(--b3-color-border);margin-block:var(--b3-space)}.b3-alert{--b3-status-color:var(--b3-color-info);border:1px solid var(--b3-status-color);border-radius:var(--b3-radius-small);color:var(--b3-color-text);background:color-mix(in srgb, var(--b3-status-color) 8%, var(--b3-color-surface));border-inline-start-width:4px;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-alert[data-b3-tone=success],.b3-badge[data-b3-tone=success]{--b3-status-color:var(--b3-color-success)}.b3-alert[data-b3-tone=warning],.b3-badge[data-b3-tone=warning]{--b3-status-color:var(--b3-color-warning)}.b3-alert[data-b3-tone=danger],.b3-badge[data-b3-tone=danger]{--b3-status-color:var(--b3-color-danger)}.b3-badge[data-b3-tone]{color:var(--b3-status-color,var(--b3-color-info));background:color-mix(in srgb, currentColor 7%, transparent);border-color:currentColor}.b3-toast-region{z-index:100;pointer-events:none;gap:.75rem;inline-size:min(24rem,100% - 2rem);display:grid;position:fixed;inset-block-end:1rem;inset-inline-end:1rem}.b3-toast{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);pointer-events:auto;align-items:start;gap:1rem;padding:1rem;display:flex}.b3-spinner{vertical-align:-.125em;border:2px solid;border-inline-end-color:#0000;border-radius:50%;flex:none;block-size:1.125em;inline-size:1.125em;animation:.8s linear infinite b3-spin;display:inline-block}@keyframes b3-spin{to{transform:rotate(360deg)}}.b3-skeleton{background:var(--b3-color-border);border-radius:var(--b3-radius-small);min-block-size:1rem;animation:1.8s ease-in-out infinite b3-pulse}@keyframes b3-pulse{50%{opacity:.45}}.b3-avatar{background:var(--b3-color-accent);block-size:2.5rem;inline-size:2.5rem;color:var(--b3-color-on-accent);border-radius:50%;flex:none;place-items:center;font-size:.875rem;font-weight:650;display:inline-grid;overflow:hidden}.b3-avatar>img{object-fit:cover;block-size:100%;inline-size:100%}.b3-avatar-stack{padding-inline-start:.5rem;display:flex}.b3-avatar-stack>.b3-avatar{border:2px solid var(--b3-color-surface);margin-inline-start:-.5rem}.b3-kbd{border:1px solid var(--b3-color-border);background:var(--b3-color-surface);color:var(--b3-color-muted);border-block-end-width:2px;border-radius:.25rem;padding:.15rem .35rem;font:.75rem ui-monospace,monospace}.b3-table-wrap{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);overflow-x:auto}.b3-table{border-collapse:collapse;text-align:start;font-variant-numeric:tabular-nums;inline-size:100%}.b3-table th{color:var(--b3-color-muted);background:var(--b3-color-canvas);font-size:.75rem;font-weight:650}.b3-table :is(th,td){border-block-end:1px solid var(--b3-color-border);text-align:start;vertical-align:middle;padding:.875rem 1rem}.b3-table tbody tr:last-child td{border-block-end:0}.b3-table[data-b3-density=compact] :is(th,td){padding:.5rem .75rem}.b3-table tbody tr[aria-selected=true]{background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface))}.b3-definition{grid-template-columns:minmax(7rem,1fr) minmax(0,2fr);gap:.75rem 1.5rem;margin:0;display:grid}.b3-definition dt{color:var(--b3-color-muted)}.b3-definition dd{overflow-wrap:anywhere;margin:0}.b3-stat{gap:.5rem;display:grid}.b3-stat-value{letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-size:clamp(2rem,5vw,3rem);font-weight:650;line-height:1.1}.b3-nav{border-block-end:1px solid var(--b3-color-border);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem;display:flex}.b3-nav[data-b3-orientation=vertical]{border-block-end:0;flex-direction:column;align-items:stretch}.b3-nav-link{border-radius:var(--b3-radius-small);min-block-size:2.75rem;color:var(--b3-color-muted);align-items:center;gap:.5rem;padding:.625rem .875rem;text-decoration:none;display:flex}.b3-nav-link[aria-current=page]{background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface));color:var(--b3-color-accent);font-weight:650}.b3-nav-link:hover{background:var(--b3-color-surface);color:var(--b3-color-text)}.b3-breadcrumbs{color:var(--b3-color-muted);flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;font-size:.875rem;list-style:none;display:flex}.b3-breadcrumbs li+li:before{content:"/";color:var(--b3-color-border);margin-inline-end:.5rem}.b3-tablist{border-block-end:1px solid var(--b3-color-border);gap:.25rem;display:flex;overflow-x:auto}.b3-tab{appearance:none;color:var(--b3-color-muted);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-block-end:2px solid #0000;min-block-size:2.75rem;padding:.75rem 1rem}.b3-tab[aria-selected=true]{color:var(--b3-color-accent);border-block-end-color:currentColor;font-weight:650}.b3-tab:disabled{opacity:.5;cursor:not-allowed}.b3-tabpanel{padding-block:var(--b3-space-4)}.b3-accordion{border-block-end:1px solid var(--b3-color-border)}.b3-accordion>summary{cursor:pointer;padding:1rem .25rem;font-weight:650}.b3-accordion>:not(summary){padding:0 .25rem 1rem}.b3-dropdown{display:inline-block;position:relative}.b3-dropdown>summary{list-style:none}.b3-dropdown>summary::-webkit-details-marker{display:none}.b3-dropdown-panel{z-index:20;border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);max-block-size:70svh;inline-size:max-content;min-inline-size:min(12rem,85vw);max-inline-size:min(22rem,85vw);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);padding:.5rem;position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-start:0;overflow-y:auto}.b3-dialog{overscroll-behavior:contain;border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-large);background:var(--b3-color-surface);max-block-size:calc(100svh - 2rem);inline-size:min(32rem,100% - 2rem);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);padding:1.5rem;overflow:auto}.b3-dialog::backdrop{background:#101b17a6}.b3-dialog[data-b3-placement=end]{border-radius:0;block-size:100svh;max-block-size:100svh;inline-size:min(28rem,100%);margin:0;margin-inline-start:auto}@media (prefers-reduced-motion:no-preference){.b3-dialog[open]{animation:.28s cubic-bezier(.16,1,.3,1) b3-dialog-enter}.b3-dialog[open][data-b3-placement=end]{animation-name:b3-drawer-enter}.b3-dialog::backdrop,.b3-sheet::backdrop{transition:opacity .16s ease-out}.b3-dialog[data-b3-closing]::backdrop,.b3-sheet[data-b3-closing]::backdrop{opacity:0}@keyframes b3-dialog-enter{0%{opacity:0;transform:translateY(8px)scale(.96)}}@keyframes b3-drawer-enter{0%{opacity:0;translate:var(--b3-drawer-offset,1rem)}}.b3-dialog[dir=rtl][data-b3-placement=end],[dir=rtl] .b3-dialog[data-b3-placement=end]{--b3-drawer-offset:-1rem}}.b3-tree{border-inline-start:1px solid var(--b3-color-border);padding-inline-start:1rem;list-style:none}.b3-tree summary{cursor:pointer;padding-block:.5rem}.b3-prose{overflow-wrap:anywhere;max-inline-size:65ch;line-height:1.75}.b3-prose :is(p,ul,ol,blockquote,pre){margin-block:1rem}.b3-prose :is(h2,h3,h4){margin-block:1.75rem .75rem;line-height:1.25}.b3-prose blockquote{border-inline-start:3px solid var(--b3-color-accent);color:var(--b3-color-muted);margin-inline:0;padding-inline-start:1rem}.b3-prose pre{background:var(--b3-color-surface);border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-small);padding:1rem;overflow-x:auto}.b3-visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.b3-skip-link{z-index:1000;border-radius:var(--b3-radius-small);background:var(--b3-color-accent);max-inline-size:calc(100% - 1.5rem);color:var(--b3-color-on-accent);padding:.75rem 1rem;font-weight:650;position:fixed;inset-block-start:max(.75rem, env(safe-area-inset-top,0px));inset-inline-start:.75rem}.b3-skip-link:not(:focus){clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;padding:0;overflow:hidden}.b3-hero{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(2rem,6vw,6rem);padding-block:clamp(3rem,8vw,7rem);display:grid}.b3-hero[data-b3-align=center]{text-align:center;grid-template-columns:minmax(0,1fr);justify-items:center}.b3-hero-copy{gap:1.5rem;max-inline-size:40rem;display:grid}.b3-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,5vw,5rem);padding-block:clamp(2rem,6vw,5rem);display:grid}.b3-feature[data-b3-reverse=true]>:first-child{order:2}.b3-feature-icon{border-radius:var(--b3-radius);background:var(--b3-color-accent);block-size:3rem;inline-size:3rem;color:var(--b3-color-on-accent);place-items:center;display:inline-grid}.b3-pricing{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-large);background:var(--b3-color-surface);color:var(--b3-color-text);flex-direction:column;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);display:flex}.b3-pricing[data-b3-featured=true]{border:2px solid var(--b3-color-accent);box-shadow:var(--b3-shadow)}.b3-pricing>.b3-button:last-child{margin-block-start:auto}.b3-price{font-variant-numeric:tabular-nums;align-items:baseline;gap:.375rem;display:flex}.b3-price>strong{letter-spacing:-.05em;font-size:3.25rem;line-height:1.1}.b3-checklist{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.b3-checklist>li{align-items:start;gap:.625rem;display:flex}.b3-checklist>li:before{content:"✓";color:var(--b3-color-accent);font-weight:700}.b3-quote{border-inline-start:3px solid var(--b3-color-accent);margin:0;padding:1.5rem}.b3-quote blockquote{margin:0 0 1rem;font-size:1.25rem;line-height:1.5}.b3-art{isolation:isolate;border-radius:var(--b3-radius-large);background:var(--b3-color-surface);position:relative;overflow:hidden}.b3-art:before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0}.b3-art[data-b3-art=dots]:before{background-image:radial-gradient(var(--b3-color-border) 1px,transparent 1px);background-size:16px 16px}.b3-art[data-b3-art=glow]:before{background:radial-gradient(ellipse at 20% 20%,color-mix(in srgb,var(--b3-color-accent) 20%,transparent),transparent 65%)}.b3-art[data-b3-art=wash]:before{background:linear-gradient(135deg,color-mix(in srgb,var(--b3-color-accent) 14%,transparent),transparent 70%)}@media (width<=48rem){.b3-hero,.b3-feature{grid-template-columns:minmax(0,1fr)}.b3-feature[data-b3-reverse=true]>:first-child{order:initial}}.b3-reading{grid-template-columns:minmax(0,1fr) minmax(12rem,16rem);grid-template-areas:"content outline";align-items:start;gap:clamp(2rem,5vw,5rem);display:grid}.b3-reading>:not(.b3-toc){grid-area:content;min-inline-size:0}.b3-toc{max-block-size:calc(100svh - var(--b3-outline-top,1rem) - 1rem);border-inline-start:1px solid var(--b3-color-border);grid-area:outline;padding-inline-start:1rem;font-size:.875rem;position:sticky;inset-block-start:var(--b3-outline-top,1rem);overflow-y:auto}.b3-toc ol{gap:.25rem;margin:.75rem 0 0;padding:0;list-style:none;display:grid}.b3-toc ol ol{margin:.25rem 0;padding-inline-start:1rem}.b3-toc-link{border-radius:var(--b3-radius-small);color:var(--b3-color-muted);overflow-wrap:anywhere;padding:.625rem .75rem;text-decoration:none;display:block}.b3-toc-link:hover{color:var(--b3-color-text);background:var(--b3-color-surface)}.b3-toc-link[aria-current=location]{color:var(--b3-color-accent);background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface));font-weight:650}@media (width<=48rem){.b3-reading{grid-template-columns:minmax(0,1fr);grid-template-areas:"outline""content";gap:2rem}.b3-toc{max-block-size:none;position:static}}.b3-command{inline-size:min(38rem,100% - 2rem);padding:0}.b3-command-search{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding:1rem;display:flex}.b3-command-search>input{flex:1;min-inline-size:0}.b3-command-list{overscroll-behavior:contain;max-block-size:50svh;padding:.5rem;overflow-y:auto}.b3-command-group+.b3-command-group{border-block-start:1px solid var(--b3-color-border);margin-block-start:.5rem;padding-block-start:.5rem}.b3-command-group>:first-child:not([role=option]){color:var(--b3-color-muted);padding:.5rem .75rem;font-size:.75rem;display:block}.b3-command-item{border-radius:var(--b3-radius-small);cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;min-block-size:2.75rem;padding:.875rem .75rem;display:flex}.b3-command-item>:first-child{overflow-wrap:anywhere;min-inline-size:0}.b3-command-item[aria-selected=true]{background:var(--b3-color-accent);color:var(--b3-color-on-accent)}.b3-command-item[aria-selected=true] .b3-muted{color:inherit}.b3-command-item[aria-disabled=true]{opacity:.5;cursor:not-allowed}.b3-command-item:not([aria-disabled=true]):hover{outline:1px solid var(--b3-color-border);outline-offset:-1px}.b3-form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));align-items:start;gap:1.25rem;display:grid}.b3-fieldset{border:0;min-inline-size:0;margin:0;padding:0}.b3-fieldset>legend{padding:0 0 .75rem;font-weight:650}.b3-help{color:var(--b3-color-muted);font-size:.875rem}.b3-help[data-b3-tone=success]{color:var(--b3-color-success)}.b3-help[data-b3-tone=warning]{color:var(--b3-color-warning)}.b3-input[data-b3-size=small]{padding:.5rem .75rem}.b3-input[data-b3-size=large]{min-block-size:3.25rem;padding:.875rem 1rem}.b3-input[data-b3-emphasis=subtle]{background-color:var(--b3-color-canvas);border-color:#0000}.b3-input[data-b3-emphasis=outline]{background-color:#0000;border-width:2px}.b3-input[data-b3-tone=success]{border-color:var(--b3-color-success)}.b3-input[data-b3-tone=warning]{border-color:var(--b3-color-warning)}.b3-input[aria-invalid=true]{border-color:var(--b3-color-danger)}textarea.b3-input{resize:vertical}select.b3-input[multiple]{min-block-size:8rem}.b3-input[type=file]{padding:.375rem}.b3-input::file-selector-button{font:inherit;border-radius:var(--b3-radius-small);background:var(--b3-color-accent);color:var(--b3-color-on-accent);cursor:pointer;border:0;margin-inline-end:.75rem;padding:.5rem .75rem}.b3-input[type=color]{inline-size:5rem;padding:.25rem}.b3-range{min-block-size:2.75rem;inline-size:100%;accent-color:var(--b3-color-accent);margin:0}.b3-choice-card{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);cursor:pointer;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-choice-card>input{flex:none;block-size:1.125rem;inline-size:1.125rem;margin-block-start:.3rem}.b3-choice-card:has(input:checked){border-color:var(--b3-color-accent);background:color-mix(in srgb, var(--b3-color-accent) 7%, var(--b3-color-surface));box-shadow:inset 0 0 0 1px var(--b3-color-accent)}.b3-choice-card:has(input:focus-visible){outline:3px solid var(--b3-color-focus);outline-offset:3px}.b3-choice-card:has(input:disabled){opacity:.5;cursor:not-allowed}.b3-choice-card:has(input[aria-invalid=true]){border-color:var(--b3-color-danger)}.b3-range[aria-invalid=true]{accent-color:var(--b3-color-danger)}.b3-stepper{flex-wrap:wrap;gap:1rem 2rem;margin:0;padding:0;list-style:none;display:flex}.b3-step{color:var(--b3-color-muted);align-items:center;gap:.625rem;font-size:.875rem;display:flex}.b3-step-marker{border:1px solid var(--b3-color-border);font-variant-numeric:tabular-nums;border-radius:50%;flex:none;place-items:center;block-size:2rem;inline-size:2rem;display:grid}.b3-step[aria-current=step]{color:var(--b3-color-text);font-weight:650}.b3-step[aria-current=step] .b3-step-marker{background:var(--b3-color-accent);color:var(--b3-color-on-accent);border-color:var(--b3-color-accent)}.b3-step[data-b3-complete=true] .b3-step-marker{border-color:var(--b3-color-success);color:var(--b3-color-success)}.b3-conversation{gap:1.5rem;min-inline-size:0;margin:0;padding:0;list-style:none;display:grid}.b3-message{justify-self:start;gap:.375rem;min-inline-size:0;max-inline-size:min(85%,38rem);display:grid}.b3-message[data-b3-side=self]{justify-self:end}.b3-message-body{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);white-space:pre-wrap;overflow-wrap:anywhere;padding:.875rem 1rem}.b3-message[data-b3-side=self]>.b3-message-body{background:var(--b3-color-accent);color:var(--b3-color-on-accent);border-color:#0000}.b3-message-meta{color:var(--b3-color-muted);flex-wrap:wrap;gap:.35rem .75rem;font-size:.8125rem;display:flex}.b3-message[data-b3-side=self]>.b3-message-meta{justify-content:end}.b3-mobile-app{--b3-touch:44px;min-block-size:100svh;max-inline-size:var(--b3-app-width,70rem);margin-inline:auto;padding-block-end:calc(5.5rem + env(safe-area-inset-bottom,0px))}.b3-mobile-app[data-b3-platform=android]{--b3-touch:48px}.b3-mobile-app :where(button,.b3-button,select,input:not([type=checkbox],[type=radio])){min-block-size:var(--b3-touch)}.b3-app-bar{padding:max(.75rem, env(safe-area-inset-top,0px)) 1.25rem .75rem;align-items:center;gap:.75rem;display:flex}.b3-app-bar>:last-child{margin-inline-start:auto}.b3-bottom-nav{z-index:10;max-inline-size:var(--b3-app-width,70rem);padding:.5rem 1rem max(.5rem, env(safe-area-inset-bottom,0px));background:var(--b3-color-surface);color:var(--b3-color-text);border-block-start:1px solid var(--b3-color-border);justify-content:space-around;gap:.5rem;margin-inline:auto;display:flex;position:fixed;inset-block-end:0;inset-inline:0}.b3-bottom-link{min-block-size:var(--b3-touch,44px);min-inline-size:0;color:var(--b3-color-muted);border-radius:1rem;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.15rem;padding:.25rem .5rem;font-size:.75rem;text-decoration:none;display:flex}.b3-bottom-link[aria-current=page]{color:var(--b3-color-accent);font-weight:700}[data-b3-platform=android] .b3-bottom-link[aria-current=page]{background:var(--b3-color-canvas)}.b3-mobile-list{border:1px solid var(--b3-color-border);background:var(--b3-color-surface);border-radius:1rem;margin:0;padding:0;list-style:none;overflow:hidden}.b3-mobile-list>li+li{border-block-start:1px solid var(--b3-color-border)}.b3-mobile-row{min-block-size:var(--b3-touch,44px);color:var(--b3-color-text);align-items:center;gap:1rem;padding:.875rem 1rem;text-decoration:none;display:flex}.b3-mobile-row>:last-child:not(:first-child){margin-inline-start:auto}.b3-sheet{inline-size:min(100%, var(--b3-overlay-width,32rem));max-inline-size:none;max-block-size:min(85dvh, calc(100dvh - env(safe-area-inset-top,0px) - 1rem));overscroll-behavior:contain;border:1px solid var(--b3-color-border);padding:1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom,0px));background:var(--b3-color-surface);color:var(--b3-color-text);border-radius:1.5rem 1.5rem 0 0;margin:0 auto;inset:auto 0 0;overflow-y:auto}.b3-sheet::backdrop{background:#0007}.b3-sheet-handle{min-block-size:44px;inline-size:5rem;color:var(--b3-color-muted);touch-action:none;cursor:grab;background:0 0;border:0;border-radius:1rem;flex:none;align-self:center;place-items:center;margin-block:-1rem -.5rem;padding:0;display:grid}.b3-sheet-handle:before{content:"";background:currentColor;border-radius:1rem;block-size:.25rem;inline-size:2.25rem}.b3-sheet[data-b3-dragging]{animation:none}.b3-sheet[data-b3-dragging] .b3-sheet-handle{cursor:grabbing}[data-b3-platform=android] .b3-mobile-list{border-radius:1.5rem}@media (prefers-reduced-motion:no-preference){.b3-sheet[open]{animation:.32s cubic-bezier(.16,1,.3,1) b3-sheet-enter}@keyframes b3-sheet-enter{0%{opacity:0;transform:translateY(3rem)}to{opacity:1;transform:translateY(0)}}}.b3-root:has(dialog:modal){overflow:hidden}}

package/dist/manifest.json

@@ -1,11 +1,10 @@
 {
-  "version": "0.1.0-alpha.17",
-  "cssSha256": "cee742494c3be5121cbd2fa153f7e9674be7698dc83d286fc66f833a14d52339",
+  "version": "0.1.0-alpha.5",
+  "cssSha256": "acb1f92934dda1d84d65fcd72adaf3fe91d25ac4247c7a6e334ca63046f89def",
   "classes": [
     "b3-accordion",
     "b3-alert",
     "b3-app-bar",
-    "b3-app-frame",
     "b3-app-layout",
     "b3-art",
     "b3-avatar",
@@ -125,7 +124,7 @@
         "b3-scroll",
         "b3-inline"
       ],
-      "guidance": "Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.",
+      "guidance": "Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts.",
       "example": "<main class=\"b3-shell b3-stack\"><header class=\"b3-split\">…</header></main>"
     },
     {
@@ -155,7 +154,7 @@
       "classes": [
         "b3-button"
       ],
-      "guidance": "Use native button for actions, anchor for navigation. data-b3-emphasis=\"quiet\" is a secondary action. Native disabled prevents activation. App owns click behavior. Icon-only actions need an accessible name. Emphasis: primary (default), quiet, outline, danger. Sizes small/default/large retain touch-height floors. aria-busy conveys loading but does not disable clicks; set disabled while duplicate submission must be prevented. SVG icons, including span-wrapped icons, are centered without baseline offsets. Mark decorative icon wrappers aria-hidden=true; direct SVG wrappers retain their width when button text wraps. Keyboard focus uses an inset current-color treatment rather than a detached blue outline; pointer/tap does not add a focus ring.",
+      "guidance": "Use native button for actions, anchor for navigation. data-b3-emphasis=\"quiet\" is a secondary action. Native disabled prevents activation. App owns click behavior. Icon-only actions need an accessible name. Emphasis: primary (default), quiet, outline, danger. Sizes small/default/large retain touch-height floors. aria-busy conveys loading but does not disable clicks; set disabled while duplicate submission must be prevented.",
       "example": "<button class=\"b3-button\" type=\"submit\">Save entry</button>"
     },
     {
@@ -236,7 +235,7 @@
         "b3-spinner",
         "b3-skeleton"
       ],
-      "guidance": "Alert data-b3-tone supports info, success, warning, danger. Include explanatory text; icons/color alone are insufficient. Add role=alert only for urgent dynamic messages. Toast region uses aria-live=polite and toast dismissal data-b3-dismiss with mount(). No automatic timers are imposed. Spinner/skeleton need a separate accessible loading description; decorative shapes use aria-hidden. Reduced motion uses root defaults. Long unbroken message text wraps within alert/toast bounds. For recovery actions, compose native buttons inside a cluster. The app owns alert dismissal, retry state and focus return; removing a focused message should move focus to a surviving meaningful control. The feedback specimen demonstrates retry, dismissal and reset without remote delivery.",
+      "guidance": "Alert data-b3-tone supports info, success, warning, danger. Include explanatory text; icons/color alone are insufficient. Add role=alert only for urgent dynamic messages. Toast region uses aria-live=polite and toast dismissal data-b3-dismiss with mount(). No automatic timers are imposed. Spinner/skeleton need a separate accessible loading description; decorative shapes use aria-hidden. Reduced motion uses root defaults.",
       "example": "<div class=\"b3-alert\" data-b3-tone=\"warning\"><div><strong>Check your input</strong><p>Enter a valid email address.</p></div></div><div class=\"b3-toast-region\" aria-live=\"polite\"><div class=\"b3-toast\"><p>Changes saved.</p><button class=\"b3-button\" data-b3-dismiss>Dismiss</button></div></div>"
     },
     {
@@ -261,7 +260,7 @@
         "b3-stat",
         "b3-stat-value"
       ],
-      "guidance": "Table-wrap provides intentional horizontal scroll. Use native table/caption/th scopes; data-b3-density=compact changes spacing. aria-selected is visual only: app owns selection and sorting. Definition uses direct dl/dt/dd children: label/value columns when roomy, automatically stacked within containers at most 26rem wide. No viewport breakpoint classes are needed. Stat groups label, value and explanation; format numbers in the app.",
+      "guidance": "Table-wrap provides intentional horizontal scroll. Use native table/caption/th scopes; data-b3-density=compact changes spacing. aria-selected is visual only: app owns selection and sorting. Definition uses dl/dt/dd. Stat groups label, value and explanation; format numbers in the app.",
       "example": "<div class=\"b3-table-wrap\"><table class=\"b3-table\"><caption>Invoices</caption><thead><tr><th scope=\"col\">Client</th><th scope=\"col\">Amount</th></tr></thead><tbody><tr><td>Studio North</td><td>$4800</td></tr></tbody></table></div><dl class=\"b3-definition\"><dt>Status</dt><dd>Active</dd></dl>"
     },
     {
@@ -369,7 +368,7 @@
         "b3-range",
         "b3-choice-card"
       ],
-      "guidance": "Group related controls with fieldset/legend; use b3-form-grid for responsive rows. For a compact add/search form, data-b3-layout=inline lets direct b3-field children grow and wrap while direct b3-button actions align to control bottoms. Keep labels and controls inside each field; put shared help/errors after the row and connect them with aria-describedby. Use the default grid when fields include individual multiline help. Choice cards are labels containing a single native radio or checkbox and descriptive text; checked, focus-visible and disabled appearance follow the input. Use b3-help with aria-describedby; success/warning tones require meaningful text and never imply remote validation. Inputs support data-b3-size=small/large, data-b3-emphasis=subtle/outline and data-b3-tone=success/warning. aria-invalid=true always has error-border priority. b3-range styles the native range control; app owns its output. Native file, date, time, color and multi-select preserve browser behavior. File selection does not upload anything. Keep all controls labelled. For validation, link a focused error summary to each invalid field, preserve help references and user input, and clear errors when corrected. App owns validation/persistence; no hidden form submission handler.",
+      "guidance": "Group related controls with fieldset/legend; use b3-form-grid for responsive rows. Choice cards are labels containing a single native radio or checkbox and descriptive text; checked, focus-visible and disabled appearance follow the input. Use b3-help with aria-describedby; success/warning tones require meaningful text and never imply remote validation. Inputs support data-b3-size=small/large, data-b3-emphasis=subtle/outline and data-b3-tone=success/warning. aria-invalid=true always has error-border priority. b3-range styles the native range control; app owns its output. Native file, date, time, color and multi-select preserve browser behavior. File selection does not upload anything. Keep all controls labelled. For validation, link a focused error summary to each invalid field, preserve help references and user input, and clear errors when corrected. App owns validation/persistence; no hidden form submission handler.",
       "example": "<fieldset class=\"b3-fieldset\"><legend>Workspace type</legend><div class=\"b3-form-grid\"><label class=\"b3-choice-card\"><input type=\"radio\" name=\"kind\" value=\"studio\"><span>Studio</span></label><label class=\"b3-choice-card\"><input type=\"radio\" name=\"kind\" value=\"team\"><span>Team</span></label></div></fieldset><div class=\"b3-field\"><label for=\"seats\">Seats</label><input class=\"b3-range\" id=\"seats\" type=\"range\" min=\"2\" max=\"20\" value=\"5\" aria-describedby=\"seats-help\"><p class=\"b3-help\" id=\"seats-help\">Include the owner.</p></div>"
     },
     {
@@ -408,17 +407,8 @@
         "b3-sheet",
         "b3-sheet-handle"
       ],
-      "guidance": "For new apps with persistent navigation, read app-frame.md first: grid owns the navigation height rather than a fixed-padding estimate. Use b3-mobile-app on the app container with data-b3-platform=ios or android. Native anchors carry navigation; app owns URLs/history and aria-current=page. Bottom navigation stays available across primary destinations. Use dialog.b3-sheet with showModal(), a label and explicit cancel; app owns form state and focus restoration. Layout reserves env safe-area insets and targets 44/48 CSS pixels as a starting treatment, not proof of physical platform sizing. Test software keyboard, large text, orientation, real touch and device insets. Never draw fake OS status/gesture bars inside app content. Native runtime and platform fidelity require separate qualification. Default app width supports phone and desktop up to70rem; use intrinsic wrapping grids for content. Set --b3-app-width only for an intentional narrower surface. A platform treatment does not imply a phone-only layout. For a scrollable sheet use dialog.b3-sheet.b3-stack with a direct b3-scroll body and fixed siblings. For optional handle dragging add data-b3-drag=dismiss and button.b3-sheet-handle with data-b3-close and aria-label=\"Close sheet\". mount() handles drag-to-dismiss through the cancel event. Body gestures remain native scrolling. A handle click/keyboard activation also closes. No multiple detents or content-wide drag are implied. The mounted helper gives a labeled sheet heading initial focus unless the app declares an explicit autofocus target; handles remain keyboard reachable. The sheet owns outer padding and the bottom safe area: do not repeat these on its header/body/footer. Keep b3-scroll intrinsic sizing instead of overriding it with flex:1 or a zero flex basis. Sheets fit content up to 85dvh and a 32rem reading width by default; --b3-overlay-width is an explicit width escape hatch for denser content. Use a b3-stack footer for a full-width primary action, and group descriptive row text in a stack rather than competing columns. b3-mobile-app already reserves bottom space for its fixed navigation. Do not add a second matching bottom padding to a child panel. Use b3-app-bar or an explicit comfortable top inset; a safe-area value of zero is not ordinary content spacing.",
+      "guidance": "Use b3-mobile-app on the app container with data-b3-platform=ios or android. Native anchors carry navigation; app owns URLs/history and aria-current=page. Bottom navigation stays available across primary destinations. Use dialog.b3-sheet with showModal(), a label and explicit cancel; app owns form state and focus restoration. Layout reserves env safe-area insets and targets 44/48 CSS pixels as a starting treatment, not proof of physical platform sizing. Test software keyboard, large text, orientation, real touch and device insets. Never draw fake OS status/gesture bars inside app content. Native runtime and platform fidelity require separate qualification. Default app width supports phone and desktop up to70rem; use intrinsic wrapping grids for content. Set --b3-app-width only for an intentional narrower surface. A platform treatment does not imply a phone-only layout. For a scrollable sheet use dialog.b3-sheet.b3-stack with a direct b3-scroll body and fixed siblings. For optional handle dragging add data-b3-drag=dismiss and button.b3-sheet-handle with data-b3-close and aria-label=\"Close sheet\". mount() handles drag-to-dismiss through the cancel event. Body gestures remain native scrolling. A handle click/keyboard activation also closes. No multiple detents or content-wide drag are implied. Sheets fit content up to 85dvh and a 32rem reading width by default; --b3-overlay-width is an explicit width escape hatch for denser content. Use a b3-stack footer for a full-width primary action, and group descriptive row text in a stack rather than competing columns. b3-mobile-app already reserves bottom space for its fixed navigation. Do not add a second matching bottom padding to a child panel. Use b3-app-bar or an explicit comfortable top inset; a safe-area value of zero is not ordinary content spacing.",
       "example": "<div class=\"b3-mobile-app\" data-b3-platform=\"ios\"><header class=\"b3-app-bar\">Today</header><main><ul class=\"b3-mobile-list\"><li><a class=\"b3-mobile-row\" href=\"#detail\">Read a few pages</a></li></ul></main><nav class=\"b3-bottom-nav\" aria-label=\"Main\"><a class=\"b3-bottom-link\" href=\"#today\" aria-current=\"page\">Today</a></nav></div>"
-    },
-    {
-      "id": "app-frame",
-      "title": "Bounded app frame",
-      "classes": [
-        "b3-app-frame"
-      ],
-      "guidance": "Combine b3-mobile-app b3-app-frame with direct header, main, and exactly one bottom region: nav OR a footer containing nav. Never put sibling nav and footer elements in the frame; both occupy its third grid row. Main scrolls; grid reserves the actual navigation height, including large labels. The frame alone owns device insets; its app bar/nav use ordinary padding. Set --b3-frame-height for a bounded embedded preview; otherwise the frame uses 100dvh. Do not add a fixed-nav padding estimate or change its navigation to position:fixed. Put transient undo feedback in a direct footer wrapper and anchor it above that footer, not a guessed bar height. Restore per-route scroll with main.scrollTop, not window.scrollY. Keep the DOM order meaningful and use intrinsic grids inside main for wider screens. Existing b3-mobile-app without this atom retains its original fixed-navigation behavior. The hosting platform owns any external chrome; do not reproduce a host footer or fake OS bars inside the app.",
-      "example": "<div class=\"b3-mobile-app b3-app-frame\" data-b3-platform=\"ios\"><header class=\"b3-app-bar\"><strong>Today</strong><button class=\"b3-button\">New plan</button></header><main class=\"b3-shell b3-stack\" tabindex=\"-1\" aria-label=\"Plans\"><h1 class=\"b3-title\">Make a little progress</h1><div class=\"b3-grid\"><article class=\"b3-surface\">Your first plan</article></div></main><nav class=\"b3-bottom-nav\" aria-label=\"Main\"><a class=\"b3-bottom-link\" href=\"#today\" aria-current=\"page\">Today</a><a class=\"b3-bottom-link\" href=\"#saved\">Saved</a></nav></div>"
     }
   ],
   "references": [
@@ -448,9 +438,8 @@
     "steps.md",
     "conversation.md",
     "mobile.md",
-    "app-frame.md",
-    "cross-screen.md",
     "icons.md",
+    "cross-screen.md",
     "motion.md",
     "start.md"
   ]

package/dist/references/button.md

@@ -1,6 +1,6 @@
 # Action
 
-Use native button for actions, anchor for navigation. data-b3-emphasis="quiet" is a secondary action. Native disabled prevents activation. App owns click behavior. Icon-only actions need an accessible name. Emphasis: primary (default), quiet, outline, danger. Sizes small/default/large retain touch-height floors. aria-busy conveys loading but does not disable clicks; set disabled while duplicate submission must be prevented. SVG icons, including span-wrapped icons, are centered without baseline offsets. Mark decorative icon wrappers aria-hidden=true; direct SVG wrappers retain their width when button text wraps. Keyboard focus uses an inset current-color treatment rather than a detached blue outline; pointer/tap does not add a focus ring.
+Use native button for actions, anchor for navigation. data-b3-emphasis="quiet" is a secondary action. Native disabled prevents activation. App owns click behavior. Icon-only actions need an accessible name. Emphasis: primary (default), quiet, outline, danger. Sizes small/default/large retain touch-height floors. aria-busy conveys loading but does not disable clicks; set disabled while duplicate submission must be prevented.
 
 Classes: b3-button
 

package/dist/references/cross-screen.md

@@ -9,8 +9,7 @@ Choose a semantic composition:
 - Title and actions: `b3-split` separates groups and wraps when necessary.
 - A bounded page: `b3-shell`; set `--b3-content` to the desired content measure.
 - Reading: `b3-prose` bounds paragraphs. A short form should not expand merely because the screen is wide.
-- A bounded app with persistent navigation: `b3-mobile-app b3-app-frame`, with direct `header`, `main`, and `nav` children. Read `app-frame.md`. The main scrolls; grid reserves the real bar height. Do not add fixed-bar padding.
-- An app with legacy fixed bottom navigation: read `mobile.md`. The shell supports wide content; platform styling is independent of viewport width.
+- An app with persistent bottom navigation: read `mobile.md`. The shell supports wide content; platform styling is independent of viewport width.
 
 ```html
 <main class="b3-shell b3-stack">

package/dist/references/data-display.md

@@ -1,6 +1,6 @@
 # Tables, definitions and metrics
 
-Table-wrap provides intentional horizontal scroll. Use native table/caption/th scopes; data-b3-density=compact changes spacing. aria-selected is visual only: app owns selection and sorting. Definition uses direct dl/dt/dd children: label/value columns when roomy, automatically stacked within containers at most 26rem wide. No viewport breakpoint classes are needed. Stat groups label, value and explanation; format numbers in the app.
+Table-wrap provides intentional horizontal scroll. Use native table/caption/th scopes; data-b3-density=compact changes spacing. aria-selected is visual only: app owns selection and sorting. Definition uses dl/dt/dd. Stat groups label, value and explanation; format numbers in the app.
 
 Classes: b3-table-wrap, b3-table, b3-definition, b3-stat, b3-stat-value
 

package/dist/references/feedback.md

@@ -1,6 +1,6 @@
 # Alerts, toast and loading
 
-Alert data-b3-tone supports info, success, warning, danger. Include explanatory text; icons/color alone are insufficient. Add role=alert only for urgent dynamic messages. Toast region uses aria-live=polite and toast dismissal data-b3-dismiss with mount(). No automatic timers are imposed. Spinner/skeleton need a separate accessible loading description; decorative shapes use aria-hidden. Reduced motion uses root defaults. Long unbroken message text wraps within alert/toast bounds. For recovery actions, compose native buttons inside a cluster. The app owns alert dismissal, retry state and focus return; removing a focused message should move focus to a surviving meaningful control. The feedback specimen demonstrates retry, dismissal and reset without remote delivery.
+Alert data-b3-tone supports info, success, warning, danger. Include explanatory text; icons/color alone are insufficient. Add role=alert only for urgent dynamic messages. Toast region uses aria-live=polite and toast dismissal data-b3-dismiss with mount(). No automatic timers are imposed. Spinner/skeleton need a separate accessible loading description; decorative shapes use aria-hidden. Reduced motion uses root defaults.
 
 Classes: b3-alert, b3-toast-region, b3-toast, b3-spinner, b3-skeleton
 

package/dist/references/form-composition.md

@@ -1,6 +1,6 @@
 # Native form composition and input variants
 
-Group related controls with fieldset/legend; use b3-form-grid for responsive rows. For a compact add/search form, data-b3-layout=inline lets direct b3-field children grow and wrap while direct b3-button actions align to control bottoms. Keep labels and controls inside each field; put shared help/errors after the row and connect them with aria-describedby. Use the default grid when fields include individual multiline help. Choice cards are labels containing a single native radio or checkbox and descriptive text; checked, focus-visible and disabled appearance follow the input. Use b3-help with aria-describedby; success/warning tones require meaningful text and never imply remote validation. Inputs support data-b3-size=small/large, data-b3-emphasis=subtle/outline and data-b3-tone=success/warning. aria-invalid=true always has error-border priority. b3-range styles the native range control; app owns its output. Native file, date, time, color and multi-select preserve browser behavior. File selection does not upload anything. Keep all controls labelled. For validation, link a focused error summary to each invalid field, preserve help references and user input, and clear errors when corrected. App owns validation/persistence; no hidden form submission handler.
+Group related controls with fieldset/legend; use b3-form-grid for responsive rows. Choice cards are labels containing a single native radio or checkbox and descriptive text; checked, focus-visible and disabled appearance follow the input. Use b3-help with aria-describedby; success/warning tones require meaningful text and never imply remote validation. Inputs support data-b3-size=small/large, data-b3-emphasis=subtle/outline and data-b3-tone=success/warning. aria-invalid=true always has error-border priority. b3-range styles the native range control; app owns its output. Native file, date, time, color and multi-select preserve browser behavior. File selection does not upload anything. Keep all controls labelled. For validation, link a focused error summary to each invalid field, preserve help references and user input, and clear errors when corrected. App owns validation/persistence; no hidden form submission handler.
 
 Classes: b3-form-grid, b3-fieldset, b3-help, b3-range, b3-choice-card
 

package/dist/references/layout.md

@@ -1,6 +1,6 @@
 # Composition
 
-Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.
+Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts.
 
 Classes: b3-shell, b3-stack, b3-cluster, b3-grid, b3-split, b3-scroll, b3-inline
 

package/dist/references/mobile.md

@@ -1,6 +1,6 @@
 # Mobile app composition
 
-For new apps with persistent navigation, read app-frame.md first: grid owns the navigation height rather than a fixed-padding estimate. Use b3-mobile-app on the app container with data-b3-platform=ios or android. Native anchors carry navigation; app owns URLs/history and aria-current=page. Bottom navigation stays available across primary destinations. Use dialog.b3-sheet with showModal(), a label and explicit cancel; app owns form state and focus restoration. Layout reserves env safe-area insets and targets 44/48 CSS pixels as a starting treatment, not proof of physical platform sizing. Test software keyboard, large text, orientation, real touch and device insets. Never draw fake OS status/gesture bars inside app content. Native runtime and platform fidelity require separate qualification. Default app width supports phone and desktop up to70rem; use intrinsic wrapping grids for content. Set --b3-app-width only for an intentional narrower surface. A platform treatment does not imply a phone-only layout. For a scrollable sheet use dialog.b3-sheet.b3-stack with a direct b3-scroll body and fixed siblings. For optional handle dragging add data-b3-drag=dismiss and button.b3-sheet-handle with data-b3-close and aria-label="Close sheet". mount() handles drag-to-dismiss through the cancel event. Body gestures remain native scrolling. A handle click/keyboard activation also closes. No multiple detents or content-wide drag are implied. The mounted helper gives a labeled sheet heading initial focus unless the app declares an explicit autofocus target; handles remain keyboard reachable. The sheet owns outer padding and the bottom safe area: do not repeat these on its header/body/footer. Keep b3-scroll intrinsic sizing instead of overriding it with flex:1 or a zero flex basis. Sheets fit content up to 85dvh and a 32rem reading width by default; --b3-overlay-width is an explicit width escape hatch for denser content. Use a b3-stack footer for a full-width primary action, and group descriptive row text in a stack rather than competing columns. b3-mobile-app already reserves bottom space for its fixed navigation. Do not add a second matching bottom padding to a child panel. Use b3-app-bar or an explicit comfortable top inset; a safe-area value of zero is not ordinary content spacing.
+Use b3-mobile-app on the app container with data-b3-platform=ios or android. Native anchors carry navigation; app owns URLs/history and aria-current=page. Bottom navigation stays available across primary destinations. Use dialog.b3-sheet with showModal(), a label and explicit cancel; app owns form state and focus restoration. Layout reserves env safe-area insets and targets 44/48 CSS pixels as a starting treatment, not proof of physical platform sizing. Test software keyboard, large text, orientation, real touch and device insets. Never draw fake OS status/gesture bars inside app content. Native runtime and platform fidelity require separate qualification. Default app width supports phone and desktop up to70rem; use intrinsic wrapping grids for content. Set --b3-app-width only for an intentional narrower surface. A platform treatment does not imply a phone-only layout. For a scrollable sheet use dialog.b3-sheet.b3-stack with a direct b3-scroll body and fixed siblings. For optional handle dragging add data-b3-drag=dismiss and button.b3-sheet-handle with data-b3-close and aria-label="Close sheet". mount() handles drag-to-dismiss through the cancel event. Body gestures remain native scrolling. A handle click/keyboard activation also closes. No multiple detents or content-wide drag are implied. Sheets fit content up to 85dvh and a 32rem reading width by default; --b3-overlay-width is an explicit width escape hatch for denser content. Use a b3-stack footer for a full-width primary action, and group descriptive row text in a stack rather than competing columns. b3-mobile-app already reserves bottom space for its fixed navigation. Do not add a second matching bottom padding to a child panel. Use b3-app-bar or an explicit comfortable top inset; a safe-area value of zero is not ordinary content spacing.
 
 Classes: b3-mobile-app, b3-app-bar, b3-bottom-nav, b3-bottom-link, b3-mobile-list, b3-mobile-row, b3-sheet, b3-sheet-handle
 

package/dist/references/start.md

@@ -4,9 +4,9 @@ Start with a complete HTML document, viewport metadata, a meaningful title, and
 
 Default to a clean app that works on phone and desktop. Use intrinsic grids and wrapping before adding breakpoints; read cross-screen.md when composing the page. Read mobile.md only when platform-specific app structure is relevant.
 
-Compose around the task: put useful primary content in the first phone screen. For lists, show rows early, keep counts beside the heading, and use a compact add control or disclosed form. Reserve large metrics for decisions that depend on them. On desktop, use room for useful content or supporting detail; keep short forms bounded. Group with spacing and dividers, adding surfaces when they clarify relationships. Custom CSS owns the app's identity.
+Choose a composition before choosing components. Establish the main task, the dominant visual element, and the supporting information. Use surfaces only when grouping helps. A list can be rows and dividers; a timer can be large type and empty space. Custom CSS is welcome for the app's identity.
 
-Use only documented b3- class names; read type.md for title/heading roles. Read foundation.md for tokens and theme rules; layout.md for flexible composition; field.md for forms and errors; button.md for actions; status.md for progress. Use CSS custom properties with complete values, e.g. `--b3-color-accent: #315b43`. Scope palette overrides to light or dark explicitly; an unconditional unlayered :root color override also overrides the library dark default. Keep foreground/background pairs readable. Override typography, density, shape, and composition to create an identity, rather than recoloring a fixed template.
+Read foundation.md for tokens and theme rules; layout.md for flexible composition; field.md for forms and errors; button.md for actions; status.md for progress. Use CSS custom properties with complete values, e.g. `--b3-color-accent: #315b43`. Scope palette overrides to light or dark explicitly; an unconditional unlayered :root color override also overrides the library dark default. Keep foreground/background pairs readable. Override typography, density, shape, and composition to create an identity, rather than recoloring a fixed template.
 
 Task behavior belongs to the app. Persist user changes, handle reload, use native controls, associate labels, and announce meaningful changes. Never claim a control works because it looks correct. No remote scripts or implicit platform API is available.
 

package/dist/ui.js

@@ -235,56 +235,6 @@ function disclosures({ root, document: document2, options }) {
   }, options);
 }
 
-// src/interactions/dialog-focus.js
-function dialogFocus({ root, document: document2, options }) {
-  const prepared = new Map;
-  const restore = (title) => {
-    const original = prepared.get(title);
-    if (!original)
-      return;
-    for (const [name, value] of Object.entries(original)) {
-      const owned = name === "tabindex" ? "-1" : "";
-      if (title.getAttribute(name) !== owned)
-        continue;
-      if (value === null)
-        title.removeAttribute(name);
-      else
-        title.setAttribute(name, value);
-    }
-    prepared.delete(title);
-  };
-  const prepare = (dialog) => {
-    if (!dialog.matches?.("dialog.b3-sheet"))
-      return;
-    const explicit = [...dialog.querySelectorAll("[autofocus]")].find((node) => !prepared.has(node));
-    if (explicit) {
-      for (const title2 of prepared.keys())
-        if (dialog.contains(title2))
-          restore(title2);
-      return;
-    }
-    const id = dialog.getAttribute("aria-labelledby")?.trim().split(/\s+/)[0];
-    const title = id && document2.getElementById(id);
-    if (!title || !dialog.contains(title) || prepared.has(title))
-      return;
-    prepared.set(title, Object.fromEntries(["tabindex", "autofocus", "data-b3-initial-focus"].map((name) => [name, title.getAttribute(name)])));
-    title.setAttribute("tabindex", "-1");
-    title.setAttribute("autofocus", "");
-    title.setAttribute("data-b3-initial-focus", "");
-  };
-  prepare(root);
-  for (const dialog of root.querySelectorAll("dialog.b3-sheet"))
-    prepare(dialog);
-  root.addEventListener("beforetoggle", (event) => {
-    if (event.newState === "open")
-      prepare(event.target);
-  }, { ...options, capture: true });
-  options.signal.addEventListener("abort", () => {
-    for (const title of prepared.keys())
-      restore(title);
-  }, { once: true });
-}
-
 // src/interactions/motion.js
 var running = new WeakMap;
 var ease = "cubic-bezier(.16,1,.3,1)";
@@ -462,7 +412,6 @@ function sheets({ root, document: document2, options, dismiss }) {
 
 // src/interactions/dialogs.js
 function dialogs({ root, document: document2, find, options }) {
-  dialogFocus({ root, document: document2, options });
   const openers = new WeakMap;
   const closing = new Map;
   let backdropStart = null;
@@ -527,7 +476,7 @@ function dialogs({ root, document: document2, find, options }) {
   root.addEventListener("click", (event) => {
     const end = backdropEnd;
     backdropEnd = null;
-    if (!end || event.target !== end.dialog || !outside(event, end.dialog))
+    if (!end || event.target !== end.dialog || !outside(event, end.dialog) || event.pointerId !== undefined && event.pointerId !== end.pointerId)
       return;
     event.preventDefault();
     event.stopImmediatePropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.17",
+  "version": "0.1.0-alpha.5",
   "type": "module",
   "files": [
     "dist",
@@ -31,7 +31,6 @@
     "daisyui": "5.7.28",
     "lightningcss": "1.33.0",
     "lucide-static": "1.31.0",
-    "pug": "3.0.4",
     "tailwindcss": "4.3.3",
     "typescript": "7.0.2"
   },

package/dist/references/app-frame.md

@@ -1,9 +0,0 @@
-# Bounded app frame
-
-Combine b3-mobile-app b3-app-frame with direct header, main, and exactly one bottom region: nav OR a footer containing nav. Never put sibling nav and footer elements in the frame; both occupy its third grid row. Main scrolls; grid reserves the actual navigation height, including large labels. The frame alone owns device insets; its app bar/nav use ordinary padding. Set --b3-frame-height for a bounded embedded preview; otherwise the frame uses 100dvh. Do not add a fixed-nav padding estimate or change its navigation to position:fixed. Put transient undo feedback in a direct footer wrapper and anchor it above that footer, not a guessed bar height. Restore per-route scroll with main.scrollTop, not window.scrollY. Keep the DOM order meaningful and use intrinsic grids inside main for wider screens. Existing b3-mobile-app without this atom retains its original fixed-navigation behavior. The hosting platform owns any external chrome; do not reproduce a host footer or fake OS bars inside the app.
-
-Classes: b3-app-frame
-
-```html
-<div class="b3-mobile-app b3-app-frame" data-b3-platform="ios"><header class="b3-app-bar"><strong>Today</strong><button class="b3-button">New plan</button></header><main class="b3-shell b3-stack" tabindex="-1" aria-label="Plans"><h1 class="b3-title">Make a little progress</h1><div class="b3-grid"><article class="b3-surface">Your first plan</article></div></main><nav class="b3-bottom-nav" aria-label="Main"><a class="b3-bottom-link" href="#today" aria-current="page">Today</a><a class="b3-bottom-link" href="#saved">Saved</a></nav></div>
-```