@font-face{font-family:BeVietnam;src:url('/assets/BeVietnamPro-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:BeVietnam;src:url('/assets/BeVietnamPro-SemiBold.ttf') format('truetype');font-weight:600 800;font-display:swap}
@font-face{font-family:Lora;src:url('/assets/Lora.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{--page:#edf0e7;--paper:#fffdf6;--ink:#283b2b;--muted:#667361;--accent:#405c3b;--line:#d1d9c9;--radius:20px;--font:BeVietnam,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button{border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #709759;outline-offset:4px}[hidden]{display:none!important}
.site-header{max-width:1480px;margin:auto;padding:28px 52px 23px;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:15px}.brand img{width:38px;height:38px}.brand h1{font-family:Lora,Georgia,serif;font-size:clamp(26px,3vw,38px);font-weight:500;line-height:1.25;letter-spacing:-1.1px;margin:0}.admin-link{font-size:14px;color:var(--muted);padding:10px 0}.admin-link span{margin-left:7px}main{padding:0 28px}.garden{position:relative;max-width:1376px;margin:auto;isolation:isolate;border-radius:28px;overflow:hidden;aspect-ratio:1.5;background:#d9e0cb;box-shadow:0 20px 50px -36px #344b2a66}.garden-art{display:block;width:100%;height:100%;object-fit:cover}.garden:after{content:'';position:absolute;inset:75% 0 0;background:linear-gradient(transparent,#e7ebd9aa);z-index:0;pointer-events:none}.garden-top{position:absolute;z-index:2;left:24px;right:24px;top:22px;display:flex;justify-content:space-between;gap:12px}.count-pill,.locked-pill{font-size:13px;display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:#fffdf3e8;box-shadow:0 2px 10px #30412714;color:#3e5136}.count-mark{width:7px;height:7px;display:inline-block;background:var(--accent);border-radius:50%}.locked-pill{background:#fff5d9}.ornaments{position:absolute;inset:0;z-index:1}.ornament{position:absolute;left:var(--x);top:var(--y);width:clamp(48px,5.9vw,84px);height:clamp(72px,8vw,120px);padding:0;background:none;transform:translate(-50%,-10%);transform-origin:50% 0;filter:drop-shadow(0 3px 3px #1b2e2155);border-radius:8px}.ornament img{width:100%;height:100%;object-fit:contain;pointer-events:none}.ornament .ornament-name{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);font-size:12px;line-height:1.3;background:#fffdf2f0;border-radius:999px;padding:4px 10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#30422c;opacity:0;transition:opacity .18s}.ornament:hover .ornament-name,.ornament:focus-visible .ornament-name{opacity:1}.ornament:hover{filter:drop-shadow(0 7px 8px #253b2580)}
.garden-bottom{position:absolute;bottom:25px;left:25px;right:25px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px}.garden-bottom p{font-size:14px;color:#384933;margin:0;background:#fffdf3dc;padding:10px 16px;border-radius:999px}.primary{background:var(--accent);color:#fffef5;border:1px solid var(--accent);padding:13px 23px;border-radius:999px;font-weight:600;box-shadow:0 6px 14px -10px #2d452c;transition:background .2s,transform .2s}.primary:hover:enabled{background:#314c2b;transform:translateY(-2px)}.write-button{font-size:16px;padding:15px 25px;display:flex;align-items:center;gap:10px}.write-symbol{font-size:23px;line-height:1;font-weight:400}.secondary{background:transparent;color:var(--accent);border:1px solid var(--line);padding:13px 23px;border-radius:999px}.secondary:hover{background:#e8eddc}.pagination{max-width:1376px;margin:20px auto 0;display:flex;align-items:center;justify-content:center;gap:23px;font-size:14px;color:var(--muted)}.page-button{background:transparent;color:var(--ink);border:1px solid #b9c6af;border-radius:999px;padding:7px 19px;min-width:80px}.page-button:hover:enabled{background:#e0e7d8}.site-footer{max-width:1480px;margin:auto;padding:21px 52px 26px;color:#687362;display:flex;justify-content:space-between;font-size:12px}.empty-note,.load-error{position:absolute;z-index:2;left:50%;bottom:125px;transform:translateX(-50%);background:#fffdf3ed;padding:17px 26px;border-radius:20px;text-align:center;box-shadow:0 6px 22px #33452212;width:max-content;max-width:85%}.empty-note p,.load-error p{font-family:Lora,Georgia,serif;font-size:20px;margin:0 0 3px}.empty-note span{color:var(--muted);font-size:14px}.text-button{background:transparent;color:var(--accent);padding:5px 12px;text-decoration:underline}
.dialog{border:1px solid #d1d8c5;border-radius:24px;box-shadow:0 30px 100px #21332240;padding:30px;background:var(--paper);color:var(--ink);max-height:calc(100dvh - 40px);width:min(600px,calc(100% - 32px));overflow:auto}.dialog::backdrop{background:#20372380;backdrop-filter:blur(7px)}.modal-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.step-label{font-size:12px;letter-spacing:2px;color:var(--muted)}.close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;color:var(--muted);border-radius:50%;background:#e9eedf;flex:none}.close:hover{background:#dfe7d2}.dialog h2{font-family:Lora,Georgia,serif;font-size:30px;font-weight:500;line-height:1.3;letter-spacing:-.6px;margin:0 0 24px}.field{margin-top:19px}.field>label,fieldset legend{display:block;font-size:14px;font-weight:600;margin-bottom:8px}input:not([type=radio]),textarea{width:100%;background:#fffef9;color:var(--ink);border:1px solid #ccd6c3;border-radius:12px;padding:12px 14px;font-size:16px;outline-offset:2px}input::placeholder,textarea::placeholder{color:#85907d}textarea{min-height:150px;resize:vertical;line-height:1.7}.field-meta{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;margin-top:5px}.field-meta span:last-child{white-space:nowrap}fieldset{border:0;padding:0;margin:0}.identity{display:flex;flex-wrap:wrap;gap:9px}.radio-pill{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer}.radio-pill:has(input:checked){background:#e8efdd;border-color:#7d976a}input[type=radio]{accent-color:var(--accent)}.ornament-picker{margin:22px 0}.ornament-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.ornament-option{position:relative;cursor:pointer;border:1px solid var(--line);border-radius:14px;text-align:center;padding:9px 2px 8px;display:flex;flex-direction:column;align-items:center;background:#f6f7ec}.ornament-option input{position:absolute;opacity:0}.ornament-option:has(input:checked){border:2px solid #557445;padding:8px 1px 7px;background:#eaf0df}.ornament-option:has(input:focus-visible){outline:3px solid #709759;outline-offset:3px}.ornament-option img{width:100%;height:70px;object-fit:contain}.ornament-option span{font-size:12px;margin-top:3px;white-space:nowrap}.full-button{width:100%}.error-text{font-size:14px;line-height:1.6;color:#9a3528;background:#fff0e7;border-radius:10px;padding:10px 12px;margin:15px 0}.public-notice{font-size:13px;line-height:1.8;color:#66705b;margin:18px 0}.preview-actions{display:flex;gap:10px}.preview-actions>.primary{flex:1}.verification{background:#edf1e3;padding:14px;border-radius:12px;margin:15px 0}.verification label{font-size:14px;display:block;margin-bottom:8px}.verification input{width:140px}.read-dialog{width:min(650px,calc(100% - 32px));padding:26px;background:transparent;border:none;box-shadow:none;overflow:visible;max-height:calc(100dvh - 32px)}.read-dialog>.close{position:absolute;right:11px;top:8px;z-index:3;background:#fffdf5;box-shadow:0 3px 12px #30412730}
.message-card{--surface:#fffaf0;position:relative;background:var(--surface);border-radius:16px;border:1px solid #ded6be;padding:25px 30px 30px;box-shadow:0 16px 50px #37492b25;overflow:hidden}.message-card .message-art{height:94px;width:100px;object-fit:contain;display:block;margin:0 auto 10px}.message-card .message-type{text-align:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#768061;margin:0 0 20px}.message-card .message-head{border-top:1px solid #d8ddc7;padding-top:20px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}.message-card h3{font-family:Lora,Georgia,serif;font-size:23px;line-height:1.5;font-weight:500;overflow-wrap:anywhere;margin:0}.message-card time{font-size:12px;color:#758069;white-space:nowrap}.message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.9;max-height:43dvh;overflow:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-color:#adba99 transparent;scrollbar-width:thin}.theme-letter{background:#fffaf0;border-bottom:7px solid #d5dec6}.theme-scroll{background:linear-gradient(90deg,#dfd1a4 0,#f8f0d5 5%,#fff9e8 50%,#f8f0d5 95%,#dfd1a4 100%);border-top:9px solid #cbbb8e;border-bottom:9px solid #cbbb8e;border-radius:8px}.theme-bottle{background:#f6fbf2;border:5px solid #bfcfc2;border-radius:36px 36px 24px 24px}.theme-bottle .message-body{background:#fffdf2;padding:15px;border-radius:8px}.theme-wood{background:#e7d3ac;border:7px solid #bca278;border-radius:18px}.theme-wood .message-head{border-color:#bfae8a}.theme-wood .message-type{color:#625e45}.theme-lantern{background:#fff6dc;border:6px solid #9c8657;border-radius:28px;box-shadow:0 0 40px #b3984940,0 16px 50px #37492b25}.theme-lantern .message-head{border-color:#d7c393}.toast{position:fixed;z-index:20;bottom:26px;left:50%;transform:translateX(-50%);background:#2e482d;color:#fffef5;box-shadow:0 6px 30px #283b2b40;padding:13px 23px;border-radius:999px;width:max-content;max-width:calc(100% - 32px);font-size:14px;text-align:center}
@media(prefers-reduced-motion:no-preference){.dialog[open]{animation:appear .24s ease-out}.ornament{animation:arrive .55s both;animation-delay:calc(var(--i)*18ms)}.ornament.new{animation:highlight 1.4s ease-in-out 3}.ornament:hover img{transform:rotate(-4deg);transition:transform .25s}.toast{animation:appear .25s ease-out}@keyframes appear{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes arrive{from{opacity:0;translate:0 -9px}to{opacity:1;translate:0 0}}@keyframes highlight{0%,100%{filter:drop-shadow(0 3px 3px #1b2e2155)}50%{filter:drop-shadow(0 0 14px #fff2ab) brightness(1.18)}}}
@media(min-width:1600px){.garden{max-width:1400px}.ornament{width:84px;height:120px}}
@media(max-width:700px){.site-header{padding:23px 20px 22px}.brand{gap:10px}.brand img{width:27px;height:27px}.brand h1{font-size:26px;letter-spacing:-.8px}.admin-link{font-size:12px}.admin-link span{display:none}main{padding:0 12px}.garden{aspect-ratio:.8;border-radius:22px}.garden-art{object-position:50% 45%}.garden-top{top:15px;left:12px;right:12px;flex-wrap:wrap}.count-pill,.locked-pill{font-size:12px;padding:7px 12px}.ornament{left:var(--mx);top:var(--my);width:46px;height:70px}.garden-bottom{left:12px;right:12px;bottom:17px;flex-direction:column;gap:11px}.garden-bottom p{font-size:12px;padding:7px 11px}.write-button{padding:13px 23px;font-size:15px}.empty-note,.load-error{bottom:140px;padding:14px 18px}.empty-note p{font-size:18px}.empty-note span{font-size:12px}.site-footer{padding:18px 22px 24px;font-size:12px;gap:20px}.pagination{margin-top:18px;gap:18px;font-size:13px}.page-button{padding:7px 16px;min-width:73px}.dialog{padding:22px 19px;max-height:calc(100dvh - 24px);width:calc(100% - 24px);border-radius:22px}.dialog h2{font-size:25px;margin-bottom:20px}.ornament-options{gap:5px}.ornament-option img{height:64px}.ornament-option span{font-size:11px}.message-card{padding:20px 19px 24px}.message-card .message-head{gap:10px;flex-wrap:wrap}.message-card h3{font-size:21px}.message-body{font-size:16px;max-height:42dvh}.read-dialog{padding:20px 4px}.read-dialog>.close{right:0;top:1px}.preview-actions .primary,.preview-actions .secondary{padding:12px 15px}.field-meta{font-size:11px}.close{width:40px;height:40px}.theme-wood{border-width:5px}.theme-bottle{border-width:4px}.theme-lantern{border-width:5px}}
@media(max-width:360px){.brand h1{font-size:23px}.site-header{padding-inline:16px}.brand img{width:24px}.ornament{width:42px;height:64px}.ornament-option span{font-size:10px}}
@media(min-width:701px){.garden{width:min(100%,calc(150svh - 345px))}}
@media(max-width:700px){.garden{width:100%;min-height:430px}.ornament{width:48px;height:48px}.ornament-option span{font-size:12px;white-space:normal;line-height:1.4;min-height:34px;display:flex;align-items:center;justify-content:center}.field-meta{font-size:12px}}
@media(max-width:360px){.ornament{width:44px;height:44px}.ornament-option span{font-size:12px}}

/* Cream edges separate the hanging objects from the leaves without a backdrop. */
.ornament{
  width:clamp(55px,6.8vw,97px);
  height:clamp(83px,9.2vw,138px);
  filter:none;
}
.ornament img{
  transform-origin:50% 8%;
  filter:drop-shadow(1px 0 0 #fff9e6) drop-shadow(-1px 0 0 #fff9e6)
    drop-shadow(0 1px 0 #fff9e6) drop-shadow(0 -1px 0 #fff9e6)
    drop-shadow(0 5px 4px #24352299);
}
.ornament:hover,.ornament:focus-visible{filter:none;z-index:2}
.ornament:hover img,.ornament:focus-visible img{
  filter:drop-shadow(1px 0 0 #fffdf0) drop-shadow(-1px 0 0 #fffdf0)
    drop-shadow(0 1px 0 #fffdf0) drop-shadow(0 -1px 0 #fffdf0)
    drop-shadow(0 7px 5px #243522aa);
}

/* The image and its branch anchors share the same centered cover crop. */
.garden{width:100%;max-width:1180px;min-height:0;aspect-ratio:1.5}
.garden-art{object-position:50% 50%}
.garden:after{display:none}
.tree-cords{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.tree-cords line{stroke:#746441;stroke-width:1.4;stroke-linecap:round;filter:drop-shadow(0 1px 0 #fff9e6)}
.ornament{left:var(--anchor-x);top:var(--anchor-y);width:var(--ornament-w);height:var(--ornament-h);transform:translate(-50%,-8%);touch-action:manipulation}
.ornament img{transform:rotate(0);transition:none}
.ornament:hover img{transform:rotate(0);transition:none}
.garden-top{align-items:center;flex-wrap:nowrap;top:12px;left:12px;right:12px;pointer-events:none}
.count-pill{min-height:44px;padding:8px 13px;font-size:12px;max-width:100%}
.garden-actions{max-width:1180px;margin:14px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.garden-actions p{margin:0;color:var(--muted);font-size:13px}
.garden-actions .locked-pill{margin-top:6px;width:fit-content}
.write-button{justify-content:center;min-height:52px}
.page-button{min-height:44px}
.pagination{margin-top:12px}
.site-footer{flex-wrap:wrap;gap:8px 20px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.empty-note,.load-error{bottom:13%}
.dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain}
.read-dialog{overflow:auto;padding-top:26px;scrollbar-width:thin}
.read-dialog>.close{position:sticky;top:0;margin-left:auto;margin-bottom:-24px}
.message-body{max-height:43dvh}
.close{width:44px;height:44px}
.toast{bottom:max(16px,env(safe-area-inset-bottom));border-radius:18px}
body[data-motion=on] .ornament img{animation:ornament-sway 4.4s ease-in-out infinite;animation-delay:calc(2s + var(--i)*45ms)}
body[data-motion=on] .ornament:nth-child(3n+2) img{animation-duration:4.2s}
body[data-motion=on] .ornament:nth-child(3n) img{animation-duration:4.6s}
body[data-motion=off] .ornament img{animation:none;transform:rotate(0)}
.ornament:focus-visible img,.ornament:disabled img,body:has(dialog[open]) .ornament img,.ornaments[aria-busy=true] .ornament img{animation-play-state:paused!important}
@keyframes ornament-sway{0%,44%,100%{transform:rotate(0)}10%{transform:rotate(-8deg)}20%{transform:rotate(8deg)}30%{transform:rotate(-4deg)}38%{transform:rotate(2deg)}}
@media(min-width:1024px) and (min-height:600px){.garden{width:min(100%,calc((100svh - 245px)*1.5))}.garden-actions{width:min(100%,calc((100svh - 245px)*1.5))}}
@media(min-width:701px) and (max-width:1023px) and (orientation:portrait){.garden{aspect-ratio:1.05}.site-header{padding:24px 28px}.garden-top{top:16px;left:16px;right:16px}}
@media(min-width:701px) and (max-width:850px){.garden{aspect-ratio:1.05}}
@media(max-width:700px){
  .site-header{padding:18px 16px;gap:10px}.brand{gap:9px}.brand h1{font-size:26px}.admin-link{min-height:44px;display:flex;align-items:center;padding:0 2px}
  .garden{aspect-ratio:.7;border-radius:20px;min-height:0}
  .garden-actions{flex-direction:column;align-items:stretch;gap:9px;margin-top:12px}
  .garden-actions>div{text-align:center}.garden-actions p{font-size:12px}.garden-actions .locked-pill{margin:6px auto 0}
  .write-button{width:100%;min-height:52px}.pagination{gap:18px;margin-top:14px}
  .site-footer{padding:16px 16px max(20px,env(safe-area-inset-bottom));font-size:11px}
  .ornament-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ornament-option img{height:64px}.ornament-option span{font-size:12px;min-height:0}
  .dialog{padding:18px 16px}.read-dialog{padding:24px 4px 4px}.dialog h2{font-size:25px}.message-card{padding:20px 17px}.message-card .message-art{height:80px}.message-card .message-type{margin-bottom:12px}
  .field-meta{flex-wrap:wrap}.radio-pill{min-height:44px}.public-notice{font-size:13px}.primary,.secondary{min-height:48px}
}
@media(max-width:360px){.brand h1{font-size:22px}.brand img{width:24px;height:24px}.site-header{padding-inline:14px}.count-pill{font-size:11px;padding-inline:10px}.garden-top{left:9px;right:9px;top:9px}}