:root{color-scheme:dark;--cream:#f2e4c8;--muted:#f2e4c8;--olive:#20251b}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--olive);color:var(--cream)}
body{font-family:Georgia,'Times New Roman',serif;background:radial-gradient(ellipse at 50% 35%,#3c412b 0,#20251b 58%,#181e17 100%);min-height:100svh}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
.invitation{width:100%;min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:16px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.stage{position:relative;isolation:isolate;width:min(100%,calc((100svh - 84px)*.5625));aspect-ratio:9/16;background:#252b1b;overflow:hidden;box-shadow:0 24px 80px #0006;flex:none}
/* A two-pixel overscan hides the export's thin edge and fractional-pixel seams. */
video,.end-frame{display:block;position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:fill}
.end-frame{z-index:1}
.monogram{position:absolute;left:43.57%;top:3.16%;width:13.06%;height:auto;z-index:2;pointer-events:none}
.intro{position:absolute;inset:0;z-index:3;pointer-events:none;--curtain-left:0%;--curtain-right:0%;--curtain-opacity:1;--curtain-feather:0%;--title-save:0;--title-the:0;--title-date:0}
.curtain{position:absolute;inset:-2px;opacity:var(--curtain-opacity);will-change:transform,opacity;backface-visibility:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.curtain img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;user-select:none}
.curtain-title-save{clip-path:inset(27% 0 56%);opacity:var(--title-save)}
.curtain-title-the{clip-path:inset(44% 0 42%);opacity:var(--title-the)}
.curtain-title-date{clip-path:inset(58% 0 25%);opacity:var(--title-date)}
/* Keep the preview's subtle green shade on the artwork after the play button fades. */
.curtain::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 62%,#15200b50 100%)}
.curtain-left{transform:translate3d(var(--curtain-left),0,0);-webkit-mask-image:linear-gradient(to right,#000 calc(50.2% - var(--curtain-feather)),transparent 50.2%);mask-image:linear-gradient(to right,#000 calc(50.2% - var(--curtain-feather)),transparent 50.2%)}
.curtain-right{transform:translate3d(var(--curtain-right),0,0);-webkit-mask-image:linear-gradient(to left,#000 calc(50.2% - var(--curtain-feather)),transparent 50.2%);mask-image:linear-gradient(to left,#000 calc(50.2% - var(--curtain-feather)),transparent 50.2%)}
.opening{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:9%;z-index:5}
.open-button{position:relative;display:flex;align-items:center;justify-content:center;width:66.6667%;aspect-ratio:4;min-height:44px;padding:0;background:transparent;border:0;font-style:italic}
.open-button::before{content:'';position:absolute;inset:3% 1%;background:#20271cd9;box-shadow:0 5px 24px #0003}
.open-button:hover::before{background:#303922e8}
.button-frame{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.open-label{position:relative;display:block;width:42%;height:auto;pointer-events:none}
.details-frame,.details-hotspot{position:absolute;left:20.37037%;top:56.42448%;width:59.25926%;height:8.33333%}
.details-frame{z-index:2;pointer-events:none}
.details-hotspot{min-height:44px;z-index:6;border:1px solid transparent;background:transparent;border-radius:1px}
.details-hotspot:hover{background:#fff2;box-shadow:0 0 18px #f2eddc33}
.details-hotspot:focus-visible{outline-offset:3px;background:#fff2}
.controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 20px;min-height:52px;width:min(100%,540px);font-family:system-ui,sans-serif;color:var(--muted);font-size:12px;letter-spacing:.02em}
.controls button{border:0;background:none;min-height:44px;padding:10px 2px}
.controls button:hover{color:#fff}
.playback-controls{display:flex;align-items:center;gap:8px}
.playback-controls>span{opacity:.4}
.skip{white-space:nowrap}
.skip span{display:inline-block;margin-left:5px}
.status{position:absolute;z-index:7;left:6%;right:6%;top:4%;background:#1c241bed;padding:12px 16px;border:1px solid #f1edda55;font:14px/1.5 system-ui,sans-serif;text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
noscript{max-width:450px;text-align:center}
a{color:inherit}
@media(max-width:500px){.invitation{padding-top:max(8px,env(safe-area-inset-top));padding-left:0;padding-right:0}.stage{width:min(100%,calc((100svh - 72px)*.5625));box-shadow:none}.controls{gap:0 14px;font-size:11px}.playback-controls{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}