/* Desktop sticky-preview experiment, isolated from the production scroll tutorial. */
/* Only tutorial chapters are snap targets; the rest of the page scrolls freely. */
html.tutorial-playback:has(#page-landing.active) { scroll-snap-type: y proximity; }
.tutorial-playback #page-landing .how-tutorials .tutorial-steps { display: none; }
.tutorial-playback #page-landing #tutorials { height: auto; }
.tutorial-playback #page-landing .tutorial-blocks { position: relative; z-index: 1; height: auto; overflow: visible; }
.tutorial-playback #page-landing .how-tutorials .tutorial-block .section-header {
    position: relative; top: auto; margin: 0 auto 28px; padding: 0 24px; max-width: 1240px;
}
.tutorial-playback #page-landing .how-tutorials .tutorial-block .section-header h2 { font-size: 64px; margin: 0 0 12px; }
.tutorial-playback #page-landing .how-tutorials .tutorial-block .section-header > p { margin: 0 auto; font-size: 24px; }
.tutorial-playback #page-landing .tutorial-copy-reel strong { font-size: 26px; }
.tutorial-playback .tutorial-chapter-progress { display: grid; grid-template-columns: max-content minmax(12px, 1fr) max-content minmax(12px, 1fr) max-content; align-items: center; gap: 10px; width: 100%; margin: 0; }
.tutorial-playback .tutorial-chapter-number { display: block; font: italic 700 51px/1 'Feature Deck Condensed', serif; color: rgb(calc(255 * (1 - var(--chapter-fill, 0))) calc(255 * (1 - var(--chapter-fill, 0))) calc(255 * (1 - var(--chapter-fill, 0)))); }
.tutorial-playback .tutorial-chapter-connector { display: block; position: relative; height: 2px; background: var(--bg, #F7F5EB); }
.tutorial-playback .tutorial-chapter-connector::after { content: ''; position: absolute; inset: 0; background: #000; transform: scaleX(var(--chapter-progress, 0)); transform-origin: left; }
.tutorial-playback .tutorial-sticky-track { position: absolute; pointer-events: none; }
.tutorial-playback .tutorial-playback-sidebar { min-width: 0; padding: 0 0 8px 20px; overflow: visible; pointer-events: auto; }
.tutorial-playback #page-landing .how-tutorials .tutorial-block > .section-header.tutorial-original-header { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tutorial-playback .tutorial-sidebar-reel { position: relative; display: block; overflow: hidden; }
.tutorial-playback .tutorial-title-action.tutorial-sidebar-reel { font: italic 700 51px/1 'Feature Deck Condensed', serif; width: var(--tutorial-action-width, max-content); height: 1.35em; margin-bottom: -15.3px; transition: height 420ms cubic-bezier(.22,.7,.25,1); }
.tutorial-playback .tutorial-reel-item { position: absolute; top: 0; left: 0; width: 100%; display: block; opacity: 0; white-space: normal; }
.tutorial-playback .tutorial-feature-nav[hidden] { display: none; }
.tutorial-playback .tutorial-feature-decks { position: relative; width: calc(100% + 44px); max-height: var(--tutorial-deck-height); overflow-y: auto; scrollbar-width: thin; }
.tutorial-playback #page-landing .how-tutorials .tutorial-playback-sidebar .section-header { margin: 0 0 calc(52px + 15.3px); padding: 0; text-align: left; }
.tutorial-playback #page-landing .how-tutorials .tutorial-playback-sidebar .section-header > p { text-align: left; }
/* Feature cards keep the controls beside the explanation, outside the preview. */
.tutorial-playback #page-landing .how-tutorials .tutorial-playback-sidebar .section-header > .tutorial-copy-reel { display: none; }
.tutorial-playback .tutorial-feature-nav { display: grid; gap: 14px; padding-top: 0; translate: none; }
.tutorial-playback .tutorial-feature-card { display: flex; flex-direction: column; min-height: 146px; padding: 18px 20px 10px; border-radius: 14px; background: rgb(255 255 255 / 60%); color: #000; transition: background-color 180ms ease; }
.tutorial-playback .tutorial-feature-card:is(.is-playing, :hover) { background: var(--bg, #F7F5EB); }
.tutorial-playback .tutorial-feature-nav button { border: 0; background: none; color: #000; cursor: pointer; }
.tutorial-playback .tutorial-feature-select { position: relative; display: block; width: 100%; padding: 0 38px 0 0; text-align: left; border-radius: 2px; }
.tutorial-playback .tutorial-feature-label { display: block; font: 700 18px/1.2 'Inter', sans-serif; }
.tutorial-playback .tutorial-feature-description { display: block; margin-top: 2px; margin-bottom: auto; font: 400 14px/1.3 'Inter', sans-serif; }
.tutorial-playback .tutorial-feature-line { display: block; position: relative; width: 100%; height: 1px; background: transparent; margin-top: 18px; }
.tutorial-playback .tutorial-feature-line::after { content: ''; position: absolute; inset: 0; background: #111; transform: scaleX(var(--feature-progress, 0)); transform-origin: left; }
.tutorial-playback .tutorial-feature-controls { display: flex; gap: 12px; padding-top: 4px; margin-left: -11.5px; }
.tutorial-playback .tutorial-feature-controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border-radius: 4px; }
.tutorial-playback .tutorial-feature-controls svg { width: 18px; height: 18px; fill: currentColor; }
.tutorial-playback .tutorial-feature-controls img { width: 16px; height: 16px; }
.tutorial-playback .tutorial-feature-controls button:disabled { opacity: .35; cursor: default; }
/* Keep the side shadow inside the tutorial vertically, away from the next section. */
.tutorial-playback .tutorial-playback-frame { min-width: 0; background: transparent; box-shadow: 0 58px 130px -22px rgb(var(--tutorial-shadow-rgb, 104 65 39) / 34%); border-radius: 12px 0 0 0; overflow: hidden; clip-path: inset(0 -160px 0 -160px); }
.tutorial-playback #page-landing .tutorial-editor-stage::before { inset: var(--playback-grid-top, 90px) 18px 18px calc(22.222222% + 62px); }
.tutorial-playback #page-landing .tutorial-editor-stage .tutorial-editor-menu { left: 14px; top: 18px; z-index: 6; }
.tutorial-playback #page-landing .tutorial-editor-stage .tutorial-canvas-row { left: var(--playback-insert-left, 69%); top: var(--playback-insert-top, 60px); z-index: 5; pointer-events: none; }
.tutorial-playback .tutorial-editor-stage .tutorial-slider-toolbar { pointer-events: none !important; }
.tutorial-playback #page-landing .tutorial-text-example--single { top: 196px; width: min(400px, calc(32% - 124px / var(--tutorial-demo-scale, 1))); height: auto; min-height: 240px; padding: 16px 19.2px; font-size: 17.6px; }
.tutorial-playback #page-landing .tutorial-text-example--single.is-article .is-subtitle { font-size: 25.6px; }
.tutorial-playback .tutorial-playback-memory-heading { position: absolute; left: calc(20% + 62px / var(--tutorial-demo-scale, 1)); top: 38px; display: flex; align-items: center; gap: 16px; text-align: left; }
.tutorial-playback .tutorial-playback-memory-heading b { font: 700 32px/1 var(--font-display); }
.tutorial-playback .tutorial-playback-memory-heading span { font: 400 11.2px/1.5 'Inter', sans-serif; }
.tutorial-playback .tutorial-playback-timeline { position: absolute; width: calc(1px / var(--tutorial-demo-scale, 1)); background: #111; pointer-events: none; }
.tutorial-playback .tutorial-playback-timeline::before { content: ''; position: absolute; left: 50%; top: 0; translate: -50% -50%; width: calc(10px / var(--tutorial-demo-scale, 1)); height: calc(10px / var(--tutorial-demo-scale, 1)); border-radius: 50%; background: #111; }
.tutorial-playback .tutorial-playback-memory-heading strong { display: block; }
.tutorial-playback .tutorial-demo-viewport { transition: opacity 160ms ease; }
.tutorial-playback .tutorial-editor-stage[data-playback-state="preparing"] :is(.tutorial-demo-viewport, .tutorial-canvas-row, .tutorial-demo-cursor) { opacity: 0 !important; }
.tutorial-playback :is(.tutorial-editor-stage, .tutorial-upload-stage, .tutorial-share-stage):not([data-playback-state="playing"]) .tutorial-demo-cursor { opacity: 0 !important; }
.tutorial-playback .tutorial-editor-stage[data-playback-state="complete"] .tutorial-tool-row { opacity: 0 !important; }
.tutorial-playback .tutorial-editor-stage .tutorial-sticker-overlay { z-index: 10; }
.tutorial-playback .tutorial-feature-nav button:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.tutorial-playback #page-landing :is(.tutorial-upload-stage, .tutorial-share-stage) > .tutorial-floating-rail { left: 14px; top: 18px; scale: calc(var(--memory-rail-scale) * .8); }
.tutorial-playback .tutorial-upload-video { display: none !important; }
/* Keep the photo scale intact; only canvas type and controls become smaller. */
.tutorial-playback #page-landing .tutorial-playback-map { left: 18px; top: 18px; bottom: 0; width: 22.222222%; z-index: 2; }
.tutorial-playback .tutorial-playback-map .tcu-map-label { font-size: 11.2px; }
.tutorial-playback .tutorial-playback-map .tcu-map-controls { font-size: 17.6px; }
.tutorial-playback #page-landing .tutorial-editor-stage { --canvas-cell: 42.4px; --canvas-padding: 4.8px; }
.tutorial-playback #page-landing .tutorial-editor-menu .tutorial-memory-rail { scale: calc(var(--memory-rail-scale) * .8); }
.tutorial-playback #page-landing .tutorial-editor-stage .tutorial-slider-toolbar { padding-inline: calc(8px * 36.8 / 53); }
.tutorial-playback .tutorial-editor-stage .tutorial-slider-toolbar .tutorial-slider-icon { --slider-icon-height: 36.8px; }
.tutorial-playback #page-landing .tutorial-text-example--single .is-title { font-size: 28.8px; }
.tutorial-playback #page-landing .tutorial-text-example--single.is-article .is-title { font-size: 46.4px; }
.tutorial-playback #page-landing .tutorial-text-example--single p { margin-bottom: 9.6px; }
.tutorial-playback .tutorial-editor-stage .tutorial-demo-palette { width: min(248px, 100%); height: 36.8px; padding-inline: 8px; }
.tutorial-playback .tutorial-editor-stage .tutorial-demo-palette > i { width: 13.6px; height: 13.6px; }
.tutorial-playback #page-landing .tutorial-pho-description { font-size: 14.4px; }
.tutorial-playback .tutorial-editor-stage .tutorial-photo-ai-status { font-size: 12.8px; }
.tutorial-playback .tutorial-editor-stage .tutorial-text-ai-status { font-size: 11.2px; }
@media (prefers-reduced-motion: reduce) {
    .tutorial-playback :is(.tutorial-feature-line, .tutorial-demo-viewport, .tutorial-title-action.tutorial-sidebar-reel) { transition: none; }
}


.tutorial-playback .tutorial-photo-backdrop { position: absolute; inset: 0; z-index: 7; background: rgb(0 0 0 / 35%); pointer-events: none; opacity: 0; visibility: hidden; }
.tutorial-playback .tutorial-editor-stage > .tutorial-photo-picker { top: calc(88px * var(--tutorial-demo-scale, 1)); scale: var(--tutorial-demo-scale, 1); transform-origin: center top; }

.tutorial-playback #page-landing .how-tutorials .tutorial-playback-sidebar .section-header h2 { font-size: var(--tutorial-heading-size, clamp(40px, 4vw, 54px)); line-height: 1.08; margin: 0; }
.tutorial-playback .tutorial-title-action, .tutorial-playback .tutorial-title-subject { display: block; white-space: nowrap; }
.tutorial-playback .tutorial-editor-stage .tutorial-demo-composition { left: 0; translate: none; transform-origin: left top; }

/* The browser chrome sits above the memory. */
.tutorial-playback .tutorial-browser-header { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.tutorial-playback .tutorial-title-action .tutorial-reel-item { width: max-content; white-space: nowrap; padding: .06em .2em .3em 0; }

/* Alternative 2: a single viewport stays still while chapters pass underneath. */
.tutorial-playback #page-landing .how-tutorials .tutorial-block {
    height: calc(100dvh - var(--tutorial-nav-offset, 73px));
    min-height: 0; padding: 0; background: transparent; pointer-events: none;
}
/* Keep Share pinned for a full extra viewport after the second connector fills. */
.tutorial-playback #page-landing .how-tutorials .tutorial-block[data-tutorial-step="2"] {
    height: calc((100dvh - var(--tutorial-nav-offset, 73px)) * 2);
}
.tutorial-playback #page-landing .how-tutorials .tutorial-block::before { display: none; }
.tutorial-playback .tutorial-sticky-track { inset: 0; width: 100%; z-index: 10; }
.tutorial-playback .tutorial-sticky-viewport {
    position: sticky; top: var(--tutorial-nav-offset, 73px);
    height: calc(100dvh - var(--tutorial-nav-offset, 73px));
    background: var(--sticky-background, #f9d1db); isolation: isolate;
}

.tutorial-playback .tutorial-sticky-viewport::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 80% 125% at 50% 125%, var(--sticky-arc, #fff2b8) 0%, var(--sticky-arc, #fff2b8) 62%, transparent 98%);
}
.tutorial-playback .tutorial-sticky-viewport > .tutorial-chapter-progress {
    position: absolute; top: 27.06px; left: 50%; translate: -50% 0;
    width: min(720px, 60vw); gap: 24px; margin: 0;
}
.tutorial-playback .tutorial-playback-sidebar {
    position: absolute; left: 0; width: clamp(240px, 22vw, 320px);
}
.tutorial-playback .tutorial-sticky-viewport > .tutorial-playback-frame {
    position: absolute; right: 0; bottom: 0;
    width: calc((100% - clamp(240px, 22vw, 320px) - 24px) * .9);
}
.tutorial-playback .tutorial-preview-stack {
    position: relative;
    height: min(clamp(530.4px, calc(85vh - 108.8px), 765px), calc(100dvh - var(--tutorial-nav-offset, 73px) - 190px));
    background: var(--bg, #F7F5EB);
}
.tutorial-playback #page-landing .tutorial-preview-stack > :is(.tutorial-editor-stage, .tutorial-upload-stage, .tutorial-share-stage) {
    position: absolute; inset: 0; width: 100%; max-width: none; height: 100%;
    margin: 0; translate: none; overflow: hidden;
}
.tutorial-playback #page-landing .tutorial-preview-stack > [hidden] { display: none; }
.tutorial-playback #page-landing .tutorial-preview-stack > .tutorial-share-stage { background: transparent; z-index: 10; }
.tutorial-playback .tutorial-share-stage[data-contextual-memory="true"] > :is(.tcs-memory, .tutorial-floating-rail) { display: none; }
.tutorial-playback .is-shared-memory :is(.tutorial-tool-row, .tutorial-canvas-row, .tutorial-demo-cursor, .tutorial-photo-picker, .tutorial-photo-backdrop, .tutorial-sticker-overlay) { visibility: hidden !important; }
.tutorial-playback .tutorial-share-stage[data-saving-edit="true"] .tcs-interface { visibility: hidden; }
.tutorial-playback .tutorial-share-stage:not([data-playback-state="playing"]) .tcs-cursor { visibility: hidden; }
.tutorial-playback .tutorial-share-stage[data-saving-edit="true"][data-playback-state="playing"] .tcs-cursor { visibility: visible; }
.tutorial-playback .is-shared-memory[data-demo-editing="false"] :is(.tutorial-demo-handles, .tutorial-demo-palette, .tutorial-text-ai-status, .tutorial-photo-ai-status) { visibility: hidden !important; }
.tutorial-playback .is-shared-memory[data-demo-editing="false"] .tutorial-demo-selection { border-color: transparent !important; outline-color: transparent !important; }
.tutorial-playback .is-shared-memory[data-demo-editing="false"] [data-text-line] { --selection-fill: 0% !important; }

.tutorial-playback :is(.tutorial-title-subject, .tutorial-feature-decks) { position: relative; left: 4px; }
.tutorial-playback #page-landing .tcu-memory-map { bottom: 0; border-radius: 16px 16px 0 0; }

/* Reuse the application tool icons beside desktop feature headings. */
.tutorial-playback .tutorial-feature-icon { position: absolute; right: -7px; top: -2px; width: 32px; height: 28px; display: grid; place-items: center; pointer-events: none; }
.tutorial-playback .tutorial-feature-icon img { position: absolute; width: 40px; height: 40px; max-width: none; object-fit: contain; filter: brightness(0); }
.tutorial-playback .tutorial-feature-icon .material-symbols-outlined { font-size: 28px; line-height: 1; }

.tutorial-playback [data-playback-clip="share-invite"] .tutorial-feature-icon,
.tutorial-playback [data-playback-clip="share-publish"] .tutorial-feature-icon { transform: scale(.9); }

/* Rounded tutorial media; selection remains a rectangular editing boundary. */
.tutorial-playback :is(.tcu-memory-day > img,.tutorial-demo-memory-photo,.tutorial-demo-next-photo,.tutorial-demo-third-photo,.tutorial-photo-container,.tcs-memory-day > img) { border-radius: 16px; }
.tutorial-playback #page-landing .tutorial-text-example--single.is-article { border-radius: 16px; }
.tutorial-playback .tutorial-layout-card .tutorial-feature-select { cursor: default; }
.tutorial-playback :is(.tutorial-pho-square,.tutorial-photo-example img,.tcs-photo-placeholder) { border-radius: 16px; overflow: hidden; }
.tutorial-playback .tcu-result-title { text-transform: uppercase; }
.tutorial-playback .tutorial-demo-selection:not(.tutorial-text-example),.tutorial-playback .tutorial-text-example.is-current { outline-color: #087cff; }
.tutorial-playback .tutorial-demo-handles > i { border-color: #087cff; }
.tutorial-playback .tutorial-text-example.is-article.tutorial-demo-selection { outline: none; }
.tutorial-playback .tutorial-text-example.is-article.is-current.tutorial-demo-selection::before { content: ''; position: absolute; inset: 0; border: 1px solid #087cff; border-radius: 0; pointer-events: none; }
.tutorial-playback .tutorial-text-example.is-article .tutorial-demo-handles > i:last-child { border-radius: 50%; }