:root{--bg:#f3f7ff;--panel:#e7edfc;--card:#fff;--ink:#141830;--muted:#5d6585;--line:#d7dff3;--accent:#4459f0;--accent-h:#3347d6;
--serif:"Tiempos Headline","Source Han Serif SC","Noto Serif SC","Songti SC",Georgia,serif;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{display:inline-block;font:500 16px var(--sans);background:var(--accent);color:#fff;border:0;border-radius:12px;padding:12px 26px;text-decoration:none;cursor:pointer;transition:background .15s,transform .1s}
.btn:hover{background:var(--accent-h)}.btn:active{transform:scale(.98)}
/* home */
.home{min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px}
.home-inner{max-width:560px;width:100%;text-align:center}
.mark-img{display:block;margin:0 auto;height:96px;width:auto;max-width:140px;object-fit:contain;mix-blend-mode:multiply;user-select:none}
.home h1{font:400 clamp(30px,6vw,44px)/1.2 var(--serif);margin:14px 0 28px;letter-spacing:-.01em}
#welcome{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 28px;margin-bottom:28px;text-align:left;color:var(--muted);min-height:96px;font-family:var(--serif);font-size:17px;box-shadow:0 2px 12px rgba(68,89,240,.06)}
.mascot{position:fixed;right:max(12px,2vw);bottom:0;height:clamp(220px,66vh,700px);width:auto;max-width:42vw;object-fit:contain;object-position:bottom right;mix-blend-mode:multiply;pointer-events:none;user-select:none;z-index:0}
.home-inner{position:relative;z-index:1}
@media(max-width:900px){.mascot{height:30vh;max-width:36vw;opacity:.95}}
/* mailbox */
.app{display:grid;grid-template-columns:1fr 2fr;height:100%}
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.side header{padding:20px 20px 12px;display:flex;align-items:center;gap:10px;font:400 22px var(--serif)}
.side header a{margin-left:auto;font:14px var(--sans);color:var(--muted);text-decoration:none}
.side header a:hover{color:var(--accent)}
#list{list-style:none;margin:0;padding:6px 10px 16px;overflow:auto;flex:1}
#list button{all:unset;box-sizing:border-box;display:block;width:100%;padding:12px 14px;border-radius:12px;cursor:pointer}
#list button:hover{background:rgba(68,89,240,.08)}
#list button:focus-visible{outline:2px solid var(--accent)}
#list .on button{background:var(--card);box-shadow:0 0 0 1px var(--line)}
.t{display:block;font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread .t::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}
/* right pane: fills everything */
.main{position:relative;min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--card)}
.empty{margin:auto;color:var(--muted);font:18px var(--serif);text-align:center}
.viewer{flex:1;min-height:0;display:flex;flex-direction:column}
.viewer.enter{animation:in .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes in{from{opacity:0;transform:scale(.97)}}
.vhead{padding:14px 28px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.vhead h2{font:400 20px var(--serif);margin:0}.vhead span{font-size:13px;color:var(--muted)}
.vbody{flex:1;min-height:0;overflow:auto}
.imgbox{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--panel);padding:16px}
.imgbox img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:4px}
.vbody iframe{width:100%;height:100%;border:0;display:block}
pre.txt{margin:0;padding:28px;white-space:pre-wrap;font:15px/1.7 ui-monospace,Menlo,Consolas,monospace}
/* markdown */
.md{max-width:860px;margin:0 auto;padding:40px 36px 64px;font:17px/1.85 var(--serif)}
.md h1,.md h2,.md h3,.md h4{font-family:var(--serif);line-height:1.3;margin:1.6em 0 .6em;font-weight:500}
.md h1{font-size:2em;margin-top:0}.md h2{font-size:1.5em;border-bottom:1px solid var(--line);padding-bottom:.25em}.md h3{font-size:1.2em}
.md p,.md ul,.md ol,.md blockquote,.md pre,.md table{margin:0 0 1.1em}
.md a{color:var(--accent)}.md img{max-width:100%;height:auto;border-radius:6px}
.md blockquote{border-left:3px solid var(--accent);padding:2px 16px;color:var(--muted);background:var(--bg);border-radius:0 8px 8px 0}
.md code{font:.88em ui-monospace,Menlo,Consolas,monospace;background:var(--bg);padding:2px 6px;border-radius:5px}
.md pre{background:var(--bg);padding:14px 16px;border-radius:10px;overflow:auto;border:1px solid var(--line)}.md pre code{background:none;padding:0}
.md table{border-collapse:collapse;display:block;overflow:auto}.md th,.md td{border:1px solid var(--line);padding:6px 12px}.md th{background:var(--bg)}
.md hr{border:0;border-top:1px solid var(--line);margin:2em 0}
/* fullscreen envelope animation */
.fx{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 45%,#fff,var(--bg) 70%);opacity:0;transition:opacity .5s;cursor:pointer}
.fx.in{opacity:1}
.fxs{position:absolute;left:50%;top:54%;width:340px;height:220px;margin:-110px 0 0 -170px;transform:scale(var(--s));transition:transform .8s ease,opacity .6s}
.fx.out{opacity:0}.fx.out .fxs{transform:scale(calc(var(--s)*1.2))}
.env{position:absolute;inset:0;perspective:900px}
.env>*{position:absolute}
.env-back{inset:0;background:#d2a96f;border-radius:6px;box-shadow:0 18px 40px rgba(120,80,20,.28)}
.thumb{left:18px;right:18px;top:14px;bottom:14px;background:#fff;color:#33384f;border-radius:3px;padding:12px 14px;z-index:2;overflow:hidden;font:11px/1.5 var(--serif);box-shadow:0 0 0 1px rgba(0,0,0,.06);transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.thumb b{display:block;font-size:13px;margin-bottom:6px}
.thumb span{display:block;max-height:7.5em;overflow:hidden;white-space:pre-wrap;color:var(--muted)}
.thumb.img{padding:0}.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pocket{inset:0;z-index:3;filter:drop-shadow(0 -2px 4px rgba(90,55,10,.35))}
.pocket::before{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(160deg,#f2d7ad,#e9c493);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.flap{left:0;right:0;top:0;height:60%;z-index:4;transform-origin:top;transition:transform .8s cubic-bezier(.4,0,.2,1),z-index 0s .4s;filter:drop-shadow(0 4px 4px rgba(90,55,10,.4))}
.flap::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#d9b27a,#e2bb85);clip-path:polygon(0 0,100% 0,50% 100%)}
.env.open .flap{transform:rotateX(180deg);z-index:1}
.env.rise .thumb{transform:translateY(-120px)}
@media(max-width:720px){.app{grid-template-columns:1fr;grid-template-rows:38% 62%}.side{border-right:0;border-bottom:1px solid var(--line)}.md{padding:24px 18px 48px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}