/* Scroll chapters enhance the existing static page without styling shared includes. */
#bc-experience .bcx-hero-art { --hero-base-height: 355px; height: var(--hero-art-height, var(--hero-base-height)); }

/* The final hero beat captures the entire window, then reveals its saved result. */
#bc-experience :is(.bcx-capture-frame, .bcx-capture-flash, .bcx-capture-echo) { display: none; pointer-events: none; }
#bc-experience.bcx-motion .bcx-capture-frame { display: block; position: absolute; z-index: 4; inset: calc(-8px - var(--hero-aim-gap, 24px)); opacity: var(--hero-aim-opacity, 0); }
#bc-experience .bcx-capture-frame > i { position: absolute; width: 26px; height: 26px; border: 2px solid #d7e6ff; filter: drop-shadow(0 0 5px #6b9aff); }
#bc-experience .bcx-capture-frame > i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
#bc-experience .bcx-capture-frame > i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
#bc-experience .bcx-capture-frame > i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
#bc-experience .bcx-capture-frame > i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
#bc-experience .bcx-capture-frame > span { position: absolute; top: calc(16px + var(--hero-aim-gap, 24px)); left: 50%; padding: 4px 9px; background: #122343; border: 1px solid #688aca; border-radius: 4px; color: #cadbff; font: 500 14px/1.4 var(--bcx-mono); letter-spacing: .1em; white-space: nowrap; transform: translateX(-50%); }
#bc-experience.bcx-motion .bcx-capture-flash { display: block; position: absolute; z-index: 5; inset: 0; border-radius: inherit; background: #eff6ff; opacity: var(--hero-flash, 0); }
#bc-experience.bcx-motion .bcx-capture-echo { display: block; position: absolute; z-index: 4; inset: calc(-1 * var(--hero-echo-gap, 2px)); border: 1px solid #d3e5ff; border-radius: 16px; box-shadow: 0 0 20px #80acff66, inset 0 0 15px #80acff22; opacity: var(--hero-echo-opacity, 0); }
#bc-experience.bcx-motion .bcx-hero-browser > .bcx-selection { opacity: var(--hero-selection-opacity, 1); }
#bc-experience.bcx-motion .bcx-hero-browser > .bcx-browser-bar .bcx-address { opacity: calc(1 - var(--hero-aim-opacity, 0)); }
#bc-experience.bcx-motion .bcx-hero-browser > .bcx-scanline { z-index: 3; top: calc(11px + var(--hero-scan, 0) * (100% - 24px)); }
#bc-experience.bcx-motion .bcx-floating-key { opacity: var(--hero-key-opacity, 1); }
#bc-experience.bcx-motion .bcx-save-toast { opacity: var(--hero-saved, 0); transform: translateY(var(--hero-toast-y, 28px)) rotate(calc((1 - var(--hero-saved, 0)) * 5deg)) scale(calc(.94 + var(--hero-saved, 0) * .06)); }
#bc-experience .bcx-save-thumbnail { width: 54px; height: 42px; overflow: hidden; border: 3px solid #fff; border-radius: 4px; box-shadow: 0 1px 7px #101c382b; }
#bc-experience .bcx-save-thumbnail img { height: 100%; object-fit: cover; }
@media (max-width: 760px) {
    #bc-experience .bcx-capture-frame > i { width: 18px; height: 18px; }
    #bc-experience .bcx-save-thumbnail { width: 40px; height: 34px; }
    #bc-experience .bcx-save-toast { gap: 8px; }
    #bc-experience .bcx-save-toast > span { width: 25px; height: 25px; }
}

