:root{--ink: #f3ebd9;--gold: #d8b271;--gold-soft: #e7cfa0;--bg: #0d0a08;--serif: "Cormorant Garamond", Georgia, serif;--sans: "Inter", system-ui, sans-serif;--cjk: "Noto Serif SC", serif;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-soft: cubic-bezier(.16, 1, .3, 1);--press: cubic-bezier(.34, 1.56, .64, 1);--sat: env(safe-area-inset-top);--sar: env(safe-area-inset-right);--sab: env(safe-area-inset-bottom);--sal: env(safe-area-inset-left)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#0d0a08}body{font-family:var(--sans);color:#f3ebd9;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none}#app,canvas{display:block;width:100vw;height:100vh;height:100dvh}canvas{position:fixed;inset:0}#vignette,#filmgrain{position:fixed;inset:0;pointer-events:none}#vignette{z-index:11;background:radial-gradient(125% 105% at 50% 45%,#0000 46%,#0805034d 80%,#0402019e);mix-blend-mode:multiply}#filmgrain{z-index:10;opacity:.045;mix-blend-mode:overlay;background-size:170px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}.overlay{position:fixed;inset:0;z-index:30}.fade{transition:opacity 1.1s ease}.hidden{opacity:0!important;pointer-events:none!important}.gone{display:none!important}#title{z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(120% 90% at 50% 38%,#281e1440,#070504f5 75%),linear-gradient(180deg,#120d09,#060403);padding:8vw}#title .kicker{font-family:var(--cjk);font-weight:500;font-size:clamp(13px,2.6vw,20px);letter-spacing:.48em;color:var(--gold);opacity:0;text-indent:.48em;animation:fadeUp 1.8s var(--ease-soft) .4s forwards}#title .names{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;font-size:clamp(46px,12vw,138px);line-height:1.02;margin:.14em 0 .02em;color:#fbf4e6;text-shadow:0 2px 46px rgba(216,178,113,.2);opacity:0;animation:fadeUp 2.4s var(--ease-soft) 1s forwards}#title .names .amp{color:var(--gold);font-style:italic;font-weight:400;display:inline-block;margin:0 .12em}#title .subtitle{font-family:var(--serif);font-style:italic;font-size:clamp(18px,4vw,34px);color:#e9dcc4;opacity:0;animation:fadeUp 2s var(--ease-soft) 1.9s forwards}#title .dates{font-size:clamp(11px,2.4vw,14px);font-weight:300;letter-spacing:.42em;text-indent:.42em;color:#b9a98c;margin-top:1.3em;opacity:0;animation:fadeUp 1.8s var(--ease-soft) 2.6s forwards}#title .enter{margin-top:clamp(34px,7vw,64px);padding:16px 44px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#f6edda;background:#d8b2710f;border:1px solid rgba(216,178,113,.5);border-radius:2px;cursor:pointer;opacity:0;backdrop-filter:blur(2px);min-height:48px;transition:background .4s var(--ease-out),border-color .4s var(--ease-out),transform .18s var(--press),box-shadow .4s var(--ease-out);animation:fadeUp 1.6s var(--ease-soft) 3.4s forwards}#title .enter:hover{background:#d8b27129;border-color:var(--gold);box-shadow:0 0 36px #d8b27138;transform:translateY(-2px)}#title .enter:active{transform:translateY(0) scale(.98);box-shadow:0 0 24px #d8b2714d}#title .loadnote{margin-top:22px;font-size:11px;font-weight:300;letter-spacing:.2em;color:#7d7059;opacity:0;animation:fadeIn 1s ease 3.6s forwards;min-height:16px}@keyframes fadeUp{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#hud{z-index:20;pointer-events:none}#crosshair{position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:#fff0;border:1.5px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px #00000059,0 0 6px #0006;opacity:.7;transition:transform .2s var(--press),border-color .2s ease,background .2s ease,opacity .2s ease}#crosshair.focus{transform:translate(-50%,-50%) scale(1.9);border-color:var(--gold);background:#d8b2712e;opacity:1}body.touch #crosshair{display:none}#nowLabel{position:absolute;top:calc(15px + var(--sat));left:calc(17px + var(--sal));font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold-soft);opacity:0;transition:opacity .7s var(--ease-out);letter-spacing:.03em;text-shadow:0 1px 10px rgba(0,0,0,.75)}#nowLabel.show{opacity:.82}#roomLabel{position:absolute;top:clamp(22px,6vh,58px);left:0;right:0;text-align:center;opacity:0;transform:translateY(-8px);transition:opacity .8s ease,transform .8s var(--ease-soft)}#roomLabel .day{font-family:var(--sans);letter-spacing:.42em;text-indent:.42em;font-size:10px;color:var(--accent, var(--gold));text-transform:uppercase;opacity:.9}#roomLabel .city{font-family:var(--serif);font-size:clamp(32px,7.5vw,62px);font-weight:500;letter-spacing:-.01em;line-height:1.08;color:#faf3e2;text-shadow:0 2px 34px rgba(0,0,0,.6)}#roomLabel .cjk{font-family:var(--cjk);font-size:clamp(13px,2.8vw,18px);color:var(--accent, #d9cbaf);opacity:.6;letter-spacing:.3em;margin-top:.15em}#roomLabel.show{opacity:1;transform:none}#hint{position:absolute;bottom:clamp(84px,17vh,140px);left:0;right:0;text-align:center;font-size:13px;letter-spacing:.12em;color:#f1e7d2;opacity:0;transition:opacity .55s var(--ease-out);text-shadow:0 1px 12px rgba(0,0,0,.8)}#hint.show{opacity:.92}#hint .key{display:inline-block;min-width:22px;padding:2px 7px;margin:0 3px;border:1px solid rgba(255,255,255,.45);border-radius:4px;font-size:11px}#topbar{position:absolute;top:calc(16px + var(--sat));right:calc(16px + var(--sar));display:flex;gap:10px;pointer-events:auto}.iconbtn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(216,178,113,.32);background:#0f0b086b;color:#efe4cd;cursor:pointer;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .3s var(--ease-out),border-color .3s var(--ease-out),transform .14s var(--press),box-shadow .3s var(--ease-out)}.iconbtn:hover{background:#d8b2712e;border-color:var(--gold)}.iconbtn:active{transform:scale(.9);background:#d8b27142}body.touch .iconbtn{width:46px;height:46px;font-size:19px}#progress{position:absolute;left:0;right:0;bottom:calc(16px + var(--sab));display:flex;gap:7px;justify-content:center;pointer-events:none;opacity:.92}#progress .dot{width:7px;height:7px;border-radius:50%;background:#ffffff4d;transition:background .5s var(--ease-out),transform .5s var(--press),box-shadow .5s var(--ease-out)}#progress .dot.done{background:#d8b27180}#progress .dot.on{background:var(--gold);box-shadow:0 0 9px var(--gold);transform:scale(1.45)}#progress .dot.city{width:9px;height:9px;box-shadow:0 0 0 1px var(--acc, rgba(216,178,113,.5))}#progress .dot.city.on{background:var(--acc, var(--gold));box-shadow:0 0 10px var(--acc, var(--gold))}#help{position:absolute;left:calc(18px + var(--sal));bottom:calc(18px + var(--sab));font-size:11.5px;line-height:1.85;font-weight:300;color:#b8aa8e;letter-spacing:.04em;opacity:0;transition:opacity .6s var(--ease-out);max-width:60vw}#help.show{opacity:.72}#help b{color:var(--gold-soft);font-weight:500}#welcome{position:absolute;left:0;right:0;top:38%;text-align:center;z-index:25;opacity:0;pointer-events:none;padding:0 8vw}#welcome.show{animation:welcomeAir 6.4s ease forwards}#welcome .big{font-family:var(--serif);font-style:italic;font-size:clamp(26px,6vw,52px);color:#f6ecd6;text-shadow:0 0 40px rgba(216,178,113,.45),0 2px 30px rgba(0,0,0,.6)}#welcome .sub{font-size:clamp(12px,3vw,15px);letter-spacing:.22em;color:#cdbf9f;margin-top:.6em}#welcome .sub .snow{color:#9bd8ff}@keyframes welcomeAir{0%{opacity:0;transform:translate(-16px,8px);filter:blur(7px);letter-spacing:.02em}16%{opacity:1;transform:none;filter:blur(0)}80%{opacity:1}to{opacity:0;filter:blur(3px)}}#lightbox{z-index:80;display:flex;align-items:center;justify-content:center;background:#06040300;backdrop-filter:blur(0px);transition:background .45s ease,backdrop-filter .45s ease;pointer-events:none;overscroll-behavior:contain}#lightbox.open{background:#060403ed;backdrop-filter:blur(8px);pointer-events:auto}#lightbox:not(.open) #lbClose,#lightbox:not(.open) .lb-nav,#lightbox:not(.open) #lbLive,#lightbox:not(.open) #lbCaption{display:none}#lightbox .stage{position:relative;max-width:94vw;max-height:86vh;transform:scale(.92);opacity:0;transition:transform .5s var(--ease-soft),opacity .45s;touch-action:pan-y;display:flex;align-items:center;justify-content:center}#lightbox.open .stage{transform:scale(1);opacity:1}#lightbox:not(.open) .stage{transition:transform .32s cubic-bezier(.4,0,1,1),opacity .28s ease;transform:scale(.96)}#lightbox.open .stage,#lightbox.open #lbImg{touch-action:pinch-zoom}#lightbox img,#lightbox video{max-width:94vw;max-height:82vh;border-radius:3px;display:block;box-shadow:0 30px 90px #000000b3,0 0 0 1px #d8b2712e;background:#181410}#lbImg{transition:opacity .3s var(--ease-out)}#lightbox video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:contain;transition:opacity .5s ease;box-shadow:none}#lbClose{position:absolute;top:-16px;right:-16px}#lbCaption{position:absolute;bottom:-46px;left:0;right:0;text-align:center;font-family:var(--serif);font-style:italic;font-size:18px;color:#e6d9c0;text-shadow:0 1px 8px rgba(0,0,0,.85);letter-spacing:.02em}#lbLive{position:absolute;top:12px;left:12px;display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:22px;font-size:11px;letter-spacing:.14em;font-weight:600;background:#14100c9e;backdrop-filter:blur(6px);color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.3);transition:transform .14s var(--press),background .3s var(--ease-out),border-color .3s var(--ease-out)}#lbLive.on{display:flex}#lbLive:hover{background:#282018bf;border-color:var(--gold)}#lbLive:active{transform:scale(.94)}#lbLive.playing{background:#d8b27147;border-color:var(--gold)}#lbLive .play{font-size:9px}#lbLive .dot{width:7px;height:7px;border-radius:50%;background:#ffd27a;box-shadow:0 0 7px #ffd27a;animation:pulse 1.4s infinite}#lbLive.hintpulse{animation:livehint 1.9s ease 2}@keyframes livehint{0%,to{transform:scale(1);box-shadow:0 0 #ffd27a80}50%{transform:scale(1.09);box-shadow:0 0 0 9px #ffd27a00}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}#lbSpin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:34px;height:34px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:26px}.lb-nav:active,#lbClose:active{transform:scale(.9)}#lbPrev{left:-64px}#lbNext{right:-64px}body.touch #lbClose{top:auto;bottom:calc(16px + var(--sab));left:50%;right:auto;transform:translate(-50%);width:48px;height:48px}body.touch #lbPrev{top:auto;bottom:calc(16px + var(--sab));left:calc(16px + var(--sal));transform:none;opacity:.6;width:48px;height:48px}body.touch #lbNext{top:auto;bottom:calc(16px + var(--sab));right:calc(16px + var(--sar));transform:none;opacity:.6;width:48px;height:48px}body.touch #lbLive{padding:10px 15px;font-size:12px;top:calc(10px + var(--sat));left:calc(12px + var(--sal))}body.touch #lbCaption{bottom:calc(74px + var(--sab));left:0;right:0;padding:22px 16px 0;font-size:16px}#touch{z-index:15;display:none}body.touch #touch{display:block}#joy{position:absolute;left:max(26px,calc(6vw + var(--sal)));bottom:max(36px,calc(9vh + var(--sab)));width:116px;height:116px;border-radius:50%;background:#d8b2710d;border:1.5px solid rgba(216,178,113,.28);pointer-events:none;opacity:.55;transition:opacity .35s var(--ease-out)}#joyKnob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px;border-radius:50%;background:#d8b27152;border:1px solid rgba(216,178,113,.55);transition:transform .04s linear}#touchHint{position:absolute;right:calc(7vw + var(--sar));bottom:calc(13vh + var(--sab));font-size:11px;color:#9c8e74;opacity:.6;letter-spacing:.06em;text-align:right;line-height:1.7;transition:opacity 1s ease}#guestbook{z-index:70;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(120% 90% at 50% 40%,#281e1433,#070504f7 78%);pointer-events:none;padding:8vw}#guestbook.open{pointer-events:auto}#guestbook .gb-inner{max-width:560px;opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.1s var(--ease-soft)}#guestbook.open .gb-inner{opacity:1;transform:none}#guestbook .heart{font-size:30px;color:var(--gold)}#guestbook h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;font-size:clamp(28px,6vw,46px);margin:.2em 0}#guestbook p{font-family:var(--serif);font-style:italic;font-size:clamp(16px,3.4vw,21px);color:#e3d5bc;line-height:1.55}#guestbook textarea{width:100%;margin-top:22px;min-height:96px;resize:none;padding:14px 16px;font-family:var(--serif);font-size:17px;color:#f3ebd9;background:#ffffff0a;border:1px solid rgba(216,178,113,.3);border-radius:4px;outline:none}#guestbook textarea:focus{border-color:var(--gold)}.gb-actions{margin-top:16px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn{padding:13px 26px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;min-height:46px;color:#f6edda;background:#d8b27114;border:1px solid rgba(216,178,113,.45);border-radius:3px;cursor:pointer;transition:background .3s var(--ease-out),border-color .3s var(--ease-out),transform .14s var(--press)}.btn:hover{background:#d8b27133;border-color:var(--gold)}.btn:active{transform:scale(.97);background:#d8b27147}#gbSaved{margin-top:14px;font-size:12px;letter-spacing:.12em;color:var(--gold);opacity:0;transition:opacity .5s var(--ease-out)}#gbSaved.show{opacity:1}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.15s!important}#title .kicker,#title .names,#title .subtitle,#title .dates,#title .enter,#title .loadnote{opacity:1!important;transform:none!important}#welcome.show{animation:fadeIn .4s ease forwards}}
