/* Before and now (#background, bnow.js): one pinned shot. An editing app full of my 73 BlizzCon clips;
   the clips fly into a folder and I tell Claude Code what I want; they become the finished vlog; then one
   real note changes one number. Without JS or with reduced motion the four beats stack as a still page. */

.bn2 { position: relative; background: var(--dark); color: var(--on-dark); }
.bn2-in { padding-block: clamp(80px, 9vw, 120px) 40px; display: grid; gap: 28px; }
.bn2-head h2 { margin: 12px 0 14px; font-family: var(--display); font-size: var(--t-h2); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--on-dark); text-wrap: balance; }
.bn2-head h2 span { display: block; }
.bn2-head h2 span + span { color: var(--signal); }
.bn2-say p { margin: 0 0 12px; max-width: 60ch; font-size: var(--t-body); line-height: 1.55; color: var(--on-dark-soft); text-wrap: pretty; }
.bn2-say b { color: var(--on-dark); font-weight: 650; }
.bn2-stage { position: relative; display: grid; gap: 20px; }

/* windows */
.bn2-bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; font: 500 12.5px/1 var(--mono); }
.bn2-bar i { width: 10px; height: 10px; border-radius: 50%; background: oklch(0.6 0.01 70 / .55); }
.bn2-bar b { display: flex; align-items: center; gap: 8px; margin-left: 8px; font-weight: 500; }
.bn2-bar b img { width: 18px; height: 18px; border-radius: 5px; }
.bn2-bar span { margin-left: auto; opacity: .55; }

