/* One real app screen, resting on its own table chapter. */
.phone-world{--pw-ink:#343b32;--pw-muted:#777d70;--pw-sage:#e4e8d8;--pw-paper:#f8f7f0;--pw-terracotta:#a35940;--pw-tilt:-1.1deg;--pw-tip-x:5deg;--pw-tip-y:-5deg;--pw-bezel:10px;position:relative;margin-inline:auto;width:100%;max-width:560px;padding:58px 0 42px;overflow:clip;isolation:isolate;background:#d3c5aa;color:var(--pw-ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;color-scheme:light;touch-action:pan-y;overscroll-behavior:auto;-webkit-tap-highlight-color:transparent}
.phone-world[hidden],.phone-world [hidden]{display:none!important}
.phone-world *{box-sizing:border-box}
.phone-world button,.phone-world input{font:inherit}
.phone-world button{min-width:44px;min-height:44px;border:0;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none}
.phone-world button:disabled{cursor:default}
.phone-world button:focus-visible,.phone-world input:focus-visible{outline:2px solid #477753;outline-offset:3px}
.phone-world [tabindex="-1"]:focus{outline:none}
.phone-world button{color:inherit}
.phone-world h2,.phone-world h3,.phone-world h4,.phone-world p{margin:0}
.phone-world svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.phone-world .pw-symbols{position:absolute;width:0;height:0;overflow:hidden}
.pw-room{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#413321b8,#392c1a35 37%,#3c2d1c21 72%,#38291ac2),url('assets/story-phone-desk.webp') center 62%/cover no-repeat;pointer-events:none}
.pw-arrival{position:relative;padding:0 24px;margin:0 auto 34px;text-align:center;color:#fff3df;text-shadow:0 2px 16px #2e281b70;pointer-events:none}
.pw-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.17em;font-weight:600;line-height:1.5}
.pw-arrival h2{margin-top:12px;font-family:LightSerif,Georgia,serif;font-size:clamp(32px,8.7vw,42px);font-weight:400;line-height:1.09;letter-spacing:-.035em}
.pw-arrival em{font-weight:400}
.pw-device{position:absolute;left:50%;top:50%;width:var(--pw-device-w,min(80vw,280px));height:var(--pw-device-h,min(155.2vw,543.2px));padding:var(--pw-bezel);transform:translate(-50%,-50%) rotateX(var(--pw-tip-x)) rotateY(var(--pw-tip-y)) rotateZ(var(--pw-tilt));border-radius:42px;background:linear-gradient(145deg,#55564c,#242523 20%,#8b887a 48%,#292c26 63%,#5f6158);box-shadow:0 0 0 1px #181b18,1px 1px 0 2px #d5c7a15e,11px 23px 35px #211b2059,0 5px 12px #1a201b80;transform-origin:center center}
.pw-device-edge{position:absolute;inset:2px;border:1px solid #918f7c80;border-radius:inherit;pointer-events:none}
.pw-device::before,.pw-device::after{content:"";position:absolute;left:-3px;top:21%;height:42px;width:3px;border-radius:3px 0 0 3px;background:#5c5c52}
.pw-device::after{top:34%;height:28px}
.pw-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:32px;background:var(--pw-paper)}
.pw-surface{position:absolute;inset:0;overflow:hidden;background:var(--pw-paper)}
.pw-camera{position:absolute;z-index:9;top:7px;left:50%;transform:translateX(-50%);width:61px;height:16px;border-radius:20px;background:#171b18;box-shadow:inset 0 1px 1px #000;pointer-events:none}
.pw-camera i{position:absolute;right:10px;top:6px;width:6px;height:6px;border-radius:50%;background:#14242a;box-shadow:inset 1px 1px 2px #4f6650}
.pw-app{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--pw-paper)}
.pw-statusbar{height:30px;padding:9px 19px 5px;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:600;line-height:1;flex-shrink:0;color:#3e4539;background:transparent}
.pw-statusbar svg{width:48px;height:16px;stroke-width:2}
.pw-status-symbols{display:flex}
.pw-view{position:relative;display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden}

.pw-home{background:radial-gradient(ellipse at 0 90%,#a8b39b70,transparent 57%),linear-gradient(145deg,#f4f0df,#e1e4d2);padding:14px 18px 8px;text-align:center;justify-content:space-between;gap:10px;overflow-y:auto;overscroll-behavior:auto;touch-action:pan-y;scrollbar-width:none}
.pw-home>*{flex-shrink:0}
.pw-app[data-view="home"]{background:#eeedde}
.pw-home-top .pw-eyebrow{color:#68735b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.pw-home-clock{font-size:48px;font-weight:300;letter-spacing:-.06em;line-height:1.15;margin-top:9px!important;color:#485840}
.pw-home-date{font-size:12px;color:#69745f}
.pw-home-message{padding:6px 0;color:#536348}
.pw-home-message>span{display:block;font-size:18px;color:#96a081;margin-bottom:7px}
.pw-home-message p{font-family:LightSerif,Georgia,serif;font-size:28px;line-height:1.15;letter-spacing:-.025em}
.pw-app-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 2px}
.pw-app-launch{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:0;border-radius:13px;background:transparent;font-size:14px!important;font-weight:500;line-height:1.3;text-wrap:balance}
.pw-app-icon{position:relative;width:66px;height:66px;display:grid;place-items:center;border-radius:19px;box-shadow:0 5px 10px #3b3e2812,inset 0 1px #ffffff7d}
.pw-app-icon svg{width:48px;height:48px;stroke-width:1.7}
.pw-notes-icon{background:#eef0cf;color:#536646;border:1px solid #c3c9a9}
.pw-table-icon{background:linear-gradient(145deg,#ba7154,#a35a41);color:#fff2da;border:1px solid #92543c}
.pw-scroll-on{padding:9px 0 3px;font-size:12px;line-height:1.5;color:#7a856d;pointer-events:none}
.pw-scroll-on span{display:inline-block;margin-left:5px}
.pw-home-indicator{height:15px;flex-shrink:0;position:relative;background:inherit}
.pw-home-indicator::after{content:"";position:absolute;left:50%;bottom:5px;width:108px;height:4px;border-radius:3px;transform:translateX(-50%);background:#353c3250}
.pw-toolbar{min-height:54px;display:flex;align-items:center;gap:9px;padding:4px 12px 4px 7px;flex-shrink:0;border-bottom:1px solid #73816620;background:inherit}
.pw-toolbar h2{font-size:16px;letter-spacing:-.025em;font-weight:500;flex:1;min-width:0;line-height:1.2;text-align:right}
.pw-home-button{display:inline-flex;align-items:center;justify-content:center;gap:3px;flex-shrink:0;min-height:46px;padding:5px 6px;border-radius:10px;background:transparent;color:#556449!important;font-size:13px!important}
.pw-home-button svg{width:19px;height:19px}
.pw-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:auto;touch-action:pan-y;min-height:0;flex:1;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#adb39a80 transparent}
.pw-scroll:focus-visible{outline:2px solid #617a4f;outline-offset:-2px}
.pw-note-detail{background:#f2f3e9;color:#49563f}
.pw-note-page{padding:25px 22px 28px}
.pw-note-overline{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#7e8b70;margin-bottom:18px!important}
.pw-note-page h3{font-family:LightSerif,Georgia,serif;font-size:32px;font-weight:400;line-height:1.2;margin:0 0 21px;overflow-wrap:anywhere}
.pw-letter-copy p{font-size:16px;line-height:1.75;margin:0 0 20px}
.pw-handwritten{font-family:LightSerif,Georgia,serif;font-style:italic;font-size:25px!important;line-height:1.35!important;color:#65784f;margin:25px 0!important}
.pw-note-signoff{font-size:12px;color:#7d8a6e;padding-top:18px;border-top:1px solid #7381662b;overflow-wrap:anywhere}
.pw-reader-actions{position:relative;flex-shrink:0;margin:0;padding:9px 12px 10px;border-top:1px solid #77836327;background:inherit}
.pw-reader-actions button{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;min-height:46px;padding:11px 14px;border-radius:11px;font-size:14px!important;line-height:1.4;font-weight:500;text-align:left}
.pw-reader-actions svg{width:16px;height:16px}
.pw-note-next{background:#dce5cf;color:#435b35!important}
.pw-date{background:#fbf7f0;color:#6b513e}
.pw-date .pw-toolbar{border-color:#b4967930}
.pw-date .pw-home-button{color:#8c674d!important}
.pw-cafe-hero{position:relative;width:100%;aspect-ratio:1.35;background:#594b37;overflow:hidden}
.pw-cafe-hero>img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% center}
.pw-cafe-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#211c12c7)}
.pw-demo-pill{position:absolute;top:12px;left:14px;z-index:1;padding:3px 6px;border-radius:4px;background:#fffbeced;color:#77624e;font-size:9px;line-height:1.4}
.pw-cafe-hero>div{position:absolute;left:17px;right:15px;bottom:17px;z-index:1;color:#fff5e4}
.pw-cafe-hero h3{font-family:LightSerif,Georgia,serif;font-size:27px;font-weight:400;letter-spacing:-.02em;line-height:1.15;margin-bottom:5px}
.pw-cafe-hero p{font-size:11px;color:#ecdfc9}
.pw-date-inner{padding:22px 18px}
.pw-date-thought{font-family:LightSerif,Georgia,serif;font-style:italic;font-size:24px;line-height:1.3;color:#82664e;margin-bottom:26px!important}
.pw-order-title{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:#a0866c;margin-bottom:16px!important}
.pw-food{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.pw-food>img{width:76px;height:83px;object-fit:cover;border-radius:10px;flex-shrink:0;background:#e3d6be}
.pw-food>div{min-width:0}
.pw-food h4{font-size:15px;line-height:1.3;font-weight:500;color:#684f3c;margin:0 0 6px}
.pw-food p{font-size:16px;line-height:1.5;color:#8f765f}
.pw-date-last{border-top:1px solid #b4967929;padding-top:22px;margin-top:24px!important;font-size:12px;line-height:1.7;color:#9a7f66;text-align:center}
.pw-date-last em{display:inline-block;margin-top:5px;font-family:LightSerif,Georgia,serif;font-size:24px;line-height:1.3;color:#76593f}
.pw-demo-caption{font-size:10px;line-height:1.6;color:#9b8b79;text-align:center;margin-top:24px!important}
.pw-device-stage{position:relative;width:100%;height:clamp(590px,160vw,650px);perspective:1600px;perspective-origin:50% 50%}
.pw-app-pair{width:100%;flex-shrink:0}
.pw-open-guide{margin:0 0 14px!important;font-family:LightHand,LightSerif,Georgia,serif;font-style:normal;font-size:23px;line-height:1.1;color:#748161;text-align:center}
.pw-table-sprig{position:absolute;z-index:0;left:-35px;bottom:7%;width:clamp(132px,38%,205px);height:auto;opacity:.88;transform:rotate(-16deg);transform-origin:50% 80%;filter:drop-shadow(4px 8px 5px #261b1655);pointer-events:none;user-select:none}
.pw-device-stage{z-index:1}
.pw-device-edge{box-shadow:inset 0 1px 0 #fff1d836,inset 0 -1px 0 #181b1455}
.pw-screen{box-shadow:inset 0 0 0 1px #fffbe540}
.pw-glint{position:absolute;z-index:5;inset:-15% auto -15% -40%;width:42%;background:linear-gradient(90deg,transparent,#fff8df70 50%,transparent);opacity:0;transform:translateX(-150%) skewX(-18deg);pointer-events:none}
.pw-app-launch .pw-app-icon{transition:transform .18s ease,box-shadow .18s ease}
.pw-app-launch:active .pw-app-icon{transform:scale(.94);box-shadow:0 2px 5px #3b3e2822,inset 0 1px #ffffff7d}
.pw-view.is-leaving{position:absolute;inset:30px 0 15px;z-index:2;pointer-events:none}
.pw-view.is-arriving{z-index:3}
.phone-world[data-view-transition="back"] .pw-view.is-leaving{z-index:3}
.phone-world[data-view-transition="back"] .pw-view.is-arriving{z-index:2}
.phone-world[data-phone-compact="true"] .pw-home{padding:8px 13px;gap:9px}
.phone-world[data-phone-compact="true"] .pw-home-clock{font-size:40px;margin-top:5px!important}
.phone-world[data-phone-compact="true"] .pw-home-message{padding:5px 0}
.phone-world[data-phone-compact="true"] .pw-home-message>span{font-size:18px;margin-bottom:7px}
.phone-world[data-phone-compact="true"] .pw-home-message p{font-size:26px}
.phone-world[data-phone-compact="true"] .pw-app-grid{gap:8px}
.phone-world[data-phone-compact="true"] .pw-open-guide{font-size:21px;margin-bottom:10px!important}
.phone-world[data-phone-compact="true"] .pw-app-icon{width:59px;height:59px;border-radius:17px}
.phone-world[data-phone-compact="true"] .pw-app-icon svg{width:43px;height:43px}
.phone-world[data-phone-compact="true"] .pw-note-page{padding:21px 18px}
.phone-world[data-phone-compact="true"] .pw-note-page h3{font-size:29px}
.phone-world[data-phone-compact="true"] .pw-date-inner{padding-inline:15px}
.phone-world[data-phone-compact="true"] .pw-food{gap:10px}
.phone-world[data-phone-compact="true"] .pw-food>img{width:67px;height:76px}

/* Keep the original projected-screen API available for the room integration. */
.phone-world[data-phone-mode="cinematic"]{position:absolute;inset:0;z-index:12;width:100%;height:100%;max-width:none;margin:0;padding:0;background:none;overflow:visible;pointer-events:none}
.phone-world[data-phone-mode="cinematic"] .pw-room,.phone-world[data-phone-mode="cinematic"] .pw-arrival,.phone-world[data-phone-mode="cinematic"] .pw-table-sprig{display:none}
.phone-world[data-phone-mode="cinematic"] .pw-device-stage{position:absolute;inset:0;width:100%;height:100%;perspective:none;pointer-events:none}
.phone-world[data-phone-mode="cinematic"] .pw-device{left:0;top:0;width:var(--pw-projected-w,280px);height:var(--pw-projected-h,580px);padding:0;border-radius:0;background:none;box-shadow:none;transform-origin:0 0;pointer-events:none}
.phone-world[data-phone-mode="cinematic"] .pw-device-edge,.phone-world[data-phone-mode="cinematic"] .pw-device::before,.phone-world[data-phone-mode="cinematic"] .pw-device::after{display:none}
.phone-world[data-phone-mode="cinematic"] .pw-screen{border-radius:var(--pw-screen-radius,21px);pointer-events:none}
.phone-world[data-phone-mode="cinematic"][data-phone-interactive="true"] .pw-screen{pointer-events:auto}
.phone-world[data-phone-mode="cinematic"][data-phone-pose="pending"] .pw-device{visibility:hidden}
.phone-world[data-phone-mode="cinematic"] .pw-table-track,.phone-world[data-phone-mode="cinematic"] .pw-table-scene{display:contents}

/* One small phone settles with its table. Size stays constant; a deliberate
   tap simply levels it and opens the chosen memory. */
.phone-world:not([data-phone-mode="cinematic"]){--pw-device-lift:24px;--pw-tip-x:6deg;--pw-tip-y:-2deg;--pw-tilt:-3deg;--pw-contact-opacity:.26;padding:0;overflow:visible;background:#ede8dc}
.phone-world:not([data-phone-mode="cinematic"]) .pw-arrival{padding:37px 24px 30px;margin:0;color:#4b503e;text-shadow:none}
.phone-world:not([data-phone-mode="cinematic"]) .pw-arrival .pw-eyebrow{color:#7a8068}
.phone-world:not([data-phone-mode="cinematic"]) .pw-arrival h2{font-size:clamp(31px,8vw,39px);line-height:1.1}
.phone-world:not([data-phone-mode="cinematic"]) .pw-table-track{position:relative;height:110svh;min-height:0;background:#7a5b3d}
.phone-world:not([data-phone-mode="cinematic"]) .pw-table-scene{position:sticky;top:0;height:100svh;max-height:940px;overflow:clip;isolation:isolate;background:#7a5b3d}
.phone-world:not([data-phone-mode="cinematic"]) .pw-room{z-index:-1;inset:-4%;background:linear-gradient(180deg,#35281e38,transparent 28%,transparent 72%,#38291a36),url('assets/story-phone-desk.webp') center 59%/cover no-repeat}
.phone-world:not([data-phone-mode="cinematic"]) .pw-device-stage{height:100%;perspective:1200px;perspective-origin:50% 42%}
.phone-world:not([data-phone-mode="cinematic"]) .pw-device-stage::before{content:"";position:absolute;left:50%;top:55%;width:75%;height:44%;border-radius:50%;background:radial-gradient(ellipse,#24190e 0,transparent 69%);opacity:var(--pw-contact-opacity);transform:translate(-50%,-50%) rotate(-13deg);pointer-events:none}
.phone-world:not([data-phone-mode="cinematic"]) .pw-device{border-radius:36px;transform:translate(-50%,calc(-50% + var(--pw-device-lift))) rotateX(var(--pw-tip-x)) rotateY(var(--pw-tip-y)) rotateZ(var(--pw-tilt));box-shadow:0 0 0 1px #181b18,1px 1px 0 2px #d5c7a15e,5px 15px 20px #24190e55,0 5px 8px #1a201b75,0 22px 30px #361e1540}
.phone-world:not([data-phone-mode="cinematic"])[data-phone-distance="near"] .pw-device{transform:translate(-50%,-50%)}
.phone-world:not([data-phone-mode="cinematic"])[data-reading-distance="true"] .pw-device{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.phone-world:not([data-phone-mode="cinematic"]) .pw-screen{border-radius:26px}

/* One opaque table enters as one scene. No ghosted phone or empty-table fade. */
.phone-world[data-phone-bridge="true"] .pw-arrival{display:none}
.phone-world[data-phone-bridge="true"] .pw-table-scene{transform:translateY(var(--pw-bridge-offset,100svh));pointer-events:none}
.phone-world[data-phone-bridge="true"][data-bridge-fixed="true"],.phone-world[data-phone-bridge="true"][data-bridge-fixed="true"] .pw-table-track{background:transparent}
.phone-world[data-phone-bridge="true"][data-bridge-fixed="true"] .pw-table-scene{position:fixed;top:0;left:0;right:0;width:100%;max-width:560px;margin-inline:auto}
.phone-world[data-phone-bridge="true"][data-phone-interactive="true"] .pw-table-scene{pointer-events:auto}
.phone-world[data-phone-bridge="true"][data-bridge-settled="true"] .pw-table-scene{transform:none}

@media(max-height:499px){.phone-world:not([data-phone-mode="cinematic"]) .pw-table-track{height:auto;min-height:0}.phone-world:not([data-phone-mode="cinematic"]) .pw-table-scene{position:relative;height:680px}}
@media(prefers-reduced-motion:reduce){.phone-world *{scroll-behavior:auto!important}.phone-world:not([data-phone-mode="cinematic"]) .pw-table-track{height:auto;min-height:0}.phone-world:not([data-phone-mode="cinematic"]) .pw-table-scene{position:relative}.phone-world:not([data-phone-mode="cinematic"]) .pw-device{transform:translate(-50%,-50%);transition:none}.phone-world:not([data-phone-mode="cinematic"]) .pw-room{transform:none}}

@media(min-width:520px){.pw-table-sprig{left:5px;bottom:10%;width:185px;transform:rotate(-24deg)}}
@media(prefers-reduced-motion:reduce){.pw-app-launch .pw-app-icon{transition:none}.pw-app-launch:active .pw-app-icon{transform:none}.pw-glint{display:none}}

/* A small finger points to each optional memory. CSS owns this decoration;
   the same visibility state as the table pauses it without a frame loop. */
.pw-tap-cue{position:absolute;right:-11px;top:11px;width:34px;height:34px;pointer-events:none;color:#786647}
.phone-world .pw-app-icon .pw-tap-cue svg{position:absolute;inset:0;width:34px;height:34px;fill:#fff8e8;stroke:#786647;stroke-width:1.6;opacity:.8;animation:pw-tap-finger 4.8s ease-in-out infinite;animation-play-state:paused}
.pw-tap-ripple{position:absolute;left:6px;top:4px;width:17px;height:17px;border:1px solid #fff9e9;border-radius:50%;box-shadow:0 0 0 1px #78664755;opacity:0;animation:pw-tap-ring 4.8s ease-out infinite;animation-play-state:paused}
.phone-world [data-pw-launch="date"] .pw-tap-cue svg,.phone-world [data-pw-launch="date"] .pw-tap-ripple{animation-delay:-2.4s}
.phone-world[data-cues-active="true"] .pw-tap-cue svg,.phone-world[data-cues-active="true"] .pw-tap-ripple{animation-play-state:running}
.phone-world:not([data-phone-view="home"]) .pw-tap-cue,.pw-app-launch[data-memory-visited="true"] .pw-tap-cue{display:none}
@keyframes pw-tap-finger{0%,44%,100%{transform:translateY(5px);opacity:0}10%{transform:translateY(5px);opacity:.9}22%,29%{transform:translateY(0);opacity:.9}39%{transform:translateY(5px);opacity:0}}
@keyframes pw-tap-ring{0%,19%,44%,100%{transform:scale(.35);opacity:0}22%{transform:scale(.55);opacity:.85}39%{transform:scale(1.55);opacity:0}}
@media(prefers-reduced-motion:reduce){.phone-world .pw-app-icon .pw-tap-cue svg{animation:none;transform:none;opacity:.8}.pw-tap-ripple{display:none;animation:none}}

/* The same tiny photo prints as the keepsake scene. They stay behind the
   phone, never catch a gesture, and need no frame callbacks or measurements. */
.pw-photo-weather{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;user-select:none}
.pw-falling-print{position:absolute;left:var(--pw-photo-left,2%);top:-140px;width:clamp(58px,17vw,72px);height:auto;padding:4px 4px 12px;background:#f5e8cf;box-shadow:0 3px 6px #100c0926;opacity:0;transform-origin:50% 35%;animation:pw-photo-drift var(--pw-photo-time,29s) var(--pw-photo-delay,-7s) linear infinite both;animation-play-state:paused;pointer-events:none;-webkit-user-drag:none;--pw-photo-opacity:.23;--pw-photo-sway:12px;--pw-photo-tilt:-11deg}
.pw-falling-print:nth-child(2){--pw-photo-left:79%;--pw-photo-time:34s;--pw-photo-delay:-20s;--pw-photo-opacity:.2;--pw-photo-sway:-14px;--pw-photo-tilt:12deg}
.pw-falling-print:nth-child(3){--pw-photo-left:18%;--pw-photo-time:38s;--pw-photo-delay:-5s;--pw-photo-opacity:.17;--pw-photo-sway:19px;--pw-photo-tilt:-7deg;width:clamp(52px,15vw,66px)}
.pw-falling-print:nth-child(4){--pw-photo-left:65%;--pw-photo-time:32s;--pw-photo-delay:-27s;--pw-photo-opacity:.2;--pw-photo-sway:-17px;--pw-photo-tilt:9deg;width:clamp(55px,16vw,70px)}
.phone-world[data-photos-active="true"] .pw-falling-print{animation-play-state:running}
@keyframes pw-photo-drift{
  0%{transform:translate3d(0,0,0) rotate(var(--pw-photo-tilt));opacity:0}
  9%{opacity:var(--pw-photo-opacity)}
  35%{transform:translate3d(var(--pw-photo-sway),calc(38svh + 48px),0) rotate(calc(var(--pw-photo-tilt) + 5deg));opacity:var(--pw-photo-opacity)}
  67%{transform:translate3d(calc(var(--pw-photo-sway)*-.45),calc(74svh + 84px),0) rotate(calc(var(--pw-photo-tilt) - 4deg));opacity:var(--pw-photo-opacity)}
  88%{opacity:var(--pw-photo-opacity)}
  100%{transform:translate3d(var(--pw-photo-sway),calc(100svh + 280px),0) rotate(calc(var(--pw-photo-tilt) + 3deg));opacity:0}
}
.phone-world[data-phone-mode="cinematic"] .pw-photo-weather{display:none}
@media(prefers-reduced-motion:reduce){.pw-photo-weather{display:none}.pw-falling-print{animation:none}}

/* A short matched edge joins the departing room to the table. The longer
   bottom blend belongs to the unchanged phone-to-keepsake transition. */
.phone-world:not([data-phone-mode="cinematic"]){--pw-wood-edge:#67462e;--pw-edge-depth:clamp(58px,9svh,82px);--pw-top-edge:var(--pw-edge-depth)}
.phone-world[data-phone-bridge="true"]{--pw-top-edge:22px}
.phone-world:not([data-phone-mode="cinematic"]) .pw-table-track{background:var(--pw-wood-edge)}
.phone-world:not([data-phone-mode="cinematic"]) .pw-table-scene{overflow:visible;background:transparent}
.phone-world:not([data-phone-mode="cinematic"]) .pw-room{inset:0;background-color:var(--pw-wood-edge);background-image:linear-gradient(180deg,var(--pw-wood-edge),transparent var(--pw-top-edge),transparent calc(100% - var(--pw-edge-depth)),var(--pw-wood-edge)),linear-gradient(180deg,#35281e20,transparent 28%,transparent 72%,#38291a20),url('assets/story-phone-desk.webp');background-size:100% 100%,100% 100%,max(100%,66.667svh) auto;background-position:center,center,center top;background-repeat:no-repeat}
body[data-bridge-active="true"] .phone-world[data-phone-bridge="true"][data-bridge-fixed="true"] .pw-table-scene::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--pw-top-edge) + 1px);height:var(--pw-top-edge);z-index:-1;background:linear-gradient(180deg,transparent,#67462e55 38%,var(--pw-wood-edge));pointer-events:none}
.phone-world:not([data-phone-mode="cinematic"]) .pw-table-sprig{clip-path:inset(0 0 0 35px)}

/* The phone waits for a touch. Its screen and apps never wake on scroll. */
.phone-world .pw-surface{background:#111815}
.phone-world:not([data-phone-awake="true"]) .pw-app{visibility:hidden}
.phone-world:not([data-phone-awake="true"]) .pw-glint{display:none}
.phone-world .pw-wake{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;width:100%;height:100%;padding:36px 20px;border:0;border-radius:inherit;background:linear-gradient(125deg,#28312b33,transparent 35%,#e6dcc512 49%,transparent 63%),#111815;color:#e5decb;touch-action:pan-y;cursor:pointer}
.phone-world .pw-wake:focus-visible{outline:2px solid #e0cd9d;outline-offset:-7px}
.pw-wake-label{font:400 16px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em}
.pw-wake-gesture{position:relative;display:block;width:54px;height:54px;pointer-events:none}
.phone-world .pw-wake-gesture svg{position:absolute;inset:0;width:54px;height:54px;fill:#f3ead3;stroke:#796e58;stroke-width:1.4;opacity:.82;animation:pw-wake-touch 3.6s ease-in-out infinite;animation-play-state:paused}
.pw-wake-gesture i{position:absolute;left:11px;top:8px;width:24px;height:24px;border:1px solid #ebd9b8;border-radius:50%;opacity:0;animation:pw-tap-ring 3.6s ease-out infinite;animation-play-state:paused}
.phone-world[data-wake-cue-active="true"] .pw-wake-gesture :is(svg,i){animation-play-state:running}
@keyframes pw-wake-touch{0%,10%,45%,100%{transform:translateY(5px);opacity:.72}22%,29%{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.phone-world .pw-wake-gesture svg{animation:none;transform:none;opacity:.9}.pw-wake-gesture i{display:none;animation:none}}