/* Brochure-backed walkthroughs: clean setting-out lines, readable school work. */
.bk { --bk-accent: #fe79cb; --bk-paper: #f6f3ec; --bk-paper-line: #c6c1b6; --bk-ink: #171c20; --bk-muted: #5a6267; }
.bk--das-board { --bk-accent: #7abc32; }
.bk--sitrep { --bk-accent: #47a3ff; }
.bk--passport { --bk-accent: #b494ff; }
.bk--hp-source { --bk-accent: #c5a84e; }
.bk--work-pane { --bk-accent: #fe79cb; }
.bk--ready { --bk-accent: #f08a4b; }
.bk--account { --bk-accent: #c3ccd4; }
.bk :is(button, input, select) { font: inherit; }
.bk :is(button, a, input, select, [tabindex]):focus-visible { outline: 3px solid var(--bk-accent); outline-offset: 4px; }
.bk [hidden] { display: none !important; }
.bk:not(.is-enhanced) .bk-only-js, .bk.is-enhanced .bk-no-js { display: none; }
.bk-appearance.is-enhanced .bk-only-js { display: none; }
.bk-appearance.is-enhanced .bk-no-js { display: inline; }
.bk-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bk-intro { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(38px, 5vw, 70px) 38px; border-bottom: 1px solid var(--line); }
.bk-intro::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(#a9bac610 1px, transparent 1px), linear-gradient(90deg, #a9bac610 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent 18%, #000); }
.bk-intro::after { content: ''; position: absolute; z-index: -1; right: 8%; top: 32px; width: 170px; height: 170px; border: 1px solid color-mix(in srgb, var(--bk-accent) 32%, transparent); border-radius: 50%; box-shadow: 0 0 0 27px color-mix(in srgb, var(--bk-accent) 5%, transparent); opacity: .4; pointer-events: none; }
.bk:is(.bk--das-board, .bk--sitrep, .bk--passport, .bk--hp-source, .bk--work-pane) .bk-intro::after { inset: 0 0 0 auto; width: 62%; height: 100%; border: 0; border-radius: 0; box-shadow: none; background-position: right center; background-size: cover; opacity: .65; mask-image: linear-gradient(90deg, transparent, #000 80%); }
.bk--das-board .bk-intro::after { background-image: url('/assets/backgrounds/das-board.svg'); }
.bk--sitrep .bk-intro::after { background-image: url('/assets/backgrounds/sitrep.svg'); }
.bk--passport .bk-intro::after { background-image: url('/assets/backgrounds/passport.svg'); }
.bk--hp-source .bk-intro::after { background-image: url('/assets/backgrounds/hp-source.svg'); }
.bk--work-pane .bk-intro::after { background-image: url('/assets/backgrounds/work-pane.svg'); }
.bk-intro .breadcrumbs { margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 12px; font-size: .88rem; }
.bk .eyebrow { color: var(--bk-accent); }
.bk-intro h1 { max-width: 18ch; font-size: clamp(2.8rem, 6vw, 5.4rem); margin-bottom: 20px; }
.bk-intro__copy { max-width: 760px; color: #d0d9de; font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin: 0; }
.bk-intro__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .86rem; color: #c8d2d8; margin-top: 24px; }
.bk-intro__meta > span { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid #536977; border-radius: 6px; background: #112936; }
.bk-intro__qualification { font-size: .9rem; color: #afc0ca; max-width: 800px; margin-bottom: 0; }
.bk-content { padding-block: 28px 0; }
.bk-workspace { border: 1px solid #496171; border-radius: 10px; background: #0b202c; scroll-margin-top: 110px; }
.bk-workspace__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; padding: 20px 22px; border-bottom: 1px solid #496171; border-radius: 9px 9px 0 0; background: color-mix(in srgb, var(--bk-accent) 8%, #122c3a); }
.bk-workspace__identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bk-workspace__icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #5f7888; border-radius: 6px; background: #0c2230; color: var(--bk-accent); }
.bk-workspace__icon svg { width: 23px; height: 23px; }
.bk-workspace__title { margin: 0; color: #f6f5f1; font: 600 1.1rem/1.3 'Source Sans 3', sans-serif; }
.bk-workspace__subtitle { margin: 4px 0 0; color: #bfced8; font-size: .9rem; line-height: 1.4; }
.bk-workspace > [data-bk-mode-panel] { padding: 22px; scroll-margin-top: calc(var(--site-header-height, 78px) + 110px); }
.bk-modes { display: flex; width: fit-content; max-width: 100%; gap: 4px; padding: 4px; margin: 0; border: 1px solid #4a6272; border-radius: 999px; background: #0b1e2a; }
.bk-modes a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-size: .88rem; font-weight: 600; }
.bk-modes a:hover { color: #fff; border-color: #70828e; }
.bk-modes [aria-selected="true"] { background: var(--bk-accent); color: #131b22; }
.bk-index { margin-block: 24px 40px; }
.bk-index ol { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-left: 24px; }
.bk-step-controls { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 0 20px; margin: 0 0 24px; border-bottom: 1px solid #3d586a; }
.bk-step-controls > div { min-width: 0; width: min(100%, 640px); }
.bk-step-controls label, .bk-search label { display: block; color: #c9d5dc; font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.bk-step-controls select, .bk-search :is(input, select) { width: 100%; min-height: 46px; max-width: 100%; padding: 10px 12px; border: 1px solid #5c7180; border-radius: 5px; background: #102734; color: #f6f5f1; font-size: .95rem; }
.bk-step-controls > p { flex-shrink: 0; margin: 0 0 9px; padding: 5px 8px; border: 1px solid #496575; border-radius: 6px; background: #142d3b; color: #d6e1e7; font-variant-numeric: tabular-nums; font-size: .86rem; white-space: nowrap; }
.bk-step { position: relative; padding-block: 4px 20px; scroll-margin-top: 110px; }
.bk-step:not([hidden]) + .bk-step { padding-top: 50px; border-top: 1px solid var(--line); }
.bk-step__heading { margin-bottom: 24px; }
.bk-step__heading > .eyebrow { margin-bottom: 8px; }
.bk-step__heading h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); max-width: 28ch; margin: 0; scroll-margin-top: 110px; }
.bk-step__heading > p:not(.eyebrow) { color: #bfced7; margin: 9px 0 0; max-width: 78ch; }
.bk-availability { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 15px; border: 1px solid #496171; border-radius: 6px; background: #152c38; color: #cfdae0; font-size: .86rem; margin: 0 0 25px; }
.bk-availability strong { padding: 3px 7px; border: 1px solid #6b7e8a; border-radius: 6px; background: #203d4d; color: #f1efea; font-size: .8rem; }
.bk-availability p { margin: 0; flex: 1 1 240px; }
.bk-step__body { display: grid; grid-template-columns: minmax(230px, .56fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 50px); align-items: start; }
.bk-step__body--copy { display: block; }
.bk-step__body--copy .bk-step__copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bk-panel + .bk-panel { margin-top: 22px; }
.bk-panel h3 { color: #f3f1ed; font-size: 1.16rem; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 9px; }
.bk-panel p { margin: 0; font-size: .99rem; line-height: 1.6; color: #c6d2da; }
.bk-context { padding: 14px 16px; background: #152c38; border-radius: 5px; font-size: .88rem; color: #bacbd5; margin-top: 24px; }
.bk-screen { min-width: 0; margin: 0; }
.bk-screen__grid { position: relative; padding: clamp(10px, 1.5vw, 22px); background-color: color-mix(in srgb, var(--bk-accent) 6%, #112633); background-image: linear-gradient(#b7c6ce1c 1px, transparent 1px), linear-gradient(90deg, #b7c6ce1c 1px, transparent 1px); background-size: 22px 22px; border: 1px solid #4c6473; border-radius: 8px; }
.bk-screen__viewport { position: relative; background: #10151a; border: 1px solid #65737b; border-radius: 5px; box-shadow: 0 4px 18px #0003; }
.bk-screen__crop { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 4px; }
.bk-screen__focus { fill: none; stroke: var(--bk-accent); stroke-width: 2; }
.bk-screen__spot { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #101820; transform: translate(-50%, -50%); cursor: pointer; border-radius: 50%; }
.bk-screen__spot > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #151d24; border-radius: 50%; background: var(--bk-accent); color: #111b22; box-shadow: 0 0 0 3px #07162150, 0 2px 8px #0006; font: 600 .75rem/1 "Poppins", sans-serif; }
.bk-screen__spot[aria-expanded="true"] > span { box-shadow: 0 0 0 5px #f6f3ecb0, 0 2px 8px #0006; }
.bk-screen figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 8px 18px; font-size: .8rem; color: #a9bdc9; padding-top: 11px; }
.bk-screen figcaption small { display: block; margin-top: 3px; font-size: .75rem; }
.bk-quiet-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid #627885; border-radius: 6px; background: #173443; color: #f3f2ed; font-size: .9rem !important; font-weight: 600 !important; cursor: pointer; text-decoration: none; }
.bk-quiet-button:hover { border-color: var(--bk-accent); background: color-mix(in srgb, var(--bk-accent) 9%, #112a38); }
.bk-quiet-button:disabled { opacity: .4; cursor: default; }
.bk-screen figcaption .bk-quiet-button { margin-top: -5px; }
.bk-screen__notes { min-height: 72px; padding-top: 10px; }
.bk-screen__notes ol { list-style: none; margin: 0; padding: 0; }
.bk-screen__notes li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #173240; border: 1px solid #4a6577; border-radius: 5px; color: #e3e9ed; font-size: .88rem; line-height: 1.45; }
.bk-screen__notes li + li { margin-top: 8px; }
.bk-screen__notes p { margin: 0; }
.bk-screen__note-number { display: grid; place-items: center; flex-shrink: 0; width: 23px; height: 23px; border-radius: 50%; background: var(--bk-accent); color: #14212a; font-size: .7rem; font-weight: 600; }
.bk-screen__hint { color: #b0c2ce; font-size: .86rem; padding: 10px 0; }
.bk-example { display: flex; align-items: center; gap: 18px; padding: 16px 20px; margin: 20px 0 12px; background: var(--bk-paper); color: var(--bk-ink); border: 1px solid var(--bk-paper-line); border-radius: 6px; }
.bk-example__mark { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bk-example__mark img { width: 32px; height: 24px; }
.bk-example__mark strong { font-size: .83rem; font-weight: 600; }
.bk-example > p { color: #303b40; font-size: .96rem; line-height: 1.55; margin: 0; }
.bk-step__footer { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; padding: 10px 0; font-size: .84rem; color: #b9cbd7; }
.bk-step__footer a { color: var(--bk-accent); }
.bk-pagination { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 0; }
.bk-anchor { position: absolute; top: 0; scroll-margin-top: 110px; }
.bk-library { scroll-margin-top: 110px; }
.bk:not(.is-enhanced) .bk-library { margin-top: 42px; padding-top: 40px; border-top: 1px solid var(--line); }
.bk-library__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.bk-library__heading h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin-bottom: 8px; }
.bk-library__heading p:not(.eyebrow) { color: #bfd0da; margin-bottom: 0; }
.bk-count { flex-shrink: 0; margin-bottom: 6px; padding: 4px 8px; border: 1px solid #536c7b; border-radius: 6px; background: #142e3c; font-size: .83rem; color: #c8d8e2; }
.bk-library-tools { padding: 16px 0; border-block: 1px solid #415b6c; }
.bk-search { position: relative; display: flex; gap: 12px; align-items: end; }
.bk-search__field { flex: 1; }
.bk-search > div { min-width: 0; }
.bk-search input::placeholder { color: #a7bac7; }
.bk-results { font-size: .86rem; color: #c5d4dc; margin: 10px 0 0; }
.bk-filter-trigger { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; min-width: 125px; min-height: 44px; }
.bk-filter-trigger > svg { width: 18px; height: 18px; }
.bk-filter-trigger > svg circle { fill: #173443; }
.bk-filter-count { display: inline-grid; min-width: 22px; min-height: 22px; place-items: center; padding: 2px 5px; border-radius: 999px; background: var(--bk-accent); color: #13202a; font: 600 .74rem/1 'Source Sans 3', sans-serif; }
.bk-filter-panel { position: absolute; z-index: 16; top: calc(100% - 1px); right: 0; box-sizing: border-box; width: min(430px, 100%); max-height: min(340px, calc(100dvh - 32px)); overflow: auto; padding: 16px; border: 1px solid #718795; border-radius: 6px; color: #f6f5f1; background: #132d3c; box-shadow: 0 12px 32px #0005; overscroll-behavior: contain; }
.bk-filter-panel[data-placement='above'] { top: auto; bottom: calc(100% - 1px); box-shadow: 0 -12px 32px #0005; }
.bk-filter-panel[data-space='compact'] { max-height: 220px; }
.bk-filter-panel[data-space='tight'] { max-height: 150px; }
.bk-filter-panel[data-space='small'] { max-height: 96px; }
.bk-filter-panel[data-space='micro'] { max-height: 64px; }
.bk-filter-panel[data-space='tiny'] { max-height: 32px; }
.bk-filter-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bk-filter-panel h3 { margin: 0; font: 600 1rem/1.3 'Source Sans 3', sans-serif; letter-spacing: normal; }
.bk-filter-panel > header > div { display: flex; gap: 6px; }
.bk-filter-panel .bk-quiet-button { padding-inline: 10px; background: #1b3b4b; }
.bk-filter-panel [data-bk-filter-done] { background: color-mix(in srgb, var(--bk-accent) 14%, #193747); }
.bk-filter-fields { display: grid; gap: 14px; }
.bk-filter-fields > div { min-width: 0; }
.bk-filter-fields select { width: 100%; }
.bk-empty { padding: 24px; border: 1px solid #677782; border-radius: 6px; color: #d8e1e6; }
.bk-library-group { scroll-margin-top: 110px; margin-top: 34px; }
.bk-library-group > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.bk-library-group > header h3 { font-size: 1.55rem; margin: 0; }
.bk-library-group > header a { color: var(--bk-accent); font-size: .82rem; }
.bk-library-group > .bk-availability { margin-bottom: 15px; }
.bk-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bk-feature { padding: 19px 21px; border: 1px solid #476171; border-radius: 6px; background: #0d2431; scroll-margin-top: 110px; }
.bk-feature:target { background: color-mix(in srgb, var(--bk-accent) 10%, #0d2431); border-color: var(--bk-accent); }
.bk-feature h4 { margin: 0 0 9px; font-family: "Poppins", sans-serif; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.bk-feature h4 a { text-decoration: none; }
.bk-feature h4 a:hover { text-decoration: underline; }
.bk-feature > p { color: #c7d4dc; margin: 0; font-size: .94rem; line-height: 1.55; }
.bk-feature .bk-feature__audience { font-size: .78rem; color: #b2c6d2; margin-top: 13px; }
.bk-feature__audience > span { color: #d1dde4; font-weight: 600; margin-right: 4px; }
.bk-ending { margin-top: 42px; padding: 40px 0 60px; border-top: 1px solid #4a6373; }
.bk-ending h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.bk-ending p:not(.eyebrow) { max-width: 760px; color: #bfd0da; }
.bk-ending .hero-actions { margin-top: 22px; }
.bk .button.primary { background: var(--bk-accent); border-color: var(--bk-accent); color: #15212a; }
.bk-zoom { width: min(1440px, 94vw); max-width: 94vw; max-height: 92dvh; padding: 22px; border: 1px solid #718c9c; border-radius: 9px; background: #0d2230; color: #f6f5f1; overscroll-behavior: contain; }
.bk-zoom::backdrop { background: #031019dd; backdrop-filter: blur(4px); }
.bk-zoom__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bk-zoom__bar h2 { margin: 0; font-size: 1.35rem; }
.bk-zoom__bar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-zoom__description { margin-block: 12px 18px; font-size: .9rem; color: #bdcdd6; }
.bk-zoom__media { overflow: auto; max-height: 65dvh; border: 1px solid #71828d; border-radius: 5px; background: #06131c; }
.bk-zoom__media svg { display: block; width: 100%; height: auto; }
.bk-zoom__media[data-native="true"] svg { width: auto; max-width: none; height: auto; }
.bk-zoom__help { margin-bottom: 0; font-size: .78rem; color: #a7bdca; }
.bk-section-heading { margin-bottom: 26px; }
.bk-section-heading h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
.bk-section-heading > p:not(.eyebrow) { color: #bfd0da; max-width: 720px; }
.bk-reading-routes { padding-block: 20px 40px; }
.bk-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bk-route { padding: 25px; border: 1px solid #516a7a; border-radius: 7px; background: #102735; }
.bk-route h3 { font-size: 1.42rem; line-height: 1.15; }
.bk-route > p { color: #c5d2da; font-size: .98rem; margin-bottom: 20px; }
.bk-route ol { display: grid; gap: 12px; padding-left: 22px; margin: 0; }
.bk-route li { color: #b7cbd8; font-size: .86rem; }
.bk-route li a { display: block; }
.bk-route li span { display: block; color: #f0efeb; font-size: .8rem; font-weight: 600; }
.bk-apps { padding-block: 28px 42px; border-top: 1px solid var(--line); }
.bk-app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bk-app-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 25px; border: 1px solid #536a78; border-radius: 7px; background: #102735; }
.bk-app-card:hover, .bk-app-card:focus-within { background: color-mix(in srgb, var(--bk-accent) 5%, #102735); border-color: var(--bk-accent); }
.bk-app-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.bk-app-card__top .eyebrow { margin: 0; font-size: .72rem; }
.bk-app-card__number { color: #a7bdca; font-size: .77rem; font-variant-numeric: tabular-nums; }
.bk-app-card h3 { font-size: 1.55rem; line-height: 1.15; }
.bk-app-card h3 a { text-decoration: none; }
.bk-app-card > p { font-size: .96rem; color: #c1d0da; }
.bk-app-card .bk-app-card__count { margin-top: auto; padding-top: 14px; font-size: .78rem; color: #a9c0cf; }
.bk-app-card__links { display: flex; flex-wrap: wrap; gap: 12px 20px; padding-top: 14px; border-top: 1px solid #466171; font-size: .84rem; color: var(--bk-accent); }
.bk-shared-service { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: center; gap: 40px; padding: 28px; margin-bottom: 30px; border: 1px solid #647883; border-radius: 7px; background: #142b38; }
.bk-shared-service h2 { font-size: 2rem; }
.bk-shared-service p:not(.eyebrow) { color: #c0d0da; }
.bk-shared-service > div:last-child { text-align: right; font-size: .87rem; }
.bk-overview__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.bk-overview__links > a { padding: 20px; border: 1px solid #526c7c; border-radius: 6px; background: #102735; text-decoration: none; }
.bk-overview__links > a:hover { border-color: var(--bk-accent); }
.bk-overview__links span { display: block; font-size: 1.12rem; font-weight: 600; margin-bottom: 10px; }
.bk-overview__links small { display: block; font-size: .9rem; line-height: 1.5; color: #c3d1da; }
.bk-appearance { margin-top: 35px; border: 1px solid #496171; border-radius: 10px; background: #0b202c; scroll-margin-top: 110px; }
.bk-appearance__header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 18px 28px; padding: 22px; border-bottom: 1px solid #496171; border-radius: 9px 9px 0 0; background: color-mix(in srgb, var(--bk-accent) 8%, #122c3a); }
.bk-appearance__header > div { flex: 1 1 360px; min-width: 0; }
.bk-appearance__header h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin-bottom: 9px; }
.bk-appearance__header p:not(.eyebrow) { margin: 0; color: #c4d4dd; }
.bk-appearance__header p.bk-appearance__context { margin-top: 9px; }
.bk-appearance__body { padding: 22px; }
.bk-appearance__context { font-size: .9rem; color: #c4d4dd; }
.bk-appearance__panel { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 28px; scroll-margin-top: 110px; }
.bk-appearance__panel > div > p { font-size: 1rem; color: #c1d1db; }
.bk-appearance__instructions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: 25px; }
.bk-appearance__instructions h3 { font-size: 1.12rem; }
.bk-appearance__instructions p { font-size: .94rem; color: #c1d1db; margin-bottom: 0; }
@media (max-width: 1000px) {
  .bk-step__body { grid-template-columns: minmax(210px, .5fr) minmax(0, 1fr); gap: 25px; }
  .bk-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bk-intro { padding-block: 30px; }
  .bk-intro h1 { font-size: clamp(2.45rem, 8vw, 3.8rem); }
  .bk-intro::after { right: -100px; opacity: .24; }
  .bk-intro__meta { gap: 8px 16px; }
  .bk-content { padding-top: 20px; }
  .bk-workspace__header { padding: 18px 16px; }
  .bk-workspace > [data-bk-mode-panel] { padding: 18px 16px; }
  .bk-modes a { padding: 10px 15px; font-size: .83rem; }
  .bk-step-controls { gap: 14px; margin-bottom: 24px; }
  .bk-step-controls > p { font-size: .8rem; }
  .bk-step__body { grid-template-columns: 1fr; gap: 20px; }
  .bk-step__heading h2 { max-width: 24ch; }
  .bk-step__copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .bk-panel + .bk-panel { margin-top: 0; }
  .bk-context { grid-column: 1 / -1; margin: 0; }
  .bk-screen__grid { padding: 14px; }
  .bk-example { align-items: flex-start; padding: 15px; gap: 12px; }
  .bk-example__mark { flex-direction: column; gap: 3px; }
  .bk-example__mark img { width: 32px; height: 24px; }
  .bk-example__mark strong { font-size: .74rem; }
  .bk-example > p { font-size: .91rem; }
  .bk-pagination { flex-wrap: wrap; gap: 12px; }
  .bk-pagination .bk-quiet-button { font-size: .8rem !important; padding-inline: 12px; }
  .bk-library__heading { display: block; }
  .bk-count { display: block; margin-top: 16px; }
  .bk-feature-grid, .bk-route-grid, .bk-overview__links { grid-template-columns: 1fr; }
  .bk-route { padding: 20px; }
  .bk-shared-service { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .bk-shared-service > div:last-child { text-align: left; }
  .bk-zoom { padding: 15px; }
  .bk-zoom__bar { align-items: start; flex-direction: column; gap: 12px; }
  .bk-zoom__media { max-height: 56dvh; }
  .bk-appearance__panel { grid-template-columns: 1fr; gap: 16px; }
  .bk-appearance__header, .bk-appearance__body { padding: 18px 16px; }
  .bk-ending { padding-bottom: 42px; }
}
@media (max-width: 480px) {
  .bk-step__copy, .bk-step__body--copy .bk-step__copy, .bk-app-grid { grid-template-columns: 1fr; }
  .bk-step-controls { flex-wrap: wrap; gap: 8px; }
  .bk-step-controls > p { margin: 0; }
  .bk-search { gap: 9px; }
  .bk-filter-trigger { min-width: 118px; padding-inline: 10px; }
  .bk-filter-panel { padding: 12px; }
  .bk-filter-panel > header { gap: 8px; }
  .bk-filter-panel h3 { font-size: .92rem; }
  .bk-example { gap: 10px; }
  .bk-availability { padding: 12px; }
  .bk-feature { padding: 17px; }
  .bk-appearance__instructions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bk *, .bk *::before, .bk *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media print {
  .bk .bk-only-js, .bk-modes, .bk-zoom { display: none !important; }
  .bk [data-bk-mode-panel][hidden], .bk [data-bk-step-panel][hidden], .bk [data-bk-library-group][hidden], .bk [data-bk-feature][hidden], .bk [data-bk-hotspot-note][hidden] { display: block !important; }
  .bk-step { break-inside: avoid; }
  .bk-step__body { grid-template-columns: 1fr; }
  .bk-feature-grid { grid-template-columns: 1fr 1fr; }
}

/* Native fragment navigation includes the attached, wrapping view header. */
@media (max-width: 640px) { .bk-workspace > [data-bk-mode-panel] { scroll-margin-top: calc(var(--site-header-height, 102px) + 200px); } }