/* the editing app */
.bn2-app { display: flex; flex-direction: column; min-height: 420px; border-radius: 18px; overflow: hidden; background: oklch(0.25 0.006 260); color: oklch(0.82 0.01 260); box-shadow: 0 0 0 1px oklch(1 0 0 / .08), 0 40px 90px -40px oklch(0 0 0 / .9); }
.bn2-app .bn2-bar { background: oklch(0.2 0.006 260); }
.bn2-mid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; padding: 10px 12px; }
.bn2-bin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: start; padding: 8px; border-radius: 6px; background: oklch(0.2 0.006 260); }
.bn2-bin img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; opacity: .85; }
.bn2-mon { position: relative; border-radius: 6px; overflow: hidden; background: #000; }
.bn2-mon img { width: 100%; height: 100%; object-fit: cover; }
.bn2-mon span { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; padding: 2px 8px; border-radius: 4px; background: oklch(0 0 0 / .6); font: 500 12px/1.3 var(--mono); color: oklch(0.85 0.15 60); }
.bn2-tl { position: relative; display: grid; gap: 5px; padding: 10px 12px 14px; background: oklch(0.2 0.006 260); }
.bn2-tl p { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: center; margin: 0; }
.bn2-tl em { font: 500 10px/1 var(--mono); font-style: normal; color: oklch(0.65 0.01 260); }
.bn2-tl span { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.bn2-slot { aspect-ratio: 16 / 9; border-radius: 3px; background: oklch(0.29 0.008 260); }
.bn2-tl p:last-child .bn2-slot { aspect-ratio: 16 / 5; background: oklch(0.45 0.08 150 / .5); }
.bn2-play { position: absolute; top: 4px; bottom: 6px; left: 44px; width: 2px; background: oklch(0.7 0.19 25); }
.bn2-cur { position: absolute; width: 24px; height: 24px; left: 40%; top: 40%; fill: #fff; stroke: #111; stroke-width: 1.2; filter: drop-shadow(0 2px 3px oklch(0 0 0 / .6)); }
.bn2.is-live .bn2-cur { animation: bn2-cur 5s ease-in-out infinite; }
.bn2.is-live .bn2-play { animation: bn2-play 6s linear infinite; }
@keyframes bn2-cur { 0% { left: 18%; top: 60%; } 25% { left: 42%; top: 38%; } 45% { left: 60%; top: 38%; } 65% { left: 70%; top: 70%; } 85% { left: 30%; top: 80%; } 100% { left: 18%; top: 60%; } }
@keyframes bn2-play { from { left: 44px; } to { left: calc(100% - 14px); } }

/* Claude Code */
.bn2-cc { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); color: var(--ink); box-shadow: 0 40px 90px -40px oklch(0 0 0 / .9); }
.bn2-cc .bn2-bar { background: var(--paper-2); }
.bn2-chat { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.bn2-folder { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.bn2-folder .ic { width: 22px; height: 22px; color: var(--signal-ink); }
.bn2-folder b { font: 600 15px/1 var(--mono); }
.bn2-folder span { font: 500 13px/1 var(--mono); color: var(--soft); }
.bn2-you { align-self: flex-end; max-width: 92%; margin: 0; padding: 14px 16px; border-radius: 18px 18px 4px 18px; background: var(--ink); color: var(--on-dark); font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; line-height: 1.4; }
.bn2-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bn2-steps li { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--mono); color: var(--soft); }
.bn2-steps li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--signal); color: var(--ink); font: 700 12px/1 var(--sans, inherit); }

/* the film */
.bn2-film { display: grid; justify-items: center; gap: 10px; margin: 0; }
.bn2-phone { position: relative; height: min(64svh, 560px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000; box-shadow: 0 0 0 6px oklch(0.22 0.01 70), 0 0 0 7px oklch(1 0 0 / .12), 0 40px 90px -30px oklch(0 0 0 / .9); }
.bn2-phone video { width: 100%; height: 100%; object-fit: cover; }
.bn2-film p { margin: 0; display: grid; justify-items: center; gap: 2px; text-align: center; }
.bn2-film p > b { font-family: var(--display); font-size: 22px; font-weight: 500; }
.bn2-film p > span { font: 500 12.5px/1.3 var(--mono); color: var(--on-dark-2); }

/* the note */
.bn2-note { display: grid; gap: 16px; align-content: center; padding: 24px; border-radius: 18px; background: oklch(1 0 0 / .04); box-shadow: inset 0 0 0 1px var(--dark-line); }
.bn2-quote { display: grid; gap: 6px; margin: 0; padding: 16px 18px; border-radius: 18px 18px 18px 4px; background: var(--signal); color: var(--ink); }
.bn2-quote b { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.bn2-quote q { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.3; quotes: "“" "”"; }
.bn2-quote span { font-size: 16px; font-weight: 600; opacity: .8; }
.bn2-code { position: relative; margin: 0; padding: 16px 18px; border-radius: 12px; background: oklch(0.2 0.01 70); color: var(--on-dark); font: 500 clamp(12.5px, 1.1vw, 15px)/1.6 var(--mono); white-space: pre-wrap; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .08); }
.bn2-code code { display: block; padding: 0; background: none; color: inherit; font: inherit; }
.bn2-code em { font-style: normal; color: oklch(0.8 0.1 235); }
.bn2-code u { text-decoration: none; color: oklch(0.82 0.08 150); }
.bn2-code s { text-decoration: none; color: oklch(0.86 0.12 80); }
.bn2-code b { font-weight: 700; }
.bn2-new { display: none; }
.bn2-note.is-changed .bn2-old { display: none; }
.bn2-note.is-changed .bn2-new { display: inline; padding: 0 3px; border-radius: 4px; background: var(--signal); color: var(--ink); animation: bn2-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.bn2-code ins { position: absolute; right: 10px; top: -12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font: 700 11px/1 var(--mono); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; opacity: 0; scale: .6; transition: opacity .3s, scale .3s cubic-bezier(.3, 1.6, .5, 1); }
.bn2-note.is-changed .bn2-code ins { opacity: 1; scale: 1; }
@keyframes bn2-pop { from { scale: .4; } }
.bn2-wave { display: grid; gap: 10px; }
.bn2-wave p { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; margin: 0; }
.bn2-wave em { font: 500 12px/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2); }
.bn2-wave span { display: flex; align-items: center; gap: 3px; height: 44px; }
.bn2-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; transition: height .7s cubic-bezier(.2, .8, .2, 1); }
.bn2-v i { background: var(--signal); }
.bn2-m i { background: oklch(0.7 0.12 250); }
.bn2-note.is-changed .bn2-m i { height: calc(var(--h) * 30%); }

/* the flying clips: hidden on the still page */
.bn2-clips { display: none; }

/* ---------- live: pinned, one stage ---------- */
.bn2.is-live .bn2-track { height: 440svh; }
.bn2.is-live .bn2-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; }
.bn2.is-live .bn2-in { flex: 1; height: 100svh; grid-template-rows: auto minmax(0, 1fr); padding-block: 88px 26px; gap: 20px; }
.bn2.is-live .bn2-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 48px; align-items: end; }
.bn2.is-live .bn2-head .eyebrow { grid-column: 1 / -1; }
.bn2.is-live .bn2-head h2 { margin: 0; font-size: clamp(34px, 3.4vw, 52px); }
.bn2.is-live .bn2-say { display: grid; }
.bn2.is-live .bn2-say p { grid-area: 1 / 1; margin: 0; font-size: 18px; opacity: 0; translate: 0 8px; transition: opacity .45s, translate .45s cubic-bezier(.2, .7, .2, 1); }
.bn2.is-live .bn2-say p.is-on { opacity: 1; translate: 0 0; }
.bn2.is-live .bn2-stage { display: block; min-height: 0; }
.bn2.is-live .bn2-app, .bn2.is-live .bn2-cc, .bn2.is-live .bn2-film, .bn2.is-live .bn2-note { position: absolute; will-change: transform, opacity; }
.bn2.is-live .bn2-app { inset: 0; min-height: 0; }
.bn2.is-live .bn2-cc { left: 0; top: 4%; bottom: 4%; width: 50%; }
.bn2.is-live .bn2-film { right: 4%; top: 0; bottom: 0; width: 40%; align-content: center; }
.bn2.is-live .bn2-phone { height: min(100%, 60svh); }
.bn2.is-live .bn2-note { left: 0; top: 4%; bottom: 4%; width: 52%; }
.bn2.is-live .bn2-clips { display: block; position: absolute; inset: 0; pointer-events: none; }
.bn2-c { position: absolute; left: 0; top: 0; border-radius: 3px; object-fit: cover; will-change: transform, opacity; box-shadow: 0 6px 14px -6px oklch(0 0 0 / .8); }
.bn2.is-live .bn2-slot { visibility: hidden; }
.bn2.is-live .bn2-cc .bn2-you { clip-path: inset(0 100% 0 0 round 18px); transition: clip-path 1.1s steps(28, end); }
.bn2.is-live .bn2-cc.is-typed .bn2-you { clip-path: inset(0 0 0 0 round 18px); }
.bn2.is-live .bn2-steps li { opacity: 0; translate: -8px 0; transition: opacity .35s, translate .35s; }
.bn2.is-live .bn2-steps li.is-on { opacity: 1; translate: 0 0; }

