:root { --ink:#f8f3f5; --muted:#c1b8bc; --rose:#ff5f86; --rose-light:#ffbed0; --violet:#bda7ff; --bg:#110f12; --panel:rgba(255,255,255,.08); --line:rgba(255,255,255,.14); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:"Noto Serif SC",serif; overflow-x:hidden; } button,input,textarea { font:inherit; } button { cursor:pointer; }
.ambient { position:fixed; border-radius:50%; pointer-events:none; filter:blur(90px); opacity:.3; z-index:-1; }.ambient-one { width:52vw;height:52vw;top:-15vw;left:-18vw;background:#f04678;animation:drift 14s ease-in-out infinite alternate; }.ambient-two { width:45vw;height:45vw;right:-14vw;top:42vh;background:#725bff;animation:drift 18s ease-in-out infinite alternate-reverse; } @keyframes drift { to { transform:translate(8vw,8vh) scale(1.15); } }
.topbar { height:78px; width:min(1300px,calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; }.brand { color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; letter-spacing:.5px; display:flex; align-items:center; gap:12px; }.brand-orbit { width:22px;height:22px;border:1px solid var(--rose);border-radius:50%;display:block;position:relative;box-shadow:0 0 22px rgba(255,95,134,.7)}.brand-orbit:after { content:""; width:5px;height:5px;background:var(--rose-light);border-radius:50%;position:absolute;top:-3px;right:1px; }.edit-trigger { border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.07); backdrop-filter:blur(16px); border-radius:999px; height:42px; min-width:92px; padding:0 15px; display:flex; gap:7px; align-items:center; justify-content:center; transition:.25s ease; }.edit-trigger span { color:var(--rose-light); font-size:20px; line-height:1; }.edit-trigger:hover { border-color:rgba(255,190,208,.8); background:rgba(255,95,134,.17); transform:scale(1.04); }
.section-wrap { width:min(1240px,calc(100% - 48px)); margin:auto; }.hero { min-height:calc(100vh - 78px); min-height:650px; display:flex; align-items:center; position:relative; isolation:isolate; padding:100px 8%; overflow:hidden; border:1px solid var(--line); border-radius:32px; background:#171216; box-shadow:inset 0 1px rgba(255,255,255,.12), 0 40px 110px rgba(0,0,0,.34); }.hero-photo { position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(17,10,15,.92) 0%,rgba(26,13,20,.58) 43%,rgba(20,9,16,.18) 100%),linear-gradient(0deg,rgba(7,5,7,.52),transparent 46%),url('/assets/hero-couple.jpg') center/cover;filter:saturate(.93) contrast(1.07);transform:scale(1.015); }.hero-aurora { position:absolute; width:68%;aspect-ratio:1;right:-12%;top:-20%;border-radius:50%;background:radial-gradient(circle at 42% 45%,rgba(255,157,190,.42),rgba(181,130,255,.15) 33%,transparent 63%);filter:blur(6px);z-index:-2;animation:pulse 8s ease-in-out infinite alternate;mix-blend-mode:screen; }.hero-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 70%);z-index:-1; }.window-controls { position:absolute;top:23px;left:26px;display:flex;gap:8px;z-index:2; }.window-controls span { width:10px;height:10px;border-radius:50%;box-shadow:inset 0 1px rgba(255,255,255,.35); }.window-controls span:nth-child(1){background:#ff5f57}.window-controls span:nth-child(2){background:#febc2e}.window-controls span:nth-child(3){background:#28c840} @keyframes pulse { to { transform:translate(-30px,35px) scale(1.1); } }.hero-copy { width:min(725px,68%); }.eyebrow { color:var(--rose-light); font:11px "DM Mono",monospace;letter-spacing:1.8px;margin:0 0 18px; }.hero h1 { margin:0; font:clamp(58px,7.6vw,120px)/.92 "Ma Shan Zheng",cursive; font-weight:400; letter-spacing:0; text-wrap:balance; text-shadow:0 2px 18px rgba(0,0,0,.5),0 0 40px rgba(255,157,190,.25); }.hero h1 em { color:var(--muted); font-style:normal; font-size:.58em; vertical-align:middle; }.hero-intro { font-size:clamp(18px,2vw,25px); color:#f7e9ed; margin:31px 0; letter-spacing:1px;text-shadow:0 1px 10px rgba(0,0,0,.6); }.signature-line { display:flex;align-items:center;gap:12px;color:#e9dce0;font-size:14px;text-shadow:0 1px 8px #000 }.signature-line i { color:var(--rose-light);font-size:18px;font-style:normal;line-height:1; }.glass-card { background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(25px) saturate(140%);box-shadow:0 24px 60px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.45); }.love-clock { width:255px;height:255px;border-radius:50%;position:absolute;right:12%;bottom:13%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(8deg); }.love-clock:after { content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.22);border-radius:50%; }.love-clock span,.love-clock small,.love-clock p { position:relative;z-index:1; }.love-clock span { font:10px "DM Mono",monospace;letter-spacing:2px;color:var(--rose-light); }.love-clock strong { font:76px/.82 "DM Mono",monospace;letter-spacing:-6px;margin:12px 0 2px;color:#fff;position:relative;z-index:1; }.love-clock small { color:var(--muted); }.love-clock p { font:12px "DM Mono",monospace;margin:13px 0 0; }.orbit-label { position:absolute;right:36px;top:75px;color:rgba(255,255,255,.48);font:10px/1.55 "DM Mono",monospace;letter-spacing:1px;text-align:center; }.scroll-cue { position:absolute;bottom:39px;right:7%;color:var(--muted);font:11px "DM Mono",monospace;text-decoration:none;letter-spacing:1px;display:flex;gap:10px;align-items:center; }.scroll-cue span { height:31px;width:1px;background:var(--rose);display:block;animation:scrollLine 1.5s ease-in-out infinite; } @keyframes scrollLine { 50%{transform:translateY(7px);opacity:.3} }
.memory-section,.notes-section { padding:126px 0; }.section-heading h2 { font-size:clamp(32px,4.2vw,62px);line-height:1.25;margin:0;font-weight:500;letter-spacing:1px; }.photo-grid { margin-top:54px;display:grid;grid-template-columns:1.25fr .85fr 1fr;grid-auto-rows:250px;gap:18px; }.memory { position:relative;overflow:hidden;border-radius:18px;background:var(--panel);border:1px solid var(--line);min-height:220px; }.memory-0,.memory-3 { grid-row:span 2; }.memory-4 { grid-column:span 2; }.memory-image { width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1); }.memory:hover .memory-image { transform:scale(1.06); }.memory:after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 47%,rgba(7,6,8,.87));pointer-events:none; }.memory-caption { position:absolute;z-index:1;bottom:0;padding:22px;color:white; }.memory-caption span { font:10px "DM Mono",monospace;color:var(--rose-light); }.memory-caption strong { display:block;font-size:22px;font-weight:500;margin-top:5px; }.memory-caption p { margin:5px 0 0;font-size:13px;color:#eee; }.memory-empty { width:100%;min-height:176px;margin-top:33px;display:flex;align-items:center;gap:21px;text-align:left;padding:30px;border:1px solid rgba(255,190,208,.35);border-radius:20px;background:rgba(255,255,255,.04);color:var(--ink);transition:.25s; }.memory-empty:hover { background:rgba(255,95,134,.13);transform:translateY(-4px); }.empty-plus { width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--rose);font-size:29px;box-shadow:0 0 30px rgba(255,95,134,.5); }.memory-empty b,.memory-empty small { display:block; }.memory-empty b { font-size:19px; }.memory-empty small { color:var(--muted);margin-top:5px; }.memory-empty i { margin-left:auto;font-size:26px;font-style:normal;color:var(--rose-light); }.hidden { display:none!important; }
.split { display:flex;justify-content:space-between;align-items:end;gap:25px; }.small-button { border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;padding:11px 18px;border-radius:999px;transition:.25s; }.small-button:hover { background:var(--rose);border-color:var(--rose); }.notes-list { display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:48px; }.note { min-height:205px;padding:25px;border-radius:16px;background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.045));border:1px solid var(--line);box-shadow:inset 0 1px rgba(255,255,255,.17); }.note:nth-child(3n+2) { transform:translateY(24px); }.note-meta { display:flex;justify-content:space-between;color:var(--rose-light);font:10px "DM Mono",monospace;letter-spacing:1px; }.note p { white-space:pre-wrap;font-size:17px;line-height:1.85;margin:28px 0 0; }.note-empty { width:100%;margin-top:47px;border:0;border-bottom:1px solid var(--line);padding:17px 0;background:transparent;color:var(--muted);font-size:14px;text-align:left;display:flex;justify-content:space-between; }.note-empty span { color:var(--rose);font-size:20px; } footer { width:min(1240px,calc(100% - 48px));margin:auto;border-top:1px solid var(--line);padding:31px 0 45px;display:flex;justify-content:space-between;color:#8d8387;font:10px "DM Mono",monospace;letter-spacing:1px; }
.backdrop { display:none;position:fixed;inset:0;z-index:40;background:rgba(7,6,8,.67);backdrop-filter:blur(10px); }.drawer { position:fixed;z-index:41;top:0;right:0;height:100%;width:min(515px,100%);background:#201c21;border-left:1px solid rgba(255,255,255,.2);transform:translateX(102%);transition:transform .38s cubic-bezier(.2,.8,.2,1);box-shadow:-30px 0 90px rgba(0,0,0,.4); }.editing { overflow:hidden; }.editing .drawer { transform:none; }.editing .backdrop { display:block; }.drawer-head { height:112px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line); }.drawer-head h2 { margin:0;font-size:29px;font-weight:500; }.drawer-head .eyebrow { margin:0 0 7px; }.icon-button { width:38px;height:38px;border:1px solid var(--line);background:rgba(255,255,255,.07);border-radius:50%;color:white;font-size:25px;line-height:1; }.drawer-scroll { height:calc(100% - 112px);overflow:auto;padding:27px 28px calc(35px + env(safe-area-inset-bottom)); }.secret-label { font-size:13px;color:#f2e9ed;font-weight:600; }.secret-label input,.form-block input,.form-block textarea { width:100%;margin-top:7px;padding:11px 12px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;outline-color:var(--rose); }.helper { margin:9px 0 25px;color:#a89ba1;font-size:12px;line-height:1.7; }.form-block { border-top:1px solid var(--line);padding-top:25px; }.form-title { font-size:20px;margin:0 0 18px;font-weight:600; }.form-block label { display:block;font-size:13px;font-weight:600;margin:15px 0; }.two-col { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.upload-box { height:146px;border:1px dashed rgba(255,190,208,.6);border-radius:13px;background:rgba(255,95,134,.09);display:flex!important;flex-direction:column;align-items:center;justify-content:center;color:var(--rose-light);margin:0 0 16px!important; }.upload-box span { font-size:30px;line-height:1; }.upload-box small { color:#c3b4ba;font-weight:400;margin-top:8px; }.image-preview { width:100%;height:178px;object-fit:cover;border-radius:12px;margin-bottom:4px; }.save-button { margin-top:8px;width:100%;padding:13px;border:0;border-radius:12px;background:linear-gradient(120deg,var(--rose),#b64ddc);color:white;font-weight:600;box-shadow:0 10px 30px rgba(255,95,134,.22); }.status { min-height:18px;margin:16px 0 0;color:var(--rose-light);font-size:13px; }.status.ok { color:#aeeeca; }
@media (max-width:760px) { .topbar { height:68px;width:calc(100% - 28px); }.brand{font-size:12px;gap:8px}.brand-orbit{width:20px;height:20px}.edit-trigger{height:37px;min-width:75px;padding:0 12px;font-size:12px}.section-wrap{width:calc(100% - 28px)}.hero { min-height:calc(100svh - 68px);border-radius:23px;padding:63px 24px 76px;align-items:flex-start; }.hero-photo { background-position:59% center; background-image:linear-gradient(180deg,rgba(15,9,13,.58),rgba(18,8,15,.2) 45%,rgba(8,4,8,.78) 100%),linear-gradient(90deg,rgba(16,8,13,.63),transparent 80%),url('/assets/hero-couple.jpg'); }.window-controls{top:15px;left:17px;gap:5px}.window-controls span{width:7px;height:7px}.hero-copy{width:100%;z-index:1}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:15px}.hero h1{font-size:clamp(52px,16vw,74px);line-height:.94}.hero-intro{font-size:18px;line-height:1.65;margin:24px 0}.signature-line{font-size:12px}.signature-line i{font-size:14px}.love-clock{width:181px;height:181px;right:21px;bottom:101px;transform:rotate(7deg)}.love-clock strong{font-size:57px}.love-clock span{font-size:8px}.love-clock p{font-size:10px;margin-top:9px}.orbit-label{top:162px;right:18px;font-size:8px}.scroll-cue{bottom:28px;right:23px;font-size:9px}.scroll-cue span{height:25px}.memory-section,.notes-section{padding:92px 0}.section-heading h2{font-size:34px;line-height:1.34}.photo-grid{margin-top:34px;grid-template-columns:1fr 1fr;grid-auto-rows:183px;gap:10px}.memory{border-radius:13px;min-height:183px}.memory-0,.memory-3{grid-row:span 2}.memory-4{grid-column:span 2}.memory-caption{padding:14px}.memory-caption strong{font-size:16px}.memory-caption p{font-size:11px;line-height:1.5}.memory-empty{margin-top:19px;min-height:125px;padding:18px;gap:13px;border-radius:16px}.empty-plus{width:44px;height:44px;font-size:23px}.memory-empty b{font-size:15px}.memory-empty small{font-size:11px}.split{align-items:flex-start;flex-direction:column;gap:20px}.small-button{font-size:13px}.notes-list{grid-template-columns:1fr;margin-top:30px;gap:11px}.note{min-height:160px;padding:20px}.note:nth-child(3n+2){transform:none}.note p{font-size:16px;margin-top:20px}.note-empty{margin-top:26px;font-size:12px}.drawer{top:auto;bottom:0;height:min(87svh,750px);border-left:0;border-top:1px solid rgba(255,255,255,.22);border-radius:25px 25px 0 0;transform:translateY(103%)}.drawer-head{height:96px;padding:20px 21px}.drawer-scroll{height:calc(100% - 96px);padding:22px 21px calc(28px + env(safe-area-inset-bottom))}.two-col{gap:9px}footer{width:calc(100% - 28px);padding:24px 0 calc(31px + env(safe-area-inset-bottom));font-size:8px}.ambient-one{width:100vw;height:100vw;left:-65vw}.ambient-two{width:100vw;height:100vw;right:-68vw;top:48vh} }