@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Caveat:wght@400;600&family=Inter:wght@300;400;500&display=swap");
:root { --bg: #0b0809; --pink: #f6c6d6; --pink2: #e89ab5; --ink: #f7eef1; --mute: #b9a5ad; --glass: rgba(255, 220, 232, .06); --line: rgba(246, 198, 214, .18); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(1200px 700px at 50% -10%, #2a1219 0%, var(--bg) 60%) fixed, var(--bg); color: var(--ink); font: 300 16px/1.65 Inter, system-ui, sans-serif; overflow-x: hidden; }
h1, h2, h3 { font-family: "Cormorant Garamond", serif; font-weight: 400; margin: 0; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.hand { font-family: Caveat, cursive; font-size: 1.35rem; line-height: 1.45; white-space: pre-wrap; }
.is-ph { color: var(--mute); font-style: italic; opacity: .8; }
.date { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pink2); }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 20px; backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.row-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shell { max-width: 1000px; margin: 0 auto; padding: 16px; }

.floaters { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fl { position: absolute; bottom: -40px; color: var(--pink); opacity: 0; animation: rise linear infinite; text-shadow: 0 0 12px rgba(246,198,214,.7); }
.fl.spark { color: #fff; }
@keyframes rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .5; } 85% { opacity: .35; } 100% { transform: translateY(-110vh) rotate(40deg); opacity: 0; } }

.hero { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.kicker { letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; color: var(--pink2); }
.hero h1 { font-size: clamp(3rem, 11vw, 7.5rem); line-height: 1; text-shadow: 0 0 40px rgba(246,198,214,.35); }
.hero h1 em { color: var(--pink); font-style: normal; }
.lead { max-width: 520px; color: var(--mute); font-size: 1.1rem; margin: 22px auto 34px; }
.scroll-hint { position: absolute; bottom: 24px; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

.btn-main { background: linear-gradient(135deg, var(--pink), var(--pink2)); color: #1a0b10; border: 0; border-radius: 999px; padding: 15px 32px; font-weight: 500; box-shadow: 0 0 30px rgba(246,198,214,.35); transition: transform .25s, box-shadow .25s; }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 0 46px rgba(246,198,214,.55); }
.btn-main:disabled { opacity: .5; }
.btn-main.sm { padding: 9px 18px; font-size: .9rem; }
.btn-soft { display: inline-block; background: rgba(246,198,214,.1); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: .82rem; text-decoration: none; transition: background .2s; }
.btn-soft:hover { background: rgba(246,198,214,.22); }
.btn-soft.danger { color: #ffb3c0; }
.btn-add { display: block; margin: 28px auto 0; background: none; border: 1.5px dashed var(--pink2); color: var(--pink); border-radius: 16px; padding: 14px 26px; }
.btn-add:hover { background: rgba(246,198,214,.08); }
.link { background: none; border: 0; color: var(--mute); text-decoration: underline; }

main { position: relative; z-index: 1; }
.sec { max-width: 1080px; margin: 0 auto; padding: 90px 18px; position: relative; }
.sec > h2 { text-align: center; font-size: clamp(2.1rem, 6vw, 3.4rem); }
.sub { text-align: center; color: var(--mute); font-style: italic; margin: 6px 0 40px; font-family: "Cormorant Garamond", serif; font-size: 1.2rem; }
.sec.is-hidden { opacity: .45; }
.album { font-family: Caveat, cursive; font-size: 1.8rem; color: var(--pink); font-weight: 400; margin: 30px 0 10px; text-align: center; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

.letter { position: relative; max-width: 680px; margin: 40px auto 0; background: #fbf3f5; color: #3a2028; padding: 48px 34px; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px rgba(246,198,214,.12); transform: rotate(-.6deg);
	background-image: repeating-linear-gradient(transparent 0 33px, rgba(200,120,150,.18) 33px 34px); }
.letter-text { margin: 0; font-size: 1.5rem; line-height: 34px; }
.sign { text-align: right; margin: 20px 0 0; }
.tape { position: absolute; width: 90px; height: 26px; background: rgba(246,198,214,.55); top: -12px; }
.tape.l { left: 24px; transform: rotate(-8deg); } .tape.r { right: 24px; transform: rotate(7deg); }

.list-timeline { position: relative; max-width: 720px; margin: 0 auto; }
.list-timeline::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--pink), transparent); }
.tl-item { display: flex; gap: 18px; margin-bottom: 28px; }
.tl-dot { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #1a0d12; border: 1px solid var(--pink); color: var(--pink); box-shadow: 0 0 18px rgba(246,198,214,.4); z-index: 1; }
.tl-card { padding: 22px; flex: 1; transition: transform .3s; }
.tl-card:hover { transform: translateX(4px); }
.tl-card h3 { font-size: 1.6rem; margin: 4px 0; }
.tl-card p { color: var(--mute); margin: 0; }
.tl-img { margin-top: 14px; border-radius: 12px; max-height: 260px; object-fit: cover; width: 100%; cursor: zoom-in; }

.list-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px; }
.polaroid { position: relative; margin: 0; background: #fbf3f5; padding: 12px 12px 14px; border-radius: 4px; color: #3a2028; transform: rotate(var(--r)); transition: transform .35s, box-shadow .35s; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.polaroid:hover { transform: rotate(0) scale(1.03); box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 30px rgba(246,198,214,.2); }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; }
.polaroid .tape { left: 50%; margin-left: -45px; }
.polaroid figcaption { font-family: Caveat, cursive; font-size: 1.3rem; text-align: center; margin-top: 8px; }
.polaroid figcaption small { display: block; font-family: Inter; font-size: .7rem; color: #a07888; }
.polaroid .is-ph { color: #a07888; }
.ph { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: .82rem; color: #b0708a;
	background: repeating-linear-gradient(45deg, #f6e3ea 0 10px, #f2d9e2 10px 20px); border: 1.5px dashed #e3a6bd; border-radius: 4px; }
.ph span { font-size: 1.8rem; }

.list-videos, .list-cards, .list-notes, .list-favorites { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.vid-card { text-align: left; padding: 0; overflow: hidden; width: 100%; transition: transform .3s; }
.vid-card:hover { transform: translateY(-4px); }
.vid-thumb { position: relative; aspect-ratio: 16/9; background: #1a0d12; }
.vid-thumb img, .vid-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-thumb .ph { aspect-ratio: auto; height: 100%; border-radius: 0; }
.play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(246,198,214,.9); color: #1a0b10; box-shadow: 0 0 30px rgba(246,198,214,.6); }
.vid-body { padding: 16px 18px 20px; }
.vid-body h3 { font-size: 1.4rem; } .vid-body p { color: var(--mute); margin: 4px 0 0; }

.list-songs { display: grid; gap: 22px; max-width: 820px; margin: 0 auto; }
.song { display: flex; gap: 22px; padding: 20px; cursor: pointer; transition: transform .3s; flex-wrap: wrap; }
.song:hover { transform: translateY(-3px); }
.cover { flex: 0 0 140px; height: 140px; }
.cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.vinyl { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, var(--pink) 0 14%, #111 15% 17%, #1c1c1c 18% 100%); background-image: radial-gradient(circle, var(--pink) 0 14%, #111 15%), repeating-radial-gradient(#151515 0 2px, #222 3px 4px); animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.song-body { flex: 1; min-width: 200px; }
.song h3 { font-size: 1.6rem; } .artist { color: var(--pink); margin: 0 0 8px; }
.song-body p { margin: 0 0 8px; }
.embed { width: 100%; height: 152px; border: 0; border-radius: 12px; margin-top: 10px; }

.ap-card { padding: 26px; transition: transform .3s, box-shadow .3s; }
.ap-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 30px rgba(246,198,214,.15); }
.ap-icon { font-size: 1.6rem; color: var(--pink); }
.ap-card h3 { font-size: 1.5rem; margin: 6px 0; } .ap-card p { color: var(--mute); margin: 0; white-space: pre-wrap; }
.ap-img { margin-top: 12px; border-radius: 10px; width: 100%; max-height: 180px; object-fit: cover; cursor: zoom-in; }

.list-little { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.list-little .item { width: min(210px, 100%); }
.note { background: #f6c6d6; color: #3a2028; padding: 18px; min-height: 130px; font-family: Caveat, cursive; font-size: 1.35rem; transform: rotate(var(--r)); box-shadow: 0 10px 24px rgba(0,0,0,.45); transition: transform .3s; }
.note:hover { transform: rotate(0) scale(1.05); }
.note b { display: block; font-weight: 400; } .note .is-ph { color: #7a4b5c; }

.list-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.reason { display: flex; gap: 14px; align-items: baseline; padding: 16px 18px; border-bottom: 1px solid var(--line); transition: background .3s; border-radius: 12px; }
.reason:hover { background: var(--glass); }
.num { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; color: var(--pink); }
.reason p { margin: 0; }

.list-bucket { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.bucket { display: flex; gap: 16px; align-items: center; width: 100%; text-align: left; padding: 16px 20px; transition: transform .25s; }
.bucket:hover { transform: translateX(4px); }
.bucket small { display: block; color: var(--mute); }
.check { flex: 0 0 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--pink); display: grid; place-items: center; color: #1a0b10; }
.bucket.done .check { background: var(--pink); animation: pop .5s; box-shadow: 0 0 18px var(--pink); }
.bucket.done strong { text-decoration: line-through; opacity: .6; }
@keyframes pop { 40% { transform: scale(1.4); } }

.memo { padding: 24px; } .memo h3 { font-size: 1.4rem; color: var(--pink); }
.memo img { border-radius: 10px; margin-top: 10px; cursor: zoom-in; } .memo audio { width: 100%; margin-top: 10px; }
.fav { padding: 24px; } .fav h3 { font-size: 1.5rem; } .fav ul { padding-left: 18px; color: var(--mute); }

.final { text-align: center; padding: 140px 18px; overflow: hidden; }
.glow { position: absolute; inset: 0; margin: auto; width: 420px; max-width: 90%; aspect-ratio: 1; background: radial-gradient(circle, rgba(246,198,214,.28), transparent 65%); animation: beat 4s ease-in-out infinite; z-index: -1; }
@keyframes beat { 50% { transform: scale(1.12); opacity: .7; } }
.final-text { max-width: 640px; margin: 30px auto 0; font-size: 1.6rem; }
.foot { position: relative; z-index: 1; text-align: center; padding: 40px 16px 100px; color: var(--mute); display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: .85rem; }

.player { position: fixed; bottom: 16px; right: 16px; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; max-width: calc(100% - 32px); }
.pp { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--pink); color: #1a0b10; font-size: .8rem; }
.ptitle { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x { background: none; border: 0; color: var(--mute); font-size: 1.2rem; }
.eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; } .eq i { width: 3px; height: 4px; background: var(--pink); }
.player.on .eq i { animation: eq .8s ease-in-out infinite; } .player.on .eq i:nth-child(2) { animation-delay: .2s; } .player.on .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 50% { height: 14px; } }

.editbar { position: sticky; top: 8px; z-index: 30; margin: 8px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: rgba(20,10,14,.9); }
.editbar .status { color: var(--pink); flex: 1; font-size: .85rem; }
.editor, .sec-tools, .music-set { margin-top: 10px; padding: 14px; border: 1px dashed var(--pink2); border-radius: 14px; background: rgba(0,0,0,.35); display: grid; gap: 10px; }
.sec-tools { margin-bottom: 26px; }
.music-set { max-width: 640px; padding: 22px; }
.ed-field { display: grid; gap: 4px; font-size: .78rem; color: var(--mute); }
.ed-field:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 8px; }
.ed-input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .9rem; }
.letter .ed-input { background: #fff; color: #3a2028; margin-bottom: 8px; }
.letter-ed { font-family: Caveat, cursive; font-size: 1.3rem; }
.media-field { display: grid; gap: 6px; } .mini { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; }
.err { color: #ffb3c0; }

.modal { position: fixed; inset: 0; z-index: 50; background: rgba(5,2,3,.88); display: grid; place-items: center; padding: 16px; animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.pass { padding: 28px; display: grid; gap: 12px; width: min(360px, 100%); background: #160b0f; }
.pass small { color: var(--mute); }
.lb-inner { max-width: 1000px; width: 100%; text-align: center; animation: zoom .35s ease; }
@keyframes zoom { from { transform: scale(.92); opacity: 0; } }
.lb-inner img, .lb-inner video { max-height: 80vh; max-width: 100%; border-radius: 12px; }
.lb-inner iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; }
.close { position: fixed; top: 14px; right: 18px; background: none; border: 0; font-size: 2rem; color: var(--ink); }

.loading { min-height: 100vh; display: grid; place-items: center; color: var(--pink); }
.spinner { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--pink); border-radius: 50%; animation: spin 1s linear infinite; }
.alert { padding: 12px 16px; border-radius: 12px; } .alert-error { background: rgba(255,120,150,.12); border: 1px solid rgba(255,120,150,.4); color: #ffc0cc; }
.empty { text-align: center; color: var(--mute); padding: 30px; } .empty-title { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { *, .fl { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }