*{box-sizing:border-box}body{margin:0;background:#f4eddd;color:#2c6071;font-family:"Microsoft YaHei",system-ui,sans-serif;background-image:radial-gradient(#977a5014 .65px,transparent .8px);background-size:6px 6px}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #ba623d;outline-offset:4px}.site-header{max-width:1260px;margin:auto;padding:23px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #c5b39555}.brand{font-weight:800;font-size:15px;letter-spacing:2px}.brand small{display:block;font-weight:400;font-size:8px;letter-spacing:3px;margin-top:6px}.connection{font-size:10px;color:#a68c66;display:flex;align-items:center;gap:7px}.connection i{width:6px;height:6px;border-radius:50%;background:#b8a27a}.connection.yes i{background:#628970}.connection.no i{background:#b36543}.page{max-width:1200px;margin:auto;padding:32px 30px 26px}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:0 8px 28px}.eyebrow{font-size:9px;letter-spacing:3px;color:#b55639}h1{font-size:46px;letter-spacing:-1px;line-height:1.22;margin:14px 0 15px}h1 em{font-style:normal;color:#b6573a}.intro p{font-size:12px;line-height:1.9;color:#9b8360;margin:0}.received{padding-bottom:9px;text-align:right}.received>span{font-size:10px;color:#a68e68;letter-spacing:2px}.received strong{display:block;font-size:46px;color:#b6573a;font-weight:600;line-height:1.8;font-variant-numeric:tabular-nums}.received strong small{font-size:12px;font-weight:400;color:#8d7755}.received p{font-size:10px}.wall-section{border:1px solid #c9b28a;border-radius:19px;overflow:hidden;background:#f7efdd;box-shadow:0 15px 45px #8c6d3b0d}.wall-toolbar{min-height:56px;padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #d0bd9955;background:#faf3e4}.wall-title{font-size:11px;letter-spacing:2px;white-space:nowrap}.wall-title i{display:inline-block;width:4px;height:4px;background:#b45a3b;border-radius:50%;vertical-align:middle;margin-left:5px}.wall-tools{display:flex;gap:7px}.wall-tools button{font-size:10px;border:1px solid #cfbb96;color:#997b54;background:transparent;border-radius:20px;padding:6px 10px;white-space:nowrap}.wall-tools button[aria-pressed=true]{background:#2b6273;color:#f9efd8;border-color:#2b6273}.wall{height:420px;position:relative;isolation:isolate;overflow:hidden}.wall-bg{position:absolute;inset:0;background-image:url('/wall-bg.webp');background-position:center bottom;background-size:100% auto;background-repeat:no-repeat;opacity:.56;z-index:-2}.wall-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(#faf3e4 .5%,#faf3e4b0 36%,#faf3e425 78%,#faf3e455)}.float-root{position:absolute;left:0;right:0;top:15px;bottom:30px;overflow:hidden}.bubble{position:absolute;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;white-space:nowrap;padding:10px 20px 11px;border-radius:26px;border:1px solid #b9c5bb;background:#fff9eaf5;color:#2e6577;box-shadow:0 4px 15px #6554310a;will-change:transform;user-select:none}.bubble-meta{font-size:8px;letter-spacing:1px;opacity:.6}.bubble-text{font-size:15px;line-height:1.3;font-weight:500;letter-spacing:.3px}.bubble.brick{color:#a34d33;border-color:#d4aa8b;background:#fff3dfee}.bubble.green{color:#527965;border-color:#b7c4aa;background:#f6f5dfef}.bubble.mine{border-width:2px;border-color:#bc5838;box-shadow:0 4px 20px #a74d2924;background:#fff0d3}.wall-foot{position:absolute;bottom:12px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:8px;color:#907247;gap:12px;pointer-events:none}.empty-wall{position:absolute;top:30%;left:0;right:0;text-align:center;color:#9b805c;pointer-events:none}.empty-wall span{font-size:17px}.empty-wall small{display:block;font-size:11px;margin-top:15px}.composer-section{padding:26px 8px 18px}.write-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:14px}.write-heading h2{margin:0;font-size:15px;letter-spacing:1px}.write-heading>span{color:#a18b66;font-size:10px}.input-wrap{position:relative;background:#fff8e9;border:1px solid #c9b28a;border-radius:11px;overflow:hidden}.input-wrap textarea{display:block;resize:vertical;width:100%;min-height:85px;max-height:180px;border:0;background:transparent;padding:16px 18px 28px;color:#755b3d;font-size:13px;line-height:1.8}.input-wrap textarea::placeholder{color:#b09a75}.length{position:absolute;right:14px;bottom:10px;color:#b09b76;font-size:9px;pointer-events:none}.length.over{color:#a5412a}.compose-bottom{display:flex;align-items:center;gap:18px;margin-top:12px}.nickname{display:flex;align-items:center;gap:10px;font-size:10px;color:#a08761;flex:1;min-width:0}.nickname input{background:transparent;border:0;border-bottom:1px solid #c9b28a;color:#866e4b;font-size:11px;width:200px;padding:7px 2px;min-width:0}.nickname input::placeholder{color:#ab9673}.colors{display:flex;gap:8px;align-items:center}.color{width:25px;height:25px;border-radius:50%;border:1px solid transparent;padding:4px;position:relative;background:none}.color[aria-pressed=true]{border-color:#ac946c}.color span{width:15px;height:15px;border-radius:50%;display:block;background:#30687a}.color.brick span{background:#b65b3d}.color.green span{background:#64826b}.color i{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;color:#fff5dc;font-style:normal}.send{border:0;background:#b55639;color:#fff3dd;border-radius:9px;padding:13px 24px;font-size:12px;box-shadow:0 3px 0 #94412c;min-width:196px}.send:disabled{opacity:.45;box-shadow:none;cursor:default}.inspiration{display:flex;gap:9px;align-items:center;margin-top:20px;flex-wrap:wrap}.inspiration>span{font-size:9px;color:#aa936f}.inspiration button{border:1px solid #ceba96;border-radius:20px;background:transparent;color:#9a7c53;font-size:9px;padding:6px 10px}.form-status{font-size:9px;color:#a58e68;line-height:1.8;min-height:18px;margin:14px 0 0}.form-status.has-message{color:#9f5437}.reading-list{margin:10px 8px 0;border-top:1px solid #cbb79166;padding-top:17px;color:#9a7c55;font-size:11px}.reading-list summary{cursor:pointer;list-style-position:inside}.reading-list summary>span{float:right;font-size:9px;color:#ae9671}.message-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.reading-card{border:1px solid #c8b693;background:#fcf5e5;border-radius:10px;padding:17px;text-align:left;color:#356b78}.reading-card p{font-size:13px;line-height:1.9;margin:0 0 12px;overflow-wrap:anywhere}.reading-card small{font-size:9px;color:#9f8660}.reading-card.brick{color:#a55337}.reading-card.green{color:#537764}.site-footer{text-align:center;font-size:9px;color:#a58e69;padding:0 16px 23px;letter-spacing:1px}.veil{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:22px;background:#29464a88;backdrop-filter:blur(6px)}.read-sheet{width:100%;max-width:450px;background:#fbf2df;border:1px solid #d6ba8d;border-radius:13px;padding:30px}.read-sheet p{font-size:22px;line-height:1.9;overflow-wrap:anywhere;margin:22px 0;color:#2d6172}.read-sheet>small{font-size:11px;color:#a08861;display:block;text-align:right}.read-sheet>button{background:#2c6374;color:#fff0d5;border:0;border-radius:9px;width:100%;padding:12px;margin-top:27px;font-size:12px}.display-mode .intro,.display-mode .composer-section,.display-mode .reading-list,.display-mode .site-header,.display-mode .site-footer{display:none}.display-mode .page{max-width:none;padding:15px}.display-mode .wall-section{height:calc(100dvh - 30px);display:flex;flex-direction:column}.display-mode .wall{flex:1;height:auto}.display-mode .float-root{top:55px;bottom:30px}.display-mode .wall-bg{background-size:100% auto}.display-exit{position:fixed;bottom:26px;right:26px;border:1px solid #b7996b;background:#fff3dcf0;padding:10px 17px;border-radius:22px;color:#8c6b45;font-size:11px;z-index:6}@media(max-width:760px){.site-header{padding:17px 19px}.brand{font-size:13px}.brand small{font-size:7px}.connection{font-size:8px;gap:5px}.page{padding:23px 15px 18px}.intro{padding:0 3px 23px;gap:10px}.eyebrow{font-size:7px;letter-spacing:1.5px}h1{font-size:32px;letter-spacing:0;margin:12px 0}.intro p{font-size:10px;line-height:1.9}.received{padding-bottom:3px}.received>span{font-size:8px;letter-spacing:.5px}.received strong{font-size:30px;line-height:1.9}.received strong small{font-size:9px}.received p{display:none}.wall-toolbar{padding:11px 10px;min-height:50px;gap:5px;flex-wrap:wrap}.wall-title{font-size:9px;letter-spacing:1px}.wall-tools{gap:5px}.wall-tools button{font-size:8px;padding:5px 7px}.display-button{display:none}.wall{height:350px}.wall-section{border-radius:15px}.wall-bg{background-size:auto 180px;background-position:41% bottom;opacity:.52}.float-root{top:13px;bottom:24px}.bubble{padding:9px 16px 10px;gap:4px}.bubble-text{font-size:13px}.bubble-meta{font-size:7px}.wall-foot{font-size:7px;left:11px;right:11px;bottom:9px;gap:7px}.wall-foot span:last-child{white-space:nowrap}.composer-section{padding:22px 3px 10px}.write-heading{display:block;margin-bottom:12px}.write-heading h2{font-size:14px}.write-heading>span{display:block;font-size:9px;margin-top:7px}.input-wrap textarea{font-size:12px;padding:13px 13px 25px;min-height:95px}.compose-bottom{gap:10px;flex-wrap:wrap;margin-top:12px}.nickname{flex-basis:calc(100% - 110px);font-size:9px}.nickname input{width:155px;font-size:10px}.colors{gap:5px}.color{width:23px;height:23px}.send{flex-basis:100%;font-size:12px;padding:13px}.inspiration{margin-top:17px;gap:7px}.inspiration>span{font-size:8px;flex-basis:100%}.inspiration button{font-size:8px;padding:6px 8px}.form-status{font-size:8px;line-height:1.9;margin-top:12px}.reading-list{font-size:10px;margin:13px 3px 0}.reading-list summary>span{font-size:8px}.message-grid{grid-template-columns:1fr 1fr;gap:8px}.reading-card{padding:12px}.reading-card p{font-size:11px}.reading-card small{font-size:8px}.site-footer{font-size:8px;line-height:1.8;padding-bottom:17px}.read-sheet{padding:25px}.read-sheet p{font-size:20px}.display-mode .page{padding:8px}.display-mode .wall-section{height:calc(100dvh - 16px)}.display-mode .display-button{display:block}.display-exit{right:18px;bottom:18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Three visual distances, free positions and soft vertical drift. */
.bubble{white-space:normal;transform-origin:center;backface-visibility:hidden;isolation:isolate}.bubble-text{white-space:normal;max-width:340px;overflow-wrap:anywhere;line-height:1.5;letter-spacing:.1px}.bubble-meta{white-space:nowrap}.bubble.depth-near{padding:12px 22px 13px;border-radius:29px;z-index:3;box-shadow:0 7px 23px #7b582521;opacity:1}.depth-near .bubble-text{font-size:19px;font-weight:600;max-width:340px}.depth-near .bubble-meta{font-size:9px}.bubble.depth-mid{padding:10px 18px 11px;border-radius:23px;z-index:2;opacity:.9;box-shadow:0 4px 13px #77603b10}.depth-mid .bubble-text{font-size:15px;max-width:310px}.depth-mid .bubble-meta{font-size:8px}.bubble.depth-far{padding:8px 14px 9px;border-radius:18px;z-index:1;opacity:.72;box-shadow:none}.depth-far .bubble-text{font-size:12px;max-width:275px;font-weight:400}.depth-far .bubble-meta{font-size:7px}.bubble.mine{opacity:1;border-width:2px;box-shadow:0 7px 27px #aa54242a}@media(max-width:760px){.bubble.depth-near{padding:10px 17px 11px}.depth-near .bubble-text{font-size:16px;max-width:245px}.depth-near .bubble-meta{font-size:8px}.bubble.depth-mid{padding:9px 15px 10px}.depth-mid .bubble-text{font-size:13px;max-width:225px}.depth-mid .bubble-meta{font-size:7px}.bubble.depth-far{padding:7px 12px 8px}.depth-far .bubble-text{font-size:11px;max-width:205px}.depth-far .bubble-meta{font-size:7px}}

.bubble-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:760px){.bubble.depth-near{padding:9px 17px 10px}.depth-near .bubble-text{max-width:225px}.depth-mid .bubble-text{max-width:200px}.depth-far .bubble-text{max-width:175px}}