/* 三监之乱 · v4 文案更新 2026-10-27。背景、展陈组、人物、面板与按钮分别独立。 */
:root{--paper:#f3ead8;--ink:#4d5944;--olive:#647052;--gold:#b9a36c;--muted:#93886c;--rule:#d7c8a6}
*{box-sizing:border-box}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}body{margin:0;background:#e7e1d1;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif}button,textarea{font:inherit}h1,h2,h3,p{margin:0}button{cursor:pointer;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}button:focus-visible,textarea:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
.history-page{position:relative;isolation:isolate;max-width:460px;min-height:100svh;margin:auto;padding:30px 20px 10px;overflow:hidden;background:var(--paper)}
.scene-layer{position:absolute;inset:0;overflow:hidden;z-index:-2;pointer-events:none}.story-background{width:100%;height:100%;object-fit:cover;object-position:center bottom}.scene-layer::after{content:"";position:absolute;inset:10px;border:1px solid #c8b78944;border-radius:3px}
.history-header{text-align:center;position:relative}.history-header h1{height:76px;width:310px;max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:center}.history-header h1 img{width:100%;height:100%;object-fit:contain}.history-brand{font-size:10px;line-height:16px;letter-spacing:.8px;color:#776f53;margin-top:2px}.history-brand span{margin:0 4px}.chapter{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:600;line-height:22px;letter-spacing:3px;margin-top:12px}.chapter span{font-size:9px;font-weight:400;letter-spacing:1px;padding-right:10px;border-right:1px solid #baa983}
/* 小型展陈组与思考人物保有间距，所有素材保持原纵横比。 */
.artifact-gallery{position:relative;height:170px;margin:5px 0 8px;isolation:isolate;pointer-events:none}
.artifact-cluster{position:absolute;width:190px;height:132px;left:7px;bottom:15px;isolation:isolate}
.display-ground{position:absolute;width:198px;height:auto;left:-2px;bottom:-36px;z-index:-1;opacity:.85;transform:scaleY(1.55);transform-origin:50% 54%}
.scene-piece{position:absolute;display:block;object-fit:contain;filter:drop-shadow(0 2px 1px #796a3320)}
.scene-gu{width:55px;height:90px;left:6px;top:39px;z-index:1}
.scene-fang{width:110px;height:auto;left:35px;top:22px;z-index:2}
.scene-round{width:88px;height:auto;left:102px;top:57px;z-index:3}
.guide-character{position:absolute;height:154px;width:auto;right:24px;bottom:13px;filter:drop-shadow(0 3px 2px #796a3320)}
.ancient-motif{position:absolute;left:8px;top:13px;width:10px;height:37px;object-fit:contain;opacity:.25;filter:sepia(.6)}
.history-card{position:relative;isolation:isolate;padding:18px 22px 16px}.panel-skin{position:absolute;inset:0;z-index:-1;background:#fcf8eef2;border:1px solid #c7b488;border-radius:19px 7px 19px 7px;box-shadow:0 4px 0 #c0ad7c24,0 7px 16px #776d3420}.panel-skin::after{content:"";position:absolute;inset:5px;border:1px solid #dfd0ac;border-radius:14px 3px 14px 3px;pointer-events:none}
.section-kicker{font-size:10px;line-height:14px;letter-spacing:1px;color:#968365}.question-title{font-size:20px;line-height:1.45;font-weight:600;letter-spacing:.2px;margin-top:7px}.question-title strong{font-weight:600;color:#9a7747}
.exhibit-invitation{margin-top:13px;font-size:15px;line-height:1.65;font-weight:600;color:#a23d24}.exhibit-invitation strong{font-weight:700;color:inherit}
.opinion-heading{display:flex;align-items:center;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule);margin-bottom:8px;line-height:18px}.opinion-heading>span{font-size:9px;color:var(--muted)}.opinion-input{position:relative}.opinion-input textarea{width:100%;display:block;height:96px;resize:none;border:1px solid #d9ccb0;border-radius:9px;background:#fffdf4;color:var(--ink);font-size:14px;line-height:1.75;padding:10px 12px 27px;box-shadow:inset 0 2px 3px #b1a67f0a}.opinion-input>span{position:absolute;right:10px;bottom:8px;font-size:9px;color:#a0987d}
.actions{display:flex;gap:10px;margin-top:11px}.art-button{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:0;height:54px;padding:0 12px;flex:1;border:0;background:transparent;color:#43543c}.button-skin{position:absolute;inset:0;z-index:-1;background:url('/assets/optimized/f6f35d420e2c4b5f.webp') center/100% 100% no-repeat;filter:drop-shadow(0 2px 1px #85734420)}.art-button>span:last-child{font-size:13px;font-weight:600;letter-spacing:1px;text-shadow:0 1px #fff6d97a;transform:translateY(-1px)}.secondary-button .button-skin{filter:brightness(1.12) saturate(.55) drop-shadow(0 2px 1px #85734420)}.art-button:active{transform:translateY(1px)}.opinion-note{font-size:9px;min-height:14px;line-height:1.6;text-align:center;color:#978c70;margin-top:8px}.opinion-note.has-feedback{color:#7b683f}.history-footer{width:fit-content;margin:12px auto 0;padding:2px 9px;border-radius:10px;background:#fcf8eede;text-align:center;font-size:10px;line-height:15px;letter-spacing:2px;color:#82795c;text-shadow:0 1px 3px #fffaf0}
.showing-voices{padding-bottom:66px}.showing-voices .artifact-gallery{height:150px;margin:6px 0 10px}.showing-voices .artifact-cluster{transform:scale(.9);transform-origin:bottom left;left:12px;bottom:15px}.showing-voices .guide-character{height:136px;right:27px;bottom:12px}.showing-voices .ancient-motif{height:32px;top:10px}
.voices-heading{display:flex;align-items:baseline;justify-content:space-between;padding:3px 2px 0}.voices-heading h2{font-size:21px;font-weight:600;letter-spacing:2px}.voices-heading p{font-size:9px;color:#978a6b}.sample-note{font-size:9px;color:#9d9278;padding:8px 2px 12px}.voices-list{display:grid;gap:11px}.voice-card{position:relative;isolation:isolate;padding:13px 18px 15px}.voice-card .panel-skin{border-color:#d8c8a4;border-radius:13px 5px 13px 5px}.voice-card .panel-skin::after{inset:4px;border-color:#e8ddc5;border-radius:9px 2px 9px 2px}.voice-card header{display:flex;align-items:center;gap:9px;margin-bottom:6px}.voice-number{font-family:Georgia,serif;font-style:italic;font-size:21px;color:#ad9d77}.voice-card h3{font-size:10px;font-weight:500;color:#867d62}.voice-label{margin-left:auto;font-size:8px;color:#a29578}.voice-card>p{font-size:13px;line-height:1.8;color:#62654e}.return-button{width:174px;max-width:100%;margin:13px auto 0;flex:initial}
@media(max-width:370px){.history-page{padding:25px 17px 8px}.history-header h1{height:71px;width:288px}.chapter{margin-top:10px}.artifact-gallery{height:160px}.artifact-cluster{left:1px;bottom:12px}.guide-character{height:148px;right:17px;bottom:13px}.ancient-motif{left:5px;top:10px}.history-card{padding:17px 20px 15px}.question-title{font-size:19px}.exhibit-invitation{font-size:14px;margin-top:12px}.opinion-heading>span{font-size:8px}.opinion-input textarea{height:92px}.art-button{height:51px}.art-button>span:last-child{font-size:12px}.showing-voices{padding-bottom:62px}.showing-voices .artifact-gallery{height:143px}.showing-voices .artifact-cluster{left:5px;bottom:13px}.showing-voices .guide-character{height:131px;right:20px;bottom:12px}.voices-heading{align-items:flex-start;gap:8px}.voices-heading p{font-size:8px;line-height:1.8;max-width:110px;padding-top:4px}.voice-card{padding:12px 16px 13px}.voice-card>p{font-size:12px}}
@media(max-width:340px){.artifact-cluster{transform:scale(.88);transform-origin:bottom left}.guide-character{height:137px;right:2px}.showing-voices .artifact-cluster{transform:scale(.83)}.showing-voices .guide-character{height:123px;right:7px}.exhibit-invitation{font-size:13px}.question-title{font-size:18px}}
@media(prefers-reduced-motion:no-preference){section:not([hidden]){animation:reveal .22s ease-out}@keyframes reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}