@charset "UTF-8";
:root{color-scheme:dark;--bg:#080f20;--gold:#e6cca2;--border:#b69f7526}*{box-sizing:border-box}body{margin:0;height:100svh;overflow:hidden;background:var(--bg);color:#eee9e1;font-family:"Microsoft YaHei","PingFang SC",sans-serif;display:flex;flex-direction:column}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none}button:focus-visible,input:focus-visible,.letter-scroll:focus-visible{outline:1px solid var(--gold);outline-offset:5px}#sky,.ambient{position:fixed;inset:0;pointer-events:none;width:100%;height:100%}.ambient{background:radial-gradient(ellipse at 67% 50%,#34476025,transparent 53%),linear-gradient(100deg,#080e20bb,transparent 65%)}header,main,footer{position:relative;z-index:1}header{height:112px;flex-shrink:0;margin:0 5%;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:20px}.identity{display:flex;align-items:center;gap:18px}.seal{display:flex;width:46px;height:52px;border:1px solid #a991614a;align-items:center;justify-content:center;font:italic 32px Georgia;color:var(--gold);border-radius:24px 24px 3px 3px}h1{font-family:"Songti SC","SimSun",serif;font-size:23px;letter-spacing:4px;font-weight:400;margin:0}.identity p{font:8px Arial;letter-spacing:2.8px;color:#7e899b;margin:10px 0 0}.recipient{font-family:"Songti SC","SimSun",serif;font-size:17px;letter-spacing:4px;color:#c6baa5}.recipient>span{font:9px sans-serif;color:#6f798c;border:1px solid #69708355;padding:3px;margin-left:12px}.recipient small{display:block;font:9px "Microsoft YaHei";letter-spacing:2px;color:#6e798d;margin-top:10px}.follow{display:flex;gap:10px;align-items:center;padding:14px 0 14px 14px;font-size:10px;letter-spacing:1px;color:#a2aabd;min-width:146px}.follow>span:last-child{margin-left:5px;color:var(--gold)}.follow-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px #e6cca277}.browsing .follow{color:var(--gold)}.browsing .follow-dot{background:transparent;border:1px solid var(--gold);width:6px;height:6px;box-shadow:none}main{display:grid;grid-template-columns:210px minmax(0,1fr);flex:1;min-height:0;margin:0 5%;gap:5%}aside{display:flex;flex-direction:column;padding:52px 0 35px}.letter-label{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:3px;color:#baa787}.letter-label>span{height:1px;width:24px;background:#baa787}.chapter{font-family:"Songti SC","SimSun",serif;font-size:19px;line-height:1.9;letter-spacing:2px;color:#858c9a;margin:27px 0 0}.counter{margin-top:auto;padding-top:24px;color:#535e72;font:12px Georgia;letter-spacing:2px}.counter strong{font-weight:400;font-size:40px;color:#bfa77f;margin-right:9px}.side-note{border-top:1px solid var(--border);padding-top:22px;display:flex;align-items:center;gap:17px;color:#727c90}.side-note>span{font-size:29px;color:#a68b61}.side-note p{font-size:10px;letter-spacing:1.5px;line-height:2}.reading{position:relative;min-height:0;display:flex;flex-direction:column;overflow:hidden}.reading-rule{height:34px;width:1px;position:absolute;left:0;top:calc(50% - 28px);background:linear-gradient(transparent,#e6cca2,transparent);z-index:2;pointer-events:none}.letter-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;mask-image:linear-gradient(to bottom,transparent 0%,black 17%,black 76%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 17%,black 76%,transparent 100%)}.letter-scroll::-webkit-scrollbar{display:none}.letter-lines{list-style:none;margin:0;padding:0 24px 0 32px}.letter-lines:before,.letter-lines:after{content:"";display:block;height:var(--spacer,280px)}.letter-line{padding:18px 0;margin:0;position:relative;perspective:900px}.line-button{display:block;text-align:left;width:100%;font-family:"Songti SC","SimSun",serif;font-size:clamp(24px,2.65vw,40px);font-weight:400;line-height:1.65;letter-spacing:2px;padding:0;transform-origin:left center;color:#d4cfca;opacity:var(--opacity,.22);filter:blur(var(--blur,0px));transform:translate3d(var(--shift,0px),0,0) rotateX(var(--tilt,0deg)) scale(var(--scale,.95));transition:color .75s,opacity .6s,filter .65s,transform .85s cubic-bezier(.22,.7,.2,1)}.line-button:hover{color:#f4dfb9}.letter-line.is-current .line-button{color:var(--gold);text-shadow:0 0 32px #d7bc7b12}.letter-line.is-current:before{content:"";position:absolute;left:-18px;top:calc(50% - 2px);height:3px;width:3px;background:#d9bb84;border-radius:50%;box-shadow:0 0 10px #dbbd7c55}.letter-line.is-signature .line-button{font-size:20px;line-height:2;color:#bda583;font-style:italic}.line-button .word{display:inline-block;animation:arrive .95s both;animation-delay:calc(var(--word)*35ms)}.reading-caption{position:absolute;bottom:0;left:32px;right:0;display:flex;justify-content:space-between;gap:15px;padding:16px 0 19px;font-size:8px;letter-spacing:1.3px;color:#687387;pointer-events:none;background:linear-gradient(transparent,#080f20 65%)}.reading-caption>span:first-child{color:#ab9779}.reading-caption i{font-style:normal;margin:0 8px;color:#5f6878}footer{height:111px;flex-shrink:0;margin:0 5%;border-top:1px solid var(--border);display:grid;grid-template-columns:250px 1fr 190px;gap:30px;align-items:center}.track{display:flex;gap:15px;align-items:center}.record{width:38px;height:38px;border:1px solid #9b885044;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(#d7b6760a 0 1px,transparent 1px 4px)}.record i{width:10px;height:10px;border:1px solid #a18b61;border-radius:50%}.playing .record{animation:spin 12s linear infinite}.track strong{font:11px Georgia;letter-spacing:1px;color:#d9d2c7}.track small{display:block;margin-top:9px;font-size:8px;letter-spacing:1px;color:#69778e}.player{display:flex;align-items:center;gap:17px;font:9px Arial;color:#8d97aa}.icon-button{padding:8px;min-width:32px;min-height:38px;font-size:21px;color:#b6a17b}.play-button{width:43px;height:43px;min-width:43px;border:1px solid #b99f6f66;border-radius:50%;color:var(--gold);font-size:22px;display:grid;place-items:center;padding:0 0 0 2px;transition:background .3s}.play-button:hover{background:#bfa6791a}input[type=range]{appearance:none;-webkit-appearance:none;flex:1;min-width:40px;height:2px;cursor:pointer;background:linear-gradient(to right,#d7bd8b var(--progress,0%),#303a4d var(--progress,0%));margin:0}input::-webkit-slider-thumb{appearance:none;width:7px;height:7px;border-radius:50%;background:#e6cca2}input::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:#e6cca2}.player-note{font-size:9px;line-height:2;letter-spacing:1px;color:#7e889a;text-align:right}@keyframes spin{to{transform:rotate(360deg)}}@keyframes arrive{from{opacity:.2;transform:translateY(12px) rotateX(-14deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
@media(min-width:1500px){main{gap:8%}.letter-lines{padding-right:90px}.line-button{font-size:40px}}
@media(max-width:1000px){main{grid-template-columns:150px minmax(0,1fr);gap:4%}aside{padding-top:38px}.chapter{font-size:16px}.line-button{font-size:27px}.letter-lines{padding-right:12px}footer{grid-template-columns:210px 1fr;gap:20px}.player-note{display:none}.player{gap:12px}}
@media(max-width:650px){header{height:90px;margin:0 6%;gap:10px}.seal{width:34px;height:40px;font-size:25px}.identity{gap:10px}h1{font-size:17px;letter-spacing:2px}.identity p{font-size:6px;letter-spacing:1.4px;margin-top:7px}.recipient{font-size:12px;letter-spacing:1px}.recipient small{font-size:7px;letter-spacing:.5px;margin-top:7px}.recipient>span{font-size:7px;margin-left:4px;padding:1px}.follow{position:fixed;right:7%;bottom:153px;padding:10px 0 10px 10px;min-width:0;font-size:9px;gap:7px;z-index:4}.follow>span:last-child{margin-left:2px}main{margin:0 6%;display:flex;flex-direction:column;gap:0}aside{padding:23px 0 0;flex-direction:row;align-items:center;justify-content:space-between;flex-shrink:0}.letter-label{font-size:8px;letter-spacing:2px;gap:9px}.letter-label>span{width:15px}.chapter,.side-note{display:none}.counter{padding:0;margin:0;font-size:9px}.counter strong{font-size:19px;margin-right:3px}.reading{flex:1;min-height:0}.letter-lines{padding:0 6px 0 8px}.letter-line{padding:15px 0}.line-button{font-size:25px;letter-spacing:1px;line-height:1.75}.letter-line.is-signature .line-button{font-size:18px}.letter-line.is-current:before{left:-7px;width:2px;height:2px}.reading-rule{display:none}.reading-caption{left:8px;right:0;font-size:7px;letter-spacing:.5px;padding-bottom:16px}.reading-caption>span:last-child{display:none}footer{height:145px;margin:0 6%;display:flex;flex-direction:column;gap:14px;padding:18px 0 max(17px,env(safe-area-inset-bottom));align-items:stretch}.track{gap:10px}.record{width:25px;height:25px}.record i{width:7px;height:7px}.track strong{font-size:10px}.track small{font-size:7px;margin-top:5px}.player{gap:12px}.play-button{width:36px;height:36px;min-width:36px;font-size:18px}.icon-button{font-size:20px;min-width:26px;padding:3px}.player-note{display:none}}
@media(max-height:540px) and (min-width:651px){header{height:75px}footer{height:85px}aside{padding-top:25px}.side-note{display:none}.line-button{font-size:25px}.letter-line{padding:13px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.line-button{filter:none;transform:none}}
.letter-lines:after{height:var(--tail,280px)}