@charset "UTF-8";
:root{color-scheme:light;--bg:#f7f5ef;--ink:#514e44;--muted:#a19c8d;--paper:#f8f5e9;--accent:#958463;--red:#b24d39;--page-w:min(39vw,460px);--page-h:min(72vh,640px)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #b68553;outline-offset:5px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{position:fixed;inset:0 0 auto;z-index:10;padding:22px 28px;display:flex;align-items:center;gap:20px}.topbar nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:13px;color:#87816e}.wordmark{font:13px Georgia,serif;letter-spacing:2.5px;color:#92846b}.wordmark span{display:block;font:10px sans-serif;letter-spacing:3px;margin-top:5px;color:#b3aa98}.round{border:1px solid #e2dfd3;background:#fffcf7bb;border-radius:50%;width:42px;height:42px;display:inline-grid;place-items:center;font-size:24px;font-weight:300}.wall-trigger{position:relative;font-size:23px;color:#918061}.wall-trigger span{position:absolute;right:-4px;top:-4px;background:#b86e55;color:white;border-radius:12px;padding:2px 5px;font:10px sans-serif}.gallery{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 20px 30px}.book-area{position:relative;display:flex;align-items:center;justify-content:center;min-height:var(--page-h);width:100%;perspective:2200px}.closed-book{border:0;padding:0;position:relative;width:calc(var(--page-h)*.705);height:var(--page-h);border-radius:2px 7px 7px 2px;background:#7a9876;box-shadow:7px 5px 0 -2px #d3cfbb,11px 5px 0 -3px #bfbda9,15px 21px 32px -17px #75694a7a;transition:transform .6s,opacity .4s;transform-origin:left center;overflow:hidden}.closed-book:hover{transform:rotateY(-5deg) rotateZ(-.4deg)}.closed-book:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,#203e4c50,transparent 3%,transparent 96%,#fff6 98%,#30352045);pointer-events:none}.closed-book img{width:100%;height:100%;object-fit:cover}.cover-title{position:absolute;inset:65px 12px auto;text-align:center;color:#fffdf2;text-shadow:0 2px 8px #1f456c55;display:grid;gap:18px}.cover-title small{font:10px Georgia;letter-spacing:4px}.cover-title strong{font-family:"Songti SC","STSong",serif;font-size:clamp(24px,3vw,38px);letter-spacing:7px;font-weight:500}.cover-title>span{font-size:10px;letter-spacing:2px}.opening{animation:cover-open .7s forwards}@keyframes cover-open{to{transform:rotateY(-105deg);opacity:0}}.open-book{width:calc(var(--page-w)*2);height:var(--page-h);position:relative;filter:drop-shadow(0 23px 15px #7a715224);animation:appear .65s both}@keyframes appear{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.book-edge{position:absolute;inset:4px -4px -6px;background:repeating-linear-gradient(#e3decf 0 1px,#f8f5eb 1px 3px);border-radius:5px 9px 11px 8px;box-shadow:0 0 0 1px #d9d4c5}.pages{position:relative;isolation:isolate;width:100%;height:100%;perspective:2300px}.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left;transition:transform 850ms cubic-bezier(.36,.06,.2,1);will-change:transform}.leaf.turned{transform:rotateY(-180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);border-radius:0 6px 7px 0;display:flex;flex-direction:column;overflow:hidden}.face:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.35;background:repeating-linear-gradient(91deg,#ad9b7012 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,#b9ac8c0d 0 1px,transparent 1px 4px)}.front{box-shadow:inset 18px 0 20px -22px #514731, inset -1px 0 #d9d2bd}.back{transform:rotateY(180deg);border-radius:6px 0 0 7px;box-shadow:inset -20px 0 21px -22px #514731,inset 1px 0 #d9d2bd}.binding{position:absolute;inset:0 auto 0 50%;width:24px;transform:translateX(-50%);pointer-events:none;z-index:100;background:linear-gradient(90deg,transparent,#74634815 43%,#65553823 50%,#fff5 56%,transparent)}.binding i{position:absolute;left:6px;width:11px;height:3px;border-top:1px solid #a89b82;border-bottom:1px solid #d7cbb4;border-radius:50%;transform:rotate(-10deg)}.binding i:nth-child(1){top:19%}.binding i:nth-child(2){top:34%}.binding i:nth-child(3){top:49%}.binding i:nth-child(4){top:64%}.binding i:nth-child(5){top:79%}.art-face{padding:8% 8% 4%}.art-frame{flex:1;min-height:0;display:grid;place-items:center}.art-frame img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;user-select:none;-webkit-user-drag:none}.art-caption{text-align:center;flex-shrink:0;padding-top:20px;min-height:72px}.art-caption strong{font-size:14px;font-weight:500}.art-caption p{font-size:11px;color:#aaa18d;letter-spacing:1px;margin:9px 0}.page-no{position:absolute;bottom:10px;right:13px;font:9px Georgia;color:#c7bea9}.back .page-no{right:auto;left:13px}.title-face{justify-content:center;align-items:center;text-align:center;padding:12%;gap:18px}.title-face .tiny{font-size:10px;letter-spacing:5px;color:#a89d87}.title-face h1{font-family:"Songti SC",serif;color:var(--red);font-size:clamp(22px,3vw,39px);margin:0;white-space:nowrap}.title-face .rule{width:72px;border-top:1px dashed #cbc2ac;margin:8px 0}.title-face p{font-size:12px;color:#a29780;line-height:2;margin:0}.title-face .doodles{font-size:23px;letter-spacing:14px;margin-left:14px}.reader-controls{display:flex;align-items:center;justify-content:center;gap:24px;min-height:60px;margin-top:20px}.reader-controls .round{font-size:18px;border-color:transparent;background:transparent}.reader-controls p{color:#aaa392;font-size:12px;letter-spacing:2px;min-width:190px;text-align:center}.wall{border:0;max-width:none;max-height:none;width:100%;height:100dvh;padding:28px 32px 110px;background:radial-gradient(ellipse at 25% 8%,#faf6e9,#e6e0d0);color:#4e493c;overflow:auto}.wall::backdrop{background:#eae4d2dd}.wall-header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-28px;padding:14px 0 22px;z-index:3;background:linear-gradient(#f4efdf 70%,transparent)}.wall-header small{font:9px Georgia;letter-spacing:3px;color:#a59a80}.wall-header h1{font-size:22px;font-weight:500;margin:8px 0}.wall-status{font-size:13px;color:#9b8e72;text-align:center;margin:24px}.notes{columns:4 240px;column-gap:30px;padding:20px 10px 45px;max-width:1500px;margin:auto}.note{break-inside:avoid;margin:0 0 34px;padding:28px 23px 18px;background:var(--note-color,#f0ddda);box-shadow:2px 5px 6px #6f654d26,inset 0 1px 2px #fff9;border-radius:1px 1px 7px 1px;position:relative;transform:rotate(var(--tilt,-1deg));overflow-wrap:anywhere;animation:note-in .5s both}.note:before{content:"";position:absolute;top:-11px;left:35%;width:30%;height:23px;background:#fffcdf6b;box-shadow:0 1px 0 #fff4;transform:rotate(-2deg)}.note header{display:flex;gap:12px;justify-content:space-between;align-items:center}.note strong{font-size:14px;font-weight:600}.note time{font-size:10px;color:#9e927a;white-space:nowrap}.note>p{font-size:14px;line-height:1.9;white-space:pre-wrap;margin:14px 0 18px}.note footer{border-top:1px dashed #a7967533;padding-top:13px;display:flex;gap:18px}.note footer button{background:none;border:0;padding:0;font-size:12px;color:#9d8d70}.note footer button.liked{color:#ad6c59}.reply{font-size:12px;margin-top:15px;line-height:1.8;border-top:1px dashed #aa987333;padding-top:10px;white-space:pre-wrap}.reply time{margin-left:8px}.pill{border:0;background:#938363;color:#fffdf5;border-radius:40px;padding:14px 26px;box-shadow:0 5px 12px #69573625;font-size:14px;letter-spacing:1px}.write-note{position:fixed;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap}.wall>#load-more{display:block;margin:0 auto 15px}.composer{border:1px solid #e8dfcc;border-radius:7px;padding:28px;width:min(440px,calc(100% - 28px));max-height:90dvh;overflow:auto;background:#faf7ec;color:var(--ink);box-shadow:0 30px 80px #443a2333}.composer::backdrop{background:#4f493c44;backdrop-filter:blur(4px)}.composer header{display:flex;align-items:center;justify-content:space-between}.composer h2{font-size:21px;font-weight:500;margin:0}.composer .muted{font-size:12px;color:#a3967b;line-height:1.9;margin:15px 0 22px}.composer label{display:block;font-size:12px;color:#8b7e65}.composer input:not([type=radio]),.composer textarea{display:block;width:100%;border:0;border-bottom:1px solid #cec4ad;background:#fff8;color:#514e44;padding:12px;margin:7px 0 18px;border-radius:3px;resize:vertical;font-size:14px}.counter{text-align:right;font-size:11px;color:#aa9e83;margin-top:-10px}.honeypot{position:absolute;left:-9999px}.colors{padding:0;border:0;display:flex;gap:12px;margin:15px 0}.colors legend{font-size:12px;color:#a09274;margin-bottom:12px}.colors label{position:relative;cursor:pointer}.colors input{position:absolute;opacity:0}.colors span{display:block;width:26px;height:26px;border-radius:50%;border:2px solid transparent}.colors input:checked+span{outline:1px solid #a39169;outline-offset:3px}.colors small{display:block;text-align:center;margin-top:8px;font-size:10px}.colors input:focus-visible+span{outline:2px solid #715b35;outline-offset:3px}.pink{background:#efd7d4}.yellow{background:#f2e6b3}.green{background:#dce5ca}.purple{background:#e1daeb}.cream{background:#f1ead8}#form-status{font-size:12px;line-height:1.8;color:#a4644c}#submit-note{display:block;margin:18px 0 0 auto}.new-note{outline:1px solid #b8a77b;outline-offset:6px}@keyframes note-in{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
@media(max-width:700px){:root{--page-w:min(85vw,420px);--page-h:min(67dvh,590px)}.topbar{padding:16px;gap:12px}.topbar nav{gap:15px}.topbar nav>a{font-size:12px}.wordmark{font-size:11px;letter-spacing:1.5px}.wordmark span{font-size:8px;letter-spacing:2px}.round{width:36px;height:36px}.gallery{padding:86px 14px 18px}.closed-book{width:min(80vw,calc(var(--page-h)*.705))}.open-book{width:var(--page-w);height:var(--page-h)}.leaf{width:100%;left:0;transition:transform .7s cubic-bezier(.36,.06,.2,1)}.back{visibility:hidden}.face{border-radius:3px 6px 7px 3px}.binding{left:0;width:14px;transform:none}.binding i{left:0;width:8px}.reader-controls{gap:8px;margin-top:12px}.reader-controls p{font-size:11px;letter-spacing:1px}.cover-title{top:45px}.wall{padding:14px 15px 100px}.wall-header{top:-14px;padding-top:6px}.wall-header h1{font-size:19px}.notes{columns:2 135px;column-gap:17px;padding:15px 4px}.note{padding:22px 13px 13px;margin-bottom:25px}.note header{gap:6px;align-items:flex-start;flex-direction:column}.note strong{font-size:12px}.note>p{font-size:12px;margin:10px 0 13px}.note time{font-size:9px}.note footer{gap:12px}.note footer button{font-size:11px}.composer{padding:20px}.wall-status{font-size:12px}.title-face h1{font-size:28px}}
.face>div{width:100%;height:100%;min-height:0;display:flex;flex-direction:column}.static-left{border-radius:6px 0 0 7px}.art-frame{position:relative}.art-frame img{position:absolute;inset:0}.art-caption{position:relative;z-index:3}.title-face{display:flex;flex-direction:column}
@media(max-width:700px){.static-left{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}