*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#201d18;color:#30271f;font-family:'Microsoft YaHei',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;color:inherit;border:1px solid #6d5b4150;background:#e9dcc2c9;border-radius:2px;padding:8px 13px}button:hover{background:#f2e8d1}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #a54432;outline-offset:3px}#stage{position:absolute;width:100%;height:100%;inset:0}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 45% 48%,transparent 42%,#33291d33 100%)}.frame{position:absolute;inset:16px;border:1px solid #6b59474a;pointer-events:none}.frame:after{content:'';position:absolute;inset:4px;border:1px solid #6b594722}header{position:absolute;left:38px;right:38px;top:29px;display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:4px;z-index:3}header i{font-size:10px;letter-spacing:2px;font-style:normal;color:#685f52;margin-left:22px}header button{font-size:10px;letter-spacing:1px;background:#eee3cdcc}.dateline{position:absolute;left:48px;top:94px;z-index:2;pointer-events:none}.dateline>span{font:11px monospace;letter-spacing:3px;color:#9d4531}.dateline h1{font:76px/.95 Georgia;margin:14px 0;letter-spacing:-3px}.dateline #place{font-size:13px;letter-spacing:2px}.mapnote{font-size:9px;color:#857766;margin-top:13px}.pin-label{position:absolute;pointer-events:none;background:#f2e8d4ee;border:1px solid #86704c60;padding:5px 9px;font-size:11px;box-shadow:0 2px 7px #0002;transform:translate(-50%,-100%);white-space:nowrap;color:#382f25}.pin-label.highlight{border-bottom:3px solid #a44632}.pin-label:after{content:'';position:absolute;width:1px;height:16px;background:#85704d;bottom:-17px;left:50%}#story{position:absolute;right:4%;top:15%;width:310px;max-height:66%;padding:22px 24px;background:linear-gradient(130deg,#f5ecdcf2,#e6d8bff2);border:1px solid #7d644445;box-shadow:0 15px 50px #45311e20;z-index:2;transition:opacity .6s,transform .6s}.eyebrow{font-size:9px;letter-spacing:3px;color:#92704c;border-bottom:1px solid #8c704c35;padding-bottom:12px}h2{font-family:'SimSun',serif;font-size:27px;line-height:1.45;letter-spacing:1px;margin:16px 0}.person{display:flex;gap:11px;align-items:center;border-bottom:1px solid #8c704c35;padding-bottom:15px}.personmark{display:grid;place-items:center;flex-shrink:0;width:34px;height:40px;font:20px 'SimSun';color:#f3e5c9;background:#8e4735}.person strong{font-size:12px;font-weight:500;line-height:1.7}.person small{display:block;color:#82715e;font-size:9px;margin-top:4px}.metric{display:flex;align-items:center;gap:14px;margin:13px 0}.metric strong{font:43px Georgia;color:#a14531}.metric span{font-size:10px;line-height:1.8;color:#77664f;max-width:110px}.beats{display:flex;justify-content:space-between;border-bottom:1px solid #8c704c35;padding:9px 0}.beats span{font-size:9px;color:#9c917e;padding-bottom:5px}.beats span.active{color:#973c2a;border-bottom:2px solid #a24734}#beatText{font-size:12px;line-height:1.9;min-height:90px;color:#534735}#source{font-size:9px;color:#8b6748;text-decoration:none;border-bottom:1px solid #8b67484d}.caption{position:absolute;left:6%;right:32%;bottom:143px;text-align:center;pointer-events:none;z-index:2}.caption span{color:#a54330;font-size:10px;letter-spacing:4px}.caption p{font-family:'SimSun',serif;font-size:24px;line-height:1.5;margin:10px 0;text-shadow:0 1px 6px #f4e5c8}.controls{position:absolute;bottom:28px;left:42px;right:42px;z-index:4}.row{display:flex;align-items:center;gap:12px}.row button{background:#e4d8c0c9;font-size:12px;padding:6px 11px}.row #clock{font:11px monospace;color:#685942}#chapterLabel{margin-left:auto;font-size:10px;letter-spacing:2px;color:#7a5b39}#seek{appearance:none;display:block;width:100%;height:2px;margin:13px 0;background:linear-gradient(90deg,#a84330 var(--p,0%),#89745140 var(--p,0%));cursor:pointer}#seek::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:#a84330}#seek::-moz-range-thumb{border:0;width:9px;height:9px;border-radius:50%;background:#a84330}#chapters{display:flex;gap:7px}#chapters button{flex:1;background:none;border:0;border-top:1px solid #927e6050;font:11px Georgia;padding:9px 0 0;color:#8b7b62}#chapters button.active{color:#a84330;border-top-color:#a84330}.cover{position:absolute;inset:0;z-index:5;display:grid;align-content:center;justify-items:center;background:#30291be0;color:#f2e4c9;transition:opacity .7s}.cover.hide{opacity:0;pointer-events:none}.cover .edition{font:11px Georgia;letter-spacing:5px;color:#bfa784}.cover h2{font-size:78px;letter-spacing:12px;margin:20px 0}.cover p{font-size:15px;letter-spacing:4px}.cover button{padding:15px 26px;margin-top:20px;background:#b14d35;color:#fff2db;border-color:#dd9e67;letter-spacing:2px}.cover small{font-size:10px;color:#bba486;margin-top:22px;letter-spacing:2px}dialog{max-width:720px;width:90vw;max-height:85vh;border:1px solid #80684b;background:#eee1c9;padding:30px;color:#423426}dialog::backdrop{background:#17130ccc}dialog button{float:right}dialog p,dialog li{font-size:12px;line-height:1.9}dialog a{color:#923f2d}#notice{position:fixed;top:75px;left:50%;transform:translateX(-50%);background:#442d22;color:#ffedcb;padding:10px 20px;z-index:8;font-size:12px;display:none}.map-mode #story{opacity:.1;transform:translateX(20px)}.map-mode .caption{opacity:.25}.playing .row{opacity:.4;transition:.5s}.playing .controls:hover .row{opacity:1}@media(max-width:1000px){#story{right:3%;width:260px;padding:16px;top:17%}h2{font-size:22px}.metric strong{font-size:34px}#beatText{font-size:11px;min-height:85px}.caption{right:35%;bottom:130px}.caption p{font-size:20px}.dateline{left:35px;top:95px}.dateline h1{font-size:59px}header i{display:none}}@media(max-height:650px){header{top:20px;left:27px;right:27px}.dateline{top:67px;left:32px}.dateline h1{font-size:45px;margin:7px 0}.dateline #place{font-size:10px}.mapnote{font-size:8px;margin-top:5px}#story{top:18%;width:245px;padding:13px;max-height:65%}.eyebrow{padding-bottom:6px}h2{font-size:19px;margin:8px 0}.person{padding-bottom:7px}.personmark{height:30px;width:26px;font-size:15px}.metric{margin:4px 0}.metric strong{font-size:27px}.beats{padding:3px 0}#beatText{font-size:10px;line-height:1.7;min-height:51px;margin:5px 0}.caption{bottom:110px;left:5%;right:35%}.caption p{font-size:18px;margin:5px 0}.controls{bottom:22px;left:32px;right:32px}.row button{padding:4px 8px}.cover h2{font-size:58px}.cover p{font-size:12px}}@media(max-width:600px) and (orientation:portrait){header{left:24px;right:24px;font-size:10px;letter-spacing:1px}.dateline{top:90px;left:30px}.dateline h1{font-size:50px}#story{top:43%;left:7%;right:7%;width:auto;padding:15px;max-height:39%}.eyebrow{padding-bottom:5px}h2{font-size:22px;margin:9px 0}.person{padding-bottom:8px}.metric{position:absolute;right:16px;top:66px;display:none}.beats{padding:5px 0}#beatText{min-height:55px;margin:7px 0;font-size:11px}.caption{display:none}.controls{left:26px;right:26px;bottom:25px}#chapterLabel{font-size:8px;letter-spacing:0}#chapters{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}#chapters button{padding-top:5px}.cover h2{font-size:43px;letter-spacing:4px}.cover p{font-size:11px;letter-spacing:1px}.cover .edition{font-size:9px;letter-spacing:2px}.cover small{font-size:9px;letter-spacing:1px}.frame{inset:12px}}
/* Keep the historical narrative readable alongside the moving scene. */
#beatText{font-size:13px;line-height:1.95;min-height:98px}#story{max-height:none}.playing .row{opacity:.8}.caption p{font-size:23px}.pin-label{font-size:11px}
@media(max-width:1000px){#beatText{font-size:12px;min-height:90px}}
@media(max-height:500px) and (orientation:landscape){
header{top:19px;font-size:11px}header button{font-size:9px;padding:5px 9px}
#story{top:65px;bottom:100px;width:250px;padding:12px 14px;overflow:auto}.eyebrow,.metric,.person small,.personmark{display:none}
#story h2{font-size:17px;line-height:1.4;margin:0 0 7px}.person{padding-bottom:5px}.person strong{font-size:10px}.beats{padding:3px 0}.beats span{font-size:8px}
#beatText{font-size:10px;line-height:1.7;min-height:0;margin:7px 0}#source{font-size:8px}.caption{bottom:110px;right:36%;left:5%}.caption p{font-size:14px}.caption span{font-size:8px}.dateline{top:68px;left:29px}.dateline h1{font-size:42px}.mapnote{display:none}
}
@media(max-width:600px) and (orientation:portrait){
.dateline{top:83px;left:26px}.dateline h1{font-size:33px;margin:9px 0}.dateline>span{font-size:9px;letter-spacing:1px}.dateline #place{font-size:9px;letter-spacing:0}.mapnote{display:none}
#story{top:45%;bottom:140px;max-height:none;overflow:auto;padding:16px 18px}#story h2{font-size:21px}#beatText{font-size:12px;line-height:1.9;min-height:55px}.personmark{height:31px;width:27px;font-size:16px}.person small{font-size:8px}.pin-label{font-size:8px;padding:4px 6px}.caption{display:none}
}