/*
 * The family's typefaces as @beyond-js/ui ships them (decision C2, token set 0.6.0): Inter for the
 * interface at weights 400 (text), 500 (labels, buttons, names) and 600 (headings), and Rubik, the
 * wordmark's face, at 300, 400 and 500 for the lockup's product name (`--font-brand`) and for products
 * still on token set 0.5.x. Each face comes in the latin and latin-ext subsets, as woff2 beside this
 * file. A browser downloads only the faces a page uses and, through unicode-range, only the subsets its
 * text needs. Import once, next to tokens.css and styles.css:
 *
 *     import '@beyond-js/ui/fonts.css';
 *
 * A product that is not bundled serves this file and the woff2 files together, keeping their names.
 * Both are licensed under the SIL Open Font License 1.1: Rubik in OFL.txt, Inter in OFL-Inter.txt,
 * beside this file. The files are those of @fontsource/rubik 5.3.0 and @fontsource/inter 5.3.0, copied
 * unchanged.
 */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('./opening-fonts/inter-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('./opening-fonts/inter-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('./opening-fonts/inter-latin-ext-500-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('./opening-fonts/inter-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('./opening-fonts/inter-latin-ext-600-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('./opening-fonts/inter-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('./opening-fonts/rubik-latin-ext-300-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('./opening-fonts/rubik-latin-300-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('./opening-fonts/rubik-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('./opening-fonts/rubik-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('./opening-fonts/rubik-latin-ext-500-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('./opening-fonts/rubik-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Beyond family tokens 0.8.0 (approved). Generated from src/foundations; do not edit. */

:root {
	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-brand: 'Rubik', system-ui, sans-serif;
	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--text-display: 2.5rem;
	--leading-display: 1.12;
	--text-title-1: 1.625rem;
	--leading-title-1: 1.2;
	--text-title-2: 1.1875rem;
	--leading-title-2: 1.3;
	--text-title-3: 1rem;
	--leading-title-3: 1.4;
	--text-body: 0.9375rem;
	--leading-body: 1.55;
	--text-small: 0.8125rem;
	--leading-small: 1.45;
	--text-label: 0.75rem;
	--leading-label: 1.3;
	--tracking-label: 0.02em;
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--radius-control: 5px;
	--radius-base: 8px;
	--radius-round: 999px;
	--elevation-flat: none;
	--elevation-raised: 0 1px 2px rgba(18, 31, 54, .08), 0 1px 1px rgba(18, 31, 54, .04);
	--elevation-menu: 0 8px 16px 0 rgba(0, 0, 0, .08), 0 4px 8px 0 rgba(0, 0, 0, .06);
	--elevation-dialog: 0 32px 64px -4px rgba(0, 0, 0, .12), 0 12px 24px -2px rgba(0, 0, 0, .06);
	--elevation-window: 0 1px 2px rgba(18, 31, 54, .06), 0 8px 20px -12px rgba(18, 31, 54, .16);
	--elevation-window-focus: 0 2px 4px rgba(18, 31, 54, .06), 0 22px 44px -18px rgba(18, 31, 54, .28);
	--overlay-scrim: rgb(0 0 0 / 0.4);
	--overlay-lift: rgb(18 31 54 / 0.06);
	--motion-quick: 150ms;
	--motion-standard: 200ms;
	--motion-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--motion-exit: 120ms;
	--motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
	--comfortable-control: 36px;
	--comfortable-row: 44px;
	--compact-control: 30px;
	--compact-row: 34px;
	--layout-family: 44px;
	--layout-header: 56px;
	--layout-sidebar: 250px;
	--layout-measure: 54ch;
	--layout-content: 1180px;
	--layout-gutter: 16px;
	--layout-gutter-medium: 24px;
	--layout-gutter-wide: 32px;
	--layout-form: 40rem;
	--layout-standard: 90rem;
	--layout-aside: 22rem;
	--layout-fluid-max: 100rem;
	--layout-thread: 80rem;
	--layout-indent: 2.125rem;
	--layout-lane: 48rem;
	--layout-aside-max: 40rem;
	--layout-aside-wide: 48rem;
	--color-canvas: #ffffff;
	--color-surface: #ffffff;
	--color-surface-sunken: #f5f5f5;
	--color-surface-selected: #fbeee9;
	--color-border: #e4e4e4;
	--color-border-strong: #c8c8c8;
	--color-border-control: #767676;
	--color-text: #121f36;
	--color-text-muted: #5f5f5f;
	--color-text-inverse: #ffffff;
	--color-link: #121f36;
	--color-accent: #cb6245;
	--color-focus: #cb6245;
	--color-focus-edge: #121f36;
	--color-action: #9e533e;
	--color-action-hover: #86442f;
	--color-on-action: #ffffff;
	--color-disabled: #e4e4e4;
	--color-on-disabled: #5f5f5f;
	--color-surface-raised: #ffffff;
	--color-sidebar: #ffffff;
	--color-sidebar-hover: #f5f5f5;
	--color-tooltip: #121f36;
	--color-on-tooltip: #ffffff;
	--color-family-bar: #ffffff;
	--color-family-text: #121f36;
	--color-family-muted: #5f5f5f;
	--color-family-marker: #9e533e;
	--color-code: #1d2b3d;
	--color-on-code: #f5f5f5;
	--color-code-comment: #5f5f5f;
	--color-code-keyword: #0033e8;
	--color-code-string: #2b6a3f;
	--color-code-number: #9e533e;
	--color-code-name: #7a5200;
	--color-code-tag: #b3261e;
	--color-success: #2b6a3f;
	--color-success-surface: #eaf5ee;
	--color-warning: #7a5200;
	--color-warning-surface: #fdf4d7;
	--color-danger: #b3261e;
	--color-danger-surface: #fdecea;
	--color-info: #2d4665;
	--color-info-surface: #e9edf3;
	--color-reference: #0033e8;
	--color-reference-surface: #f7f8ff;
	color-scheme: light;
}

:root[data-beyond-mode='dark'] {
	--color-canvas: #101625;
	--color-surface: #112036;
	--color-surface-sunken: #0c1525;
	--color-surface-selected: #2c1a17;
	--color-border: #2b3853;
	--color-border-strong: #424f6e;
	--color-border-control: #8e99bb;
	--color-text: #e6e9ef;
	--color-text-muted: #99a3b1;
	--color-text-inverse: #101625;
	--color-link: #e6e9ef;
	--color-accent: #cb6245;
	--color-focus: #ffa385;
	--color-focus-edge: #e6e9ef;
	--color-action: #e46f4e;
	--color-action-hover: #ffa385;
	--color-on-action: #101625;
	--color-disabled: #1d2b3d;
	--color-on-disabled: #99a3b1;
	--color-surface-raised: #1d2b3d;
	--color-sidebar: #0c1525;
	--color-sidebar-hover: #112036;
	--color-tooltip: #313c50;
	--color-on-tooltip: #e6e9ef;
	--color-family-bar: #0c1525;
	--color-family-text: #e6e9ef;
	--color-family-muted: #99a3b1;
	--color-family-marker: #e46f4e;
	--color-code: #0c1525;
	--color-on-code: #f5f5f5;
	--color-code-comment: #99a3b1;
	--color-code-keyword: #9fb5ff;
	--color-code-string: #7fd19b;
	--color-code-number: #ffa385;
	--color-code-name: #f7c700;
	--color-code-tag: #ff8a80;
	--color-success: #7fd19b;
	--color-success-surface: #13301f;
	--color-warning: #f7c700;
	--color-warning-surface: #2e2710;
	--color-danger: #ff8a80;
	--color-danger-surface: #3a1616;
	--color-info: #9fb5ff;
	--color-info-surface: #1a2540;
	--color-reference: #9fb5ff;
	--color-reference-surface: #1a2247;
	--elevation-raised: 0 1px 2px rgba(0, 0, 0, .45);
	--elevation-menu: 0 12px 28px -6px rgba(0, 0, 0, .5), 0 4px 10px 0 rgba(0, 0, 0, .32);
	--elevation-window: 0 14px 30px -12px rgba(12, 21, 37, .9);
	--elevation-window-focus: 0 30px 64px -16px rgba(12, 21, 37, .96);
	--overlay-lift: rgb(255 255 255 / 0.1);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
:root:not([data-beyond-mode='light']) {
	--color-canvas: #101625;
	--color-surface: #112036;
	--color-surface-sunken: #0c1525;
	--color-surface-selected: #2c1a17;
	--color-border: #2b3853;
	--color-border-strong: #424f6e;
	--color-border-control: #8e99bb;
	--color-text: #e6e9ef;
	--color-text-muted: #99a3b1;
	--color-text-inverse: #101625;
	--color-link: #e6e9ef;
	--color-accent: #cb6245;
	--color-focus: #ffa385;
	--color-focus-edge: #e6e9ef;
	--color-action: #e46f4e;
	--color-action-hover: #ffa385;
	--color-on-action: #101625;
	--color-disabled: #1d2b3d;
	--color-on-disabled: #99a3b1;
	--color-surface-raised: #1d2b3d;
	--color-sidebar: #0c1525;
	--color-sidebar-hover: #112036;
	--color-tooltip: #313c50;
	--color-on-tooltip: #e6e9ef;
	--color-family-bar: #0c1525;
	--color-family-text: #e6e9ef;
	--color-family-muted: #99a3b1;
	--color-family-marker: #e46f4e;
	--color-code: #0c1525;
	--color-on-code: #f5f5f5;
	--color-code-comment: #99a3b1;
	--color-code-keyword: #9fb5ff;
	--color-code-string: #7fd19b;
	--color-code-number: #ffa385;
	--color-code-name: #f7c700;
	--color-code-tag: #ff8a80;
	--color-success: #7fd19b;
	--color-success-surface: #13301f;
	--color-warning: #f7c700;
	--color-warning-surface: #2e2710;
	--color-danger: #ff8a80;
	--color-danger-surface: #3a1616;
	--color-info: #9fb5ff;
	--color-info-surface: #1a2540;
	--color-reference: #9fb5ff;
	--color-reference-surface: #1a2247;
	--elevation-raised: 0 1px 2px rgba(0, 0, 0, .45);
	--elevation-menu: 0 12px 28px -6px rgba(0, 0, 0, .5), 0 4px 10px 0 rgba(0, 0, 0, .32);
	--elevation-window: 0 14px 30px -12px rgba(12, 21, 37, .9);
	--elevation-window-focus: 0 30px 64px -16px rgba(12, 21, 37, .96);
	--overlay-lift: rgb(255 255 255 / 0.1);
	color-scheme: dark;
}
}

/* The first document paint (0.21.0): the product's identity and a live trace; past a quick opening, its
   steps with their times; when it cannot simply wait, what is true and the way on, if one can work (0.25.0).
   One left edge for every part, the product hidden behind it until it hands over. Tokens only. */
.bui-opening {
	--bui-opening-height: 32px;
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	display: grid;
	justify-items: center;
	align-content: start;
	overflow: auto;
	box-sizing: border-box;
	/* The identity stays where it first painted, a little above the middle; what is said later grows below it. */
	padding: max(var(--space-8), calc(38vh - var(--bui-opening-height))) var(--space-4) var(--space-8);
	color: var(--color-text);
	font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
}
.bui-opening * { box-sizing: border-box; }
.bui-opening p { margin: 0; overflow-wrap: anywhere; }
.bui-opening[data-state='leaving'] { pointer-events: none; }
/* The surface: the canvas, and in the dark appearance a faint light around the identity in the colour of
   work in progress (in the light one the same mix would read as a shadow). Same selectors as the tokens'. */
.bui-opening { --bui-opening-glow: transparent; }
:root[data-beyond-mode='dark'] .bui-opening { --bui-opening-glow: color-mix(in srgb, var(--color-info) 8%, transparent); }
@media (prefers-color-scheme: dark) {
	:root:not([data-beyond-mode='light']) .bui-opening { --bui-opening-glow: color-mix(in srgb, var(--color-info) 8%, transparent); }
}
.bui-opening-veil { position: fixed; inset: 0; background: radial-gradient(44rem 24rem at 50% 38%, var(--bui-opening-glow), transparent 72%), var(--color-canvas); }
.bui-opening-stage { position: relative; width: min(100%, 26rem); display: grid; gap: var(--space-5); }

/* The hand-over's landing (0.31.0): while the identity moves into the family bar, the bar's own wordmark and name
   wait hidden under it, and its separator and the product menu's chevron, which do not move, wait unseen, so
   nothing of the bar shows through the identity, a bar drawn again meanwhile included (`OpeningExit`). */
.bui-family[data-bui-landing='flight'] :is(.bui-lockup-mark, .bui-lockup-name) { visibility: hidden; }
.bui-family[data-bui-landing='flight'] .bui-family-product::before,
.bui-family[data-bui-landing='flight'] .bui-family-product .bui-navmenu-button > .bui-icon { opacity: 0; }

/* The family lockup, larger: the wordmark, the divider and the name in the brand face, in the bar's proportions. */
.bui-opening-lockup { display: flex; align-items: center; gap: calc(var(--bui-opening-height) * 0.38); min-width: 0; line-height: 1; }
.bui-opening-wordmark { display: block; flex: none; width: auto; height: var(--bui-opening-height); }
.bui-opening-divider { flex: none; width: 1px; height: calc(var(--bui-opening-height) * 0.714); background: color-mix(in srgb, currentColor 45%, transparent); translate: 0 calc(var(--bui-opening-height) * -0.0555); }
.bui-opening-name { font-family: var(--font-brand); font-size: calc(var(--bui-opening-height) * 0.714); font-weight: var(--weight-medium); white-space: nowrap; translate: 0 calc(var(--bui-opening-height) * -0.02); }
/* As the family lockup's name (header.css): where text-box trimming exists, the name's box is its cap
   height, so the box that moves into the bar is the box it lands on. */
@supports (text-box: trim-both cap alphabetic) {
	.bui-opening-name { text-box: trim-both cap alphabetic; padding-block: calc(var(--bui-opening-height) * 0.107); translate: 0 calc(var(--bui-opening-height) * -0.0555); }
}

/* The trace: work without a known end, as the family's indeterminate band (Awaited), in the colour of work in progress. */
.bui-opening-trace { position: relative; height: 1px; background: var(--color-border-strong); clip-path: inset(-12px 0); }
.bui-opening-trace::after { content: ''; position: absolute; top: -0.5px; left: 0; width: 34%; height: 2px; border-radius: var(--radius-round); background: linear-gradient(90deg, transparent, var(--color-info) 62%, color-mix(in srgb, var(--color-info) 40%, var(--color-text)) 88%, transparent); filter: drop-shadow(0 0 5px var(--color-info)); }
/* When nothing runs any more (failed, offline) nothing says it does: the trace is a plain divider, in any motion setting (0.25.0). */
.bui-opening:is([data-state='failed'], [data-state='offline']) .bui-opening-trace { background: var(--color-border-strong); }
.bui-opening:is([data-state='failed'], [data-state='offline']) .bui-opening-trace::after { display: none; }
@keyframes bui-opening-travel { from { transform: translateX(-100%); } to { transform: translateX(265%); } }

/* The one announced line, for assistive technology: what is seen is the steps and the recovery. */
.bui-opening-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The steps, each with the family's mark for its state (D129) and its time in tabular figures. */
.bui-opening-steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-small); line-height: var(--leading-small); }
.bui-opening-step { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); color: var(--color-text-muted); }
.bui-opening-step:not([data-state='done']) { color: var(--color-text); }
.bui-opening-label { min-width: 0; overflow-wrap: anywhere; }
.bui-opening-time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bui-opening-step[data-late] .bui-opening-time { color: var(--color-text); }
.bui-opening-dot { width: 9px; height: 9px; border-radius: var(--radius-round); }
.bui-opening-step[data-state='done'] .bui-opening-dot { background: var(--color-success); }
.bui-opening-step[data-state='active'] .bui-opening-dot { border: 1.5px solid var(--color-info); background: linear-gradient(to right, var(--color-info) 50%, transparent 50%); }
.bui-opening-step[data-state='late'] .bui-opening-dot { border-radius: 1px; background: var(--color-warning); transform: rotate(45deg) scale(0.85); }
.bui-opening-step[data-state='failed'] .bui-opening-dot { border-radius: 2px; background: var(--color-danger); }
@keyframes bui-opening-pulse { 50% { opacity: 0.4; } }
@keyframes bui-opening-in { from { opacity: 0; } }

/* When it cannot simply wait: what happened, the way on and the details to copy. */
.bui-opening-recovery { display: grid; gap: var(--space-3); justify-items: start; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.bui-opening-heading { font-size: var(--text-title-3); line-height: var(--leading-title-3); font-weight: var(--weight-semibold); }
.bui-opening-note { color: var(--color-text-muted); font-size: var(--text-small); }
.bui-opening button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-small); font-weight: var(--weight-medium); cursor: pointer; }
.bui-opening .bui-opening-reload { border-color: transparent; background: var(--color-action); color: var(--color-on-action); }
.bui-opening .bui-opening-reload:hover { background: var(--color-action-hover); }
.bui-opening button:focus-visible, .bui-opening summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bui-opening-details { width: 100%; color: var(--color-text-muted); font-size: var(--text-small); }
.bui-opening-details summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; }
.bui-opening-details[open] { display: grid; gap: var(--space-2); justify-items: start; }
.bui-opening-text { width: 100%; margin: 0; padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text); font: var(--text-label)/var(--leading-small) var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.bui-opening-said:empty { display: none; }
/* What a state does not offer is not drawn at all; after the parts' own display so it always wins (0.25.0). */
.bui-opening [hidden] { display: none; }

/* Shown by the stylesheet alone, after 15 s, only when the controller never ran to remove it. */
.bui-opening-fallback { color: var(--color-text-muted); font-size: var(--text-small); visibility: hidden; animation: bui-opening-fallback 0s linear 15s forwards; }
@keyframes bui-opening-fallback { to { visibility: visible; } }
.bui-opening noscript p { font-size: var(--text-small); }
.bui-opening:has(noscript p) :is(.bui-opening-trace, .bui-opening-status, .bui-opening-fallback) { display: none; }

.bui-opening [lang='es'] { display: none; }
:root:lang(es) .bui-opening [lang='en'] { display: none; }
:root:lang(es) .bui-opening [lang='es'] { display: inline; }

@media (max-width: 30rem) {
	.bui-opening { --bui-opening-height: 26px; }
}
/* Motion exists only for a person who did not ask for less (0.21.2): the trace's light, the running step's few
   pulses, the steps' arrival, the stage's entrance and the landing's fade (0.31.0) are declared here alone, so no
   rule of a product's can bring them back. */
@media (prefers-reduced-motion: no-preference) {
	.bui-opening-trace::after { animation: bui-opening-travel 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
	.bui-opening-step[data-state='active'] .bui-opening-dot { animation: bui-opening-pulse 1.2s ease-in-out 4; }
	.bui-opening-steps { animation: bui-opening-in var(--motion-standard) var(--motion-ease); }
	.bui-opening-stage { animation: bui-opening-in var(--motion-standard) var(--motion-ease) both; }
	.bui-family[data-bui-landing='landed'] .bui-family-product::before,
	.bui-family[data-bui-landing='landed'] .bui-family-product .bui-navmenu-button > .bui-icon { transition: opacity var(--motion-standard) var(--motion-ease); }
}
/* Under reduced motion the trace is a still, dashed band, as the family's indeterminate one. */
@media (prefers-reduced-motion: reduce) {
	.bui-opening-trace { background: repeating-linear-gradient(to right, var(--color-info) 0 var(--space-2), transparent var(--space-2) var(--space-4)); }
	.bui-opening-trace::after { display: none; }
}
@media (forced-colors: active) {
	.bui-opening-trace, .bui-opening-dot { forced-color-adjust: none; background: CanvasText; }
	.bui-opening-trace::after { display: none; }
}

body:has(> #bui-opening:not([data-state='leaving'])) > :not(#bui-opening):not(script):not(style):not(link):not(vite-error-overlay) { visibility: hidden; }