@font-face{font-family:NewYork;src:url('/assets/new-york.otf') format('opentype');font-display:swap}
@font-face{font-family:CarvedSong;src:url('/assets/chinese.woff2') format('woff2'),url('/assets/chinese.ttf') format('truetype');font-display:swap}
:root{--ink:#233a43;--accent:#916b47;--base:#dce6e8;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--base);font-synthesis:none;letter-spacing:0}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{border:0;background:none}svg{width:18px;height:18px;stroke-width:1.25;flex-shrink:0}[hidden]{display:none!important}
#weather{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--base)}.weather-layer{position:absolute;inset:-3%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.3s ease;animation:breathe 18s ease-in-out infinite alternate}.weather-layer.active{opacity:1}#weather:after{content:'';position:absolute;inset:0;background:#ffffff24}
.island{width:min(100%,470px);margin:auto;min-height:100svh;min-height:100dvh;padding:calc(23px + env(safe-area-inset-top)) 28px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;gap:21px;transition:filter .5s,opacity .5s}
.masthead{position:relative;padding-top:13px;width:100%;flex-shrink:0}.tools-link{position:absolute;top:-5px;right:0;display:flex;align-items:center;gap:5px;min-height:44px;font-size:16px;z-index:1}.tools-link svg{width:14px;height:14px}.tools-link:hover{color:var(--accent)}
h1{font-family:NewYork,Georgia,serif;font-size:78px;line-height:.81;font-weight:400;margin:14px 0 20px;position:relative;width:max-content;max-width:100%}h1>span:not(.title-star){display:block}h1>span:nth-child(2){padding-left:64px;margin-top:7px}.title-star{position:absolute;right:6px;top:77px;font-family:Georgia,serif;font-size:28px;line-height:1;color:var(--accent)}.masthead>p{font-size:11px;margin:0 0 0 3px;white-space:nowrap}
.song-stage{position:relative;touch-action:pan-y;min-height:355px}.song-content{padding:21px 20px 19px;border:1px solid #ffffffbd;border-right-color:#fff7;border-bottom-color:#b4bfca66;border-radius:5px;background:linear-gradient(125deg,#fff7,#ffffff20 50%,#fff5);box-shadow:0 18px 45px #3349520c,inset 0 0 28px #ffffff1a;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);min-height:355px}.song-content.changing{animation:dissolve .65s ease both}.song-topline{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:10px;font-variant-numeric:tabular-nums}.song-index{font-family:NewYork,Georgia,serif;font-size:26px;line-height:1}.song-date{opacity:.67}.song-title{font-family:CarvedSong,'Songti SC',serif;font-size:34px;font-weight:400;line-height:1.25;margin:0 0 7px;overflow-wrap:anywhere}.song-artist{font-family:CarvedSong,'Songti SC',serif;font-size:13px;margin:0 0 11px}.song-meta{font-family:Arial,'Microsoft YaHei',sans-serif;font-size:10px;opacity:.75;margin:0 0 17px}.artwork-wrap{position:relative;margin:0 25px 0 0}.artwork{display:block;width:100%;aspect-ratio:857/735;object-fit:cover;border-radius:2px;background:#ccd4d5;box-shadow:0 7px 22px #18313c12}.artwork.failed{object-fit:contain;opacity:0}.artwork-wrap:has(.failed){background:linear-gradient(135deg,#becdd0,#edf0e9);min-height:160px}.qr-thumbnail{position:absolute;right:-25px;bottom:-17px;padding:6px;background:#fff;box-shadow:0 6px 16px #1b30332b;transform:rotate(5deg);width:79px;height:79px;transition:transform .3s}.qr-thumbnail:hover{transform:rotate(0) scale(1.05)}.qr-thumbnail img{display:block;width:100%;height:100%;object-fit:contain}.qr-thumbnail>svg{position:absolute;right:-7px;top:-7px;background:#fff;border-radius:50%;width:22px;height:22px;padding:4px;box-shadow:0 2px 6px #0001}.quote{display:grid;grid-template-columns:20px minmax(0,1fr) 17px;align-items:center;gap:3px;margin:25px 0 0;min-height:30px}.quote p{font-family:CarvedSong,'Songti SC',serif;font-size:12px;line-height:1.8;margin:0;text-align:center;overflow-wrap:anywhere}.quote-mark{font-family:NewYork,Georgia,serif;color:var(--accent);font-size:37px;line-height:1;align-self:start}.quote-mark:last-child{align-self:end;transform:translateY(11px)}
.song-content.is-progress{padding-bottom:28px}.is-progress .song-title{font-family:NewYork,Georgia,serif;font-size:42px;margin:14px 0 9px}.progress-label{font-size:10px;margin:0 0 24px}.is-progress .artwork-wrap{margin-right:0;overflow:hidden}.is-progress .artwork{filter:blur(3px) saturate(.58);transform:scale(1.035);aspect-ratio:1.3}.progress-space{height:25px}
.song-nav{height:54px;position:relative;flex-shrink:0;overflow:hidden}.song-nav button{position:absolute;left:calc(50% - 28px);width:56px;height:54px;top:0;font-family:NewYork,Georgia,serif;font-size:24px;opacity:.38;transform:translateX(calc(var(--offset)*96px)) scale(.72);transition:transform .65s ease,opacity .65s ease,font-size .65s ease}.song-nav button[aria-current=true]{font-size:44px;opacity:1;transform:translateX(0) scale(1)}.song-nav button[aria-current=true]:after{content:'';position:absolute;bottom:0;left:25px;width:6px;height:1px;background:var(--accent)}footer{text-align:center;font-size:11px;line-height:1.5;flex-shrink:0;opacity:.8;white-space:nowrap}
body:has(dialog[open]){overflow:hidden}body:has(dialog[open]) .island{filter:blur(9px)}dialog{border:0;background:none;color:#fff;padding:50px 20px 20px;overflow:visible;width:min(440px,100%);max-width:100%;max-height:100dvh;outline:none}dialog::backdrop{background:#17212a99;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.icon-button{display:grid;place-items:center;width:44px;height:44px}.qr-close{position:absolute;right:10px;top:0;color:#fff}.qr-close svg{width:25px;height:25px}.qr-presentation{position:relative;width:min(100%,340px);aspect-ratio:1;margin:auto;perspective:700px}#qr-large{display:block;width:100%;height:100%;object-fit:contain;background:white;box-shadow:0 20px 90px #0003;opacity:1;-webkit-touch-callout:default;user-select:auto}#qr-large.assembling{animation:qr-reveal 1.35s linear both}#qr-caption{text-align:center;font-family:CarvedSong,'Songti SC',serif;font-size:13px;opacity:.78;margin-top:24px}#qr-shards{position:absolute;inset:0;pointer-events:none;z-index:1}.shard{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;clip-path:var(--clip);animation:assemble 1.3s cubic-bezier(.22,.66,.25,1) both;animation-delay:var(--delay);backface-visibility:hidden;filter:drop-shadow(0 0 2px #fff9)}
.tools-page{min-height:100dvh;background:#f5f7f4d9;padding:calc(20px + env(safe-area-inset-top)) 25px 80px}.reading-header{width:min(100%,780px);margin:0 auto 45px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #81909240;padding-bottom:18px}.reading-header a{display:flex;gap:12px;align-items:center;min-height:44px}.reading-header>span{font-family:NewYork,Georgia,serif;font-size:28px}.prose{width:min(100%,680px);margin:auto;font-family:Arial,'Microsoft YaHei',sans-serif;font-size:15px;line-height:1.95;overflow-wrap:anywhere}.prose h1{font-family:CarvedSong,'Songti SC',serif;font-size:32px;line-height:1.45;margin:0 0 30px;max-width:100%;width:auto}.prose h2{font-family:CarvedSong,'Songti SC',serif;font-size:24px;font-weight:400;line-height:1.5;margin:52px 0 18px;padding-top:25px;border-top:1px solid #8c9e9f44}.prose h3{font-size:18px}.prose p{margin:16px 0}.prose blockquote{border-left:2px solid #9d8570;padding:0 0 0 20px;margin:25px 0;color:#576564}.prose pre{padding:18px 20px;background:#e5ebe9;border-left:1px solid #a9bdb8;overflow:auto;font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-word}.prose code{font-family:Consolas,monospace;background:#e5ebe9;padding:2px 4px;font-size:.85em}.prose pre code{padding:0;font-size:inherit}.prose li{padding-left:4px;margin:7px 0}.prose ul,.prose ol{padding-left:24px}.prose a{text-decoration:underline}.prose table{display:block;max-width:100%;overflow:auto;border-collapse:collapse}.prose td,.prose th{padding:10px;border:1px solid #abbab8}.prose img{max-width:100%}.load-error{text-align:center;padding:70px 10px}.load-error button{text-decoration:underline;min-height:44px}
@keyframes breathe{from{transform:scale(1) translateY(0)}to{transform:scale(1.045) translateY(-.5%)}}@keyframes dissolve{0%{opacity:.25;filter:blur(4px);transform:translateY(5px)}100%{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes assemble{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.7)}25%{opacity:.8;transform:translate(var(--x),var(--y)) rotate(var(--r)) rotateY(45deg) scale(.85)}85%,100%{opacity:1;transform:translate(0,0) rotate(0) rotateY(0) scale(1)}}@keyframes qr-reveal{0%,85%{opacity:0}100%{opacity:1}}
@media(min-width:700px){.island{width:490px;gap:23px;padding-top:32px;padding-bottom:25px}.masthead{padding-top:8px}h1{font-size:87px}.title-star{top:88px}.song-content{padding:24px 26px}.artwork-wrap{margin-right:35px}.qr-thumbnail{right:-35px;width:88px;height:88px}.song-title{font-size:36px}.quote p{font-size:13px}.masthead>p{font-size:12px}footer{font-size:12px}}
@media(max-height:780px){.island{gap:15px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}.masthead{padding-top:10px}h1{font-size:66px;margin-bottom:14px}.title-star{top:65px;font-size:25px}h1>span:nth-child(2){padding-left:58px}.song-content{padding:16px 18px}.song-stage,.song-content{min-height:320px}.song-meta{margin-bottom:12px}.artwork-wrap{max-width:262px;margin-left:auto;margin-right:auto}.qr-thumbnail{right:-16px;width:72px;height:72px}.quote{margin-top:21px}.song-title{font-size:30px}.song-nav{height:49px}.song-nav button{height:49px}}
@media(max-width:360px){.island{padding-left:22px;padding-right:22px;gap:14px}h1{font-size:63px}.title-star{top:60px;right:0}.masthead>p{font-size:10px}.song-content{padding:16px}.quote p{font-size:11px}.qr-thumbnail{width:68px;height:68px;right:-12px}.quote{grid-template-columns:15px 1fr 12px;gap:0}footer{font-size:10px}.tools-link{font-size:14px}.song-nav button{transform:translateX(calc(var(--offset)*79px)) scale(.72)}}
@media(max-height:680px){.island{gap:11px}h1{font-size:58px;line-height:.79;margin-top:13px;margin-bottom:13px}.title-star{top:54px;font-size:23px}.song-stage,.song-content{min-height:290px}.song-content{padding:13px 17px}.song-topline{margin-bottom:6px}.song-index{font-size:22px}.song-title{font-size:27px}.song-artist{margin-bottom:7px;font-size:12px}.song-meta{font-size:9px;margin-bottom:10px}.artwork-wrap{max-width:212px}.quote{margin-top:18px;min-height:27px}.quote p{font-size:11px}.song-nav{height:44px}.song-nav button{height:44px}.song-nav button[aria-current=true]{font-size:36px}.is-progress .artwork-wrap{max-width:230px;margin:auto}.progress-space{height:14px}}
@media(max-height:600px){.island{gap:7px;padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}.masthead{padding-top:0}h1{font-size:50px;margin-bottom:10px}.title-star{top:46px;font-size:20px}.artwork-wrap{max-width:170px}.is-progress .artwork-wrap{max-width:190px}.song-content{padding-top:11px;padding-bottom:11px}.quote{margin-top:18px}.song-stage,.song-content{min-height:270px}.tools-link{top:-8px}.song-nav,.song-nav button{height:40px}}
.masthead>#subtitle{
  font-family:Georgia,CarvedSong,'Songti SC',serif;
  font-size:13px;
  font-style:italic;
  font-synthesis:style;
  line-height:1.6;
}
.song-stage{width:min(calc(100% - 24px),350px);align-self:center;min-height:0}
.song-content{padding:18px 18px 17px;min-height:0}
.song-artist,.song-meta{font-family:CarvedSong,'Songti SC',serif}
.song-meta{font-size:13px;line-height:1.5;margin-bottom:14px;opacity:.85}
.artwork-wrap{width:calc(100% - 20px);max-width:244px;margin:0 auto}
.qr-thumbnail{width:74px;height:74px;right:-16px;bottom:-15px}
.quote{grid-template-columns:17px minmax(0,1fr) 17px;gap:3px;margin-top:24px;min-height:30px}
.quote p{font-size:16px;line-height:1.7}
.quote-mark{font-size:36px}
.song-content.is-progress{padding-bottom:17px}
.progress-label{font-family:NewYork,Georgia,serif;font-size:25px;line-height:1.2;margin:0 0 21px}
.is-progress .artwork-wrap{width:calc(100% - 20px);max-width:244px;margin:0 auto}
.progress-space{height:28px}
.song-nav{--number-step:76px}
.song-nav button{transform:translateX(calc(var(--offset)*var(--number-step))) scale(.72)}
.song-nav button[aria-current=true]{transform:translateX(0) scale(1)}
.song-nav .song-arrow{
  top:5px;left:auto;width:44px;height:44px;
  display:grid;place-items:center;opacity:.75;transform:none;
  transition:opacity .3s,color .3s;
}
.song-nav .song-arrow svg{width:29px;height:29px;stroke-width:1}
.song-nav .previous{left:0}
.song-nav .next{right:0}
.song-nav .song-arrow:hover{opacity:1;color:var(--accent)}
.song-nav .song-arrow:disabled{visibility:hidden;pointer-events:none}
@media(min-width:700px){.masthead>#subtitle{font-size:14px}}
@media(min-height:781px) and (max-height:840px){
  .island{gap:15px;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .song-stage{width:100%}
  .song-content{padding-left:15px;padding-right:15px}
  .quote{grid-template-columns:14px minmax(0,1fr) 14px;gap:1px}
  .quote p{font-size:14px}
  .masthead>#subtitle{font-size:12px}
  .song-nav{--number-step:64px}
}
@media(max-height:680px){
  .song-content{padding-top:12px;padding-bottom:12px}
  .song-meta{font-size:12px;margin-bottom:10px}
  .artwork-wrap,.is-progress .artwork-wrap{max-width:200px}
  .quote{margin-top:22px}
  .quote p{font-size:14px}
  .progress-label{font-size:23px;margin-bottom:18px}
  .song-nav .song-arrow{top:0}
}
@media(max-height:600px){
  .artwork-wrap,.is-progress .artwork-wrap{max-width:155px}
  .song-content{padding-top:10px;padding-bottom:10px}
  .song-artist{margin-bottom:5px}
  .quote{margin-top:20px}
  .quote p{font-size:13px}
  .progress-space{height:18px}
  .masthead>#subtitle{font-size:11px;line-height:1.4}
  .song-nav,.song-nav button{height:44px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#qr-large.assembling{opacity:1}#qr-shards{display:none}}