@font-face {
  font-family: Manrope;
  src: url('/assets/fonts/manrope-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
:root { color-scheme: dark; background: #0c1d37; font-family: Manrope, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; }
#world { position: relative; width: min(100vw, 177.77778vh); width: min(100vw, 177.77778dvh); aspect-ratio: 16/9; overflow: hidden; container-type: inline-size; }
.scene-frame, #scene, #garland, #ornaments { position: absolute; inset: 0; }
#scene { container-type: size; background: #173061 url('/tree/art/winter-square.webp') center / 100% 100% no-repeat; }
#scene button { position: absolute; inset: 0; width: 100%; height: 100%; appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* The outline follows the photographed branches, star and trunk in winter-square.webp. */
#tree-party { clip-path: polygon(37.5% 1.56%, 38.25% 6.44%, 40.25% 8%, 38.88% 9.78%, 41% 10.89%, 39.63% 12.67%, 43.13% 12.22%, 40.75% 15.33%, 44.75% 17.11%, 42.88% 19.56%, 47.38% 20.89%, 45.63% 24.89%, 43.88% 26.22%, 48.25% 27.78%, 46.13% 30%, 50.75% 29.33%, 49.13% 33.56%, 46.88% 34.89%, 51.88% 36.22%, 50.25% 38.67%, 54.5% 40.22%, 52.88% 44.67%, 56.88% 46.44%, 54.88% 52.22%, 51.88% 54.22%, 57.25% 54.44%, 56.13% 57.78%, 59.88% 58.22%, 58% 62.22%, 55.25% 64.89%, 59% 66.89%, 57.75% 69.33%, 61% 70.44%, 59.13% 75.11%, 56.5% 76.22%, 61.13% 78%, 59.38% 82%, 61.38% 84%, 60.13% 89.56%, 54.88% 90%, 49.63% 89.11%, 47.63% 90.67%, 43.13% 89.33%, 38.75% 88.44%, 39.25% 90.89%, 41% 92.89%, 37.88% 92%, 36.75% 93.33%, 35% 92.44%, 32.88% 93.11%, 34.38% 89.78%, 34.75% 88.22%, 31.5% 89.56%, 26.5% 90%, 23.63% 89.11%, 20.25% 90.22%, 16.5% 88.89%, 14.25% 88.89%, 15.38% 86.67%, 11.88% 85.11%, 15.75% 82.22%, 13.63% 81.56%, 11.75% 82.67%, 13.13% 78.44%, 11.25% 76.67%, 12.25% 74%, 18% 70.89%, 14.25% 70.89%, 17.75% 68%, 14.38% 68.44%, 16.75% 65.33%, 14.13% 63.56%, 15.88% 62.22%, 13.38% 61.33%, 20.38% 56.44%, 18.13% 55.33%, 16.75% 52.44%, 21.25% 50.67%, 18.25% 48%, 18.38% 46.22%, 16.63% 44.22%, 22.5% 43.11%, 20.25% 41.11%, 24.75% 39.78%, 22% 38.22%, 22.5% 36.67%, 20.88% 33.33%, 26.88% 33.11%, 26.13% 31.11%, 24.25% 26.67%, 28.88% 25.56%, 28% 23.78%, 27.13% 20.44%, 29% 20.67%, 32% 20.67%, 30.38% 15.78%, 32.88% 15.33%, 32% 12.44%, 35.25% 13.56%, 34.13% 9.56%, 36.25% 10.89%, 35.38% 7.78%, 36.88% 8.22%, 36.38% 5.33%, 37.25% 5.78%); }
#scene button:focus-visible { outline: none; background: #b1deff26; }
#garland, #ornaments, #top-star, #celebration { pointer-events: none; }
#celebration { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; }
.invitation { z-index: 5; pointer-events: none; }
#invitation-link { pointer-events: auto; }
.gesture-hint { font-size: clamp(11px,.91cqw,16px); line-height: 1.45; text-shadow: 0 1px 4px #0b2443; }
#fullscreen, #connection { z-index: 6; }
.invitation { position: absolute; width: 30%; right: 4.3%; top: 10.8%; color: #fff4d9; text-align: center; }
.brand { font-size: .91cqw; letter-spacing: .25em; font-weight: 720; text-transform: uppercase; }
h1 { margin: 1.2cqw 0 1.65cqw; font: normal 4.28cqw/.86 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; text-shadow: 0 .09em .35em #08244866; }
h1 i { display: inline-block; margin-top: .05em; font-weight: 400; }
#invitation-link { display: inline-flex; flex-direction: column; align-items: center; padding: .6cqw .72cqw .8cqw; background: #fff9e9; color: #18344b; text-decoration: none; border-radius: .78cqw; box-shadow: 0 .35cqw 1.7cqw #0d23433d; }
#invitation-link:focus-visible, button:focus-visible { outline: 3px solid #e8b954; outline-offset: 5px; }
#qr { width: 10.2cqw; aspect-ratio: 1; background: white; padding: 0; }
#qr svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }
#invitation-link p { margin: .82cqw 0 0; font-size: 1.06cqw; line-height: 1.32; font-weight: 640; }
#fullscreen, #connection { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); color: white; background: #102848ed; border-radius: 2em; font: 600 14px/1.5 Manrope, Arial, sans-serif; }
#fullscreen { left: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid #ffffff65; cursor: pointer; }
#fullscreen[hidden], #connection[hidden] { display: none; }
.expand-icon { display: inline-block; width: 16px; height: 16px; background: linear-gradient(white,white) left top/6px 2px, linear-gradient(white,white) left top/2px 6px, linear-gradient(white,white) right top/6px 2px, linear-gradient(white,white) right top/2px 6px, linear-gradient(white,white) left bottom/6px 2px, linear-gradient(white,white) left bottom/2px 6px, linear-gradient(white,white) right bottom/6px 2px, linear-gradient(white,white) right bottom/2px 6px; background-repeat: no-repeat; }
#connection { left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 15px; text-align: center; }
.ornament { position: absolute; width: 0; height: 0; z-index: 1; }
.ornament.arriving { z-index: 3; }
.drawing[role=button] { pointer-events:auto; cursor:zoom-in; touch-action:manipulation; }
.drawing[role=button]:focus-visible { outline:2px solid #ffe591; outline-offset:2px; }
.hanger { position: absolute; top: 0; left: -2.42cqw; width: 4.84cqw; scale: 1.25; transform-origin: center top; text-align: center; }
.drawing { display: block; width: auto; height: auto; max-width: 100%; max-height: 7.35cqh; margin: auto; filter: drop-shadow(0 .06cqw .045cqw #fffbea) drop-shadow(0 .10cqw .12cqw #102009aa); }
.thread { display: block; width: max(1px,.064cqw); height: 1.3cqh; margin: auto; background: #ffecb4; box-shadow: 0 0 .07cqw #614021; }
.lamp { position: absolute; width: 2.55cqw; height: 2.55cqw; transform: translate(-50%,-50%); opacity: 0; border-radius: 50%; background: radial-gradient(circle, white 0 6%, rgb(var(--lamp,255 190 88)) 13%, rgb(var(--lamp,255 190 88) / .88) 21%, rgb(var(--lamp,255 190 88) / .30) 47%, transparent 73%); }
#top-star { position: absolute; width: 2.4cqw; height: 2.4cqw; transform: translate(-50%,-50%); opacity: 0; filter: drop-shadow(0 0 .34cqw #ffe591) drop-shadow(0 0 .74cqw #ffca64); }
#top-star::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,#fffbe0,#ffc96c 75%,#fff4bd); clip-path: polygon(50% 0,61% 34%,98% 36%,68% 58%,80% 96%,50% 73%,20% 96%,32% 58%,2% 36%,39% 34%); }
#top-star[style*="--star-color"] { filter: drop-shadow(0 0 .34cqw rgb(var(--star-color))) drop-shadow(0 0 .74cqw rgb(var(--star-color))); }
#top-star[style*="--star-color"]::after { background: rgb(var(--star-color)); }
#grand-salute { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; }
@media (max-aspect-ratio: 4/5) {
  body { display: block; }
  #world { width: 100%; aspect-ratio: auto; overflow: visible; }
  .scene-frame { position: relative; height: auto; aspect-ratio: 32/27; overflow: hidden; }
  #scene { width: 150%; height: auto; aspect-ratio: 16/9; left: -4%; top: 0; bottom: auto; }
  .invitation { position: relative; inset: auto; width: auto; padding: 22px 16px 65px; }
  .brand { font-size: 10px; }
  h1 { margin: 10px auto 18px; font-size: 36px; }
  h1 br { display: none; }
  h1 i { margin-left: .18em; }
  #invitation-link { flex-direction: row; gap: 16px; padding: 10px 18px 10px 10px; border-radius: 12px; }
  #qr { width: 78px; }
  #invitation-link p { font-size: 14px; margin: 0; text-align: left; }
  #connection { bottom: 63px; width: max-content; max-width: 94vw; }
}