/* 浏览新音乐 · 场景样式。依据 ADAPTATION.md（草案）。
   公共材料与控件来自 ../../TOKENS.css 与 ../../COMPONENTS.css；台面的颜色（--hi-deck）、凹槽（.hi-recess）、
   物件（.hi-object）、栏上的当前项（data-hi-current）已立法进 DESIGN.md「箱庭」并进了素材库。
   这里只有这一屏自己的东西：格子与重磅凹槽的排法、上浮、以及控制随"手"移动的位置。

   数值的纪律：库里有 token 的一律引用库。这一屏自己的数（还没立法的）只写在下面"场景变量"这一处，
   正文只引用变量，不写字面值；立法之后搬进 DESIGN.md front matter。玻璃只定颜色，不定透过率（透过率见素材库的材料公式）。
   媒体查询不认变量：600 和 1000 两个断点在正文里写死，和 --bn-bp-* 是同一个数，改的时候一起改。 */

@property --ap { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ================= 场景变量：这一屏自己的数，只此一处 ================= */
:root {
  /* 断点（给 browse.js 读；媒体查询里写死的同一个数） */
  --bn-bp-two-hands: 600px;        /* 起：两只拇指，控制分到左右下角 */
  --bn-bp-sidebar: 1000px;         /* 起：标签栏换成侧栏 */
  /* 控制条：高度由命中区决定，不由内容决定 */
  --bn-target: var(--layout-touch-target);
  --bn-target-far: var(--layout-far-target);
  --bn-bar-wall: var(--control-bar-wall);
  --bn-bar: calc(var(--bn-target) + var(--bn-bar-wall) * 2);
  --bn-tab-gap: 2px;
  --bn-icon: 18px;
  --bn-mini-width: 420px;
  --bn-mini-width-folded: 520px;
  --bn-mini-cover-folded: 64px;
  --bn-search-width: 7em;
  --bn-search-width-wide: 11em;
  --bn-plate-reserve: 190px;       /* 标题行给搜索条让出的宽度 */
  --bn-plate-reserve-wide: 260px;
  --bn-sidebar-width: 220px;
  --bn-sidebar-item: 40px;
  /* 格子 */
  --bn-tile-min: 148px;
  --bn-tile-max: 192px;
  --bn-hero-cover: 320px;
  --bn-hero-cover-narrow: 240px;
  --bn-hero-text: 30em;
  --bn-hair: var(--components-divider-height);
  /* 上浮 */
  --bn-lift-duration: var(--motion-expand-duration);
  --bn-lift-inset: 10px;           /* 抬起一件时，其余的凹槽收窄多少 */
  --bn-lifted-cover: 260px;
  --bn-lifted-cover-col: 220px;
  --bn-lifted-max-width: 680px;
  --bn-lifted-max-height: 560px;
  --bn-lifted-max-height-narrow: 660px;
  --bn-lifted-wash: 26%;           /* 抬起的专辑往面板上晕多少自己的颜色 */
  --bn-lifted-wash-end: 62%;
  --bn-info-fade: 160ms;
  --bn-info-delay: 180ms;
  /* 滚动边缘与给控制让出的空 */
  --bn-edge-fade: 88%;
  --bn-edge-height: calc(var(--bn-bar) * 3);
  --bn-edge-height-wide: calc(var(--bn-bar) * 2 + var(--spacing-xs));
  --bn-clear: calc(var(--bn-bar) * 2 + var(--spacing-3xl) + var(--spacing-xl));
  --bn-clear-two-hands: calc(var(--bn-bar) + var(--spacing-3xl) + var(--spacing-xl));
  --bn-clear-sidebar: calc(var(--bn-bar) + var(--spacing-3xl) + var(--spacing-sm));
  /* 文字：除极小的无衬线标签外全部取库的字号 */
  --bn-tag-size: 11px;
  --bn-tag-tracking: .12em;
  --bn-mini-leading: 1.3;
  --bn-mini-sub-opacity: .8;
  --bn-demo-button: 36px;
  /* 颜色的量 */
  --bn-idle-cover-tint: 14%;
  --bn-album-h: 352; --bn-album-s: 70%;          /* browse.js 按正在播放的专辑改写 */
  --bn-album-l: 28%;               /* 染色玻璃自己的颜色取这一档明度，白字读得清 */
  --bn-bar-tint-l: 18%;            /* 红黑里栏身换成专辑色相时的明度 */
  --bn-hue-tint-l: 20%;
  --bn-lift-l: 30%;
  --bn-ambient-l: 45%;
  --optics-budget: 4;              /* 这一屏的光学层预算：三条栏加抬起面板上的一处 */
}
:root[data-reach="far"] { --bn-target: var(--bn-target-far); }
:root[data-hue="blue"] { --bn-accent-h: 214; --bn-accent-s: 72%; }
:root[data-hue="green"] { --bn-accent-h: 158; --bn-accent-s: 64%; }
:root[data-hue="violet"] { --bn-accent-h: 272; --bn-accent-s: 58%; }

[data-theme="red-black"] {
  /* 台面与凹槽的近黑（黑 E2）已立法，在库里；栏身是库里的暗酒红 */
  --bn-shadow-ink: #000000;
  --bn-current-l: 50%;             /* 当前项取内容色或换过的色相时的明度 */
  --bn-scrim: rgb(from var(--bn-shadow-ink) r g b / .5);
  --bn-lift-shadow: 0 30px 70px rgb(from var(--bn-shadow-ink) r g b / .8), 0 8px 18px rgb(from var(--bn-shadow-ink) r g b / .55);
  --bn-bar-own: rgb(from var(--components-toolbar-dark-background-color) r g b);
  --bn-bar-text: var(--bn-on-tint);
  --bn-ambient-alpha: .34;
}
[data-theme="white-default"] {
  --bn-shadow-ink: rgb(20 30 50);
  --bn-current-l: 32%;
  --bn-scrim: rgb(from var(--page-bg) r g b / .6);
  --bn-lift-shadow: 0 30px 64px rgb(from var(--bn-shadow-ink) r g b / .24), 0 8px 18px rgb(from var(--bn-shadow-ink) r g b / .12);
  --bn-bar-own: rgb(from var(--components-toolbar-background-color) r g b);
  --bn-bar-text: var(--colors-primary);
  --bn-ambient-alpha: .2;
}
/* 染色玻璃上的字：库里红栏的白字 */
:root { --bn-on-tint: var(--components-toolbar-dark-text-color); --bn-album: hsl(var(--bn-album-h) var(--bn-album-s) var(--bn-album-l)); }
[data-theme="red-black"][data-hue] { --bn-bar-own: hsl(var(--bn-accent-h) var(--bn-accent-s) var(--bn-hue-tint-l)); }
[data-theme="red-black"][data-playing] { --bn-bar-own: hsl(var(--bn-album-h) var(--bn-album-s) var(--bn-bar-tint-l)); }
/* ================= 场景变量到此为止；以下只引用 ================= */

html, body { height: 100%; }
body { margin: 0; overflow: hidden; }

/* ---------- 台面：页面的结构面 ---------- */
.bn-scroll {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--hi-deck);
  transition: background-color var(--motion-theme-duration) ease;
  scrollbar-width: thin;
}
.bn-deck { box-sizing: border-box; min-height: 100%; padding: var(--spacing-lg) var(--spacing-page-margin-narrow) var(--bn-clear); }
.bn-plate { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); min-height: var(--bn-target); margin-bottom: var(--spacing-xl); }
.bn-plate h1 { margin: 0; }
.bn-plate .bn-tag { max-width: calc(100% - var(--bn-plate-reserve)); }
.bn-tag { display: block; font-family: var(--font-sans); font-size: var(--bn-tag-size); letter-spacing: var(--bn-tag-tracking); color: var(--color-secondary); }
.bn-section { margin-top: var(--spacing-2xl); }
.bn-section:first-of-type { margin-top: 0; }
.bn-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-md); margin: 0 var(--spacing-xxs) var(--spacing-md); }
.bn-section__head h2 { margin: 0; }

