/* Horizontal fictional study only. Letter text remains HTML; no product styles import this file. */
/* WebKit excludes a flex-basis-only, absolutely populated photo field from
   max-content width. Give it the SAME preferred width so clipping cannot cut
   off the letter/ending. This changes no scene size or foreground position. */
body[data-axis=x] .photograph-field{width:var(--field)}
body[data-axis=x] .world{overflow:clip}
body[data-axis=x] .letter-scene{padding-bottom:max(66px,calc(var(--depth-tools-height,44px) + 22px + env(safe-area-inset-bottom)))}
body[data-axis=x] .letter-scroll{
 position:relative;background:#f8f2e7 url('/demo/christmas/assets/moment/assets/letter-paper.svg') repeat;
 padding:clamp(22px,3vw,36px) clamp(18px,2.5vw,30px);
 border:1px solid #fffbf0;border-right-color:#ded4c3;border-bottom-color:#d5c9b6;
 box-shadow:0 2px 3px #15201418,2px 9px 22px #101b1533;
 transform:rotate(-2deg);transform-origin:50% 50%;
 /* A stationary sheet: no scroll animation, entrance transition or moving ink. */
 animation:none;transition:none;isolation:isolate;
}
body[data-axis=x] .letter-scroll[data-overflow]{transform:none}
.depth-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:76px;padding:4px 6px;border:0;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.depth-toggle[hidden]{display:none}
.depth-toggle:disabled{cursor:default;text-decoration:none}
@supports (animation-timeline:scroll(nearest x)) and (overflow:clip){
 @media(prefers-reduced-motion:no-preference){
  body[data-axis=x][data-depth=on] .continuous-master{
   animation:christmas-scenery-depth auto linear both;
   animation-timeline:scroll(nearest x);
  }
 }
}
@keyframes christmas-scenery-depth{from{transform:translateX(calc(-1 * var(--depth-travel,0px)))}to{transform:translateX(0)}}
@media(max-width:360px),(max-height:500px){body[data-axis=x] .letter-scroll{transform:none;padding:22px 18px}}
@media(prefers-reduced-motion:reduce){body[data-axis=x] .continuous-master{animation:none;transform:none}body[data-axis=x] .letter-scroll{transform:none}}

/* Comparison strengths interpolate only on an explicit selection; native scrolling is unchanged. */
@property --depth-travel{syntax:'<length>';inherits:true;initial-value:0px}
.depth-strength{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.depth-strength[hidden]{display:none}
.depth-strength select{min-height:44px;min-width:76px;max-width:100%;padding:4px 6px;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-size:16px;cursor:pointer}
.depth-strength select:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.depth-strength select:disabled{cursor:default}
@media(prefers-reduced-motion:no-preference){body[data-axis=x] .world[data-depth-switching]{transition:--depth-travel 240ms ease-out}}
@media(max-width:360px){
 body[data-axis=x] .journey-tools{column-gap:8px}
 .depth-toggle{min-width:60px;padding-inline:4px}
 .depth-strength select{min-width:64px;padding-inline:4px}
}

/* Opt-in local diagnostics only; no customer content or network reporting. */
.reach-diagnostics{position:fixed;z-index:8;top:max(56px,calc(env(safe-area-inset-top) + 48px));left:12px;width:360px;max-width:calc(100vw - 24px);max-height:65svh;overflow:auto;background:#f4efe5f5;color:#293529;padding:0 12px;font:12px/1.5 'Helvetica Neue',Arial,sans-serif;box-shadow:0 2px 12px #14200f20}
.reach-diagnostics summary{cursor:pointer;min-height:44px;align-content:center}
.reach-diagnostics pre{font:11px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;margin:0 0 12px}
.reach-diagnostics nav{display:flex;gap:16px;flex-wrap:wrap;padding-bottom:8px}
.reach-diagnostics a,.reach-diagnostics button{font:inherit;color:inherit;min-height:44px;align-content:center;background:transparent;border:0;padding:0;text-decoration:underline;cursor:pointer}