@media (max-width: 899px) {
  .bn2.is-live .bn2-in { padding-block: 72px 16px; gap: 12px; }
  .bn2.is-live .bn2-head { grid-template-columns: 1fr; row-gap: 8px; }
  .bn2.is-live .bn2-head h2 { font-size: clamp(26px, 7vw, 36px); }
  .bn2.is-live .bn2-say p { font-size: 15px; }
  .bn2.is-live .bn2-cc { left: 0; right: 0; width: auto; top: 0; bottom: auto; height: 52%; }
  .bn2.is-live .bn2-film { left: 0; right: 0; width: auto; top: auto; bottom: 0; height: 58%; }
  .bn2.is-live .bn2-phone { height: calc(100% - 40px); }
  .bn2.is-live .bn2-note { left: 0; right: 0; width: auto; top: 0; bottom: auto; height: 62%; padding: 16px; gap: 12px; }
  .bn2-mid { grid-template-columns: 1fr; } .bn2-bin { display: none; }
  .bn2-chat { padding: 14px; gap: 10px; }
  .bn2-steps li { font-size: 12.5px; }
  .bn2-wave span { height: 30px; }
  .bn2.is-live .bn2-film p { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bn2 * { animation: none !important; transition: none !important; } }
.bn2.is-live .bn2-in { flex: none; margin-inline: auto; }
@media (max-width: 899px) { .bn2.is-live .bn2-in { padding-top: 92px; } }
@media (min-width: 900px) {
  .bn2.is-live .bn2-head { grid-template-columns: max-content minmax(0, 1fr); }
  .bn2.is-live .bn2-head h2 { font-size: clamp(30px, 2.9vw, 44px); }
  .bn2.is-live .bn2-head h2 span { white-space: nowrap; }
}
.bn2-say p { text-wrap: balance; }

/* the bin fills its column: a dense grid of the real clips */
.bn2-bin { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; align-content: stretch; overflow: hidden; }
.bn2-bin img { height: 100%; aspect-ratio: auto; min-height: 0; }
.bn2-mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

/* ---------- v2: the camera roll, three real notes, the change ---------- */
.bn2-roll { position: relative; border-radius: 16px; overflow: hidden; background: #000; }
.bn2-roll img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn2-count { position: absolute; left: 18px; bottom: 16px; display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 10px 16px; border-radius: 14px; background: oklch(0.12 0.01 70 / .78); backdrop-filter: blur(8px); }
.bn2-count b { font-family: var(--display); font-size: clamp(34px, 3.4vw, 54px); font-weight: 500; line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums; }
.bn2-count span { font: 500 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); }
.bn2-bin { position: relative; display: block; background: oklch(0.2 0.006 260); }
.bn2-binmark { position: absolute; left: 8px; top: 6px; font: 500 10.5px/1 var(--mono); color: oklch(0.7 0.01 260); }
.bn2-notes { display: grid; }
.bn2-n { grid-area: 1 / 1; display: grid; gap: 16px; align-content: center; opacity: 0; translate: 0 14px; transition: opacity .4s, translate .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.bn2-note[data-n="0"] .bn2-n[data-k="0"], .bn2-note[data-n="1"] .bn2-n[data-k="1"], .bn2-note[data-n="2"] .bn2-n[data-k="2"] { opacity: 1; translate: 0 0; }
.bn2-n .bn2-new { display: none; }
.bn2-n.is-changed .bn2-old { display: none; }
.bn2-n.is-changed .bn2-new { display: inline; padding: 0 3px; border-radius: 4px; background: var(--signal); color: var(--ink); animation: bn2-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.bn2-n .bn2-code ins { opacity: 0; scale: .6; }
.bn2-n.is-changed .bn2-code ins { opacity: 1; scale: 1; }
.bn2-n.is-changed .bn2-m i { height: calc(var(--h) * 30%); }
.bn2-note .bn2-m i { height: calc(var(--h) * 100%); }
.bn2-dots { display: flex; gap: 8px; justify-content: center; margin: 0; }
.bn2-dots i { width: 28px; height: 4px; border-radius: 2px; background: oklch(1 0 0 / .15); transition: background-color .3s; }
.bn2-note[data-n="0"] .bn2-dots i:nth-child(1), .bn2-note[data-n="1"] .bn2-dots i:nth-child(2), .bn2-note[data-n="2"] .bn2-dots i:nth-child(3) { background: var(--signal); }
.bn2-end { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 28px; }
.bn2-end-k { margin: 0; padding: 7px 14px; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font: 700 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.bn2-end h3 { margin: 0; font-family: var(--display); font-size: clamp(32px, 4.2vw, 64px); font-weight: 500; line-height: 1.05; color: var(--on-dark); text-wrap: balance; text-shadow: 0 4px 30px oklch(0 0 0 / .8); }
.bn2-end p { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: var(--on-dark); text-wrap: balance; text-shadow: 0 2px 16px oklch(0 0 0 / .9); }

.bn2.is-live .bn2-roll, .bn2.is-live .bn2-end { position: absolute; will-change: transform, opacity; }
.bn2.is-live .bn2-roll { left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.bn2.is-live .bn2-end { left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 3; }
.bn2.is-live .bn2-film { z-index: 2; }
.bn2:not(.is-live) .bn2-roll { aspect-ratio: 16 / 9; }
.bn2:not(.is-live) .bn2-note .bn2-n { position: static; opacity: 1; translate: none; }
.bn2:not(.is-live) .bn2-notes { gap: 24px; }
.bn2:not(.is-live) .bn2-dots { display: none; }
@media (max-width: 899px) { .bn2-count span { font-size: 11px; } .bn2-end { padding: 16px; } }
.bn2.is-live .bn2-track { height: 620svh; }
.bn2.is-live .bn2-roll { z-index: 1; }
.bn2.is-live .bn2-clips { z-index: 2; }
.bn2.is-live .bn2-end { z-index: 4; }
@media (max-width: 899px) { .bn2.is-live .bn2-cc { height: 74%; } }
.bn2-file { display: block; margin: -4px 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--on-dark-2); }
.bn2-why { margin: 0; font-size: 16px; line-height: 1.45; color: var(--on-dark-soft); text-wrap: balance; }
.bn2-n.is-changed .bn2-code .bn2-new { display: inline; }
.bn2-code b.bn2-old, .bn2-code b.bn2-new { font-weight: 600; }
.bn2-n.is-changed b.bn2-new:not(:has(em)) { background: var(--signal); color: var(--ink); }
.bn2-n.is-changed b.bn2-new:has(s) { background: oklch(0.86 0.165 92 / .18); color: var(--on-dark); padding: 2px 4px; }
.bn2-end h3 span { display: block; } .bn2-end h3 span + span { color: var(--signal); }

/* ---------- v3: each note plays its real before and after, rendered from the old and new code ---------- */
.bn2-nt { display: grid; gap: 16px; align-content: center; min-width: 0; }
.bn2-code .ln { display: block; position: relative; padding: 1px 8px 1px 26px; margin-inline: -8px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bn2-code .ln::before { content: " "; position: absolute; left: 9px; top: 1px; font-weight: 700; }
.bn2-code .ln:not(.is-del):not(.is-add) { color: var(--on-dark-2); }
.bn2-code .ln.is-del { background: oklch(0.62 0.19 25 / .16); color: oklch(0.86 0.06 25); text-decoration: line-through; text-decoration-color: oklch(0.7 0.19 25 / .7); text-decoration-thickness: 1.5px; }
.bn2-code .ln.is-del::before { content: "−"; color: oklch(0.72 0.19 25); }
.bn2-code .ln.is-add { background: oklch(0.86 0.165 92 / .14); color: var(--on-dark); }
.bn2-code .ln.is-add::before { content: "+"; color: var(--signal); }
.bn2-code .ln.is-del s { color: inherit; }
.bn2-code ins { opacity: 1 !important; scale: 1 !important; }

.bn2-ab { display: flex; gap: clamp(10px, 1.4vw, 18px); justify-content: center; align-items: center; }
.bn2-v { display: grid; gap: 10px; margin: 0; min-width: 0; }
.bn2-scr { position: relative; height: var(--vh, min(100svh - 400px, 500px)); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px oklch(1 0 0 / .1), 0 30px 70px -30px oklch(0 0 0 / .9); }
.bn2-ab.is-sq .bn2-v { flex: 1 1 0; max-width: calc(var(--vh, min(100svh - 400px, 500px)) * .72); }
.bn2-ab.is-sq .bn2-scr { height: auto; width: 100%; aspect-ratio: 1; }
.bn2-scr video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn2-scr figcaption { position: absolute; left: 10px; top: 10px; padding: 6px 10px; border-radius: var(--r-pill); font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bn2-v.is-before figcaption { background: oklch(0.16 0.01 70 / .82); color: var(--on-dark); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .2); backdrop-filter: blur(6px); }
.bn2-v.is-after figcaption { background: var(--signal); color: var(--ink); }
.bn2-v.is-after .bn2-scr { box-shadow: 0 0 0 2px var(--signal), 0 30px 70px -30px oklch(0 0 0 / .9); }

/* the cut, on one shared time scale: the after bar is shorter by exactly what was removed */
.bn2-bar2 { position: relative; height: 26px; margin: 0; }
.bn2-bar2 i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / var(--D) * 100%); width: calc((var(--b) - var(--a)) / var(--D) * 100% - 3px); display: grid; place-items: center; border-radius: 5px; background: oklch(1 0 0 / .1); overflow: hidden; }
.bn2-bar2 i span { font: 600 11px/1 var(--mono); color: var(--on-dark-soft); white-space: nowrap; }
.bn2-bar2 i.is-cut { background: repeating-linear-gradient(-45deg, oklch(0.62 0.19 25 / .55) 0 5px, oklch(0.62 0.19 25 / .3) 5px 10px); box-shadow: inset 0 0 0 1px oklch(0.72 0.19 25); }
.bn2-bar2 i.is-cut span { color: #fff; text-decoration: line-through; }
.bn2-v.is-after .bn2-bar2 i { background: oklch(0.86 0.165 92 / .2); }
.bn2-v.is-after .bn2-bar2 i span { color: var(--on-dark); }
.bn2-bar2 u { position: absolute; top: -4px; bottom: -4px; left: calc(var(--t, 0) / var(--D) * 100%); width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 8px oklch(1 0 0 / .8); }

.bn2.is-live .bn2-note { left: 0; right: 0; top: 0; bottom: 0; width: auto; padding: 0; background: none; box-shadow: none; gap: 14px; align-content: center; }
.bn2.is-live .bn2-n { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 64px); align-items: center; }
.bn2-note .bn2-quote q { font-size: clamp(20px, 1.7vw, 26px); }

@media (max-width: 899px) {
  .bn2.is-live .bn2-note { top: 0; bottom: 0; height: auto; padding: 0; gap: 10px; }
  .bn2.is-live .bn2-n { grid-template-columns: 1fr; gap: 10px; align-content: start; }
  .bn2.is-live .bn2-n .bn2-nt { display: contents; }
  .bn2.is-live .bn2-n .bn2-quote { order: 1; padding: 12px 14px; }
  .bn2.is-live .bn2-n .bn2-ab { order: 2; }
  .bn2.is-live .bn2-n .bn2-code { order: 3; padding: 12px 14px; font-size: 11.5px; }
  .bn2.is-live .bn2-n .bn2-why { display: none; }
  .bn2-note .bn2-quote q { font-size: 17px; }
  .bn2-note .bn2-quote b { font-size: 11px; }
  .bn2 { --vh: min(27svh, 260px); }
  .bn2.is-live .bn2-n .bn2-file { display: none; }
  .bn2.is-live .bn2-n .bn2-code ins { top: -10px; }
  .bn2.is-live .bn2-n .bn2-code { margin-top: 6px; }
  .bn2-bar2 { height: 8px; }
  .bn2-bar2 i span { display: none; }
  .bn2-scr { border-radius: 14px; }
  .bn2-scr figcaption { left: 8px; top: 8px; padding: 5px 8px; font-size: 11px; }
}
.bn2:not(.is-live) .bn2-n { grid-template-columns: 1fr; }
.bn2:not(.is-live) .bn2-ab { justify-content: flex-start; }
.bn2:not(.is-live) { --vh: min(60svh, 460px); }

/* ---------- v4: phones, and the folder chip ---------- */
/* the folder: the clip pile lands on the icon, the name and count stack beside it */
.bn2-folder { display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; }
.bn2-folder .ic { grid-row: 1 / 3; justify-self: center; width: 30px; height: 30px; }
.bn2-folder b { grid-column: 2; white-space: nowrap; }
.bn2-folder span { grid-column: 2; white-space: nowrap; }
.bn2-head h2 { max-height: 260px; transition: max-height .4s cubic-bezier(.2, .8, .2, 1), opacity .25s, margin .4s; }
@media (max-width: 899px) {
  .bn2.is-live .bn2-in { padding-top: 78px; }
  /* once pinned past the roll, the headline folds away so the stage gets the height */
  .bn2.is-live.is-deep .bn2-head h2 { max-height: 0; opacity: 0; overflow: hidden; margin: 0; }
  .bn2.is-live.is-deep .bn2-head { row-gap: 6px; }
  .bn2-more { display: none; }
  .bn2.is-live .bn2-cc { top: 0; bottom: 0; height: auto; }
  .bn2.is-live .bn2-film { top: 0; bottom: 0; height: auto; }
  .bn2.is-live .bn2-phone { height: calc(100% - 6px); }
  .bn2-folder { grid-template-columns: 40px auto; padding: 8px 12px; }
  .bn2-folder b { font-size: 14px; } .bn2-folder span { font-size: 12px; }
  /* long code lines end in an ellipsis instead of wrapping into a tall block */
  .bn2.is-live .bn2-n .bn2-code .ln { white-space: pre; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .bn2.is-live .bn2-n .bn2-code { font-size: 11px; line-height: 1.55; padding: 10px 12px; }
  .bn2.is-live .bn2-n .bn2-quote { padding: 10px 14px; gap: 4px; }
  .bn2.is-live .bn2-n { gap: 8px; }
}
/* phones: a lighter, shorter pinned story. No flying clips; less scrolling to get through it */
@media (max-width: 719px) { .bn2.is-live .bn2-track { height: 440svh; } }
.bn2.is-live.is-narrow .bn2-cc { top: 0; bottom: auto; height: auto; max-height: 100%; }
.bn2.is-live.is-narrow .bn2-chat { flex: none; }