/* ---------- 凹槽：样式在库里（.hi-recess）；这里只加上浮时收窄用的裁切与过渡 ---------- */
.bn-scroll .hi-recess__body { clip-path: inset(var(--ap) round var(--rounded-glass)); transition: --ap var(--bn-lift-duration) var(--motion-expand-easing); }
.bn-scroll .hi-recess__rim { transition: inset var(--bn-lift-duration) var(--motion-expand-easing); }
/* 重磅凹槽：套装自己的颜色在槽底打一池光 */
.bn-recess--ambient { background:
  radial-gradient(ellipse 70% 120% at 18% 60%, hsl(var(--bn-hero-h, 30) var(--bn-hero-s, 50%) var(--bn-ambient-l) / var(--bn-ambient-alpha)), transparent 72%),
  var(--hi-recess-fill); }

.bn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--bn-tile-min), 1fr)); gap: var(--spacing-lg) var(--spacing-md); padding: var(--spacing-lg); }
.bn-grid > * { max-width: var(--bn-tile-max); }
/* 横向的一排：唱片从槽沿下面经过，被槽沿切掉 */
.bn-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--bn-tile-min); gap: var(--spacing-md); padding: var(--spacing-lg); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.bn-row::-webkit-scrollbar { display: none; }
.bn-row > * { scroll-snap-align: start; }

