:root{--ink:#263d48;--line:#d8d7d3;--accent:#9f594d;--gold:#b89b64}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{background:#fff}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}#page{position:fixed;inset:0;display:grid;place-items:center;background:#fff}#board{position:relative;width:min(100vw,calc(100svh * 1.7142857),1560px);aspect-ratio:12/7;background:#fff}#journey{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:none}#route-input{pointer-events:stroke;cursor:crosshair}#route-progress{pointer-events:none}#route-input:focus{outline:none}#route-input:focus-visible{stroke:#9f594d18}#trail-tip{pointer-events:none;filter:drop-shadow(0 0 5px #344f5b33)}#phones .phone-hit{fill:transparent;pointer-events:all}#phones [role=button]{cursor:pointer;outline:none}#phones [role=button]:focus-visible .phone-case{stroke:var(--accent);stroke-width:3}#phones [aria-disabled=true]{cursor:default}#phones .phone-case{fill:#1e252b;stroke:#70797d;stroke-width:1.3}#phones .phone-screen{fill:url(#phone-glass)}#phones .phone-message{stroke:#c8c7c2;fill:#ffffff08;stroke-width:1.1}#phones .active-glow{opacity:0;stroke:#a49378;stroke-width:1;fill:none;pointer-events:none}.phone-ready .active-glow{animation:phone-pulse 2.8s ease-in-out infinite}.phone-sent .phone-screen{fill:#27313a}.notification-dot{fill:var(--gold);animation:beacon 1.5s ease-in-out infinite}.moon-sleep{opacity:0}.moon-awake{animation:moon-pass 1.3s ease-in-out both}.moon-awake.second{animation-delay:1.05s}#phone-link{opacity:.45}.stop{outline:none;cursor:default}.stop .stop-halo{fill:#fff;stroke:#e3e2de;stroke-width:1;transition:stroke .35s}.stop .icon{color:#a4aaab;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:color .35s}.stop .place{font-size:12px;fill:#8c9191;letter-spacing:.6px;transition:fill .35s;font-family:Arial,Helvetica,sans-serif}.stop.next .stop-halo{stroke:#a5b0b4;stroke-dasharray:2 5}.stop.reached .icon,.stop.active .icon{color:#344f5b}.stop.reached .place,.stop.active .place{fill:#344f5b}.stop.reached .stop-halo{stroke:#344f5b}.stop.active .stop-halo{stroke:#9f594d;stroke-width:1.4}.stop.active{cursor:pointer}.stop:focus-visible .stop-halo{stroke:#9f594d;stroke-width:3}.stop .little-light{fill:#fff;stroke:#e0dfda;stroke-width:1}.stop.reached .little-light{fill:#9f594d;stroke:#9f594d}.stop .animation-part{transform-box:fill-box;transform-origin:center}.stop.celebrate .animation-part{animation:little-turn .75s ease-in-out}.stop.celebrate .bubble{animation:bubble .8s ease-out both}.stop.celebrate .glass-left{animation:clink-left .8s ease-in-out}.stop.celebrate .glass-right{animation:clink-right .8s ease-in-out}.stop.celebrate .wheel{animation:wheel 1s linear;transform-box:fill-box;transform-origin:center}.stop.celebrate .steam{animation:steam 1.2s ease-out}.photo{position:absolute;margin:0;padding:6px;background:white;box-shadow:0 8px 25px #20364010,0 0 0 1px #e9e7e2;z-index:2;transition:box-shadow .8s,filter .8s}.photo button{padding:0;display:block;border:0;background:none;width:100%;height:100%}.photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}.photo-paraglider{left:5.5%;top:9%;width:11%;transform:rotate(-5deg)}.photo-brasserie{right:5.5%;top:61%;width:12%;transform:rotate(4deg)}.photo-paris{left:59.8%;top:52%;width:10.2%;transform:rotate(-3deg)}.photo.lit{box-shadow:0 10px 28px #2036401c,0 0 0 1px #d1ba98}.photo.lit:after{content:'';position:absolute;inset:-7px;border:1px solid #d1ba9855;pointer-events:none}#restart{position:fixed;right:max(22px,env(safe-area-inset-right));top:max(22px,env(safe-area-inset-top));width:33px;height:33px;border:1px solid #e5e4e1;border-radius:50%;background:#fff;color:#8b9599;font-size:20px;z-index:4}#restart:hover{color:var(--ink);border-color:#a5b0b4}#star{position:fixed;z-index:15;width:58px;height:58px;background:none;border:0;padding:7px;color:var(--gold);touch-action:none;transition:filter .2s;filter:drop-shadow(0 2px 6px #b89b6425)}#star svg{width:100%;height:100%;overflow:visible;fill:currentColor;stroke:#9d804b;stroke-width:.6;animation:star-breathe 2.8s ease-in-out infinite}#star.catchable{filter:drop-shadow(0 0 14px #d6b56b66)}#star:focus-visible{border-radius:50%}dialog{border:1px solid #e7e4dd;max-height:calc(100svh - 40px);max-width:calc(100vw - 32px);color:var(--ink);background:white;box-shadow:0 20px 100px #2036401a;padding:35px;border-radius:4px}dialog[open]{animation:appear .3s ease-out}dialog::backdrop{background:#fff9;backdrop-filter:blur(5px)}.close{position:absolute;right:10px;top:8px;width:32px;height:32px;padding:0;background:transparent;border:0;font-size:23px;color:#8a9498;z-index:4}.arrow{display:block;margin:25px auto 0;border:1px solid #78838a88;background:none;color:#e8e5df;border-radius:50%;width:43px;height:43px;font-size:23px}#phone-dialog{width:335px;min-height:380px;border:6px solid #333b41;border-radius:31px;background:#151d24;padding:52px 24px 28px;box-shadow:0 24px 100px #14202a33;color:#f3efe8}#phone-dialog .close{color:#aeb7bc}.speaker{position:absolute;top:18px;left:calc(50% - 20px);width:40px;height:3px;border-radius:3px;background:#727c83}#chat-content{min-height:200px;display:flex;align-items:center}.chat{padding:18px 17px;background:#2b3742;border:1px solid #4a576255;border-radius:14px 14px 14px 3px;font-size:14px;line-height:1.8;color:#eeebe5;animation:appear .45s ease-out;width:100%}#phone-dialog.short #chat-content{min-height:140px}#phone-dialog.short{min-height:300px}#wing-dialog{width:min(960px,96vw);padding:0;border:0;overflow:hidden;box-shadow:0 20px 100px #20364015}#inflate{display:block;width:100%;border:0;background:#fff;padding:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}#inflate svg{display:block;width:100%;height:auto}#wind-strokes{animation:wind 4s ease-in-out infinite}#hold-ring{stroke-dasharray:94.25;stroke-dashoffset:94.25;transform:rotate(-90deg);transform-origin:0 0}#hold-dot{animation:hold-pulse 2s ease-in-out infinite}#wing-dialog.full #hold-cue{opacity:0;transition:opacity .6s}#photo-dialog{padding:0;overflow:hidden;background:white;border:7px solid white;line-height:0;max-height:90svh}#photo-dialog img{display:block;width:auto;max-height:calc(90svh - 14px);max-width:calc(90vw - 14px);height:auto}#photo-dialog .close{background:#ffffffd9;border-radius:50%;top:5px;right:5px;line-height:1}#letter-dialog{width:550px;padding:52px 45px;min-height:260px;text-align:left}.letter-mark{display:block;width:29px;height:29px;margin:0 auto 30px;fill:var(--gold)}#letter-content{font:17px/1.9 Georgia,serif;color:#384c55}#letter-content .letter-placeholder{color:#8c9294;font:italic 16px/1.8 Georgia,serif;text-align:center}.confetti{position:fixed;pointer-events:none;width:3px;height:3px;border-radius:50%;background:#b89b64;z-index:30;animation:fleck 1s ease-out forwards}[hidden]{display:none!important}@keyframes phone-pulse{50%{opacity:.5}}@keyframes beacon{50%{opacity:.35}}@keyframes moon-pass{0%{opacity:0;transform:translateY(6px)}35%,65%{opacity:1;transform:translateY(0)}100%{opacity:.2;transform:translateY(-6px)}}@keyframes little-turn{35%{transform:translateY(-3px) rotate(-5deg)}70%{transform:rotate(3deg)}}@keyframes bubble{to{transform:translateY(-10px);opacity:.1}}@keyframes clink-left{50%{transform:translateX(3px) rotate(8deg)}}@keyframes clink-right{50%{transform:translateX(-3px) rotate(-8deg)}}@keyframes wheel{to{transform:rotate(180deg)}}@keyframes steam{to{transform:translateY(-5px);opacity:.3}}@keyframes star-breathe{50%{filter:brightness(1.15);transform:scale(1.04)}}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes wind{50%{opacity:.25;transform:translateX(12px)}}@keyframes hold-pulse{50%{r:6;opacity:.5}}@keyframes fleck{to{transform:translate(var(--x),var(--y));opacity:0}}@media(max-width:700px){#board{width:min(100vw,calc(100svh * .57142857));aspect-ratio:4/7}.photo{padding:3px}.photo-paraglider{left:6%;top:28.5%;width:17%}.photo-brasserie{right:6%;top:56.3%;width:17%}.photo-paris{left:6%;top:76.1%;width:17%}#restart{right:15px;top:15px;width:29px;height:29px;font-size:18px}.stop .place{font-size:14px;letter-spacing:.1px}#letter-dialog{padding:45px 26px}#star{width:49px;height:49px}#wing-dialog{width:96vw}dialog{max-height:calc(100svh - 25px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* A quiet first page, before the fixed photo journey. */
#welcome{position:fixed;inset:0;z-index:40;background:#fff;overflow-y:auto;overscroll-behavior:contain;display:flex;padding:55px 28px;min-height:100%;align-items:safe center;justify-content:center}
.welcome-inner{width:min(100%,650px);margin:auto}
.welcome-copy{text-align:center;font:17px/1.8 Georgia,'Times New Roman',serif;color:#344a54;text-wrap:pretty}
.welcome-copy p{margin:0 0 20px}
#welcome-greeting{font-size:27px;font-style:italic;line-height:1.35;margin-bottom:27px}
.welcome-copy .welcome-aside{font-size:15px;font-style:italic;color:#7b8589;margin-top:29px;margin-bottom:0}
.welcome-actions{display:flex;align-items:center;justify-content:center;gap:17px;min-height:54px;margin-top:32px}
#welcome-start,#flemme{min-height:46px;padding:13px 22px;border-radius:26px;line-height:18px;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.1px;white-space:nowrap}
#welcome-start{background:#2c4653;color:#fff;border:1px solid #2c4653;position:relative;z-index:42;transition:background .2s,box-shadow .2s}
#welcome-start span{margin-left:17px;font-size:16px}
#welcome-start:hover{background:#3f5c69;box-shadow:0 5px 16px #2c465316}
.flemme-slot{display:inline-flex;align-items:center;justify-content:center;width:95px;min-height:46px}
#flemme{background:#fff;border:1px solid #e0e2e1;color:#8b9396;z-index:43;user-select:none;touch-action:none;transition:border-color .15s,box-shadow .15s}
#flemme.escaping{position:fixed;box-shadow:0 3px 12px #2c46530a;margin:0}
@media(max-width:600px){#welcome{padding:35px 24px}.welcome-copy{font-size:15px;line-height:1.75}.welcome-copy p{margin-bottom:17px}#welcome-greeting{font-size:25px;margin-bottom:24px}.welcome-copy .welcome-aside{font-size:14px;margin-top:23px}.welcome-actions{margin-top:26px;gap:13px}#welcome-start,#flemme{padding:12px 18px}}
@media(max-height:650px) and (min-width:601px){#welcome{padding:30px}.welcome-inner{width:min(100%,720px)}.welcome-copy{font-size:15px;line-height:1.65}.welcome-copy p{margin-bottom:14px}#welcome-greeting{font-size:24px;margin-bottom:18px}.welcome-copy .welcome-aside{margin-top:18px}.welcome-actions{margin-top:22px}}

/* Full letter: generous lines, independent scrolling, close button in reach. */
#letter-dialog{width:min(740px,calc(100vw - 32px));max-height:calc(100svh - 48px);padding:55px 58px 44px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#letter-dialog>.close{position:sticky;top:0;right:auto;float:right;margin:-27px -30px 0 0;background:#ffffffed;border-radius:50%}
#letter-content p{margin:0 0 24px}
#letter-content p:last-child{margin-bottom:0}
@media(max-width:600px){#letter-dialog{width:calc(100vw - 24px);max-height:calc(100svh - 24px);padding:44px 25px 35px}#letter-dialog>.close{margin:-23px -12px 0 0}#letter-content{font-size:16px;line-height:1.85}#letter-content p{margin-bottom:23px}}