:root{color-scheme:dark;--gold:#e7bd72;--cream:#ffedcb;--red:#b62a21}*{box-sizing:border-box}body{margin:0;background:#080606;color:var(--cream);font-family:Tahoma,"Leelawadee UI",sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff3c7;outline-offset:5px}button:disabled{cursor:wait;opacity:.7}[hidden]{display:none!important}.app{position:relative;isolation:isolate;width:100%;max-width:480px;min-height:100svh;margin:auto;padding:28px 28px 24px;overflow:hidden;background:#180c07 url('assets/background.png') center/cover}.scenery{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.silk{position:absolute;opacity:.78;width:51%;height:90%;object-fit:fill;filter:saturate(1.1)}.silk-right{right:-31%;top:-8%;transform:rotate(-12deg)}.silk-left{left:-33%;top:23%;transform:rotate(17deg)}.blossoms{position:absolute;width:65%;opacity:.85}.blossoms-top{left:-15%;top:-10px;transform:rotate(7deg)}.blossoms-bottom{left:-20%;bottom:-30px;transform:rotate(190deg);width:55%}.dust{position:absolute;inset:0;background-image:radial-gradient(circle at 17% 28%,#edc26e 0 1px,transparent 2px),radial-gradient(circle at 83% 48%,#dc9b41 0 1px,transparent 2px),radial-gradient(circle at 68% 13%,#dca948 0 1px,transparent 2px);opacity:.7}header{text-align:center;position:relative;z-index:4}.brand{font-family:Georgia,serif;font-size:28px;letter-spacing:.27em;color:#e7c585;padding-left:.27em}.ornament{color:var(--gold);font-size:14px;margin:5px 0}header p{font-size:14px;margin:9px 0 0;color:#e2c495}.back{position:absolute;left:-10px;top:-6px;font-size:44px;line-height:1;background:none;border:0;padding:0 12px}.hero{height:clamp(280px,42svh,355px);position:relative;margin-top:14px}.vessel{position:absolute;width:62%;height:100%;right:-2%;bottom:0;z-index:2;transform-origin:50% 85%}.fan{position:absolute;width:86%;height:65%;object-fit:contain;top:0;left:2%}.cylinder{position:absolute;width:100%;height:72%;object-fit:contain;bottom:0;left:0}.standing{position:absolute;left:-12%;bottom:5px;width:70%;height:110%;object-fit:contain;z-index:3}.stone{position:absolute;bottom:5px;left:-8%;width:116%;height:16px;border-radius:50%;background:#21180f;box-shadow:0 6px 8px #0009,inset 0 1px 2px #826541;z-index:1}h1{font-weight:400;text-align:center;font-size:30px;line-height:1.4;margin:13px 0 2px}.intro{text-align:center;font-size:15px;color:#d7ba8c;margin:0 0 15px}.categories{display:grid;gap:9px}.category{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:47px;padding:8px 32px;background:#190a07df;border:1px solid #9f5e32;border-radius:28px;font-size:17px}.knot{position:absolute;left:25px;color:#d64d33;font-size:23px}.category small{display:block;color:#dec78f;font:10px Georgia,serif;letter-spacing:.16em;margin-top:3px}.category.selected,.primary{background:linear-gradient(180deg,#ce3227,#780d0c);border:1px solid #f1ca7d;box-shadow:0 0 13px #e8402555,inset 0 1px 7px #f8914633}.category.selected .knot{color:#ffe5aa}.primary{display:block;width:100%;border-radius:30px;color:#fff1d9;text-align:center;font:inherit;font-size:20px;min-height:52px;padding:12px 18px;text-decoration:none;margin-top:17px}.footnote{font-size:12px;color:#bda078;text-align:center;margin:14px 0 0;line-height:1.7}.shaking{animation:shake .18s ease-in-out infinite}.shaking+.standing{animation:sway .5s ease-in-out infinite alternate}@keyframes shake{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes sway{to{transform:translateY(-4px) rotate(2deg)}}.reveal-title{font-size:25px;margin:29px 0 8px}.envelope-scene{height:clamp(360px,58svh,510px);position:relative}.envelope-button{position:absolute;left:18%;top:3%;width:52%;height:94%;border:0;padding:0;background:none;z-index:3;transform:rotate(6deg);animation:fall .65s ease-out}.envelope-button img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px #ec8d3966)}.peeking{position:absolute;right:-4%;top:25%;width:57%;height:67%;object-fit:contain;z-index:2}.gold-loop{position:absolute;left:19%;top:13%;height:80%;width:54%;border:1px solid #eac375;border-radius:50%;transform:rotate(24deg);box-shadow:0 0 9px #dca63866;opacity:.45;z-index:1}.open-hint{text-align:center;font-size:19px;margin:4px 0 12px}.mini-vessel{position:relative;width:120px;height:140px;margin:0 0 -45px auto;opacity:.3;filter:blur(1px)}@keyframes fall{from{opacity:0;transform:translateY(-65px) rotate(-8deg) scale(.6)}to{opacity:1;transform:rotate(6deg)}}.category-label{width:max-content;max-width:100%;border:1px solid #995d32;border-radius:24px;margin:17px auto;color:#e4c084;padding:6px 20px;font-size:14px}.letter{position:relative;isolation:isolate;color:#58241b;margin:0 -4px;background:transparent;animation:unfold .5s ease-out}.letter:before{content:"";position:absolute;inset:0;background:url('assets/paper.png') center/100% 100% no-repeat;z-index:-1}.letter-content{padding:35px 26px 14px;text-align:center}.number{font-size:12px;margin:0;color:#805444}.letter h1{font-size:26px;font-weight:600;color:#8f261c;margin:14px 0 3px}.result-art{height:142px;display:flex;align-items:center;justify-content:center}.result-art img{width:100%;height:100%;object-fit:contain}.item-art{font-size:66px;filter:sepia(.25);line-height:1}.message{font-size:17px;line-height:1.85;margin:10px 0 9px;white-space:pre-line}.letter-rule{font-size:13px;color:#c0573d;margin:13px 0}.after{font-size:14px;line-height:1.8;margin:0;white-space:pre-line}.letter-bottom{height:112px;position:relative;margin-top:6px}.letter-bottom>img{position:absolute;right:-10px;bottom:0;width:100px;height:104px;object-fit:contain}.signature{position:absolute;left:6px;bottom:5px;display:grid;justify-items:center;gap:6px}.signature>span:first-child{font-family:serif;writing-mode:vertical-rl;font-size:20px;letter-spacing:3px}.seal{background:#b93729;color:#fff1d7;border:3px double #ffe5c5;font-family:Georgia,serif;font-size:24px;line-height:30px;width:33px;height:36px}.letter-brand{position:absolute;bottom:0;right:5px;letter-spacing:.2em;font:10px Georgia,serif}.text-button{display:block;margin:13px auto 0;border:0;background:none;padding:8px;text-decoration:underline;color:#d8bd95;font-size:14px}.status{text-align:center;color:#e5c68b;font-size:14px;margin:8px 0 0}.status:empty{display:none}@keyframes unfold{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}dialog{width:min(440px,92vw);max-height:92svh;overflow:auto;border:1px solid #b88a47;border-radius:18px;background:#200e09;color:var(--cream);padding:25px;text-align:center}dialog::backdrop{background:#000c}dialog img{width:100%;border-radius:5px}.dialog-close{position:absolute;right:8px;top:5px;background:none;border:0;font-size:30px}.save-help{font-size:13px;color:#d4b88c}body:has(dialog[open]){overflow:hidden}@media(min-width:700px){body{padding:25px 0;background:radial-gradient(ellipse at center,#24110b,#070605 70%)}.app{border:1px solid #493322;box-shadow:0 20px 80px #0008;border-radius:4px;min-height:850px}}@media(max-width:370px){.app{padding:22px 22px}.category{font-size:16px}.knot{left:18px}.hero{height:280px}.letter-content{padding:32px 22px 12px}.message{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


#home .vessel{width:116%;left:-8%;right:auto;height:100%;bottom:8px;transform-origin:60% 85%}.hero-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* Gentle idle motion keeps the supplied artwork intact. */
#home .hero-art{transform-origin:58% 82%;animation:hero-idle 5.6s ease-in-out infinite;will-change:transform}
#home .vessel.shaking .hero-art{animation:none;transform:none}
@keyframes hero-idle{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-4px) rotate(.45deg)}}
@media(prefers-reduced-motion:reduce){#home .hero-art{animation:none;transform:none;will-change:auto}}

/* A cloth-bound diary, separate from the fortune letter. */
.eyebrow{text-align:center;font:11px Georgia,serif;letter-spacing:.18em;color:var(--gold);margin:25px 0 8px}
#diary h1{margin:0 0 8px}#diary .intro{line-height:1.8;font-size:14px}
#book-cover{position:relative;text-align:center;padding:25px 0 10px}
.book-cover{display:block;position:relative;width:75%;height:355px;margin:0 auto 20px;background:repeating-linear-gradient(88deg,#0000 0 2px,#ffffff05 2px 3px),linear-gradient(120deg,#8d2825,#4b1615);border:1px solid #b97847;border-radius:3px 9px 9px 3px;box-shadow:6px 6px 0 #d1b58a,9px 9px 0 #7b5e3e,15px 18px 35px #0009;transform:rotate(-4deg);transition:transform .3s}
.book-cover:hover{transform:rotate(-2deg) translateY(-3px)}.binding{position:absolute;left:15px;top:0;height:100%;width:13px;border-left:2px solid #d4b487;border-right:1px solid #c9a16e}.binding:after{content:"";position:absolute;inset:25px -13px;background:repeating-linear-gradient(0deg,transparent 0 48px,#e9c790 49px 51px,transparent 52px 77px)}
.cover-label{position:absolute;right:22px;top:27px;padding:15px 10px;background:#ead4af;color:#54271d;writing-mode:vertical-rl;font-family:serif;font-size:28px;letter-spacing:.2em;border:4px double #94714c}.cover-label small{font:10px Georgia;letter-spacing:.08em;padding-right:6px}.cover-flower{position:absolute;left:55px;bottom:60px;font-size:110px;font-family:serif;color:#d79c6470}.cover-brand{position:absolute;bottom:25px;left:45%;font:13px Georgia;letter-spacing:.25em;color:#f0cd90}.book-mascot{position:absolute;bottom:53px;right:-12px;width:43%;height:220px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 10px #0008)}
.book-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:20px 0 12px;font-size:12px;color:#e4c38c}.quiet-button{border:1px solid #a47049;border-radius:20px;background:#180c0780;padding:9px 12px;font-size:12px}.quiet-button:disabled{cursor:default}
.diary-paper{position:relative;background:linear-gradient(#f3e3c5f2,#f3e3c5f2),url('assets/paper.png') center/cover;color:#54291e;padding:25px 22px 23px;border-radius:3px 9px 9px 3px;border-left:9px solid #77342b;box-shadow:4px 4px 0 #be9e75,7px 7px 0 #533b28,0 12px 30px #0007;animation:unfold .45s ease-out}
.diary-paper .eyebrow{color:#a3583b;margin:0 0 22px;letter-spacing:.05em;font:12px Tahoma}.diary-paper label{display:block;font-size:14px;line-height:1.8;margin:18px 0 8px}.diary-paper input,.diary-paper textarea{display:block;width:100%;font:16px/1.9 Tahoma,"Leelawadee UI",sans-serif;color:#54291e;border:1px solid #bc9973;border-radius:4px;background:#fff8e970;padding:9px 11px;color-scheme:light}.diary-paper textarea{resize:vertical;min-height:180px;background:repeating-linear-gradient(transparent 0 29px,#c59d6740 30px 31px);border:0;border-bottom:1px solid #bc9973;border-radius:0;overflow-wrap:anywhere}.diary-paper :is(input,textarea):focus-visible{outline:2px solid #9c3a2b;outline-offset:3px}.character-count{text-align:right;font-size:11px;color:#91634c}.paper-note{text-align:center;font-size:12px;line-height:1.8;color:#91634c}.diary-paper .text-button{color:#844332}.diary-paper .primary{font-size:17px}.diary-paper h2{text-align:center;color:#8c3427;font-weight:400;font-size:21px;margin:10px 0 22px}#reader-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:2.2;font-size:17px;min-height:180px;margin:0 0 25px}.diary-stamp{width:34px;height:38px;background:#a7352b;color:#ffe8c7;border:4px double #f0c298;text-align:center;font:25px Georgia;margin:15px 0 15px auto}.diary-stamp.stamped{animation:stamp .5s ease-out}.reader-actions,.page-navigation{display:flex;justify-content:space-between;gap:8px;margin-top:17px}.diary-paper .quiet-button{background:transparent;border-color:#be9874;color:#723c2b}.page-navigation{padding-top:15px;border-top:1px solid #c3a17c80}.diary-tools{display:grid;gap:9px;margin-top:25px}.secondary{border:1px solid #997047;border-radius:24px;background:#1c0c09bf;padding:12px;font-size:14px}.memory-list{margin:20px 0;font-size:14px;border-top:1px solid #91623c80;padding-top:15px}.memory-list summary{cursor:pointer;padding:10px 0;color:#dec59b}#entry-list{display:grid;gap:8px;margin-top:10px}#entry-list button{background:#25120dcc;border:1px solid #795034;border-radius:6px;padding:12px;text-align:left;display:grid;gap:8px;overflow-wrap:anywhere}#entry-list small{color:#bc996f}#empty-diary{line-height:1.8;font-size:13px;color:#c7a980}.storage-note{font-size:11px;line-height:1.9;color:#bfa17d;text-align:center;margin:24px 0 5px}.full-book{text-align:center;padding:22px 12px;margin-top:18px;border:1px solid #9b6841;border-radius:8px;background:#591d1640}.full-book .seal{display:block;margin:auto}.full-book h2{font-size:19px;font-weight:400}.full-book p{font-size:13px;line-height:1.9}.status{line-height:1.8}.screen{min-width:0}@keyframes stamp{from{opacity:0;transform:scale(1.6) rotate(-15deg)}to{opacity:1;transform:none}}@media(max-width:370px){.book-cover{height:320px}.diary-paper{padding:22px 16px}.book-toolbar{font-size:11px}.quiet-button{padding:9px}.book-mascot{right:-8px}}
.cover-label{writing-mode:horizontal-tb;max-width:105px;padding:15px 10px;text-align:center;font-size:24px;letter-spacing:.03em;line-height:1.65;overflow-wrap:anywhere}.cover-label small{display:block;font-size:10px;line-height:1.5;padding:10px 0 0}.diary-tools button:disabled{opacity:.45;cursor:default}


/* Ekkamai Vibe throughout the interface and diary. */
@font-face{font-family:YisseUI;src:url('assets/fonts/EkkamaiVibe-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:YisseUI;src:url('assets/fonts/EkkamaiVibe-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
body,.brand,.category small,.eyebrow,.cover-label,.cover-label small,.cover-brand,.letter-brand,.seal,.diary-stamp,.diary-paper .eyebrow,.diary-paper input,.diary-paper textarea,h1,h2{font-family:YisseUI,Tahoma,sans-serif}
h1,.letter h1,.full-book h2,dialog h2{font-weight:700}
h1{font-size:30px}.reveal-title{font-size:25px}.letter h1{font-size:26px}.cover-label{font-size:24px}
.diary-paper textarea,#reader-text,#entry-list span{font-family:YisseUI,Tahoma,sans-serif;font-weight:400;font-size:18px;line-height:1.9}
.font-credits{text-align:center;margin:16px 0 0;font-size:10px}.font-credits a{color:#bda078}

/* A small keepsake photo, never cropped. */
.photo-field{margin:20px 0;border-top:1px solid #bc997370;padding-top:2px}.photo-field label span{font-size:12px;color:#91634c}.diary-paper input[type=file]{font-size:12px;line-height:1.6;padding:9px;max-width:100%;white-space:normal}.photo-help,#photo-status{font-size:11px;line-height:1.8;color:#91634c}#photo-status:empty{display:none}#photo-preview-wrap{display:grid;justify-items:center;gap:10px;margin:14px 0}#photo-preview,.memory-photo{display:block;max-width:100%;width:auto;max-height:200px;object-fit:contain;margin:12px auto 22px;padding:8px;background:#fff8e9;box-shadow:0 3px 9px #54291e25;transform:rotate(-1deg)}#photo-preview{margin:0}.memory-photo{max-height:220px}#reader-text{min-height:130px}

/* Supplied brand artwork: original silhouette, tinted per surface. */
.logo-image{display:block;width:100%;height:auto;object-fit:contain}
.brand{width:150px;margin:0 auto;padding:0;line-height:0;letter-spacing:0}
.letter-brand{width:70px;line-height:0}.cover-brand{width:74px;line-height:0;letter-spacing:0}
.seal,.diary-stamp{display:flex;align-items:center;justify-content:center;width:52px;height:32px;padding:5px}
.full-book .seal{display:flex}.signature .seal{width:52px;height:32px}

/* Keep the tiny wordmark below the portrait; illustration rules only target the portrait. */
.letter-bottom{height:148px}
.letter-bottom>img{right:0;bottom:40px;width:100px;height:104px}
.letter-brand{right:36px;bottom:16px;width:48px;line-height:0}
.letter-bottom .logo-image{position:static;display:block;width:100%;height:auto;object-fit:contain}
.seal,.diary-stamp,.signature .seal{width:33px;height:36px;padding:0;font:24px/1 YisseUI,Tahoma,sans-serif;flex-shrink:0}
.signature{left:6px;bottom:16px}

/* Signature and seal sit above the ornamental frame. */
.letter-bottom{height:178px}
.signature{left:12px;bottom:40px;gap:9px}
.signature>span:first-child{font-family:"KaiTi","Kaiti SC","STKaiti","SimSun",serif;font-size:18px;letter-spacing:2px;line-height:1.3;color:#392219}
.seal,.diary-stamp,.signature .seal{font-family:Georgia,"Times New Roman",serif;font-size:25px;line-height:1;width:33px;height:36px;background:#bc3026;border:3px double #f6c39d;border-radius:3px;box-shadow:0 0 0 1px #b9412b}
.letter-bottom>img{right:0;bottom:47px;width:100px;height:104px}
.letter-brand{right:25px;bottom:25px;width:54px}

/* One continuous background video shared by every screen. */
.app{background:#180c07 url('assets/background-floral.png') center/cover}
.scenery{position:fixed;inset:0;max-width:480px;margin:0 auto;background:#180c07 url('assets/background-floral.png') center/cover}
.background-video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cover-label{max-width:120px;width:120px;font-size:21px;line-height:1.5}
@media(min-width:700px){.scenery{top:25px;max-width:478px}}
@media(prefers-reduced-motion:reduce){.background-video{display:none}}

/* Dissolve the loop boundary between two slowed, silent video layers. */
.background-video{position:absolute;inset:0;opacity:1;transition:opacity .9s linear;will-change:opacity}
.background-video-next{opacity:0}
@media(prefers-reduced-motion:reduce){.background-video{display:none;transition:none}}

/* Supplied envelope and mascot are one composition: preserve their original alignment. */
#reveal .envelope-button{left:24%;right:auto;top:5%;bottom:auto;width:82%;height:90%;margin:0;transform:none;animation:peeking-enter .6s ease-out}
#reveal .envelope-button img{object-fit:contain;filter:none}
#reveal .open-hint{margin:14px 0 20px}
@keyframes peeking-enter{from{transform:translateY(-24px) scale(.96)}to{transform:none}}
@media(prefers-reduced-motion:reduce){#reveal .envelope-button{animation:none}}

/* Taller diary cover with the mascot peeking from behind its right edge. */
#book-cover{isolation:isolate;padding-top:32px}
#book-cover .book-cover{width:72%;height:clamp(410px,57svh,470px);margin:0 0 24px;z-index:2}
#book-cover .book-mascot{right:-20px;bottom:110px;width:40%;height:260px;z-index:1;object-fit:contain}
#book-cover .open-hint{position:relative;z-index:3}
@media(max-width:370px){#book-cover .book-cover{height:410px}#book-cover .book-mascot{right:-12px;width:40%;height:230px}}

/* Reusable memory letter; preview and PNG share the same renderer. */
.theme-label,.preview-label{text-align:center;color:#e4c38c;font-size:14px;margin:22px 0 14px}
.memory-editor{margin:0 -12px;padding-top:5px}
.memory-editor label{display:block;margin:18px 0 7px;font-size:15px}
.memory-editor label small{color:#d7ba8c;font-size:12px}
.memory-editor input,.memory-editor textarea{display:block;width:100%;min-width:0;background:#fff5e9;color:#673c28;color-scheme:light;border:1px solid #c69d6c;border-radius:8px;padding:10px 12px;font:17px/1.8 YisseUI,Tahoma,sans-serif}
.memory-editor input[type=file]{font-size:13px}
.memory-editor textarea{resize:vertical;min-height:150px}
.memory-editor .character-count,.memory-editor #photo-status{color:#dec59b}
.memory-editor #remove-photo{margin-top:10px}
#memory-error{color:#ffe1b0;font-size:14px;line-height:1.8}
#memory-error:empty{display:none}
#memory-canvas{display:block;width:100%;height:auto;background:#f5e6cc;box-shadow:0 7px 24px #0005}
.memory-editor .preview-label{margin-top:28px}
.memory-editor :is(input,textarea):focus-visible{outline:2px solid #f1ca7d;outline-offset:3px}
@media(max-width:370px){.memory-editor{margin:0 -8px}}