/* The approved tree is a scene on the invitation's white background. */
#wedding-gift .wedding-tree {width:100%;max-width:720px;position:relative;flex:none;}
.wedding-tree .tree-stage {height:560px;position:relative;overflow:hidden;}
.wedding-tree .tree-control {display:block;position:relative;width:100%;height:100%;border:0;padding:0;background:#fff;cursor:pointer;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;}
.wedding-tree .tree-control:focus {outline:none;}
.wedding-tree .tree-control:focus-visible {outline:1px solid #355640;outline-offset:-4px;}
.wedding-tree canvas,.wedding-tree .tree-poster {position:absolute;inset:0;width:100%;height:720px;display:block;pointer-events:none;}
.wedding-tree canvas {transform:translateY(calc(var(--tree-rest-shift,0px) + (var(--tree-qr-shift,0px) - var(--tree-rest-shift,0px)) * var(--tree-progress,0)));}
.wedding-tree .tree-poster {object-fit:contain;transform:translateY(var(--tree-poster-shift,0px));}
.wedding-tree [data-renderer="webgpu"] .tree-poster {visibility:hidden;}
.wedding-tree .qr-image {position:absolute;left:50%;top:var(--tree-center,50%);transform:translate(-50%,-50%);width:min(82%,400px);height:auto;display:block;visibility:hidden;pointer-events:none;image-rendering:pixelated;}
.wedding-tree [data-state="qr"][data-renderer="poster"] .qr-image {visibility:visible;}
.wedding-tree [data-renderer="poster"] canvas,.wedding-tree [data-state="qr"] .tree-poster {visibility:hidden;}
.wedding-tree .tree-status {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
@media(max-width:809px){
  .wedding-tree .tree-stage {height:clamp(320px,calc(100vw - 30px),560px);}
  .wedding-tree canvas,.wedding-tree .tree-poster {height:clamp(420px,calc(100vw + 80px),720px);}
}