:root{color-scheme:dark;--ink:#fff2fb;--muted:#c0adc9;--pink:#ff99d2;--violet:#b39df4;--line:rgba(226,169,238,.2);font-family:"Thonburi","Leelawadee UI",system-ui,sans-serif;font-synthesis:none;background:#080511;color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,#scene:focus-visible{outline:2px solid #ffd1ec;outline-offset:5px}button{border:0}button:disabled{cursor:wait}button,dialog{-webkit-user-select:none;user-select:none}[hidden]{display:none!important}#universe{position:relative;isolation:isolate;width:100%;height:100%;height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 57%,#21102e 0,#10091c 38%,#080511 74%)}#scene{position:absolute;inset:0;touch-action:none;outline:none}#scene canvas{display:block;width:100%;height:100%;touch-action:none;opacity:0;transition:opacity 1.2s}body.scene-ready #scene canvas{opacity:1}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 43%,rgba(5,3,13,.38));z-index:1}.eyebrow{display:block;font-family:system-ui,sans-serif;font-size:.7rem;letter-spacing:.24em;font-weight:500;color:#cbb2d6;line-height:1.7}
.intro{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:32px;background:rgba(6,2,15,.44);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:opacity 1.2s,transform 1.5s,backdrop-filter 1.5s}.intro-card{position:relative;width:min(550px,100%);text-align:center;padding:46px 30px 24px;border:1px solid rgba(224,162,238,.22);border-radius:30px;background:linear-gradient(145deg,rgba(38,14,52,.75),rgba(13,7,28,.85));box-shadow:0 0 90px #e440a80d,inset 0 1px 0 #ffd8f50c}.intro-card:before{content:"";position:absolute;top:-1px;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,#ffc2ed80,transparent)}h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:500;line-height:1.48;letter-spacing:-.045em;margin:21px 0 14px}h1 span{color:#ffb6e1}.intro-copy{font-size:1rem;line-height:1.85;color:var(--muted);margin:0}.heart-gate{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;background:none;margin:14px auto 0;padding:12px 25px 20px;min-width:210px;min-height:192px;border-radius:50%}.heart-icon{width:105px;height:100px;filter:drop-shadow(0 0 12px #f44da870);animation:heartbeat 3s ease-in-out infinite;z-index:1}.heart-halo{position:absolute;top:22px;width:100px;height:100px;border-radius:50%;box-shadow:0 0 70px 20px #ed43a51c;animation:halo 3s infinite}.gate-label{font-size:.95rem;color:#fbc0e7;margin-top:17px;letter-spacing:.01em}.intro-foot{color:#a78daf;font-size:.8rem;margin:0;min-height:24px;line-height:1.8}.intro-bottom{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));font-family:Georgia,serif;font-style:italic;color:#8d739d;font-size:.85rem;letter-spacing:.04em}.charge-track{width:140px;height:2px;background:#ffabd31c;border-radius:2px;position:absolute;bottom:5px;opacity:0;overflow:hidden}.charge-track span{display:block;height:100%;width:0;background:#ffa5d9;box-shadow:0 0 10px #fc78c5}.charging .charge-track{opacity:1}.charging .charge-track span{width:100%;transition:width 1.6s ease-in-out}.charging .heart-icon{animation:heartbeat .75s ease-in-out infinite}.intro.is-leaving{opacity:0;transform:scale(1.12);pointer-events:none;backdrop-filter:blur(0)}
.universe-ui{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.5s}.universe-ui.visible{opacity:1}.scene-header{position:absolute;left:0;right:0;top:0;padding:max(30px,env(safe-area-inset-top)) max(34px,env(safe-area-inset-right)) 20px max(34px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(#08051190,transparent)}.scene-header h2{font:italic 3.3rem/1.15 Georgia,serif;letter-spacing:-.035em;margin:3px 0 8px;color:#ffedf9}.scene-header h2 span{font-family:serif;font-size:2.5rem;color:#fc9ed8}.scene-header p{font-size:.86rem;color:#c7b3d3;margin:0}.scene-header .eyebrow{font-size:.61rem;letter-spacing:.2em}.round-button{pointer-events:auto;display:flex;gap:9px;align-items:center;border:1px solid var(--line);background:#21122f75;border-radius:999px;padding:12px 17px;min-height:48px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#f4cfe9;font-size:.875rem}.round-button:hover{background:#482146a6}.round-button svg{width:19px;height:19px}.scene-caption{position:absolute;top:32px;left:50%;transform:translateX(-50%);color:#bc97c7;font:italic .8rem Georgia,serif;letter-spacing:.06em;opacity:.75;white-space:nowrap}.scene-footer{position:absolute;bottom:0;left:0;right:0;padding:26px 28px max(25px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;background:linear-gradient(transparent,#080511b3)}.gesture-hint{font-size:.83rem;line-height:1.7;letter-spacing:.015em;color:#c0aaca;margin:0 0 17px;text-align:center;text-shadow:0 2px 10px #05030d}.gesture-hint span{padding:0 8px;color:#735c81}.control-bar{pointer-events:auto;display:flex;align-items:center;padding:3px 5px;border:1px solid #dda8e52e;background:#1b102985;border-radius:999px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.control-bar button{display:flex;align-items:center;justify-content:center;height:44px;min-width:47px;border-radius:999px;background:transparent;font-size:1.45rem;color:#eecbe6}.control-bar button:hover{background:#e0a1dc1a}.control-bar .reset-control{gap:8px;padding:0 16px;font-size:.84rem}.reset-control svg{width:16px;height:16px}.control-divider{height:17px;width:1px;background:#d9a6df26}.motion-toggle{position:absolute;right:34px;bottom:max(33px,env(safe-area-inset-bottom));pointer-events:auto;background:transparent;color:#c2a6d0;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px;font-size:.8rem}.motion-toggle:hover{color:#ffcfed}.motion-toggle span:first-child{font-size:1rem}
dialog{border:1px solid #eeb3e33d;border-radius:27px;background:linear-gradient(145deg,#28162f,#120d20);color:var(--ink);padding:40px 38px 30px;width:min(440px,calc(100% - 38px));max-height:calc(100dvh - 36px);box-shadow:0 25px 100px #0008,0 0 90px #e875b915;text-align:center;overflow-y:auto;overscroll-behavior:contain;-webkit-user-select:text;user-select:text}dialog::backdrop{background:#07030ebb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.close-letter{position:absolute;right:12px;top:9px;background:none;font-size:1.6rem;color:#cbb0d4;width:44px;height:44px;border-radius:50%}.close-letter:hover{background:#ffffff0b}.letter-star{color:#ffa7d4;font-size:3rem;margin:20px 0 4px;text-shadow:0 0 24px #ff72c54d}dialog h2{font-size:1.8rem;font-weight:500;margin:8px 0 20px;color:#ffc4e8}#letter-body p{font-size:1rem;line-height:1.95;color:#d7c3dc;margin:20px 0}#letter-body strong{font-weight:500;color:#ffbde4}.letter-return{background:#ef99cf15;border:1px solid #f2a8d340;border-radius:999px;color:#f0b9df;font-size:.86rem;padding:12px 22px;min-height:46px;margin-top:9px}.letter-return:hover{background:#ef99cf28}.fallback{position:absolute;inset:0;z-index:8;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(ellipse at 50% 40%,#2d153a,#080511 70%);overflow-y:auto}.fallback-heart{font-size:7rem;color:#ff9bd6;line-height:1.2}.fallback h2{font-size:2rem;font-weight:500}.fallback p{font-size:1rem;line-height:1.9;color:#e0c4e0}.fallback .fallback-help{font-size:.85rem;color:#af94bc}.fallback button{min-height:46px;padding:12px 24px;border:1px solid #f4b4e355;background:#ffaad815;border-radius:99px}.no-script{position:absolute;inset:0;z-index:20;display:grid;place-content:center;padding:30px;background:#10071b;text-align:center;line-height:2;color:#ffc9e8}
@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}@keyframes halo{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.18)}}
@media(min-width:1400px){.scene-header{padding:40px 48px}.scene-footer{padding-bottom:32px}.scene-header h2{font-size:3.7rem}}
@media(max-width:600px){.intro{padding:22px}.intro-card{padding:35px 18px 23px;border-radius:25px}h1{font-size:2.1rem}.eyebrow{font-size:.6rem;letter-spacing:.2em}.intro-copy{font-size:.95rem}.scene-header{padding:24px 21px}.scene-header h2{font-size:2.75rem}.scene-header p{font-size:.78rem}.scene-header .eyebrow{font-size:.55rem}.scene-caption{display:none}.note-button{padding:10px 13px;gap:7px}.scene-footer{padding:20px 15px max(24px,env(safe-area-inset-bottom))}.gesture-hint{max-width:260px;font-size:.76rem;line-height:1.9;margin-bottom:11px}.gesture-hint span{padding:0 3px}.motion-toggle{right:13px;bottom:max(26px,env(safe-area-inset-bottom));font-size:.7rem;gap:5px}.control-bar{transform:translateX(-18px)}.control-bar .reset-control{padding:0 12px}.control-bar button{min-width:40px}.intro-bottom{font-size:.72rem}dialog{padding:34px 24px 25px}}
@media(max-height:640px) and (orientation:landscape){.intro-card{padding:20px 32px 14px;max-width:540px}h1{font-size:1.85rem;line-height:1.3;margin:12px 0 8px}h1 br{display:none}h1 span{margin-left:8px}.intro-copy br{display:none}.intro-copy{font-size:.86rem}.heart-gate{min-height:148px;margin-top:0;padding:8px 20px 17px}.heart-icon{height:70px;width:77px}.heart-halo{top:12px;width:65px;height:65px}.gate-label{margin-top:8px;font-size:.86rem}.intro-bottom{bottom:12px;font-size:.7rem}.scene-header{padding:18px 24px}.scene-header h2{font-size:2.4rem}.scene-header p{display:none}.scene-footer{padding-bottom:14px}.gesture-hint{margin-bottom:8px}.motion-toggle{bottom:14px}.scene-caption{top:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}.intro,.universe-ui,#scene canvas{transition-duration:.2s}}