@livx.cc/bare-v3 0.1.0-alpha.10

package/dist/bare.css

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