@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#534743;--muted:#9a8981;--paper:#fcf8f3;--rose:#b56d76;--line:#e8ddd4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans','Noto Sans SC',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #b56d76;outline-offset:4px}header{max-width:1300px;margin:auto;height:98px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);font-weight:700;font-size:17px;letter-spacing:1px}.brand-icon{font-size:20px;display:grid;place-items:center;width:40px;height:40px;background:#f3e2df;color:#b9747c;box-shadow:3px 3px 0 #e4cecb;border-radius:7px}.brand small{display:block;font-size:8px;letter-spacing:1.4px;color:var(--muted);margin-top:5px}.header-actions{display:flex;gap:23px;align-items:center}.quiet{border:0;background:none;color:var(--muted);font-size:12px}.edit-btn{background:#f1e2df;border:1px solid #e2c8c6;color:#9b626a;padding:10px 17px;border-radius:7px;font-size:12px;box-shadow:0 2px 0 #ead8d3}main{max-width:1160px;margin:auto;padding:0 28px}.intro{text-align:center;padding:44px 0 29px}.eyebrow{font-size:10px;letter-spacing:3px;color:#b57c79;display:flex;justify-content:center;align-items:center;gap:10px}.eyebrow span{width:5px;height:5px;background:#b57c79;transform:rotate(45deg)}h1{font-size:35px;font-weight:600;letter-spacing:3px;margin:13px 0 12px}.intro p{font-size:12px;color:var(--muted);letter-spacing:.5px}.intro b{font-weight:500;color:#a27272}.anniversary{display:inline-flex;gap:10px;align-items:center;border:1px solid #e9dcd3;border-radius:25px;padding:9px 15px;background:#fffdf9;font-size:11px;margin-top:11px;letter-spacing:.3px}.heart{color:#bf7f82}.anniversary button{background:none;border:0;color:#a78e82}.world-card{border:1px solid #ded6c9;border-radius:13px;overflow:hidden;background:#f4f2e8;box-shadow:0 6px 0 #eee5dc,0 14px 30px #7f6e5010}.world-top{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 23px;font-size:11px;background:#fbf8ef;border-bottom:1px solid #e5dccf;letter-spacing:.4px}.world-top i{display:inline-block;width:6px;height:6px;background:#8f9c71;margin-right:7px;border-radius:50%}.weather{font-size:10px;border:0;background:none;color:#9f8d70}.world{position:relative;background:#bbdcd9;aspect-ratio:960/590;overflow:hidden}canvas{width:100%;height:100%;display:block;image-rendering:pixelated;cursor:crosshair}.sign{position:absolute;border:1px solid #ad9170;background:#fff7e4ee;box-shadow:2px 3px 0 #85755c33;padding:7px 10px;border-radius:3px;font-size:11px;white-space:nowrap;transition:transform .2s}.sign:hover{transform:translateY(-3px)}.sign span{color:#a47c69;margin-right:5px}.sign b{font-weight:400;color:#b8a58d;margin-left:7px}.photo{left:24%;top:42%}.letter{left:71%;top:35%}.garden{left:63%;top:67%}.ticket{left:26%;top:75%}.world-note{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);background:#fff9e9d9;box-shadow:2px 2px 0 #5d918d20;border:1px solid #e6e7d2;border-radius:5px;padding:8px 14px;font-size:10px;letter-spacing:1px;white-space:nowrap;color:#7e8879;pointer-events:none}.pixel-heart{color:#bf8386;margin-right:6px}.coordinate{position:absolute;right:17px;bottom:18px;font-size:8px;color:#6f9690;letter-spacing:1px;pointer-events:none}.world-bottom{background:#fbf8ef;padding:13px 23px;display:flex;justify-content:space-between;align-items:center}.residents{display:flex;gap:7px;align-items:center;font-size:10px}.residents small{color:#afa08b;margin-left:7px;font-size:9px}.avatar-mini{width:19px;height:24px;display:inline-flex;align-items:center}.avatar-mini canvas{image-rendering:pixelated}.bottom-note{color:#a39580;font-size:9px;letter-spacing:1px}.places{padding:31px 0 24px}.section-label{font-size:12px;font-weight:500;letter-spacing:.5px;margin-bottom:16px}.section-label span{margin-left:14px;font-size:10px;color:var(--muted);font-weight:400}.place-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.place-card{text-align:left;position:relative;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fffcf8;border-radius:7px;padding:18px 11px;transition:transform .2s,box-shadow .2s}.place-card:hover{transform:translateY(-4px);box-shadow:0 5px 15px #806c5010}.card-icon{width:35px;height:38px;display:grid;place-items:center;font-size:22px;flex-shrink:0;border-radius:5px}.rose{background:#f6e4df;color:#b87d78}.blue{background:#e2efef;color:#6e9699}.yellow{background:#f4ebd5;color:#b59d60}.green{background:#e7eddd;color:#8b9f74}.place-card b{display:block;font-size:12px;font-weight:500;letter-spacing:.5px}.place-card small{display:block;font-size:8px;color:#a5958b;margin-top:6px}.place-card i{position:absolute;right:9px;top:8px;font-style:normal;font-size:8px;color:#b7a99b}footer{max-width:1104px;border-top:1px solid var(--line);margin:0 auto;padding:22px 0 27px;display:flex;justify-content:space-between;color:#b3a59a;font-size:8px;letter-spacing:1.2px}footer b{font-weight:500}footer em{font-style:normal;color:#c38887;margin-left:9px}dialog{padding:0;border:1px solid #e3d4c6;background:#fffbf6;color:var(--ink);border-radius:15px;width:600px;max-width:calc(100% - 28px);max-height:88vh;box-shadow:0 20px 80px #363a3350}dialog::backdrop{background:#394e4a80;backdrop-filter:blur(5px)}.close{position:absolute;right:14px;top:12px;background:#f1e7de;border:0;border-radius:50%;width:30px;height:30px;font-size:21px;z-index:2}#modalContent{padding:35px}.modal-eyebrow{font-size:10px;letter-spacing:2px;color:#b58a7b}h2{font-size:25px;font-weight:500;margin:9px 0 10px;letter-spacing:1px}.subtext{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:22px}.modal-actions{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:18px}.btn{border:1px solid #d9c5b8;background:#f5e6dc;border-radius:5px;padding:9px 15px;font-size:12px}.btn.primary{background:#b47c7b;border-color:#b47c7b;color:white}.btn.danger{background:transparent;color:#a4696a}.field{display:block;margin:15px 0;font-size:12px}.field input,.field textarea,.field select{display:block;width:100%;margin-top:7px;border:1px solid #ded2c7;border-radius:5px;padding:10px;background:white;color:var(--ink)}.field textarea{min-height:90px;resize:vertical}.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}.tabs button{border:1px solid #e0d0c2;padding:7px 12px;border-radius:20px;background:transparent;font-size:11px}.tabs .active{background:#ead8ce}.edit-pane{padding:0 2px}.avatar-options{display:flex;gap:7px;margin:9px 0}.avatar-options button{border:1px solid #ddcdbf;background:#f6efe5;border-radius:5px;flex:1;height:58px;padding:5px}.avatar-options button.selected{outline:2px solid #b47c7b;background:#f2dfda}.avatar-options canvas{height:40px;width:25px;margin:auto;image-rendering:pixelated}.hint{font-size:10px;color:#9d8b80;line-height:1.8}.photo-frame{background:#483f37;padding:17px 28px;position:relative;min-height:230px}.photo-frame:before,.photo-frame:after{content:'';position:absolute;width:9px;top:7px;bottom:7px;background:repeating-linear-gradient(to bottom,#fffaf0 0 9px,transparent 9px 19px)}.photo-frame:before{left:9px}.photo-frame:after{right:9px}.photo-frame img{width:100%;height:260px;object-fit:cover;display:block}.photo-placeholder{height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#dbd7b2,#9cbab2);color:#fff8e9}.photo-placeholder .mountain{font-size:60px;margin-bottom:10px}.caption{line-height:1.8;text-align:center;font-size:13px;margin:18px 0;white-space:pre-wrap}.counter{font-size:10px;color:var(--muted)}.ticket-box{border:1px solid #d7bfa6;background:#f8eedb;position:relative;padding:25px;box-shadow:5px 6px 0 #eddfcc;transform:rotate(-2deg);transition:transform .3s}.ticket-box:before,.ticket-box:after{content:'';background:#fffbf6;width:20px;height:20px;border:1px solid #d7bfa6;border-radius:50%;position:absolute;top:60%;left:-11px}.ticket-box:after{left:auto;right:-11px}.ticket-top{display:flex;justify-content:space-between;border-bottom:1px dashed #cfbba4;padding-bottom:14px;font-size:10px;letter-spacing:2px;color:#a2876e}.ticket-box h3{font-size:23px;margin:23px 0 8px}.ticket-date{font-size:12px;letter-spacing:2px;color:#a87c68}.ticket-box p{font-size:12px;line-height:2;white-space:pre-wrap}.ticket-bottom{border-top:1px dashed #cfbba4;padding-top:12px;margin-top:22px;display:flex;justify-content:space-between;font-size:10px}.letter-paper{background:#f8f0e0;border:1px solid #e5d7bf;padding:24px;line-height:2.2;font-size:14px;white-space:pre-wrap;box-shadow:4px 4px 0 #ecdfca}.letter-paper .salute{color:#b47c7b}.signature{text-align:right;margin-top:17px;font-style:italic}.cake-stage{text-align:center;background:#f3eedf;border:1px solid #e2dbc8;border-radius:7px;padding:23px;position:relative;overflow:hidden}.cake-stage canvas{width:220px;height:160px;margin:auto;cursor:pointer}.wish{font-size:15px;line-height:1.9;color:#a36f72;white-space:pre-wrap}.confetti{position:absolute;width:7px;height:9px;top:-15px;animation:fall 2.8s ease-in forwards}@keyframes fall{to{transform:translateY(360px) rotate(650deg)}}.entry{border:1px solid #e7d8cb;border-radius:7px;padding:13px;margin:12px 0}.entry .field{margin:8px 0}.entry h4{margin:0;font-size:12px;font-weight:500}.entry img{height:65px;max-width:100%;object-fit:cover}.file-btn{display:inline-block;cursor:pointer;margin:8px 0;color:#a77770;font-size:12px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#574b43;color:#fff9ef;border-radius:7px;padding:11px 18px;font-size:12px;z-index:5;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}.empty{padding:35px;text-align:center;line-height:2;color:var(--muted)}
@media(min-width:1500px){main{max-width:1230px}}@media(max-width:700px){header{padding:0 20px;height:80px}.brand{font-size:14px}.brand small{font-size:6px}.header-actions{gap:8px}.quiet span{display:none}.intro{padding:32px 0 25px}h1{font-size:25px;letter-spacing:1px}main{padding:0 14px}.intro p{font-size:10px}.eyebrow{font-size:8px;letter-spacing:2px}.anniversary{font-size:10px}.world{aspect-ratio:960/680}.world canvas{object-fit:cover}.sign{font-size:8px;padding:5px}.sign b{display:none}.photo{left:17%;top:43%}.letter{left:68%;top:37%}.garden{left:65%;top:67%}.ticket{left:20%;top:74%}.world-note{font-size:8px;bottom:10px;padding:5px 9px}.coordinate{display:none}.world-top{padding:0 13px}.world-bottom{padding:10px 13px}.residents small,.bottom-note{display:none}.place-grid{grid-template-columns:1fr 1fr;gap:9px}.place-card{padding:19px 10px}.place-card small{font-size:8px}.section-label span{display:block;margin:6px 0 0}footer{margin:0 20px;font-size:7px;gap:10px;letter-spacing:.5px}#modalContent{padding:29px 20px}.row{gap:10px}.photo-frame img{height:220px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.edit-btn{white-space:nowrap;flex-shrink:0}.brand{flex-shrink:0}@media(max-width:360px){header{padding:0 14px}.header-actions{gap:4px}.edit-btn{padding:9px 10px;font-size:10px}.brand{font-size:12px;gap:9px}.brand-icon{width:31px;height:33px}.brand small{font-size:5px;letter-spacing:1px}.intro h1{font-size:23px}}