:root{--bg:#0d0f13;--card:#131721;--text:#e9e9ed;--muted:#9aa0aa;--accent:#ff6fa9}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Noto Sans',sans-serif}
#stars{position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 800px at 50% 20%, rgba(255,111,169,.07), transparent 60%)}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;max-width:1200px;margin:0 auto 60px;padding:0 16px}
.panel.left{position:relative;cursor:pointer}
.covercard{position:relative;height:72vh;min-height:420px;border-radius:18px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.covercard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.06)}
.covercard .mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))}
.covertext{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 22px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.covertext h1{margin:0 0 .4rem;font-size:clamp(22px,3.8vw,34px)}
.covertext .hint{margin:0;color:#e9e9ef}
.grid{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:16px 14px;text-align:left;cursor:pointer;transition:transform .2s ease, border-color .2s ease;color:inherit;min-height:120px;display:flex;flex-direction:column;justify-content:center}
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.card:focus{outline:2px solid var(--accent); outline-offset:3px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:1rem;z-index:10000}
.modal.hidden{display:none}
.modal-inner{position:relative;max-width:900px;width:95%;background:#0f131b;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.4);overflow:hidden}
.close{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:999px;border:0;background:#fff;color:#111;font-weight:800;font-size:18px;cursor:pointer}
/* Letter Paper */
.letter{padding:18px}
.paper{background:linear-gradient(180deg,#fff,#fafafa);color:#222;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:22px 22px 26px;border:1px solid #eee;position:relative}
.paper:before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(#f7f7f7 0,#f7f7f7 28px, #e9f0ff 29px);opacity:.4;pointer-events:none;border-radius:12px}
.paper h3{margin:.2rem 0 .6rem;font-size:1.2rem}
.paper p{color:#333;line-height:1.9;white-space:pre-wrap}
/* Moments Masonry */
.moments{padding:12px}
.masonry{columns:1;column-gap:12px}
@media(min-width:680px){.masonry{columns:2}}@media(min-width:1000px){.masonry{columns:3}}
.masonry figure{break-inside:avoid;background:#0b0f16;border:1px solid rgba(255,255,255,.06);border-radius:12px;margin:0 0 12px;overflow:hidden}
.masonry img{width:100%;display:block}
.masonry figcaption{padding:.6rem .7rem;color:#d9dbe3;font-size:.95rem;background:linear-gradient(0deg,rgba(255,255,255,.03),transparent)}
/* Notes */
.notes{padding:18px}
.flipcard{margin:10px auto 0; width:min(560px,92%); perspective:1200px;}
.flip-inner{position:relative; width:100%; min-height:120px; transform-style:preserve-3d; transition:transform .36s ease;}
.flip-inner.open{transform:rotateY(180deg);}
.flip-front,.flip-back{
  position:absolute; inset:0; display:grid; place-items:center; padding:18px;
  border-radius:14px; border:1px dashed rgba(255,255,255,.22); background:#0b0f16; backface-visibility:hidden; 
  font-size:1.02rem; color:#d9dbe3;
}
.flip-back{transform:rotateY(180deg); border-style:solid;}
.drawbtn{background:#ff6fa9;color:#fff;border:0;border-radius:12px;padding:.6rem 1rem;font-weight:800;cursor:pointer}
.drawbtn:hover{opacity:.95}
/* Gate */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(150deg,#ffd6e7,#fff)}
.gate-card{background:#fff;color:#111;border-radius:16px;padding:18px;box-shadow:0 14px 36px rgba(0,0,0,.15);max-width:420px;width:92%;text-align:center}
.gate-card input{width:100%;padding:.7rem .9rem;border-radius:12px;border:1px solid #ddd;font-size:16px}
.gate-card button{margin-top:.7rem;width:100%;padding:.7rem .9rem;border-radius:12px;border:0;background:#ff6fa9;color:#fff;font-weight:800;cursor:pointer}
.gate-card #gate-msg{margin-top:.5rem;color:#c14}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:12px;margin-top:10px}
  .covercard{height:48vh;min-height:320px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
}


/* Single-photo viewer */
.viewer{padding:10px}
.viewer-img{background:#000;display:grid;place-items:center;min-height:40vh}
.viewer-img img{max-width:100%;max-height:70vh;display:block}
.viewer-cap{color:#d9dbe3;text-align:center;padding:.7rem 1rem;background:linear-gradient(0deg,rgba(255,255,255,.03),transparent)}
.viewer-nav{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:.6rem}
.vbtn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;width:44px;height:44px;font-size:22px;font-weight:700;cursor:pointer}
.vpos{color:#9aa0aa;min-width:90px;text-align:center}