:root { --ink:#352c31; --wine:#582838; --rose:#bd6c77; --cream:#fffaf1; --paper:#fffdf7; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; min-height:100vh; color:var(--ink); font-family:"DM Sans", sans-serif; background:#261c23; }
.lock-screen { min-height:100vh; display:grid; place-items:center; overflow:hidden; position:relative; padding:24px; background:radial-gradient(circle at 15% 10%, #5f3344 0, transparent 30%), radial-gradient(circle at 85% 90%, #412a3a 0, transparent 35%), #211921; }
.glow { width:460px; height:460px; border-radius:50%; filter:blur(40px); opacity:.4; position:absolute; background:#be6575; } .glow-one { top:-260px; left:-180px; } .glow-two { bottom:-280px; right:-150px; background:#9a5366; }
.lock-card { width:min(100%, 460px); position:relative; z-index:1; padding:54px 43px 34px; color:#fff8f2; text-align:center; border:1px solid rgba(255,255,255,.15); border-radius:24px; background:rgba(255,250,245,.1); box-shadow:0 28px 70px rgba(0,0,0,.32); backdrop-filter:blur(14px); }
.heart { display:inline-grid; place-items:center; width:55px; height:55px; border-radius:50%; font-size:27px; color:#4e2335; background:#f5d3d0; box-shadow:0 6px 22px #180d14; }.eyebrow,.date { margin:26px 0 10px; font-size:10px; letter-spacing:2.1px; font-weight:600; opacity:.72; }.lock-card h1 { font:600 43px/1.1 "Playfair Display", serif; margin:0; }.hint { max-width:280px; margin:18px auto 28px; font-size:14px; line-height:1.6; color:#f0dedc; }.lock-card input { display:block; width:100%; height:58px; padding:0 16px; border:1px solid rgba(255,255,255,.28); border-radius:12px; outline:0; color:#fff; letter-spacing:11px; text-align:center; font:500 23px "DM Sans", sans-serif; background:rgba(18,8,14,.27); }.lock-card input:focus { border-color:#f5cdcf; box-shadow:0 0 0 3px rgba(245,205,207,.15); }.lock-card input::placeholder { color:#e5c3c5; letter-spacing:8px; }.lock-card button { width:100%; margin-top:12px; height:55px; cursor:pointer; border:0; border-radius:12px; color:#40222e; background:#f2d2ce; font:600 14px "DM Sans", sans-serif; transition:.2s transform,.2s background; }.lock-card button:hover { transform:translateY(-2px); background:#ffe3df; }.lock-card button span { margin-left:9px; font-size:18px; }.error { height:18px; margin:10px 0 0; color:#ffd9d9; font-size:12px; }.lock-footer { margin:15px 0 0; color:#ecd6d2; font-size:11px; opacity:.75; }
.letter-screen { min-height:100vh; padding:70px 20px; position:relative; overflow:hidden; background:radial-gradient(ellipse at top, #875666, #392630 56%, #211a20); animation:letter-arrive .55s ease-out; }.letter-screen::before { content:""; position:absolute; inset:0; opacity:.12; background-image:radial-gradient(#fff 0.7px, transparent .7px); background-size:13px 13px; }.letter { position:relative; width:min(100%, 760px); margin:auto; padding:70px clamp(25px, 8vw, 82px) 58px; background:var(--paper); box-shadow:0 20px 50px rgba(10,4,8,.4); }.letter::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background-image:linear-gradient(90deg, transparent 0, rgba(122,82,47,.035) 45%, transparent 100%), radial-gradient(rgba(99,65,31,.18) .45px, transparent .55px); background-size:auto, 5px 5px; }.tape { position:absolute; top:-14px; width:106px; height:31px; background:rgba(222,172,163,.75); transform:rotate(-5deg); }.tape-left { left:33px; }.tape-right { right:34px; transform:rotate(5deg); }.letter>* { position:relative; z-index:1; }.date { color:#8a6b62; margin:0 0 17px; text-align:center; }.letter h1 { margin:0 0 43px; text-align:center; color:#452c34; font:600 clamp(34px, 6vw, 52px)/1.1 "Playfair Display", serif; }.letter h1 span { display:inline-block; margin-left:4px; font-size:.95em; vertical-align:-.08em; }.letter-body { font:400 16px/1.85 "DM Sans", sans-serif; }.letter-body p { margin:0 0 25px; }.letter-body strong { color:var(--wine); font-weight:600; }.letter blockquote { margin:31px 0; padding:16px 23px; border-left:3px solid var(--rose); color:#542c3b; font:italic 600 24px/1.45 "Playfair Display",serif; background:#fff8f2; }.closing { margin:47px 0 20px; color:#542433; text-align:center; font:600 19px/1.6 "Playfair Display",serif; }.signature-wrap { display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:9px; }.signature-face { display:block; width:94px; height:auto; }.signature { margin:0; color:#623444; text-align:center; font:600 38px/1 "Caveat",cursive; }.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; } @keyframes letter-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:500px) { .lock-card { padding:44px 25px 28px; }.lock-card h1 { font-size:38px; }.letter-screen { padding:40px 12px; }.letter { padding-top:58px; }.letter-body { font-size:15px; line-height:1.78; }.letter h1 { margin-bottom:32px; }.letter blockquote { font-size:21px; margin:25px 0; } }