:root {
color-scheme: light dark;
--bn-brand-deep:  #0B2E2A;
--bn-brand-dark2: #12403A;
--bn-brand-teal:  #009597;
--bn-brand-green: #0F6B5E;
--bn-brand-mint:  #2EE89B;
--bn-brand-mint-soft: #DDF7EC;
--bn-brand-sage:  #A9C9BF;
--bn-brand-well:  #F6F9F8;
--bn-brand-red:   #E30613;
--bn-brand-sage-pale: #C9E0D9;
--bn-brand-teal-soft: #7CC8B8;
--bn-surface:          #F1F5F3;
--bn-surface-elevated: #FFFFFF;
--bn-surface-sunken:   #E7EDEA;
--bn-surface-well:     var(--bn-brand-well);
--bn-ink:       #0E1F1C;
--bn-ink-dim:   #617269;
--bn-ink-faint: #51665F;
--bn-ink-on-accent:     #FFFFFF;
--bn-ink-on-accent-dim: var(--bn-brand-sage);
--bn-accent-deep:  var(--bn-brand-deep);
--bn-accent-teal:  var(--bn-brand-teal);
--bn-accent-green: var(--bn-brand-green);
--bn-accent-mint:  var(--bn-brand-mint);
--bn-accent-teal-ink: #00696B;
--bn-chip-bg:         var(--bn-brand-mint-soft);
--bn-chip-ink:        var(--bn-brand-green);
--bn-chip-ok-bg:      var(--bn-brand-mint-soft);
--bn-chip-ok-ink:     var(--bn-brand-green);
--bn-chip-ok-dot:     var(--bn-brand-green);
--bn-chip-warn-bg:    #FFF3D6;
--bn-chip-warn-ink:   #7A4A00;
--bn-chip-warn-dot:   #B36A00;
--bn-chip-neutral-bg: #EDF2F0;
--bn-chip-neutral-ink:#3F524D;
--bn-chip-neutral-dot:#6E827C;
--bn-line:        #E1E9E6;
--bn-line-strong: #6A807A;
--bn-focus:       #00696B;
--bn-focus-surface: var(--bn-focus);
--bn-surface-hover: #F4F7F6;
--bn-danger-ink:       #B42318;
--bn-danger-fill-ink:  #FFFFFF;
--bn-danger-pressed:   #8F1B13;
--bn-chip-danger-bg:   #FDECEA;
--bn-chip-danger-ink:  #9B1C14;
--bn-btn-primary-bg:        #0B2E2A;
--bn-btn-primary-ink:       #FFFFFF;
--bn-btn-primary-hover:     #12403A;
--bn-btn-primary-pressed:   #061A18;
--bn-btn-secondary-hover:   #EAF4F1;
--bn-btn-secondary-pressed: #DDF7EC;
--bn-btn-hover-line:        #00696B;
--bn-link-hover:            #004F51;
--bn-btn-h-sm: 32px;
--bn-btn-h-md: 40px;
--bn-btn-h-lg: 44px;
--bn-radius-xs:   6px;
--bn-radius-sm:   10px;
--bn-radius-md:   12px;
--bn-radius-chip: 13px;
--bn-radius-tile: 19px;
--bn-radius-lg:   20px;
--bn-radius-xl:   28px;
--bn-radius-pill: 999px;
--bn-shadow-1: 0 3px 14px rgba(11, 46, 42, 0.07);
--bn-shadow-2: 0 6px 22px rgba(11, 46, 42, 0.09);
--bn-shadow-3: 0 12px 36px rgba(11, 46, 42, 0.11);
--bn-space-1:  4px;
--bn-space-2:  8px;
--bn-space-3:  12px;
--bn-space-4:  16px;
--bn-space-5:  20px;
--bn-space-6:  24px;
--bn-space-7:  28px;
--bn-space-8:  32px;
--bn-space-10: 40px;
--bn-space-12: 48px;
--bn-space-16: 64px;
--bn-gap:    17px;
--bn-gap-lg: 24px;
--bn-tile-pad:    var(--bn-space-5);
--bn-tile-pad-lg: var(--bn-space-6);
--bn-container:   1240px;
--bn-tap: 44px;
--bn-font: system-ui, -apple-system, "SF Pro Text", "Inter",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--bn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
"Liberation Mono", monospace;
--bn-text-2xs:  12px;
--bn-text-xs:   13px;
--bn-text-sm:   14px;
--bn-text-base: clamp(16px,  0.95rem + 0.20vw, 17px);
--bn-text-lg:   clamp(17px,  1.00rem + 0.28vw, 19px);
--bn-text-xl:   clamp(20px,  1.10rem + 0.55vw, 26px);
--bn-text-2xl:  clamp(26px,  1.35rem + 1.15vw, 37px);
--bn-text-3xl:  clamp(29px,  1.50rem + 1.55vw, 40px);
--bn-text-stat: clamp(38px,  1.90rem + 3.10vw, 72px);
--bn-leading-tight:  1.18;
--bn-leading-snug:   1.32;
--bn-leading-normal: 1.55;
--bn-weight-regular:  400;
--bn-weight-medium:   500;
--bn-weight-semibold: 600;
--bn-weight-bold:     700;
--bn-weight-black:    800;
--bn-tracking-tight:  -0.013em;
--bn-tracking-stat:   -0.018em;
--bn-tracking-wide:    0.06em;
--bn-tracking-caps:    0.125em;
--bn-tracking-kicker:  0.15em;
--bn-stroke-hair:  1px;
--bn-stroke:       1px;
--bn-stroke-thick: 2px;
--bn-stroke-focus: 2px;
--bn-stroke-chart: 2.5px;
--bn-dot: 7px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-bn-theme="light"]) {
--bn-surface:          #0A211E;
--bn-surface-elevated: #11302B;
--bn-surface-sunken:   #0D2724;
--bn-surface-well:     #0D2724;
--bn-surface-hover:    #153731;
--bn-ink:       #EAF4F0;
--bn-ink-dim:   var(--bn-brand-sage);
--bn-ink-faint: #9EBFB8;
--bn-ink-on-accent:     #EAF4F0;
--bn-ink-on-accent-dim: var(--bn-brand-sage);
--bn-accent-deep:  #0F4F46;
--bn-accent-teal:  #5FD6D8;
--bn-accent-green: #6FE3C3;
--bn-accent-mint:  #2EE89B;
--bn-accent-teal-ink: #5FD6D8;
--bn-chip-bg:         #153A34;
--bn-chip-ink:        #C9E9DE;
--bn-chip-ok-bg:      #16463C;
--bn-chip-ok-ink:     #C9EBDD;
--bn-chip-ok-dot:     var(--bn-brand-mint);
--bn-chip-warn-bg:    #3A2E12;
--bn-chip-warn-ink:   #F5CE8A;
--bn-chip-warn-dot:   #E8A33D;
--bn-chip-neutral-bg: #1D423B;
--bn-chip-neutral-ink:#D3E2DD;
--bn-chip-neutral-dot:#8FB0A9;
--bn-danger-ink:       #FF9C94;
--bn-danger-fill-ink:  #3A0D09;
--bn-danger-pressed:   #E88A82;
--bn-chip-danger-bg:   #4A1F1B;
--bn-chip-danger-ink:  #FFB4AC;
--bn-btn-primary-bg:        #D5EDE5;
--bn-btn-primary-ink:       #0B2E2A;
--bn-btn-primary-hover:     #EAF6F1;
--bn-btn-primary-pressed:   #B9DDD1;
--bn-btn-secondary-hover:   #1C4A44;
--bn-btn-secondary-pressed: #22564E;
--bn-btn-hover-line:        #7FDCCB;
--bn-link-hover:            #A6EBDD;
--bn-line:        #21403A;
--bn-line-strong: #548C82;
--bn-focus:       #7FE9CE;
--bn-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
--bn-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.32),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
--bn-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.38),
inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
}
:root[data-bn-theme="dark"] {
--bn-surface:          #0A211E;
--bn-surface-elevated: #11302B;
--bn-surface-sunken:   #0D2724;
--bn-surface-well:     #0D2724;
--bn-surface-hover:    #153731;
--bn-ink:       #EAF4F0;
--bn-ink-dim:   var(--bn-brand-sage);
--bn-ink-faint: #9EBFB8;
--bn-ink-on-accent:     #EAF4F0;
--bn-ink-on-accent-dim: var(--bn-brand-sage);
--bn-accent-deep:  #0F4F46;
--bn-accent-teal:  #5FD6D8;
--bn-accent-green: #6FE3C3;
--bn-accent-mint:  #2EE89B;
--bn-accent-teal-ink: #5FD6D8;
--bn-chip-bg:         #153A34;
--bn-chip-ink:        #C9E9DE;
--bn-chip-ok-bg:      #16463C;
--bn-chip-ok-ink:     #C9EBDD;
--bn-chip-ok-dot:     var(--bn-brand-mint);
--bn-chip-warn-bg:    #3A2E12;
--bn-chip-warn-ink:   #F5CE8A;
--bn-chip-warn-dot:   #E8A33D;
--bn-chip-neutral-bg: #1D423B;
--bn-chip-neutral-ink:#D3E2DD;
--bn-chip-neutral-dot:#8FB0A9;
--bn-danger-ink:       #FF9C94;
--bn-danger-fill-ink:  #3A0D09;
--bn-danger-pressed:   #E88A82;
--bn-chip-danger-bg:   #4A1F1B;
--bn-chip-danger-ink:  #FFB4AC;
--bn-btn-primary-bg:        #D5EDE5;
--bn-btn-primary-ink:       #0B2E2A;
--bn-btn-primary-hover:     #EAF6F1;
--bn-btn-primary-pressed:   #B9DDD1;
--bn-btn-secondary-hover:   #1C4A44;
--bn-btn-secondary-pressed: #22564E;
--bn-btn-hover-line:        #7FDCCB;
--bn-link-hover:            #A6EBDD;
--bn-line:        #21403A;
--bn-line-strong: #548C82;
--bn-focus:       #7FE9CE;
--bn-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
--bn-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.32),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
--bn-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.38),
inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
*,
*::before,
*::after { box-sizing: border-box; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bn-surface);
color: var(--bn-ink);
font-family: var(--bn-font);
font-size: var(--bn-text-base);
line-height: var(--bn-leading-normal);
-webkit-font-smoothing: antialiased;
}
.bn-container {
width: 100%;
max-width: var(--bn-container);
margin-inline: auto;
padding-inline: var(--bn-space-4);
}
.bn-tile,
.bn-title,
.bn-text,
.bn-label,
.bn-kicker,
.bn-stat__value,
.bn-stat__label,
.bn-table tbody td,
.bn-table th[scope="row"] {
overflow-wrap: break-word;
overflow-wrap: anywhere;
}
.bn-tile:focus-visible,
.bn-btn:focus-visible,
.bn-field__input:focus-visible,
.bn-avatar:focus-visible,
.bn-icon-chip:focus-visible,
.bn-topbar__link:focus-visible,
.bn-footer a:focus-visible {
outline: var(--bn-stroke-focus) solid var(--bn-focus);
outline-offset: 2px;
}
.bn-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--bn-gap);
align-items: stretch;
}
.bn-grid--loose { gap: var(--bn-gap-lg); }
.bn-span-3  { grid-column: span 3; }
.bn-span-4  { grid-column: span 4; }
.bn-span-6  { grid-column: span 6; }
.bn-span-8  { grid-column: span 8; }
.bn-span-12 { grid-column: span 12; }
@media (max-width: 1023px) {
.bn-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bn-span-3  { grid-column: span 3; }
.bn-span-4  { grid-column: span 3; }
.bn-span-6  { grid-column: span 6; }
.bn-span-8  { grid-column: span 6; }
.bn-span-12 { grid-column: span 6; }
}
@media (max-width: 639px) {
.bn-grid { grid-template-columns: minmax(0, 1fr); }
.bn-span-3,
.bn-span-4,
.bn-span-6,
.bn-span-8,
.bn-span-12 { grid-column: span 1; }
.bn-tile--tall { grid-row: auto; }
}
.bn-tile {
display: flex;
flex-direction: column;
gap: var(--bn-space-3);
min-width: 0;
padding: var(--bn-tile-pad);
border-radius: var(--bn-radius-tile);
background: var(--bn-surface-elevated);
color: var(--bn-ink);
box-shadow: var(--bn-shadow-1);
}
@media (min-width: 640px) {
.bn-tile { padding: var(--bn-tile-pad-lg); }
}
.bn-tile--deep {
background: var(--bn-accent-deep);
color: var(--bn-ink-on-accent);
box-shadow: none;
}
.bn-tile--deep .bn-title,
.bn-tile--deep .bn-stat__value { color: var(--bn-ink-on-accent); }
.bn-tile--deep .bn-text,
.bn-tile--deep .bn-label,
.bn-tile--deep .bn-stat__unit,
.bn-tile--deep .bn-stat__label { color: var(--bn-ink-on-accent-dim); }
.bn-tile--deep .bn-kicker { color: var(--bn-ink-on-accent-dim); }
.bn-tile--deep .bn-kicker::before { background: var(--bn-brand-mint); }
.bn-tile--deep .bn-icon-chip {
background: var(--bn-brand-dark2);
color: var(--bn-brand-mint);
}
.bn-tile--wide { grid-column: span 8; }
.bn-tile--tall { grid-row: span 2; }
@media (max-width: 1023px) {
.bn-tile--wide { grid-column: span 6; }
}
@media (max-width: 639px) {
.bn-tile--wide { grid-column: span 1; }
}
.bn-tile--flat {
box-shadow: none;
border: var(--bn-stroke-hair) solid var(--bn-line);
}
.bn-tile--well {
background: var(--bn-surface-well);
box-shadow: none;
border: 1px solid var(--bn-line);
}
.bn-tile--media { padding: 0; overflow: hidden; }
.bn-tile--media > img,
.bn-tile--media > video {
display: block;
width: 100%;
height: auto;
}
.bn-kicker {
display: flex;
align-items: center;
gap: var(--bn-space-2);
margin: 0;
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
font-weight: var(--bn-weight-bold);
letter-spacing: var(--bn-tracking-kicker);
line-height: 1.4;
text-transform: uppercase;
}
.bn-kicker::before {
content: "";
flex: 0 0 auto;
width: var(--bn-dot);
height: var(--bn-dot);
border-radius: var(--bn-radius-pill);
background: var(--bn-accent-teal);
}
.bn-title {
margin: 0;
color: var(--bn-ink);
font-size: var(--bn-text-xl);
font-weight: var(--bn-weight-bold);
letter-spacing: var(--bn-tracking-tight);
line-height: var(--bn-leading-tight);
text-wrap: balance;
}
.bn-title--hero { font-size: var(--bn-text-3xl); }
.bn-title--lg   { font-size: var(--bn-text-2xl); }
.bn-title--sm   { font-size: var(--bn-text-lg); }
.bn-text {
margin: 0;
color: var(--bn-ink-dim);
font-size: var(--bn-text-sm);
line-height: var(--bn-leading-normal);
max-width: 68ch;
}
.bn-text--lead {
color: var(--bn-ink);
font-size: var(--bn-text-base);
}
.bn-text strong { color: var(--bn-ink); font-weight: var(--bn-weight-semibold); }
.bn-label {
display: block;
margin: 0;
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-bold);
letter-spacing: var(--bn-tracking-caps);
line-height: 1.4;
text-transform: uppercase;
}
.bn-stat {
display: flex;
flex-direction: column;
gap: var(--bn-space-1);
}
.bn-stat__value {
display: flex;
align-items: baseline;
gap: 0.18em;
color: var(--bn-ink);
font-size: var(--bn-text-stat);
font-weight: var(--bn-weight-bold);
letter-spacing: var(--bn-tracking-stat);
line-height: 1;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.bn-stat__unit {
color: var(--bn-ink-dim);
font-size: 0.5em;
font-weight: var(--bn-weight-bold);
letter-spacing: var(--bn-tracking-stat);
}
.bn-stat__label {
color: var(--bn-ink-dim);
font-size: var(--bn-text-lg);
font-weight: var(--bn-weight-regular);
line-height: var(--bn-leading-snug);
}
.bn-stat--teal .bn-stat__value { color: var(--bn-accent-teal-ink); }
.bn-stat--sm .bn-stat__value { font-size: var(--bn-text-2xl); }
.bn-stat-row {
display: flex;
flex-wrap: wrap;
gap: var(--bn-space-6) var(--bn-space-8);
}
.bn-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bn-space-2);
min-height: 29px;
min-width: 115px;
padding: var(--bn-space-1) var(--bn-space-3);
border-radius: var(--bn-radius-pill);
background: var(--bn-chip-bg);
color: var(--bn-chip-ink);
font-size: var(--bn-text-xs);
font-weight: var(--bn-weight-bold);
letter-spacing: 0;
line-height: 1.5;
white-space: nowrap;
}
.bn-chip--auto { min-width: 0; }
.bn-chip--dot::before {
content: "";
flex: 0 0 auto;
width: var(--bn-dot);
height: var(--bn-dot);
border-radius: var(--bn-radius-pill);
background: currentColor;
}
.bn-chip--ok {
background: var(--bn-chip-ok-bg);
color: var(--bn-chip-ok-ink);
}
.bn-chip--ok.bn-chip--dot::before { background: var(--bn-chip-ok-dot); }
.bn-chip--warn {
background: var(--bn-chip-warn-bg);
color: var(--bn-chip-warn-ink);
}
.bn-chip--warn.bn-chip--dot::before { background: var(--bn-chip-warn-dot); }
.bn-chip--neutral {
background: var(--bn-chip-neutral-bg);
color: var(--bn-chip-neutral-ink);
}
.bn-chip--neutral.bn-chip--dot::before { background: var(--bn-chip-neutral-dot); }
.bn-tile--deep .bn-chip {
background: rgba(234, 244, 240, 0.12);
color: var(--bn-ink-on-accent);
}
.bn-tile--deep .bn-chip--dot::before { background: var(--bn-brand-mint); }
a.bn-chip,
button.bn-chip {
position: relative;
min-height: 28px;
padding: var(--bn-space-1) var(--bn-space-3);
border: 1px solid var(--bn-line-strong);
cursor: pointer;
font-family: inherit;
font-weight: var(--bn-weight-semibold);
line-height: 18px;
text-decoration: none;
}
a.bn-chip:not(.bn-chip--dot)::before,
button.bn-chip:not(.bn-chip--dot)::before {
content: "\203A";
order: 2;
font-size: 10px;
line-height: 1;
}
a.bn-chip::after,
button.bn-chip::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9px;
bottom: -9px;
}
@media (hover: hover) {
a.bn-chip:hover,
button.bn-chip:hover {
border-color: var(--bn-btn-hover-line);
background: var(--bn-btn-secondary-hover);
}
}
a.bn-chip:active,
button.bn-chip:active { background: var(--bn-btn-secondary-pressed); }
.bn-chip-row {
display: flex;
flex-wrap: wrap;
gap: var(--bn-space-2);
}
.bn-icon-chip {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: var(--bn-radius-chip);
background: var(--bn-chip-bg);
color: var(--bn-accent-green);
}
.bn-icon-chip > svg {
width: 21px;
height: 21px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: var(--bn-stroke);
stroke-linecap: round;
stroke-linejoin: round;
}
.bn-icon-chip--lg { width: 56px; height: 56px; border-radius: var(--bn-radius-tile); }
.bn-icon-chip--lg > svg { width: 24px; height: 24px; }
.bn-icon-chip--teal { color: var(--bn-accent-teal-ink); }
.bn-icon-chip--deep { background: var(--bn-accent-deep); color: var(--bn-brand-mint); }
a.bn-icon-chip,
button.bn-icon-chip {
min-width: var(--bn-tap);
min-height: var(--bn-tap);
border: 0;
cursor: pointer;
}
.bn-btn,
.btn {
--_btn-bg:          var(--bn-btn-primary-bg);
--_btn-ink:         var(--bn-btn-primary-ink);
--_btn-line:        transparent;
--_btn-bg-hover:    var(--bn-btn-primary-hover);
--_btn-ink-hover:   var(--bn-btn-primary-ink);
--_btn-line-hover:  transparent;
--_btn-bg-active:   var(--bn-btn-primary-pressed);
--_btn-line-active: transparent;
--_btn-deco-hover:  none;
--_btn-h:   var(--bn-btn-h-md);
--_btn-py:  10px;
--_btn-px:  18px;
--_btn-fs:  var(--bn-text-sm);
--_btn-lh:  18px;
--_btn-hit: 3px;
--_btn-radius: var(--bn-radius-pill);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: auto;
min-height: var(--_btn-h);
padding: var(--_btn-py) var(--_btn-px);
border: 1px solid var(--_btn-line);
border-radius: var(--_btn-radius);
background: var(--_btn-bg);
color: var(--_btn-ink);
font-family: inherit;
font-size: var(--_btn-fs);
font-weight: var(--bn-weight-semibold);
line-height: var(--_btn-lh);
letter-spacing: 0;
text-align: center;
text-decoration: none;
text-transform: none;
white-space: normal;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.bn-btn::after,
.btn::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(-1 * var(--_btn-hit));
bottom: calc(-1 * var(--_btn-hit));
}
@media (hover: hover) {
.bn-btn:hover,
.btn:hover {
background: var(--_btn-bg-hover);
border-color: var(--_btn-line-hover);
color: var(--_btn-ink-hover);
text-decoration: var(--_btn-deco-hover);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
}
.bn-btn:active,
.btn:active {
background: var(--_btn-bg-active);
border-color: var(--_btn-line-active);
color: var(--_btn-ink-hover);
}
.bn-btn:focus-visible,
.btn:focus-visible {
outline: var(--bn-stroke-focus) solid var(--bn-focus);
outline-offset: 2px;
}
.bn-btn[disabled],
.bn-btn[aria-disabled="true"],
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
}
.bn-btn--sm {
--_btn-h:   var(--bn-btn-h-sm);
--_btn-py:  6px;
--_btn-px:  14px;
--_btn-fs:  var(--bn-text-xs);
--_btn-hit: 7px;
}
.bn-btn--block {
--_btn-h:   var(--bn-btn-h-lg);
--_btn-py:  11px;
--_btn-px:  20px;
--_btn-fs:  16px;
--_btn-lh:  20px;
--_btn-hit: 1px;
width: 100%;
}
.bn-btn--secondary {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-ink);
--_btn-line:        var(--bn-line-strong);
--_btn-bg-hover:    var(--bn-btn-secondary-hover);
--_btn-ink-hover:   var(--bn-ink);
--_btn-line-hover:  var(--bn-btn-hover-line);
--_btn-bg-active:   var(--bn-btn-secondary-pressed);
--_btn-line-active: var(--bn-btn-hover-line);
}
.bn-btn--quiet {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-accent-teal-ink);
--_btn-bg-hover:    transparent;
--_btn-ink-hover:   var(--bn-link-hover);
--_btn-bg-active:   transparent;
--_btn-deco-hover:  underline;
--_btn-h:   var(--bn-btn-h-sm);
--_btn-py:  6px;
--_btn-px:  4px;
--_btn-hit: 7px;
--_btn-radius: var(--bn-radius-xs);
}
.bn-btn--quiet:active { opacity: 0.8; }
.bn-btn--quiet-neutral {
--_btn-ink:       var(--bn-ink-dim);
--_btn-ink-hover: var(--bn-ink);
}
.bn-btn--danger {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-danger-ink);
--_btn-line:        var(--bn-danger-ink);
--_btn-bg-hover:    var(--bn-danger-ink);
--_btn-ink-hover:   var(--bn-danger-fill-ink);
--_btn-line-hover:  var(--bn-danger-ink);
--_btn-bg-active:   var(--bn-danger-pressed);
--_btn-line-active: var(--bn-danger-pressed);
}
.bn-btn > svg,
.btn > svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.bn-btn--sm > svg { width: 16px; height: 16px; }
.bn-tile--deep .bn-btn {
--_btn-bg:        var(--bn-brand-mint);
--_btn-ink:       var(--bn-brand-deep);
--_btn-bg-hover:  var(--bn-brand-mint-soft);
--_btn-ink-hover: var(--bn-brand-deep);
--_btn-bg-active: var(--bn-brand-mint);
}
.bn-tile--deep .bn-btn--secondary {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-ink-on-accent);
--_btn-line:        rgba(234, 244, 240, 0.35);
--_btn-bg-hover:    rgba(234, 244, 240, 0.12);
--_btn-ink-hover:   var(--bn-ink-on-accent);
--_btn-line-hover:  var(--bn-brand-mint);
--_btn-bg-active:   rgba(234, 244, 240, 0.18);
--_btn-line-active: var(--bn-brand-mint);
}
.bn-tile--deep .bn-btn--quiet {
--_btn-bg:        transparent;
--_btn-ink:       var(--bn-brand-mint);
--_btn-bg-hover:  transparent;
--_btn-ink-hover: var(--bn-ink-on-accent);
--_btn-bg-active: transparent;
}
.bn-tile--deep { --bn-focus: var(--bn-brand-mint); }
.bn-field {
display: flex;
flex-direction: column;
gap: var(--bn-space-2);
}
.bn-field__label {
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-semibold);
letter-spacing: var(--bn-tracking-caps);
text-transform: uppercase;
}
.bn-field__input,
.bn-field select.bn-field__input,
.bn-field textarea.bn-field__input {
width: 100%;
min-height: var(--bn-tap);
padding: var(--bn-space-3) var(--bn-space-4);
border: var(--bn-stroke) solid var(--bn-line-strong);
border-radius: var(--bn-radius-sm);
background: var(--bn-surface-elevated);
color: var(--bn-ink);
font-family: inherit;
font-size: 16px;
line-height: 1.4;
-webkit-appearance: none;
appearance: none;
}
.bn-field textarea.bn-field__input {
min-height: 96px;
resize: vertical;
}
.bn-field__input::placeholder {
color: var(--bn-ink-faint);
opacity: 1;
}
.bn-field__hint {
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
}
.bn-field--invalid .bn-field__input { border-color: var(--bn-chip-warn-dot); }
.bn-field--invalid .bn-field__hint  { color: var(--bn-chip-warn-ink); }
.bn-field__input[disabled] {
background: var(--bn-surface-sunken);
color: var(--bn-ink-dim);
cursor: not-allowed;
}
.bn-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bn-table {
width: 100%;
border-collapse: collapse;
font-size: var(--bn-text-sm);
}
.bn-table thead th {
padding: var(--bn-space-2) var(--bn-space-3);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-semibold);
letter-spacing: var(--bn-tracking-caps);
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.bn-table tbody td {
padding: var(--bn-space-3);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink);
vertical-align: middle;
}
.bn-table tbody tr:last-child td { border-bottom: 0; }
.bn-table th[scope="row"] {
font-weight: var(--bn-weight-semibold);
text-align: left;
padding: var(--bn-space-3);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
}
.bn-table .bn-num {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.bn-table--zebra tbody tr:nth-child(even) { background: var(--bn-surface-sunken); }
.bn-table caption {
caption-side: top;
padding-bottom: var(--bn-space-3);
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
text-align: left;
}
.bn-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: var(--bn-radius-pill);
overflow: hidden;
background: var(--bn-chip-bg);
color: var(--bn-accent-green);
font-size: var(--bn-text-xs);
font-weight: var(--bn-weight-bold);
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
}
.bn-avatar > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bn-avatar--sm { width: 28px; height: 28px; font-size: var(--bn-text-2xs); }
.bn-avatar--lg { width: 56px; height: 56px; font-size: var(--bn-text-sm); }
.bn-avatar--xl { width: 88px; height: 88px; font-size: var(--bn-text-lg); }
a.bn-avatar,
button.bn-avatar { min-width: var(--bn-tap); min-height: var(--bn-tap); border: 0; cursor: pointer; }
.bn-avatar-stack { display: flex; align-items: center; }
.bn-avatar-stack > .bn-avatar {
margin-left: -10px;
box-shadow: 0 0 0 2px var(--bn-surface-elevated);
}
.bn-avatar-stack > .bn-avatar:first-child { margin-left: 0; }
.bn-topbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--bn-space-2) var(--bn-space-4);
min-height: 60px;
padding: var(--bn-space-2) var(--bn-space-4);
background: var(--bn-surface);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
}
.bn-topbar--sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 20;
-webkit-backdrop-filter: saturate(140%) blur(10px);
backdrop-filter: saturate(140%) blur(10px);
}
.bn-topbar__brand {
display: inline-flex;
align-items: center;
gap: var(--bn-space-2);
min-width: 0;
overflow: hidden;
color: var(--bn-ink);
font-size: var(--bn-text-base);
font-weight: var(--bn-weight-bold);
letter-spacing: var(--bn-tracking-tight);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.bn-topbar__nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--bn-space-1);
min-width: 0;
margin-left: auto;
}
.bn-topbar__link {
display: inline-flex;
align-items: center;
min-height: var(--bn-tap);
padding: 0 var(--bn-space-3);
border-radius: var(--bn-radius-sm);
color: var(--bn-ink-dim);
font-size: var(--bn-text-sm);
font-weight: var(--bn-weight-medium);
text-decoration: none;
}
.bn-topbar__link[aria-current] {
color: var(--bn-ink);
font-weight: var(--bn-weight-semibold);
box-shadow: inset 0 calc(-1 * var(--bn-stroke-thick)) 0 0 var(--bn-accent-teal);
}
@media (max-width: 639px) {
.bn-topbar { gap: var(--bn-space-2); }
.bn-topbar__nav { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bn-topbar__link { padding: 0 var(--bn-space-2); }
.bn-chip { min-width: 0; }
}
.bn-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bn-space-3) var(--bn-space-5);
padding: var(--bn-space-6) var(--bn-space-4);
border-top: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-bold);
}
.bn-footer a {
display: inline-flex;
align-items: center;
min-height: var(--bn-tap);
color: var(--bn-ink-dim);
text-decoration: none;
border-bottom: var(--bn-stroke-hair) solid var(--bn-line-strong);
}
.bn-footer__spacer { margin-left: auto; }
.bn-rule {
height: var(--bn-stroke-hair);
margin: 0;
border: 0;
background: var(--bn-line);
}
.bn-push { margin-top: auto; }
.bn-row {
display: flex;
align-items: center;
gap: var(--bn-space-3);
min-width: 0;
}
.bn-row--between { justify-content: space-between; }
.bn-row--wrap { flex-wrap: wrap; }
.bn-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.bn-shot {
display: block;
width: 100%;
height: auto;
border-radius: var(--bn-radius-md);
background: var(--bn-surface-sunken);
}
.bn-chart {
--bn-series-1: var(--bn-brand-deep);
--bn-series-2: var(--bn-brand-teal);
--bn-series-3: var(--bn-brand-mint);
--bn-series-4: var(--bn-brand-sage-pale);
--bn-series-5: var(--bn-brand-teal-soft);
--bn-series-6: var(--bn-brand-green);
}
@media (prefers-contrast: more) {
:root,
:root:not([data-bn-theme="light"]),
:root[data-bn-theme="light"],
:root[data-bn-theme="dark"] {
--bn-ink-dim:            var(--bn-ink);
--bn-ink-faint:          var(--bn-ink);
--bn-ink-on-accent-dim:  var(--bn-ink-on-accent);
--bn-line:               var(--bn-line-strong);
--bn-stroke-hair:        1.5px;
}
}
:root {
--bg:            var(--bn-surface);
--panel:         var(--bn-surface-elevated);
--panel-2:       var(--bn-surface-sunken);
--border:        var(--bn-line);
--border-bright: var(--bn-line-strong);
--text:          var(--bn-ink);
--text-dim:      var(--bn-ink-dim);
--text-faint:    var(--bn-ink-faint);
--accent:        var(--bn-accent-teal-ink);
--accent-dim:    var(--bn-accent-green);
--amber:         var(--bn-chip-warn-dot);
--red:           var(--bn-danger-ink);
--shadow:        var(--bn-shadow-2);
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
@supports (min-height: 100dvh) {
body { min-height: 100dvh; }
}
::selection {
background: var(--bn-accent-mint);
color: var(--bn-brand-deep);
}
main {
flex: 1 1 auto;
width: 100%;
max-width: calc(var(--win-w, 620px) + 2 * var(--bn-space-4));
margin-inline: auto;
padding: var(--bn-space-8) var(--bn-space-4) var(--bn-space-12);
}
@media (min-width: 640px) {
main { padding: var(--bn-space-12) var(--bn-space-4) var(--bn-space-16); }
}
a {
color: var(--bn-accent-teal-ink);
text-decoration: underline;
text-decoration-thickness: from-font;
}
.btn,
.badge,
.topbar a,
.ls-row .name > a { text-decoration: none; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: var(--bn-stroke-focus) solid var(--bn-focus);
outline-offset: 2px;
}
footer.sitefoot {
padding: var(--bn-space-6) var(--bn-space-4);
border-top: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink-faint);
font-size: var(--bn-text-xs);
text-align: center;
}
.win-body,
.pad,
.flash,
.prompt,
.ls-row .name,
.ls-row .desc,
.ls-row .meta,
.linkbox,
.linkbox__url,
.empty,
.hint,
.sub {
overflow-wrap: break-word;
overflow-wrap: anywhere;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--bn-space-2) var(--bn-space-4);
min-height: var(--bn-tap);
padding: var(--bn-space-2) var(--bn-space-4);
background: var(--bn-surface);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink-dim);
font-size: var(--bn-text-sm);
}
.topbar .brand {
display: inline-flex;
align-items: center;
gap: var(--bn-space-2);
min-width: 0;
overflow: hidden;
color: var(--bn-ink);
font-size: var(--bn-text-base);
font-weight: var(--bn-weight-bold);
letter-spacing: var(--bn-tracking-tight);
text-overflow: ellipsis;
white-space: nowrap;
}
.brand .dot { color: var(--bn-accent-teal); }
.topbar nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--bn-space-1);
}
.topbar nav a {
display: inline-flex;
align-items: center;
min-height: var(--bn-tap);
padding: 0 var(--bn-space-3);
border-radius: var(--bn-radius-sm);
color: var(--bn-ink-dim);
font-size: var(--bn-text-sm);
font-weight: var(--bn-weight-medium);
}
.topbar nav a:hover { color: var(--bn-ink); }
.topbar .brand .who {
color: var(--bn-ink-faint);
font-size: var(--bn-text-sm);
font-weight: var(--bn-weight-regular);
}
@media (max-width: 639px) {
.topbar .brand .who { display: none; }
.topbar nav a { padding: 0 var(--bn-space-2); }
}
.win {
width: 100%;
max-width: var(--win-w, 620px);
margin-inline: auto;
overflow: hidden;
border-radius: var(--bn-radius-tile);
background: var(--bn-surface-elevated);
color: var(--bn-ink);
box-shadow: var(--bn-shadow-1);
}
.win-bar {
display: flex;
align-items: center;
gap: var(--bn-space-2);
padding: var(--bn-space-3) var(--bn-tile-pad);
background: var(--bn-surface-elevated);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
}
.win-bar .traffic,
.win-bar .traffic span,
.win-bar .traffic .r,
.win-bar .traffic .y,
.win-bar .traffic .g { display: none; }
.win-bar .path {
margin-left: 0;
min-width: 0;
overflow: hidden;
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-semibold);
letter-spacing: var(--bn-tracking-caps);
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.win-body { padding: var(--bn-tile-pad); }
@media (min-width: 640px) {
.win-bar  { padding: var(--bn-space-3) var(--bn-tile-pad-lg); }
.win-body { padding: var(--bn-tile-pad-lg); }
}
.win-body > .ls-head:first-child { border-top: 0; }
.win-body > table.log:first-child thead th { border-top: 0; }
.prompt {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--bn-space-1);
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-semibold);
letter-spacing: var(--bn-tracking-caps);
}
.prompt .user { color: var(--bn-ink-faint); }
.prompt .sep  { display: none; }
.prompt .path { color: var(--bn-accent-teal-ink); }
.cursor {
display: none;
animation: none;
}
h1, h2 {
margin: 0 0 var(--bn-space-2);
color: var(--bn-ink);
font-family: inherit;
letter-spacing: var(--bn-tracking-tight);
line-height: var(--bn-leading-tight);
}
h1 {
font-size: var(--bn-text-xl);
font-weight: var(--bn-weight-bold);
}
h2 {
font-size: var(--bn-text-lg);
font-weight: var(--bn-weight-semibold);
}
p.sub,
.sub {
margin: 0 0 var(--bn-space-5);
color: var(--bn-ink-dim);
font-size: var(--bn-text-sm);
line-height: var(--bn-leading-normal);
}
.field { margin-bottom: var(--bn-space-4); }
.field label {
display: block;
margin-bottom: var(--bn-space-2);
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-semibold);
letter-spacing: var(--bn-tracking-caps);
text-transform: uppercase;
}
.field label::before { content: ""; }
.field input,
.field select,
.field textarea {
width: 100%;
min-height: var(--bn-tap);
padding: var(--bn-space-3) var(--bn-space-4);
border: var(--bn-stroke) solid var(--bn-line-strong);
border-radius: var(--bn-radius-sm);
background: var(--bn-surface-elevated);
color: var(--bn-ink);
font-family: inherit;
font-size: 16px;
line-height: 1.4;
-webkit-appearance: none;
appearance: none;
}
.field textarea {
min-height: calc(3 * var(--bn-tap));
resize: vertical;
}
.field select { cursor: pointer; }
.field input::placeholder,
.field textarea::placeholder {
color: var(--bn-ink-faint);
opacity: 1;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--bn-focus); }
.field input[disabled],
.field select[disabled],
.field textarea[disabled] {
background: var(--bn-surface-sunken);
color: var(--bn-ink-dim);
cursor: not-allowed;
}
.field input[type="file"] {
padding: var(--bn-space-2);
background: var(--bn-surface-sunken);
cursor: pointer;
}
.field input[type="file"]::file-selector-button {
min-height: var(--bn-tap);
margin-right: var(--bn-space-3);
padding: 0 var(--bn-space-4);
border: 0;
border-radius: var(--bn-radius-pill);
background: var(--bn-accent-deep);
color: var(--bn-ink-on-accent);
font-family: inherit;
font-size: var(--bn-text-sm);
font-weight: var(--bn-weight-semibold);
cursor: pointer;
}
input[type="checkbox"],
.field input[type="checkbox"] {
width: var(--bn-space-5);
height: var(--bn-space-5);
min-height: 0;
margin: 0;
padding: 0;
flex: 0 0 auto;
accent-color: var(--bn-accent-deep);
-webkit-appearance: auto;
appearance: auto;
cursor: pointer;
}
.field input[type="date"],
.field input[type="number"] {
min-height: var(--bn-tap);
font-variant-numeric: tabular-nums;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.hint {
color: var(--bn-ink-dim);
font-size: var(--bn-text-2xs);
}
.field .hint {
margin-top: var(--bn-space-1);
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
}
.btn:where(.ghost) {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-ink);
--_btn-line:        var(--bn-line-strong);
--_btn-bg-hover:    var(--bn-btn-secondary-hover);
--_btn-ink-hover:   var(--bn-ink);
--_btn-line-hover:  var(--bn-btn-hover-line);
--_btn-bg-active:   var(--bn-btn-secondary-pressed);
--_btn-line-active: var(--bn-btn-hover-line);
}
.btn:where(.small) {
--_btn-h:   var(--bn-btn-h-sm);
--_btn-py:  6px;
--_btn-px:  14px;
--_btn-fs:  var(--bn-text-xs);
--_btn-hit: 7px;
}
.btn:where(.block),
.field + .btn {
--_btn-h:   var(--bn-btn-h-lg);
--_btn-py:  11px;
--_btn-px:  20px;
--_btn-fs:  16px;
--_btn-lh:  20px;
--_btn-hit: 1px;
width: 100%;
}
.btn:where(.danger),
:where(form[data-confirm], form[onsubmit]) .btn {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-danger-ink);
--_btn-line:        var(--bn-danger-ink);
--_btn-bg-hover:    var(--bn-danger-ink);
--_btn-ink-hover:   var(--bn-danger-fill-ink);
--_btn-line-hover:  var(--bn-danger-ink);
--_btn-bg-active:   var(--bn-danger-pressed);
--_btn-line-active: var(--bn-danger-pressed);
}
.btn:where(.amber) {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-chip-warn-ink);
--_btn-line:        var(--bn-chip-warn-dot);
--_btn-bg-hover:    var(--bn-chip-warn-bg);
--_btn-ink-hover:   var(--bn-chip-warn-ink);
--_btn-line-hover:  var(--bn-chip-warn-dot);
--_btn-bg-active:   var(--bn-chip-warn-bg);
--_btn-line-active: var(--bn-chip-warn-dot);
}
.ls-row .name .row-actions > a.btn[download] {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-accent-teal-ink);
--_btn-line:        transparent;
--_btn-bg-hover:    transparent;
--_btn-ink-hover:   var(--bn-link-hover);
--_btn-line-hover:  transparent;
--_btn-bg-active:   transparent;
--_btn-line-active: transparent;
--_btn-deco-hover:  underline;
--_btn-py:  6px;
--_btn-px:  4px;
--_btn-fs:  var(--bn-text-sm);
--_btn-radius: var(--bn-radius-xs);
}
.ls-row .name .row-actions > a.btn[download]::before {
content: "\2193";
font-size: 14px;
line-height: 1;
}
.disclosure > summary.btn {
--_btn-bg:          transparent;
--_btn-ink:         var(--bn-ink-dim);
--_btn-line:        transparent;
--_btn-bg-hover:    transparent;
--_btn-ink-hover:   var(--bn-ink);
--_btn-line-hover:  transparent;
--_btn-bg-active:   transparent;
--_btn-line-active: transparent;
--_btn-deco-hover:  underline;
--_btn-px:  4px;
--_btn-radius: var(--bn-radius-xs);
}
.disclosure > summary.btn::before {
content: "\25BE";
order: 2;
font-size: 12px;
line-height: 1;
}
.disclosure[open] > summary.btn::before { transform: rotate(180deg); }
.row-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bn-space-4) var(--bn-space-2);
}
.row-actions + .row-actions { margin-top: var(--bn-space-4); }
.row-actions form { margin: 0; }
.foot-link {
margin-top: var(--bn-space-5);
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
text-align: center;
}
.flash {
margin-bottom: var(--bn-space-5);
padding: var(--bn-space-3) var(--bn-space-4);
border: var(--bn-stroke-hair) solid transparent;
border-radius: var(--bn-radius-sm);
font-size: var(--bn-text-sm);
}
.flash.err {
background: var(--bn-chip-danger-bg);
border-color: var(--bn-danger-ink);
color: var(--bn-chip-danger-ink);
}
.flash.ok {
background: var(--bn-chip-ok-bg);
border-color: var(--bn-chip-ok-dot);
color: var(--bn-chip-ok-ink);
}
.flash.info {
background: var(--bn-chip-neutral-bg);
border-color: var(--bn-chip-neutral-dot);
color: var(--bn-chip-neutral-ink);
}
.ls-head,
.ls-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 14ch;
gap: var(--bn-space-3);
align-items: center;
padding: var(--bn-space-3) var(--bn-tile-pad);
}
.ls-head {
padding-block: var(--bn-space-2);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-semibold);
letter-spacing: var(--bn-tracking-caps);
text-transform: uppercase;
}
.ls-row { border-bottom: var(--bn-stroke-hair) solid var(--bn-line); }
.ls-row:last-child { border-bottom: none; }
.ls-row:hover { background: var(--bn-surface-hover); }
.perms { display: none; }
.ls-row .name > a {
color: var(--bn-ink);
font-size: var(--bn-text-sm);
font-weight: var(--bn-weight-semibold);
}
.ls-row .name > a:hover {
color: var(--bn-accent-teal-ink);
text-decoration: underline;
}
.ls-row .name > .row-actions { margin-top: var(--bn-space-3); }
.ls-row .desc {
margin-top: var(--bn-space-1);
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
}
.ls-row .meta {
color: var(--bn-ink-faint);
font-size: var(--bn-text-xs);
font-variant-numeric: tabular-nums;
text-align: right;
}
@media (max-width: 639px) {
.ls-head { display: none; }
.ls-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--bn-space-2);
}
.ls-row .meta { text-align: left; }
}
table.log,
.log {
width: 100%;
border-collapse: collapse;
font-size: var(--bn-text-sm);
}
table.log th,
.log th {
padding: var(--bn-space-2) var(--bn-space-3);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink-faint);
font-size: var(--bn-text-2xs);
font-weight: var(--bn-weight-semibold);
letter-spacing: var(--bn-tracking-caps);
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
table.log td,
.log td {
padding: var(--bn-space-3);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink);
vertical-align: middle;
}
table.log tr:last-child td,
.log tr:last-child td { border-bottom: none; }
.win-body:has(> table),
.win-body:has(> .log) {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@supports not selector(:has(*)) {
@media (max-width: 639px) {
table.log,
.log {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.log thead,
.log thead { display: table-header-group; }
table.log tbody,
.log tbody { display: table-row-group; }
}
}
table.log td,
.log td {
overflow-wrap: break-word;
overflow-wrap: anywhere;
}
.badge {
display: inline-block;
max-width: 100%;
overflow: hidden;
padding: 2px 10px;
border: 0;
border-radius: var(--bn-radius-pill);
background: var(--bn-chip-neutral-bg);
color: var(--bn-chip-neutral-ink);
font-size: var(--bn-text-xs);
font-weight: var(--bn-weight-semibold);
letter-spacing: 0;
line-height: 20px;
text-overflow: ellipsis;
text-transform: none;
vertical-align: middle;
white-space: nowrap;
}
.badge.pending::before,
.badge.approved::before,
.badge.ok::before,
.badge.rejected::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 6px;
border-radius: 50%;
background: currentColor;
vertical-align: 1px;
}
.badge.pending {
background: var(--bn-chip-warn-bg);
color: var(--bn-chip-warn-ink);
}
.badge.pending::before { background: var(--bn-chip-warn-dot); }
.badge.approved,
.badge.ok {
background: var(--bn-chip-ok-bg);
color: var(--bn-chip-ok-ink);
}
.badge.approved::before,
.badge.ok::before { background: var(--bn-chip-ok-dot); }
.badge.rejected {
background: var(--bn-chip-danger-bg);
color: var(--bn-chip-danger-ink);
}
.badge.rejected::before { background: var(--bn-danger-ink); }
.badge.admin {
background: var(--bn-chip-neutral-bg);
color: var(--bn-chip-neutral-ink);
}
.section-gap { margin-top: var(--bn-space-8); }
.empty {
padding: var(--bn-space-6) var(--bn-tile-pad);
color: var(--bn-ink-faint);
font-size: var(--bn-text-sm);
text-align: center;
}
table.log td.empty,
.log td.empty {
padding: var(--bn-space-6) var(--bn-space-3);
color: var(--bn-ink-faint);
text-align: center;
}
.pagenav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bn-space-3);
margin-bottom: var(--bn-space-4);
}
.pagenav .btn { width: auto; }
@media (max-width: 639px) {
.pagenav .btn { flex: 1 1 auto; }
}
.pad { padding: var(--bn-tile-pad); }
@media (min-width: 640px) {
.pad { padding: var(--bn-tile-pad-lg); }
}
.src-name {
color: var(--bn-ink);
font-weight: var(--bn-weight-semibold);
}
.mono {
font-family: var(--bn-font-mono);
font-size: var(--bn-text-xs);
font-variant-numeric: tabular-nums;
}
#trDrop,
.dropzone {
padding: var(--bn-space-6) var(--bn-space-5);
border: var(--bn-stroke) dashed var(--bn-line-strong);
border-radius: var(--bn-radius-md);
background: var(--bn-surface-sunken);
color: var(--bn-ink-dim);
font-size: var(--bn-text-sm);
text-align: center;
cursor: pointer;
}
#trDrop:hover,
.dropzone:hover,
.dropzone.is-over { border-color: var(--bn-accent-teal-ink); }
.dropzone__hint {
margin-top: var(--bn-space-2);
color: var(--bn-ink-faint);
font-size: var(--bn-text-xs);
}
#trList,
.filelist { margin-top: var(--bn-space-4); }
.filelist__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bn-space-3);
padding: var(--bn-space-2) 0;
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
font-size: var(--bn-text-sm);
}
.filelist__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filelist__size {
color: var(--bn-ink-faint);
font-size: var(--bn-text-xs);
white-space: nowrap;
}
.filelist__origin {
color: var(--bn-accent-teal-ink);
font-weight: var(--bn-weight-semibold);
}
#trBrowser,
.nasbrowser {
margin-top: var(--bn-space-3);
overflow: hidden;
border: var(--bn-stroke-hair) solid var(--bn-line);
border-radius: var(--bn-radius-sm);
}
#trRoots,
.nasbrowser__roots {
display: flex;
flex-wrap: wrap;
gap: var(--bn-space-2);
padding: var(--bn-space-3);
background: var(--bn-surface-sunken);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
}
#trCrumbs,
.nasbrowser__crumbs {
padding: var(--bn-space-2) var(--bn-space-3);
border-bottom: var(--bn-stroke-hair) solid var(--bn-line);
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
}
#trEntries,
.nasbrowser__entries {
max-height: 40vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#trProgWrap,
.progress { margin-top: var(--bn-space-3); }
.progress__track {
height: var(--bn-space-2);
overflow: hidden;
border-radius: var(--bn-radius-pill);
background: var(--bn-surface-sunken);
}
#trProg,
.progress__bar {
height: 100%;
border-radius: var(--bn-radius-pill);
background: var(--bn-accent-teal);
}
#trProgTxt,
.progress__text {
margin-top: var(--bn-space-1);
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
font-variant-numeric: tabular-nums;
}
#trLink,
.linkbox {
margin-top: var(--bn-space-4);
padding: var(--bn-tile-pad);
border: var(--bn-stroke-hair) solid var(--bn-chip-ok-dot);
border-radius: var(--bn-radius-sm);
background: var(--bn-chip-ok-bg);
color: var(--bn-chip-ok-ink);
}
.linkbox__title {
margin-bottom: var(--bn-space-2);
font-size: var(--bn-text-sm);
font-weight: var(--bn-weight-semibold);
}
.linkbox__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bn-space-2);
}
#trLinkUrl,
.linkbox__url {
flex: 1 1 auto;
min-width: 0;
min-height: var(--bn-tap);
padding: var(--bn-space-3) var(--bn-space-4);
border: var(--bn-stroke) solid var(--bn-line-strong);
border-radius: var(--bn-radius-sm);
background: var(--bn-surface-elevated);
color: var(--bn-ink);
font-family: var(--bn-font-mono);
font-size: 16px;
}
.linkbox__note {
margin-top: var(--bn-space-2);
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
}
.bn-meter {
height: 6px;
border-radius: var(--bn-radius-pill);
background: var(--bn-surface-sunken);
overflow: hidden;
}
.bn-meter > i {
display: block;
height: 100%;
border-radius: var(--bn-radius-pill);
background: var(--bn-accent-green);
}
.bn-meter--tight > i { background: var(--bn-chip-warn-dot); }
a.bn-tile,
a.bn-tile:hover { text-decoration: none; }
@media (max-width: 639px) {
.col-opt { display: none; }
}
.ls-row--action { grid-template-columns: minmax(0, 1fr) auto; }
.nasbrowser__entries .filelist__row { padding-inline: var(--bn-tile-pad); }
.field--col {
flex: 1 1 0;
min-width: 0;
margin-bottom: 0;
}
.field--col-wide { flex-grow: 2; }
.bn-row--end { align-items: flex-end; }
.disclosure { min-width: 0; }
.disclosure > summary { list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure__body {
margin-top: var(--bn-space-3);
padding: var(--bn-space-4);
border: var(--bn-stroke-hair) solid var(--bn-line);
border-radius: var(--bn-radius-md);
background: var(--bn-surface-well);
}
.choices {
min-width: 0;
margin: 0 0 var(--bn-space-4);
padding: 0;
border: 0;
}
.choices > legend { margin-bottom: var(--bn-space-2); padding: 0; }
.choices__sub { padding-left: var(--bn-space-8); }
.choice {
display: flex;
align-items: center;
gap: var(--bn-space-3);
min-height: var(--bn-tap);
min-width: 0;
color: var(--bn-ink);
font-size: var(--bn-text-sm);
overflow-wrap: anywhere;
cursor: pointer;
}
input[type="radio"] {
width: var(--bn-space-5);
height: var(--bn-space-5);
min-height: 0;
margin: 0;
padding: 0;
flex: 0 0 auto;
accent-color: var(--bn-accent-deep);
-webkit-appearance: auto;
appearance: auto;
cursor: pointer;
}
.bn-shot--cover {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.bn-doc-head {
display: flex;
flex-direction: column;
gap: var(--bn-space-2);
margin: 0 0 var(--bn-space-6);
}
.bn-doc { position: relative; }
.bn-doc > .bn-doc__title { position: static; margin: 0; }
.bn-doc__open {
color: inherit;
text-decoration: none;
}
.bn-doc__open::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: var(--bn-radius-tile);
}
.bn-doc__open:focus-visible { outline: none; }
.bn-doc__open:focus-visible::after {
outline: var(--bn-stroke-focus) solid var(--bn-focus);
outline-offset: 2px;
}
.bn-tile--deep .bn-doc__open:focus-visible::after { outline-offset: -4px; }
.bn-doc > .bn-doc__foot,
.bn-doc > .bn-doc__versions {
position: relative;
z-index: auto;
}
.bn-doc .bn-dl,
.bn-doc .bn-vis {
position: relative;
z-index: 3;
}
.bn-doc__meta {
margin: 0;
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
font-variant-numeric: tabular-nums;
line-height: 1.4;
}
.bn-doc__desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.bn-tile--deep .bn-doc__desc {
-webkit-line-clamp: 4;
line-clamp: 4;
}
.bn-doc__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bn-space-4);
padding-top: var(--bn-space-3);
border-top: var(--bn-stroke-hair) solid var(--bn-line);
}
.bn-doc__versions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bn-space-2) var(--bn-space-3);
margin: 0;
color: var(--bn-ink-dim);
font-size: var(--bn-text-xs);
}
.bn-doc:target {
outline: var(--bn-stroke-thick) solid var(--bn-accent-teal);
outline-offset: 3px;
}
.bn-tile--deep .bn-doc__meta,
.bn-tile--deep .bn-doc__versions { color: var(--bn-ink-on-accent-dim); }
.bn-tile--deep .bn-doc__foot { border-top-color: rgba(234, 244, 240, 0.18); }
.bn-dl {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: var(--bn-btn-h-sm);
padding: 0 4px;
border-radius: var(--bn-radius-xs);
color: var(--bn-accent-teal-ink);
font-size: var(--bn-text-xs);
font-weight: var(--bn-weight-semibold);
line-height: 18px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.bn-dl::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -6px;
bottom: -6px;
}
.bn-dl > svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.bn-dl__size {
color: var(--bn-ink-faint);
font-weight: var(--bn-weight-regular);
}
@media (hover: hover) {
.bn-dl:hover {
color: var(--bn-link-hover);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
}
.bn-dl:active { opacity: 0.8; }
.bn-tile--deep .bn-dl { color: var(--bn-brand-mint); }
.bn-tile--deep .bn-dl:hover { color: var(--bn-ink-on-accent); }
.bn-tile--deep .bn-dl__size { color: var(--bn-ink-on-accent-dim); }
.bn-dl-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--bn-space-2) var(--bn-space-4);
}
.bn-vis {
min-width: 0;
max-width: 100%;
margin-left: auto;
}
.bn-vis[open] { flex: 1 1 100%; }
.bn-vis__toggle {
position: relative;
display: flex;
justify-content: flex-end;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.bn-vis__toggle::-webkit-details-marker { display: none; }
.bn-vis__toggle::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -8px;
bottom: -8px;
}
.bn-vis__toggle:focus-visible { outline: none; }
.bn-vis__toggle:focus-visible .bn-chip {
outline: var(--bn-stroke-focus) solid var(--bn-focus);
outline-offset: 2px;
}
.bn-vis .bn-chip {
gap: 6px;
max-width: 100%;
min-width: 0;
}
.bn-vis .bn-chip > svg {
flex: 0 0 auto;
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.bn-vis .bn-chip > .bn-vis__chev { width: 12px; height: 12px; }
.bn-vis__state {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bn-vis[open] .bn-vis__chev { transform: rotate(180deg); }
.bn-vis[open] .bn-chip { box-shadow: inset 0 0 0 1px currentColor; }
@media (hover: hover) {
.bn-vis__toggle:hover .bn-chip { box-shadow: inset 0 0 0 1px currentColor; }
}
.bn-vis__panel {
margin-top: var(--bn-space-2);
padding: var(--bn-space-4);
border: var(--bn-stroke-hair) solid var(--bn-line);
border-radius: var(--bn-radius-md);
background: var(--bn-surface-well);
color: var(--bn-ink);
}
.bn-vis__panel .choices { margin-bottom: var(--bn-space-3); }
.bn-tile--deep .bn-chip--warn {
background: var(--bn-chip-warn-bg);
color: var(--bn-chip-warn-ink);
}
.bn-tile--deep .bn-vis__panel {
--bn-focus: var(--bn-focus-surface);
background: var(--bn-surface-elevated);
border-color: transparent;
color: var(--bn-ink);
}
.bn-tile--deep .bn-vis__panel .bn-label { color: var(--bn-ink-faint); }
.bn-tile--deep .bn-vis__panel .bn-dl { color: var(--bn-accent-teal-ink); }
.bn-tile--deep .bn-vis__panel .bn-btn {
--_btn-bg:        var(--bn-btn-primary-bg);
--_btn-ink:       var(--bn-btn-primary-ink);
--_btn-bg-hover:  var(--bn-btn-primary-hover);
--_btn-ink-hover: var(--bn-btn-primary-ink);
--_btn-bg-active: var(--bn-btn-primary-pressed);
}
.bn-disk {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
align-items: center;
gap: var(--bn-space-3) var(--bn-space-6);
}
@media (max-width: 639px) {
.bn-disk { grid-template-columns: minmax(0, 1fr); }
}
.bn-page-foot {
display: flex;
justify-content: center;
margin-top: var(--bn-space-6);
}
.bn-filtres {
display: flex;
flex-wrap: wrap;
gap: var(--bn-space-2);
margin: 0 0 var(--bn-space-4);
}
.bn-filtres--sous { margin-top: calc(-1 * var(--bn-space-2)); }
.bn-filtres__nb {
font-weight: var(--bn-weight-semibold);
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.bn-filtres {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
padding: 10px 2px;
margin: 0 0 var(--bn-space-2);
}
.bn-filtres::-webkit-scrollbar { display: none; }
.bn-filtres > .bn-chip { flex: 0 0 auto; }
}
.bn-cat { margin-top: var(--bn-space-6); }
.bn-cat__titre {
margin: 0 0 var(--bn-space-3);
font-size: var(--bn-text-lg);
font-weight: var(--bn-weight-bold);
color: var(--bn-ink);
}
h3.bn-cat__titre { font-size: var(--bn-text-sm); }
.bn-cat__sous {
color: var(--bn-ink-dim);
font-weight: var(--bn-weight-semibold);
}
.bn-cat__sous::before { content: "· "; }
.bn-range select { width: 100%; max-width: 100%; font-size: 16px; }
.bn-range .field { margin-bottom: var(--bn-space-3); }
.bn-cat-admin__sous { padding-left: var(--bn-space-6); }
.bn-session-expiree {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
gap: var(--bn-space-3);
flex-wrap: wrap;
padding: var(--bn-space-3) var(--bn-space-4);
background: var(--bn-chip-warn-bg);
color: var(--bn-chip-warn-ink);
font-weight: var(--bn-weight-semibold);
text-align: center;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}
.bn-cat-admin__ligne td { border-top: 1px solid var(--bn-line); }
:root {
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-spring-soft: cubic-bezier(0.16, 0.84, 0.24, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-slow: 340ms;
--bn-stagger: 70ms;
--bn-stagger-cap: 10;
--bn-rise: 10px;
--dur-breathe: 2400ms;
--dur-sheen: 9s;
--dur-skeleton: 1400ms;
}
.bn-motion .bn-tile,
.bn-motion [data-reveal] {
opacity: 0;
transform: translate3d(0, var(--bn-rise), 0);
will-change: transform, opacity;
transition:
opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-spring-soft);
transition-delay: calc(min(var(--bn-i, 0), var(--bn-stagger-cap)) * var(--bn-stagger));
}
.bn-motion .bn-tile.is-in,
.bn-motion [data-reveal].is-in {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.bn-motion .bn-tile.is-in:not(:hover),
.bn-motion [data-reveal].is-in {
will-change: auto;
}
.bn-motion .bn-tile[data-motion="off"],
.bn-motion [data-reveal][data-motion="off"] {
opacity: 1;
transform: none;
transition: none;
}
.bn-motion .bn-tile .bn-kicker,
.bn-motion .bn-tile .bn-title,
.bn-motion .bn-tile .bn-stat,
.bn-motion .bn-tile .bn-chip,
.bn-motion .bn-tile .bn-icon-chip,
.bn-motion .bn-tile .bn-table tr {
animation: none;
transition-delay: 0s;
}
.bn-tile.is-clickable,
a.bn-tile,
button.bn-tile {
position: relative;
transition:
transform var(--dur-base) var(--ease-out),
background-color var(--dur-base) var(--ease-in-out);
}
.bn-tile.is-clickable::after,
a.bn-tile::after,
button.bn-tile::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
opacity: 0;
box-shadow: 0 18px 38px -18px rgba(11, 46, 42, 0.32);
transition: opacity var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.bn-tile.is-clickable:hover,
a.bn-tile:hover,
button.bn-tile:hover {
transform: translate3d(0, -2px, 0);
}
.bn-tile.is-clickable:hover::after,
a.bn-tile:hover::after,
button.bn-tile:hover::after {
opacity: 1;
}
}
.bn-tile.is-clickable:active,
a.bn-tile:active,
button.bn-tile:active {
transform: translate3d(0, 0, 0);
transition-duration: var(--dur-fast);
}
.bn-tile.is-clickable:active::after,
a.bn-tile:active::after,
button.bn-tile:active::after {
opacity: 0;
transition-duration: var(--dur-fast);
}
.bn-tile:focus-visible,
.bn-btn:focus-visible,
.btn:focus-visible,
.bn-field:focus-visible,
.bn-chip:focus-visible,
.bn-icon-chip:focus-visible,
.bn-topbar a:focus-visible,
.bn-topbar button:focus-visible,
[tabindex]:focus-visible {
outline: var(--bn-stroke-focus) solid var(--bn-focus);
outline-offset: 2px;
transition: outline-offset var(--dur-fast) var(--ease-out);
}
.bn-tile:hover:focus-visible,
.bn-btn:hover:focus-visible,
.btn:hover:focus-visible,
.bn-tile:active:focus-visible,
.bn-btn:active:focus-visible,
.btn:active:focus-visible {
outline: var(--bn-stroke-focus) solid var(--bn-focus);
outline-offset: 2px;
}
.bn-btn,
.btn {
transition:
background-color var(--dur-fast) var(--ease-in-out),
border-color var(--dur-fast) var(--ease-in-out),
color var(--dur-fast) var(--ease-in-out),
transform var(--dur-fast) var(--ease-out);
}
.bn-btn:active,
.btn:active {
transform: translate3d(0, 1px, 0);
}
.disclosure > summary.btn::before,
.bn-vis__chev {
transition: transform var(--dur-fast) var(--ease-out);
}
@keyframes bn-target-in {
from { outline-color: transparent; }
to   { outline-color: var(--bn-accent-teal); }
}
.bn-doc:target {
animation: bn-target-in var(--dur-slow) var(--ease-out) both;
}
.bn-field {
transition: background-color var(--dur-fast) var(--ease-in-out);
}
.bn-chip,
.bn-icon-chip {
transition:
background-color var(--dur-fast) var(--ease-in-out),
transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
a.bn-chip:hover,
button.bn-chip:hover,
a.bn-icon-chip:hover,
button.bn-icon-chip:hover { transform: translate3d(0, -1px, 0); }
}
.bn-table tbody tr {
transition: background-color var(--dur-fast) var(--ease-in-out);
}
@keyframes bn-breathe {
0%,  100% { opacity: 1; }
50%       { opacity: 0.45; }
}
.bn-chip--dot::before,
.bn-dot,
[data-pulse] {
animation: bn-breathe var(--dur-breathe) var(--ease-in-out) infinite;
}
.bn-tile--deep {
position: relative;
overflow: hidden;
}
.bn-tile--deep::before {
content: "";
position: absolute;
top: -20%;
bottom: -20%;
left: 0;
width: 55%;
pointer-events: none;
z-index: 0;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 0%,
rgba(46, 232, 155, 0.05) 45%,
rgba(255, 255, 255, 0.07) 55%,
rgba(255, 255, 255, 0) 100%
);
transform: translate3d(-120%, 0, 0);
animation: bn-sheen var(--dur-sheen) var(--ease-in-out) infinite;
}
.bn-tile--deep > * { position: relative; z-index: 1; }
@keyframes bn-sheen {
0%        { transform: translate3d(-120%, 0, 0); }
55%, 100% { transform: translate3d(320%, 0, 0); }
}
.bn-skeleton {
position: relative;
overflow: hidden;
}
.bn-skeleton::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: translate3d(-100%, 0, 0);
animation: bn-skeleton-sweep var(--dur-skeleton) var(--ease-in-out) infinite;
}
@keyframes bn-skeleton-sweep {
0%        { transform: translate3d(-100%, 0, 0); }
70%, 100% { transform: translate3d(300%, 0, 0); }
}
.bn-skeleton,
.bn-skeleton-hidden {
transition: opacity var(--dur-base) var(--ease-out);
}
.bn-skeleton-hidden { opacity: 0; }
.bn-stat,
.bn-num,
[data-count-to] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
transition: color var(--dur-base) var(--ease-in-out),
opacity var(--dur-base) var(--ease-out);
}
[data-count-to].is-counting { opacity: 0.88; }
[data-count-to].is-counted  { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.bn-motion .bn-tile,
.bn-motion [data-reveal],
.bn-motion .bn-tile.is-in,
.bn-motion [data-reveal].is-in {
opacity: 1 !important;
transform: none !important;
transition: none !important;
transition-delay: 0s !important;
will-change: auto !important;
}
.bn-tile.is-clickable::after,
a.bn-tile::after,
button.bn-tile::after,
.bn-tile--deep::before,
.bn-skeleton::after {
animation: none !important;
transition: none !important;
transform: none !important;
}
.bn-tile--deep::before,
.bn-skeleton::after { display: none !important; }
.bn-tile.is-clickable:hover::after,
a.bn-tile:hover::after,
button.bn-tile:hover::after { opacity: 1 !important; }
.bn-chip--dot::before,
.bn-dot,
[data-pulse],
.bn-doc:target {
animation: none !important;
opacity: 1 !important;
}
.bn-tile.is-clickable,
a.bn-tile,
button.bn-tile,
.bn-btn,
.btn,
.disclosure > summary.btn::before,
.bn-vis__chev,
.bn-doc:target,
.bn-chip,
.bn-icon-chip,
.bn-field,
.bn-table tbody tr,
.bn-stat,
.bn-num,
[data-count-to] {
transition: none !important;
}
.bn-tile.is-clickable:hover,
a.bn-tile:hover,
button.bn-tile:hover,
.bn-btn:active,
.btn:active,
.bn-chip:hover,
.bn-icon-chip:hover,
.bn-tile.is-clickable:active,
a.bn-tile:active,
button.bn-tile:active { transform: none !important; }
[data-count-to].is-counting { opacity: 1 !important; }
.bn-tile:focus-visible,
.bn-btn:focus-visible,
.btn:focus-visible,
.bn-field:focus-visible { outline: var(--bn-stroke-focus) solid var(--bn-focus) !important; outline-offset: 2px !important; }
}
.bn-motion-off .bn-tile,
.bn-motion-off [data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
transition-delay: 0s !important;
will-change: auto !important;
}
.bn-motion-off .bn-tile--deep::before,
.bn-motion-off .bn-skeleton::after { display: none !important; }
.bn-motion-off .bn-chip--dot::before,
.bn-motion-off .bn-dot,
.bn-motion-off [data-pulse] { animation: none !important; opacity: 1 !important; }