.bn-hero { display: grid; grid-template-columns: minmax(0, var(--bn-hero-cover)) minmax(0, 1fr); gap: var(--spacing-xl); align-items: end; padding: var(--spacing-xl); }
.bn-hero__text { color: var(--color-secondary); padding-bottom: var(--spacing-xs); }
.bn-hero__text h3 { margin: var(--spacing-sm) 0; color: var(--color-primary); }
.bn-hero__text p { margin: 0; max-width: var(--bn-hero-text); }
.bn-hero .hi-object { max-width: var(--bn-hero-cover); }
.bn-hero .bn-rec__title, .bn-hero .bn-rec__meta { display: none; }
/* 大屏：重磅凹槽不跟着窗无限拉宽，右边留给台面 */
.bn-section:first-of-type .hi-recess { max-width: var(--spacing-max-width); }

/* ---------- 唱片：样式在库里（.hi-object，多碟加 .hi-object--stack）；这里只排标题与元数据 ---------- */
.bn-rec__title, .bn-rec__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-rec__title { margin-top: var(--spacing-sm); color: var(--color-primary); font-size: var(--typography-label-md-font-size); font-weight: var(--typography-label-md-font-weight); line-height: var(--typography-label-md-line-height); }
.bn-rec__meta { color: var(--color-secondary); font-size: var(--typography-body-sm-font-size); line-height: var(--typography-body-sm-line-height); }
.hi-object.is-empty .hi-object__face { visibility: hidden; }
.hi-object[hidden] { display: none; }

/* ---------- 控制：玻璃，贴着天花板；位置跟着手走 ---------- */
.bn-dock { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); padding: 0 var(--spacing-sm) max(var(--spacing-sm), env(safe-area-inset-bottom)); pointer-events: none; }
.bn-dock > * { pointer-events: auto; }
/* 滚动边缘：内容在玻璃下方溶进台面的颜色 */
.bn-edge { position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; height: var(--bn-edge-height); pointer-events: none; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--hi-deck) var(--bn-edge-fade), transparent)); }

/* 同一层的控制条同一个高度。align-items: center 盖掉素材库窄屏规则里的 stretch */
.bn-tabs { gap: var(--bn-tab-gap); padding: 0 var(--bn-bar-wall); max-width: 100%; box-sizing: border-box; height: var(--bn-bar); min-height: var(--bn-bar); align-items: center !important; }
.bn-tabs .hi-button { min-height: var(--bn-target); padding: 0 var(--spacing-md); white-space: nowrap; }
/* 当前项：库里的滤色片（data-hi-current；browse.js 按"色"开关切 lens 与 fill）。颜色跟这一刻的颜色重心走：
   有内容色取内容色，换过色相取那个色相，否则是库的默认主题红 */
