/* Generated by scripts/port-brand-pages.py from GraphonAI/graphon-brand. Do not edit by hand. */
/* CPG example: the bakery-training question. An answer on the left; on the right, one temperature-profile
   chart with the bread it leads to, and two smaller cards for what the instructor explained and what he
   warned about. Everything here is illustrative and labelled so; selection is a thin ink rule, not a glow. */
.bk-demo { padding-top: 48px; padding-bottom: 72px; }
.bk-demo h2 { font: var(--dw) clamp(34px, 4.2vw, 60px)/1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.035em * var(--dt)); margin: 0 0 48px; max-width: 900px; }
.bk-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.bk-mono { font: 400 11px/1.5 var(--mono); color: var(--muted); }

/* ---- the question and answer ---- */
.bk-ask { position: sticky; top: 96px; }
.bk-card { border: 1px solid var(--ink); padding: 18px 20px 22px; }
.bk-card .who { font: 400 11px var(--mono); color: var(--muted); margin-bottom: 6px; }
.bk-card .q { font: var(--dw) 24px/1.2 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.015em * var(--dt)); margin: 0 0 14px; }
.bk-card .basis { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--faint); }
.bk-card .ans p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.bk-card .ans p:last-child { margin-bottom: 0; }
/* phrases in the answer that select evidence: dotted underline at rest, a quiet tint when theirs is showing */
.bk-ph { cursor: pointer; outline: none; text-decoration: underline dotted 1px; text-underline-offset: 4px; text-decoration-color: var(--muted); border-radius: 2px; transition: background .2s; }
.bk-ph:hover { text-decoration-color: var(--ink); }
.bk-ph[aria-pressed="true"] { background: #E7E0D0; text-decoration-style: solid; text-decoration-color: var(--ink); }
.bk-cite { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; vertical-align: 2px;
  font: 500 10px/1 var(--mono); background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 22%; }
.bk-cite[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.bk-ph:focus-visible, .bk-cite:focus-visible, .bk-sel button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- the evidence: one figure, two cards; the selected one gets an ink rule ---- */
.bk-ev { position: relative; border: 1px solid var(--ink); padding: 22px 24px 24px; }
/* every card has the same ink outline; the one the answer is pointing at gets a painted-cyan bar along its top */
.bk-ev::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--cyan-paint); opacity: 0; transition: opacity .25s; }
.bk-ev.sel::before { opacity: 1; }
.bk-ev h3 { font: var(--dw) 26px/1.1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.02em * var(--dt)); margin: 0 0 14px; }
.bk-ev h4 { font: var(--dw) 21px/1.15 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.015em * var(--dt)); margin: 0 0 12px; }
.bk-main-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.bk-sel { display: flex; gap: 6px; margin-bottom: 14px; }
.bk-sel button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; font: 400 12px var(--mono); color: var(--muted); border: 1px solid var(--faint); }
.bk-sel button::before { content: ""; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 22%; }
.bk-sel button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.bk-sel button[aria-pressed="true"]::before { background: var(--cyan-paint); border-color: var(--ink); }
.bk-viz { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.bk-viz svg, .bk-ev svg { display: block; width: 100%; height: auto; }
.bk-caption { margin: 14px 0 4px; font-size: 16px; line-height: 1.5; min-height: 3em; }
.bk-outcome { text-align: center; margin-top: 4px; font: var(--dw) 18px/1.2 var(--display); font-variation-settings: var(--dfv); }
.bk-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }

