:root{--ink:#294d46;--muted:#667970;--paper:rgba(249,246,230,.91);--line:rgba(56,82,65,.17);--accent:#9b603f;--serif:'Songti SC','STSong','Noto Serif CJK SC',serif}*{box-sizing:border-box}body{margin:0;background:#e8e4d2;color:var(--ink);font-family:'PingFang SC','Microsoft YaHei',sans-serif;overflow:hidden;transition:color 1.5s}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #b57944;outline-offset:4px}button:disabled{opacity:.3;cursor:default}[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.vignette{pointer-events:none;position:fixed;inset:0;background:linear-gradient(180deg,rgba(246,239,216,.4),transparent 25%,transparent 57%,rgba(37,63,57,.2))}header{position:fixed;top:32px;left:42px;pointer-events:none}.brand{display:flex;align-items:center;gap:13px;font-size:11px;letter-spacing:.15em}.brand i{font-style:normal;opacity:.4;margin:0 9px}.seal{display:inline-grid;place-items:center;width:29px;height:33px;background:#a15f44;color:#fff0d8;border-radius:3px;font-family:var(--serif);font-size:22px}.title-row{display:flex;align-items:baseline;gap:22px;margin-top:23px}h1{font:48px var(--serif);letter-spacing:.16em;margin:0}.title-row>span{font:13px var(--serif);letter-spacing:.18em}.subtitle{font-size:10px;letter-spacing:.18em;margin:13px 0}.subtitle span{margin:0 11px;opacity:.45}.brand-mark{position:fixed;left:24px;top:24px;display:flex;align-items:center;gap:14px;pointer-events:auto;font-size:10px;letter-spacing:.22em;color:var(--ink);z-index:25}.brand-mark .seal{width:24px;height:28px;font-size:17px}.poem-title{position:fixed;left:50%;top:88px;transform:translateX(-50%);display:flex;align-items:baseline;gap:24px;margin:0;pointer-events:none;z-index:5}.poem-title .t{font:64px/1 var(--serif);letter-spacing:.22em;color:var(--ink);text-shadow:0 2px 18px #f5ecd6cc}.poem-title .a{font:14px var(--serif);letter-spacing:.22em;color:var(--muted)}.poem-sub{position:fixed;left:50%;top:170px;transform:translateX(-50%);font-size:11px;letter-spacing:.22em;color:var(--muted);margin:0;pointer-events:none;z-index:5}.poem-sub span{margin:0 10px;opacity:.45}.top-tools{position:fixed;right:36px;top:34px;display:flex;gap:13px;align-items:center;z-index:25}.grade{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:25px;padding:4px;color:#36594d}.grade button{font-size:11px;padding:9px 17px;border-radius:20px}.grade button[aria-pressed=true]{background:#3d6257;color:#fff4db}.round{width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font-size:19px;color:#36594d}.back-top{font-size:20px;line-height:1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:400}.back-top:hover{background:#fff8e8}.back-link{font:11px var(--serif);letter-spacing:.18em;color:var(--muted);text-decoration:none;padding:4px 6px;pointer-events:auto;transition:color .2s,transform .2s}.back-link:hover{color:var(--ink);transform:translateX(-2px)}.about-link{font:11px var(--serif);letter-spacing:0;color:var(--muted);background:none;border:0;padding:4px 8px;cursor:pointer;pointer-events:auto;opacity:.6;transition:opacity .2s,color .2s}.about-link:hover{opacity:1;color:var(--ink)}.full-poem-link{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(249,246,230,.7);border:1px solid var(--line);color:#5a7a6a;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s,color .2s}.full-poem-link:hover{background:#fff8e8;color:#3d6257;transform:scale(1.05)}#full-poem{border:1px solid #fff8;border-radius:10px;width:min(620px,calc(100% - 40px));padding:42px 40px;background:#f5f2e6;color:#294d46;text-align:center}#full-poem .close{position:absolute;top:18px;right:18px}#full-poem .overline{font-size:10px;letter-spacing:.3em;opacity:.6}#full-poem h2{font:36px/1.2 var(--serif);letter-spacing:.22em;margin:14px 0 8px}#full-poem .fp-author{font-size:13px;letter-spacing:.22em;color:var(--muted);margin:0 0 30px}#full-poem .fp-verse{font:24px/1.8 var(--serif);letter-spacing:.2em;margin:8px 0;text-align:center}#full-poem .fp-verse ruby{padding:0 4px}#full-poem .fp-verse rt{font-size:11px;color:var(--muted);padding-bottom:4px}#full-poem .fp-foot{margin-top:24px;font-size:11px;color:var(--muted);opacity:.6}#full-poem::backdrop{background:#142f3c55;backdrop-filter:blur(4px)}.route{position:fixed;top:215px;left:45px;z-index:6}.overline{font-size:9px;letter-spacing:.25em;opacity:.64}nav{display:flex;flex-direction:column;gap:18px;margin-top:18px;position:relative}nav:before{content:'';position:absolute;top:11px;bottom:11px;left:4px;width:1px;background:currentColor;opacity:.2}nav button{display:flex;gap:14px;align-items:center;padding:4px 0;opacity:.46;text-align:left;font:13px var(--serif);letter-spacing:.1em}nav button span{font-size:13px}nav button:before{content:'';width:7px;height:7px;border:1px solid currentColor;border-radius:50%;background:#e7e6d2}nav button[aria-current=true]{opacity:1}nav button[aria-current=true]:before{background:#a56c43;border-color:#a56c43;box-shadow:0 0 0 5px #b2874930}.scene-caption{position:fixed;right:48px;bottom:262px;text-align:right;text-shadow:0 1px 12px #e7e7d980;pointer-events:none}.scene-caption>span{font-size:10px;letter-spacing:.2em;opacity:.75}.scene-caption h2{font:27px var(--serif);letter-spacing:.15em;margin:12px 0}.scene-caption p{font-size:11px;letter-spacing:.04em}.view-tools{position:fixed;right:38px;top:48%;display:grid;gap:12px;z-index:6}.view-tools button{width:37px;height:37px;border:1px solid #ffffff50;background:var(--paper);color:#36594d;border-radius:50%;font-size:23px}.reader{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);width:min(890px,calc(100% - 84px));background:var(--paper);border:1px solid #fff9;border-radius:9px;box-shadow:0 12px 45px #233d3420;backdrop-filter:blur(18px);color:#294d46}.reader-top{display:flex;justify-content:space-between;align-items:center;padding:13px 23px 0;font-size:10px;letter-spacing:.1em}.reader-top i{font-style:normal;margin:0 10px;opacity:.4}.reading-tools{display:flex;gap:5px}.reading-tools button{font-size:10px;padding:5px 9px;border-radius:4px;color:#7d8772;letter-spacing:.05em}.reading-tools button[aria-pressed=true]{background:#dfe6d7;color:#325647}.verse-area{min-height:95px;padding:9px 24px 12px;text-align:center}.verse{font:30px/1.8 var(--serif);letter-spacing:.2em;min-height:49px}.verse ruby{ruby-align:center}.verse rt{font:10px 'PingFang SC',sans-serif;letter-spacing:.03em;color:#7b8a78;padding-bottom:5px}.no-pinyin rt{display:none}#meaning{font-size:11px;line-height:1.65;color:#71806e;margin:5px 0 0;letter-spacing:.04em}.reader-bottom{display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);padding:12px 22px}.transport{display:flex;align-items:center;gap:9px}.transport>.round{width:29px;height:29px;background:none;font-size:23px}.play{height:36px;min-width:116px;border-radius:22px;background:#3e6155;color:#fff4dd;font-size:12px;letter-spacing:.08em}.play span{margin-left:7px}.timeline{flex:1;min-width:40px}.timeline input{appearance:none;width:100%;height:3px;background:#cad3bf;display:block;cursor:pointer;accent-color:#5b7560}.timeline input::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:#748b6b}.timeline div{display:flex;justify-content:space-between;font:8px Georgia,serif;color:#86917e;margin-top:8px;letter-spacing:.04em}.timeline div span:nth-child(2){font-family:'PingFang SC',sans-serif;font-size:8px;letter-spacing:.1em}.speech{font-size:18px;white-space:nowrap}.speech span{font-size:10px;margin-left:5px}footer{position:fixed;left:43px;right:38px;bottom:20px;display:flex;gap:25px;font-size:9px;letter-spacing:.08em;opacity:.7}footer span:last-child{margin-left:auto;font:11px Georgia,serif}#reveal{padding:13px 5px;font:18px var(--serif);letter-spacing:.1em;border-bottom:1px dashed #a7ae97}#toast{position:fixed;left:50%;top:105px;transform:translateX(-50%);background:#294a40ed;color:#fff2d8;padding:12px 20px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:20;max-width:90%;text-align:center}#toast.show{opacity:1}#loading{position:fixed;inset:0;z-index:40;background:#eeeddf;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .7s}#loading h2{font:25px var(--serif);letter-spacing:.16em;margin-top:25px}#loading p{font-size:12px;color:#7c8874}dialog{border:1px solid #fff8;border-radius:10px;width:min(520px,calc(100% - 32px));padding:35px;background:#f5f2e6;color:#365548;box-shadow:0 20px 100px #122c4250;max-height:85dvh}dialog::backdrop{background:#142f3c66;backdrop-filter:blur(5px)}dialog .close{position:absolute;top:17px;right:17px}dialog h2{font:26px/1.6 var(--serif);letter-spacing:.06em}dialog blockquote{margin:0;font:16px/2 var(--serif);padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}dialog p,dialog dd{font-size:12px;line-height:1.9}dialog dt{font:14px var(--serif);margin-top:14px}dialog dd{margin:4px 0;color:#6b7c6d}dialog .fine{font-size:10px;color:#7e8b7b;border-top:1px solid var(--line);padding-top:14px}.night{--ink:#f1e9cc;--muted:#c6d1d4}.night .vignette{background:linear-gradient(180deg,#06182945,transparent 30%,transparent 55%,#091c3540)}.night .scene-caption{text-shadow:0 2px 12px #001527}.night nav button:before{background:#304b62}.night nav button[aria-current=true]:before{background:#d5bd82;border-color:#d5bd82}.night footer{color:#dce8e7}
@media(min-width:1500px){.reader{bottom:60px}}@media(max-height:760px) and (min-width:761px){.route{top:195px}nav{gap:16px}}
@media(max-width:760px){.brand-mark{left:18px;top:18px;gap:8px;font-size:9px}.brand-mark .seal{width:20px;height:24px;font-size:15px}.poem-title{top:72px;gap:14px}.poem-title .t{font-size:46px;letter-spacing:.18em}.poem-title .a{font-size:11px}.poem-sub{top:140px;font-size:9px}.top-tools{right:18px;top:24px;gap:6px}.grade button{padding:7px 10px;font-size:10px}.top-tools>.round{width:28px;height:28px;font-size:15px}.route{left:23px;top:185px}.route>.overline{display:none}nav{gap:12px;margin-top:12px}nav button span{font-size:11px}.view-tools{right:18px;top:42%}.view-tools button{width:32px;height:32px;font-size:20px}.scene-caption{left:auto;right:18px;bottom:252px;text-align:right;max-width:60%}.scene-caption h2{font-size:22px;margin:6px 0}.scene-caption>span{font-size:8px}.scene-caption p{font-size:10px;line-height:1.6;margin:5px 0}.reader{width:calc(100% - 28px);bottom:39px}.reader-top{padding:11px 12px 0;font-size:9px;letter-spacing:0}.reader-top i{margin:0 5px}.reading-tools{gap:0}.reading-tools button{font-size:9px;padding:5px 6px}.verse-area{padding:11px 8px;min-height:91px}.verse{font-size:27px;letter-spacing:.1em}.verse rt{font-size:9px}#meaning{font-size:10px;padding:0 8px}.reader-bottom{padding:11px 10px;gap:8px}.transport{gap:3px}.play{min-width:92px;font-size:11px}.transport>.round{width:23px}.speech{font-size:20px;padding:5px}.speech span{display:none}.timeline div span:nth-child(2){display:none}footer{bottom:16px;left:20px;right:20px;font-size:8px}footer span:nth-child(2){display:none}.scene-caption p{max-width:260px}dialog{padding:27px}dialog h2{font-size:23px}}@media(max-width:420px){.poem-title{top:62px;gap:10px}.poem-title .t{font-size:38px;letter-spacing:.14em}.poem-title .a{font-size:10px}.poem-sub{top:118px;font-size:8px}.scene-caption{bottom:245px}.reader-top>span{font-size:8px}.verse{font-size:25px}}@media(max-height:650px){.route{display:none}.scene-caption{bottom:235px}.scene-caption p{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}