html { scroll-padding-top: 0; }
.boxbox-product-hero .product-hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; }
.boxbox-product-hero .product-hero-image { border-color: #48434a; border-bottom: 2px solid var(--accent); background: #141418; }
.product-presentation { display: block; }
.product-presentation > img { display: block; }
.presentation-caption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; background: linear-gradient(100deg, #211a20, #18181d); }
.presentation-caption strong { font: 22px/1 var(--heading); }
.presentation-caption strong > span { color: #ff4059; }
.presentation-caption > span { display: inline-flex; align-items: center; gap: 8px; color: #c7bec9; font-size: 10px; }
.presentation-caption .icon { width: 14px; height: 14px; }
.product-presentation:hover .presentation-caption > span { color: #fff; }
@media (max-width: 900px) {
  .boxbox-product-hero .product-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .presentation-caption { padding: 13px 16px; }
}
.boxbox-section-nav { position: sticky; top: var(--site-header-height, 89px); z-index: 20; border-block: 1px solid #33333b; background: #17171bf5; backdrop-filter: blur(15px); }
.boxbox-section-nav > div { display: flex; align-items: center; gap: 32px; min-height: 59px; }
.boxbox-section-nav strong { margin-right: auto; white-space: nowrap; font: 21px var(--heading); letter-spacing: .03em; }
.boxbox-section-nav strong span { color: var(--accent); }
.boxbox-section-nav a { font-size: 11px; color: #b8b8c5; padding-block: 18px; white-space: nowrap; }
.boxbox-section-nav a:hover, .boxbox-section-nav a[aria-current] { color: #fff; }
.boxbox-intro { display: grid; grid-template-columns: 1fr .85fr; gap: 90px; align-items: center; }
.boxbox-intro .body-copy { margin-bottom: 0; font-size: 14px; }
.boxbox-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 0; }
.boxbox-stats div { border-top: 1px solid #38383f; padding-top: 17px; }
.boxbox-stats div:last-child { grid-column: 1 / -1; }
.boxbox-stats dt { font: 44px/1.15 var(--heading); color: #ff4059; }
.boxbox-stats dd { font-size: 11px; color: #aaaab6; margin: 7px 0 0; }
.boxbox-lead { max-width: 790px; font-size: 14px; line-height: 1.9; color: #a9a9b6; margin-bottom: 32px; }
.boxbox-sources, .workspace-section { background: #161619; border-block: 1px solid var(--line); }
.boxbox-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #33333c; padding-bottom: 15px; margin-block: 35px 0; }
.boxbox-tabs a { font-size: 12px; font-weight: 600; padding: 12px 19px; border: 1px solid #34343e; border-radius: 4px; color: #babac6; transition: border-color .2s, background .2s; }
.boxbox-tabs a:hover { color: white; border-color: #777784; }
.boxbox-tabs a[aria-selected='true'] { color: #fff; border-color: #b7384d; background: #351c26; }
.source-panel { display: grid; grid-template-columns: 1fr .8fr; gap: 80px; padding-block: 35px 0; scroll-margin-top: 190px; }
.source-panel + .source-panel { border-top: 1px solid #33333c; margin-top: 35px; }
.source-index { color: #77404c; font: 48px var(--heading); }
.source-panel h3 { font-size: 24px; margin: 5px 0 15px; letter-spacing: -.025em; }
.source-panel p { font-size: 13px; color: #afafbd; }
.source-panel .source-note { color: #d0abb4; border-left: 2px solid #8d3547; padding-left: 15px; font-size: 11px; margin-top: 22px; }
.source-panel ol { list-style: none; margin: 10px 0 0; padding: 0; }
.source-panel li { display: flex; gap: 20px; border-bottom: 1px solid #303038; padding-block: 17px; }
.source-panel li:first-child { padding-top: 0; }
.source-panel li > span { color: #fa526a; font: 12px Consolas, monospace; padding-top: 4px; }
.source-panel li p { margin: 0; font-size: 12px; }
.guide-ready .source-panel { border-top: none; margin-top: 0; }
.guide-explorer, #features, #sources, #workspace, #data-guide, #workspace-gallery, .view-panel, .source-panel, .workspace-preset { scroll-margin-top: calc(var(--site-header-height, 89px) + 76px); }
.anchor-target { display: block; scroll-margin-top: 180px; }
.enhanced-only { display: none !important; }
.guide-ready .enhanced-only { display: flex !important; }
.workspace-preset { display: grid; grid-template-columns: 1fr .9fr; gap: 70px; padding-block: 30px; border-bottom: 1px solid #34343e; }
.workspace-preset h3 { font-size: 25px; letter-spacing: -.025em; }
.workspace-preset p { color: #aaaabb; font-size: 13px; margin-bottom: 0; }
.workspace-preset .eyebrow { color: #ca7a8b; font-size: 9px; }
.workspace-links { display: flex; flex-wrap: wrap; gap: 8px; }
.workspace-links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 13px; background: #25252e; border: 1px solid #41414d; border-radius: 3px; font-size: 11px; color: #c9c9d7; }
.workspace-links a:hover { border-color: #b44259; }
.workspace-links .icon { width: 14px; height: 14px; color: #f56f87; }
.workspace-controls { display: grid; grid-template-columns: 1fr 1fr; column-gap: 45px; margin-top: 22px; }
.workspace-controls details { border-bottom: 1px solid #33333f; }
.workspace-controls summary { display: flex; align-items: center; gap: 14px; padding: 20px 0; list-style: none; font-size: 12px; font-weight: 600; cursor: pointer; }
.control-index { color: #b14b60; font: 11px Consolas, monospace; }
.control-plus { color: #bd6174; margin-left: auto; font-size: 20px; }
.workspace-controls p { padding: 0 20px 5px 30px; color: #a7a7b9; font-size: 12px; }
.workspace-controls details[open] .control-plus { transform: rotate(45deg); }
.workspace-gallery { padding-top: 75px; }
.workspace-gallery h2 { font-size: 40px; }
.workspace-preview { margin: 0; border: 1px solid #42424e; background: #101014; border-radius: 5px; overflow: hidden; }
.workspace-preview a { display: block; }
.workspace-preview img { width: 100%; height: auto; max-height: 700px; object-fit: contain; }
.workspace-preview figcaption { padding: 14px 22px; font-size: 12px; color: #cacad8; border-top: 1px solid #30303a; }
.boxbox-data { display: grid; grid-template-columns: .85fr 1fr; gap: 75px; }
.data-notes details { border-bottom: 1px solid #393944; }
.data-notes summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; font-size: 13px; font-weight: 600; padding: 18px 0; }
.data-notes summary > span { color: #f16c83; font-size: 19px; }
.data-notes details[open] summary > span { transform: rotate(45deg); }
.data-notes p { font-size: 12px; line-height: 1.9; color: #a9a9ba; }
.workspace-controls summary::-webkit-details-marker, .data-notes summary::-webkit-details-marker { display: none; }
.dialog-toolbar { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 7px; }
.dialog-toolbar button { min-width: 36px; min-height: 35px; border: 1px solid #4b4b59; background: #282832; border-radius: 3px; font-size: 12px; padding: 6px 12px; }
.dialog-toolbar button:disabled { opacity: .4; }
.dialog-toolbar [data-image-position] { font: 10px Consolas, monospace; color: #b1b1c4; }
.dialog-toolbar [data-image-zoom] { margin-left: 15px; font-size: 10px; }
.dialog-hint { display: block; text-align: center; font-size: 9px; color: #9090a4; }
.image-dialog.is-zoomed .dialog-image-wrap { width: 90vw; height: 75dvh; }
.image-dialog.is-zoomed .dialog-image-wrap > img { max-width: none; max-height: none; }
.image-dialog .dialog-image-wrap { max-height: 75dvh; }
.image-dialog .dialog-image-wrap > img { max-height: min(70dvh, calc(96dvh - 185px)); }
@media (max-width: 1050px) {
  .boxbox-section-nav > div { gap: 22px; }
  .boxbox-intro { gap: 45px; }
  .source-panel { gap: 40px; }
  .workspace-preset { gap: 40px; }
  .boxbox-data { gap: 40px; }
}
@media (max-width: 760px) {
  .boxbox-section-nav > div { gap: 23px; overflow-x: auto; width: 100%; padding-inline: 18px; min-height: 52px; scrollbar-width: thin; }
  .boxbox-section-nav strong { display: none; }
  .boxbox-section-nav a { font-size: 10px; padding-block: 15px; }
  .boxbox-intro { grid-template-columns: 1fr; gap: 32px; }
  .boxbox-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .boxbox-stats div:last-child { grid-column: auto; }
  .boxbox-stats dt { font-size: 34px; }
  .boxbox-stats dd { font-size: 10px; }
  .boxbox-tabs { gap: 7px; }
  .boxbox-tabs a { font-size: 11px; padding: 10px 13px; }
  .source-panel { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
  .source-panel h3 { font-size: 23px; }
  .source-index { font-size: 35px; }
  .workspace-preset { grid-template-columns: 1fr; gap: 24px; }
  .workspace-preset h3 { font-size: 24px; }
  .workspace-controls { grid-template-columns: 1fr; }
  .workspace-gallery { padding-top: 55px; }
  .workspace-gallery h2 { font-size: 36px; }
  .workspace-preview figcaption { padding: 12px 16px; font-size: 10px; }
  .boxbox-data { grid-template-columns: 1fr; gap: 15px; }
  .boxbox-lead { font-size: 13px; }
  .dialog-toolbar { gap: 8px; }
  .dialog-toolbar [data-image-zoom] { margin-left: 3px; max-width: 135px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .guide-explorer * { scroll-behavior: auto; } }

/* Continuous product tour: native document scroll, no nested scroll panels. */
.guide-explorer { --tour-nav-height: 61px; --tour-progress-height: 52px; --tour-top: calc(var(--site-header-height, 89px) + var(--tour-nav-height) + var(--tour-progress-offset, calc(var(--tour-progress-height) + 2px)) + 24px); padding-bottom: 70px; }
.tour-container { width: min(1560px, calc(100% - 96px)); margin-inline: auto; }
.tour-intro { margin-bottom: 38px; }
.tour-intro h2 { max-width: 920px; }
.tour-intro .boxbox-lead { max-width: 850px; font-size: 15px; }
.tour-intro-footer { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; padding-top: 10px; }
.tour-scroll-hint { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #f5a4b0; margin: 0; }
.tour-scroll-hint > span { display: grid; place-items: center; width: 34px; height: 42px; border: 1px solid #71404b; border-radius: 18px; font-size: 22px; }
.tour-chapters { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tour-chapters a { padding-block: 9px; font-size: 11px; color: #b9b9c6; border-bottom: 1px solid #41414a; }
.tour-chapters a:hover { color: #fff; border-color: var(--accent); }
.guide-ready .tour-progress { display: block !important; }
.tour-progress { position: sticky; top: calc(var(--site-header-height, 89px) + var(--tour-nav-height)); z-index: 15; background: #121215f5; backdrop-filter: blur(16px); border-block: 1px solid #35353d; }
.tour-progress > .tour-container { display: flex; align-items: center; gap: 20px; height: var(--tour-progress-height); }
.tour-position { display: flex; gap: 9px; flex-shrink: 0; font: 12px Consolas, monospace; font-variant-numeric: tabular-nums; }
.tour-position b { color: #ff637b; font-weight: 500; }
.tour-position > span { color: #888895; }
[data-tour-title]:not([data-tour-step]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9d9e1; font-size: 12px; }
.tour-progress-hint { display: flex; align-items: center; gap: 17px; margin-left: auto; color: #9e9eae; white-space: nowrap; font-size: 10px; }
.tour-progress-hint > span { color: #ef8a9c; font-size: 19px; }
.tour-progress-track { height: 2px; position: absolute; bottom: -1px; left: 0; right: 0; background: #28282f; overflow: hidden; }
.tour-progress-track > span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.tour-step { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.7fr); grid-template-rows: auto 1fr; align-items: start; gap: 26px 64px; position: relative; min-width: 0; min-height: calc(100svh - 200px); padding-block: 64px 80px; border-bottom: 1px solid #35353e; scroll-margin-top: calc(var(--tour-top) - 64px); }
.tour-heading { grid-column: 1; grid-row: 1; min-width: 0; }
.tour-kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.tour-index { font: 44px/1 var(--heading); color: #94505f; letter-spacing: -.03em; transition: color .3s; }
.tour-kicker .eyebrow { margin: 0; color: #c49da6; font-size: 9px; line-height: 1.8; }
.copy-view { align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; width: 36px; height: 36px; border: 1px solid #464651; background: #19191e; border-radius: 50%; }
.copy-view .icon { width: 15px; height: 15px; }
.copy-view:hover { border-color: #ef7a90; }
.tour-heading h3, .replay-sync-intro h3 { font-size: clamp(27px, 2.5vw, 38px); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 12px; overflow-wrap: anywhere; }
.original-name { font: 10px/1.6 Consolas, monospace; color: #9797a8; }
.view-summary { color: #c5c5d1; font-size: 15px; line-height: 1.85; margin: 23px 0 0; }
.tour-details { grid-column: 1; grid-row: 2; min-width: 0; }
.view-explanation { display: grid; gap: 28px; }
.view-explanation h4, .view-pairs h4, .workspace-preset h4 { font-size: 11px; font-weight: 600; margin: 0 0 10px; color: #eeeeF3; }
.view-explanation h4 { display: flex; align-items: center; gap: 10px; }
.view-explanation h4::before { content: ''; width: 13px; height: 1px; background: #ec6079; }
.view-explanation p { color: #a9a9b9; font-size: 13px; line-height: 1.95; margin: 0; }
.view-pairs { padding-top: 25px; margin-top: 28px; border-top: 1px solid #33333b; }
.view-pairs > div { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.view-pairs a { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; color: #c2b3bf; padding-block: 6px; }
.view-pairs a span { color: #ef8197; }
.view-pairs a:hover { color: #fff; }
.tour-visual { grid-column: 2; grid-row: 1 / 3; min-width: 0; position: static; top: var(--tour-top); }
.tour-shot { margin: 0; }
.tour-shot + .tour-shot { margin-top: 24px; }
.tour-visual-multiple { position: static; }
.view-image { display: block; background: #101014; border: 1px solid #4a414b; border-radius: 7px; overflow: hidden; box-shadow: 0 20px 55px #0004; transition: border-color .35s, box-shadow .35s; }
.view-image > img { display: block; width: 100%; height: auto; max-height: max(0px, calc(100dvh - var(--tour-top) - var(--media-chrome-height, 74px) - 24px)); object-fit: contain; background: #0c0c10; }
.view-image > span { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 18px; border-top: 1px solid #39323d; background: #201b22; font-size: 10px; color: #bcb2c1; }
.view-image > span > span:last-child { display: inline-flex; align-items: center; gap: 10px; text-align: right; }
.view-image .icon { width: 14px; height: 14px; flex-shrink: 0; color: #e67e94; }
.view-image:hover { border-color: #fa6882; }
.tour-step.is-current .tour-index { color: #ff506d; }
.tour-step.is-current .view-image { border-color: #955063; box-shadow: 0 20px 55px #0005, 0 0 45px #fe375307; }
.screenshot-note { font-size: 11px; color: #9696a5; margin-top: 26px; }
.view-copy-status { position: fixed; z-index: 30; bottom: 22px; right: 24px; max-width: min(440px, calc(100% - 48px)); padding: 15px 22px; background: #282029; border: 1px solid #885364; border-radius: 5px; box-shadow: 0 10px 30px #0006; color: #f2d9e3; font-size: 12px; }
.view-copy-status:empty { display: none; }
@media (min-width: 901px) {
  .guide-ready .tour-visual:not(.tour-visual-multiple):not(.tour-visual-tall) { position: sticky; }
}
@media (max-width: 1100px) {
  .tour-container { width: calc(100% - 64px); }
  .tour-step { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.3fr); column-gap: 34px; }
}
@media (max-width: 900px) {
  .tour-step { display: flex; flex-direction: column; gap: 26px; padding-block: 45px 54px; min-height: 0; scroll-margin-top: calc(var(--tour-top) - 45px); }
  .tour-heading, .tour-visual, .tour-details { width: 100%; }
  .tour-visual { position: static; }
  .tour-heading h3 { font-size: 32px; }
  .view-summary { margin-top: 18px; max-width: 670px; }
  .view-explanation { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 760px) {
  .guide-explorer { --tour-nav-height: 54px; --tour-progress-height: 46px; }
  .tour-container { width: calc(100% - 36px); }
  .tour-intro-footer { gap: 23px; }
  .tour-chapters { gap: 4px 16px; }
  .tour-chapters a { font-size: 10px; }
  .tour-progress > .tour-container { gap: 12px; }
  .tour-progress-hint { display: none; }
  [data-tour-title]:not([data-tour-step]) { font-size: 11px; }
  .tour-kicker { gap: 14px; margin-bottom: 20px; }
  .tour-index { font-size: 36px; }
  .tour-heading h3 { font-size: 29px; }
  .tour-intro .boxbox-lead, .view-summary { font-size: 14px; }
  .view-explanation { grid-template-columns: 1fr; gap: 24px; }
  .view-explanation p { font-size: 13px; }
  .view-image > span { padding: 12px; font-size: 9px; gap: 10px; }
  .view-pairs a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-progress-track > span, .tour-index, .view-image { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .tour-reveal-ready .tour-scene > .tour-heading,
  .tour-reveal-ready .tour-scene > .tour-details,
  .tour-reveal-ready .tour-scene .tour-shot,
  .tour-reveal-ready .tour-scene > .replay-sync-intro,
  .tour-reveal-ready .replay-sync-panel > * {
    opacity: .86;
    transform: translateY(var(--tour-enter-shift, 10px));
    transition: opacity 600ms ease, transform 700ms cubic-bezier(.22, .61, .36, 1);
  }
  .tour-reveal-ready .tour-scene.is-in-view > .tour-heading,
  .tour-reveal-ready .tour-scene.is-in-view > .tour-details,
  .tour-reveal-ready .tour-scene.is-in-view .tour-shot,
  .tour-reveal-ready .tour-scene.is-in-view > .replay-sync-intro,
  .tour-reveal-ready .replay-sync-panel.is-in-view > * {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-height: 650px) {
  .tour-visual { position: static; }
}

.workspace-sequence { display: grid; gap: 46px; }
.workspace-sequence .workspace-preview { scroll-margin-top: calc(var(--site-header-height, 89px) + 78px); }
.workspace-sequence figcaption { display: flex; align-items: center; gap: 20px; padding-block: 22px; border-bottom: 1px solid #39323d; }
.workspace-sequence .tour-index { font-size: 30px; }
.workspace-sequence img { max-height: max(0px, calc(100dvh - var(--site-header-height, 89px) - var(--product-nav-height, 61px) - var(--media-chrome-height, 140px) - 48px)); }

/* Each completed gesture settles within a chapter, never in the gap between two. */
html.tour-snapping { scroll-snap-type: y mandatory; scroll-padding-top: var(--tour-snap-top); }
html.tour-snapping.tour-gliding { scroll-snap-type: none; scroll-behavior: auto; }
.tour-snap-ready .view-panel,
.tour-snap-ready .tour-video-intro,
.tour-snap-ready .replay-sync-panel { scroll-snap-align: start; scroll-snap-stop: always; padding-block: 24px; min-height: calc(100svh - var(--tour-top) + 24px); scroll-margin-top: calc(var(--tour-top) - 24px); }
.tour-snap-ready .tour-video-chapter { padding-block: 0; }
.tour-snapping .tour-snap-ready .tour-step,
.tour-snapping .tour-snap-ready .tour-video-intro,
.tour-snapping .tour-snap-ready .replay-sync-panel { scroll-margin-top: 0; }
.tour-snapping .tour-snap-boundary { scroll-snap-align: start; scroll-margin-top: 0; }
.tour-constrained .view-image > img, .tour-constrained .replay-sync-video video { max-height: max(100px, calc(100dvh - var(--tour-top) - var(--media-chrome-height, 100px) - 24px)); }