[data-hue] .bn-tabs { --hi-current-color: hsl(var(--bn-accent-h) var(--bn-accent-s) var(--bn-current-l)); }
[data-playing] .bn-tabs { --hi-current-color: hsl(var(--bn-album-h) var(--bn-album-s) var(--bn-current-l)); }

.bn-mini { display: flex; align-items: center; gap: var(--spacing-sm); box-sizing: border-box; width: min(100%, var(--bn-mini-width)); height: var(--bn-bar); padding: 0 var(--bn-bar-wall); border-radius: var(--rounded-full); }
.bn-mini__cover { flex: 0 0 auto; width: var(--bn-target); height: var(--bn-target); border-radius: var(--rounded-full); background-size: cover; }
.bn-mini__text { flex: 1 1 auto; min-width: 0; line-height: var(--bn-mini-leading); }
.bn-mini__text strong, .bn-mini__text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-mini__text strong { font-size: var(--typography-label-md-font-size); font-weight: var(--typography-headline-md-font-weight); }
.bn-mini__text span { font-size: var(--typography-body-sm-font-size); opacity: var(--bn-mini-sub-opacity); }
/* 播放条里的按钮跟随玻璃上的文字色，不另取主题墨色 */
.bn-mini .hi-button { color: inherit; }
.bn-icon { min-width: var(--bn-target); min-height: var(--bn-target); padding: 0; }
.bn-icon svg { width: var(--bn-icon); height: var(--bn-icon); fill: currentColor; }

.bn-search { position: fixed; z-index: 10; top: var(--spacing-md); right: var(--spacing-page-margin-narrow); display: flex; align-items: center; box-sizing: border-box; height: var(--bn-bar); padding: 0 var(--bn-bar-wall) 0 var(--spacing-md); border-radius: var(--rounded-full); }
.bn-search .bn-tag { margin-right: var(--spacing-sm); }
.bn-search input { width: var(--bn-search-width); min-height: var(--bn-target); padding: 0; color: inherit; font: inherit; font-size: var(--typography-label-md-font-size); background: none; border: 0; outline: none; }
.bn-search input::placeholder { color: var(--color-secondary); }
.bn-search:focus-within { outline: var(--state-focus-ring-width) solid color-mix(in srgb, var(--color-primary) var(--state-focus-ring-tint), transparent); }

/* ---------- 颜色：一个时刻只有一个重心 ----------
   画面上有主要颜色（正在播放的专辑）时，整套控制都取它；没有时才轮到主题色（默认红，可以换色相）。
   无色玻璃让滚过去的封面透上来，这是环境色，不算重心。
   data-playing 与 --bn-album-h/-s、--bn-lift-h/-s 由 browse.js 写。
   data-accent：theme = 默认；none = 全部无色，同时是 data-red="off"（辅助功能状态）。 */
[data-accent="theme"] .bn-tabs { --hi-toolbar-bg: var(--bn-bar-own); --hi-toolbar-text: var(--bn-bar-text); }
[data-accent="none"] .bn-tabs { --hi-toolbar-bg: var(--glass-regular-bg); --hi-toolbar-text: var(--color-primary); }
[data-accent="theme"][data-playing] .bn-mini { --hi-glass-bg: var(--bn-album); --hi-glass-text: var(--bn-on-tint); --hi-paint-t: var(--material-glass-t-tint-paint); }
:root:not([data-playing]) .bn-mini__cover { background: color-mix(in srgb, var(--color-primary) var(--bn-idle-cover-tint), transparent); }
:root:not([data-playing]) .bn-mini .bn-icon { opacity: var(--state-disabled-opacity); }

/* 演示开关：印在台面上的文字按钮，不是产品的一部分 */
.bn-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--spacing-xs); flex-basis: 100%; margin-left: calc(var(--spacing-sm) * -1); }
.bn-demo .hi-button { min-height: var(--bn-demo-button); padding: 0 var(--spacing-sm); font-size: var(--typography-body-sm-font-size); color: var(--color-secondary); }
.bn-demo .hi-button[aria-pressed="true"] { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) var(--state-hover-tint), transparent); }

