/* BeginThings public appearance layer. Load after each page's authored CSS.
   Scope: home, BeginRooms, FormulaMapper, shop, BeginNotes and its setup guide,
   plus the shared digital-product and service landing-page templates.
   The appearance controller resolves system preference to light or dark.
   Product artwork keeps its own palette; these preferences style the interface. */
:root {
  color-scheme: dark;
  --bg: #080d15;
  --surface: #101623;
  --surface2: #171f30;
  --ink: #f1f5fb;
  --muted: #b4c0d2;
  --line: #3d4b63;
  --control-line: #71829d;
  --accent: #a3bfff;
  --mint: #a8d6ff;
  --violet: #c7adff;
  --accent-soft: #23365b;
  --accent-ink: #081329;
  --focus: var(--accent);
  --danger: #ffb6c5;
  --success: #8de0c3;
  --hover: #223047;
  --header-bg: #080d15f5;
  --gradient: linear-gradient(110deg, #65c9f7, #96a8ff 52%, #c7adff);
  --button-gradient: linear-gradient(110deg, #265cc4, #6344c3);
  --closing-gradient: linear-gradient(112deg, #122d66, #303272 58%, #51377f);
  --brand-gradient: var(--gradient);
  --brand-cyan: #65c9f7;
  --brand-blue: #a3bfff;
  --brand-violet: #c7adff;
  --bt-on-accent: var(--accent-ink);
  --bt-shadow: 0 18px 52px #0004;
  background: var(--bg);
  color: var(--ink);
}
:root[data-bt-theme="light"] {
  color-scheme: light;
  --bg: #f7f9fc;
  --surface: #fff;
  --surface2: #edf2f9;
  --ink: #182638;
  --muted: #4d6078;
  --line: #c3cddd;
  --control-line: #7b8ba1;
  --accent: #285bb7;
  --mint: #126a99;
  --violet: #6842b5;
  --accent-soft: #e1eafb;
  --accent-ink: #fff;
  --danger: #a52144;
  --success: #17674f;
  --hover: #e5ecf6;
  --header-bg: #f7f9fcf5;
  --gradient: linear-gradient(110deg, #126a99, #365bc3 52%, #7844b9);
  --brand-cyan: #126a99;
  --brand-blue: #285bb7;
  --brand-violet: #6842b5;
  --bt-shadow: 0 18px 52px #142a4812;
}
:root[data-bt-accent="teal"] {
  --accent: #76ddd4;
  --mint: #a5e7dd;
  --violet: #a7cfff;
  --accent-soft: #143a3c;
  --accent-ink: #071f23;
  --gradient: linear-gradient(110deg, #78ddd4, #8ad5f6 60%, #abc8ff);
  --button-gradient: linear-gradient(110deg, #006c65, #145b9c);
  --closing-gradient: linear-gradient(112deg, #0c4144, #17335b);
}
:root[data-bt-accent="violet"] {
  --accent: #c7adff;
  --mint: #b6c9ff;
  --violet: #d5b1f2;
  --accent-soft: #352851;
  --accent-ink: #221133;
  --gradient: linear-gradient(110deg, #a7c3ff, #c7adff 58%, #e2b6f4);
  --button-gradient: linear-gradient(110deg, #5942b5, #88439b);
  --closing-gradient: linear-gradient(112deg, #262456, #4c2963);
}
:root[data-bt-accent="rose"] {
  --accent: #ffacc8;
  --mint: #efbfdc;
  --violet: #d5b9ff;
  --accent-soft: #44273b;
  --accent-ink: #2b1020;
  --gradient: linear-gradient(110deg, #ffb1c6, #eeb8e5 58%, #c9b8ff);
  --button-gradient: linear-gradient(110deg, #aa315d, #7946aa);
  --closing-gradient: linear-gradient(112deg, #52223e, #39265b);
}
:root[data-bt-theme="light"][data-bt-accent="teal"] {
  --accent: #006b68;
  --mint: #126c79;
  --violet: #285eb0;
  --accent-soft: #daf1ed;
  --accent-ink: #fff;
  --gradient: linear-gradient(110deg, #006b68, #146785 60%, #375bbb);
}
:root[data-bt-theme="light"][data-bt-accent="violet"] {
  --accent: #6540b5;
  --mint: #385ab5;
  --violet: #804399;
  --accent-soft: #ede5fb;
  --accent-ink: #fff;
  --gradient: linear-gradient(110deg, #385ab5, #6540b5 58%, #88419a);
}
:root[data-bt-theme="light"][data-bt-accent="rose"] {
  --accent: #ad345d;
  --mint: #8a436e;
  --violet: #7646a7;
  --accent-soft: #fbe5ed;
  --accent-ink: #fff;
  --gradient: linear-gradient(110deg, #ad345d, #934372 58%, #7646a7);
}
:root[data-bt-contrast="high"] {
  --bg: #03070d;
  --surface: #080f1b;
  --surface2: #101b2b;
  --ink: #fff;
  --muted: #e1e9f7;
  --line: #8898b4;
  --control-line: #b1c1db;
  --header-bg: #03070d;
}
:root[data-bt-theme="light"][data-bt-contrast="high"] {
  --bg: #fff;
  --surface: #fff;
  --surface2: #edf2f9;
  --ink: #071522;
  --muted: #273b53;
  --line: #5b6c80;
  --control-line: #44566f;
  --header-bg: #fff;
}

/* Shared page chrome and controls. Do not flatten content-specific artwork. */
:root body { background: var(--bg); color: var(--ink); min-width: 0; }
:root :is(.header, .site-header, .product-nav) { background: var(--header-bg); border-color: var(--line); }
:root :is(.footer, .site-footer, .mobile-nav) { background: var(--bg); color: var(--ink); border-color: var(--line); }
:root :is(.desktop-nav a, .main-nav a, .page-nav a) { color: var(--muted); min-height: 44px; align-items: center; }
:root .main-nav a { display: inline-flex; }
:root :is(.desktop-nav, .main-nav, .page-nav) a:is(:hover, [aria-current="page"]) { color: var(--accent); }
:root :is(.footer-grid h2, .footer-grid h3, .footer-brand p, .footer-bottom, .footer-settings, .footer-setting) { color: var(--muted); }
:root .footer-grid > div > a:not(.brand) { color: var(--muted); min-height: 44px; display: flex; align-items: center; }
:root :is(.footer-settings, .footer-setting) { min-height: 44px; }
:root .footer-grid > div > a:hover { color: var(--accent); }
:root .footer-bottom { border-color: var(--line); }
:root .footer-bottom a { min-width: 44px; min-height: 44px; border-color: var(--control-line); color: var(--ink); }
:root[data-bt-theme="light"] .brand img[src*="bt-logo-white.svg"] { filter: brightness(0) saturate(100%); }
:root :is(.button, .play-button, .tool-filter, .tool-more, .tool-reset, .motion-control, .motion-toggle, .sw-small-button) {
  min-height: 44px;
  max-width: 100%;
  border-radius: 8px;
  line-height: 1.45;
}
:root .button { white-space: normal; text-wrap: pretty; }
:root :is(.motion-toggle, .cube-controls button, .dialog-heading button, .menu-toggle) { min-width: 44px; min-height: 44px; flex-shrink: 0; }
:root :is(.button-primary, .button-ink, .button-lime, .actions > .button, .header-inner > .button, .start-section .button, .btco-submit, .btco-check) {
  background: var(--button-gradient);
  color: #fff;
  border-color: transparent;
}
:root :is(.button-primary, .button-ink, .button-lime, .actions > .button, .header-inner > .button, .start-section .button, .btco-submit, .btco-check):hover {
  background: var(--button-gradient);
  color: #fff;
  filter: brightness(1.04);
}
:root :is(.button-secondary, .sw-small-button, .motion-control, .motion-toggle, .tool-more, .tool-reset, .play-button, .tool-filter) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--control-line);
}
:root :is(.button-secondary, .sw-small-button, .motion-control, .motion-toggle, .tool-more, .tool-reset, .play-button, .tool-filter):hover { background: var(--hover); color: var(--ink); }
:root :is(.tool-filter[aria-pressed="true"], .catalog-filters button[aria-pressed="true"], .play-button-primary) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:root .play-button-primary:hover { background: var(--accent); color: var(--accent-ink); }
:root :is(.catalog-filters button, .product-nav .button) { min-height: 44px; }
:root .catalog-filters button { border-color: var(--control-line); color: var(--muted); }
:root .catalog-filters button[aria-pressed="true"] { color: var(--accent-ink); }
:root :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
:root :is(.skip, .skip-link) { color: var(--bg); background: var(--ink); }
:root ::selection { color: var(--accent-ink); background: var(--accent); }
:root :is(.tool-search, .play-input, .play-textarea, .btco input, .btco select, .btco textarea) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--control-line);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
}
:root :is(.tool-search, .play-input, .play-textarea, .btco input, .btco textarea)::placeholder { color: var(--muted); opacity: 1; }
:root :is(.play-input, .play-textarea)[aria-invalid="true"] { border: 2px solid var(--danger); }
:root :is(.play-output, .integration-guide pre) { color: var(--ink); background: var(--surface2); border: 1px solid var(--line); }
:root :is(.hero-copy, .hero-visual, .hero-grid, .hero-actions, .section-heading > *, .section-head > *, .footer-grid > *, .closing-grid > *, .catalog-actions, .bn-home-layout > *) { min-width: 0; }
:root :is(.hero-actions, .catalog-actions, .closing-bottom, .bn-home-actions) { flex-wrap: wrap; }
:root :is(.hero-description, .lede, .faq-list p, .kit-copy p, .catalog-card > p, .integration-guide) { overflow-wrap: break-word; }

/* Home: replace fixed dark section shells and copy colors. */
:root :is(.tools-section, .products-section, .fieldnotes-section, .about-section, .storage-section) {
  background: var(--surface);
  border-color: var(--line);
}
:root .rooms-section { background: var(--bg); border-color: var(--line); }
:root :is(.playground-wrap, .formula-feature, .kit-card, .room-detail) { background: var(--surface2); border-color: var(--line); color: var(--ink); }
:root :is(.hero-description, .hero-note, .hero-copy .eyebrow, .hero-bottom p, .hero-bottom > a span, .section-heading .eyebrow, .section-aside p, .section-aside small,
  .playground-intro .eyebrow, .playground-intro p:not(.eyebrow), .product-tag, .kit-number, .kit-copy p, .kit-conversion .kit-copy p, .formula-copy p, .formula-copy .product-tag,
  .room-feature > span, .room-feature p, .room-feature i, .room-detail p, .note-category, .note-link p, .about-grid > .eyebrow, .about-grid > div > p,
  .faq-section .eyebrow, .faq-list summary span, .faq-list details > p, .more-products > a span, .tool-description, .tool-count, .tool-empty,
  .play-label, .play-hint, .play-status, .play-stat dt, .price-note, .copy-demo .mini-label, .rewrite-caption) { color: var(--muted); }
:root :is(.hero-bottom p b, .formula-copy h3 em) { color: var(--ink); }
:root :is(.rooms-section h2 em, .products-section h2 em, .about-grid h2 em, .playground-scribble, .room-detail > span, .room-detail a, .more-products i, .release-note, .play-timer) { color: var(--accent); }
:root .faq-list p a { color: var(--accent); }
:root .room-feature { border-color: var(--line); color: var(--ink); }
:root .room-feature.active { border-color: var(--accent); }
:root :is(.tool-row, .play-tabs, .play-stat) { border-color: var(--line); }
:root :is(.tool-row:hover, .more-products > a:hover) { background: var(--hover); }
:root .tool-row .tool-icon { background: var(--accent-soft); color: var(--accent); border-color: var(--line); }
:root .tool-arrow { color: var(--muted); }
:root .play-tab { min-height: 44px; color: var(--muted); }
:root .play-tab[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
:root .play-mode[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
:root :is(.scene-top, .scene-coordinate, .scene-bottom, .scene-preview-label) { color: var(--muted); }
:root .scene-bottom { border-color: var(--line); }
:root .cube-controls button { background: var(--surface); color: var(--ink); border-color: var(--control-line); }
:root .cube-controls button:hover { background: var(--hover); }
:root[data-bt-theme="light"] .cube-ground { opacity: .18; }
:root :is(.tour-dialog, .br-tour-dialog) { background: var(--surface); color: var(--ink); border-color: var(--control-line); }
:root :is(.tour-dialog > p, .br-tour-dialog > p) { color: var(--muted); }
:root .dialog-heading button { color: var(--ink); background: var(--surface2); border-color: var(--control-line); }
:root .br-tour-dialog a { color: var(--accent); }

/* Product landing pages: prices and benefits follow the chosen appearance. */
:root body[data-product-page] :is(.hero, .section) { border-color: var(--line); }
:root body[data-product-page] .section:nth-of-type(even) { background: var(--surface); }
:root .sw-product-section h2 em { color: var(--violet); }
:root :is(.br-personal, .fm-for, .fm-release-strip) { background: var(--surface); border-color: var(--line); }
:root :is(.br-plan-card, .fm-release-panel) { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root .br-plan-featured { background: var(--accent-soft); border-color: var(--accent); }
:root .br-plan-top .sw-pill { color: var(--accent); background: var(--surface); border-color: var(--accent); }
:root :is(.br-monthly-equivalent, .fm-release-panel .lede, .fm-planned-offer .price > span, .fm-planned-offer > p:not(.price), .fm-release-conditions ul, .fm-scope-copy ul, .fm-job-list article > span) { color: var(--muted); }
:root .fm-planned-offer .note { color: var(--muted) !important; }
:root :is(.fm-planned-offer, .fm-release-conditions, .fm-job-list article) { border-color: var(--line); }
:root .fm-release-strip p strong { color: var(--ink); }
:root :is(.br-fact-strip strong, .br-plan-inclusions li::before, .br-plan-notes a, .fm-scope-copy .num, .fm-scope-copy li::before) { color: var(--accent); }
:root .br-detail-icon { background: var(--accent-soft); color: var(--accent); border-color: var(--line); }

/* Shared downloadable-product and service templates use the same page tokens. */
:root :is(.btdl-offer, .svc-scope, .ck-crosslink, .ck-next, .ck-bundle-content) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
:root .ck-bundle-content > .tabs { background: var(--surface2); }
:root :is(.ck-book-detail-aside, .ck-book-detail--workbook .ck-book-detail-aside) { background: var(--surface2); border-color: var(--line); }
:root :is(.btdl-offer-price, .btdl-directory summary, .ck-category-list li, .ck-price-lines dd) { color: var(--ink); }
:root :is(.btdl-delivery, .btdl-file-list p, .svc-scope-grid ul, .svc-sprint-path small, .ck-file-spec, .ck-feedback) { color: var(--muted); }
:root :is(.btdl-small a, .btdl-delivery a, .btdl-filename, .btdl-inventory .btdl-filename, .btdl-inventory > li > span, .btdl-process span,
  .btdl-file-list code, .ck-crosslink .text-link, .ck-big-number, .ck-book-detail--workbook .ck-big-number, .ck-price-total dd, .ck-saving strong) { color: var(--accent); }
:root .svc-sprint-path .num { background: var(--accent-soft); border-color: var(--line); color: var(--accent); }
:root .ck-reset { background: var(--surface); border-color: var(--control-line); color: var(--ink); min-height: 44px; }
:root .ck-reset:hover { background: var(--hover); }
:root .ck-review-item input[type="checkbox"] { accent-color: var(--accent); }
:root .ck-review-item:has(input:checked) > span { color: var(--accent); }
:root :is(.btdl-offer > *, .svc-scope-grid > *, .ck-crosslink > *, .ck-book-detail > *) { min-width: 0; }
:root :is(.btdl-offer, .svc-scope, .ck-next, .ck-crosslink) .button { white-space: normal; }

/* BeginNotes marketing preview is a readable example of the same UI. */
:root .workspace-preview { background: var(--surface); border-color: var(--control-line); box-shadow: var(--bt-shadow); }
:root .preview-list { background: var(--surface2); }
:root .sample-note.is-selected { background: var(--accent-soft); border-color: var(--accent); }
:root :is(.note-kind, .storage-label) { color: var(--accent); }
:root .start-section { background: var(--surface2); color: var(--ink); border-color: var(--control-line); }
:root .integration-guide a:not(.button) { color: var(--accent); }
:root .integration-guide pre { max-width: 100%; overflow: auto; padding: clamp(16px, 4vw, 24px); }
:root .integration-guide :is(code, a, dd) { overflow-wrap: anywhere; }
:root .integration-guide nav a { display: inline-block; min-height: 44px; padding-block: 6px; }

/* Fixed palettes inside illustrations prevent light theme from recoloring
   dark rendered scenes or sample product output. No universal descendant rule. */
:root :is(.float-card, .formula-visual, .room-screen, .br-film, .br-explorer, .fm-hero-map, .fm-lab, .fm-specimen, .hero-book-tag,
  .btdl-visual, .btdl-example, .btdl-fu-bubble, .btdl-pdf, .svc-demo, .ck-demo, .ck-browser, .ck-library) {
  color-scheme: dark;
  --bg: #080d15;
  --surface: #101623;
  --surface2: #171f30;
  --ink: #f1f5fb;
  --muted: #bcc9de;
  --line: #43516c;
  --control-line: #8494b1;
  --accent: #a3bfff;
  --accent-soft: #23365b;
  --accent-ink: #081329;
  --focus: #b9d7ff;
  --hover: #263752;
  color: var(--ink);
}
:root .hero-book-tag { background: #111724; }
:root .float-timer strong { color: var(--ink); }
:root .formula-grid > div:nth-child(5n+1) { color: #b6c2d7; }
:root .dependency-node.result small { color: #241d3c; }
:root :is(.fm-input-label input, .ck-demo select, .btdl-field input:not([type="range"]), .btdl-field select) {
  min-height: 44px;
  max-width: 100%;
  font-size: 16px;
  border-color: var(--control-line);
  color: var(--ink);
}
:root :is(.fm-input-label input, .br-checklist input) { accent-color: #a3bfff; }
:root .sheet-cell { min-height: 44px; }

/* Closing CTA stays dark in both modes, with an unambiguous light button. */
:root .closing {
  background: var(--closing-gradient);
  color: #f1f5ff;
  --ink: #f1f5ff;
  --muted: #d1def4;
  --focus: #d2e4ff;
}
:root .closing :is(h2, h2 > span) { color: #f1f5ff; }
:root .closing :is(p, .eyebrow) { color: #d1def4; }
:root .closing-bottom { border-color: #c5d8ff70; }
:root .closing .button { background: #f1f5ff; color: #182638; border-color: transparent; }
:root .closing .button:hover { background: #fff; color: #182638; filter: none; }

/* Compact arcade, checkout and consent remain part of the selected theme. */
:root .bt-arcade-strip { color: var(--ink); background: var(--bg); border-color: var(--line); }
:root :is(.bt-arcade-summary > span, .bt-arcade-drawer small) { color: var(--muted); }
:root :is(.bt-arcade-orbit, .bt-arcade-open, .bt-arcade-drawer > a > span) { color: var(--accent); }
:root .bt-arcade-drawer > a { color: var(--ink); background: var(--surface); border-color: var(--line); min-height: 44px; }
:root .bt-arcade-drawer > a:hover { border-color: var(--accent); }
:root .bt-arcade-drawer > a.bt-arcade-all { background: none; }
:root .btco { color-scheme: inherit; background: var(--surface); color: var(--ink); border-color: var(--control-line); }
:root .btco-close:hover { background: var(--hover); }
:root .btco-status[data-tone="error"] { color: var(--danger); border-color: var(--danger); }
:root .btco-status[data-tone="success"] { color: var(--success); border-color: var(--success); }
:root #btCookieBanner { color-scheme: inherit; background: var(--surface); color: var(--ink); border-color: var(--control-line); }
:root #btCookieBanner h2 { color: var(--ink); }
:root #btCookieBanner p { color: var(--muted); }
:root #btCookieBanner :is(a, .bt-cookie-signal) { color: var(--accent); }
:root #btCookieBanner .ck-btns button { color: var(--accent); background: var(--surface2); border-color: var(--accent); }
:root #btCookieBanner .ck-btns button:hover { color: var(--accent-ink); background: var(--accent); }
:root #btCookieBanner :focus-visible { outline-color: var(--focus); }
:root .bt-consent-settings-access button { background: var(--surface); color: var(--muted); border-color: var(--control-line); }

/* Strong contrast affects actual interface copy, not the colors of product art. */
:root[data-bt-contrast="high"] :is(.hero h1, .hero h1 > span, .gradient-text) {
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}
:root[data-bt-contrast="high"] :is(.text-link, .integration-guide a:not(.button), .faq-list p a) { text-decoration: underline; text-underline-offset: .22em; }
:root[data-bt-contrast="high"] :is(.button-secondary, .tool-filter, .catalog-filters button, .play-button, .tool-search, .play-input, .play-textarea, .btco input, .btco select, .btco textarea) { border-width: 2px; }
:root[data-bt-contrast="high"] :is(.header, .site-header, .product-nav) { backdrop-filter: none; }

/* Compact only reduces outer whitespace. Hit targets and input sizes stay 44px. */
:root[data-bt-layout="compact"] :is(.section, .section-pad) { padding-block: clamp(44px, 5vw, 72px); }
:root[data-bt-layout="compact"] .hero-grid { padding-block: 48px; min-height: 0; }
:root[data-bt-layout="compact"] .hero.wrap { padding-block: 32px; }
:root[data-bt-layout="compact"] :is(.section-head, .section-heading) { margin-bottom: 28px; }
:root[data-bt-layout="compact"] :is(.section-space, .storage-section) { padding-block: 40px; }
:root[data-bt-layout="compact"] .bn-home-section { padding-block: 36px; }
:root[data-bt-layout="compact"] .tool-row { min-height: 76px; padding-block: 12px; }
:root[data-bt-layout="compact"] .catalog-grid { row-gap: 36px; }
:root[data-bt-layout="compact"] .faq-section { padding-block: 40px 56px; }
:root[data-bt-layout="compact"] .footer { padding-top: 40px; }
:root[data-bt-layout="compact"] .footer-grid { padding-bottom: 28px; }

@media (max-width: 900px) {
  /* Notes has a wrapping header; product pages retain their fixed sticky bar. */
  :root .header-inner:has(.page-nav) { flex-wrap: wrap; gap: 8px 16px; padding-block: 12px; }
  :root .header-inner:has(.page-nav) > .bt-appearance-launch { order: 1; margin-left: auto; }
  :root .header-inner:has(.page-nav) > .button { order: 2; }
  :root .header-inner > .page-nav { order: 3; width: 100%; margin-left: 0; }
}
@media (max-width: 850px) {
  :root body[data-product-page] .header-inner { gap: 12px; }
  :root body[data-product-page] .header-inner > .bt-appearance-launch { margin-left: auto; }
}
@media (max-width: 680px) {
  :root :is(.page-nav, .hero-actions, .actions, .bn-home-actions, .about-links) { flex-wrap: wrap; }
  :root .page-nav a { min-height: 44px; }
  :root :is(.tool-filters, .catalog-filters) { gap: 8px; }
  :root :is(.tool-filter, .catalog-filters button) { font-size: 12px; }
  :root .play-tabs { flex-wrap: wrap; gap: 4px; }
  :root .play-tab { padding-inline: 10px; }
  :root .room-detail a { min-height: 44px; }
  :root .footer-grid { column-gap: 20px; }
  :root .footer-grid h3 { white-space: normal; }
  :root .bt-arcade-summary > span { font-size: 12px; }
  :root .bt-arcade-disclosure > summary { min-height: 76px; }
  :root .bn-home-preview-top { flex-wrap: wrap; }
  :root .integration-guide { padding-block: 40px; font-size: 16px; }
}
@media (max-width: 480px) {
  /* Notes landing and its guide: reserve the top-right slot for Appearance. */
  :root body:not([data-product-page]) .site-header .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px 12px;
    padding-block: 12px;
  }
  :root body:not([data-product-page]) .header-inner > .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  :root body:not([data-product-page]) .header-inner > .bt-appearance-launch { grid-column: 2; grid-row: 1; width: 44px; height: 44px; margin: 0; }
  :root body:not([data-product-page]) .header-inner > .button { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: center; }
  :root body:not([data-product-page]) .header-inner > .page-nav { grid-column: 1 / -1; grid-row: 3; width: 100%; min-width: 0; margin: 0; gap: 8px 16px; }
}
@media (max-width: 380px) {
  :root body[data-product-page] .header-inner { gap: 8px; }
  :root body[data-product-page] .header-inner .brand { font-size: 20px; gap: 8px; }
  :root .hero-actions { gap: 12px; }
  :root .hero-actions > .button { flex: 1 1 auto; justify-content: center; }
  :root .hero-actions .text-link { font-size: 13px; min-height: 44px; }
  :root .catalog-actions { align-items: stretch; }
  :root .catalog-actions .button { flex: 1 1 auto; }
  :root .closing-bottom { align-items: flex-start; }
  :root .playground-wrap { padding-inline: 16px; }
  :root .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .footer-brand { grid-column: 1 / -1; }
}

:root[data-bt-motion="reduce"],
:root[data-bt-motion="reduce"] *,
:root[data-bt-motion="reduce"] *::before,
:root[data-bt-motion="reduce"] *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}
:root[data-bt-motion="reduce"] .reveal { opacity: 1 !important; transform: none !important; }
:root[data-bt-motion="reduce"] :is(.button:hover, .text-link:hover span, .note-link:hover .note-art, .catalog-art:hover, .bt-arcade-drawer > a:hover) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :root, :root *, :root *::before, :root *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  :root .reveal { opacity: 1 !important; transform: none !important; }
}
@media (forced-colors: active) {
  :root body { background: Canvas; color: CanvasText; }
  :root :is(.hero h1, .hero h1 > span, .gradient-text) { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
  :root :is(.button, .play-button, .tool-filter, .catalog-filters button, .sw-small-button, .btco-submit, .btco-check) { border: 1px solid ButtonText; }
  :root :is(.tool-filter[aria-pressed="true"], .catalog-filters button[aria-pressed="true"], .play-tab[aria-selected="true"], .br-face-tab[aria-selected="true"]) { outline: 2px solid Highlight; outline-offset: -4px; }
  :root :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline-color: Highlight; }
  :root .brand img[src*="bt-logo-white.svg"] { background: #080d15; filter: none; border-radius: 3px; }
}