:root{--ink:#fff;--acc:#f4a259;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0;min-height:100%;background:#1a0615}
*{box-sizing:border-box}
body{overflow-x:hidden;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:linear-gradient(115deg,#12030f 0%,#7a0a62 45%,#e000b4 100%) fixed;min-height:100vh}
.script{font-family:"Great Vibes","Brush Script MT",cursive;font-weight:400}
.view{display:none;min-height:100vh;padding:56px 20px 40px;max-width:900px;margin:0 auto;text-align:center;animation:in .6s ease}
.view.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
h1,h2{margin:0 0 20px;font-size:clamp(2.2rem,8vw,3.6rem);text-shadow:0 0 18px #ff5fd6}
.back{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:5;background:#53d34a;color:#10320c;border:2px solid #fff;border-radius:99px;padding:6px 18px;font-weight:800;cursor:pointer;display:none}
.back.on{display:block}
/* envelope */
.env{width:220px;height:150px;margin:36px auto 18px;background:#f7efdc;border-radius:6px;position:relative;cursor:pointer;box-shadow:0 12px 30px #0008;animation:fl 3s ease-in-out infinite}
.env::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49%,#e6dcc4 50%) top/100% 55% no-repeat,linear-gradient(to bottom left,transparent 49%,#e6dcc4 50%) top/100% 55% no-repeat}
.seal{position:absolute;left:50%;top:48%;width:34px;height:34px;margin:-17px;border-radius:50%;background:radial-gradient(#b02fe0,#6a0a8c);box-shadow:0 0 14px #e000b4}
@keyframes fl{50%{transform:translateY(-8px)}}
.hint{opacity:.8;letter-spacing:.05em}
/* menu */
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px;max-width:700px;margin:30px auto}
.mi{background:none;border:0;color:#fff;cursor:pointer;font-size:1.6rem}
.mi .ic{font-size:4.2rem;display:block;filter:drop-shadow(0 6px 14px #000a);transition:.25s}
.mi:hover .ic{transform:scale(1.15) rotate(-4deg)}
.mi .script{display:block;font-size:2rem;margin-top:6px;text-decoration:underline}
.vinyl{display:inline-block;width:64px;height:64px;border-radius:50%;background:radial-gradient(#c42 0 14%,#111 15% 100%);box-shadow:inset 0 0 0 4px #333;animation:sp 4s linear infinite}
@keyframes sp{to{transform:rotate(1turn)}}
/* journey */
#v-journey{position:relative;overflow:hidden}
#v-journey::before{content:"";position:absolute;left:50%;top:58%;width:340px;height:300px;margin:-150px -170px;background:radial-gradient(circle,#ff2a3d 0,#d3002a88 45%,transparent 70%);filter:blur(28px);opacity:0;animation:glow 1.2s .1s forwards,beat 2.4s 1.3s ease-in-out infinite}
.pola{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2.5vw,22px);max-width:760px;margin:34px auto 0}
.pl{background:#fff;padding:5px 5px 18px;box-shadow:0 8px 20px #0007;transform:rotate(var(--r));opacity:0;animation:drop .8s cubic-bezier(.3,1.4,.5,1) calc(var(--i)*.28s + .3s) forwards}
.stk{position:absolute;z-index:2;font-size:clamp(1.6rem,6vw,2.8rem);line-height:1;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 8px #0008);animation:stk .7s cubic-bezier(.3,1.8,.5,1) calc(var(--d)*1s) forwards,fl 3s calc(var(--d)*1s + .7s) ease-in-out infinite}
@keyframes drop{0%{opacity:0;transform:translateY(-70px) scale(1.6) rotate(calc(var(--r)*-5))}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes stk{from{opacity:0;transform:scale(0) rotate(-40deg)}to{opacity:1;transform:scale(1)}}
@keyframes glow{to{opacity:.9}}@keyframes beat{50%{transform:scale(1.12)}}
.pl .im{aspect-ratio:1;background:#e9d9ef;color:#7a0a62;display:flex;align-items:center;justify-content:center;font-size:.8rem;position:relative;overflow:hidden}
.pl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* moment */
.mt{transform:rotate(-4deg);min-height:1.2em;margin-bottom:10px}
.mwrap{display:grid;grid-template-columns:1.45fr 1fr;gap:28px;align-items:center;max-width:780px;margin:10px auto 0}
@media(max-width:600px){.mwrap{grid-template-columns:1fr}}
.paperbox,.mright{position:relative}
.paperbox{filter:drop-shadow(0 10px 18px #000a)}
.paper{background:linear-gradient(135deg,#fff 0,#ebe6f0 40%,#fff 68%,#ddd6e6 100%);color:#7a1530;font-family:Georgia,"Times New Roman",serif;text-align:justify;line-height:1.75;font-size:.98rem;padding:26px 24px;height:250px;overflow-y:auto;scrollbar-width:none;transform:rotate(-3deg);clip-path:polygon(0 3%,4% 0,30% 2%,60% 0,100% 4%,98% 50%,100% 96%,70% 100%,35% 98%,2% 100%,0 60%);animation:slideL .9s cubic-bezier(.2,.8,.3,1) both}
.paper::-webkit-scrollbar{display:none}
.mright{padding-bottom:34px}
.frame{aspect-ratio:4/5;border:13px solid;border-image:linear-gradient(135deg,#f8e29a,#b8862b 35%,#f6dd8a 60%,#8a5f14) 1;background:#2a0a24;color:#e9c6e4;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 10px 24px #000a;animation:fpop 1s .5s both}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rs,.cam{position:absolute;filter:drop-shadow(0 4px 8px #0009);animation:stk .7s cubic-bezier(.3,1.8,.5,1) both}
.rs{font-size:3rem;line-height:1}
.r1{left:-14px;bottom:-16px;animation-delay:1s}.r2{left:-28px;bottom:30px;font-size:2.2rem;animation-delay:1.15s}.r3{right:-16px;top:-20px;animation-delay:1.3s}
.cam{right:-6px;bottom:-4px;font-size:3.8rem;line-height:1;transform:rotate(6deg);animation-delay:1.5s}
.play{margin:38px auto 0;background:none;border:0;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:Georgia,serif}
.vw{position:relative;display:block;width:90px;height:90px}
.vinyl.big{width:90px;height:90px;animation:none}
.vw i{position:absolute;inset:0;margin:auto;width:36px;height:36px;border-radius:50%;background:#e8212b;color:#fff;font-style:normal;display:grid;place-items:center;font-size:.9rem;box-shadow:0 0 12px #e8212b}
@keyframes slideL{from{opacity:0;transform:translateX(-80px) rotate(-12deg) scale(.8)}}
@keyframes fpop{from{opacity:0;transform:scale(.6);filter:blur(10px)}}
/* playlist */
.songs{list-style:none;margin:0 auto;padding:0;max-width:520px;text-align:left}
.songs li{display:flex;gap:14px;align-items:center;background:#ffffff1c;border:1px solid #ffffff3a;border-radius:14px;padding:12px 16px;margin-bottom:10px;backdrop-filter:blur(4px)}
.songs .n{width:34px;height:34px;border-radius:50%;background:var(--acc);color:#3b0630;display:grid;place-items:center;font-weight:800;flex:none}
.songs small{display:block;opacity:.75}
/* ==== audio player ==== */
#au{display:none}
.songs li.sg{cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.songs li.sg:hover{background:#ffffff28;border-color:#ffffff66}
.songs li.sg:active{transform:scale(.995)}
.songs li.sg.on{background:#ffffff30;border-color:var(--acc);box-shadow:0 6px 20px #0004,0 0 0 1px var(--acc) inset}
.songs li.sg.err{opacity:.5}
.songs li.sg.err .sbody b::after{content:" (file belum ada)"}
.songs .pbtn{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid #ffffff4d;background:#ffffff1f;color:#fff;cursor:pointer;display:grid;place-items:center;font-size:.72rem;padding:0;transition:.2s}
.songs .pbtn:hover{background:var(--acc);color:#3b0630;border-color:var(--acc)}
.songs li.sg.on .pbtn{background:var(--acc);color:#3b0630;border-color:var(--acc)}
.songs .sbody{flex:1;min-width:0}
.songs .sbody b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.songs .sbody small{display:flex;justify-content:space-between;gap:10px}
.songs .tme{flex:none;font-variant-numeric:tabular-nums}
.songs .bar{height:4px;border-radius:99px;background:#ffffff2e;margin-top:8px;overflow:hidden}
.songs .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),#ff5fd6);transition:width .12s linear}
.songs li.sg.on .bar i{box-shadow:0 0 10px var(--acc)}
/* now playing */
#np{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:12px;background:#2a0a24e0;border:1px solid #ffffff3a;border-radius:99px;padding:8px 12px 8px 8px;backdrop-filter:blur(10px);box-shadow:0 10px 24px #0007;max-width:min(90vw,340px);opacity:0;transform:translateY(20px);pointer-events:none;transition:.35s}
#np.on{opacity:1;transform:none;pointer-events:auto}
#np .vinyl.sm{width:40px;height:40px;flex:none;animation:sp 4s linear infinite}
#np .npinfo{min-width:0;line-height:1.25}
#np .npinfo b{display:block;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#np .npinfo small{opacity:.75;font-size:.72rem}
#npp{width:32px;height:32px;flex:none;border-radius:50%;border:0;background:var(--acc);color:#3b0630;font-weight:800;cursor:pointer;font-size:.7rem}
#npp:hover{filter:brightness(1.1)}
/* vinyl spin control */
#play.playing .vinyl.big{animation:sp 4s linear infinite}
#play.playing .vw i{opacity:0}
/* map */
.mapbox{background:#ffffff18;border:1px solid #ffffff3a;border-radius:18px;padding:10px;overflow-x:auto;max-width:700px;margin:0 auto}
.mapbox svg{width:100%;min-width:460px;display:block}
.pin{cursor:pointer}.pin circle{fill:#e000b4;stroke:#fff;stroke-width:2;transition:.2s}
.pin:hover circle,.pin.on circle{fill:var(--acc);r:20}
.pin text{text-anchor:middle;dominant-baseline:central;font-size:18px;pointer-events:none}
.pin .lbl{font-size:13px;fill:#fff;font-weight:700}
#info{max-width:700px;margin:14px auto 0;background:#ffffff1c;border-radius:14px;padding:16px;min-height:70px}
/* intro */
#intro{position:fixed;inset:0;z-index:99;background:#12030f;display:flex;align-items:center;justify-content:center;transition:opacity .9s}
#intro.done{opacity:0;pointer-events:none}
#intro svg{width:min(92vw,720px)}
#hello{position:absolute;top:18%;left:0;right:0;font-size:clamp(2.4rem,9vw,4rem);opacity:0;animation:fd .8s 2.6s forwards;text-shadow:0 0 18px #ff5fd6}
#skip{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));color:#e9c6e4;background:none;border:1px solid #7a4a72;border-radius:99px;padding:6px 16px;cursor:pointer}
#arrow{transform:translateX(-520px);animation:fly 1.1s cubic-bezier(.2,.7,.3,1) 1.2s forwards}
#trail{opacity:0;animation:tr 1.1s ease-out 1.2s forwards}
#tgt{transform-origin:520px 200px;animation:pop .6s cubic-bezier(.3,1.6,.5,1) .3s backwards,hit .5s ease-out 2.2s}
#burst{opacity:0;transform-origin:520px 200px;animation:bs .9s ease-out 2.25s forwards}
@keyframes fly{to{transform:none}}@keyframes tr{0%{opacity:.7}100%{opacity:0}}
@keyframes pop{from{transform:scale(0)}}@keyframes hit{30%{transform:rotate(-7deg) scale(1.06)}60%{transform:rotate(5deg)}}
@keyframes bs{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.6)}}@keyframes fd{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#arrow,#trail,#tgt,#burst,.env,.vinyl{animation-duration:.01s;animation-delay:0s}}
/* tombol musik */
#mute{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:14px;z-index:120;width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:#0007;color:#fff;font-size:1.1rem;cursor:pointer;backdrop-filter:blur(4px)}
@media (max-width:480px){.view{padding:60px 16px 36px}h1,h2{font-size:clamp(2rem,10vw,3rem)}.menu{gap:10px}.mi .ic{font-size:3.4rem}.mi .script{font-size:1.7rem}}