/* ---------- 上浮：越过槽沿 ---------- */
.bn-scrim { position: fixed; inset: 0; z-index: 20; background: var(--bn-scrim); opacity: 0; pointer-events: none; transition: opacity var(--bn-lift-duration) var(--motion-expand-easing); }
.has-lift .bn-scrim { opacity: 1; pointer-events: auto; }
.has-lift .hi-recess__body { --ap: var(--bn-lift-inset); }
.has-lift .hi-recess__rim { inset: var(--bn-lift-inset); }

.bn-lifted {
  --bn-lift: hsl(var(--bn-lift-h, var(--bn-album-h)) var(--bn-lift-s, var(--bn-album-s)) var(--bn-lift-l));
  /* 主要操作取这张专辑的颜色；透过率仍由库的材料公式给 */
  --button-prominent-bg: hsl(var(--bn-lift-h, var(--bn-album-h)) var(--bn-lift-s, var(--bn-album-s)) var(--bn-album-l));
  position: fixed;
  z-index: 30;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-md);
  align-content: start;
  overflow: hidden;
  color: var(--color-secondary);
  background: linear-gradient(160deg, color-mix(in oklab, var(--hi-deck), var(--bn-lift) var(--bn-lifted-wash)), var(--hi-deck) var(--bn-lifted-wash-end));
  border-radius: var(--rounded-glass);
  box-shadow: 0 0 0 transparent;
  transition: left var(--bn-lift-duration) var(--motion-expand-easing), top var(--bn-lift-duration) var(--motion-expand-easing),
    width var(--bn-lift-duration) var(--motion-expand-easing), height var(--bn-lift-duration) var(--motion-expand-easing),
    padding var(--bn-lift-duration) var(--motion-expand-easing), box-shadow var(--bn-lift-duration) var(--motion-expand-easing);
}
.bn-lifted[hidden] { display: none; }
.bn-lifted.is-up { padding: var(--spacing-lg); overflow-y: auto; box-shadow: var(--bn-lift-shadow), inset 0 var(--bn-hair) 0 var(--material-edge-light-dark), inset var(--bn-hair) 0 0 var(--material-edge-light-dark); }
.bn-lifted__cover { width: 100%; aspect-ratio: 1; border-radius: var(--rounded-input); background-size: cover; }
.bn-lifted.is-up .bn-lifted__cover { max-width: var(--bn-lifted-cover); box-shadow: var(--space-cast-x) var(--space-cast-y) var(--space-cast-blur) var(--hi-cast); }
.bn-lifted__info { opacity: 0; transition: opacity var(--bn-info-fade) ease; }
.bn-lifted.is-up .bn-lifted__info { opacity: 1; transition-delay: var(--bn-info-delay); }
.bn-lifted__info h3 { margin: var(--spacing-xs) 0 var(--spacing-xxs); color: var(--color-primary); }
.bn-lifted__info ol { margin: var(--spacing-md) 0; padding: 0; list-style: none; }
.bn-lifted__info li { display: flex; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-sm) 0; border-top: var(--components-divider-height) solid var(--color-outline); color: var(--color-primary); font-size: var(--typography-label-md-font-size); }
.bn-lifted__info li span { color: var(--color-secondary); font-size: var(--typography-body-sm-font-size); }
.bn-lifted__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.bn-lifted__actions .hi-button { min-height: var(--bn-target); }

