@font-face{font-family:Sunlit Serif;src:url(/fonts/sunlit-serif.woff2)format("woff2");font-weight:400 700;font-display:swap}:root{color:#474b3e;font-synthesis:none;--ink:#474b3e;--muted:#606651;--accent:#b57926;--button:#edc36f;--yellow:#f6e8af;--green:#e2e9d4;--pink:#f2ddd7;--blue:#dce9e9;--paper-shadow:2px 7px 13px -7px #6b624435, 0 2px 3px -2px #6b624424;--serif:"Sunlit Serif", "Noto Serif SC", "Songti SC", "SimSun", serif;--writing-row:36px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;scrollbar-color:#c9c9b5 #f8f6ef;scrollbar-width:thin;background:#f8f6ef;font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.6;overflow-y:scroll}*{box-sizing:border-box}body{background:#f1ecde;margin:0}#root{isolation:isolate;background-blend-mode:normal, multiply;background-color:#f1ecde;background-image:radial-gradient(1000px 800px at 18% 200px,#fff8dfa6,#0000 68%),url(/images/paper-texture.webp);background-repeat:no-repeat,repeat;background-size:auto,360px 360px;min-height:100dvh;display:flow-root;position:relative}.daylight{z-index:2;pointer-events:none;mix-blend-mode:multiply;opacity:.16;position:absolute;inset:0;overflow:hidden}.daylight-tile{position:absolute;left:0;right:0;overflow:hidden}.daylight-tile canvas{filter:blur(9px);position:absolute}button,input,textarea{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.52}a{color:inherit;text-underline-offset:4px}button,a,input,textarea{outline-offset:5px}:focus-visible{outline:2px solid #8a6629}::selection{color:#3c4235;background:#e9cf89}input,textarea{caret-color:#9b6c27}button{-webkit-appearance:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:10;background:var(--yellow);padding:12px;position:fixed;top:-100px;left:20px}.skip-link:focus{top:12px}.primary-button{background:var(--button);color:#554323;border:0;border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:10px 22px;font-size:14px;font-weight:500;transition:background .18s,transform .18s;display:inline-flex}.primary-button:not(:disabled):hover{background:#e8b954;transform:translateY(-1px)}.primary-button:active{transform:translateY(0)}.floating-compose{z-index:4;border-radius:12px;min-height:50px;padding:12px 23px;position:fixed;bottom:30px;right:max(28px,50vw - 580px);box-shadow:0 6px 22px -8px #7d633765}main{--toolbar-top:48px;--toolbar-clearance:calc(var(--toolbar-top) + 56px);max-width:880px;margin:var(--toolbar-top) auto 0;padding:0 40px}.wall-section{padding-bottom:120px;scroll-margin-top:22px}.wall-toolbar{top:var(--toolbar-top);z-index:3;margin-bottom:42px;position:sticky}.filters{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.filter-option{cursor:pointer;position:relative}.filter-option>span{white-space:nowrap;border:1.5px solid #0000;border-radius:6px;align-items:center;gap:6px;min-height:36px;padding:5.5px 9.5px;font-size:12px;transition:background .18s;display:flex}.filter-option input:focus-visible+span{outline-offset:5px;outline:2px solid #8a6629}.filter-mark{flex-shrink:0;justify-content:center;align-items:center;width:12px;height:14px;display:inline-flex}.filter-all{color:var(--muted);background:#f4efdfeb}.filter-all.active{color:#454d39;background:#e2e8d5;border-color:currentColor;font-weight:600}.filter-button{background:0 0;align-items:center;gap:6px;display:inline-flex}.filter-button.selected{border-color:currentColor;font-weight:600}.filter-button:not(.selected){background:#f4efdfeb}.filter-button.selected.color-daily{background:#f2e7be}.filter-button.selected.color-joy{background:#e2e8d5}.filter-button.selected.color-thoughts{background:#efddd7}.filter-button.selected.color-wishes{background:#dde8e7}.filter-button:not(.selected):hover{text-underline-offset:4px;text-decoration:underline}.category-dot{opacity:.8;background:currentColor;border-radius:50%;flex-shrink:0;width:7px;height:7px;display:inline-block}.color-daily,.paper-daily{--paper:var(--yellow);--paper-ink:#6d5c2e;--tape:#dc9}.color-joy,.paper-joy{--paper:var(--green);--paper-ink:#546245;--tape:#bbc8a3}.color-thoughts,.paper-thoughts{--paper:var(--pink);--paper-ink:#75504b;--tape:#dbbdb4}.color-wishes,.paper-wishes{--paper:var(--blue);--paper-ink:#496563;--tape:#b4cbca}.filter-button{color:var(--paper-ink)}.wall-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:44px 58px;padding:0 12px;display:grid}.note,.wall-bottom button{scroll-margin-top:var(--toolbar-clearance)}.note{background:var(--paper);box-shadow:var(--paper-shadow);width:var(--paper-width);min-height:var(--paper-height);margin-top:var(--paper-drop);transform:translateX(var(--offset)) rotate(var(--rotation));color:#474b3e;border-radius:2px 3px 5px 2px;flex-direction:column;justify-self:center;padding:28px 28px 21px;display:flex;position:relative}.note:nth-child(2n){margin-top:calc(92px + var(--paper-drop))}.paper-tape{background:var(--tape);opacity:.65;width:52px;height:21px;position:absolute;top:-10px;left:calc(50% - 26px);transform:rotate(-4deg)}.tape-1 .paper-tape{width:46px;left:26px;transform:rotate(-12deg)}.tape-2 .paper-tape{left:auto;right:30px;transform:rotate(9deg)}.note-category{color:var(--paper-ink);letter-spacing:.08em;align-self:flex-start;align-items:center;gap:6px;font-size:10px;display:inline-flex}.note-content{white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:.035em;flex:1;margin:20px 0 30px;font-family:Noto Serif SC,Songti SC,SimSun,serif;font-size:19px;font-weight:400;line-height:1.9}.note-content.long-note{font-size:16px}.note.sized-note{width:100%;min-height:0;padding:28px 28px 21px}.sized-note .paper-writing{min-height:calc(var(--writing-lines) * var(--writing-row));font-size:var(--writing-font);line-height:var(--writing-row)}.note-footer{color:var(--paper-ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:10px;line-height:1.7;display:flex}.note-author{overflow-wrap:anywhere;max-width:60%}.note-author:before{content:"— "}.note-footer time{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:9px}.wall-bottom{z-index:3;text-align:center;min-height:56px;color:var(--muted);padding-top:24px;font-size:12px;position:relative}.wall-state{text-align:center;padding:66px 20px 80px}.wall-state>svg{color:#b28c47}.wall-state h2{font:22px/1.8 var(--serif);margin:16px 0 8px}.wall-state p{color:var(--muted);margin:0 0 22px;font-size:13px}.quiet-button{background:#e9ebdc;border:0;border-radius:6px;justify-content:center;align-items:center;gap:10px;min-height:44px;padding:11px 19px;font-size:13px;display:inline-flex}.quiet-button:hover{background:#dfe3ce}.paper-placeholder{height:248px;box-shadow:var(--paper-shadow);background:#ecebdc;padding:45px 30px;transform:rotate(-.7deg)}.paper-placeholder:nth-child(2n){margin-top:24px;transform:rotate(.8deg)}.paper-placeholder span{background:#dedfcd;width:83%;height:9px;margin:18px 0;display:block}.paper-placeholder span:last-child{width:52%}.skeleton-wall{animation:2s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.58}}.composer-dialog{scrollbar-width:none;width:min(280px,100% - 32px);max-height:calc(100dvh - 32px);color:var(--ink);background:0 0;border:0;border-radius:4px;padding:12px 0 0;overflow:hidden auto}.composer-dialog::-webkit-scrollbar{display:none}.composer-dialog[open]{animation:.3s cubic-bezier(.16,1,.3,1) unfold}.composer-dialog::backdrop{background:#34382c59}@keyframes unfold{0%{opacity:.7;transform:translateY(12px)rotate(-1deg)}to{opacity:1;transform:translateY(0)rotate(0)}}.composer{background:var(--paper);box-shadow:var(--paper-shadow);border-radius:2px 3px 5px 2px;padding:28px 28px 21px;position:relative}.paper-sizes{justify-content:space-between;gap:8px;margin-bottom:20px;display:flex}.paper-size-option{cursor:pointer;flex:1;position:relative}.paper-size-option>span{background:#f4efdf;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;gap:6px;min-height:36px;font-size:12px;display:flex}.paper-size-option small{color:var(--muted);font-size:10px}.paper-size-option input:checked+span{background:#e2e8d5;border-color:#546245;font-weight:600}.paper-size-option input:focus-visible+span{outline-offset:3px;outline:2px solid #8a6629}.paper-size-option input:disabled+span{opacity:.52;cursor:not-allowed}.capacity-notice{color:var(--ink);background:#f4efdf;border-radius:6px;margin:0 0 16px;padding:8px 12px;font-size:11px}.composer-tape{z-index:1}.composer-category{gap:6px;position:relative}.composer-category select{appearance:none;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:6px 20px 6px 0}.composer-category option{background:var(--paper)}.composer-category>svg{pointer-events:none;position:absolute;right:0;transform:rotate(90deg)}.icon-button{background:0 0;border:0;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.icon-button:not(:disabled):hover{background:#fff5}.composer-close{position:absolute;top:16px;right:15px}.composer .paper-writing{width:100%;line-height:var(--writing-row);font-family:Noto Serif SC,Songti SC,SimSun,serif;font-size:var(--writing-font);letter-spacing:.035em;white-space:pre-wrap;overflow-wrap:anywhere;background:0 0;border:0;border-radius:0;padding:0}.composer textarea{height:calc(var(--writing-lines) * var(--writing-row));resize:none;margin-top:20px;display:block;overflow:hidden}.composer .paper-measure{visibility:hidden;pointer-events:none;height:0;max-height:0;position:absolute;top:0;left:0;overflow:hidden}.composer textarea:focus-visible,.composer-author input:focus-visible{box-shadow:0 1px 0 var(--paper-ink);outline:none}.composer textarea::placeholder{color:var(--paper-ink);opacity:1}.writing-bottom{color:var(--paper-ink);font-variant-numeric:tabular-nums;justify-content:flex-end;margin:8px 0 18px;font-size:10px;display:flex}.invalid,.form-error{color:#9a382e}.composer-author{min-width:0;color:var(--paper-ink);flex:1;align-items:center;gap:6px;font-size:10px;display:flex}.composer-author:before{content:"—"}.composer-author input{background:0 0;border:0;border-radius:0;width:100%;min-width:0;min-height:36px;padding:6px 0}.composer-author input::placeholder{color:var(--paper-ink);opacity:1}.form-error{font-size:12px;line-height:1.7}.composer .form-error{margin:12px 0}.composer-actions{justify-content:space-between;align-items:center;gap:20px;display:flex}.composer-actions .primary-button{color:#fffef3;background:#626e4e;flex-shrink:0;min-height:36px;padding:7px 12px;font-size:12px}.composer-actions .primary-button:not(:disabled):hover{background:#505e3d}.new-notes,.toast{z-index:3;border:0;border-radius:8px;justify-content:center;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:14px 21px;font-size:12px;display:flex;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 5px 24px -8px #34382c55}.new-notes{color:#fffef3;white-space:nowrap;background:#657350;min-height:46px}.new-notes:hover{background:#53613f}.notification-dot{background:#efd394;border-radius:50%;width:6px;height:6px}.toast{color:#4e543e;background:#f2e7c2;width:max-content}.toast svg{flex-shrink:0}@media (width>=651px) and (width<=800px){.note{transform:translateX(calc(var(--offset) * .65)) rotate(calc(var(--rotation) * .65))}}@media (width<=650px){main{--toolbar-top:25px;--toolbar-clearance:calc(var(--toolbar-top) + 98px);max-width:470px;padding:0 29px}.floating-compose{min-height:48px;padding:11px 19px;font-size:13px;bottom:20px;right:18px}.wall-toolbar{margin-bottom:28px}.filters{gap:6px}.filter-option>span{min-height:36px;padding:5.5px;font-size:11px}.all-option{flex-basis:100%;width:100%}.all-option>span{width:max-content}.wall-grid{grid-template-columns:minmax(0,1fr);row-gap:33px;padding:0 5px}.note{width:calc((100% + var(--paper-width)) / 2);transform:translateX(calc(var(--offset) * .55)) rotate(calc(var(--rotation) * .65));padding:28px 26px 23px}.note:nth-child(2n){margin-top:var(--paper-drop)}.note-content{margin-bottom:30px;font-size:19px}.note-footer{font-size:10px}.note-footer time{font-size:9px}.paper-placeholder:nth-child(2n){margin-top:0}.composer{padding:28px 28px 21px}.composer-actions{gap:12px}.new-notes,.toast{bottom:86px}}@media (width<=389px){main{--toolbar-clearance:calc(var(--toolbar-top) + 140px)}}@media (width<=370px){main{padding-inline:24px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
