@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600&family=Noto+Serif:wght@400;500;600&display=swap');
:root{color-scheme:dark;--gold:#e9c998;--cream:#fff3dc;--ink:#38291e}*{box-sizing:border-box}body{margin:0;background:#32251d;color:var(--cream);font-family:'Be Vietnam Pro',sans-serif;font-size:14px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ffe0a5;outline-offset:4px}button{color:inherit}#temple{position:relative;min-height:760px;height:100svh;overflow:hidden}.background,.background img,.shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.shade{background:linear-gradient(90deg,rgba(27,19,13,.67),transparent 42%),linear-gradient(0deg,rgba(27,18,12,.94),transparent 36%,transparent 80%,rgba(27,18,12,.5))}header{position:relative;z-index:3;padding:30px 42px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;color:var(--cream);text-decoration:none;font-family:'Noto Serif',serif;letter-spacing:3px;font-size:20px}.mark{font-size:44px;color:var(--gold);font-weight:400}.brand small{display:block;font:8px 'Be Vietnam Pro',sans-serif;letter-spacing:2.2px;margin-top:7px;color:#e5d2b1}.header-actions{display:flex;gap:10px}.header-actions button{border:1px solid #ddc08c66;background:#3b2b2377;border-radius:50px;padding:12px 16px;backdrop-filter:blur(8px)}.intro{position:absolute;left:6%;top:25%;max-width:300px}.eyebrow{font-size:10px;letter-spacing:2.8px;color:var(--gold)}h1,h2{font-family:'Noto Serif',serif;font-weight:400}h1{font-size:clamp(36px,4vw,60px);line-height:1.25;margin:22px 0;color:#fff2da}.intro p{line-height:1.9;font-size:13px;color:#e6d6c1}.fine-line{width:42px;height:1px;background:#d9b77b;margin:28px 0 18px}.intro small{font-size:10px;color:#d6bea0}.top-note{position:absolute;top:135px;right:42px;writing-mode:vertical-rl;letter-spacing:3px;font-size:11px;color:var(--gold)}.scene{position:absolute;inset:0;pointer-events:none}#person{position:absolute;left:50%;bottom:23%;transform:translateX(-50%);text-align:center;filter:drop-shadow(0 12px 6px #26180e66)}#avatar{height:clamp(130px,19vh,210px);max-width:180px;object-fit:contain}#person-name{display:block;font-size:10px;color:#fff0d1;letter-spacing:1px;text-shadow:0 1px 4px #000}#incense{position:absolute;left:50%;top:49%;display:flex;gap:5px;transform:translateX(-50%)}[hidden]{display:none!important}#incense i{display:block;width:2px;height:42px;background:linear-gradient(#ffbb58 4px,#7d2515 5px,#d4b47a);box-shadow:0 -2px 5px #ff9e34}.smoke{position:absolute;bottom:25px;left:-8px;filter:blur(3px);font-size:45px;color:#fff9;animation:smoke 5s linear infinite}.second{animation-delay:2s}#flowers{position:absolute;top:53%;left:50%;transform:translateX(-50%);font-size:26px;filter:drop-shadow(0 4px 3px #0008)}.bottom{position:absolute;bottom:0;width:100%;padding:0 40px 18px}.verse{text-align:center;font:italic 15px 'Noto Serif',serif;color:#efdbc0;margin-bottom:26px}nav{max-width:760px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(120deg,#4a3325e8,#30241eeb);border:1px solid #b9965b77;border-radius:18px;box-shadow:0 20px 50px #0003;backdrop-filter:blur(15px);padding:12px}nav button{background:none;border:0;position:relative;padding:7px 10px;transition:background .2s,transform .2s;border-radius:10px}nav button+button:before{content:'';position:absolute;left:-1px;top:20%;height:60%;width:1px;background:#af8e5b44}nav button:hover{background:#eac98b16;transform:translateY(-3px)}.nav-icon{display:block;font:30px 'Noto Serif',serif;color:var(--gold);height:40px}nav b{display:block;font-size:12px;font-weight:500;margin:4px}nav small{font-size:9px;color:#c4ad8c}footer{display:flex;justify-content:center;gap:14px;font-size:9px;color:#c3ab88;margin:18px 0 0}footer span{color:var(--gold)}dialog{border:1px solid #b89a6a66;border-radius:20px;background:#f9f1e4;color:var(--ink);width:min(520px,calc(100% - 32px));max-height:90svh;overflow:auto;padding:38px;box-shadow:0 30px 100px #0008;color-scheme:light}dialog::backdrop{background:#1b160ec4;backdrop-filter:blur(8px)}dialog .eyebrow{color:#967044;font-size:9px}dialog h2{font-size:30px;line-height:1.3;margin:18px 0}dialog p{font-size:12px;color:#89735d;line-height:1.8}dialog label{display:block;font-size:11px;margin:24px 0 10px}input,textarea,select{width:100%;border:1px solid #d7c7ad;border-radius:8px;padding:13px;background:#fffaf2;color:var(--ink);outline-color:#b5915c}textarea{resize:vertical}.primary{width:100%;border:0;border-radius:8px;background:#624334;color:#fff2de;padding:16px;margin-top:18px}.primary:hover{background:#7d5641}.privacy{display:block;text-align:center;font-size:9px;color:#a08b73;margin-top:15px;line-height:1.6}.close{position:absolute;right:15px;top:12px;background:none;border:0;color:#8e7255;font-size:25px}.characters{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:20px 0}.characters button{padding:8px 2px;background:#eee2d1;border:1px solid transparent;border-radius:10px;color:#78634a;min-width:0}.characters button.selected{border-color:#98713e;background:#e6d3b6}.characters img{width:100%;height:85px;object-fit:contain}.characters small{font-size:9px;display:block}#toast{position:fixed;z-index:10;left:50%;top:110px;transform:translate(-50%,-12px);background:#fbf1ddf2;color:#634c32;padding:14px 24px;border-radius:40px;font-size:12px;opacity:0;pointer-events:none;transition:.3s;text-align:center;max-width:90%;width:max-content;box-shadow:0 4px 30px #0003}#toast.visible{opacity:1;transform:translate(-50%,0)}.secondary{color:#7a5939;background:none;border:1px solid #cfb996;padding:10px 15px;border-radius:8px;font-size:11px}#stats{background:#ecdfc9;padding:20px;border-radius:12px;margin:20px 0;line-height:2;font-size:12px}#wishes article{border-top:1px solid #dfcfb7;padding:16px 0;font-size:12px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}#wishes time{display:block;font-size:9px;color:#9e896e;margin-bottom:6px}.meditation{position:absolute;z-index:4;left:50%;top:20%;transform:translateX(-50%);background:#38291bd9;border:1px solid #ddbb7a66;border-radius:100px;width:250px;height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 80px #f3d29133;animation:breathe 8s ease-in-out infinite}.meditation span{font-size:10px;color:var(--gold)}.meditation strong{font:46px 'Noto Serif',serif;margin:18px 0}.meditation button{background:none;border:1px solid #b99b65;border-radius:30px;padding:8px 20px;font-size:11px}.ripple{position:absolute;left:50%;top:43%;width:10px;height:10px;border-radius:50%;border:2px solid #ffe3a1;opacity:0}.ripple.ringing{animation:ring 3s ease-out}.calm .intro,.calm nav,.calm .verse{opacity:.2;transition:opacity 1s}@keyframes smoke{from{transform:translate(0,0) scale(.6);opacity:0}25%{opacity:.5}to{transform:translate(20px,-100px) scale(1.8);opacity:0}}@keyframes breathe{50%{box-shadow:0 0 100px #f3d29166;scale:1.05}}@keyframes ring{from{transform:translate(-50%,-50%) scale(1);opacity:.8}to{transform:translate(-50%,-50%) scale(65);opacity:0}}@media(max-width:850px){.intro{left:5%;max-width:200px}h1{font-size:38px}.intro p{font-size:11px}}@media(max-width:640px){#temple{min-height:640px}header{padding:20px}.brand{font-size:15px;letter-spacing:2px;gap:8px}.brand small{font-size:6px;letter-spacing:1.2px}.mark{font-size:32px}.header-actions button{padding:9px 11px}.header-actions span{display:none}.intro{top:100px;left:0;text-align:center;width:100%;max-width:none}.intro .eyebrow{font-size:8px;letter-spacing:3px}h1{font-size:22px;margin:10px 0}.intro h1 br{display:none}.intro h1 br:after{content:' '}.intro p,.fine-line,.intro small{display:none}.top-note{display:none}.shade{background:linear-gradient(0deg,#1c160ff5,transparent 38%,transparent 70%,#20160f99)}.bottom{padding:0 12px 17px}.verse{font-size:12px;margin-bottom:18px}nav{padding:8px 4px;border-radius:14px}nav button{padding:5px 1px}.nav-icon{font-size:26px;height:32px}nav b{font-size:10px}nav small{font-size:7px}footer{font-size:7px;gap:8px;margin-top:14px}#person{bottom:25%}#avatar{height:140px;max-width:130px}#incense{top:49%}#flowers{top:53%;font-size:22px}dialog{padding:30px 23px}dialog h2{font-size:27px}.meditation{top:24%;width:220px;height:220px}#toast{top:90px;font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}