:root { --white:#f7f7f5; --muted:#a4a5a7; --line:#ffffff1c; --glass:#111317b8; --accent:#ee9eae; --sans:'Manrope',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-height:100vh; background:#08090b; color:var(--white); font-family:var(--sans); }
.backdrop { position:fixed; inset:0; overflow:hidden; background:#08090b; filter:saturate(.55); }.backdrop video { width:100%; height:100%; object-fit:cover; }.backdrop:after { content:''; position:absolute; inset:0; background:linear-gradient(115deg,#111a25b8,#08090a99 58%,#1a171ac9),radial-gradient(circle at 50% 38%,transparent 0, #07080a99 73%); }.grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.rain { position:fixed; inset:-100% 0 0; z-index:1; pointer-events:none; opacity:.22; background-image:linear-gradient(112deg,transparent 0 47%,#dce8e941 48%,transparent 49%),linear-gradient(112deg,transparent 0 72%,#dce8e92e 73%,transparent 74%),linear-gradient(112deg,transparent 0 27%,#dce8e934 28%,transparent 29%); background-size:67px 130px,113px 190px,157px 230px; animation:rain-fall .9s linear infinite; }.rain:after { content:''; position:absolute; inset:0; opacity:.7; background-image:linear-gradient(112deg,transparent 0 61%,#ffffff2b 62%,transparent 63%),linear-gradient(112deg,transparent 0 16%,#ffffff24 17%,transparent 18%); background-size:191px 170px,89px 145px; animation:rain-fall 1.3s linear infinite reverse; } @keyframes rain-fall { to { transform:translateY(100%); } }
.entry-screen { position:fixed; inset:0; z-index:5; display:grid; place-items:center; background:#08090be0; backdrop-filter:blur(35px) saturate(.55); transition:opacity .8s, visibility .8s; }.entry-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }.license-form { width:min(100% - 40px, 310px); text-align:center; }.license-kicker { margin:0 0 23px; color:#85888a; font:9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.license-form h2 { margin:0; color:var(--white); font-size:31px; line-height:1; letter-spacing:-.07em; }.license-form h2 em { color:var(--accent); font-style:normal; font-weight:500; }.license-copy { margin:16px 0 24px; color:#9c9fa1; font-size:12px; }.license-form input { width:100%; border:1px solid #ffffff38; border-radius:9px; outline:0; padding:14px; background:#ffffff0a; color:var(--white); font:16px var(--mono); letter-spacing:.45em; text-align:center; transition:.2s; }.license-form input::placeholder { color:#777a7d; letter-spacing:.3em; }.license-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #ee9eae1a; }.license-form button { width:100%; margin-top:11px; border:1px solid var(--accent); border-radius:9px; padding:13px 15px; color:#10120e; background:var(--accent); font:11px var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:.25s; }.license-form button:hover { background:#f7bec8; transform:translateY(-2px); }.license-form button span { margin-left:13px; font-size:15px; }.license-error { min-height:16px; margin:12px 0 0; color:#ff8d82; font:10px var(--mono); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.loading-screen { position:fixed; inset:0; z-index:7; display:grid; place-content:center; justify-items:center; gap:18px; background:#08090bb8; backdrop-filter:blur(13px) saturate(.7); transition:opacity .7s, visibility .7s; }.loading-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }.loading-spinner { width:52px; height:52px; border:4px solid #ffffff2b; border-top-color:var(--accent); border-right-color:var(--accent); border-radius:50%; animation:loading-spin .75s linear infinite; }.loading-screen p { margin:0; color:#9c9fa1; font:11px var(--mono); letter-spacing:.08em; text-transform:uppercase; } @keyframes loading-spin { to { transform:rotate(360deg); } }
.license-form h2 > span { display:inline-block; position:relative; top:-160px; }
.license-form h2 > em { display:inline-block; position:relative; top:-160px; }
.license-form h2 { font-size:50px; }
.license-form h2 { font-family:'Caveat',cursive; font-weight:500; letter-spacing:-.03em; }
.license-form h2 > em { opacity:0; transition:opacity .25s ease; }.license-form h2 > em.title-visible { opacity:1; }
.profile-shell { position:relative; z-index:2; width:min(100%,650px); margin:0 auto; padding:70px 20px 35px; }.profile-card { position:relative; padding:40px 42px 27px; border:1px solid transparent; border-radius:20px; background:transparent; box-shadow:none; backdrop-filter:none; text-align:center; }.online-dot { position:absolute; top:20px; right:21px; width:8px; height:8px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px var(--accent); }.avatar-stack { display:grid; grid-template-columns:1fr; gap:16px; margin:0 auto 30px; }.avatar-stack img { width:100%; aspect-ratio:423 / 345; border:1px solid #ffffff29; border-radius:10px; object-fit:contain; background:#08090b; filter:saturate(.8); transition:transform .32s ease-out; will-change:transform; }.socials { display:flex; justify-content:center; gap:12px; margin:25px 0 29px; }.socials a { display:grid; place-items:center; width:35px; height:35px; border:1px solid #ffffff2b; border-radius:50%; color:#d8d9d5; font-size:14px; transition:.2s; }.socials a:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }.divider { border-top:1px solid var(--line); }.section-label { display:flex; justify-content:space-between; margin:22px 0 13px; color:#8d8f91; font:9px var(--mono); text-transform:uppercase; letter-spacing:.08em; }.section-label span:last-child { color:var(--accent); }.memory-row { display:flex; flex-direction:column; gap:9px; text-align:left; }.mini-memory { display:flex; align-items:center; gap:13px; padding:7px; border:1px solid transparent; border-radius:10px; transition:.2s; }.mini-memory:hover { border-color:var(--line); background:#ffffff08; }.mini-memory img { width:51px; height:45px; border-radius:7px; object-fit:cover; filter:saturate(.65); }.mini-memory strong,.mini-memory span { display:block; }.mini-memory strong { font-size:12px; font-weight:600; }.mini-memory span { margin-top:4px; color:#989a9c; font:9px var(--mono); }.profile-links { display:flex; gap:9px; margin-top:20px; }.profile-links a { flex:1; padding:12px 13px; border:1px solid var(--line); border-radius:9px; color:#c2c4c2; font:10px var(--mono); text-align:left; text-transform:uppercase; transition:.2s; }.profile-links a:hover { border-color:var(--accent); color:var(--accent); }.profile-links span { float:right; font-size:14px; }.music-player { display:flex; align-items:center; gap:13px; margin-top:13px; padding:13px 17px; border:1px solid var(--line); border-radius:13px; background:#101216bb; backdrop-filter:blur(12px); }.play-button { flex:0 0 31px; width:31px; height:31px; padding-left:3px; border:0; border-radius:50%; color:#111; background:var(--accent); font-size:10px; cursor:pointer; }.track-copy { min-width:145px; text-align:left; }.track-copy span,.track-copy strong { display:block; }.track-copy span { color:#808286; font:8px var(--mono); text-transform:uppercase; }.track-copy strong { margin-top:3px; font-size:10px; font-weight:500; }.waveform { display:flex; align-items:center; gap:3px; flex:1; height:24px; }.waveform i { display:block; width:2px; height:var(--h,10px); border-radius:2px; background:#8d9293; }.waveform i:nth-child(2n) { --h:16px; }.waveform i:nth-child(3n) { --h:6px; }.waveform i:nth-child(4n) { --h:21px; }.track-time { color:#77797c; font:9px var(--mono); }.footer-note { color:#85878a; font:9px var(--mono); text-align:center; }.footer-note span { padding:0 7px; color:var(--accent); }.toast { position:fixed; z-index:6; left:50%; bottom:25px; padding:12px 17px; border:1px solid #ffffff25; border-radius:8px; background:#121417ee; color:#ddd; font:10px var(--mono); opacity:0; transform:translate(-50%,15px); transition:.3s; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:520px) { .profile-shell { padding:28px 13px 25px; }.profile-card { padding:32px 18px 22px; border-radius:16px; }.music-player { padding:12px; }.track-copy { min-width:110px; }.waveform { display:none; }.track-time { margin-left:auto; } }
.profile-trigger:not(.open) .emoji-burst { opacity:0 !important; transform:translate(-50%, 15px) scale(.7) !important; pointer-events:none !important; }
.note-panel { width:min(92vw,650px); max-height:70vh; overflow:auto; padding:42px 44px; }.note-panel p { font-size:22px; line-height:1.65; }.profile-card.note-open .avatar-stack { margin-bottom:470px; }
.note-panel { position:fixed; z-index:11; top:50%; left:50%; width:min(88vw,820px); max-height:72vh; padding:58px 64px; border-color:#ffffff45; background:#111418e8; backdrop-filter:blur(22px); transform:translate(-50%, calc(-50% + 45px)) scale(.9); }.profile-trigger.note-open .note-panel { transform:translate(-50%, -50%) scale(1); }.note-panel p { font-size:clamp(20px,2.5vw,30px); line-height:1.7; }.profile-card.note-open .avatar-stack { margin-bottom:30px; } body:has(.profile-card.note-open) .backdrop { filter:blur(28px) saturate(.42); transform:scale(1.04); transition:filter .5s ease, transform .5s ease; } body:has(.profile-card.note-open) .grain { opacity:.04; }
.note-panel { width:100vw; max-width:none; height:calc(100vh - 24px); max-height:none; padding:clamp(35px,8vh,110px) clamp(24px,10vw,150px); border-radius:18px; display:flex; flex-direction:column; justify-content:center; }
.profile-card.note-open::before { content:''; position:fixed; inset:0; z-index:10; background:#08090b55; backdrop-filter:blur(18px); pointer-events:none; }.note-panel { z-index:11; width:min(86vw,860px); height:min(68vh,620px); padding:clamp(30px,5vw,70px); border-radius:18px; }
.profile-card.note-open { isolation:isolate; }.profile-card.note-open::before { z-index:0; }.profile-card.note-open > * { position:relative; z-index:1; }.profile-card.note-open .note-panel { position:fixed; z-index:11; top:50%; right:auto; bottom:auto; left:50%; filter:none; }
.profile-card.note-open::before { z-index:10; }.profile-card.note-open > * { z-index:auto; }.profile-card.note-open .note-panel { z-index:11; }
.profile-card.note-open .note-panel { inset:50% auto auto 50%; }
.profile-card.note-open .note-panel { width:min(620px,76vw); height:min(520px,62vh); max-height:none; padding:48px 52px; top:50%; left:50%; transform:translate(-50%, calc(-50% + 45px)) scale(.9); }.profile-trigger.note-open .note-panel { transform:translate(-50%, -50%) scale(1); }
.profile-card.note-open .note-panel { top:38%; height:min(460px,56vh); }.profile-trigger.note-open .note-panel { transform:translate(-50%, -50%) scale(1); }
.note-panel > span:first-child { display:block; margin:0 0 28px; color:var(--accent); font:600 clamp(24px,4vw,38px)/1 var(--sans) !important; letter-spacing:-.06em; text-align:center; text-transform:lowercase; }
.note-panel p.typing::after { content:'|'; display:inline-block; margin-left:3px; color:var(--accent); font-style:normal; animation:writing-caret .7s steps(1) infinite; } @keyframes writing-caret { 50% { opacity:0; } }
.note-panel p { white-space:pre-line; font-family:'Caveat',cursive; font-style:normal; font-size:clamp(24px,3vw,34px); line-height:1.3; }
.note-heart { position:absolute; color:#ff9da9 !important; font:20px/1 var(--sans) !important; opacity:.8; animation:heart-float 2.8s ease-in-out infinite; }.heart-one { top:22px; left:25px; }.heart-two { top:24px; right:27px; animation-delay:.7s; }.heart-three { bottom:23px; left:28px; animation-delay:1.4s; }.heart-four { right:25px; bottom:22px; animation-delay:2.1s; } @keyframes heart-float { 50% { opacity:.35; transform:translateY(-7px) scale(1.12); } }
@media (max-width:520px) { .profile-card.note-open .note-panel { width:calc(100vw - 32px); height:70vh; padding:30px 25px; } }
.memory-item img { cursor:zoom-in; }.media-viewer { position:fixed; inset:0; z-index:14; display:grid; place-items:center; padding:25px; background:#050608e8; backdrop-filter:blur(18px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }.media-viewer.open { opacity:1; visibility:visible; }.media-viewer img { max-width:min(92vw,1000px); max-height:90vh; border:1px solid #ffffff30; border-radius:12px; box-shadow:0 20px 80px #000; transform:scale(.92); transition:transform .35s ease; }.media-viewer.open img { transform:scale(1); }
.memory-item iframe { display:block; width:100%; height:190px; border:0; background:#08090b; } @media (max-width:650px) { .memory-item iframe { height:220px; } }
.animated-hearts { display:flex; justify-content:center; gap:10px; color:#ee9eae; font-size:16px; letter-spacing:0; }.animated-hearts i { display:block; font-style:normal; animation:heart-beat 1.2s ease-in-out infinite; }.animated-hearts i:nth-child(2) { animation-delay:.2s; }.animated-hearts i:nth-child(3) { animation-delay:.4s; } @keyframes heart-beat { 50% { color:#fff; transform:translateY(-4px) scale(1.2); } }
.memory-title { display:flex; align-items:center; justify-content:center; gap:15px; margin:0 auto 25px; color:#ee9eae; }.memory-title strong { color:#fff; font:500 clamp(22px,3vw,30px) 'Caveat',cursive; letter-spacing:.05em; }.memory-title span { font-size:17px; animation:heart-beat 1.2s ease-in-out infinite; }.memory-title span:last-child { animation-delay:.35s; }
.note-panel { visibility:hidden; }.profile-trigger.note-open .note-panel { visibility:visible; }
.memories-modal { position:fixed; inset:0; z-index:12; display:grid; place-items:center; padding:24px; background:#08090bea; backdrop-filter:blur(25px) saturate(.5); opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s; }.memories-modal.open { opacity:1; visibility:visible; }.memories-window { width:min(100%,1000px); min-height:82vh; padding:clamp(35px,7vh,90px) clamp(22px,6vw,80px); border:1px solid #ffffff2e; border-radius:20px; background:#111418d9; box-shadow:0 25px 90px #000c; transform:translateY(30px) scale(.96); transition:transform .55s cubic-bezier(.2,.8,.2,1); }.memories-modal.open .memories-window { transform:translateY(0) scale(1); }.memories-heading { text-align:center; }.memories-heading span { color:#ff9da9; font-size:28px; }.memories-heading p { margin:10px 0 5px; color:#f4f5f1; font:500 clamp(25px,4vw,42px) var(--sans); letter-spacing:-.06em; }.memories-heading small { color:#8d9192; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; }.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:46px; }.video-slot { overflow:hidden; border:1px solid #ffffff26; border-radius:13px; background:#08090b; }.video-slot video { display:block; width:100%; height:clamp(220px,34vh,360px); object-fit:cover; background:#08090b; }.video-slot > span { display:block; padding:14px 16px; color:#aaaeb0; font:10px var(--mono); text-transform:uppercase; }.memories-modal.open .video-slot { animation:memory-rise .55s both; }.memories-modal.open .video-slot:nth-child(2) { animation-delay:.12s; } @keyframes memory-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:650px) { .memories-modal { padding:12px; }.memories-window { min-height:90vh; padding:35px 16px; border-radius:14px; }.video-grid { grid-template-columns:1fr; gap:14px; margin-top:30px; }.video-slot video { height:210px; } }
.memory-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-height:58vh; overflow-y:auto; margin-top:42px; padding:4px 8px 14px 2px; scrollbar-color:#ee9eae55 transparent; }.memory-item { margin:0; overflow:hidden; border:1px solid #ffffff24; border-radius:12px; background:#08090b; box-shadow:0 8px 25px #0005; animation:memory-rise .55s both; }.memory-item:nth-child(2n) { animation-delay:.08s; }.memory-item:nth-child(3n) { animation-delay:.16s; }.memory-item img,.memory-item video { display:block; width:100%; height:190px; object-fit:cover; background:#08090b; }.memory-item figcaption { padding:12px 14px; color:#aeb1b2; font:9px var(--mono); text-transform:uppercase; letter-spacing:.06em; } @media (max-width:650px) { .memory-gallery { grid-template-columns:1fr; max-height:64vh; }.memory-item img,.memory-item video { height:220px; } }
.note-panel { position:absolute; z-index:4; top:calc(100% + 74px); left:50%; width:min(100%,350px); padding:22px 24px; border:1px solid #ffffff30; border-radius:12px; background:#111418f2; box-shadow:0 14px 35px #000b; text-align:left; opacity:0; transform:translate(-50%, 12px) scale(.95); pointer-events:none; transition:opacity .35s, transform .4s cubic-bezier(.2,.8,.2,1); }.note-panel > span { color:var(--accent); font:9px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.note-panel p { margin:12px 0 0; color:#eceee8; font:italic 17px/1.5 Georgia,serif; }.profile-trigger.note-open .note-panel { opacity:1; transform:translate(-50%, 0) scale(1); pointer-events:auto; }.profile-card.note-open .avatar-stack { margin-bottom:250px; }
.cursor-particle { position:fixed; z-index:10; width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; pointer-events:none; animation:particle-fade .8s ease-out forwards; } @keyframes particle-fade { 0% { opacity:.95; transform:scale(1) translate(0,0); } 100% { opacity:0; transform:scale(0) translate(var(--drift-x),var(--drift-y)); } }
.spotify-embed { width:100%; margin:0 auto 4px; overflow:hidden; border-radius:12px; box-shadow:0 12px 30px #00000045; }.spotify-embed iframe { display:block; border:0; }
.cat-photo { position:relative; width:100%; aspect-ratio:423 / 345; }.cat-photo > img:first-child { height:100%; }.cat-ears { position:absolute; z-index:2; inset:0; width:100%; height:100%; object-fit:fill !important; border:0 !important; border-radius:0 !important; background:transparent !important; filter:none !important; pointer-events:none; }
.avatar-stack { width:88%; }.cat-ears { inset:0 0 auto; height:auto !important; aspect-ratio:auto !important; object-fit:contain !important; }
.profile-trigger { position:relative; display:block; width:100%; cursor:pointer; }.profile-trigger img { display:block; }.profile-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:10px; }.emoji-burst { position:absolute; z-index:3; top:calc(100% + 14px); left:50%; display:flex; gap:9px; opacity:0; transform:translate(-50%, 15px) scale(.7); pointer-events:none; transition:opacity .3s, transform .45s cubic-bezier(.2,.8,.2,1); }.profile-trigger:hover .emoji-burst,.profile-trigger:focus-within .emoji-burst,.profile-trigger.open .emoji-burst { opacity:1; transform:translate(-50%, 0) scale(1); pointer-events:auto; }.emoji-burst button { display:grid; place-items:center; width:43px; height:43px; padding:0; border:1px solid #ffffff52; border-radius:50%; color:#fff; background:#111418e8; box-shadow:0 7px 22px #000b; font-size:20px; cursor:pointer; transition:.2s; }.emoji-burst button:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-4px) rotate(-8deg); }.profile-card.revealed .avatar-stack { margin-bottom:100px; }.profile-card.revealed .spotify-embed { transform:translateY(30px); }.spotify-embed { transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.memory-modal { position:fixed; inset:0; z-index:8; display:grid; place-items:end center; padding:20px; background:#08090b88; backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }.memory-modal.open { opacity:1; visibility:visible; }.memory-window { position:relative; padding:20px; transform:translateY(110px); transition:transform .5s cubic-bezier(.2,.8,.2,1); }.memory-modal.open .memory-window { transform:translateY(0); }.modal-tabs { display:flex; justify-content:center; gap:16px; }.modal-tab { display:grid; place-items:center; width:58px; height:58px; border:1px solid #ffffff35; border-radius:50%; color:#d9dbd7; background:#111418dd; font:30px var(--sans); cursor:pointer; box-shadow:0 8px 25px #0008; transition:.25s; }.modal-tab.active,.modal-tab:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-5px) scale(1.05); }