@font-face{font-family:Brush;src:url('../../assets/fonts/MaShanZheng-Regular.ttf')}*{box-sizing:border-box}body{margin:0;background:#213d32;color:#294b3d;overflow:hidden;font:20px/1.6 'PingFang SC',sans-serif}button,input,a{font:inherit}button,a{cursor:pointer}button{color:inherit;border:1px solid #aaa17c;background:#eee8d6}button:hover{background:#d8dfc7}button:focus-visible,a:focus-visible,input:focus-visible,#viewport:focus-visible{outline:3px solid #c0974b;outline-offset:4px}button:disabled{opacity:.3;cursor:default}#stage{width:1920px;height:1080px;position:absolute;transform-origin:0 0;background:linear-gradient(#eee8d8e8,#e6e5d1e6),url('../../assets/backgrounds/1-8.png') center/cover;border:12px double #a69b70}header{position:absolute;left:58px;right:58px;top:33px;height:105px;border-bottom:1px solid #aba584;display:flex;gap:44px;align-items:center}.brand{font-size:23px;letter-spacing:3px}.brand small{display:block;font:10px/2 sans-serif;color:#89846a;letter-spacing:3px}h1{font:68px Brush;margin:0;letter-spacing:9px}.heading-note{font:25px Brush;color:#8b7648}.heading-note small{display:block;font:13px 'PingFang SC';color:#7e8972;margin-top:10px}header a{margin-left:auto;color:inherit;font-size:16px;text-decoration:none;border:1px solid #aaa37e;padding:10px 18px}.intro{position:absolute;top:153px;left:58px;right:58px;display:flex;align-items:center;justify-content:space-between}.intro p{font:28px Brush;margin:0}.intro span{font-size:16px;color:#7c876c}#viewport{position:absolute;left:32px;right:32px;top:213px;height:718px;overflow:hidden;cursor:grab;touch-action:pan-y;outline-offset:-5px;user-select:none}#viewport.dragging{cursor:grabbing}#track{position:absolute;width:2810px;height:100%;will-change:transform}.axis{position:absolute;left:20px;right:20px;top:337px;height:22px;border:1px solid #7c724e;border-radius:3px;background:linear-gradient(#c2b17a 0%,#8f835d 12%,#3b5540 26%,#214235 60%,#556345 75%,#af9a63 86%,#82734d);box-shadow:0 7px 9px #203d3433,0 -2px 0 #e4d1a0,inset 0 1px 2px #fff6}.axis:after{content:'';position:absolute;inset:5px 12px;background:repeating-linear-gradient(90deg,transparent 0 37px,#dfcd984a 38px 39px,transparent 40px 50px)}.axis-start,.axis-end{position:absolute;top:28px;color:#8c7950;font:18px Brush}.axis-start{left:0}.axis-end{right:0}.era{position:absolute;width:610px;height:287px;padding:23px 27px;background:linear-gradient(110deg,#f7f1de,#e8e6cd);border:1px solid #aa9c72;box-shadow:0 8px 22px #344d3322,inset 0 0 0 5px #efead8,inset 0 0 0 6px #b9ad873d;transition:box-shadow .25s,filter .25s;isolation:isolate}.era:before,.era:after{content:'';position:absolute;width:19px;height:19px;border-color:#7b875c;pointer-events:none}.era:before{top:9px;left:9px;border-left:2px solid;border-top:2px solid}.era:after{bottom:9px;right:9px;border-right:2px solid;border-bottom:2px solid}.era.upper{top:19px}.era.lower{top:396px}.era.active{box-shadow:0 10px 26px #24452e30,inset 0 0 0 5px #efe8d3,inset 0 0 0 6px #aa8f4b}.era .stem{position:absolute;left:60px;width:2px;background:#9c8854;pointer-events:none}.upper .stem{top:286px;height:42px}.lower .stem{bottom:286px;height:60px}.era .node{position:absolute;left:48px;width:26px;height:26px;border:5px solid #bba36b;border-radius:50%;background:#305441;box-shadow:0 0 0 4px #e8dfc1;pointer-events:none}.upper .node{top:315px}.lower .node{bottom:321px}.era .date{font-size:13px;color:#9b7e48;letter-spacing:2px}.era h2{font:43px Brush;margin:2px 0 4px;letter-spacing:4px;line-height:1.15}.era h3{font-size:17px;font-weight:500;margin:8px 0 5px;color:#61784f}.era p{font-size:18px;line-height:1.65;margin:0;color:#536b50}.era.has-image .copy{width:368px}.era figure{position:absolute;right:23px;top:41px;width:159px;margin:0}.artifact{width:159px;border:1px solid #bdb491;background:#e1e0cb;padding:5px}.artifact img{display:block;width:100%;height:132px;object-fit:cover;mix-blend-mode:multiply;pointer-events:none}.era figcaption{font-size:12px;line-height:1.6;text-align:center;margin-top:6px;color:#788065}.era .more{border:0;border-bottom:1px solid #a9915c;background:transparent;padding:2px 0;font-size:13px;margin-top:8px;color:#907340}.tags{display:flex;gap:10px;margin-top:10px}.tags span{font-size:12px;padding:2px 9px;border:1px solid #c3bb97;color:#7f805b}.edge{position:absolute;top:0;bottom:0;width:35px;pointer-events:none}.edge.left{left:0;background:linear-gradient(90deg,#eae6d5,transparent)}.edge.right{right:0;background:linear-gradient(-90deg,#e8e4d3,transparent)}.navigation{position:absolute;left:58px;right:58px;bottom:76px;display:flex;align-items:center;gap:22px}.navigation>button{width:52px;height:45px;font-size:24px}#period-nav{display:flex;gap:10px}#period-nav button{font-size:16px;padding:9px 23px;background:#e6e4ce}#period-nav button.active{background:#335744;color:#eee1b9;border-color:#335744}.progress{display:flex;align-items:center;gap:17px;flex:1;margin-left:25px}.progress input{width:100%;accent-color:#54704c}.progress span{white-space:nowrap;font:13px sans-serif;color:#8a805d}footer{position:absolute;left:58px;right:58px;bottom:20px;display:flex;justify-content:space-between;border-top:1px solid #b5ad88;padding-top:10px;font-size:14px;color:#667e60}footer small{font-size:12px;color:#8b8c71}dialog{border:2px solid #a18d59;background:#ece7d3;color:#294b3d;box-shadow:0 20px 100px #102f2466;width:min(1150px,92vw);max-height:88vh;padding:45px;overflow:auto}dialog::backdrop{background:#183a30cb;backdrop-filter:blur(5px)}dialog .close{position:absolute;right:18px;top:13px;width:40px;height:40px;font-size:28px}.detail-date{color:#9d8049;font-size:16px;letter-spacing:3px}dialog h2{font:55px Brush;margin:7px 0 20px}dialog h3{font:26px Brush;color:#7c794e}dialog p{font-size:19px;line-height:1.9}.detail-layout{display:flex;gap:35px}.detail-layout>div{flex:1}.detail-gallery{width:290px;flex:none!important}.detail-gallery img{width:100%;display:block}.detail-gallery button{width:100%;padding:10px}.detail-gallery p{font-size:14px}.image-tools{display:flex;gap:10px;align-items:center}.image-tools span{margin-right:auto;font-size:18px}.image-tools button{padding:5px 13px;font-size:16px}#lightbox{width:min(1350px,95vw);padding:24px}#image-area{height:60vh;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab;background:#d5d8c9;margin-top:20px}#large-image{max-width:80%;max-height:90%;object-fit:contain;user-select:none;pointer-events:none;transform-origin:center}#image-caption{font-size:15px;margin-bottom:0;text-align:center}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* 州县变迁：铜金长卷内嵌朱文印记，强调场、县、州的制度变化。 */
.era:not(.has-image) .copy{padding-right:46px}.era .seal{position:absolute;right:24px;top:24px;width:47px;height:54px;display:grid;place-items:center;font:34px Brush;color:#9b5742;border:3px double #aa7354;transform:rotate(-4deg);opacity:.8}.era .date{color:#976b46}.era .tags span:first-child{border-color:#bba575;background:#e8dec055;color:#7e6540}.axis{background:linear-gradient(#cbb886,#8f7951 15%,#38533e 30%,#214335 60%,#68704a 75%,#b69c65 89%,#8c754a)}.detail-gallery{display:grid;gap:15px;align-content:start}.detail-gallery img{max-height:210px;object-fit:contain}.detail-gallery p{margin:5px 0}.detail-date:before{content:'沿革节点 / ';color:#869071}.heading-note{color:#967447}
