@import "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--paper:#faf7f2;--paper2:#f2efea;--card:#fffdf9;--red:#c94b43;--ink:#2c2f3a;--body:#2c2f3a;--olive:#6a6d6b;--sage:#7fa68b;--amber:#c48a3b;--line:#2c2f3a1f;--press:#2c2f3a0d;--font-title:"Dancing Script", cursive;--font-body:"Spectral", serif;--font-mono:"IBM Plex Mono", monospace;--body-size:16px;--sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp6:24px;--sp8:32px;--r1:4px;--r2:8px;--r3:12px;--shadow-sm:0 4px 10px #2c2f3a14;--shadow-md:0 8px 22px #2c2f3a17;--shadow-lg:0 10px 26px #2c2f3a1a;--shadow-red:0 5px 14px #c94b434d;--stamp-r:5px;--stamp-p:15px}[data-theme=eye-care]{--paper:#1e1c1a;--paper2:#262320;--card:#262320;--red:#9f3b36;--ink:#f3ede2;--body:#e8e2d9;--olive:#9c988e;--sage:#6e8c78;--amber:#c9a05b;--line:#e8e2d929;--press:#e8e2d90f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-body);color:var(--ink);background:#e7e5df;min-height:100vh}.no-scroll::-webkit-scrollbar{width:0;height:0}.no-scroll{scrollbar-width:none}input::placeholder,textarea::placeholder{color:var(--olive);opacity:.5;font-style:italic}button{font-family:inherit}@keyframes pjpress{0%{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}@keyframes pjtoast{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes pjCountdown{0%{width:100%}to{width:0%}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.shimmer{background:linear-gradient(90deg, var(--paper2) 25%, var(--paper) 50%, var(--paper2) 75%);background-size:200% 100%;animation:1.4s infinite shimmer}@keyframes pjbar{0%{width:40%;left:-40%}60%{width:40%;left:100%}to{width:0;left:100%}}@keyframes pjFadeIn{0%{opacity:0}to{opacity:1}}@keyframes pjSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.001ms!important}}.book-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.stamp-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}@media (width>=360px){.stamp-grid{grid-template-columns:repeat(3,1fr)}}.pj-frame-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}@media (width>=360px){.pj-frame-grid{grid-template-columns:repeat(4,1fr)}}@media (width>=960px){body{background:var(--paper)}.book-grid{grid-template-columns:repeat(3,1fr)}.stamp-grid{grid-template-columns:repeat(5,1fr)}}.pj-login-page{background:#e7e5df;justify-content:center;align-items:center;min-height:100vh;padding:14px;display:flex;position:relative}@media (width>=440px){.pj-login-page{padding:24px}}.pj-login-card{background:var(--card);border-radius:16px;width:100%;max-width:380px;padding:24px 18px;box-shadow:0 8px 32px #2c2f3a1f}@media (width>=440px){.pj-login-card{padding:36px 32px}}.pj-login-title{font-family:var(--font-title);color:var(--ink);text-align:center;margin-bottom:4px;font-size:clamp(26px,8vw,34px)}.pj-envelope-card{background:#faf3e8;border-radius:16px;flex-direction:column;align-items:center;width:100%;padding:24px 18px 32px;display:flex;position:relative;box-shadow:0 8px 28px #2c2f3a1f}@media (width>=420px){.pj-envelope-card{padding:40px 32px 48px}}.pj-seal-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}@media (width<=359px){.pj-seal-grid{grid-template-columns:repeat(2,1fr);gap:16px}}.pj-friend-actions{flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;gap:8px;display:flex}.pj-desktop-content{max-width:820px;margin:0 auto;padding:32px 24px 64px}@media (width>=1200px){.pj-desktop-content{padding:32px 48px 64px}}.pj-desktop-back{padding:24px 24px 0}@media (width>=1200px){.pj-desktop-back{padding:24px 48px 0}}.pj-page{width:100%;max-width:580px;margin:0 auto;padding:8px 16px 80px}@media (width>=420px){.pj-page{padding:8px 20px 80px}}.pj-letter-card{background:var(--card);border-radius:16px;padding:24px 18px 28px;box-shadow:0 8px 28px #2c2f3a1a}@media (width>=420px){.pj-letter-card{padding:32px 28px 36px}}