@livx.cc/bare-v3 0.1.0-alpha.128 → 0.1.0-alpha.130

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/bare.css CHANGED
@@ -1340,6 +1340,60 @@
1340
1340
  cursor: not-allowed;
1341
1341
  }
1342
1342
 
1343
+ .b3-filter-labels {
1344
+ overscroll-behavior-x: contain;
1345
+ scrollbar-width: none;
1346
+ gap: 18px;
1347
+ display: flex;
1348
+ overflow-x: auto;
1349
+ }
1350
+
1351
+ .b3-filter-labels::-webkit-scrollbar {
1352
+ display: none;
1353
+ }
1354
+
1355
+ .b3-filter-labels > button {
1356
+ block-size: 32px;
1357
+ box-shadow: none;
1358
+ color: var(--b3-color-muted);
1359
+ font: inherit;
1360
+ white-space: nowrap;
1361
+ cursor: pointer;
1362
+ background: none;
1363
+ border: 0;
1364
+ border-radius: 0;
1365
+ flex: none;
1366
+ padding: 0;
1367
+ font-size: 15px;
1368
+ font-weight: 500;
1369
+ }
1370
+
1371
+ .b3-filter-labels > button:hover {
1372
+ color: var(--b3-color-text);
1373
+ }
1374
+
1375
+ .b3-filter-labels > button:is([aria-checked="true"], [aria-pressed="true"]) {
1376
+ color: var(--b3-color-accent);
1377
+ font-weight: 700;
1378
+ }
1379
+
1380
+ .b3-filter-labels > button:focus-visible {
1381
+ box-shadow: none;
1382
+ text-decoration: underline 2px var(--b3-color-accent);
1383
+ text-underline-offset: 5px;
1384
+ outline: none;
1385
+ }
1386
+
1387
+ @media (forced-colors: active) {
1388
+ .b3-filter-labels > button:is([aria-checked="true"], [aria-pressed="true"]) {
1389
+ text-decoration: underline;
1390
+ }
1391
+
1392
+ .b3-filter-labels > button:focus-visible {
1393
+ outline: 1px solid highlight;
1394
+ }
1395
+ }
1396
+
1343
1397
  .b3-accordion {
1344
1398
  border-block-end: 1px solid var(--b3-color-border);
1345
1399
  }
