:root{--ink:#111613;--panel:#19201b;--paper:#f0eadb;--gold:#d4b584;--muted:#b0bbb4;--rule:#687162;--dusk:#93a5ab;--clay:#a47650;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--paper);background:var(--ink);color-scheme:dark}
*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden}button,input{font:inherit}button{border:0;color:inherit;cursor:pointer;background:none}button:disabled{opacity:.3;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button:hover:not(:disabled){color:#fff}button.gold{background:var(--gold);color:var(--ink);padding:12px 22px;border-radius:2px;letter-spacing:.05em;transition:background .2s}button.gold:hover{background:#ead0a5;color:var(--ink)}button.arrow{font-size:26px;width:44px;height:44px;border:1px solid #7c897d66;border-radius:50%}[hidden]{display:none!important}#app{height:100%;position:relative;isolation:isolate}#cinema{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}#film{position:relative;overflow:hidden;background:var(--ink);container-type:inline-size;transition:filter .35s,transform .35s}#video,#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#video{opacity:0;transition:opacity .18s}#video.ready{opacity:1}.shade{position:absolute;inset:0;background:linear-gradient(180deg,#07130c44,transparent 38%,transparent 65%,#09150e55);pointer-events:none}#topbar{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:23px 32px 50px;background:linear-gradient(#101612c9,transparent);pointer-events:none}.brand{font-family:"Songti SC","SimSun",serif;font-size:22px;letter-spacing:.14em}.brand span{font-family:"PingFang SC",sans-serif;color:var(--muted);font-size:12px;letter-spacing:.1em;margin-left:18px}.top-tools{display:flex;align-items:center;gap:22px;font-size:13px;pointer-events:auto}.top-tools button{padding:8px 0}.top-tools span{color:var(--muted);font-size:11px;letter-spacing:.08em}#opening{position:absolute;left:13%;top:21%;text-shadow:0 2px 28px #081008;transition:opacity .8s,transform .8s}#opening h1{font:400 clamp(48px,8cqw,125px)/1.18 "Kaiti SC","STKaiti","KaiTi","Songti SC",serif;letter-spacing:.2em;margin:12px 0 16px}#opening .eyebrow{font-size:clamp(10px,1cqw,16px);letter-spacing:.38em;color:#e4d6b6}#opening .opening-line{font-family:"Songti SC",serif;font-size:clamp(13px,1.5cqw,24px);letter-spacing:.13em;margin-bottom:25px}#opening button{font-size:clamp(11px,1.15cqw,17px)}#opening small{display:block;color:#ced1c4;font-size:clamp(8px,.8cqw,12px);margin-top:16px}#opening.leaving{opacity:0;transform:translateY(-12px);pointer-events:none}#poem{position:absolute;text-align:center;transform:translateX(-50%);width:47%;pointer-events:none;text-shadow:0 2px 10px #162218,0 0 25px #122117e6;transition:opacity .2s}#currentLine{font:400 clamp(19px,4cqw,57px)/1.5 "Kaiti SC","STKaiti","KaiTi","Songti SC",serif;letter-spacing:.18em;margin:4px 0;white-space:nowrap;color:#fff9e7}#previousLine{font:400 clamp(10px,1.5cqw,21px)/1.4 "Songti SC",serif;letter-spacing:.14em;color:#e8dfc688;min-height:1.4em;display:block}.appear{animation:ink-in .8s ease both}@keyframes ink-in{from{opacity:0;filter:blur(9px);transform:translateY(9px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}#hotspot{position:absolute;border:1px solid #ead2a071;border-radius:48%;background:radial-gradient(ellipse,#ddc9970a,transparent 66%);animation:hot-in .7s ease both}#hotspot:hover{background:#eed3a513;border-color:#e5c48b}.hot-ring{position:absolute;inset:8%;border:1px solid #e9d09940;border-radius:50%;pointer-events:none}#hotLabel{position:absolute;top:-38px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(11px,1.4cqw,18px);letter-spacing:.12em;padding:9px 17px;background:#172119e3;border:1px solid #c7b38988;box-shadow:0 6px 25px #080b0866}#hotLabel:after{content:"";position:absolute;top:100%;left:50%;height:20px;border-left:1px solid var(--gold)}@keyframes hot-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}#reflection,#ending{position:absolute;left:50%;top:43%;transform:translateX(-50%);width:65%;text-align:center;padding:22px 28px;background:#122017db;backdrop-filter:blur(6px);border-top:1px solid #d4b58470;border-bottom:1px solid #d4b58470}#reflection>span{font-size:clamp(10px,1.2cqw,16px);letter-spacing:.2em;color:#d0d6c9}#reflection button{display:block;margin:16px auto;font:400 clamp(20px,3cqw,42px) "Songti SC",serif;letter-spacing:.13em}#reflection i{font-style:normal;font-family:serif;color:var(--gold);margin:0 16px}#reflection small{font-size:clamp(9px,1cqw,13px);color:var(--muted)}#ending p{font:400 clamp(22px,4cqw,52px) "Kaiti SC","KaiTi",serif;letter-spacing:.22em;margin:8px 0 20px}#ending button{font-size:clamp(11px,1.2cqw,16px)}#controls{position:absolute;bottom:0;left:0;right:0;padding:38px 30px 18px;background:linear-gradient(transparent,#101813eb 28%,#101813);z-index:2}.timeline{display:flex;align-items:center;gap:18px;font-size:11px;color:var(--muted);margin-bottom:14px}.timeline span:first-child{min-width:85px}.timeline #time{min-width:78px;font-variant-numeric:tabular-nums}.timeline button{font-size:11px;color:#c3c9c1}#seek{flex:1;min-width:25px;height:3px;accent-color:var(--gold);cursor:pointer}#acts{display:flex;justify-content:center;gap:clamp(12px,3vw,48px);flex:1}#acts button{font-size:14px;letter-spacing:.1em;color:#bdc5ba;padding:9px 4px;position:relative}#acts .number{font-size:10px;color:#adb59c;margin-right:9px}#acts button[aria-current=true]{color:#f7e1b4}#acts button[aria-current=true]:after{content:"";position:absolute;left:4px;right:4px;bottom:0;border-bottom:2px solid var(--gold)}.control-row{display:flex;align-items:center;gap:18px}.control-row #play{min-width:148px;font-size:14px}#status{position:absolute;left:50%;bottom:143px;transform:translateX(-50%);font-size:12px;color:#e8ddc5;background:#15251cdf;border-radius:3px;max-width:80%;padding:7px 13px;pointer-events:none}#status:empty{display:none}#retry{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);padding:14px 24px;background:var(--panel);border:1px solid var(--gold)}
body.modal #film{filter:blur(12px) brightness(.48);transform:scale(1.025)}dialog{width:min(1140px,calc(100vw - 64px));max-height:calc(100dvh - 44px);height:min(690px,calc(100dvh - 44px));padding:22px 40px 24px;border:1px solid #a3ad9166;background:linear-gradient(130deg,#172019f7,#101611fb);color:var(--paper);overflow:hidden;box-shadow:0 25px 100px #0008}dialog[open]{display:flex;flex-direction:column;animation:dialog-in .3s ease both}dialog::backdrop{background:#09110c66}.dialog-bar{display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.dialog-bar p{font-size:11px;letter-spacing:.25em;color:var(--gold);margin:0}.dialog-bar button{font-size:12px;color:var(--muted);padding:9px 0}dialog h2{font:400 clamp(23px,3vw,36px)/1.25 "Songti SC",serif;letter-spacing:.12em;margin:12px 0 20px;flex-shrink:0}#dialogContent{flex:1;min-height:0;position:relative}.dialog-footer{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #84917740;padding-top:16px;margin-top:20px;font-size:13px}.dialog-footer>button:first-child{color:var(--muted)}@keyframes dialog-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.object-layout{display:grid;grid-template-columns:46% 1fr;gap:6%;height:100%;align-items:center}.object-visual{height:100%;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}.robe-image{height:100%;max-width:100%;object-fit:contain;mix-blend-mode:lighten;animation:object-in .55s ease both}.weapon-image{width:100%;height:85%;object-fit:cover;object-position:48% 80%;border:1px solid #c4b68a30}.object-visual small{position:absolute;bottom:0;left:0;color:var(--muted);font-size:10px;background:#19201be0;padding:5px}.object-copy .verse{font:400 clamp(23px,2.8vw,39px)/1.6 "Kaiti SC","KaiTi","Songti SC",serif;letter-spacing:.12em;margin:18px 0}.object-copy p{font-size:17px;line-height:1.8;color:#d6ddcf;margin:12px 0}.object-copy .meaning{color:#eee2c7}.word-tabs{display:flex;gap:24px}.word-tabs button{border-bottom:1px solid #687162;padding:7px 10px;font:400 24px "Songti SC",serif;color:var(--muted)}.word-tabs button[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}.question-toggle{font-size:13px;color:var(--gold);border-bottom:1px solid #b89c6966;padding:9px 0;margin-top:15px}.answer{font-size:15px!important;color:#f0dfb6!important;border-left:2px solid var(--gold);padding-left:16px}.terms{display:flex;gap:16px;margin:18px 0}.terms span{border:1px solid #6c7865;padding:7px 13px;font-size:13px}@keyframes object-in{from{opacity:0;transform:translateY(16px) scale(.88)}to{opacity:1;transform:none}}.compare-tools{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}.compare-tools button{border:1px solid #6b775b70;padding:7px 14px;border-radius:2px;font-size:13px;color:var(--muted)}.compare-tools button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#d4b5840c}.poem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.poem-col{padding-left:24px;border-left:1px solid #7e8d654d}.poem-col h3{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.25em;margin:0 0 16px}.poem-col p{font:400 clamp(19px,2.2vw,30px)/1.8 "Kaiti SC","KaiTi","Songti SC",serif;margin:0;white-space:nowrap}.poem-grid em{font-style:normal;transition:color .2s,background .2s}.poem-grid[data-mark]:not([data-mark=plain]) em{color:#a1ac99}.poem-grid[data-mark=clothes] em[data-kind=clothes],.poem-grid[data-mark=weapons] em[data-kind=weapons],.poem-grid[data-mark=action] em[data-kind=action],.poem-grid[data-mark=repeat] em[data-kind=repeat]{color:#ffe0a6;background:#d4b58418}.compare-note{color:#d5dec8;font-size:15px;line-height:1.7;margin:20px 0 0}.compare-note strong{font-weight:400;color:var(--gold)}.progression-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:25px 0}.progression-grid button{text-align:left;padding:26px 22px;border-top:1px solid #82916c;border-bottom:1px solid #82916c;background:#a6b59008}.progression-grid button[aria-pressed=true]{border-color:var(--gold);background:#d4b58410}.progression-grid b{font:400 36px "Songti SC",serif;display:block;color:var(--gold);margin-bottom:13px}.progression-grid span{font-size:14px;color:var(--muted)}#progressMeaning{font:400 25px/1.8 "Songti SC",serif;color:#eee1c5;padding-top:16px}.settings{max-width:720px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #8a947a30;padding:18px 0}.setting-row strong{display:block;font-size:17px;font-weight:400}.setting-row p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:0}.setting-row button{border:1px solid var(--gold);color:var(--gold);padding:9px 16px;white-space:nowrap}.voice-note{font-size:14px;line-height:1.9;color:var(--muted);margin-top:24px}
@media(max-width:760px){#topbar{padding:14px 16px 35px}.brand{font-size:18px}.brand span{display:none}.top-tools{gap:15px;font-size:12px}.top-tools span{display:none}#controls{padding:32px 16px 15px}.control-row{gap:12px;flex-wrap:wrap;justify-content:space-between}#acts{order:-1;flex:0 0 100%;gap:0;justify-content:space-around}#acts button{font-size:13px}.timeline{gap:8px;margin-bottom:9px}.timeline span:first-child{min-width:0;font-size:10px}.timeline #time{min-width:65px;font-size:10px}#acts .number{display:none}.control-row #play{flex:1;max-width:230px}.control-row .arrow{width:36px;height:36px;font-size:21px}#status{bottom:180px;font-size:11px}dialog{width:calc(100vw - 24px);height:calc(100dvh - 28px);max-height:none;padding:16px 22px}dialog h2{font-size:25px;margin:10px 0 16px}.object-layout{grid-template-columns:42% 1fr;gap:6%}.object-copy p{font-size:14px}.object-copy .verse{font-size:24px}.word-tabs{gap:10px}.word-tabs button{font-size:22px}.compare-tools{gap:6px;margin-bottom:15px}.compare-tools button{padding:7px 9px;font-size:12px}.poem-grid{gap:10px}.poem-col{padding-left:10px}.poem-col p{font-size:20px}.compare-note{font-size:13px;margin-top:16px}.progression-grid{gap:8px}.progression-grid button{padding:20px 14px}.progression-grid b{font-size:28px}.progression-grid span{font-size:12px}#progressMeaning{font-size:21px}}
@media(max-width:480px) and (orientation:portrait){#opening{top:12%;left:12%}#opening h1{margin:6px 0}#opening .opening-line{margin:8px 0 10px}#opening button{padding:7px 12px}#opening small{margin-top:8px}#hotLabel{top:-28px;padding:6px 10px}#reflection,#ending{padding:12px;width:80%;top:27%}#reflection button{margin:10px auto;font-size:18px}#reflection i{margin:0 6px}#ending p{margin:0 0 9px}#ending button{padding:9px 12px}.object-layout{grid-template-columns:34% 1fr;gap:5%}.object-copy p{font-size:13px;line-height:1.65}.object-copy .verse{font-size:21px;margin:12px 0}.word-tabs{gap:4px}.word-tabs button{font-size:20px;padding:5px}.question-toggle{font-size:12px;margin-top:5px}.answer{font-size:12px!important;padding-left:9px}.terms{gap:5px;flex-wrap:wrap}.terms span{font-size:11px;padding:5px}.object-visual small{font-size:9px}.poem-grid{gap:6px}.poem-col{padding-left:4px}.poem-col p{font-size:15px;line-height:2}.poem-col h3{font-size:10px;margin-bottom:10px}.compare-note{font-size:12px}.dialog-footer{font-size:12px;padding-top:13px;margin-top:13px}.dialog-footer .gold{padding:11px 13px}.progression-grid{grid-template-columns:1fr;gap:10px;margin:8px 0}.progression-grid button{padding:12px;display:flex;align-items:center;justify-content:space-between}.progression-grid b{font-size:24px;margin:0}.progression-grid span{font-size:12px}#progressMeaning{font-size:17px;padding-top:8px}.setting-row{padding:14px 0}.setting-row strong{font-size:15px}.setting-row p{font-size:12px}.voice-note{font-size:12px;margin-top:16px}}
@media(max-height:560px) and (orientation:landscape){#topbar{padding:10px 18px 25px}.brand{font-size:18px}.top-tools{font-size:12px}#controls{padding:20px 18px 10px}.timeline{margin-bottom:7px}.control-row #play{padding:8px 16px}.control-row .arrow{width:34px;height:34px}#acts{order:initial;flex:1}#acts button{font-size:12px}.control-row{flex-wrap:nowrap}dialog{height:calc(100dvh - 20px);padding:10px 24px}dialog h2{font-size:22px;margin:5px 0 10px}.dialog-footer{margin-top:10px;padding-top:9px}.dialog-footer .gold{padding:8px 16px}.object-copy .verse{margin:6px 0;font-size:23px}.object-copy p{font-size:13px;line-height:1.5}.word-tabs button{font-size:20px}.question-toggle{margin-top:3px;padding:5px 0}.compare-tools{margin-bottom:6px}.poem-col h3{margin:0}.poem-col p{font-size:19px;line-height:1.55}.compare-note{margin-top:7px;font-size:12px}.progression-grid{margin:8px 0}.progression-grid button{padding:16px}.progression-grid b{font-size:28px}#progressMeaning{font-size:19px;padding:0}.settings .setting-row{padding:7px 0}.voice-note{margin:10px 0;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}body.modal #film{transform:none}}

/* Voice-aligned word emphasis: the line appears at its first spoken word. */
#currentLine span{opacity:.48;transition:opacity .08s ease,color .08s ease}#currentLine span.spoken{opacity:1;color:#ffebc6}#currentLine.appear{animation-duration:.18s}