#bc-experience .bcx-chapter-cue, #bc-experience .bcx-feature-tabs { display: none; }
#bc-experience .bcx-chapter.is-pinned { position: relative; height: 280svh; padding: 0; }
#bc-experience .bcx-chapter.is-pinned > .bcx-chapter-stage { position: sticky; top: var(--bcx-header); height: calc(100svh - var(--bcx-header)); display: flex; flex-direction: column; justify-content: center; padding: 30px 0 55px; }
#bc-experience .bcx-chapter.is-pinned > .bcx-chapter-stage > * { flex-shrink: 0; }
#bc-experience .bcx-chapter.is-pinned .bcx-reveal { opacity: 1; transform: none; }
#bc-experience .bcx-chapter.is-pinned .bcx-section-heading { margin-bottom: 28px; }
#bc-experience .bcx-chapter.is-pinned .bcx-section-heading .bcx-eyebrow { margin-bottom: 16px; }
#bc-experience .bcx-chapter.is-pinned h2 { font-size: clamp(33px, 3.8vw, 49px); }
#bc-experience .bcx-chapter.is-pinned .bcx-chapter-cue { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; align-items: center; gap: 25px; color: #6780a4; font: 500 14px/1.4 var(--bcx-mono); letter-spacing: .08em; }
#bc-experience .bcx-chapter-cue > i { flex: 1; height: 2px; background: #899bb328; }
#bc-experience .bcx-chapter-cue > i > b { display: block; width: 100%; height: 100%; background: #4477ef; transform-origin: left; transform: scaleX(var(--chapter-progress, 0)); }
#bc-experience .bcx-chapter-cue em { font-style: normal; }

/* 01: the same preview changes mode as the reader advances. */
#bc-experience .bcx-modes.is-pinned { height: 300svh; }
#bc-experience .bcx-modes.is-pinned .bcx-mode-controls { padding-top: 0; }
#bc-experience .bcx-modes.is-pinned .bcx-mode-button { min-height: 65px; }
#bc-experience .bcx-modes.is-pinned .bcx-mode-copy { min-height: 100px; margin-top: 22px; }
#bc-experience .bcx-modes.is-pinned .bcx-preview-viewport { height: clamp(200px, calc(100svh - var(--bcx-header) - 440px), 550px); }
#bc-experience .bcx-modes.is-pinned .bcx-preview-page { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
#bc-experience .bcx-modes.is-pinned [data-current-mode="scroll"] .bcx-preview-page { transform: translateY(calc(var(--mode-phase, 0) * -160px)); }
#bc-experience .bcx-modes.is-pinned [data-current-mode="region"] .bcx-mode-selection { inset: calc(85px - var(--mode-phase, 0) * 25px) calc(100px - var(--mode-phase, 0) * 55px) calc(160px - var(--mode-phase, 0) * 40px) calc(170px - var(--mode-phase, 0) * 40px); }
#bc-experience .bcx-modes.is-pinned .bcx-mode-preview { transform: perspective(1600px) rotateY(calc((var(--mode-phase, .5) - .5) * -3deg)); }

/* 03: annotations are drawn, highlighted and placed along the scroll timeline. */
#bc-experience .bcx-workflow.is-pinned .bcx-workflow-head { margin-bottom: 24px; }
#bc-experience .bcx-workflow.is-pinned .bcx-workflow-head .bcx-eyebrow { margin-bottom: 16px; }
#bc-experience .bcx-workflow.is-pinned .bcx-workflow-head > div:last-child { font-size: 14px; }
#bc-experience .bcx-workflow.is-pinned .bcx-mini-label { margin-top: 15px; font-size: 14px; }
#bc-experience .bcx-workflow.is-pinned .bcx-editor { flex-shrink: 0; }
#bc-experience .bcx-workflow.is-pinned .bcx-editor-top { padding: 13px 22px; }
#bc-experience .bcx-workflow.is-pinned .bcx-editor-canvas { height: clamp(205px, calc(100svh - var(--bcx-header) - 370px), 690px); }
#bc-experience .bcx-workflow.is-pinned .bcx-editor-tools { min-height: 62px; padding: 10px; }
#bc-experience .bcx-workflow.is-pinned .bcx-workflow-notes { margin-top: 18px; }
#bc-experience .bcx-workflow.is-pinned .bcx-workflow-notes p { gap: 3px; }
#bc-experience .bcx-workflow.is-pinned .bcx-workflow-notes b { font-size: 14px; }
#bc-experience .bcx-workflow.is-pinned .bcx-workflow-notes span { font-size: 14px; }
#bc-experience .bcx-workflow.is-pinned .bcx-annotation-arrow path { stroke-dashoffset: calc(360 * (1 - var(--annotation-arrow, 1))); transition: none; }
#bc-experience .bcx-workflow.is-pinned .bcx-annotation-highlight { scale: var(--annotation-highlight, 1) 1; transform-origin: left center; transition: none; }
#bc-experience .bcx-workflow.is-pinned .bcx-annotation-note { opacity: var(--annotation-text, 1); translate: 0 calc(35px * (1 - var(--annotation-text, 1))); transition: none; }
#bc-experience .bcx-workflow.is-pinned .bcx-editor-canvas > img { transform: scale(calc(1.06 - var(--chapter-progress, 0) * .06)); }
#bc-experience .bcx-workflow.is-pinned .bcx-chapter-cue { color: #93a6cb; }
#bc-experience .bcx-workflow.is-pinned .bcx-chapter-cue > i > b { background: #d9ff4f; }