package/dist/bare.min.css CHANGED
@@ -1 +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-tabs,b3-dropdown,b3-dialog,b3-sheet,b3-command){display:contents}:where(b3-reel,b3-toast-region,b3-toc,b3-board,b3-date-picker,b3-image-viewer){display:block}:where(.b3-root) :where(button,input,select,textarea){font:inherit}:where(.b3-root) :where(button:not(:disabled)){color:inherit}:where(.b3-root) :where(h1,h2,h3,h4,h5,h6,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:not([width])){max-inline-size:100%}@media (prefers-reduced-motion:reduce){:where(.b3-root *),:where(.b3-root *):before,:where(.b3-root *):after{transition:none!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)}:where(.b3-root) :where(input[type=checkbox],input[type=radio]){flex-shrink:0}}@layer bare.tokens{.b3-root:where(:not(.b3-root .b3-root)),.b3-root[data-b3-theme=light]{--b3-color-canvas:#f6f5f0;--b3-color-surface:#fff;--b3-color-text:#202923;--b3-color-muted:#59655d;--b3-color-border:#d5dbd3;--b3-color-border-strong:#838d86;--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-border-strong:#74877b;--b3-color-accent:#aadbb8;--b3-color-on-accent:#132b1b;--b3-color-danger:#ffadb1;--b3-color-focus:#9ac4ff}.b3-root:where(:not(.b3-root .b3-root)),.b3-root[data-b3-theme=light]{--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}.b3-root[data-b3-density=compact]{--b3-d-control:2.25rem;--b3-d-control-small:1.875rem;--b3-d-pad-block:.4375rem;--b3-d-pad-inline:.875rem;--b3-d-label:.875rem;--b3-d-heading:1.0625rem;--b3-d-avatar:2.25rem;--b3-d-message-pad:.625rem .875rem;--b3-d-meta:.75rem;--b3-d-gap:1rem;--b3-d-surface-pad:1rem}@media (pointer:fine) and (width>=48rem){.b3-root[data-b3-density=auto]{--b3-d-control:2.25rem;--b3-d-control-small:1.875rem;--b3-d-pad-block:.4375rem;--b3-d-pad-inline:.875rem;--b3-d-label:.875rem;--b3-d-heading:1.0625rem;--b3-d-avatar:2.25rem;--b3-d-message-pad:.625rem .875rem;--b3-d-meta:.75rem;--b3-d-gap:1rem;--b3-d-surface-pad:1rem}}}@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}dialog.b3-stack>.b3-scroll{min-block-size:min(6rem,30dvh)}.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-inline:has(>.b3-badge){flex-wrap:wrap}.b3-inline>.b3-badge{flex-shrink:0}.b3-inline:has(>.b3-badge)>:not(.b3-badge,.b3-icon,svg){flex:1 1 min-content}.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{flex-wrap:wrap;min-block-size:100svh;display:flex;container:b3-app/inline-size}.b3-app-layout>.b3-sidebar{flex:16rem}.b3-app-layout>:not(.b3-sidebar){flex:999 32rem;min-inline-size:0}.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)}@container b3-app (width<48rem){.b3-app-layout>.b3-sidebar{border-inline-end:0;border-block-end:1px solid var(--b3-color-border)}}.b3-reel:has(>.b3-badge){scrollbar-width:none;align-items:center;gap:.5rem;padding-block:.625rem}.b3-reel:has(>.b3-badge)::-webkit-scrollbar{display:none}.b3-reel>.b3-badge{flex:none}.b3-stack>.b3-reel{flex-shrink:0}@supports (animation-timeline:scroll(self inline)){.b3-reel:has(>.b3-badge){mask-image:linear-gradient(to right, #000 calc(100% - var(--b3-reel-fade)), #0000);animation:linear both b3-reel-fade scroll(self inline)}.b3-reel:has(>.b3-badge):dir(rtl){mask-image:linear-gradient(to left, #000 calc(100% - var(--b3-reel-fade)), #0000)}@keyframes b3-reel-fade{90%{--b3-reel-fade:2.5rem}to{--b3-reel-fade:0rem}}}}@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;overflow-wrap:anywhere;font-size:1.375rem;font-weight:650;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:where(:not([type=checkbox],[type=radio])){border:1px solid var(--b3-color-border-strong);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}}:where(ul,ol):has(>.b3-row){margin:0;padding-inline-start:0}.b3-row{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding-block:1rem;display:flex}.b3-row:where(.b3-stack){align-items:stretch;gap:var(--b3-space)}:is(a,button,[role=button]).b3-row{padding-inline:var(--b3-space-4);color:inherit;text-align:start;cursor:pointer;transition:background-color var(--b3-duration);text-decoration:none}button.b3-row{appearance:none;border:0;border-block-end:1px solid var(--b3-color-border);background:0 0;inline-size:100%}@media (hover:hover){:is(a,button,[role=button]).b3-row:hover{background:color-mix(in srgb, var(--b3-color-text) 4%, transparent)}}:is(a,button,[role=button]).b3-row:focus-visible{background:color-mix(in srgb, var(--b3-color-text) 4%, transparent)}:is(a,button,[role=button]).b3-row:active{background:color-mix(in srgb, var(--b3-color-text) 8%, transparent)}.b3-clamp{-webkit-line-clamp:var(--b3-clamp,2);line-clamp:var(--b3-clamp,2);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.b3-count{box-sizing:border-box;background:var(--b3-color-danger);block-size:1.25rem;min-inline-size:1.25rem;color:var(--b3-color-canvas);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:100vmax;flex:none;place-items:center;padding-inline:.3125rem;font-size:.6875rem;font-weight:700;line-height:1;display:inline-grid}.b3-count[data-b3-tone=accent]{background:var(--b3-color-accent);color:var(--b3-color-on-accent)}.b3-nav-link>.b3-count{margin-inline-start:auto}.b3-bottom-link{position:relative}.b3-bottom-link:has(>.b3-count){min-inline-size:max(var(--b3-touch,44px), 2.25rem)}.b3-bottom-link>.b3-count{box-shadow:0 0 0 2px var(--b3-color-surface);position:absolute;inset-block-start:.125rem;inset-inline-end:max(.125rem,50% - 2rem)}:is(a,button,[role=button]).b3-row:is([aria-current]:not([aria-current=false]),[aria-selected=true]){background:color-mix(in srgb, var(--b3-color-accent) 12%, transparent)}@media (forced-colors:active){:is(a,button,[role=button]).b3-row{border-inline-start:3px solid canvas}:is(a,button,[role=button]).b3-row:is([aria-current]:not([aria-current=false]),[aria-selected=true]){border-inline-start-color:highlight}}.b3-badge{overflow-wrap:anywhere;border:1px solid var(--b3-color-border);border-radius:100vmax;align-items:center;inline-size:fit-content;max-inline-size:100%;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=ghost]:not(:disabled):active{color:var(--b3-color-text)}.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}[data-b3-confirm][data-b3-armed]{outline:2px solid var(--b3-color-danger)!important;outline-offset:2px!important}.b3-button[data-b3-armed]{background:var(--b3-color-danger);color:var(--b3-color-canvas);border-color:var(--b3-color-danger)}.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-strong);border-radius:var(--b3-radius);background:var(--b3-color-canvas);flex-wrap:wrap;align-items:stretch;min-inline-size:0;display:flex;overflow:clip}.b3-input-group>.b3-input{border:0;border-radius:0;flex:12ch}.b3-input-group>.b3-button{overflow-wrap:anywhere;flex-wrap:wrap;min-inline-size:0;max-inline-size:100%;margin-inline-start:auto;padding-inline:.75rem}.b3-input-group:focus-within{outline:none;box-shadow:inset 0 0 0 2px}.b3-input-affix{overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%;color:var(--b3-color-muted);background:var(--b3-color-canvas);align-items:center;padding-inline:.75rem;display:flex}.b3-choice{cursor:pointer;flex-wrap:wrap;align-items:start;gap:.75rem;padding-block:.5rem;display:flex}.b3-choice>:not(input){overflow-wrap:anywhere;flex:12ch;min-inline-size:0}.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}@media (forced-colors:active){.b3-switch{forced-color-adjust:none;background:canvas;border-color:buttontext}.b3-switch:before{background:buttontext}.b3-switch:checked{background:highlight;border-color:highlight}.b3-switch:checked:before{background:highlighttext}.b3-switch:disabled{opacity:1;background:canvas;border-color:graytext}.b3-switch:disabled:before{background:graytext}}.b3-input[type=number]{appearance:textfield}.b3-input[type=number]::-webkit-inner-spin-button,.b3-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.b3-input::-webkit-datetime-edit,.b3-input::-webkit-datetime-edit-fields-wrapper{padding-block:0}.b3-input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]){appearance:none;max-inline-size:100%;display:block}.b3-input::-webkit-date-and-time-value{text-align:start;min-block-size:1lh}.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-stack>:is(.b3-card-header,.b3-card-footer){margin-block:0}.b3-surface[data-b3-elevation=raised]{box-shadow:var(--b3-shadow)}.b3-divider{border:0;border-block-start:1px solid var(--b3-color-border);inline-size:100%;margin-inline:0;margin-block:var(--b3-space)}.b3-stack>.b3-divider{margin-block:0}.b3-alert,.b3-toast{overflow-wrap:anywhere;min-inline-size:0}.b3-alert>*,.b3-toast>*{min-inline-size:0}.b3-alert pre{max-inline-size:100%;overflow-x:auto}.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;inline-size:min(24rem,100% - 2rem);max-block-size:calc(100dvh - 2rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overscroll-behavior:contain;pointer-events:none;gap:.75rem;display:grid;position:fixed;inset-block-end:calc(1rem + env(safe-area-inset-bottom,0px));inset-inline-end:1rem;overflow-y:auto}.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;flex-wrap:wrap;align-items:start;gap:1rem;padding:1rem;display:flex}.b3-toast>:not(button,.b3-button){flex:12rem}.b3-toast>:is(button,.b3-button){flex:none;max-inline-size:100%}.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}}:is(button,a).b3-badge{min-block-size:auto;color:var(--b3-color-text);cursor:pointer;background:0 0;gap:.25rem;text-decoration:none;position:relative}:is(button,a).b3-badge:after{content:"";position:absolute;inset:-10px 0}:is(button,a).b3-badge[data-b3-tone]{color:var(--b3-status-color,var(--b3-color-info))}:is(button,a).b3-badge:is([aria-pressed=true],[aria-current]:not([aria-current=false])){color:var(--b3-color-on-accent);background:var(--b3-color-accent);border-color:var(--b3-color-accent)}.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[data-b3-unread]{position:relative;overflow:visible}.b3-avatar[data-b3-unread]>img{border-radius:inherit}.b3-avatar[data-b3-unread]:after{content:"";background:var(--b3-color-accent);block-size:.75rem;inline-size:.75rem;box-shadow:0 0 0 2px var(--b3-color-surface);border-radius:50%;position:absolute;inset-block-start:-.0625rem;inset-inline-end:-.0625rem}.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);position:relative;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{grid-template-columns:minmax(0,1fr);gap:.5rem;display:grid}.b3-stat-value{overflow-wrap:anywhere;letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,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 min(.75rem,3%);display:flex}.b3-nav[data-b3-orientation=vertical]{border-block-end:0;flex-direction:column;align-items:stretch}.b3-nav-link{overflow-wrap:anywhere;border-radius:var(--b3-radius-small);min-block-size:2.75rem;min-inline-size:0;max-inline-size:100%;color:var(--b3-color-muted);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.625rem min(.875rem,4%);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:normal;overflow-wrap:anywhere;cursor:pointer;background:0 0;border:0;border-block-end:2px solid #0000;flex-shrink:0;min-block-size:2.75rem;max-inline-size:100%;padding:.75rem min(1rem,4vi)}.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-segmented{border-radius:var(--b3-radius);background:color-mix(in srgb, var(--b3-color-text) 7%, var(--b3-color-canvas));border:0;flex-wrap:wrap;gap:.25rem;min-inline-size:0;margin:0;padding:.25rem;display:flex}.b3-segmented>label{border-radius:calc(var(--b3-radius) - .25rem);min-block-size:2.75rem;max-inline-size:100%;color:var(--b3-color-muted);text-align:center;cursor:pointer;flex:1 0 auto;justify-content:center;align-items:center;gap:.375rem;padding-inline:.875rem;font-weight:600;display:inline-flex;position:relative}.b3-segmented>label>input{opacity:0;block-size:100%;inline-size:100%;cursor:inherit;margin:0;position:absolute;inset:0}.b3-segmented>label:has(input:checked){background:var(--b3-color-surface);color:var(--b3-color-text);box-shadow:0 1px 2px #0000001f, 0 0 0 1px var(--b3-color-border)}.b3-segmented>label:has(input:focus-visible){box-shadow:inset 0 0 0 2px}@media (forced-colors:active){.b3-segmented>label{border:2px solid canvas}.b3-segmented>label:has(input:checked){border-color:canvastext}.b3-segmented>label:has(input:focus-visible){outline-offset:1px;outline:2px solid highlight}}.b3-segmented>label:has(input:disabled){opacity:.5;cursor:not-allowed}.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:min(1.5rem,5vi);overflow:auto;container:b3-dialog/inline-size}.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%);max-inline-size: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-dialog>form{gap:var(--b3-space);flex-direction:column;margin:0;display:flex}.b3-dialog>form>header:has(>button:last-child){grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.75rem;display:grid}.b3-dialog>form>header:has(>button:last-child)>:not(:last-child){grid-column:1;min-inline-size:0}.b3-dialog>form>header>button:last-child:not(:first-child){grid-area:1/2}.b3-dialog>form>footer{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.b3-dialog>form>footer>[data-b3-emphasis=quiet]:first-child:not(:last-child){margin-inline-end:auto}@container b3-dialog (width<=16rem){.b3-dialog>form>header:has(>button:last-child){flex-direction:column;align-items:flex-start;display:flex}}.b3-tree,.b3-tree ul{overflow-wrap:anywhere;border-inline-start:1px solid var(--b3-color-border);padding-inline-start:min(1rem,5%);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(h1,h2,h3,h4,h5,h6){margin-block:1.75rem .75rem;line-height:1.25}.b3-prose :is(h5,h6){font-size:1em}.b3-prose>:first-child{margin-block-start:0}.b3-prose :is(img,video,iframe){max-inline-size:100%;display:block}.b3-prose :is(img,video){block-size:auto}.b3-prose iframe{border:0}.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;flex-wrap:wrap;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:min(1rem,5%);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:min(1rem,5%)}.b3-toc-link{border-radius:var(--b3-radius-small);color:var(--b3-color-muted);overflow-wrap:anywhere;padding:.625rem min(.75rem,5%);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[open]:has(>.b3-scroll){grid-template-rows:auto minmax(0,1fr);display:grid}.b3-command>.b3-scroll>.b3-command-list{max-block-size:none;overflow:visible}.b3-command-search{border-block-end:1px solid var(--b3-color-border);flex-wrap:wrap;justify-content:end;align-items:center;gap:.75rem;padding:min(1rem,4vw);display:flex}.b3-command-search>input{flex:12ch;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:min(1rem,2vw);min-block-size:2.75rem;padding:min(.875rem,2svh) min(.75rem,3vw);display:flex}.b3-command .b3-command-item{border-radius:max(0px, calc(var(--b3-radius-large) - .5rem - 1px))}.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,.b3-error{overflow-wrap:anywhere}.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:where(:not([type=checkbox],[type=radio]))[data-b3-size=small]{padding:.5rem .75rem}.b3-input:where(:not([type=checkbox],[type=radio]))[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:max(0px, calc(var(--b3-radius) - .375rem - 1px));background:var(--b3-color-accent);color:var(--b3-color-on-accent);cursor:pointer;border:0;margin-inline-end:.75rem;padding:.5rem .75rem}.b3-input[data-b3-emphasis=outline]::file-selector-button{border-radius:max(0px, calc(var(--b3-radius) - .375rem - 2px))}.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;flex-wrap:wrap;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-choice-card>:not(input){overflow-wrap:anywhere;flex:12ch;min-inline-size:0}.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{grid-template-columns:minmax(0,1fr);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:.75rem 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-conversation{align-content:start}.b3-message-body:has(>:is(div,p,ul,ol,table,pre,blockquote,b3-markdown-stream)){white-space:normal}.b3-composer{align-items:end;gap:var(--b3-space-2);padding:var(--b3-space-3);border-block-start:1px solid var(--b3-color-border);background:var(--b3-color-canvas);flex-wrap:wrap;display:flex}.b3-composer>.b3-input,.b3-composer>.b3-button{border-radius:var(--b3-radius);min-block-size:var(--b3-d-control,2.75rem)}.b3-composer>.b3-input{resize:none;min-inline-size:0;max-inline-size:100%;padding-block:calc((var(--b3-d-control,2.75rem) - 1.5em - 2px) / 2);flex:12ch;line-height:1.5}.b3-composer>.b3-button{block-size:var(--b3-d-control,2.75rem);min-inline-size:var(--b3-d-control,2.75rem);flex-shrink:0;margin-inline-start:auto}.b3-message-body :where(p,ul,ol,pre,table,blockquote,h1,h2,h3,h4,h5,h6,div,figure):first-child{margin-block-start:0}.b3-message-body :where(p,ul,ol,pre,table,blockquote,h1,h2,h3,h4,h5,h6,div,figure):last-child{margin-block-end:0}.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 clamp(.5rem, 2vw, 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);flex-wrap:wrap;justify-content:space-around;gap:.125rem;margin-inline:auto;display:flex;position:fixed;inset-block-end:0;inset-inline:0}.b3-bottom-link{appearance:none;cursor:pointer;overflow-wrap:anywhere;text-align:center;flex:1 1 max-content;min-block-size:var(--b3-touch,44px);min-inline-size:var(--b3-touch,44px);max-inline-size:100%;color:var(--b3-color-muted);background:0 0;border:0;border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;padding:.25rem clamp(.125rem,1vw,.5rem);font-size:.75rem;text-decoration:none;display:flex}.b3-bottom-link:disabled{opacity:.5;cursor:not-allowed}.b3-bottom-link:has(svg){justify-content:flex-start}.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 min(1.5rem, 5vi) 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{box-shadow:none;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-bottom-link[aria-current=page]{background:color-mix(in srgb, var(--b3-color-accent) 12%, transparent)}.b3-bottom-link :where(svg:not([width])){flex:none;block-size:1.375rem;inline-size:1.375rem}.b3-bottom-link>:where(span,strong):not(.b3-count){white-space:normal;overflow-wrap:anywhere;max-inline-size:100%;overflow:visible}:has(>.b3-bottom-link:nth-of-type(5))>.b3-bottom-link{padding-inline:.125rem;font-size:.6875rem}.b3-app-frame{inline-size:100%;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-area:2/1;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-toast-region{overscroll-behavior:contain;grid-area:2/1;place-self:end;min-block-size:0;max-block-size:calc(100% - 2rem);margin:1rem;position:relative;inset:auto;overflow-y:auto}.b3-app-frame>.b3-app-bar{padding-block-start:.75rem}.b3-app-frame:has(>.b3-bottom-nav,>footer .b3-bottom-nav){padding-block-end:0}.b3-app-frame .b3-bottom-nav{inline-size:100%;max-inline-size:none;padding-block-end:max(.5rem, env(safe-area-inset-bottom,0px));position:static}:where(.b3-root[data-b3-density]) .b3-button{min-block-size:var(--b3-d-control,2.75rem);padding:var(--b3-d-pad-block,.625rem) var(--b3-d-pad-inline,1rem);font-size:var(--b3-d-label,inherit)}:where(.b3-root[data-b3-density]) .b3-button[data-b3-size=small]{min-block-size:var(--b3-d-control-small,auto);padding:calc(var(--b3-d-pad-block,.5rem) - .125rem) calc(var(--b3-d-pad-inline,.75rem) - .25rem)}:where(.b3-root[data-b3-density]) .b3-input:where(:not([type=checkbox],[type=radio])){min-block-size:var(--b3-d-control,2.75rem);padding:calc((var(--b3-d-control,2.75rem) - 1.5em - 2px) / 2) .75rem;line-height:1.5}:where(.b3-root[data-b3-density]) .b3-nav-link{min-block-size:var(--b3-d-control,2.75rem);padding:var(--b3-d-pad-block,.625rem) min(var(--b3-d-pad-inline,.875rem), 4%);font-size:var(--b3-d-label,inherit)}:where(.b3-root[data-b3-density]) .b3-heading{font-size:var(--b3-d-heading,1.375rem)}:where(.b3-root[data-b3-density]) .b3-avatar{block-size:var(--b3-d-avatar,2.5rem);inline-size:var(--b3-d-avatar,2.5rem)}:where(.b3-root[data-b3-density]) .b3-conversation{gap:var(--b3-d-gap,1.5rem)}:where(.b3-root[data-b3-density]) .b3-message-body{padding:var(--b3-d-message-pad,.75rem 1rem)}:where(.b3-root[data-b3-density]) .b3-message-meta{font-size:var(--b3-d-meta,.8125rem)}.b3-button[data-b3-emphasis=ghost]{color:var(--b3-color-muted);background:0 0;border-color:#0000}.b3-button[data-b3-emphasis=ghost]:not(:disabled):hover{color:var(--b3-color-text)}.b3-button[data-b3-emphasis=ghost][aria-pressed=true]{color:var(--b3-color-accent)}.b3-button[data-b3-icon]{min-inline-size:var(--b3-d-control,2.75rem);padding-inline:0}:where(.b3-root[data-b3-density]) .b3-button[data-b3-icon][data-b3-size=small]{min-inline-size:var(--b3-d-control-small,2.25rem)}.b3-button:disabled{opacity:1;background:color-mix(in srgb, var(--b3-color-muted) 14%, var(--b3-color-surface));color:var(--b3-color-muted);border-color:#0000}.b3-button[data-b3-emphasis=ghost]:disabled{background:0 0}.b3-truncate{white-space:nowrap;text-overflow:ellipsis;min-inline-size:0;overflow:hidden}.b3-strong{font-size:inherit;font-weight:650}.b3-caption{color:var(--b3-color-muted);font-size:.8125rem;line-height:1.4}.b3-heading[data-b3-size=small]{font-size:1.0625rem;line-height:1.3}:is(a,button).b3-caption{color:var(--b3-color-accent);cursor:pointer;text-underline-offset:.15em;background:0 0;border:0;padding:0}:is(a,button).b3-caption:is(:hover,:focus-visible){text-decoration:underline}:where(.b3-root[data-b3-density]) .b3-caption{font-size:var(--b3-d-meta,.8125rem)}.b3-badge{gap:.25rem}:where(.b3-root[data-b3-density]) .b3-surface{padding:var(--b3-d-surface-pad,clamp(1rem, 3vw, 2rem))}.b3-input-group,.b3-input-group>.b3-input-affix,.b3-input-group>.b3-input{background:var(--b3-color-surface)}.b3-root[data-b3-theme=dark] .b3-message[data-b3-side=self]>.b3-message-body{background:color-mix(in srgb, var(--b3-color-accent) 22%, var(--b3-color-surface));color:var(--b3-color-text)}.b3-empty{justify-items:center;gap:var(--b3-space-2);padding:var(--b3-space-12) var(--b3-space-4);text-align:center;color:var(--b3-color-muted);display:grid}.b3-empty>svg{color:var(--b3-color-muted)}}@property --b3-reel-fade{syntax:"<length>";inherits:false;initial-value:2.5rem}
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-tabs,b3-dropdown,b3-dialog,b3-sheet,b3-command){display:contents}:where(b3-reel,b3-toast-region,b3-toc,b3-board,b3-date-picker,b3-image-viewer){display:block}:where(.b3-root) :where(button,input,select,textarea){font:inherit}:where(.b3-root) :where(button:not(:disabled)){color:inherit}:where(.b3-root) :where(h1,h2,h3,h4,h5,h6,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:not([width])){max-inline-size:100%}@media (prefers-reduced-motion:reduce){:where(.b3-root *),:where(.b3-root *):before,:where(.b3-root *):after{transition:none!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)}:where(.b3-root) :where(input[type=checkbox],input[type=radio]){flex-shrink:0}}@layer bare.tokens{.b3-root:where(:not(.b3-root .b3-root)),.b3-root[data-b3-theme=light]{--b3-color-canvas:#f6f5f0;--b3-color-surface:#fff;--b3-color-text:#202923;--b3-color-muted:#59655d;--b3-color-border:#d5dbd3;--b3-color-border-strong:#838d86;--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-border-strong:#74877b;--b3-color-accent:#aadbb8;--b3-color-on-accent:#132b1b;--b3-color-danger:#ffadb1;--b3-color-focus:#9ac4ff}.b3-root:where(:not(.b3-root .b3-root)),.b3-root[data-b3-theme=light]{--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}.b3-root[data-b3-density=compact]{--b3-d-control:2.25rem;--b3-d-control-small:1.875rem;--b3-d-pad-block:.4375rem;--b3-d-pad-inline:.875rem;--b3-d-label:.875rem;--b3-d-heading:1.0625rem;--b3-d-avatar:2.25rem;--b3-d-message-pad:.625rem .875rem;--b3-d-meta:.75rem;--b3-d-gap:1rem;--b3-d-surface-pad:1rem}@media (pointer:fine) and (width>=48rem){.b3-root[data-b3-density=auto]{--b3-d-control:2.25rem;--b3-d-control-small:1.875rem;--b3-d-pad-block:.4375rem;--b3-d-pad-inline:.875rem;--b3-d-label:.875rem;--b3-d-heading:1.0625rem;--b3-d-avatar:2.25rem;--b3-d-message-pad:.625rem .875rem;--b3-d-meta:.75rem;--b3-d-gap:1rem;--b3-d-surface-pad:1rem}}}@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}dialog.b3-stack>.b3-scroll{min-block-size:min(6rem,30dvh)}.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-inline:has(>.b3-badge){flex-wrap:wrap}.b3-inline>.b3-badge{flex-shrink:0}.b3-inline:has(>.b3-badge)>:not(.b3-badge,.b3-icon,svg){flex:1 1 min-content}.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{flex-wrap:wrap;min-block-size:100svh;display:flex;container:b3-app/inline-size}.b3-app-layout>.b3-sidebar{flex:16rem}.b3-app-layout>:not(.b3-sidebar){flex:999 32rem;min-inline-size:0}.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)}@container b3-app (width<48rem){.b3-app-layout>.b3-sidebar{border-inline-end:0;border-block-end:1px solid var(--b3-color-border)}}.b3-reel:has(>.b3-badge){scrollbar-width:none;align-items:center;gap:.5rem;padding-block:.625rem}.b3-reel:has(>.b3-badge)::-webkit-scrollbar{display:none}.b3-reel>.b3-badge{flex:none}.b3-stack>.b3-reel{flex-shrink:0}@supports (animation-timeline:scroll(self inline)){.b3-reel:has(>.b3-badge){mask-image:linear-gradient(to right, #000 calc(100% - var(--b3-reel-fade)), #0000);animation:linear both b3-reel-fade scroll(self inline)}.b3-reel:has(>.b3-badge):dir(rtl){mask-image:linear-gradient(to left, #000 calc(100% - var(--b3-reel-fade)), #0000)}@keyframes b3-reel-fade{90%{--b3-reel-fade:2.5rem}to{--b3-reel-fade:0rem}}}}@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;overflow-wrap:anywhere;font-size:1.375rem;font-weight:650;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:where(:not([type=checkbox],[type=radio])){border:1px solid var(--b3-color-border-strong);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}}:where(ul,ol):has(>.b3-row){margin:0;padding-inline-start:0}.b3-row{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding-block:1rem;display:flex}.b3-row:where(.b3-stack){align-items:stretch;gap:var(--b3-space)}:is(a,button,[role=button]).b3-row{padding-inline:var(--b3-space-4);color:inherit;text-align:start;cursor:pointer;transition:background-color var(--b3-duration);text-decoration:none}button.b3-row{appearance:none;border:0;border-block-end:1px solid var(--b3-color-border);background:0 0;inline-size:100%}@media (hover:hover){:is(a,button,[role=button]).b3-row:hover{background:color-mix(in srgb, var(--b3-color-text) 4%, transparent)}}:is(a,button,[role=button]).b3-row:focus-visible{background:color-mix(in srgb, var(--b3-color-text) 4%, transparent)}:is(a,button,[role=button]).b3-row:active{background:color-mix(in srgb, var(--b3-color-text) 8%, transparent)}.b3-clamp{-webkit-line-clamp:var(--b3-clamp,2);line-clamp:var(--b3-clamp,2);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.b3-count{box-sizing:border-box;background:var(--b3-color-danger);block-size:1.25rem;min-inline-size:1.25rem;color:var(--b3-color-canvas);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:100vmax;flex:none;place-items:center;padding-inline:.3125rem;font-size:.6875rem;font-weight:700;line-height:1;display:inline-grid}.b3-count[data-b3-tone=accent]{background:var(--b3-color-accent);color:var(--b3-color-on-accent)}.b3-nav-link>.b3-count{margin-inline-start:auto}.b3-bottom-link{position:relative}.b3-bottom-link:has(>.b3-count){min-inline-size:max(var(--b3-touch,44px), 2.25rem)}.b3-bottom-link>.b3-count{box-shadow:0 0 0 2px var(--b3-color-surface);position:absolute;inset-block-start:.125rem;inset-inline-end:max(.125rem,50% - 2rem)}:is(a,button,[role=button]).b3-row:is([aria-current]:not([aria-current=false]),[aria-selected=true]){background:color-mix(in srgb, var(--b3-color-accent) 12%, transparent)}@media (forced-colors:active){:is(a,button,[role=button]).b3-row{border-inline-start:3px solid canvas}:is(a,button,[role=button]).b3-row:is([aria-current]:not([aria-current=false]),[aria-selected=true]){border-inline-start-color:highlight}}.b3-badge{overflow-wrap:anywhere;border:1px solid var(--b3-color-border);border-radius:100vmax;align-items:center;inline-size:fit-content;max-inline-size:100%;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=ghost]:not(:disabled):active{color:var(--b3-color-text)}.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}[data-b3-confirm][data-b3-armed]{outline:2px solid var(--b3-color-danger)!important;outline-offset:2px!important}.b3-button[data-b3-armed]{background:var(--b3-color-danger);color:var(--b3-color-canvas);border-color:var(--b3-color-danger)}.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-strong);border-radius:var(--b3-radius);background:var(--b3-color-canvas);flex-wrap:wrap;align-items:stretch;min-inline-size:0;display:flex;overflow:clip}.b3-input-group>.b3-input{border:0;border-radius:0;flex:12ch}.b3-input-group>.b3-button{overflow-wrap:anywhere;flex-wrap:wrap;min-inline-size:0;max-inline-size:100%;margin-inline-start:auto;padding-inline:.75rem}.b3-input-group:focus-within{outline:none;box-shadow:inset 0 0 0 2px}.b3-input-affix{overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%;color:var(--b3-color-muted);background:var(--b3-color-canvas);align-items:center;padding-inline:.75rem;display:flex}.b3-choice{cursor:pointer;flex-wrap:wrap;align-items:start;gap:.75rem;padding-block:.5rem;display:flex}.b3-choice>:not(input){overflow-wrap:anywhere;flex:12ch;min-inline-size:0}.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}@media (forced-colors:active){.b3-switch{forced-color-adjust:none;background:canvas;border-color:buttontext}.b3-switch:before{background:buttontext}.b3-switch:checked{background:highlight;border-color:highlight}.b3-switch:checked:before{background:highlighttext}.b3-switch:disabled{opacity:1;background:canvas;border-color:graytext}.b3-switch:disabled:before{background:graytext}}.b3-input[type=number]{appearance:textfield}.b3-input[type=number]::-webkit-inner-spin-button,.b3-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.b3-input::-webkit-datetime-edit,.b3-input::-webkit-datetime-edit-fields-wrapper{padding-block:0}.b3-input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]){appearance:none;max-inline-size:100%;display:block}.b3-input::-webkit-date-and-time-value{text-align:start;min-block-size:1lh}.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-stack>:is(.b3-card-header,.b3-card-footer){margin-block:0}.b3-surface[data-b3-elevation=raised]{box-shadow:var(--b3-shadow)}.b3-divider{border:0;border-block-start:1px solid var(--b3-color-border);inline-size:100%;margin-inline:0;margin-block:var(--b3-space)}.b3-stack>.b3-divider{margin-block:0}.b3-alert,.b3-toast{overflow-wrap:anywhere;min-inline-size:0}.b3-alert>*,.b3-toast>*{min-inline-size:0}.b3-alert pre{max-inline-size:100%;overflow-x:auto}.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;inline-size:min(24rem,100% - 2rem);max-block-size:calc(100dvh - 2rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overscroll-behavior:contain;pointer-events:none;gap:.75rem;display:grid;position:fixed;inset-block-end:calc(1rem + env(safe-area-inset-bottom,0px));inset-inline-end:1rem;overflow-y:auto}.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;flex-wrap:wrap;align-items:start;gap:1rem;padding:1rem;display:flex}.b3-toast>:not(button,.b3-button){flex:12rem}.b3-toast>:is(button,.b3-button){flex:none;max-inline-size:100%}.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}}:is(button,a).b3-badge{min-block-size:auto;color:var(--b3-color-text);cursor:pointer;background:0 0;gap:.25rem;text-decoration:none;position:relative}:is(button,a).b3-badge:after{content:"";position:absolute;inset:-10px 0}:is(button,a).b3-badge[data-b3-tone]{color:var(--b3-status-color,var(--b3-color-info))}:is(button,a).b3-badge:is([aria-pressed=true],[aria-current]:not([aria-current=false])){color:var(--b3-color-on-accent);background:var(--b3-color-accent);border-color:var(--b3-color-accent)}.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[data-b3-unread]{position:relative;overflow:visible}.b3-avatar[data-b3-unread]>img{border-radius:inherit}.b3-avatar[data-b3-unread]:after{content:"";background:var(--b3-color-accent);block-size:.75rem;inline-size:.75rem;box-shadow:0 0 0 2px var(--b3-color-surface);border-radius:50%;position:absolute;inset-block-start:-.0625rem;inset-inline-end:-.0625rem}.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);position:relative;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{grid-template-columns:minmax(0,1fr);gap:.5rem;display:grid}.b3-stat-value{overflow-wrap:anywhere;letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,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 min(.75rem,3%);display:flex}.b3-nav[data-b3-orientation=vertical]{border-block-end:0;flex-direction:column;align-items:stretch}.b3-nav-link{overflow-wrap:anywhere;border-radius:var(--b3-radius-small);min-block-size:2.75rem;min-inline-size:0;max-inline-size:100%;color:var(--b3-color-muted);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.625rem min(.875rem,4%);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:normal;overflow-wrap:anywhere;cursor:pointer;background:0 0;border:0;border-block-end:2px solid #0000;flex-shrink:0;min-block-size:2.75rem;max-inline-size:100%;padding:.75rem min(1rem,4vi)}.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-segmented{border-radius:var(--b3-radius);background:color-mix(in srgb, var(--b3-color-text) 7%, var(--b3-color-canvas));border:0;flex-wrap:wrap;gap:.25rem;min-inline-size:0;margin:0;padding:.25rem;display:flex}.b3-segmented>label{border-radius:calc(var(--b3-radius) - .25rem);min-block-size:2.75rem;max-inline-size:100%;color:var(--b3-color-muted);text-align:center;cursor:pointer;flex:1 0 auto;justify-content:center;align-items:center;gap:.375rem;padding-inline:.875rem;font-weight:600;display:inline-flex;position:relative}.b3-segmented>label>input{opacity:0;block-size:100%;inline-size:100%;cursor:inherit;margin:0;position:absolute;inset:0}.b3-segmented>label:has(input:checked){background:var(--b3-color-surface);color:var(--b3-color-text);box-shadow:0 1px 2px #0000001f, 0 0 0 1px var(--b3-color-border)}.b3-segmented>label:has(input:focus-visible){box-shadow:inset 0 0 0 2px}@media (forced-colors:active){.b3-segmented>label{border:2px solid canvas}.b3-segmented>label:has(input:checked){border-color:canvastext}.b3-segmented>label:has(input:focus-visible){outline-offset:1px;outline:2px solid highlight}}.b3-segmented>label:has(input:disabled){opacity:.5;cursor:not-allowed}.b3-filter-labels{overscroll-behavior-x:contain;scrollbar-width:none;gap:18px;display:flex;overflow-x:auto}.b3-filter-labels::-webkit-scrollbar{display:none}.b3-filter-labels>button{block-size:32px;box-shadow:none;color:var(--b3-color-muted);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:0;flex:none;padding:0;font-size:15px;font-weight:500}.b3-filter-labels>button:hover{color:var(--b3-color-text)}.b3-filter-labels>button:is([aria-checked=true],[aria-pressed=true]){color:var(--b3-color-accent);font-weight:700}.b3-filter-labels>button:focus-visible{box-shadow:none;text-decoration:underline 2px var(--b3-color-accent);text-underline-offset:5px;outline:none}@media (forced-colors:active){.b3-filter-labels>button:is([aria-checked=true],[aria-pressed=true]){text-decoration:underline}.b3-filter-labels>button:focus-visible{outline:1px solid highlight}}.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:min(1.5rem,5vi);overflow:auto;container:b3-dialog/inline-size}.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%);max-inline-size: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-dialog>form{gap:var(--b3-space);flex-direction:column;margin:0;display:flex}.b3-dialog>form>header:has(>button:last-child){grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.75rem;display:grid}.b3-dialog>form>header:has(>button:last-child)>:not(:last-child){grid-column:1;min-inline-size:0}.b3-dialog>form>header>button:last-child:not(:first-child){grid-area:1/2}.b3-dialog>form>footer{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.b3-dialog>form>footer>[data-b3-emphasis=quiet]:first-child:not(:last-child){margin-inline-end:auto}@container b3-dialog (width<=16rem){.b3-dialog>form>header:has(>button:last-child){flex-direction:column;align-items:flex-start;display:flex}}.b3-tree,.b3-tree ul{overflow-wrap:anywhere;border-inline-start:1px solid var(--b3-color-border);padding-inline-start:min(1rem,5%);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(h1,h2,h3,h4,h5,h6){margin-block:1.75rem .75rem;line-height:1.25}.b3-prose :is(h5,h6){font-size:1em}.b3-prose>:first-child{margin-block-start:0}.b3-prose :is(img,video,iframe){max-inline-size:100%;display:block}.b3-prose :is(img,video){block-size:auto}.b3-prose iframe{border:0}.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;flex-wrap:wrap;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:min(1rem,5%);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:min(1rem,5%)}.b3-toc-link{border-radius:var(--b3-radius-small);color:var(--b3-color-muted);overflow-wrap:anywhere;padding:.625rem min(.75rem,5%);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[open]:has(>.b3-scroll){grid-template-rows:auto minmax(0,1fr);display:grid}.b3-command>.b3-scroll>.b3-command-list{max-block-size:none;overflow:visible}.b3-command-search{border-block-end:1px solid var(--b3-color-border);flex-wrap:wrap;justify-content:end;align-items:center;gap:.75rem;padding:min(1rem,4vw);display:flex}.b3-command-search>input{flex:12ch;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:min(1rem,2vw);min-block-size:2.75rem;padding:min(.875rem,2svh) min(.75rem,3vw);display:flex}.b3-command .b3-command-item{border-radius:max(0px, calc(var(--b3-radius-large) - .5rem - 1px))}.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,.b3-error{overflow-wrap:anywhere}.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:where(:not([type=checkbox],[type=radio]))[data-b3-size=small]{padding:.5rem .75rem}.b3-input:where(:not([type=checkbox],[type=radio]))[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:max(0px, calc(var(--b3-radius) - .375rem - 1px));background:var(--b3-color-accent);color:var(--b3-color-on-accent);cursor:pointer;border:0;margin-inline-end:.75rem;padding:.5rem .75rem}.b3-input[data-b3-emphasis=outline]::file-selector-button{border-radius:max(0px, calc(var(--b3-radius) - .375rem - 2px))}.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;flex-wrap:wrap;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-choice-card>:not(input){overflow-wrap:anywhere;flex:12ch;min-inline-size:0}.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{grid-template-columns:minmax(0,1fr);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:.75rem 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-conversation{align-content:start}.b3-message-body:has(>:is(div,p,ul,ol,table,pre,blockquote,b3-markdown-stream)){white-space:normal}.b3-composer{align-items:end;gap:var(--b3-space-2);padding:var(--b3-space-3);border-block-start:1px solid var(--b3-color-border);background:var(--b3-color-canvas);flex-wrap:wrap;display:flex}.b3-composer>.b3-input,.b3-composer>.b3-button{border-radius:var(--b3-radius);min-block-size:var(--b3-d-control,2.75rem)}.b3-composer>.b3-input{resize:none;min-inline-size:0;max-inline-size:100%;padding-block:calc((var(--b3-d-control,2.75rem) - 1.5em - 2px) / 2);flex:12ch;line-height:1.5}.b3-composer>.b3-button{block-size:var(--b3-d-control,2.75rem);min-inline-size:var(--b3-d-control,2.75rem);flex-shrink:0;margin-inline-start:auto}.b3-message-body :where(p,ul,ol,pre,table,blockquote,h1,h2,h3,h4,h5,h6,div,figure):first-child{margin-block-start:0}.b3-message-body :where(p,ul,ol,pre,table,blockquote,h1,h2,h3,h4,h5,h6,div,figure):last-child{margin-block-end:0}.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 clamp(.5rem, 2vw, 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);flex-wrap:wrap;justify-content:space-around;gap:.125rem;margin-inline:auto;display:flex;position:fixed;inset-block-end:0;inset-inline:0}.b3-bottom-link{appearance:none;cursor:pointer;overflow-wrap:anywhere;text-align:center;flex:1 1 max-content;min-block-size:var(--b3-touch,44px);min-inline-size:var(--b3-touch,44px);max-inline-size:100%;color:var(--b3-color-muted);background:0 0;border:0;border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;padding:.25rem clamp(.125rem,1vw,.5rem);font-size:.75rem;text-decoration:none;display:flex}.b3-bottom-link:disabled{opacity:.5;cursor:not-allowed}.b3-bottom-link:has(svg){justify-content:flex-start}.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 min(1.5rem, 5vi) 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{box-shadow:none;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-bottom-link[aria-current=page]{background:color-mix(in srgb, var(--b3-color-accent) 12%, transparent)}.b3-bottom-link :where(svg:not([width])){flex:none;block-size:1.375rem;inline-size:1.375rem}.b3-bottom-link>:where(span,strong):not(.b3-count){white-space:normal;overflow-wrap:anywhere;max-inline-size:100%;overflow:visible}:has(>.b3-bottom-link:nth-of-type(5))>.b3-bottom-link{padding-inline:.125rem;font-size:.6875rem}.b3-app-frame{inline-size:100%;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-area:2/1;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-toast-region{overscroll-behavior:contain;grid-area:2/1;place-self:end;min-block-size:0;max-block-size:calc(100% - 2rem);margin:1rem;position:relative;inset:auto;overflow-y:auto}.b3-app-frame>.b3-app-bar{padding-block-start:.75rem}.b3-app-frame:has(>.b3-bottom-nav,>footer .b3-bottom-nav){padding-block-end:0}.b3-app-frame .b3-bottom-nav{inline-size:100%;max-inline-size:none;padding-block-end:max(.5rem, env(safe-area-inset-bottom,0px));position:static}:where(.b3-root[data-b3-density]) .b3-button{min-block-size:var(--b3-d-control,2.75rem);padding:var(--b3-d-pad-block,.625rem) var(--b3-d-pad-inline,1rem);font-size:var(--b3-d-label,inherit)}:where(.b3-root[data-b3-density]) .b3-button[data-b3-size=small]{min-block-size:var(--b3-d-control-small,auto);padding:calc(var(--b3-d-pad-block,.5rem) - .125rem) calc(var(--b3-d-pad-inline,.75rem) - .25rem)}:where(.b3-root[data-b3-density]) .b3-input:where(:not([type=checkbox],[type=radio])){min-block-size:var(--b3-d-control,2.75rem);padding:calc((var(--b3-d-control,2.75rem) - 1.5em - 2px) / 2) .75rem;line-height:1.5}:where(.b3-root[data-b3-density]) .b3-nav-link{min-block-size:var(--b3-d-control,2.75rem);padding:var(--b3-d-pad-block,.625rem) min(var(--b3-d-pad-inline,.875rem), 4%);font-size:var(--b3-d-label,inherit)}:where(.b3-root[data-b3-density]) .b3-heading{font-size:var(--b3-d-heading,1.375rem)}:where(.b3-root[data-b3-density]) .b3-avatar{block-size:var(--b3-d-avatar,2.5rem);inline-size:var(--b3-d-avatar,2.5rem)}:where(.b3-root[data-b3-density]) .b3-conversation{gap:var(--b3-d-gap,1.5rem)}:where(.b3-root[data-b3-density]) .b3-message-body{padding:var(--b3-d-message-pad,.75rem 1rem)}:where(.b3-root[data-b3-density]) .b3-message-meta{font-size:var(--b3-d-meta,.8125rem)}.b3-button[data-b3-emphasis=ghost]{color:var(--b3-color-muted);background:0 0;border-color:#0000}.b3-button[data-b3-emphasis=ghost]:not(:disabled):hover{color:var(--b3-color-text)}.b3-button[data-b3-emphasis=ghost][aria-pressed=true]{color:var(--b3-color-accent)}.b3-button[data-b3-icon]{min-inline-size:var(--b3-d-control,2.75rem);padding-inline:0}:where(.b3-root[data-b3-density]) .b3-button[data-b3-icon][data-b3-size=small]{min-inline-size:var(--b3-d-control-small,2.25rem)}.b3-button:disabled{opacity:1;background:color-mix(in srgb, var(--b3-color-muted) 14%, var(--b3-color-surface));color:var(--b3-color-muted);border-color:#0000}.b3-button[data-b3-emphasis=ghost]:disabled{background:0 0}.b3-truncate{white-space:nowrap;text-overflow:ellipsis;min-inline-size:0;overflow:hidden}.b3-strong{font-size:inherit;font-weight:650}.b3-caption{color:var(--b3-color-muted);font-size:.8125rem;line-height:1.4}.b3-heading[data-b3-size=small]{font-size:1.0625rem;line-height:1.3}:is(a,button).b3-caption{color:var(--b3-color-accent);cursor:pointer;text-underline-offset:.15em;background:0 0;border:0;padding:0}:is(a,button).b3-caption:is(:hover,:focus-visible){text-decoration:underline}:where(.b3-root[data-b3-density]) .b3-caption{font-size:var(--b3-d-meta,.8125rem)}.b3-badge{gap:.25rem}:where(.b3-root[data-b3-density]) .b3-surface{padding:var(--b3-d-surface-pad,clamp(1rem, 3vw, 2rem))}.b3-input-group,.b3-input-group>.b3-input-affix,.b3-input-group>.b3-input{background:var(--b3-color-surface)}.b3-root[data-b3-theme=dark] .b3-message[data-b3-side=self]>.b3-message-body{background:color-mix(in srgb, var(--b3-color-accent) 22%, var(--b3-color-surface));color:var(--b3-color-text)}.b3-empty{justify-items:center;gap:var(--b3-space-2);padding:var(--b3-space-12) var(--b3-space-4);text-align:center;color:var(--b3-color-muted);display:grid}.b3-empty>svg{color:var(--b3-color-muted)}}@property --b3-reel-fade{syntax:"<length>";inherits:false;initial-value:2.5rem}
@@ -1,6 +1,6 @@
1
1
  {
2
- "version": "0.1.0-alpha.128",
3
- "cssSha256": "d20f9a32de6b1d0561ef7ea0fc7638739d8ea01582edf00ceb8bb4885eb07973",
2
+ "version": "0.1.0-alpha.130",
3
+ "cssSha256": "e2b93c77818e20aaa2d051b5110f9975103b652a654cf8fb8447fcfb895fd79d",
4
4
  "classes": [
5
5
  "b3-accordion",
6
6
  "b3-alert",
@@ -44,6 +44,7 @@
44
44
  "b3-feature-icon",
45
45
  "b3-field",
46
46
  "b3-fieldset",
47
+ "b3-filter-labels",
47
48
  "b3-form-grid",
48
49
  "b3-grid",
49
50
  "b3-heading",
@@ -118,7 +119,7 @@
118
119
  "classes": [
119
120
  "b3-root"
120
121
  ],
121
- "guidance": "Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme=\"dark\" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme=\"dark\"]) for light-only colors and .b3-root[data-b3-theme=\"dark\"] for dark overrides. Set foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density=\"compact\" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; \"auto\" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling.",
122
+ "guidance": "Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme=\"dark\" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme=\"dark\"]) for light-only colors and .b3-root[data-b3-theme=\"dark\"] for dark overrides. Set foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density=\"compact\" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; \"auto\" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling. Theme verification: explicitly set data-b3-theme to light and dark and inspect actual canvas/text colors, not only color-scheme. System preference alone does not set this attribute; the host or app chooses it. Test custom palettes in both states. A dark native control on a fixed light canvas is not a completed dark theme.",
122
123
  "example": "<html class=\"b3-root\" data-b3-theme=\"dark\">\n<style>\n/* Identity applies in both themes; scope custom palette values separately. */\n.b3-root {\n --b3-font-body: system-ui, sans-serif;\n --b3-font-display: Georgia, serif;\n --b3-radius: 0.5rem;\n}\n.app-panel {\n color: var(--b3-color-text);\n background: var(--b3-color-surface);\n}\n</style>"
123
124
  },
124
125
  {
@@ -187,7 +188,7 @@
187
188
  "classes": [
188
189
  "b3-row"
189
190
  ],
190
- "guidance": "Use li inside ul/ol. Direct b3-row children remove native list indentation; ordinary prose lists keep it. The row supplies spacing/dividers; app code owns state, ordering and persistence.\n\nComposition: for a short label plus actions, use b3-row b3-split. For supporting notes, use the stacked example below: b3-row b3-stack stretches children and honors --b3-space; a nested b3-split holds primary metadata/value/actions, and the note gets the full width below. Avoid squeezing long notes beside fixed controls. Inset content only when adding an enclosing border/surface. Keep secondary actions readable and visually subordinate.\n\nLists: show useful rows before large summaries, with a short count and truthful empty state. Never invent user history. If reviewing is primary, use one disclosed add flow (native details/summary with b3-accordion); read form-composition.md. Task queues should show compact rows and reveal editing fields only for the edited item. Use existing disclosure/dialog semantics, not new density utilities. Check populated phone/desktop layouts, long notes and internal overflow.\n\nEditing: keep focused controls and caret/selection stable. Save drafts synchronously before replacing rows. Keep an edited row present while focus remains inside it, even if it stops matching a filter; read editable-filtered-rows.md for Tab/blur and exit timing. Give controls immutable identity independent of changing labels/actions: Edit → Done → Edit must reopen correctly. Checkbox completion: update the existing input/row and counts in place; never rebuild the list on change. If filtering hides the focused row, focus the next visible checkbox or stable add/filter control. See the concrete checkbox pattern in editable-filtered-rows.md. After deletion focus a surviving action or add control. Verify activeElement and persisted values, not just page width. Playground #row resets local state on reload. A row that opens something is itself the target: a.b3-row, button.b3-row or [role=\"button\"].b3-row gets inline padding, hover and active fills. Native button rows reset browser chrome and fill their container. For a list of conversation threads, use one such row per thread: sender + time, the opening text in b3-clamp, and a caption line with the reply count as an interactive caption. In a master/detail list mark the open row aria-current=\"true\" and it gets the selected fill (a system-color edge in forced-colors mode). Do not put aria-selected on ordinary links or buttons; that state belongs to selection-widget roles such as option or tab, with their required keyboard behavior.",
191
+ "guidance": "Use li inside ul/ol. Direct b3-row children remove native list indentation; ordinary prose lists keep it. The row supplies spacing/dividers; app code owns state, ordering and persistence.\n\nComposition: for a short label plus actions, use b3-row b3-split. For supporting notes, use the stacked example below: b3-row b3-stack stretches children and honors --b3-space; a nested b3-split holds primary metadata/value/actions, and the note gets the full width below. Avoid squeezing long notes beside fixed controls. Inset content only when adding an enclosing border/surface. Keep secondary actions readable and visually subordinate.\n\nLists: show useful rows before large summaries, with a short count and truthful empty state. Never invent user history. If reviewing is primary, use one disclosed add flow (native details/summary with b3-accordion); read form-composition.md. Task queues should show compact rows and reveal editing fields only for the edited item. Use existing disclosure/dialog semantics, not new density utilities. Check populated phone/desktop layouts, long notes and internal overflow.\n\nEditing: keep focused controls and caret/selection stable. Save drafts synchronously before replacing rows. Keep an edited row present while focus remains inside it, even if it stops matching a filter; read editable-filtered-rows.md for Tab/blur and exit timing. Give controls immutable identity independent of changing labels/actions: Edit → Done → Edit must reopen correctly. Checkbox completion: update the existing input/row and counts in place; never rebuild the list on change. If filtering hides the focused row, focus the next visible checkbox or stable add/filter control. See the concrete checkbox pattern in editable-filtered-rows.md. After deletion focus a surviving action or add control. Verify activeElement and persisted values, not just page width. The editable controls in playground #row reset on reload; the separate ledger example persists only its isolated example store. A row that opens something is itself the target: a.b3-row, button.b3-row or [role=\"button\"].b3-row gets inline padding, hover and active fills. Native button rows reset browser chrome and fill their container. For a list of conversation threads, use one such row per thread: sender + time, the opening text in b3-clamp, and a caption line with the reply count as an interactive caption. In a master/detail list mark the open row aria-current=\"true\" and it gets the selected fill (a system-color edge in forced-colors mode). Do not put aria-selected on ordinary links or buttons; that state belongs to selection-widget roles such as option or tab, with their required keyboard behavior. For local saved lists, copy the candidate-save-publish example in editable-filtered-rows.md. Never mutate committed arrays before storage succeeds: retrying a failed add can otherwise duplicate the draft. Keep status-action buttons stable when their label changes.",
191
192
  "example": "<ul>\n <li class=\"b3-row b3-stack\" style=\"--b3-space:.5rem\">\n <div class=\"b3-split\">\n <strong>Groceries</strong>\n <div class=\"b3-cluster\">\n <strong>$12.50</strong>\n <button class=\"b3-button\" data-b3-emphasis=\"quiet\" aria-label=\"Details for groceries\">Details</button>\n </div>\n </div>\n <p class=\"b3-muted\">Weekly shop and supplies for the shared kitchen.</p>\n </li>\n</ul>"
192
193
  },
193
194
  {
@@ -309,6 +310,15 @@
309
310
  "guidance": "One choice among 2-5 peers that filters or switches the current view (Day/Week, All/Open/Done). It is a radio group, not tabs: use tabs only when each option owns a role=tabpanel. Author native radios sharing one name, each inside its label; wrap them in div.b3-segmented role=radiogroup with aria-label (or fieldset.b3-segmented with a b3-visually-hidden legend). React to the change event and read the checked value; arrow keys, focus, form values and reset stay native. Each option is at least 44px tall; the checked option lifts onto the surface. Options that do not fit wrap onto another row at full height rather than squeezing or hiding; past five options use a select. Keep labels short; an icon beside the text is fine.",
310
311
  "example": "<div class=\"b3-segmented\" role=\"radiogroup\" aria-label=\"Range\"><label><input type=\"radio\" name=\"range\" value=\"day\" checked>Day</label><label><input type=\"radio\" name=\"range\" value=\"week\">Week</label><label><input type=\"radio\" name=\"range\" value=\"month\">Month</label></div>"
311
312
  },
313
+ {
314
+ "id": "filter-labels",
315
+ "title": "Filter labels",
316
+ "classes": [
317
+ "b3-filter-labels"
318
+ ],
319
+ "guidance": "A quiet row of filters over a list (All/Web/Terminal, tags): each option is a plain coloured text label, never a pill or a filled chip. Author native buttons inside div.b3-filter-labels; a single choice is role=radiogroup with aria-label and role=radio buttons carrying aria-checked, independent toggles use aria-pressed. The row scrolls sideways instead of wrapping. Muted at rest, accent and bold when chosen; keyboard focus underlines the label. Use b3-segmented when the choice should look like a control rather than text.",
320
+ "example": "<div class=\"b3-filter-labels\" role=\"radiogroup\" aria-label=\"Type\"><button type=\"button\" role=\"radio\" aria-checked=\"true\">All</button><button type=\"button\" role=\"radio\" aria-checked=\"false\">Web</button><button type=\"button\" role=\"radio\" aria-checked=\"false\">Terminal</button></div>"
321
+ },
312
322
  {
313
323
  "id": "confirm",
314
324
  "title": "Confirm a destructive action",
@@ -489,6 +499,7 @@
489
499
  "navigation.md",
490
500
  "tabs.md",
491
501
  "segmented.md",
502
+ "filter-labels.md",
492
503
  "confirm.md",
493
504
  "disclosure.md",
494
505
  "dialog.md",
@@ -4,6 +4,32 @@ Use b3-row for a list or native rows inside b3-table. Layout does not own editin
4
4
 
5
5
  Build the candidate state before saving; publish it to committed in-memory state only after persistence succeeds, or explicitly roll back on failure. Otherwise duplicate guards can reject a retry for an item that was never saved or rendered. Keep initial rendering independent of a successful storage write. Preserve the user's input and show a recoverable error; test a failed save followed by a successful retry.
6
6
 
7
+ ## Save before publishing state
8
+
9
+ For a synchronous local example store, use the same commit boundary for add, edit, status and delete. `entries` is the committed array; never push/splice it or mutate one of its objects before saving. This is app code, not a Bare helper. Real account data needs the app's authoritative store instead.
10
+
11
+ ```js
12
+ function commit(candidate) {
13
+ try {
14
+ localStorage.setItem(key, JSON.stringify(candidate));
15
+ } catch (error) {
16
+ console.error('Save failed', error);
17
+ status.textContent = 'Not saved. Your draft is still here. Try again.';
18
+ return false;
19
+ }
20
+ entries = candidate;
21
+ return true;
22
+ }
23
+ // After validating the draft:
24
+ if (!commit([...entries, newEntry])) return;
25
+ renderCommittedState();
26
+ form.reset(); // Never clear a draft on failure.
27
+ ```
28
+
29
+ For updates build `entries.map(x => x.id === id ? { ...x, status: nextStatus } : x)`; for deletion use `entries.filter(x => x.id !== id)`. A failed write must leave memory, rendered rows, totals and storage at the same prior state. On retry, one draft adds exactly one record. For asynchronous stores, await success before publishing and guard concurrent submissions; this synchronous example is not a network transaction helper.
30
+
31
+ The Lists → “Save once, keep your place” specimen has a one-shot failure switch, retained draft, actual isolated browser storage, and a stable review action. Starting with two examples, fail an add then retry: three records, not four, including after reload. Do the same with Review: failure keeps the old status; success keeps focus on the same button. Reset affects only this specimen's storage key.
32
+
7
33
  Native change/blur can report activeElement as BODY before the next field receives focus. Capture row ownership on focusin, then reapply filtering only after native focus navigation has settled. Here `list` is the owning ul/ol/tbody, and `matchesFilter(row)` is your app's predicate. Bind before user interaction. These are app functions, not a Bare runtime API.
8
34
 
9
35
  ```js
@@ -0,0 +1,9 @@
1
+ # Filter labels
2
+
3
+ A quiet row of filters over a list (All/Web/Terminal, tags): each option is a plain coloured text label, never a pill or a filled chip. Author native buttons inside div.b3-filter-labels; a single choice is role=radiogroup with aria-label and role=radio buttons carrying aria-checked, independent toggles use aria-pressed. The row scrolls sideways instead of wrapping. Muted at rest, accent and bold when chosen; keyboard focus underlines the label. Use b3-segmented when the choice should look like a control rather than text.
4
+
5
+ Classes: b3-filter-labels
6
+
7
+ ```html
8
+ <div class="b3-filter-labels" role="radiogroup" aria-label="Type"><button type="button" role="radio" aria-checked="true">All</button><button type="button" role="radio" aria-checked="false">Web</button><button type="button" role="radio" aria-checked="false">Terminal</button></div>
9
+ ```
@@ -1,6 +1,6 @@
1
1
  # Root and theme
2
2
 
3
- Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme="dark" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme="dark"]) for light-only colors and .b3-root[data-b3-theme="dark"] for dark overrides. Set foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density="compact" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; "auto" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling.
3
+ Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme="dark" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme="dark"]) for light-only colors and .b3-root[data-b3-theme="dark"] for dark overrides. Set foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density="compact" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; "auto" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling. Theme verification: explicitly set data-b3-theme to light and dark and inspect actual canvas/text colors, not only color-scheme. System preference alone does not set this attribute; the host or app chooses it. Test custom palettes in both states. A dark native control on a fixed light canvas is not a completed dark theme.
4
4
 
5
5
  Classes: b3-root
6
6
 
@@ -6,7 +6,7 @@ Composition: for a short label plus actions, use b3-row b3-split. For supporting
6
6
 
7
7
  Lists: show useful rows before large summaries, with a short count and truthful empty state. Never invent user history. If reviewing is primary, use one disclosed add flow (native details/summary with b3-accordion); read form-composition.md. Task queues should show compact rows and reveal editing fields only for the edited item. Use existing disclosure/dialog semantics, not new density utilities. Check populated phone/desktop layouts, long notes and internal overflow.
8
8
 
9
- Editing: keep focused controls and caret/selection stable. Save drafts synchronously before replacing rows. Keep an edited row present while focus remains inside it, even if it stops matching a filter; read editable-filtered-rows.md for Tab/blur and exit timing. Give controls immutable identity independent of changing labels/actions: Edit → Done → Edit must reopen correctly. Checkbox completion: update the existing input/row and counts in place; never rebuild the list on change. If filtering hides the focused row, focus the next visible checkbox or stable add/filter control. See the concrete checkbox pattern in editable-filtered-rows.md. After deletion focus a surviving action or add control. Verify activeElement and persisted values, not just page width. Playground #row resets local state on reload. A row that opens something is itself the target: a.b3-row, button.b3-row or [role="button"].b3-row gets inline padding, hover and active fills. Native button rows reset browser chrome and fill their container. For a list of conversation threads, use one such row per thread: sender + time, the opening text in b3-clamp, and a caption line with the reply count as an interactive caption. In a master/detail list mark the open row aria-current="true" and it gets the selected fill (a system-color edge in forced-colors mode). Do not put aria-selected on ordinary links or buttons; that state belongs to selection-widget roles such as option or tab, with their required keyboard behavior.
9
+ Editing: keep focused controls and caret/selection stable. Save drafts synchronously before replacing rows. Keep an edited row present while focus remains inside it, even if it stops matching a filter; read editable-filtered-rows.md for Tab/blur and exit timing. Give controls immutable identity independent of changing labels/actions: Edit → Done → Edit must reopen correctly. Checkbox completion: update the existing input/row and counts in place; never rebuild the list on change. If filtering hides the focused row, focus the next visible checkbox or stable add/filter control. See the concrete checkbox pattern in editable-filtered-rows.md. After deletion focus a surviving action or add control. Verify activeElement and persisted values, not just page width. The editable controls in playground #row reset on reload; the separate ledger example persists only its isolated example store. A row that opens something is itself the target: a.b3-row, button.b3-row or [role="button"].b3-row gets inline padding, hover and active fills. Native button rows reset browser chrome and fill their container. For a list of conversation threads, use one such row per thread: sender + time, the opening text in b3-clamp, and a caption line with the reply count as an interactive caption. In a master/detail list mark the open row aria-current="true" and it gets the selected fill (a system-color edge in forced-colors mode). Do not put aria-selected on ordinary links or buttons; that state belongs to selection-widget roles such as option or tab, with their required keyboard behavior. For local saved lists, copy the candidate-save-publish example in editable-filtered-rows.md. Never mutate committed arrays before storage succeeds: retrying a failed add can otherwise duplicate the draft. Keep status-action buttons stable when their label changes.
10
10
 
11
11
  Classes: b3-row
12
12
 
@@ -8,7 +8,7 @@ Compose around the task: put useful primary content in the first phone screen. F
8
8
 
9
9
  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.
10
10
 
11
- Task behavior belongs to the app. Persist user changes, handle reload, use native controls, associate labels, and announce meaningful changes. Update affected content without replacing the control being used; whole-app redraws lose focus and drafts. If replacement is necessary, restore focus deliberately after rendering. Never claim a control works because it looks correct. No remote scripts or implicit platform API is available.
11
+ Apps own behavior. For saved lists, read editable-filtered-rows.md: persist an immutable candidate before publishing state or clearing drafts; a failed-save retry adds exactly one record. Keep active controls stable through status/filter changes; if replaced, restore usable focus after rendering. Use native labeled controls, announce changes and verify reload. No remote scripts or implicit platform API exists.
12
12
 
13
13
  Prototype guidance is experimental. Comparison evidence has not established superiority over bare-v2 or external alternatives.
14
14
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@livx.cc/bare-v3",
3
- "version": "0.1.0-alpha.128",
3
+ "version": "0.1.0-alpha.130",
4
4
  "type": "module",
5
5
  "thirdPartyNotices": "./dist/third-party.json",
6
6
  "files": [