/* chart strokes: the selected profile in turquoise and a little heavier, the other grey and dashed */
.bk-axis { stroke: #8D877C; stroke-width: 1; fill: none; }
.bk-axt { font: 400 17px var(--mono); fill: var(--muted); }
.bk-curve { fill: none; stroke: #A09A8F; stroke-width: 1.8; stroke-dasharray: 6 5; stroke-linecap: round; transition: stroke .25s, stroke-width .25s; }
.bk-clab { font: 400 19px var(--mono); fill: var(--muted); transition: fill .25s; }
[data-profile="early"] .bk-curve.early, [data-profile="late"] .bk-curve.late { stroke: #10A9B0; stroke-width: 3.4; stroke-dasharray: none; }
[data-profile="early"] .bk-clab.early, [data-profile="late"] .bk-clab.late { fill: var(--ink); font-weight: 500; }
/* the two loaves are matched photographs; they crossfade, and their edges melt into the paper */
.bk-bread { position: relative; aspect-ratio: 1; -webkit-mask: radial-gradient(closest-side, #000 52%, transparent 96%); mask: radial-gradient(closest-side, #000 52%, transparent 96%); }
.bk-bread img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
[data-profile="early"] .bk-bread .late, [data-profile="late"] .bk-bread .early { opacity: 0; }

/* the reconstructed slide and the paraphrase */
.bk-slide { background: #FBF8F1; border: 1px solid var(--faint); }
.bk-para { margin: 12px 0 0; font-size: 15px; line-height: 1.55; }

/* observation and hypothesis, kept visibly apart */
.bk-obs, .bk-hyp { margin-top: 14px; padding: 2px 0 2px 14px; }
.bk-obs { border-left: 2px solid var(--ink); }
.bk-hyp { border-left: 2px dashed #A09A8F; }
.bk-obs .bk-mono, .bk-hyp .bk-mono { display: block; margin-bottom: 3px; }
.bk-obs p, .bk-hyp p { margin: 0; font-size: 15px; line-height: 1.5; }
.bk-hyp .tag { display: inline-block; margin-left: 6px; font: 400 10px var(--mono); color: var(--muted); border: 1px dashed #A09A8F; padding: 1px 6px; vertical-align: 1px; }
.bk-verify { margin: 16px 0 0; font-size: 15px; font-style: italic; color: var(--ink); }

.bk-foot { margin: 28px 0 0; }

@media (prefers-reduced-motion: reduce) { .bk-find, .bk-reveal, .bk-ev::before, .bk-curve, .bk-clab, .bk-bread img, .bk-ph { transition: none; } }
@media (max-width: 1100px) { .bk-viz { grid-template-columns: minmax(0, 1fr); } .bk-bread-wrap { max-width: 320px; margin: 0 auto; } }
@media (max-width: 900px) {
  .bk-grid, .bk-subs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bk-ask { position: static; }
}
@media (max-width: 600px) { .bk-ev { padding: 18px 16px 20px; } .bk-card .q { font-size: 21px; } }

/* the example picker (review only): which CPG example the section shows */
.ex-pick { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: grid; gap: 6px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--faint); font: 400 11px var(--mono); color: var(--muted); }
.ex-pick label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ex-pick input { margin: 0; accent-color: var(--ink); }
[data-example]:not(.ex-on) { display: none; }

/* ---- the live search: the library is swept, three sources are read, and they fly into the question ---- */
.bk-live { margin-bottom: 20px; padding: 18px 0 4px; border-top: 1px solid var(--ink); }
.bk-live-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bk-replay { all: unset; cursor: pointer; font: 400 11px var(--mono); color: var(--muted); padding: 4px 8px; border: 1px solid var(--faint); }
.bk-replay:hover { color: var(--ink); border-color: var(--ink); }
.bk-replay:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the library: hundreds of small stamped squares, fading off to the right and below as if it runs on */
.bk-lib { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 3px;
  -webkit-mask: linear-gradient(to right, #000 80%, transparent), linear-gradient(#000 78%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, #000 80%, transparent), linear-gradient(#000 78%, transparent); mask-composite: intersect; }
.bk-tile { position: relative; aspect-ratio: 1; border-radius: 20%; background: var(--c); opacity: calc(var(--a) * .82); transform: rotate(var(--r)); transition: opacity .2s, transform .2s, filter .2s, box-shadow .2s; }
.bk-tile svg { position: absolute; inset: 22%; width: 56%; height: 56%; }
.bk-tile.scan { opacity: 1; filter: brightness(1.18) saturate(1.2); transform: rotate(var(--r)) scale(1.25); box-shadow: 0 0 0 1px rgba(16, 169, 176, .55); }
.bk-tile.found { opacity: 1; background: var(--cyan-paint); box-shadow: inset 0 0 0 1px var(--cyan-edge); transform: scale(1.5); z-index: 2; }
.bk-tile.cited { opacity: 1; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); transform: scale(1.5); z-index: 2; }
.bk-tile.cited::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; font: 500 7px var(--mono); color: var(--ink); }
.bk-tile.cited svg { display: none; }
.bk-finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
/* while the search runs, each source panel and each evidence card below stays hidden until the search reaches it,
   then rises into place: a source as its square is found, the evidence as the answer cites it */
.bk-find { margin: 0; }
.bk-find, .bk-reveal { transition: opacity .5s, transform .55s cubic-bezier(.2, .7, .2, 1); }
.bk-demo.live .bk-find:not(.on):not(.done), .bk-demo.live .bk-reveal:not(.shown) { opacity: 0; transform: translateY(16px) scale(.97); }
.bk-grow { position: fixed; z-index: 30; pointer-events: none; background: var(--cyan-paint); box-shadow: inset 0 0 0 1px var(--cyan-edge); }
.bk-find figcaption { margin-top: 8px; display: grid; gap: 2px; }
.bk-find figcaption b { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 6px; font-weight: 500; font-size: 9px; background: var(--ink); color: var(--paper); border-radius: 22%; }
.bk-find .st { color: var(--muted); }
.bk-vid { position: relative; aspect-ratio: 16 / 10; background: #FBF8F1; border: 1px solid var(--faint); overflow: hidden; }
.bk-vid svg { position: absolute; inset: 6% 6% 18%; width: 88%; height: 76%; }
.bk-scrub { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 3px; background: #DDD5C5; }
.bk-scrub::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--ink); }
.bk-scrub .head { position: absolute; top: -4px; left: var(--p, 0%); width: 11px; height: 11px; margin-left: -5px; border-radius: 22%; background: var(--cyan-paint); box-shadow: inset 0 0 0 1px var(--cyan-edge); }
.bk-page { position: relative; aspect-ratio: 16 / 10; background: #FBF8F1; border: 1px solid var(--faint); padding: 7% 8%; overflow: hidden; font: 400 9.5px/1.4 var(--sans); color: #4A4740; }
.bk-page p { margin: 0 0 5px; position: relative; z-index: 1; }
.bk-page .h { font: 500 8.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--faint); }
.bk-page .sec { font: 600 10.5px var(--sans); color: var(--ink); margin-top: 6px; }
.bk-page .hit { transition: background .3s, box-shadow .3s; margin-left: -3px; padding: 0 3px; }
.bk-find.done .bk-page .hit { background: var(--cyan-paint); color: #111; box-shadow: inset 0 0 0 1px var(--cyan-edge); }
.bk-scan { position: absolute; left: 0; right: 0; top: -14%; height: 14%; background: linear-gradient(transparent, rgba(16, 169, 176, .18), transparent); pointer-events: none; }
.bk-find.done .bk-scan { opacity: 0; }

/* the card: chips under the question, and an answer that is written as each source lands */
.bk-status { margin: -6px 0 10px; color: var(--ink); }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; margin-bottom: 14px; }
.bk-chips span { font: 400 10px/1 var(--mono); padding: 6px 8px; background: var(--cyan-paint); color: #111; box-shadow: inset 0 0 0 1px var(--cyan-edge); }
.bk-demo.live .bk-chips span:not(.on), .bk-demo.live .ans .w:not(.on) { opacity: 0; }
.bk-demo.live .ans .w { transition: opacity .25s; }
.bk-flyer { position: fixed; z-index: 30; pointer-events: none; border-radius: 22%; background: var(--cyan-paint); box-shadow: inset 0 0 0 1px var(--cyan-edge); }
@media (max-width: 600px) { .bk-finds { grid-template-columns: minmax(0, 1fr); } .bk-lib { grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; } .bk-tile:nth-child(n+289) { display: none; } }
.bk-tick { font-family: var(--mono); fill: #6B6862; }
.bk-tick { font-family: var(--mono); fill: #6B6862; }

/* ---- the training video: a recorded frame, the slide on the projector screen, and a player's controls ---- */
.bk-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #2A2723; color: #fff; }
.bk-video .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 30% 40%; }
.bk-video .screen { position: absolute; left: 37.6%; top: 3.6%; width: 57.8%; height: 76.4%; display: grid; place-items: start center; padding-top: 2%;
  background: #F6F4EE; mix-blend-mode: multiply; filter: blur(.25px) saturate(.9); opacity: .96; }
.bk-video .screen svg { width: 96%; height: auto; }
.bk-video .screen .bk-slide { border: 0; background: none; }
.bk-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 62%, rgba(0, 0, 0, .55)); }
.bk-video .cc { position: absolute; left: 12%; right: 12%; bottom: 14%; z-index: 2; display: grid; justify-items: center; gap: 2px; text-align: center; transition: opacity .3s; }
.bk-video .cc span { background: rgba(10, 10, 10, .68); padding: 0 5px; line-height: 1.4; }
.bk-video .cc .es { font: 500 7.5px var(--sans); }
.bk-video .cc .en { font: 500 7.5px var(--sans); color: #fff; }
.bk-video .bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; }
.bk-video .pp { width: 10px; height: 10px; flex: none; }
.bk-video .tc { font: 400 9.5px var(--mono); white-space: nowrap; }
.bk-video .cc-tag { font: 500 8px var(--mono); border: 1px solid rgba(255, 255, 255, .7); padding: 0 3px; border-radius: 2px; }
.bk-video .bk-scrub { position: relative; left: auto; right: auto; bottom: auto; flex: 1; height: 3px; background: rgba(255, 255, 255, .3); }
.bk-video .bk-scrub::before { background: #fff; }
.bk-video .bk-scrub .head { top: -4px; width: 10px; height: 10px; }
/* the instructor card's frame is larger: bigger captions */
.bk-video.card .cc .en { font-size: 11px; } .bk-video.card .tc { font-size: 11px; }
/* while the live search scrubs, the frame drifts very slightly, as a held shot does; captions come up on the moment */
.bk-find.on .bk-video.live .bg { animation: bk-drift 9s ease-in-out infinite alternate; }
.bk-video.live .cc { opacity: 0; } .bk-find.done .bk-video.live .cc { opacity: 1; }
@keyframes bk-drift { to { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .bk-video .bg { animation: none !important; } }
.bk-para { color: var(--muted); }
.bk-para mark { background: var(--cyan-paint); color: #111; padding: 0 .2em; box-shadow: inset 0 0 0 1px var(--cyan-edge); }

/* ---- the manufacturing layout: five sources in two rows, the evidence in its own order ---- */
.bk-mfg .bk-finds { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bk-mfg .bk-find:nth-child(-n+3) { grid-column: span 2; }
.bk-mfg .bk-find:nth-child(n+4) { grid-column: span 3; }
.bk-mfg .bk-find:nth-child(n+4) .bk-page { aspect-ratio: 16 / 6.5; }
.bk-where { margin-bottom: 20px; }
.bk-where-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.bk-history svg { display: block; width: 100%; max-width: 560px; height: auto; margin-top: 6px; }
.bk-para2 { margin: 12px 0 0; font-size: 15px; line-height: 1.55; }
/* the platform camera: a fixed CCTV view with its own burnt-in label, and the door it caught marked */
.bk-video .cam { position: absolute; left: 6px; top: 5px; z-index: 2; font: 500 8px var(--mono); color: #fff; background: rgba(0, 0, 0, .45); padding: 1px 4px; letter-spacing: .04em; }
.bk-video.card .cam { font-size: 10px; left: 8px; top: 7px; }
.bk-video .vbox { position: absolute; z-index: 2; box-shadow: 0 0 0 2px #0BD3D8, 0 0 0 3px rgba(17, 17, 17, .6); border-radius: 2px; }
.bk-video.cctv .bg { filter: contrast(1.05) saturate(.85); }
.bk-video.live .vbox { opacity: 0; transition: opacity .3s; } .bk-find.done .bk-video.live .vbox { opacity: 1; }
@media (max-width: 900px) { .bk-where-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (max-width: 600px) { .bk-mfg .bk-finds { grid-template-columns: minmax(0, 1fr); } .bk-mfg .bk-find { grid-column: auto !important; } }

/* ---- the financial-services layout: four filings in a two-by-two grid, a price chart, a deal timeline ---- */
.bk-fin .bk-finds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-fin .bk-page { aspect-ratio: 16 / 7.5; }
.bk-sheet table { width: 100%; border-collapse: collapse; font: 400 9.5px var(--mono); position: relative; z-index: 1; }
.bk-sheet th, .bk-sheet td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--faint); }
.bk-sheet th:last-child, .bk-sheet td:last-child { text-align: right; }
.bk-find.done .bk-sheet tr.hit td { background: var(--cyan-paint); color: #111; }
.bk-fin .bk-viz.fin { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fx-ref .fx-bar { stroke: #C9C2B4; transition: stroke .25s; }
.fx-ref .fx-gap { stroke: transparent; transition: stroke .25s; }
.fx-ref .fx-lab { font-family: var(--mono); fill: var(--muted); }
.fx-ref .fx-prem { font-family: var(--mono); font-weight: 500; fill: transparent; transition: fill .25s; }
[data-profile="early"] .fx-ref.early .fx-bar, [data-profile="late"] .fx-ref.late .fx-bar { stroke: #8D877C; }
[data-profile="early"] .fx-ref.early .fx-gap, [data-profile="late"] .fx-ref.late .fx-gap { stroke: #10A9B0; }
[data-profile="early"] .fx-ref.early .fx-prem, [data-profile="late"] .fx-ref.late .fx-prem { fill: #111; }
[data-profile="early"] .fx-ref.early .fx-lab, [data-profile="late"] .fx-ref.late .fx-lab { fill: #111; }
.bk-bread.fin-num { aspect-ratio: auto; height: 150px; -webkit-mask: none; mask: none; }
.bk-bread.fin-num > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; transition: opacity .3s; }
.bk-bread.fin-num b { font: var(--dw) 64px/1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.04em * var(--dt)); }
.bk-bread.fin-num span { font: 400 13px var(--mono); color: var(--muted); margin-top: 6px; }
[data-profile="early"] .fin-num .late, [data-profile="late"] .fin-num .early { opacity: 0; }
.bk-release { border: 1px solid var(--faint); background: #FBF8F1; padding: 14px 16px; }
.bk-release .h { margin: 0 0 8px; font: 500 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bk-release .bk-para { margin: 0; }
.bk-process svg, .bk-rev svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.bk-rev svg { max-width: 380px; }
@media (max-width: 600px) { .bk-fin .bk-finds { grid-template-columns: minmax(0, 1fr); } .bk-fin .bk-viz.fin { grid-template-columns: minmax(0, 1fr); } }
.bk-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 6px; position: relative; z-index: 1; }
.bk-tabs span { font: 400 7.5px var(--mono); padding: 2px 4px; border: 1px solid var(--faint); color: var(--muted); background: var(--paper); }
.bk-tabs span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bk-debt .bk-tabs span { font-size: 10px; padding: 3px 6px; }
.bk-bignum { margin: 14px 0 4px; display: grid; gap: 4px; }
.bk-bignum b { font: var(--dw) 48px/1 var(--display); font-variation-settings: var(--dfv); letter-spacing: calc(-.04em * var(--dt)); }
.bk-bignum span { font: 400 12px var(--mono); color: var(--muted); }
.bk-holders svg, .bk-deck svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.bk-fin .bk-subs + .bk-subs { margin-top: 20px; }
/* LBO: the workbook tab strip carries its position, and the sensitivity tab is shown as the grid it is */
.bk-tabs .cnt { margin-left: auto; border: 0; background: none; color: var(--ink); font-weight: 500; }
.bk-lbo .bk-page { aspect-ratio: 16 / 8.5; }
.bk-lbo .fx-ref .fx-bar { transition: none; }
[data-profile="late"] .bk-lbo .fx-ref.early, [data-profile="early"] .bk-lbo .fx-ref.late { display: none; }
.bk-lbo[data-profile="late"] .fx-ref.early, .bk-lbo[data-profile="early"] .fx-ref.late { display: none; }
.bk-grid-x { width: 100%; border-collapse: collapse; font: 400 12px var(--mono); margin-top: 4px; }
.bk-grid-x th, .bk-grid-x td { border: 1px solid var(--faint); padding: 6px 4px; text-align: center; }
.bk-grid-x th { color: var(--muted); font-weight: 400; background: #FBF8F1; }
.bk-grid-x td.on { background: var(--cyan-paint); color: #111; font-weight: 500; box-shadow: inset 0 0 0 1px var(--cyan-edge); }
.bk-lbo .bk-bread.fin-num b { font-size: 52px; }
/* ---- a workbook source drawn as an Excel window ---- */
.bk-page.bk-xl { padding: 0; display: flex; flex-direction: column; background: #fff; font-family: var(--sans); }
.bk-xl .xl-title { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #1D6F42; color: #fff; font: 500 9px var(--sans); }
.bk-xl .xl-title b { display: inline-grid; place-items: center; width: 12px; height: 12px; background: #fff; color: #1D6F42; font: 700 8px var(--sans); border-radius: 2px; }
.bk-xl .xl-fx { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-bottom: 1px solid #D4D4D4; font: 400 8.5px var(--mono); color: #333; }
.bk-xl .xl-fx .ref { width: 28px; padding: 0 3px; border-right: 1px solid #D4D4D4; }
.bk-xl .xl-fx i { color: #888; font-style: italic; }
.bk-xl .xl-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 8.5px var(--sans); color: #222; position: relative; z-index: 1; flex: 1; }
.bk-xl .xl-grid th { background: #F3F3F3; color: #666; font-weight: 400; border: 1px solid #D9D9D9; padding: 1px 2px; text-align: center; }
.bk-xl .xl-grid tr th:first-child { width: 16px; }
.bk-xl .xl-grid tr:first-child th:nth-child(2) { width: 58%; }
.bk-xl .xl-grid td { border: 1px solid #E4E4E4; padding: 1px 4px; height: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-xl .xl-grid td.num { text-align: right; font-family: var(--mono); }
.bk-xl .xl-grid tr:nth-child(3) td:first-of-type { font-weight: 600; }
.bk-find.done .bk-xl tr.hit td { background: rgba(16, 169, 176, .16); }
.bk-find.done .bk-xl tr.hit td.num { outline: 2px solid #10A9B0; outline-offset: -2px; background: var(--cyan-paint); color: #111; font-weight: 600; }
.bk-xl .xl-tabs { display: flex; align-items: stretch; gap: 0; border-top: 1px solid #D4D4D4; background: #F3F3F3; font: 400 8px var(--sans); color: #555; }
.bk-xl .xl-tabs span { padding: 3px 6px; border-right: 1px solid #DDD; }
.bk-xl .xl-tabs span.on { background: #fff; color: #1D6F42; font-weight: 600; box-shadow: inset 0 -2px 0 #1D6F42; }
.bk-xl .xl-tabs .more { color: #888; }
.bk-xl .xl-tabs .pos { margin-left: auto; border: 0; color: #111; font-weight: 600; }
.bk-lbo .bk-page.bk-xl { aspect-ratio: auto; }
.bk-find.done .bk-page.bk-xl tr.hit { background: none; box-shadow: none; color: inherit; }
.bk-find.done .bk-xl tr.hit td { background: rgba(16, 169, 176, .12); }
.bk-find.done .bk-xl tr.hit td:first-of-type { font-weight: 600; }
/* ---- the sports layout: two broadcasts and a play file, then the report and the signage workbook ---- */
.bk-sport .bk-viz.fin { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bk-sport .bk-find .bk-page.bk-xl { aspect-ratio: auto; }
.bk-sport .sp-photo { position: relative; }
.bk-sport .sp-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.85);
  -webkit-mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; mask: url(/painted/images/mask/panel.png) 0 0 / 100% 100% no-repeat; }
.bk-sport .bk-bignum b { font-size: 40px; }
.bk-sport .sp-photo .vbox { position: absolute; box-shadow: 0 0 0 2px #0BD3D8, 0 0 0 3px rgba(17, 17, 17, .6); border-radius: 2px; }
@media (max-width: 600px) { .bk-sport .bk-viz.fin { grid-template-columns: minmax(0, 1fr); } }
/* ---- the media layout: a question asked with a screenshot, the match beside it, the shots that look like it ---- */
.md-shot { display: flex; align-items: end; gap: 10px; margin: 4px 0 12px; }
.md-shot img { width: 132px; aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% 50%; border: 1px solid var(--ink); }
.md-shot span { font-size: 11px; color: var(--muted); }
.md-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 16px; }
.md-pair figure { margin: 0; } .md-pair figcaption { margin-top: 8px; font-size: 11px; color: var(--muted); }
.md-q { aspect-ratio: 16 / 9; overflow: hidden; border: 1px dashed #8D877C; }
.md-q img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transform-origin: 30% 55%; filter: contrast(1.08) saturate(1.1); }
.md-sims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.md-sims figure { margin: 0; } .md-sims img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.md-sims figcaption { margin-top: 5px; font-size: 10px; color: var(--muted); line-height: 1.35; }
.md-sims figcaption b { color: #111; background: var(--cyan-paint); padding: 0 .25em; font-weight: 500; }
.bk-media .md-match { margin-bottom: 20px; }
.bk-media .bk-subs + .bk-subs { margin-top: 20px; }
.md-rights .bk-grid-x td { font-size: 11px; }
@media (max-width: 600px) { .md-pair { grid-template-columns: minmax(0, 1fr); } }
.bk-media .bk-release mark { background: var(--cyan-paint); color: #111; padding: 0 .2em; box-shadow: inset 0 0 0 1px var(--cyan-edge); }
.bk-media .bk-xl .xl-grid tr:first-child th:nth-child(2) { width: 44%; }
.bk-media .bk-xl .xl-grid tr:first-child th:nth-child(4) { width: 8%; }
/* ---- financial services with five sources: three workbooks across the top, the earnings call and the memo below ---- */
.bk-fin5 .bk-finds { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bk-fin5 .bk-find:nth-child(-n+3) { grid-column: span 2; }
.bk-fin5 .bk-find:nth-child(n+4) { grid-column: span 3; }
.bk-fin5 .bk-find:nth-child(5) .bk-page { aspect-ratio: 16 / 9; }
.bk-fin5 .bk-xl .xl-tabs span { padding: 3px 4px; }
.bk-fin5 .bk-xl .xl-tabs .more { display: none; }
@media (max-width: 600px) { .bk-fin5 .bk-finds { grid-template-columns: minmax(0, 1fr); } .bk-fin5 .bk-find { grid-column: auto !important; } }
/* the earnings call: a recording, so a waveform in the player instead of a picture; what's been heard is in ink */
.bk-video.audio { background: #1E1C19; }
.bk-video.audio .wave { display: grid; place-items: center; }
.bk-video.audio .wave svg { width: 88%; height: 46%; margin-top: -6%; }
.bk-video.audio .wave rect { fill: rgba(255, 255, 255, .28); }
.bk-video.audio .wave::after { content: ""; position: absolute; left: 6%; top: 27%; height: 46%; width: calc(var(--p, 0%) * .88); margin-top: -3%;
  background: var(--cyan-paint); mix-blend-mode: multiply; opacity: .0; }
.bk-find.done .bk-video.audio .wave rect, .bk-video.audio.card .wave rect { fill: rgba(255, 255, 255, .42); }
.bk-video.audio .cc { bottom: 22%; }
.bk-video.audio.card .cam { font-size: 10px; }
/* the third view: the model's margin against the guidance on the call */
.bk-lbo:not([data-profile="call"]) .fx-ref.call, .bk-lbo[data-profile="call"] .fx-ref.early, .bk-lbo[data-profile="call"] .fx-ref.late { display: none; }
[data-profile="call"] .fx-ref.call .fx-lab { fill: #111; }
[data-profile="early"] .fin-num .call, [data-profile="late"] .fin-num .call, [data-profile="call"] .fin-num .early, [data-profile="call"] .fin-num .late { opacity: 0; }
.bk-fin5 .bk-sel { flex-wrap: wrap; }