/* 04: one large visual per step, with original articles retained as the fallback. */
#bc-experience .bcx-details { padding-top: 0; }
#bc-experience .bcx-feature-track { padding-top: 120px; }
#bc-experience .bcx-feature-track.is-pinned { background: #edf2ff; transition: background .5s; }
#bc-experience .bcx-feature-track.is-pinned[data-active-feature="1"] { background: #f6ece4; }
#bc-experience .bcx-feature-track.is-pinned[data-active-feature="2"] { background: #e5f0ed; }
#bc-experience .bcx-feature-track.is-pinned .bcx-feature-tabs { display: flex; gap: 35px; border-top: 1px solid #b0bfd34d; border-bottom: 1px solid #b0bfd34d; padding-block: 3px; }
#bc-experience .bcx-feature-tabs > button { display: flex; align-items: center; gap: 15px; min-height: 54px; padding: 10px 0; background: transparent; border: 0; color: #7b8da5; font: 500 14px var(--bcx-mono); }
#bc-experience .bcx-feature-tabs > button > span { font: 600 14px/1.5 'Pretendard Variable', sans-serif; }
#bc-experience .bcx-feature-tabs > button[aria-pressed="true"] { color: #2359dd; }
#bc-experience .bcx-feature-track.is-pinned .bcx-feature-grid { display: grid; grid-template-columns: 1fr; gap: 0; overflow: clip; }
#bc-experience .bcx-feature-track.is-pinned .bcx-feature { grid-area: 1 / 1; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: 65px; align-items: start; border: 0; padding: 0; opacity: 0; visibility: hidden; transform: translateY(32px); transition: opacity .4s, transform .5s, visibility .4s; pointer-events: none; }
#bc-experience .bcx-feature-track.is-pinned .bcx-feature.is-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
#bc-experience .bcx-feature-track.is-pinned .bcx-feature-index { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 20px; }
#bc-experience .bcx-feature-track.is-pinned .bcx-feature h3 { grid-column: 2; grid-row: 2; font-size: clamp(25px, 3vw, 38px); line-height: 1.25; text-wrap: balance; }
#bc-experience .bcx-feature-track.is-pinned .bcx-feature p { grid-column: 2; grid-row: 3; margin-top: 20px; font-size: 15px; max-width: 390px; }
#bc-experience .bcx-feature-track.is-pinned .bcx-feature-visual { grid-column: 1; grid-row: 1 / 5; width: 100%; height: clamp(260px, calc(100svh - var(--bcx-header) - 340px), 680px); }
#bc-experience .bcx-feature-track.is-pinned .bcx-file-stack > span { width: 158px; height: 198px; padding-top: 63px; font-size: 65px; border-radius: 10px; box-shadow: 0 22px 55px #153e8620; transform: translateX(calc(-35px - var(--feature-phase, 0) * 90px)) rotate(calc(-6deg - var(--feature-phase, 0) * 13deg)); }
#bc-experience .bcx-feature-track.is-pinned .bcx-file-stack > span:nth-child(2) { transform: translateY(calc(var(--feature-phase, 0) * -12px)); }
#bc-experience .bcx-feature-track.is-pinned .bcx-file-stack > span:nth-child(3) { transform: translateX(calc(35px + var(--feature-phase, 0) * 90px)) rotate(calc(6deg + var(--feature-phase, 0) * 13deg)); }
#bc-experience .bcx-feature-track.is-pinned .bcx-file-stack small { font-size: 16px; }
#bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack i { width: 166px; height: 228px; border-radius: 7px; box-shadow: 0 15px 50px #5e493215; transform: translate(calc(-25px - var(--feature-phase, 0) * 75px), calc(var(--feature-phase, 0) * 12px)) rotate(calc(-5deg - var(--feature-phase, 0) * 15deg)); }
#bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack i:nth-child(2) { transform: translate(calc(25px + var(--feature-phase, 0) * 75px), calc(var(--feature-phase, 0) * 12px)) rotate(calc(5deg + var(--feature-phase, 0) * 15deg)); }
#bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack i:nth-child(3) { transform: translateY(calc(var(--feature-phase, 0) * -20px)); }
#bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack b { font-size: 46px; }
#bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack span { font-size: 14px; }
#bc-experience .bcx-feature-track.is-pinned .bcx-url-stack { gap: 15px; transform: rotate(calc(-8deg + var(--feature-phase, 0) * 8deg)); }
#bc-experience .bcx-feature-track.is-pinned .bcx-url-stack > span { width: 86%; max-width: 400px; padding: 20px; font-size: 15px; gap: 15px; box-shadow: 0 14px 30px #34594c0d; }
#bc-experience .bcx-feature-track.is-pinned .bcx-url-stack > span:nth-child(2) { translate: calc((1 - var(--feature-phase, 0)) * 25px) 0; }
#bc-experience .bcx-feature-track.is-pinned .bcx-url-stack > span:nth-child(3) { translate: calc((1 - var(--feature-phase, 0)) * 50px) 0; }
#bc-experience .bcx-feature-track.is-pinned .bcx-url-stack b { opacity: var(--feature-phase, 0); }

