/* Mobile prototype: normal page scroll, intentional playback, a mobile memory dock. */
.tutorial-mobile #page-landing .how-tutorials .tutorial-steps,
.tutorial-mobile #page-landing .how-tutorials .tutorial-blocks { display: none; }
.tutorial-mobile #page-landing #tutorials { height: auto; }
.mt-section { --mt-bg: #f9d1db; --mt-progress-color: var(--orange, #ff705d); --mt-card-bg: transparent; --mt-card-ink: #000; position: relative; padding: 12px 18px 0; background: var(--mt-bg); scroll-margin-top: calc(var(--mt-nav-offset,114px) + 8px); }
.mt-section[data-chapter="1"] { --mt-bg: #fff2b8; --mt-progress-color: var(--brand-yellow, #ffd100); }
.mt-section[data-chapter="2"] { --mt-bg: #dad6ff; --mt-progress-color: var(--brand-purple-dark, #574fba); }
.mt-inner { width: 100%; max-width: 460px; margin: auto; }
.mt-section h2 { margin: 0 0 10px; color: #000; text-align: center; font: 700 33.5px/1 'FK Screamer Trial',sans-serif; }
.mt-section h2 em { font: italic 700 34px/1.2 'Feature Deck Condensed',serif; margin-right: 8px; }
.mt-nav .tutorial-feature-card { background: var(--mt-card-bg); color: var(--mt-card-ink); border-radius: 14px; position: relative; padding: 0 15px 5px; margin: 0; box-sizing: border-box; display: grid; grid-template-columns: minmax(0,1fr) 44px; grid-template-rows: 1fr; column-gap: 8px; row-gap: 0; }
.mt-nav .tutorial-feature-card[hidden] { display: none; }
#page-landing .mt-nav .tutorial-feature-card:is(.is-playing,:hover,:focus-within) { background: var(--mt-card-bg); }
.mt-nav button { cursor: pointer; color: var(--mt-card-ink); border: 0; background: none; }
.mt-nav .tutorial-feature-select { padding: 0; box-sizing: border-box; translate: 0 3px; width: 100%; text-align: left; grid-column: 1; align-self: start; }
.mt-nav .tutorial-feature-label { display: block; font: 700 19px/1.2 var(--font-body); }
.mt-nav .tutorial-feature-description { display: block; min-height: 36px; margin-top: 5px; translate: 0 -3px; font: 400 14px/17.2px var(--font-body); }
.mt-nav .tutorial-feature-line { display: block; position: absolute; left: 15px; right: 29px; bottom: 10px; height: 2px; margin: 0; background: #000; overflow: hidden; pointer-events: none; }
.mt-nav .tutorial-feature-line:after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--mt-line-progress,0) * (100% - 5px)); width: 5px; background: var(--bg, #F7F5EB); opacity: var(--mt-line-visible,0); }
.mt-nav .tutorial-feature-controls { display: flex; flex-direction: column; gap: 0; min-height: 80px; grid-column: 2; grid-row: 1; align-self: center; align-items: center; }
.mt-nav .tutorial-feature-controls button { display: grid; place-items: center; width: 44px; height: 40px; padding: 10px; }
.mt-nav .tutorial-feature-controls svg { width: 18px; height: 18px; fill: currentColor; }
.mt-nav .tutorial-feature-controls img { width: 16px; height: 16px; filter: brightness(0); }
.mt-nav .tutorial-feature-controls button:disabled { opacity: .3; }
.mt-section button:focus-visible,.mt-section a:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
/* A single soft shadow, outside the clipped preview content. */
.mt-preview-frame { position: relative; isolation: isolate; transform: scale(.92); transform-origin: top center; border-radius: 46px 46px 0 0; box-shadow: 24px 24px 28px var(--mt-preview-shadow, rgb(0 0 0 / 28%)); }
/* Decorative phone bezel stays above the simulated UI without affecting its geometry. */
.mt-preview-frame::before { content: ''; position: absolute; inset: 0; z-index: 20; border: 8px solid #000; border-bottom: 0; border-radius: inherit; pointer-events: none; }
.mt-preview-frame::after { content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 21; width: 58px; height: 20px; border-radius: 12px; background: #000; pointer-events: none; }
/* Explicit clipping also contains composited iframe and dimming layers during resizing. */
.mt-preview { position: relative; padding-top: 0; box-sizing: border-box; border-radius: 46px 46px 0 0; clip-path: inset(0 round 46px 46px 0 0); background: var(--bg, #F7F5EB); overflow: hidden; box-shadow: none; }
.mt-stage { transform: scale(.9409); transform-origin: top center; position: relative; height: max(280px,calc(100svh - 300px)); background: var(--bg, #F7F5EB); overflow: hidden; color: #111; font: 400 14px/1.4 var(--font-body); text-align: left; }
.mt-stage * { box-sizing: border-box; }
.mt-stage img { display: block; max-width: 100%; }
.mt-scene { position: absolute; inset: 0; }
.mt-body { position: absolute; inset: 0; overflow: hidden; background: var(--bg, #F7F5EB); }
.mt-body.is-editing { background-image: none; }
.mt-content { padding: 20px 18px 88px; will-change: transform; }
.mt-dock { position: absolute; bottom: 0; inset-inline: 0; height: 58px; display: flex; align-items: center; justify-content: space-around; gap: 3px; padding: 4px 10px; background: var(--bg, #F7F5EB); border-top: 1px solid #eee; z-index: 4; }
.mt-dock > span { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; }
.mt-dock b { font: 700 23px var(--font-body); }
.mt-dock .mt-done { border-radius: 50%; background: #000; color: var(--bg, #F7F5EB); }
.mt-dock.is-editing .mt-done { background: #00b252; }
.mt-icon { width: 29px; height: 29px; object-fit: contain; }
.mt-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ff6b57; }
.mt-mat { font: 24px/1 'Material Symbols Outlined'; }
.mt-kicker { display: inline-block; border: 1px solid; border-radius: 16px; padding: 3px 8px; font-size: 9px; }
.mt-story-title { margin: 10px 0; font: 700 48px/.98 'FK Screamer Trial',sans-serif; }
.mt-date { font: 700 21px/1.2 'Feature Deck Condensed',serif; }
.mt-author { display: flex; align-items: center; gap: 7px; font-size: 10px; margin: 12px 0 22px; }
.mt-avatar { display: inline-grid; place-items: center; border-radius: 50%; width: 28px; height: 28px; background: #dad6ff; font-weight: 700; font-style: normal; line-height: 1; padding-top: 1px; }
.mt-day { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; border-left: 1px solid; padding-left: 12px; }
.mt-day b { font: 700 30px/1 'FK Screamer Trial',sans-serif; }
.mt-day small { font-size: 9px; line-height: 1.35; }
.mt-memory-photo { width: 100%; aspect-ratio: 1.35; object-fit: cover; margin: 0 0 18px; }
.mt-block { position: relative; padding: 13px; margin-top: 12px; font-size: 14px; background: var(--bg, #F7F5EB); }
.mt-block.is-selected { outline: 1px solid #087cff; }
.mt-block h3 { font: 700 23px/1.1 var(--font-body); margin: 0 0 9px; }
.mt-block.is-article h3 { font: 700 39px/1 'FK Screamer Trial',sans-serif; }
.mt-block p { font: inherit; margin: 0 0 10px; }
.mt-block .mt-subtitle { font: 500 24px/1.1 'Feature Deck Condensed',serif; }
.mt-highlight { background: #b8d8ff; }
.mt-tools { display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; padding: 3px 5px; gap: 1px; border-radius: 24px; background: #000; margin: 0 0 12px; }
.mt-tools span { display: grid; place-items: center; width: 33px; height: 31px; border-radius: 18px; color: var(--bg, #F7F5EB); }
.mt-tools img { height: 27px; width: 29px; object-fit: contain; filter: none; }
.mt-tools .is-active { background: transparent; }
.mt-swatches { display: flex; gap: 9px; padding: 10px; background: #000; border-radius: 24px; width: max-content; margin-top: 12px; }
.mt-swatches i { width: 17px; height: 17px; border-radius: 50%; background: var(--swatch); }
.mt-swatches i.is-active { outline: 2px solid white; outline-offset: 2px; }
.mt-square { width: 78%; margin-left: auto; aspect-ratio: 1; overflow: hidden; outline: 1px solid #087cff; transform-origin: top left; }
.mt-square img { width: 100%; height: 140%; object-fit: cover; }
.mt-ai-note { margin: 12px 0; font-size: 12px; background: #e4f6ec; padding: 10px; }
.mt-sticker { position: absolute; width: 48%; right: 10px; top: 210px; transform-origin: center; }
.mt-sheet-backdrop { position: absolute; inset: 0; background: #0005; z-index: 5; }
.mt-sheet { position: absolute; bottom: 0; inset-inline: 0; max-height: 95%; overflow: hidden; padding: 20px 18px 18px; border-radius: 20px 20px 0 0; background: var(--bg, #F7F5EB); z-index: 6; }
.mt-sheet:before { content: ''; display: block; width: 32px; height: 4px; border-radius: 4px; background: #ddd; margin: -10px auto 14px; }
.mt-sheet h3 { margin: 0 0 12px; font: 700 23px/1.1 var(--font-body); }
.mt-field { padding: 11px 12px; border-radius: 10px; background: #f2f2f2; margin: 8px 0; font-size: 13px; }
.mt-label { font-size: 11px; font-weight: 600; margin-top: 12px; }
.mt-cta { display: block; text-align: center; background: #00b252; color: var(--bg, #F7F5EB); border-radius: 24px; padding: 11px 15px; margin-top: 14px; font-weight: 700; font-size: 12px; }
.mt-cta.purple { background: #6254be; }
.mt-picker-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.mt-picker-grid span { position: relative; aspect-ratio: 1; background: #ddd; overflow: hidden; }
.mt-picker-grid img { width: 100%; height: 100%; object-fit: cover; }
.mt-picker-grid .is-selected:after { content: '✓'; position: absolute; right: 5px; bottom: 5px; background: #6254be; color: var(--bg, #F7F5EB); border: 2px solid white; border-radius: 50%; width: 22px; height: 22px; text-align: center; }
.mt-style-list { display: flex; gap: 4px; margin: 10px 0; }
.mt-style-list span { flex: 1; border: 1px solid #ddd; border-radius: 16px; padding: 6px 2px; font-size: 9px; text-align: center; }
.mt-style-list .is-selected { background: #111; color: var(--bg, #F7F5EB); border-color: #111; }
.mt-sticker-result { height: 110px; display: grid; place-items: center; background: #fafafa; border-radius: 10px; }
.mt-sticker-result img { height: 105px; width: auto; }
.mt-person { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 12px; border-bottom: 1px solid #eee; }
.mt-person > b:last-child { margin-left: auto; color: #00b252; }
.mt-bubble { position: absolute; top: 15px; right: 15px; border-radius: 50%; background: #111; color: var(--bg, #F7F5EB); padding: 9px; z-index: 3; }
.mt-chat { min-height: 250px; }
.mt-message { padding: 10px; margin: 12px 0; border-radius: 12px; background: #f0f0f0; max-width: 85%; font-size: 13px; }
.mt-message.mine { margin-left: auto; background: #dad6ff; }
.mt-faux-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 16px; font-weight: 700; border-bottom: 1px solid #eee; }
.mt-home-title { font: 700 43px/1 'FK Screamer Trial',sans-serif; margin: 14px 0; }
.mt-upload-zone { background: #eee9ff; border-radius: 14px; padding: 26px 15px; text-align: center; margin: 18px 0; }
.mt-upload-zone .mt-mat { font-size: 36px; }
.mt-feed-card { margin-bottom: 20px; }
.mt-feed-card h3 { font: 700 34px/1 'FK Screamer Trial',sans-serif; margin: 10px 0 4px; }
.mt-feed-photo { height: 150px; background: #e8e8e8; border-radius: 12px; }
.mt-touch { position: absolute; z-index: 10; width: 26px; height: 26px; border-radius: 50%; background: #ff6b5760; border: 2px solid #ff6b57; transform: translate(-50%,-50%); pointer-events: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) { .mt-content { will-change: auto; } }

.mt-tools img { filter: none; }

.mt-stage { container-type: size; }
.mt-home { padding-top: 8px; }
.mt-home-title { font-size: 35px; }
.mt-home .mt-memory-photo { max-height: 30cqh; margin-bottom: 8px; }
.mt-home .mt-cta { margin-top: 8px; }
.mt-details { padding-top: 10px; }
.mt-details .mt-picker-grid { margin-top: 8px; }
.mt-details .mt-picker-grid span { max-height: 58px; }
.mt-details .mt-label { margin-top: 7px; }
.mt-details .mt-field { margin: 5px 0; padding: 8px 10px; }
.mt-details .mt-cta { margin-top: 9px; }
.mt-sheet { padding: 14px 14px 12px; }
.mt-sheet:before { margin: -6px auto 8px; }
.mt-sheet h3 { font-size: 20px; margin-bottom: 8px; }
.mt-sheet .mt-label { margin-top: 6px; }
.mt-sheet .mt-field { margin: 6px 0; padding: 8px 10px; }
.mt-sheet .mt-cta { margin-top: 9px; padding: 9px 12px; }
.mt-sticker-result { height: clamp(44px,19cqh,78px); }
.mt-sticker-result img { height: 100%; max-height: 78px; }
.mt-chat { min-height: 120px; }
.mt-sticker { top: 42%; width: 42%; }

.mt-details .mt-picker-grid { grid-template-columns: repeat(5,1fr); }
.mt-icon { width: 44px; height: 44px; max-width: none; }
.mt-tools { gap: 0; padding: 0 4px; }
.mt-tools span { width: 44px; height: 42px; }
.mt-tools img { width: 44px; height: 42px; }

.mt-sticker-tools { position: absolute; top: 85px; right: 18px; z-index: 3; }

.mt-sheet .mt-picker-grid span { aspect-ratio: auto; height: clamp(48px,23cqh,100px); }
.mt-invitees { display: flex; gap: 8px; padding: 6px 0; font-size: 10px; }
.mt-invitees span { padding: 5px 8px; border-radius: 16px; background: #dad6ff; }
@container (max-height: 330px) {
    .mt-chat { min-height: 100px; }
    .mt-chat .mt-person { display: none; }
    .mt-chat .mt-message { font-size: 12px; padding: 8px; margin-block: 8px; }
}

/* Match the phone width and snap cards to the left, revealing only the next. */
.mt-nav { display: flex; align-items: stretch; gap: 0; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-bottom: 10px; }
.mt-nav::-webkit-scrollbar { display: none; }
.mt-nav .tutorial-feature-card { flex: 0 0 var(--mt-card-width); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.mt-nav { --mt-card-width: calc(min(423.2px, (100vw - 36px) * .92) + 30px); }
.mt-nav::after { content: ""; flex: 0 0 calc((100% - var(--mt-card-width)) / 2); }
.mt-single .mt-nav { justify-content: center; }
.mt-single .mt-nav::after { display: none; }
.mt-nav .tutorial-feature-select { font-family: var(--font-body) !important; }
.mt-nav .tutorial-feature-label { margin: 0; }
.tutorial-mobile #page-landing > .site-nav { transition: translate 420ms cubic-bezier(.22,.61,.36,1); }
.tutorial-mobile #page-landing > .site-nav.is-mobile-tutorial-nav-hidden { translate: 0 calc(-100% - 2px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .tutorial-mobile #page-landing > .site-nav { transition: none; }
}

/* The feature card folds to a single 2px playback track; its released height
   is measured by fitPreview and returned to the app scene. */
.mt-nav-shell { position: relative; overflow: clip; height: var(--mobile-card-height,100px); margin-bottom: 16px; transition: height 900ms cubic-bezier(.16,1,.3,1), margin-bottom 900ms cubic-bezier(.16,1,.3,1); }
.mt-nav-shell > .mt-nav { position: absolute; inset: 0 0 auto; margin: 0; transform-origin: top; transition: transform 900ms cubic-bezier(.16,1,.3,1), opacity 100ms ease; }
.mt-nav-shell .tutorial-feature-select,.mt-nav-shell .tutorial-feature-controls { transition: opacity 180ms ease; }
.mt-nav-shell.is-playing .tutorial-feature-select,.mt-nav-shell.is-playing .tutorial-feature-controls { opacity: 0; }
.mt-nav-shell.is-playing { height: 2px; margin-bottom: 24px; }
.mt-nav-shell.is-playing > .mt-nav { transform: scaleY(.02); opacity: 0; transition: transform 900ms cubic-bezier(.16,1,.3,1), opacity 100ms ease 800ms; pointer-events: none; }
.mt-playback-track { position: absolute; top: calc(50% - 1px); left: 0; right: 0; height: 2px; border-radius: 2px; overflow: hidden; background: var(--mt-card-bg); opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.mt-nav-shell.is-playing .mt-playback-track { opacity: 1; transition-delay: 700ms; }
.mt-playback-track i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #000; transform: scaleX(var(--mobile-progress,0)); transform-origin: left; }
.mt-dock { bottom: 13px; left: 50%; right: auto; translate: -50% 0; width: 88%; max-width: calc(100% - 16px); height: 54px; padding: 8px; gap: 4px; border: 0; border-radius: 32px; box-shadow: 0 10px 28px rgb(0 0 0 / 24%); }
.mt-dock > span { width: 38px; height: 38px; min-width: 0; flex: 1 1 0; }
.mt-dock .mt-done,.mt-dock > [data-mt-target="back"] { width: 38px; height: 38px; flex: 0 0 38px; }
.mt-dock > [data-mt-target="back"] { background: #f0f1f1; border-radius: 50%; }
.mt-tools.mt-text-tools { width: 100%; box-sizing: border-box; padding: 0 5px; gap: 0; }
.mt-text-tools span { width: calc(100% / 9); height: 38px; min-width: 0; }
.mt-text-tools img { width: 100%; height: 38px; }
.mt-highlight { position: relative; }
.mt-highlight:before,.mt-highlight:after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #3589fa; }
.mt-highlight:before { left: -2px; top: -5px; }
.mt-highlight:after { right: -2px; bottom: -5px; }
.mt-square { position: relative; width: 100%; margin: 0; }
.mt-square:after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--bg, #F7F5EB); border: 1px solid #087cff; right: 0; bottom: 0; }
.mt-sticker-modes { display: flex; gap: 3px; padding: 3px; background: #f0f0f0; border-radius: 24px; margin-bottom: 12px; font: 600 10px/1.2 var(--font-body); }
.mt-sticker-modes span { flex: 1; text-align: center; padding: 9px 2px; border-radius: 20px; }
.mt-sticker-modes .is-selected { background: var(--bg, #F7F5EB); box-shadow: 0 2px 5px #0001; }
.mt-dialog-actions { display: flex; gap: 8px; }
.mt-dialog-actions > span { flex: 1; }
.mt-cta.is-secondary { color: #111; background: #f0f0f0; }
.mt-sticker-result { margin-top: 10px; background-color: var(--bg, #F7F5EB); background-image: conic-gradient(#eee 25%,transparent 0 50%,#eee 0 75%,transparent 0); background-size: 16px 16px; }
.mt-loading { width: 20px; height: 20px; border: 2px solid #ddd; border-top-color: #00b252; border-radius: 50%; animation: mt-spin 1s linear infinite; }
@keyframes mt-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .mt-nav-shell,.mt-nav-shell > .mt-nav,.mt-nav-shell .tutorial-feature-select,.mt-nav-shell .tutorial-feature-controls,.mt-nav-shell.is-playing > .mt-nav,.mt-playback-track { transition: none; }
    .mt-loading { animation: none; }
}

.mt-keyboard { position: absolute; bottom: 0; left: 0; right: 0; height: 158px; z-index: 4; padding: 5px 4px; box-sizing: border-box; background: #d6d8de; font: 13px/1 var(--font-body); }
.mt-keyboard > div:not(.mt-keyboard-done) { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.mt-keyboard span { display: grid; place-items: center; width: 8%; height: 25px; border-radius: 4px; background: var(--bg, #F7F5EB); box-shadow: 0 1px 1px #0003; }
.mt-keyboard .mt-space { width: 50%; font-size: 11px; }
.mt-keyboard .mt-keyboard-done { text-align: right; font-size: 11px; color: #246bcc; padding: 3px 10px 8px; }
.mt-stage.has-keyboard .mt-dock { visibility: hidden; }
.mt-stage.has-keyboard .mt-body { bottom: 158px; }

/* Three independent full-height accordion chapters. */
.mt-accordion,.mt-accordion-panels { position: relative; }
.mt-accordion { padding-top: 16px; background: #f9d1db; }
.mt-accordion .mt-section { padding: 0 18px; scroll-margin-top: 0; }
/* Reserve the full height available with browser bars retracted. Keep the
   preview stable and put the browser-chrome allowance into both outer gutters. */
.mt-accordion .mt-section.is-open {
    --mt-open-height: 100lvh;
    --mt-compact-height: 100svh;
    --mt-extra-space: max(0px,calc(var(--mt-open-height) - var(--mt-compact-height)));
    height: calc(var(--mt-open-height) + 120px + 74px);
    padding-top: calc(8px + var(--mt-extra-space) / 2);
    padding-bottom: 0;
    overflow: clip;
}
.mt-accordion-heading[hidden],.mt-chapter-content[hidden] { display: none !important; }
.mt-section .mt-accordion-heading { margin: 0; }
#page-landing .mt-chapter-toggle { position: relative; width: 100%; min-height: clamp(190px,30svh,280px); padding: 30px 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #000; cursor: pointer; text-align: center; }
.mt-chapter-number { translate: 0 -13px; display: block; margin-bottom: 8px; font: italic 700 30px/1 'Feature Deck Condensed',serif; }
.mt-chapter-title { display: block; translate: 0 -13px; }
.mt-chapter-title em { font: italic 700 34px/1.2 'Feature Deck Condensed',serif; }
.mt-chapter-subject { translate: 0 -4px; display: block; font: 700 35.5px/1 'FK Screamer Trial',sans-serif; }
.mt-expand-icon { position: absolute; left: 50%; translate: -50% 0; bottom: 20px; font: 300 32px/1 var(--font-body); }

.mt-landing-preview { position: absolute; inset: 0; overflow: hidden; background: var(--bg, #F7F5EB); pointer-events: none; }
.mt-landing-preview[hidden] { display: none; }
.mt-landing-preview iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; max-width: none; }

.mt-section h2 em { display: inline-block; }

.mt-nav button:focus-visible { outline-color: var(--mt-card-ink); outline-offset: 2px; }

#page-landing .mt-nav .tutorial-feature-controls button,
#page-landing .mt-nav .tutorial-feature-controls button:is(:hover,:focus,:focus-visible,:active) {
    background: transparent !important; background-color: transparent !important;
    color: var(--mt-card-ink) !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent;
}
.mt-touch { opacity: 1; background: #ff0012; border-color: #ff0012; transition: transform 220ms cubic-bezier(.175,.885,.32,1.5); }
.mt-touch.is-pressing { transform: translate(-50%,-50%) scale(.72); transition-timing-function: ease; }
.mt-touch-ripple { position: absolute; z-index: 9; width: 26px; height: 26px; border: 2px solid #ff0012; border-radius: 50%; background: #ff0012; opacity: 0; animation: mt-touch-pulse 850ms ease-out both; pointer-events: none; }
@keyframes mt-touch-pulse { from { transform: translate(-50%,-50%) scale(1); opacity: .6; } to { transform: translate(-50%,-50%) scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mt-touch { transition: none; } }

/* Preview controls remain outside the inert simulation. */
#page-landing .mt-preview-pause { position: absolute; inset: 0; z-index: 11; width: 100%; border: 0; padding: 0; background: transparent !important; box-shadow: none !important; border-radius: 0; cursor: pointer; touch-action: pan-y; }
.mt-preview-pause[hidden],.mt-paused-overlay[hidden] { display: none !important; }
.mt-paused-overlay { position: absolute; inset: 0; border-radius: inherit; z-index: 12; display: grid; place-items: center; background: #0008; }
.mt-paused-overlay > div { display: flex; align-items: center; gap: 4px; }
#page-landing .mt-paused-overlay button,#page-landing .mt-paused-overlay button:is(:hover,:focus,:focus-visible,:active) { display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 50%; background: transparent !important; color: var(--bg, #F7F5EB) !important; box-shadow: none !important; }
.mt-paused-overlay svg,.mt-paused-overlay img { width: 24px; height: 24px; fill: currentColor; }
.mt-paused-overlay [data-preview-action="resume"] svg { transform: scale(1.2096); }
.mt-paused-overlay img { filter: brightness(0) invert(1); }
.mt-paused-overlay button:focus-visible { outline-color: white; }
.mt-preview.is-paused .mt-stage * { animation-play-state: paused !important; }
/* Creation steps rebuilt as responsive UI from the supplied mobile references. */
.mt-create-page { position: absolute; inset: 0; container-type: inline-size; width: 100%; margin-inline: auto; background: var(--bg, #F7F5EB); font: 400 3.8cqw/1.4 var(--font-body); overflow: hidden; }
.mt-create-header { height: var(--mt-header-height,104px); }
.mt-create-steps { display: flex; justify-content: space-between; padding: calc(5.5cqw + 6px) 6.5cqw calc(5cqw + 16px); gap: 2cqw; }
.mt-create-steps > span { display: flex; align-items: center; gap: 2cqw; font-weight: 600; font-size: 3.7cqw; white-space: nowrap; }
.mt-create-steps b { display: grid; place-items: center; width: 8cqw; height: 8cqw; background: #f0f1f1; border-radius: 50%; }
.mt-create-steps .is-current { background: #584fba; color: var(--bg, #F7F5EB); }
.mt-create-main { font-size: 3.8cqw; padding: 0 var(--mt-create-gutter,4cqw) 4cqw; }
.mt-create-drop { display: flex; flex-direction: column; align-items: center; background: #f4f3fb; border-radius: 6cqw; padding: 5.5cqw 8cqw 10cqw; text-align: center; }
.mt-create-drop > i { display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 50%; background: var(--bg, #F7F5EB); color: #00b252; }
.mt-create-drop .mt-mat { font-size: 8cqw; }
.mt-create-drop h3 { font: 700 4.8cqw/1.3 var(--font-body); margin: 4cqw 0; }
.mt-create-drop p { margin: 0 0 4cqw; font: inherit; line-height: 1.5; }
.mt-create-button { display: flex; justify-content: center; align-items: center; gap: 1.5cqw; min-height: 11cqw; padding: 2cqw 3cqw; text-align: center; border-radius: 20cqw; background: #f0f1f1; color: #000; font-size: 3.3cqw; font-weight: 700; white-space: nowrap; letter-spacing: .3px; }
.mt-create-drop .mt-create-button { background: var(--bg, #F7F5EB); margin-top: auto; }
.mt-create-button .mt-mat { font-size: 4cqw; }
.mt-create-actions { display: flex; justify-content: space-between; gap: 3cqw; margin-top: 6cqw; }
.mt-create-actions > :first-child { flex: 0 0 31%; }
.mt-create-actions > :last-child { flex: 1; min-width: 0; }
.mt-create-button.is-green { color: var(--bg, #F7F5EB); background: #00b252; }
.mt-create-button.is-disabled { color: #969696; background: #f8f8f8; }
.mt-create-thumbnails { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3cqw; margin-top: 3.5cqw; }
.mt-create-thumbnails img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3cqw; }
.mt-create-thumbnails small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 3cqw; margin-top: 1cqw; }
.mt-create-page[data-create-screen="details"] .mt-create-steps,.mt-create-page[data-create-screen="filled"] .mt-create-steps { padding-bottom: calc(5cqw + 8px); }
.mt-create-form { display: flex; flex-direction: column; gap: 5cqw; padding-top: 4cqw; }
.mt-create-form label { display: block; font-weight: 600; margin-bottom: 2.5cqw; font-size: 3.8cqw; }
.mt-create-form label span { font-weight: 400; }
.mt-create-form label em { color: #ff594d; font-style: normal; }
.mt-create-field { min-height: 11cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2.5cqw 4cqw; background: #fafafa; border-radius: 3cqw; box-shadow: inset 0 1px 4px #0002; }
.mt-create-field.is-select { border-radius: 12cqw; background: #f0f1f1; box-shadow: none; }
.mt-create-field.is-placeholder { color: #aaa; }
.mt-create-field .mt-mat { font-size: 4.5cqw; margin-left: auto; }
.mt-create-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.mt-create-dates .mt-create-field { font-size: 3cqw; padding-inline: 3cqw; }
.mt-create-files { display: flex; align-items: center; gap: 2.5cqw; padding: 4cqw; border-radius: 4cqw; background: #f0f1f1; margin-top: 3cqw; }
.mt-create-files .mt-mat { color: #00b252; font-size: 4.5cqw; }
.mt-create-files b { margin-left: auto; font-size: 3.5cqw; }
.mt-create-form .mt-create-actions { margin-top: 0; }
.mt-create-generating { padding: 13cqw 10cqw; text-align: center; }
.mt-create-generating > .mt-mat { display: inline-block; color: #6254be; font-size: 11cqw; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
.mt-create-generating h3 { font: 700 5cqw/1.3 var(--font-body); margin: 8cqw 0 6cqw; }
.mt-create-generating strong { font-size: 5cqw; font-weight: 400; }
.mt-create-meter { height: 1.6cqw; border-radius: 2cqw; background: #eee; overflow: hidden; margin-bottom: 4cqw; }
.mt-create-meter span { display: block; height: 100%; background: #6254be; }
@container (max-height: 600px) {
    .mt-create-steps { padding-block: calc(3cqw + 6px) calc(3cqw + 16px); }
    .mt-create-page[data-create-screen="details"] .mt-create-steps,.mt-create-page[data-create-screen="filled"] .mt-create-steps { padding-bottom: calc(3cqw + 8px); }
    .mt-create-drop { padding-block: 3cqw 5cqw; }
    .mt-create-drop h3 { margin-block: 2cqw; }
    .mt-create-drop p { margin-bottom: 2cqw; }
    .mt-create-actions { margin-top: 3cqw; }
    .mt-create-form { gap: 3cqw; padding-top: 1cqw; }
    .mt-create-form .mt-create-actions { margin-top: 0; }
}

.mt-sheet.mt-photo-picker { inset-inline: 2%; width: 96%; top: 50%; bottom: auto; transform: translateY(-50%); border-radius: 20px; }
.mt-photo-picker .mt-cta { display: flex; align-items: center; justify-content: center; min-height: var(--mt-create-control-height,11cqw); font-size: var(--mt-create-control-font,3.3cqw); text-align: center; padding-block: 2cqw; }
@media (prefers-reduced-motion: reduce) { .mt-touch-ripple { display: none; } }

/* Created memory: map above the story, one continuous timeline beside photos. */
.mt-completed-memory .mt-content { padding: 24px 17px 88px; }
.mt-result-map { position: relative; height: clamp(120px,24cqh,180px); border-radius: 14px; overflow: hidden; }
.mt-result-map svg { width: 100%; height: 100%; display: block; }
.mt-result-map-controls { position: absolute; right: 10px; bottom: 10px; background: var(--bg, #F7F5EB); border: 1px solid #ccc; border-radius: 5px; font: 700 22px/1.2 var(--font-body); padding: 2px 6px; text-align: center; min-width: 30px; }
.mt-map-handle { width: 42px; height: 4px; border-radius: 4px; background: #bbb; margin: 9px auto 24px; }
.mt-result-timeline { position: relative; margin-left: 7px; padding-left: 18px; }
.mt-result-day { position: relative; }
.mt-result-day:before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #000; left: -24px; top: calc(6px + var(--mt-day-inset, 0px)); }
.mt-result-day .mt-day { display: block; border: 0; padding: 0; margin-bottom: 24px; }
.mt-result-day .mt-day b { display: block; font-size: 30px; margin-bottom: 4px; }
.mt-result-day .mt-day small { display: block; font-size: 10px; line-height: 1.15; }
.mt-result-day .mt-memory-photo { aspect-ratio: 3 / 2; margin-bottom: 24px; }

/* Programmatic chapter focus must not paint a browser ring around the phone. */
.mt-chapter-content:focus { outline: none; }
#page-landing .mt-chapter-dismiss { position: absolute; top: 0; left: 0; width: 100%; height: calc(8px + var(--mt-extra-space) / 2); border: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mt-chapter-dismiss[hidden] { display: none; }

.mt-nav .tutorial-feature-controls [data-playback-action="replay"] { position: absolute; right: 15px; bottom: 16.8px; }
.mt-nav [data-playback-action="play"] { position: absolute; right: 15px; top: -5.6px; }

.mt-nav [data-playback-action="play"] svg { width: 19.8432px; height: 19.8432px; }

/* Full-width feature carousel; vertical swipes belong to the surrounding chapter. */
.mt-nav-shell { translate: 0 3px; width: 100vw; margin-left: calc(50% - 50vw); }
.mt-nav .tutorial-feature-line { box-shadow: none; }

.mt-nav [data-playback-action="replay"] img { width: 15.52px; height: 15.52px; }
/* Compensate only modal geometry for the reduced scene scale. The preview
   itself still clips every layer to the phone's rounded screen. */
.mt-stage { overflow: visible; }
.mt-sheet-backdrop { left: -3.1406%; right: -3.1406%; }
.mt-sheet,.mt-sheet.mt-photo-picker { left: 50%; right: auto; width: calc(90% / .9409); top: 50%; bottom: auto; transform: translate(-50%,-50%); border-radius: 20px; }

.mt-nav .tutorial-feature-card:last-of-type { scroll-snap-align: center; }
.mt-nav .tutorial-feature-select { padding-left: 20px; }
.mt-feature-icon { position: absolute; left: 15px; top: 3px; width: 17px; height: 20px; display: grid; place-items: center; pointer-events: none; }
.mt-feature-icon img { width: 20px; height: 20px; }
.mt-feature-icon .mt-mat { font-size: 19px; }
.mt-feature-dots { display: flex; justify-content: center; gap: 7px; margin: 0 0 10px; }
#page-landing .mt-feature-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #aaa; box-shadow: none; }
#page-landing .mt-feature-dot[aria-current="true"] { background: #000; }

/* Dots occupy the existing top gutter, keeping every chapter's card aligned. */
.mt-chapter-content { position: relative; }
.mt-feature-dots { position: absolute; top: max(-12px, calc(-8px - var(--mt-extra-space) / 2)); left: 0; right: 0; margin: 0; height: 5px; align-items: center; }
#page-landing .mt-feature-dot { width: 5px; height: 5px; }
.mt-section { --mt-feature-icon-size: 18.8px; }
.mt-section[data-chapter="0"] { --mt-feature-icon-size: 19.38px; }
.mt-section[data-chapter="2"] { --mt-feature-icon-size: 22.8px; }
.mt-feature-icon { width: var(--mt-feature-icon-size); }
.mt-feature-icon img,.mt-feature-icon svg { width: var(--mt-feature-icon-size); height: var(--mt-feature-icon-size); }
.mt-feature-icon .mt-mat { font-size: var(--mt-feature-icon-size); }
.mt-nav .tutorial-feature-select { padding-left: calc(var(--mt-feature-icon-size) + 6px); }
.mt-completed-memory .mt-author { margin-top: 20px; margin-bottom: 28px; }
.mt-author-date { display: block; font: inherit; translate: 0 -1px; }
.mt-result-day::after { content: ''; position: absolute; left: -19.5px; top: 11px; bottom: -11px; width: 1px; background: #111; }

.mt-feature-dots { pointer-events: none; }
.mt-feature-dot { pointer-events: auto; }

.mt-completed-memory .mt-story-title { font-size: 52px; }
.mt-result-day .mt-day small strong { display: block; line-height: inherit; }
.mt-result-day .mt-day small br { display: none; }
.mt-section[data-chapter="0"] .mt-feature-icon { top: 3.2px; }

.mt-section[data-chapter="1"] .mt-feature-icon { top: 3px; }
.mt-section[data-chapter="2"] .mt-feature-icon { top: 2px; }

/* Match the desktop colour strip while fitting the mobile canvas. */
.mt-swatches { gap: 7px; padding: 9px; max-width: 100%; }
.mt-swatches i { width: 16px; height: 16px; flex: 0 0 16px; }
[data-design-text] { min-height: 1px; }

/* Description aligns with the icon; only the title retains its icon indent. */
.mt-nav .tutorial-feature-description { margin-left: calc(1px - (var(--mt-feature-icon-size) + 6px)); }
/* Tool overlays never change the article's position when dismissed. */
[data-design-text] { position: relative; }
[data-design-text] .mt-block { margin-top: 0; }
.mt-text-workspace { position: relative; }
.mt-text-workspace > .mt-tools { position: absolute; bottom: 100%; left: 0; margin-bottom: 12px; }
.mt-text-workspace > .mt-swatches { position: absolute; top: 100%; left: 0; z-index: 2; margin-top: 8px; }
/* Reserve the palette height even after dismissal; keep the next day legible. */
.mt-result-day:has([data-design-text] .mt-block) + .mt-result-day { --mt-day-inset: 58px; padding-top: var(--mt-day-inset); }

.mt-dock.is-editing [data-mt-target^="insert-"] .mt-icon { translate: 0 -2px; }

/* Mobile photos keep the memory's 3:2 frame; only the image pans inside it. */
.mt-inserted-photo { aspect-ratio: 3 / 2; outline: none; }
.mt-inserted-photo.is-selected { outline: 1px solid #087cff; }
.mt-inserted-photo::after { display: none; }
.mt-photo-workspace { position: relative; }
.mt-photo-workspace > .mt-tools { position: absolute; right: 6px; top: 6px; margin: 0; z-index: 2; }
.mt-ai-note { background: transparent; padding: 0; font-size: 14px; }

/* Plain feature cards; retain playback controls. */
.mt-nav .tutorial-feature-select { padding-left: 0; }
.mt-nav .tutorial-feature-description { margin-left: 1px; }
/* The sticker belongs to the photograph, so it scrolls with the memory. */
.mt-sticker-photo { position: relative; }
.mt-placed-sticker { position: absolute; z-index: 2; }
.mt-sticker-outline { position: relative; transform-origin: center; }
.mt-sticker-outline > img { display: block; width: 100%; }
.mt-sticker-outline.is-selected { outline: 1px solid #087cff; }
.mt-sticker-resize { position: absolute; right: -4px; bottom: -4px; width: 8px; height: 8px; background: var(--bg, #F7F5EB); border: 1px solid #087cff; border-radius: 50%; }
.mt-placed-sticker > .mt-tools { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; max-width: none; }
.mt-sticker-drag { position: absolute; left: 48%; top: 82%; width: 4px; height: 4px; }

.mt-placed-sticker .mt-tools span,.mt-placed-sticker .mt-tools img { width: 30px; height: 30px; }

.mt-section[data-chapter="1"] { --mt-preview-shadow: rgb(142 120 53 / 90%); }
.mt-section[data-chapter="2"] { --mt-preview-shadow: rgb(112 97 138 / 90%); }

.mt-section[data-chapter="0"] { --mt-preview-shadow: rgb(156 103 121 / 90%); }


/* Keep the chapter heading above its expanded player. */
.mt-accordion .mt-section { isolation: isolate; border-radius: 0; background: transparent; }


.mt-accordion .mt-section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--mt-bg); border-radius: 0; pointer-events: none; }
.mt-accordion .mt-section[data-chapter="0"]::before { border-radius: 0; }
.mt-accordion .mt-section.is-open { padding-top: 0; overflow: visible; }
.mt-section.is-open .mt-chapter-content { padding-top: 0; }
.mt-nav-shell { width: calc(min(423.2px, (100vw - 36px) * .92) + 30px); margin-left: calc((100% - min(423.2px, (100vw - 36px) * .92) - 30px) / 2); margin-bottom: calc(24px + var(--mt-extra-space) / 2); }
.mt-nav { --mt-card-width: 100%; }
.mt-nav .tutorial-feature-card { scroll-snap-align: center; }
.mt-nav::after { display: none; }
.mt-feature-dots { top: var(--mobile-card-height,100px); }

/* Side-by-side chapter heading and a complete phone for the mobile variant. */
.mt-section[data-chapter="0"] { --mt-next-bg: #fff2b8; z-index: 1; }
.mt-section[data-chapter="1"] { --mt-next-bg: #dad6ff; z-index: 2; }
.mt-section[data-chapter="2"] { --mt-next-bg: #dad6ff; z-index: 3; }
.mt-accordion .mt-section::before { background: linear-gradient(to bottom,var(--mt-bg) 60%,var(--mt-next-bg) 100%); }
#page-landing .mt-chapter-toggle { display: grid; grid-template-columns: auto minmax(0,1fr) 24px; align-items: center; column-gap: 13px; width: min(423.2px,calc((100vw - 36px) * .92)); margin-inline: auto; min-height: 0; height: 120px; padding: 3px 0 37px; box-sizing: border-box; align-content: start; text-align: left; }
.mt-chapter-number { margin: 0 8px 0 0; align-self: start; translate: 0 1px; font-size: 34px; line-height: 1.2; }
.mt-chapter-title { translate: none; min-width: 0; }
.mt-chapter-title em { white-space: nowrap; translate: 0 1px; }
.mt-expand-icon { position: static; translate: none; justify-self: center; font-size: 32px; line-height: 1; }
.mt-section.is-open .mt-expand-icon { width: 14px; height: 14px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: translateY(4px) rotate(45deg); }
.mt-preview-frame { border-radius: 46px; }
.mt-preview-frame::before { border-bottom: 8px solid #000; }
.mt-preview { border-radius: 46px; clip-path: inset(0 round 46px); }

/* Closed cards reserve a solid colour behind both heading lines. Opening keeps
   the shorter header so the feature controls stay close to the heading. */
#page-landing .mt-section:not(.is-open) .mt-chapter-toggle { height: 190px; }
.mt-accordion .mt-section:not(.is-open)::before {
    background: linear-gradient(to bottom,var(--mt-bg),var(--mt-next-bg)) bottom / 100% 90px no-repeat,var(--mt-bg);
}

/* A coloured, blurred layer lets the shadow follow the next chapter's hue. */
.mt-preview-shadow { display: none; }
.mt-section:is([data-chapter="0"],[data-chapter="1"]) .mt-preview-frame { box-shadow: none; }
.mt-section:is([data-chapter="0"],[data-chapter="1"]) .mt-preview-shadow { display: block; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translate(24px,24px); filter: blur(18px); opacity: .9; pointer-events: none; }
.mt-section[data-chapter="0"] .mt-preview-shadow { background: linear-gradient(#9c6779 25%,#8e7835 100%); }
.mt-section[data-chapter="1"] .mt-preview-shadow { background: linear-gradient(#8e7835 25%,#70618a 100%); }

/* Share a right-hand alignment axis with the phone edge. */
.mt-dock { bottom: var(--mt-dock-inset,13px); }
.mt-nav .tutorial-feature-line { right: 15px; }
.mt-nav .tutorial-feature-controls [data-playback-action="replay"],
.mt-nav [data-playback-action="play"] { right: 1px; }
.mt-expand-icon { position: absolute; left: auto; right: -14px; bottom: auto; top: 24.4px; width: 44px; text-align: center; font-size: 57.6px; transform: translateY(-50%); }
.mt-section.is-open .mt-expand-icon { width: 23.1px; height: 23.1px; right: -3.55px; transform: translateY(-50%) rotate(45deg); }

/* Mobile memory details and full-height collaboration UI. */
.mt-result-day .mt-day small strong { translate: 0 -2px; }
.mt-completed-memory .mt-author .mt-avatar { font-size: 13px; padding: 0; }
.mt-dock.is-editing [data-mt-target^="insert-"] .mt-icon { translate: 0 -3px; }
.mt-dock .mt-dot { scale: 1.18; }
.mt-result-timeline { padding-bottom: 160px; }
.mt-result-day:last-child::after { bottom: -170px; }
.mt-ai-note { font-size: 16px; }
.mt-contact-entry { display: flex; align-items: center; gap: 8px; }
.mt-contact-entry .mt-field { flex: 1; min-width: 0; }
.mt-contact-add { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 50%; background: #00b252; color: var(--bg, #F7F5EB); font-size: 25px; }
.mt-bubble { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; box-sizing: border-box; background: var(--bg, #F7F5EB); color: #111; box-shadow: 0 5px 16px #0003; }
.mt-sheet.mt-chat-sheet { max-height: none; top: 0; bottom: 0; transform: translateX(-50%); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; }
.mt-stage.has-keyboard .mt-chat-sheet { bottom: 158px; }
.mt-chat-sheet .mt-chat { flex: 1; min-height: 0; overflow: auto; }
.mt-chat-compose { display: flex; align-items: center; gap: 6px; }
.mt-chat-compose .mt-field { flex: 1; min-width: 0; }
.mt-chat-compose .mt-cta { margin: 0; }
.mt-publish-sheet .mt-person { font-size: 14px; padding: 13px 12px; }
.mt-publish-sheet .mt-cta { font-size: 14px; padding: 13px 14px; }
.mt-rounded-memory .mt-memory-photo { border-radius: 16px; }
.mt-layout-info { margin: 16px 0; padding: 12px; background: #f2f2f2; border-radius: 12px; font-size: 13px; }
.mt-feed-header { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: var(--bg, #F7F5EB); padding: 26px 14px 12px; box-shadow: 0 2px 5px #0001; }
.mt-feed-header > div { display: flex; align-items: center; justify-content: space-between; }
.mt-feed-header > div > b { font-size: 23px; letter-spacing: -1px; }
.mt-feed-header > div > span { display: flex; gap: 12px; align-items: center; }
.mt-feed-header .mt-avatar,.mt-feed-card .mt-avatar { background: #00b252; color: var(--bg, #F7F5EB); font-style: normal; }
.mt-feed-header nav { display: flex; gap: 6px; margin-top: 14px; }
.mt-feed-header nav b { flex: 1; text-align: center; padding: 10px 3px; border-radius: 24px; font-size: 12px; background: #f0f0f0; }
.mt-feed-header nav b:first-child { background: #dad6ff; }
.mt-feed-header nav b:nth-child(2) { flex: 1.4; background: #574fba; color: var(--bg, #F7F5EB); }
.mt-feed-body { top: 125px; }
.mt-feed-body .mt-content { padding: 12px 12px 30px; }
.mt-feed-card { border-radius: 22px; padding: 16px; margin-bottom: 42px; background: var(--bg, #F7F5EB); box-shadow: 0 5px 22px #0001; }
.mt-feed-card h3 { font: 38px/1 'FK Screamer Trial',sans-serif; margin: 14px 0 10px; }
.mt-feed-card .mt-date { font: 15px/1.3 var(--font-body); }
.mt-feed-stats { display: flex; gap: 36px; margin: 22px 0; font-size: 13px; }
.mt-feed-photos { display: flex; gap: 3px; }
.mt-feed-photos > div { flex: 1; min-width: 0; aspect-ratio: 1; position: relative; overflow: hidden; }
.mt-feed-photos img { width: 100%; height: 100%; object-fit: cover; }
.mt-feed-photos b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--bg, #F7F5EB); background: #0005; font-size: 24px; }
.mt-feed-card .mt-author { margin: 14px 0 20px; }
.mt-feed-card .mt-author small { display: block; }
.mt-feed-actions { display: flex; justify-content: space-between; font-size: 12px; }
.mt-feed-actions > span { display: flex; align-items: center; gap: 4px; }
.mt-feed-actions .mt-mat { font-size: 17px; }

.mt-stage.has-keyboard:has(.mt-chat-sheet) .mt-keyboard { z-index: 7; }

/* Compact mobile chapter titles and explicit carousel navigation. */
.mt-accordion { padding-top: 40px; background: linear-gradient(#f9d1db 0 40px,var(--bg, #F7F5EB) 40px 100%); }
.mt-chapter-number { display: none; }
#page-landing .mt-chapter-toggle { grid-template-columns: minmax(0,1fr) 24px; }
.mt-section .mt-chapter-title em { font-size: 40.8px; }
.mt-chapter-subject { font-size: 42.6px; }
.mt-expand-icon { top: 28.48px; }
.mt-section.is-open .mt-expand-icon { top: 34.48px; border-width: 2.5px; transform: translateY(-50%) scaleX(.82) rotate(45deg); }
.mt-accordion .mt-section[data-chapter="2"],
.mt-accordion .mt-section[data-chapter="2"]::before { border-radius: 0 0 28px 28px; }
#page-landing .mt-feature-arrow { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 24px; border: 0; padding: 0; background: none; box-shadow: none; color: #000; pointer-events: auto; }
#page-landing .mt-feature-arrow:first-child { margin-right: 9px; }
#page-landing .mt-feature-arrow:last-child { margin-left: 9px; }
.mt-feature-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#page-landing .mt-feature-arrow:disabled { opacity: .3; }
@media (max-width: 1024px) {
    #page-landing .feature-social .feature-list li + li { border-top-color: #000; }
}

/* Original SVG bezel in three slices: corner radii and island never stretch vertically. */
.mt-preview-frame { --mt-phone-unit: .66px; border-radius: calc(86.427 * var(--mt-phone-unit)); }
.mt-preview-frame::before,.mt-preview-frame::after { display: none; }
.mt-preview { border-radius: calc(86.427 * var(--mt-phone-unit)); clip-path: inset(0 calc(4.047 * var(--mt-phone-unit)) calc(.574 * var(--mt-phone-unit)) calc(2.45 * var(--mt-phone-unit)) round calc(86.427 * var(--mt-phone-unit))); }
.mt-phone-frame { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.mt-phone-frame svg { display: block; position: absolute; left: 0; width: 100%; }
.mt-phone-top { top: 0; height: calc(500 * var(--mt-phone-unit)); }
.mt-phone-middle { top: calc(500 * var(--mt-phone-unit)); bottom: calc(100 * var(--mt-phone-unit)); height: calc(100% - 600 * var(--mt-phone-unit)); }
.mt-phone-bottom { bottom: 0; height: calc(100 * var(--mt-phone-unit)); }
.mt-nav .tutorial-feature-line { background: transparent; }
.mt-nav .tutorial-feature-line::after { left: 0; width: 100%; background: #000; opacity: 1; transform: scaleX(var(--mt-line-progress,0)); transform-origin: left center; }

/* Mobile typography and controls; match all phone shadows to painted layers. */
.mt-chapter-title em { translate: -4px 1px; }
.mt-chapter-subject { font-size: 44.6px; }
.mt-nav .tutorial-feature-description { font-size: 15px; }
.mt-nav .tutorial-feature-label { translate: 0 -1px; }
.mt-nav [data-playback-action="play"] { top: -6.6px; }
.mt-nav .tutorial-feature-line { height: 1px; overflow: visible; }
#page-landing .mt-feature-arrow { flex-basis: 19.2px; width: 19.2px; }
.mt-feature-arrow svg { width: 19.2px; height: 19.2px; }
.mt-feed-header { padding-top: 52px; }
.mt-feed-body { top: 151px; }
.mt-section[data-chapter="2"] .mt-preview-frame { box-shadow: none; }
.mt-section[data-chapter="2"] .mt-preview-shadow { display: block; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translate(24px,24px); filter: blur(18px); background: #70618a; opacity: .9; pointer-events: none; }

/* The softer second pixel follows the same animated length as the black line. */
.mt-nav .tutorial-feature-line::after { box-shadow: 0 1px 0 rgb(0 0 0 / 25%); }

/* Native vertical gestures remain available over the horizontal feature carousel. */
.mt-nav { touch-action: pan-x pan-y; overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
.mt-nav .tutorial-feature-line { bottom: 7px; }
.mt-expand-icon { right: -10px; }
.mt-section.is-open .mt-expand-icon { right: .45px; border-width: 3.5px; }
.mt-nav .tutorial-feature-controls [data-playback-action="replay"],
.mt-nav [data-playback-action="play"] { right: 5px; }
.mt-nav .tutorial-feature-label { font-size: 20px; }
.mt-memory-photo,.mt-inserted-photo,.mt-feed-photos > div,.mt-block.is-article { border-radius: 14px; }
.mt-block.is-selected { outline: none; }
.mt-block.is-selected::before { content: ''; position: absolute; inset: -1px; border: 1px solid #087cff; border-radius: 0; pointer-events: none; }
.mt-block.is-selected::after { content: ''; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; border: 1px solid #087cff; background: var(--bg, #F7F5EB); border-radius: 50%; pointer-events: none; }

/* Chat respects the phone inset and reserves space below the keyboard. */
.mt-sheet.mt-chat-sheet { top: calc(5cqw / .9409); padding-top: 32px; }
.mt-chat-sheet h3 { font-size: 22px; }
.mt-chat-sheet .mt-message,.mt-chat-sheet .mt-field { font-size: 15px; }
.mt-chat-sheet .mt-person { font-size: 14px; }
.mt-chat-compose .mt-cta { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.mt-chat-compose .mt-cta .mt-mat { translate: 1px 0; }
.mt-keyboard { height: 182px; padding-bottom: 29px; }
.mt-stage.has-keyboard .mt-chat-sheet,.mt-stage.has-keyboard .mt-body { bottom: 182px; }
.mt-feed-photos > div { border-radius: 0; }
.mt-feed-card { box-shadow: 0 7px 24px rgb(0 0 0 / 12%); }

/* Keep chat controls clear of the camera and inside the rounded display. */
.mt-contact-add { line-height: 1; font-family: Arial, sans-serif; }
.mt-bubble { top: 42px; }
.mt-sheet.mt-chat-sheet { border-radius: 36px 36px 0 0; }
.mt-chat-close { position: absolute; right: 15px; top: 35px; display: grid; place-items: center; width: 24px; height: 24px; }
.mt-chat-sheet h3 { padding-right: 30px; }
.mt-chat-compose .mt-cta .mt-mat { scale: .9; }