/* ---------- 窗变宽：更多箱子，不是更大的东西 ---------- */
@media (max-width: 599px) { /* --bn-bp-two-hands 以下：一只拇指 */
  .bn-plate h1 { flex-basis: 100%; }
  .bn-demo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--spacing-page-margin-narrow) * -1); }
  .bn-demo .hi-button { flex: 0 0 auto; }
  .bn-tabs { width: 100%; justify-content: space-between; } /* 一只拇指：标签栏与上面的迷你播放条同宽，库不再替页面撑满 */
  .bn-hero { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md); padding: var(--spacing-lg); }
  .bn-hero .hi-object { max-width: var(--bn-hero-cover-narrow); }
  .bn-mini { order: -1; }
}
@media (min-width: 600px) { /* --bn-bp-two-hands 起：两只拇指，标签栏靠左下，迷你播放条靠右下 */
  .bn-plate { padding-right: var(--bn-plate-reserve); }
  .bn-tabs { width: auto; flex-wrap: nowrap; }
  .bn-deck { padding: var(--spacing-xl) var(--spacing-page-margin) var(--bn-clear-two-hands); }
  .bn-search { right: var(--spacing-page-margin); top: var(--spacing-lg); }
  .bn-dock { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 0 var(--spacing-lg) max(var(--spacing-lg), env(safe-area-inset-bottom)); }
  .bn-edge { height: var(--bn-edge-height-wide); }
  .bn-lifted.is-up { grid-template-columns: var(--bn-lifted-cover-col) minmax(0, 1fr); gap: var(--spacing-lg); }
}
@media (min-width: 1000px) { /* --bn-bp-sidebar 起：标签栏换成侧栏（同一个部件），大面积阅读面不开光学层 */
  .bn-deck { padding-left: calc(var(--bn-sidebar-width) + var(--spacing-page-margin) * 2); padding-bottom: var(--bn-clear-sidebar); }
  .bn-tabs { position: fixed; left: var(--spacing-page-margin); top: var(--spacing-xl); bottom: var(--spacing-xl); width: var(--bn-sidebar-width); height: auto; box-sizing: border-box; flex-direction: column; align-items: stretch !important; justify-content: flex-start; gap: var(--bn-tab-gap); padding: var(--spacing-sm); border-radius: var(--rounded-glass); }
  .bn-tabs .hi-button { justify-content: flex-start; min-height: var(--bn-sidebar-item); border-radius: var(--rounded-input); }
  /* 侧栏不整块染色，颜色的分量不随窗变大，只给当前项；透过率取阅读面那一档 */
  .bn-tabs, [data-accent] .bn-tabs { --hi-toolbar-bg: var(--glass-regular-bg); --hi-toolbar-text: var(--color-primary); --hi-glass-t: var(--material-glass-t-focus); }
  .bn-plate { padding-right: var(--bn-plate-reserve-wide); }
  .bn-search input { width: var(--bn-search-width-wide); }
  .bn-dock { left: calc(var(--bn-sidebar-width) + var(--spacing-page-margin) * 2); justify-content: center; }
  .bn-edge { left: calc(var(--bn-sidebar-width) + var(--spacing-page-margin)); }
}

/* ---------- 半折姿态：上半屏内容，下半屏控制 ---------- */
/* data-posture 由 browse.js 写：能检测到 (device-posture: folded) 就跟随，检测不到时用页面上的手动开关 */
:root[data-posture="folded"] .bn-scroll { bottom: 50%; }
:root[data-posture="folded"] .bn-deck { padding-bottom: var(--spacing-xl); }
:root[data-posture="folded"] .bn-edge { display: none; }
:root[data-posture="folded"] .bn-half { display: block; }
:root[data-posture="folded"] .bn-dock { top: 50%; bottom: 0; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-lg); padding: var(--spacing-lg); }
:root[data-posture="folded"] .bn-mini { order: -1; width: min(100%, var(--bn-mini-width-folded)); height: auto; padding: var(--spacing-sm); }
:root[data-posture="folded"] .bn-mini__cover { width: var(--bn-mini-cover-folded); height: var(--bn-mini-cover-folded); }
:root[data-posture="folded"] .bn-tabs { position: relative; left: auto; top: auto; bottom: auto; height: var(--bn-bar); width: auto; flex-direction: row; align-items: center !important; border-radius: var(--rounded-full); padding: 0 var(--bn-bar-wall); }
.bn-half { display: none; position: fixed; z-index: 8; left: 0; right: 0; top: 50%; bottom: 0; background: var(--hi-deck); box-shadow: inset 0 calc(var(--space-rim-reach) * 2.5) calc(var(--space-rim-blur) * 2.5) calc(var(--space-rim-spread) * 2.5) var(--hi-rim-dark), inset 0 var(--bn-hair) 0 var(--hi-rim-light); }

@media (prefers-reduced-motion: reduce) {
  :root { --bn-lift-duration: 0.01ms; --bn-info-fade: 0.01ms; --bn-info-delay: 0s; }
}