:root{color-scheme:dark;font-family:Arial,sans-serif;color:#f8ebdb;background:#171017}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #ffd9a3;outline-offset:5px}#screen{position:relative;height:calc(100svh - 92px);min-height:470px;overflow:hidden;background:#231720;isolation:isolate}.destination{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 45%,#5c3940,transparent 65%),#231720;overflow:hidden}.destination-copy{position:absolute;left:9%;top:24%;z-index:1}.location{font-size:12px;letter-spacing:.14em;color:#d9bfa4}.destination h1{font:clamp(50px,7.5vw,115px)/1.04 Georgia,serif;letter-spacing:-.055em;margin:25px 0}.destination h1 i{color:#e5b58d;font-weight:400}.destination-copy p{font-size:14px;color:#d7c2ba}.signature{display:block;font:italic 30px Georgia,serif;margin-top:32px;color:#e4c49c}.portrait{position:absolute;right:10%;top:12%;height:78%;width:33%;transform:rotate(4deg);padding:12px;background:#ccb19a;box-shadow:0 30px 75px #0b050980}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}.portrait-border{position:absolute;inset:-12px;border:1px solid #eac9a144;transform:rotate(-8deg);pointer-events:none}.final-word{position:absolute;bottom:-.25em;left:4%;font:italic 24vw Georgia,serif;letter-spacing:-.08em;color:#efd1b709;white-space:nowrap}canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%}.scene{position:absolute;inset:0;z-index:3;perspective:1100px;pointer-events:none}.compact-wrap{position:absolute;left:50%;top:56%;width:370px;height:255px;margin-left:-185px;margin-top:-127px;transform-style:preserve-3d}.compact{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(38deg) rotateZ(-15deg)}.base{position:absolute;inset:0;background:linear-gradient(135deg,#efcfa4,#ac7353 40%,#eac39b 74%,#976145);border-radius:24px;box-shadow:0 1px 0 #fae3ba,0 4px 0 #976548,0 8px 0 #dfab7e,0 12px 0 #765137,0 22px 45px #0009;transform-style:preserve-3d;padding:21px 24px 34px}.pan-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:12px;height:100%;padding:7px;background:#2a1823;border-radius:13px;box-shadow:inset 0 2px 8px #100810}.pan{position:relative;border-radius:50%;margin:0 4px;border:3px solid #d2a176;box-shadow:inset 0 4px 7px #0007,0 1px 2px #ffe5c9;overflow:hidden}.pan:after{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 4px,#ffffff0d 5px,transparent 6px 9px);mix-blend-mode:screen}.rose{background:radial-gradient(ellipse at 35% 30%,#ec9eaa,#b34867)}.champagne{background:radial-gradient(ellipse at 35% 30%,#fff1c0,#c39650)}.copper{background:radial-gradient(ellipse at 35% 30%,#e5a06d,#9a4e33)}.peach{background:radial-gradient(ellipse at 35% 30%,#ffd1ad,#d8846a)}.berry{background:radial-gradient(ellipse at 35% 30%,#a9648b,#653454)}.pearl{background:radial-gradient(ellipse at 35% 30%,#fff1d4,#beaaa8)}.base-brand{position:absolute;bottom:10px;left:0;width:100%;text-align:center;font-size:8px;letter-spacing:.18em;color:#38202a}.lid{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d;transform:translateZ(17px)}.lid-front,.lid-back{position:absolute;inset:0;border:2px solid #e7bc90;border-radius:23px;backface-visibility:hidden;overflow:hidden}.lid-front{background:linear-gradient(140deg,#62414d,#2a1926 40%,#34212e 62%,#79565a);box-shadow:inset 0 0 0 4px #5c3943,inset 0 0 30px #0004,0 5px 0 #9c7451;display:grid;align-content:center;justify-items:center;gap:14px}.lid-rim{position:absolute;inset:14px;border:1px solid #c7986577;border-radius:13px}.lid-logo{font:italic 97px/.8 Georgia,serif;letter-spacing:-.07em;color:#edc998;text-shadow:0 1px 0 #6b4933,0 -1px 0 #ffefcf}.lid-label{font-size:9px;letter-spacing:.29em;color:#d9b796;margin-top:15px}.glint{position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 38%,#fff6df50 48%,#fff6df08 58%,transparent 65%);transform:translateX(-90%)}.lid-back{background:linear-gradient(130deg,#f6d4a6,#a96f4c 45%,#e5b68a);transform:rotateX(180deg);padding:15px}.mirror{position:relative;border:4px solid #3b2430;border-radius:12px;height:100%;overflow:hidden;background:linear-gradient(140deg,#eadbe0,#827987 28%,#e6d8cf 48%,#c5afb4 65%,#685864);display:grid;place-items:center;box-shadow:inset 0 0 20px #2d172844}.mirror span{font:italic 65px Georgia,serif;color:#52394365;transform:scaleX(-1)}.mirror-shine{position:absolute;inset:-100%;background:linear-gradient(130deg,transparent 35%,#fff8e99c 46%,transparent 54%);transform:translateX(-15%)}.hinge{position:absolute;left:12%;right:12%;top:-4px;height:10px;background:linear-gradient(#ffdfb3,#755036,#deb184);border-radius:4px;transform:translateZ(10px)}.clasp{position:absolute;left:calc(50% - 22px);top:100%;width:44px;height:12px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#90663f,#f3d2a0,#a37950);transform:translateZ(10px)}.scene-copy{position:absolute;z-index:4;left:8%;top:25%;pointer-events:none;opacity:0}.scene-overline{font-size:13px;letter-spacing:.09em;color:#e7bf99;margin:0 0 19px}.scene-title{font:clamp(40px,5.5vw,83px)/1.06 Georgia,serif;letter-spacing:-.045em;margin:0}.scene-title i{color:#efb598}.brush{position:absolute;width:100px;height:382px;z-index:5;left:0;top:0;transform-origin:50% 8%;pointer-events:none;opacity:0;filter:drop-shadow(13px 15px 9px #1a0b1655)}.brush svg{width:100%;height:100%}.brand-corner{position:absolute;z-index:6;top:30px;left:38px;font:italic 40px Georgia,serif;color:#edc99e}.skip{position:absolute;right:30px;top:32px;z-index:6;background:#23141b33;border:1px solid #f9e0c23b;border-radius:30px;padding:13px 18px;color:#f3deca;font-size:12px;backdrop-filter:blur(8px);min-height:44px}.skip span{margin-left:10px}.player{position:relative;height:92px;background:#140f15;border-top:1px solid #dcb9902b;display:flex;justify-content:space-between;align-items:center;padding:14px 36px 22px;gap:20px}.player-title{display:flex;align-items:center;gap:12px;font-size:13px}.player-title small{display:block;font-size:10px;color:#a6929e;margin-top:6px}.player-dot{width:7px;height:7px;background:#e6ba8c;border-radius:50%;box-shadow:0 0 12px #e6ba8c55}.player-controls{display:flex;gap:12px;align-items:center}.player-controls button{background:transparent;border:1px solid #e6c29940;padding:10px 17px;border-radius:7px;color:#f7e9d7;font-size:12px;min-height:44px}.player-controls button:hover{background:#42303b}#clock{font-size:11px;font-variant-numeric:tabular-nums;color:#c0a9b5;min-width:76px}.timeline{position:absolute;bottom:0;left:0;width:100%;height:15px;display:flex;align-items:end}.timeline input{width:100%;margin:0;accent-color:#e2b382;height:6px;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:650px){#screen{height:calc(100svh - 120px);min-height:450px}.compact-wrap{width:290px;height:205px;margin-left:-145px;margin-top:-103px;top:57%}.base{padding:16px 17px 27px}.pan-grid{gap:8px;padding:5px}.pan{margin:0 2px}.base-brand{font-size:6px;bottom:8px}.lid-logo{font-size:78px}.lid-label{font-size:7px}.scene-copy{left:7%;top:19%}.scene-title{font-size:40px}.scene-overline{font-size:10px}.brand-corner{top:20px;left:22px;font-size:32px}.skip{top:20px;right:18px;font-size:10px;padding:10px 12px}.destination-copy{left:8%;top:12%;z-index:1}.destination h1{font-size:52px;margin:16px 0}.destination-copy p{font-size:11px}.signature{font-size:23px;margin-top:20px}.portrait{width:47%;height:45%;top:auto;bottom:8%;right:9%;padding:7px}.location{font-size:10px}.final-word{font-size:35vw;bottom:.15em}.player{height:120px;flex-wrap:wrap;gap:7px;padding:12px 20px 19px}.player-title{font-size:12px;width:100%}.player-title small{display:inline;margin-left:10px;font-size:9px}.player-controls{width:100%;justify-content:space-between;gap:8px}.player-controls button{min-height:38px;padding:8px 14px}.brush{width:78px;height:298px}.mirror span{font-size:48px}}
#status{position:fixed;top:0;left:0;margin:0}body{overflow-x:hidden}.mirror span{transform:none}@media(max-width:650px){.compact-wrap{top:64%}.scene-copy{top:14%}.scene-title{font-size:34px}}

.timeline{bottom:6px}
#glitter{z-index:4;pointer-events:none}#sound{border-color:#e2b38288;color:#f6cfa4}@media(max-width:650px){.player-controls{gap:5px}.player-controls button{padding:8px;font-size:10px}#clock{font-size:9px;min-width:63px}}

:host{font-family:Arial,sans-serif;color:#f8ebdb;color-scheme:dark;line-height:normal}
#screen{height:100svh;min-height:0;background:transparent}
.player{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);height:auto;padding:10px 14px;background:#20141ddd;border:1px solid #e6c29940;border-radius:15px;backdrop-filter:blur(14px);z-index:7}
.player-title{display:none}.player-controls{width:auto;gap:9px}
.player-controls button{min-height:44px}.skip{min-height:44px}
@media(max-width:650px){#screen{height:100svh;min-height:0}.player{bottom:12px;flex-wrap:nowrap}.player-controls button{padding:8px;font-size:10px}#clock{min-width:64px}.scene-copy{top:15%}.compact-wrap{top:60%}}