@media (min-width: 1000px) and (max-height: 900px) {
    #bc-experience .bcx-hero-art { --hero-base-height: 310px; }
    #bc-experience .bcx-workflow.is-pinned h2 { font-size: 39px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-workflow-head { margin-bottom: 20px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-workflow-head .bcx-eyebrow { margin-bottom: 12px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
    #bc-experience .bcx-modes.is-pinned .bcx-section-heading > p:last-child { max-width: 210px; font-size: 14px; }
    #bc-experience .bcx-modes.is-pinned .bcx-mode-layout { gap: 30px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-workflow-head { gap: 25px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-feature { column-gap: 25px; grid-template-columns: 1fr 1fr; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-feature-visual { scale: .85; }
}
@media (max-width: 760px) {
    #bc-experience .bcx-hero-art { --hero-base-height: 225px; }
    #bc-experience .bcx-chapter.is-pinned > .bcx-chapter-stage { padding: 22px 0 100px; }
    #bc-experience .bcx-chapter.is-pinned .bcx-chapter-cue { bottom: 82px; font-size: 14px; gap: 13px; }
    #bc-experience .bcx-chapter.is-pinned h2 { font-size: 29px; }
    #bc-experience .bcx-chapter.is-pinned .bcx-section-heading { margin-bottom: 18px; }
    #bc-experience .bcx-chapter.is-pinned .bcx-section-heading .bcx-eyebrow { margin-bottom: 12px; font-size: 14px; }
    #bc-experience .bcx-modes.is-pinned .bcx-section-heading > p:last-child { display: none; }
    #bc-experience .bcx-modes.is-pinned .bcx-mode-layout { gap: 13px; }
    #bc-experience .bcx-modes.is-pinned .bcx-mode-button { min-height: 43px; padding-block: 8px; }
    #bc-experience .bcx-modes.is-pinned .bcx-mode-button > span:nth-of-type(2) { font-size: 14px; }
    #bc-experience .bcx-modes.is-pinned .bcx-mode-copy { min-height: 70px; margin-top: 12px; }
    #bc-experience .bcx-modes.is-pinned .bcx-mode-copy h3 { font-size: 14px; line-height: 1.4; }
    #bc-experience .bcx-modes.is-pinned .bcx-mode-copy p { margin-top: 5px; font-size: 14px; line-height: 1.65; }
    #bc-experience .bcx-modes.is-pinned .bcx-mode-preview { padding: 12px; border-radius: 6px; }
    #bc-experience .bcx-modes.is-pinned .bcx-demo-caption { margin-bottom: 12px; font-size: 14px; }
    #bc-experience .bcx-modes.is-pinned .bcx-preview-viewport { height: clamp(155px, calc(100svh - var(--bcx-header) - 525px), 340px); }
    #bc-experience .bcx-modes.is-pinned .bcx-preview-footer { display: none; }
    #bc-experience .bcx-modes.is-pinned [data-current-mode="region"] .bcx-mode-selection { inset: 35px 25px 35px 85px; }
    #bc-experience .bcx-modes.is-pinned [data-current-mode="element"] .bcx-mode-selection { inset: 73px 18px 15px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-workflow-head { margin-bottom: 18px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-workflow-head .bcx-eyebrow { font-size: 14px; margin-bottom: 12px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-workflow-head > div:last-child { margin-top: 12px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-workflow-head > div:last-child > p { display: none; }
    #bc-experience .bcx-workflow.is-pinned .bcx-mini-label { font-size: 14px; margin-top: 0; }
    #bc-experience .bcx-workflow.is-pinned .bcx-editor-top { padding: 12px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-editor-canvas { height: clamp(180px, calc(100svh - var(--bcx-header) - 395px), 520px); }
    #bc-experience .bcx-workflow.is-pinned .bcx-editor-tools { min-height: 62px; padding: 8px; }
    #bc-experience .bcx-workflow.is-pinned .bcx-workflow-notes { display: none; }
    #bc-experience .bcx-feature-track { padding-top: 76px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-feature-tabs { justify-content: space-between; gap: 8px; }
    #bc-experience .bcx-feature-tabs > button { gap: 5px; font-size: 14px; min-height: 44px; }
    #bc-experience .bcx-feature-tabs > button > span { font-size: 14px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-feature { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; row-gap: 0; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-feature-visual { grid-column: 1; grid-row: 1; height: clamp(180px, calc(100svh - var(--bcx-header) - 440px), 410px); }
    #bc-experience .bcx-feature-track.is-pinned .bcx-feature-index { grid-column: 1; grid-row: 2; padding: 0 0 12px; font-size: 14px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-feature h3 { grid-column: 1; grid-row: 3; font-size: 23px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-feature p { grid-column: 1; grid-row: 4; font-size: 14px; margin-top: 12px; min-height: 64px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-file-stack > span { width: 102px; height: 135px; font-size: 43px; padding-top: 42px; transform: translateX(calc(-25px - var(--feature-phase, 0) * 47px)) rotate(calc(-6deg - var(--feature-phase, 0) * 10deg)); }
    #bc-experience .bcx-feature-track.is-pinned .bcx-file-stack > span:nth-child(3) { transform: translateX(calc(25px + var(--feature-phase, 0) * 47px)) rotate(calc(6deg + var(--feature-phase, 0) * 10deg)); }
    #bc-experience .bcx-feature-track.is-pinned .bcx-file-stack small { font-size: 14px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack i { width: 103px; height: 146px; transform: translate(calc(-20px - var(--feature-phase, 0) * 43px), 0) rotate(calc(-5deg - var(--feature-phase, 0) * 13deg)); }
    #bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack i:nth-child(2) { transform: translate(calc(20px + var(--feature-phase, 0) * 43px), 0) rotate(calc(5deg + var(--feature-phase, 0) * 13deg)); }
    #bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack b { font-size: 29px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-pdf-stack span { font-size: 14px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-url-stack { gap: 11px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-url-stack > span { max-width: 275px; padding: 13px; font-size: 14px; gap: 10px; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-url-stack > span:nth-child(2) { translate: calc((1 - var(--feature-phase, 0)) * 10px) 0; }
    #bc-experience .bcx-feature-track.is-pinned .bcx-url-stack > span:nth-child(3) { translate: calc((1 - var(--feature-phase, 0)) * 20px) 0; }
}
@media (prefers-reduced-motion: reduce) {
    #bc-experience .bcx-hero-art { height: var(--hero-base-height); }
}