/* 1.1: a single-screen Christmas mini-app, with the photograph as the hero. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#atelier{height:100dvh;min-height:0;background:radial-gradient(ellipse at 50% 38%,#294c38 0,#112b21 54%,#091e18 100%)}
.grain{opacity:.012}
.header{height:110px;padding:18px 38px;z-index:5;align-items:center}
.brand{gap:9px}.brand img{height:76px;width:76px}.brand>span{font-size:29px;line-height:.91}
.header-actions{gap:12px}.header-actions .icon-button{width:48px;height:48px;background:#0d261c60;backdrop-filter:blur(12px);border-color:#d6b9823a}
.music-toggle[data-playing=true]{color:#f4d59d;background:#98743824}.music-toggle[data-playing=true]:after{content:'';position:absolute;margin-top:35px;width:3px;height:3px;background:#f4d59d;border-radius:50%}
.intro{top:36px;z-index:5;width:auto;left:50%;transform:translateX(-50%);padding:0}.filters{margin:0;background:#112c21b3;backdrop-filter:blur(12px);border-color:#d6b9823a;padding:3px}.filters button{height:44px;min-width:100px;font-size:12px}
#gallery-interaction{inset:139px 0 194px;touch-action:none;user-select:none;-webkit-user-select:none;z-index:2}.fallback{overflow:visible}.fallback-card{max-width:82%;object-fit:cover;border-color:#cab58e70;border-radius:10px;transition:none;box-shadow:0 24px 70px #0005;user-select:none;-webkit-user-drag:none}
.gallery-arrow{top:50%;width:48px;height:48px;background:#122f24b3;backdrop-filter:blur(15px);border-color:#d6b98255}.prev{left:max(24px,calc(50% - 350px))}.next{right:max(24px,calc(50% - 350px))}
.inspect{height:44px;width:44px;padding:0;bottom:20px;left:50%;margin-left:120px;opacity:1;transform:translateX(-50%);border-radius:50%;background:#173628c2;border-color:#f5edd562;box-shadow:0 2px 16px #0002}.inspect svg{width:19px;height:19px}
.gallery-hint{bottom:178px;transform:translateX(-50%);font-size:10px;gap:8px;color:#b6c5b8;transition:opacity .7s}.gallery-hint svg{width:17px;height:17px;color:var(--gold)}.has-interacted .gallery-hint{opacity:0}
.selection{bottom:70px;padding:0 24px;z-index:5}.selection h2{font-size:42px;line-height:1.07;margin:0 0 12px}.selection .cta{margin:0;min-height:52px;font-size:13px;min-width:300px;padding:0 20px;box-shadow:0 6px 28px #0002;border-radius:7px}.selection .cta-arrow{margin-left:32px}.selection .cta>svg:first-child{margin-right:14px}
.footer{height:62px;padding:0 34px 6px;z-index:5;bottom:env(safe-area-inset-bottom,0px);width:min(100%,560px);left:50%;transform:translateX(-50%)}.counter{font-size:10px;gap:12px}.counter-line{width:46px}.counter .small{margin-left:4px}.footer>.small{width:44px;height:44px;color:#c9c6af}.footer .about-button{margin-left:auto}.footer .small svg{width:20px;height:20px}.counter .small svg{width:14px;height:14px}#effects[aria-pressed=false]{opacity:.45}
#winter-decor svg{stroke:none;stroke-width:0;fill:none}
#winter-decor{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}.winter-top{position:absolute;left:50%;top:-28px;transform:translateX(-50%);width:100%;height:245px;filter:drop-shadow(0 8px 9px #0004);overflow:visible}.winter-bottom{position:absolute;bottom:-20px;width:100%;height:185px;left:0;opacity:.9;filter:drop-shadow(0 -5px 9px #0003)}
.fairy-light{animation:warm-light 4.8s ease-in-out infinite;animation-delay:var(--delay);transform-origin:center}.ornament{transform-box:fill-box;transform-origin:50% 0;animation:ornament-sway 8s ease-in-out infinite;animation-delay:var(--delay)}@keyframes warm-light{0%,100%{opacity:.6}50%{opacity:1}}@keyframes ornament-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
#snow{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:1}.effects-paused .fairy-light,.effects-paused .ornament{animation-play-state:paused}.effects-paused #snow{opacity:0}
.audio-status{position:absolute;left:50%;top:105px;transform:translateX(-50%);z-index:7;max-width:90%;font-size:11px;background:#173c2f;padding:10px 15px;border:1px solid var(--line);border-radius:6px;text-align:center}.audio-status:empty{display:none}
.splash{background:radial-gradient(ellipse at 50% 37%,#2a4a35,#10291f 60%);z-index:20}.splash:before,.splash:after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,#d5ae5d25,transparent 65%);pointer-events:none}.splash:before{top:-70px;left:-60px}.splash:after{bottom:-90px;right:-40px}.splash img{width:250px;height:250px}.splash h2{font-size:46px;margin-top:15px}.splash-sub{font-size:23px;margin-top:9px}.splash-enter{background:var(--paper);border:1px solid #f0dbaf;color:var(--ink);font-weight:600;border-radius:6px;padding:0 25px;min-height:52px;margin-top:30px;gap:36px}.sound-invitation{display:flex;align-items:center;gap:7px;color:var(--gold);font-size:10px;margin-top:13px}.sound-invitation svg{width:14px;height:14px}.silent-enter{min-height:48px;font-size:11px;color:var(--muted);margin-top:5px;text-decoration:underline;text-underline-offset:4px}.splash-bottom{font-size:8px;letter-spacing:2px;bottom:max(24px,env(safe-area-inset-bottom,0px))}.splash-orbit{width:600px;height:600px}
.modal{overscroll-behavior:contain;touch-action:pan-y}.version-switch{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;border-top:1px solid #b89c6f70;margin-top:30px;padding-top:22px;font-size:11px;color:#706a59}.version-switch a{text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
@media(min-width:1100px){.winter-top{height:220px;top:-55px}.winter-bottom{height:200px;bottom:-55px}.header{padding:23px 42px}.selection h2{font-size:44px}.selection{bottom:75px}#gallery-interaction{top:136px;bottom:211px}.gallery-hint{bottom:190px}}
@media(max-width:1000px){
 .header{height:106px;top:env(safe-area-inset-top,0px);padding:18px 18px 10px}.brand img{height:72px;width:72px}.brand>span{font-size:26px;line-height:.93;letter-spacing:-.4px}.brand{gap:5px}.header-actions{gap:7px}.header-actions .icon-button{width:44px;height:44px}.header-actions svg{width:20px;height:20px}
 .intro{top:calc(111px + env(safe-area-inset-top,0px));left:50%;width:auto;padding:0;transform:translateX(-50%)}.filters{padding:3px}.filters button{height:40px;min-width:90px;font-size:11px;padding:0 12px}
 #gallery-interaction{top:calc(177px + env(safe-area-inset-top,0px));bottom:calc(185px + env(safe-area-inset-bottom,0px))}.prev{left:12px}.next{right:12px}.gallery-arrow{width:44px;height:44px;background:#102c21b5}.gallery-arrow svg{width:18px;height:18px}
 .inspect{bottom:12px;margin-left:0;left:50%;height:38px;width:38px;background:#1a382ab5}.inspect svg{width:17px;height:17px}
 .gallery-hint{bottom:calc(165px + env(safe-area-inset-bottom,0px));font-size:9px;gap:6px}.gallery-hint svg{width:14px;height:14px}
 .selection{bottom:calc(57px + env(safe-area-inset-bottom,0px));padding:0 25px}.selection h2{font-size:35px;line-height:1.1;margin:0 0 13px}.selection .cta{width:100%;max-width:360px;min-width:0;margin:0;min-height:50px;font-size:13px;padding:0 18px}.selection .cta>svg:first-child{margin-right:auto;width:21px;height:21px}.selection .cta-arrow{margin-left:auto}
 .footer{height:53px;width:100%;padding:0 22px}.counter{position:absolute;left:50%;transform:translateX(-50%);gap:8px;font-size:10px}.counter-line{width:34px}.footer .small{width:44px;height:44px}.footer .small svg{width:19px;height:19px}.counter .small svg{width:13px;height:13px}
 .winter-top{top:-35px;height:190px;width:100%}.winter-bottom{height:140px;bottom:-26px}.audio-status{top:158px;width:max-content;max-width:85%;font-size:10px}
 .splash img{width:224px;height:224px}.splash h2{font-size:40px}.splash-sub{font-size:21px}.splash-orbit{width:430px;height:430px}.splash-enter{font-size:12px}
}
@media(max-width:370px){.brand>span{font-size:23px}.brand img{width:60px;height:60px}.header{padding-inline:13px}.header-actions{gap:4px}.selection h2{font-size:32px}.filters button{min-width:85px}}
@media(max-width:700px) and (max-height:700px){.header{height:86px;padding-top:9px}.brand img{width:62px;height:62px}.brand>span{font-size:24px}.intro{top:calc(90px + env(safe-area-inset-top,0px))}.filters button{height:36px}.winter-top{height:145px;top:-36px}#gallery-interaction{top:calc(146px + env(safe-area-inset-top,0px));bottom:calc(163px + env(safe-area-inset-bottom,0px))}.gallery-hint{bottom:calc(145px + env(safe-area-inset-bottom,0px));font-size:8px}.selection{bottom:calc(52px + env(safe-area-inset-bottom,0px))}.selection h2{font-size:31px;margin-bottom:10px}.selection .cta{min-height:48px;font-size:12px}.footer{height:49px}.splash img{width:182px;height:182px}.splash h2{font-size:35px}.splash-sub{font-size:20px}.splash-enter{margin-top:20px}.splash-bottom{bottom:16px}.winter-bottom{height:110px;bottom:-28px}}
@media(max-height:540px) and (min-width:701px){.header{height:85px;padding:10px 25px}.brand img{height:60px;width:60px}.brand>span{font-size:24px}.intro{top:22px;left:50%;width:auto;text-align:center}.filters{margin:0}.filters button{min-width:80px;height:40px}#gallery-interaction{top:102px;left:0;bottom:146px}.selection{left:0;width:100%;bottom:48px;text-align:center;padding:0}.selection h2{font-size:28px;margin-bottom:8px}.selection .cta{min-height:42px;font-size:11px}.gallery-hint{display:none}.footer{height:43px}.counter{right:auto;left:50%;transform:translateX(-50%)}.winter-top{height:160px;top:-60px}.winter-bottom{height:100px;bottom:-30px}}
@media(prefers-reduced-motion:reduce){.fairy-light,.ornament{animation:none!important}#snow{display:none}.splash img{animation:none}.gallery-hint{transition:none}}

.gallery-hint span{font-size:inherit;color:inherit}
.inspect{bottom:calc((100% - var(--photo-height, 90%))/2 + 12px)}
@media(min-width:1001px){.winter-top{max-width:1200px;height:180px;top:-25px}.winter-bottom{width:min(100%,1200px);left:50%;transform:translateX(-50%);height:160px;bottom:-35px}}
@media(max-width:1000px){.winter-top{top:-14px;height:180px}.winter-bottom{bottom:-18px;height:140px}}
@media(max-width:700px) and (max-height:700px){.winter-top{top:-25px;height:145px}.winter-bottom{bottom:-20px;height:110px}}

/* About dialog: legal details of the business. */
.impressum{margin-top:26px;padding-top:18px;border-top:1px solid #b89c6f70;font-size:11px;line-height:1.65;color:#706a59}.impressum .eyebrow{font-size:8px;margin-bottom:6px}

/* Desktop shell. A large, mouse-driven window shows the app in a tablet frame on a festive backdrop
   (built by src/shell.js). Keep this media query identical to SHELL_QUERY in src/shell.js. The
   frame's own viewport is at most 1080px wide, so the framed document never matches it. Until the
   script runs, the unframed app stays hidden so it does not flash at full window size. */
@media(min-width:1120px) and (min-height:860px) and (hover:hover) and (pointer:fine){
  html:not(.no-shell){background:#1d080c}
  html:not(.no-shell) body>*:not(#device):not(noscript){display:none!important}
}
#device{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#6c2029 0,#451219 46%,#1d080c 100%)}
#device:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,#0a020466 100%)}
.backdrop-lights{position:absolute;inset:0;pointer-events:none}
.backdrop-lights i{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffd98c 0,#f1b95a 55%,#f1b95a00 72%);opacity:var(--glow);filter:blur(3px);animation:backdrop-twinkle 6.5s ease-in-out infinite;animation-delay:var(--delay)}
.backdrop-lights i.ruby{background:radial-gradient(circle,#ff9c8a 0,#d2553f 55%,#d2553f00 72%)}
@keyframes backdrop-twinkle{0%,100%{opacity:calc(var(--glow)*.55)}50%{opacity:var(--glow)}}
.backdrop-snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#device.effects-paused .backdrop-lights i{animation-play-state:paused}#device.effects-paused .backdrop-snow{opacity:0}
.tablet{--w:min(1080px,calc(100vw - 100px),calc((100vh - 100px)*4/3));position:relative;z-index:2;width:calc(var(--w) + 36px);height:calc(var(--w)*.75 + 36px);padding:18px;border-radius:46px;background:linear-gradient(145deg,#343438 0,#101012 28%,#060607 70%,#232326 100%);box-shadow:inset 0 0 0 1.5px #5b5b61,inset 0 0 0 3px #0b0b0c,0 0 0 1px #000,0 60px 120px #0009,0 22px 44px #0008}
.tablet iframe{display:block;width:100%;height:100%;border:0;border-radius:28px;background:#0e271e}
.tablet-camera{position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#16202c;box-shadow:0 0 0 1px #2d2d31}
@media(prefers-reduced-motion:reduce){.backdrop-lights i{animation:none!important}.backdrop-snow{display:none}}

/* Phone on its side, and any very short window: the photograph stands on the left; the name, the
   button and the counter stand on the right. Every value that an earlier block sets is set again. */
@media(max-height:540px) and (orientation:landscape){
  .header{height:60px;top:env(safe-area-inset-top,0px);padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
  .brand{gap:6px}.brand img{width:44px;height:44px}.brand>span{font-size:19px;line-height:.93}
  .header-actions{gap:6px}.header-actions .icon-button{width:40px;height:40px}.header-actions svg{width:18px;height:18px}
  .intro{top:calc(11px + env(safe-area-inset-top,0px));left:50%;width:auto;padding:0;transform:translateX(-50%);text-align:center}
  .filters{margin:0;padding:2px}.filters button{height:34px;min-width:74px;font-size:11px;padding:0 10px}
  #gallery-interaction{top:calc(62px + env(safe-area-inset-top,0px));bottom:10px;left:env(safe-area-inset-left,0px);right:40%}
  .prev{left:8px}.next{right:8px}.gallery-arrow{width:40px;height:40px;z-index:61}
  .gallery-hint{display:none}
  /* A full-height veil right of the photograph hides the neighbours behind the name and the button. */
  #gallery-interaction:after{content:'';position:absolute;z-index:60;left:calc(100% - 34px);top:-200px;bottom:-200px;width:100vw;pointer-events:none;background:linear-gradient(90deg,transparent 0,#0f281fd9 70px,#0f281f 150px)}
  .selection{top:calc(62px + env(safe-area-inset-top,0px));bottom:48px;left:60%;right:env(safe-area-inset-right,0px);width:auto;padding:0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .selection h2{font-size:28px;line-height:1.1;margin:0 0 12px}
  .selection .cta{width:100%;max-width:280px;min-width:0;min-height:44px;font-size:12px;padding:0 16px}
  .footer{left:60%;right:env(safe-area-inset-right,0px);width:auto;transform:none;height:46px;padding:0 14px;bottom:env(safe-area-inset-bottom,0px)}
  .counter{position:absolute;left:50%;right:auto;transform:translateX(-50%)}
  .winter-top{height:120px;top:-34px}.winter-bottom{display:none}
  .audio-status{top:calc(66px + env(safe-area-inset-top,0px))}
  .splash img{width:104px;height:104px}.splash h2{font-size:30px;margin-top:6px}.splash-sub{font-size:17px;margin-top:2px}.splash-enter{margin-top:12px;min-height:44px}.sound-invitation{margin-top:8px}.silent-enter{min-height:40px;margin-top:0}.splash-bottom{display:none}.splash-orbit{width:340px;height:340px}
  .detail-image{min-height:0}.detail-image>img{max-height:92svh}.detail-copy{padding:26px 28px;gap:12px}.detail-copy h2{font-size:34px}
}

/* Garland lights follow the music: the glow of each bulb swells with its tone group. The script
   sets --tone-low, --tone-mid and --tone-high on #winter-decor while the music plays. */
.fairy-light .glow{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + var(--tone,0)*.85))}
.tone-0{--tone:var(--tone-low,0)}.tone-1{--tone:var(--tone-mid,0)}.tone-2{--tone:var(--tone-high,0)}