@font-face{font-family:Pixel;src:url('assets/pixel.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--cream:#ffe0bd;--coral:#ffac9b;--rose:#a93551;--sky:#d66b76}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;width:100%;min-height:100%;background:var(--sky)}
body{font-family:Pixel,'Courier New',monospace;-webkit-font-smoothing:none}
button{-webkit-tap-highlight-color:transparent}
.world{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;min-height:100svh;overflow:hidden;padding:28px 16px max(28px,env(safe-area-inset-bottom));background:#d66b76}
.sky{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 40%,#f59586 0%,#e17a7f 35%,transparent 66%),linear-gradient(180deg,#b94e65 0%,#d66b76 30%,#de7d7f 62%,#c4536b 100%)}
.grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.12;background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#92374d14 3px,#92374d14 4px)}
.cloud-layer{position:absolute;inset:-120px -100px;pointer-events:none;z-index:1;--cloud-period:clamp(640px,100vw,1200px);mask-image:radial-gradient(ellipse at 50% 52%,transparent 18%,#0006 60%,#000 95%)}
.cloud-track{position:absolute;top:0;bottom:0;left:calc(-1 * var(--cloud-period));width:calc(100% + var(--cloud-period));background-image:url('assets/clouds.png'),url('assets/clouds.png'),url('assets/clouds.png');background-repeat:repeat-x;background-size:var(--cloud-period) auto;animation:cloud-drift 180s linear infinite;will-change:transform}
.cloud-layer--far{opacity:.26;transform:scaleX(-1)}
.cloud-layer--far .cloud-track{background-position:0 -30px,240px 43%,80px 100%;animation-duration:220s}
.cloud-layer--middle{opacity:.38;z-index:2;transform:scaleX(-1);--cloud-period:clamp(720px,115vw,1400px)}
.cloud-layer--middle .cloud-track{background-position:200px 10%,0 65%,360px 100%;animation-duration:145s}
.cloud-layer--near{opacity:.8;z-index:3;--cloud-period:clamp(800px,130vw,1600px);mask-image:radial-gradient(ellipse at 50% 52%,transparent 35%,#0007 78%,#000 100%)}
.cloud-layer--near .cloud-track{background-position:340px -85px,0 54%,160px 100%;animation-duration:100s}
.constellation{position:absolute;inset:0;pointer-events:none;z-index:4}
.pixel-star{position:relative;display:block;width:5px;height:5px;color:var(--cream);background:currentColor;box-shadow:0 -5px currentColor,0 5px currentColor,-5px 0 currentColor,5px 0 currentColor;animation:twinkle 6s ease-in-out infinite}
.star,.mote,.sky-heart{position:absolute}
.mote{width:3px;height:3px;background:#ffd1ad;opacity:.55;animation:twinkle 8s ease-in-out infinite}
.sky-heart{width:8px;height:8px;color:#fcb098;opacity:.55;animation:twinkle 9s ease-in-out infinite}
.gift{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:20px;z-index:auto;text-align:center}
.guiding-star{margin-bottom:42px;color:#ffddba;opacity:.8;transform:scale(.7);z-index:10}
.amulet-space{position:relative;width:min(60vw,39svh,340px);aspect-ratio:1158 / 1358;perspective:900px;z-index:10}
.halo{position:absolute;inset:15% -25% -5%;border-radius:50%;background:radial-gradient(ellipse,#ffc2a05c 0%,#ffd0aa22 34%,transparent 68%);animation:halo-breathe 7s ease-in-out infinite;transition:filter .5s}
.orbit{position:absolute;inset:19% -12% 7%;border:2px dotted #ffd3af;opacity:.25;border-radius:50%;transform:rotate(-22deg);mask-image:linear-gradient(120deg,#000 5%,transparent 35%,#000 58%,transparent 86%)}
.floating-heart{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:float 8s ease-in-out infinite;will-change:transform}
.amulet{position:relative;display:block;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;outline:none;touch-action:manipulation;transform-style:preserve-3d;--pendant-depth:12px;--face-offset:6px}
.pendant-spin{position:absolute;display:block;inset:0;transform-style:preserve-3d;animation:pendant-turn 12s linear infinite;will-change:transform}
.pendant-face{position:absolute;display:block;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 12px 1px #9a30401c) drop-shadow(0 0 18px #ffcb9a36);transition:filter .5s}
.pendant-face--front{transform:translateZ(var(--face-offset))}
.pendant-face--back{transform:rotateY(180deg) translateZ(var(--face-offset))}
.pendant-edge{position:absolute;display:block;inset:0;transform-style:preserve-3d;pointer-events:none}
.pendant-side{position:absolute;display:block;background:linear-gradient(90deg,#79233c,#cc4658 35%,#ef8675 50%,#b93750 70%,#79233c);backface-visibility:visible}
.pendant-side--horizontal{height:var(--pendant-depth);transform:translateY(-50%) rotateX(90deg);background:linear-gradient(#7b243a,#ed997e 45%,#bf4055 70%,#79233c)}
.pendant-side--vertical{width:var(--pendant-depth);transform:translateX(-50%) rotateY(90deg)}
.amulet-art{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.photograph{position:absolute;left:21.1%;top:35.8%;width:57.4%;height:45.7%;overflow:hidden;pointer-events:none;clip-path:polygon(0 27%,3% 27%,3% 21%,7% 21%,7% 16%,12% 16%,12% 11%,18% 11%,18% 6%,24% 6%,24% 2%,30% 2%,30% 0,36% 0,36% 3%,40% 3%,40% 6%,44% 6%,44% 9%,47% 9%,47% 12%,53% 12%,53% 9%,57% 9%,57% 6%,61% 6%,61% 3%,66% 3%,66% 0,73% 0,73% 3%,79% 3%,79% 7%,85% 7%,85% 12%,90% 12%,90% 18%,95% 18%,95% 25%,98% 25%,98% 31%,100% 31%,100% 45%,98% 45%,98% 52%,95% 52%,95% 59%,90% 59%,90% 65%,85% 65%,85% 71%,79% 71%,79% 77%,73% 77%,73% 83%,67% 83%,67% 89%,61% 89%,61% 94%,55% 94%,55% 98%,46% 98%,46% 94%,40% 94%,40% 89%,34% 89%,34% 84%,28% 84%,28% 79%,22% 79%,22% 73%,17% 73%,17% 67%,12% 67%,12% 61%,7% 61%,7% 55%,3% 55%,3% 48%,0 48%)}
.photograph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 66%;user-select:none;filter:saturate(.9) sepia(.07)}
.pendant-face--back .photograph img{object-position:50% 62%}
.amulet:focus-visible{outline:2px dashed var(--cream);outline-offset:12px;border-radius:45%}
.amulet:hover .pendant-face{filter:drop-shadow(0 12px 1px #9a304025) drop-shadow(0 0 25px #ffdfb96e)}
.frame-sparkle{position:absolute;pointer-events:none;transform:scale(.8);color:#fff1d5;animation:sparkle 7s ease-in-out infinite}
.frame-sparkle--one{left:21%;top:35%;animation-delay:1s}
.frame-sparkle--two{right:20%;bottom:21%;animation-delay:4.5s;transform:scale(.6)}
.dedication{position:relative;margin-top:36px;color:var(--cream);text-shadow:0 2px #b95662;z-index:20}
h1{margin:0;font-weight:400;font-size:clamp(25px,6.7vw,36px);line-height:1.25;letter-spacing:1px;white-space:nowrap}
.plus{color:#ffc3a7;margin:0 3px}
.little-heart{display:block;overflow:visible;margin:19px auto 16px;color:#f7b29f;filter:drop-shadow(0 2px #b74c64);animation:tiny-heart 5s ease-in-out infinite}
.whisper{position:relative;min-height:24px}
.invitation,.love-message{margin:0;font-size:18px;line-height:1.3;letter-spacing:1.2px;color:#ffe0c2;transition:opacity .35s,transform .35s}
.invitation{opacity:.8}
.love-message{position:absolute;inset:0;white-space:nowrap;opacity:0;transform:translateY(5px);font-size:19px;letter-spacing:.8px}
.world.is-loved .invitation{opacity:0;transform:translateY(-5px)}
.world.is-loved .love-message{opacity:1;transform:translateY(0)}
.world.is-loved .halo{filter:brightness(1.3)}
.amulet.is-touched{animation:heart-touch 1.1s ease-in-out}
.amulet.is-touched .pendant-face{filter:drop-shadow(0 0 25px #ffe1b8a1)}
.burst{position:absolute;inset:0;pointer-events:none}
.burst-pixel{position:absolute;left:50%;top:55%;height:var(--size,4px);width:var(--size,4px);background:var(--particle-color,#ffe0bd);animation:pixel-burst 1.4s cubic-bezier(.16,.7,.3,1) forwards}
.horizon{position:absolute;width:40%;max-width:200px;height:3px;left:50%;top:64%;transform:translateX(-50%);background:#ffd1a666;filter:blur(4px);opacity:.6;z-index:0}
@keyframes cloud-drift{to{transform:translateX(var(--cloud-period))}}
@keyframes pendant-turn{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg) rotateY(-5deg) scale(1)}25%{transform:translateY(-9px) rotate(.8deg) rotateY(3deg) scale(1.012)}50%{transform:translateY(-13px) rotate(1.6deg) rotateY(5deg) scale(1.018)}75%{transform:translateY(-5px) rotate(-.6deg) rotateY(-1deg) scale(1.007)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.8}}
@keyframes sparkle{0%,15%,35%,100%{opacity:0}25%{opacity:.95}}
@keyframes halo-breathe{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:.95;transform:scale(1.06)}}
@keyframes tiny-heart{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes heart-touch{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(5deg) rotateY(9deg) scale(1.05)}65%{transform:rotate(-3deg) rotateY(-4deg) scale(1.02)}}
@keyframes pixel-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}10%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(90deg) scale(.35)}}
@media(min-width:700px){.guiding-star{margin-bottom:34px}.dedication{margin-top:30px}.gift{padding-top:0}}
@media(max-height:650px){.world{padding-block:25px}.guiding-star{margin-bottom:24px}.amulet-space{width:min(58vw,43svh)}.dedication{margin-top:21px}.little-heart{margin:14px auto 12px}.gift{padding-top:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.burst-pixel{display:none}.floating-heart{transform:none}.frame-sparkle{opacity:.6}}

.music{margin-top:21px;position:relative;z-index:20}
h1[tabindex="-1"]:focus{outline:none}
.music-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:34px;padding:5px 9px;color:var(--cream);font-size:17px;line-height:1.3;letter-spacing:.6px;text-decoration:none;opacity:.85;transition:opacity .2s}
.music-link:hover{opacity:1}
.music-link:focus-visible,.entrance-submit:focus-visible{outline:2px dashed var(--cream);outline-offset:5px}
.music-icon{flex:none;image-rendering:pixelated}
.music-aside{margin:4px 0 0;font-size:13px;line-height:1.4;letter-spacing:.5px;color:var(--cream);opacity:.58}
.entrance{position:relative;z-index:20;display:flex;flex-direction:column;align-items:center;width:min(100%,290px);text-align:center;color:var(--cream);text-shadow:0 2px #b95662}
html[data-unlocked="true"] .entrance{display:none}
.entrance-star{margin-bottom:34px;color:#ffddba;transform:scale(.7)}
.entrance h2{margin:0 0 18px;font-size:32px;font-weight:400;line-height:1.3;letter-spacing:1px}
.password-length{font-size:17px;letter-spacing:1px;opacity:.8;margin-bottom:14px}
.password-well{position:relative;width:200px}
.password-well input{display:block;width:100%;height:54px;appearance:none;border:0;border-radius:0;outline:0;padding:8px 18px;background:#b94e6538;color:var(--cream);font:28px Pixel,'Courier New',monospace;line-height:1;text-align:center;letter-spacing:10px;caret-color:var(--cream);box-shadow:inset 0 0 0 2px #ffc3a7,inset 0 -5px 0 #a9355140;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px)}
.password-well input:focus-visible{background:#a9355126;box-shadow:inset 0 0 0 3px var(--cream),inset 0 -5px 0 #a9355140}
.password-well input::selection{background:#a9355155;color:var(--cream)}
.password-spark{position:absolute;right:-24px;top:21px;color:var(--cream);opacity:0;pointer-events:none}
.entrance-submit{border:0;background:transparent;color:var(--cream);font:21px Pixel,'Courier New',monospace;letter-spacing:1px;text-shadow:0 2px #b95662;padding:12px 18px;margin-top:13px;min-height:44px;cursor:pointer;touch-action:manipulation}
.entrance-submit:hover{color:#fff1d5}
.entrance-submit:disabled{opacity:.55;cursor:wait}
.password-hint{font-size:16px;letter-spacing:.7px;opacity:.65;margin:8px 0 0}
.password-error{margin:20px 0 0;min-height:22px;font-size:16px;line-height:1.4;letter-spacing:.5px;color:var(--cream);opacity:.85}
.entrance.is-wrong .password-well{animation:password-shake .36s steps(2,end)}
.entrance.is-wrong .password-spark{animation:password-spark .65s steps(4,end)}
.entrance.is-opening{animation:entrance-open .24s steps(4,end) forwards;pointer-events:none}
@keyframes password-shake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes password-spark{0%{opacity:0;transform:translateY(3px)}30%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes entrance-open{to{opacity:0;transform:translateY(-6px)}}