/* 彭 · 字形观察展。All selectors stay within this component. */
.peng-evolution{--pe-ink:#25483e;--pe-muted:#68736a;--pe-bronze:#9b8050;--pe-rule:#c8cbbd;--pe-paper:#f6f3eb;--pe-wash:#e7ebe1;--pe-progress:0%;margin:74px 0 64px;padding-top:25px;border-top:1px solid var(--pe-bronze);color:var(--pe-ink);font-family:"STSong","Songti SC","SimSun",serif;scroll-margin-top:28px}
.peng-evolution *{box-sizing:border-box}
.peng-evolution .pe-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.63fr);align-items:end;gap:30px;margin-bottom:32px}
.peng-evolution .pe-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 18px;color:var(--pe-bronze);font:13px/1.6 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.18em}
.peng-evolution .pe-eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.peng-evolution .pe-heading h2{margin:0;color:var(--pe-ink);font-size:clamp(32px,3.2vw,46px);font-weight:400;line-height:1.4;letter-spacing:.025em}
.peng-evolution .pe-lead{margin:0 0 4px;font-size:19px;line-height:1.85;color:var(--pe-muted);text-wrap:pretty}
.peng-evolution .pe-exhibit{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border:1px solid var(--pe-rule);background:var(--pe-paper)}
.peng-evolution .pe-object{min-width:0;margin:0;border-right:1px solid var(--pe-rule);background:var(--pe-wash)}
.peng-evolution .pe-stage{position:relative;display:grid;place-items:center;height:500px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 47% 43%,#f8f6ef 0%,#f0f1e8 55%,#e7ebe1 100%)}
.peng-evolution .pe-stage::before{content:"";position:absolute;inset:76px 44px 54px;border:1px solid #b5bea88a;z-index:-1}
.peng-evolution .pe-stage::after{content:"";position:absolute;inset:86px 34px 44px;border:1px solid #bdc5b25c;z-index:-1}
.peng-evolution .pe-stage-top{position:absolute;top:25px;left:28px;right:28px;display:flex;justify-content:space-between;gap:15px;align-items:start;font:12px/1.7 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.12em;color:#70806b}
.peng-evolution .pe-stage-label{display:block;margin-top:4px;font-family:inherit;font-size:15px;letter-spacing:.14em;color:var(--pe-ink)}
.peng-evolution .pe-stage-index{font:italic 27px/1 Georgia,serif;color:var(--pe-bronze)}
.peng-evolution .pe-glyph{display:block;width:360px;max-width:80%;height:360px;max-height:76%;margin-top:30px;overflow:visible;color:var(--pe-ink)}
.peng-evolution .pe-glyph text{fill:currentColor;font-family:"STSong","Songti SC","SimSun",serif;font-weight:400}
.peng-evolution .pe-stage-bottom{position:absolute;left:28px;right:28px;bottom:20px;display:flex;justify-content:space-between;gap:12px;font:12px/1.5 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.13em;color:#75816d}
.peng-evolution .pe-figure-note{margin:0;padding:17px 26px 18px;border-top:1px solid var(--pe-rule);color:#61715f;font-size:16px;line-height:1.8;min-height:93px}
.peng-evolution .pe-figure-note span{display:block}
.peng-evolution .pe-caption{position:relative;min-width:0;padding:39px 34px 28px;display:flex;flex-direction:column}
.peng-evolution .pe-caption-label{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--pe-bronze);font:12px/1.6 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.18em}
.peng-evolution .pe-caption-label::before{content:"";width:5px;height:5px;border:1px solid currentColor;transform:rotate(45deg)}
.peng-evolution .pe-name{margin:0 0 9px!important;font-size:44px!important;font-weight:400!important;line-height:1.3!important;letter-spacing:.08em;color:var(--pe-ink)}
.peng-evolution .pe-era{margin:0 0 24px;color:var(--pe-muted);font-size:16px;line-height:1.7;min-height:27px}
.peng-evolution .pe-description{margin:0 0 23px;font-size:20px;line-height:1.9;min-height:7.6em;text-wrap:pretty}
.peng-evolution .pe-observation{margin:0 0 24px;padding:18px 0 0;border-top:1px solid var(--pe-rule);font-size:19px;line-height:1.85}
.peng-evolution .pe-observation-label{display:block;margin-bottom:7px;color:var(--pe-bronze);font:13px/1.6 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.14em}
.peng-evolution .pe-source{margin:auto 0 0;padding-top:10px;font-size:15px;line-height:1.8;color:var(--pe-muted);overflow-wrap:anywhere}
.peng-evolution .pe-source a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.peng-evolution .pe-transport{display:flex;align-items:center;gap:12px;padding:22px 0 18px}
.peng-evolution button{font-family:inherit;cursor:pointer;border-radius:0;transition:background-color .18s,color .18s,border-color .18s}
.peng-evolution .pe-button{display:inline-flex;min-height:50px;min-width:126px;align-items:center;justify-content:center;gap:10px;padding:11px 21px;font-size:19px;line-height:1.4;letter-spacing:.035em}
.peng-evolution .pe-play{border:1px solid var(--pe-ink);background:var(--pe-ink);color:#fbf8ee}
.peng-evolution .pe-play:hover{background:#19392f;border-color:#19392f}
.peng-evolution .pe-restart{min-width:102px;border:1px solid #aeb8a6;background:transparent;color:var(--pe-ink)}
.peng-evolution .pe-restart:hover{background:#e5eadd}
.peng-evolution .pe-button svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.peng-evolution .pe-pause-icon,.peng-evolution[data-pe-playing="true"] .pe-play-icon{display:none}
.peng-evolution[data-pe-playing="true"] .pe-pause-icon{display:block}
.peng-evolution .pe-loop{display:flex;align-items:center;gap:10px;min-height:50px;margin-left:auto;padding:10px 0 10px 12px;cursor:pointer;font-size:18px;line-height:1.4;white-space:nowrap;color:var(--pe-muted)}
.peng-evolution .pe-loop input{margin:0;width:18px;height:18px;accent-color:var(--pe-ink);cursor:pointer}
.peng-evolution .pe-timeline{position:relative;padding-top:5px}
.peng-evolution .pe-range-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.peng-evolution .pe-range{display:block;appearance:none;-webkit-appearance:none;position:relative;width:80%;height:48px;margin:0 auto;cursor:pointer;background:transparent;touch-action:pan-y}
.peng-evolution .pe-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--pe-ink) var(--pe-progress),var(--pe-rule) var(--pe-progress))}
.peng-evolution .pe-range::-moz-range-track{height:2px;background:var(--pe-rule)}
.peng-evolution .pe-range::-moz-range-progress{height:2px;background:var(--pe-ink)}
.peng-evolution .pe-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin-top:-6.5px;background:var(--pe-ink);border:3px solid var(--pe-paper);box-shadow:0 0 0 1px var(--pe-ink);border-radius:50%}
.peng-evolution .pe-range::-moz-range-thumb{width:10px;height:10px;background:var(--pe-ink);border:3px solid var(--pe-paper);box-shadow:0 0 0 1px var(--pe-ink);border-radius:50%}
.peng-evolution .pe-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.peng-evolution .pe-step{display:flex;flex-direction:column;align-items:center;justify-content:start;gap:7px;width:100%;min-height:85px;padding:9px 4px 17px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--pe-muted);font-size:20px;line-height:1.45;white-space:normal}
.peng-evolution .pe-step-number{font:11px/1.4 Georgia,serif;letter-spacing:.12em;color:#8b917e}
.peng-evolution .pe-step:hover{color:var(--pe-ink);background:#e6eade80}
.peng-evolution .pe-step[aria-current="step"]{color:var(--pe-ink);border-bottom-color:var(--pe-bronze)}
.peng-evolution .pe-step[aria-current="step"] .pe-step-number{color:var(--pe-bronze)}
.peng-evolution .pe-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:25px;padding-top:17px;border-top:1px solid var(--pe-rule)}
.peng-evolution .pe-status{margin:0;font-size:16px;line-height:1.75;min-height:28px;color:var(--pe-muted)}
.peng-evolution .pe-scope{margin:0;max-width:470px;text-align:right;font-size:16px;line-height:1.75;color:var(--pe-muted)}
.peng-evolution button:focus-visible,.peng-evolution input:focus-visible,.peng-evolution a:focus-visible{outline:2px solid var(--pe-bronze);outline-offset:5px}
.peng-evolution .pe-caption{height:var(--pe-caption-height,594px);overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain}
.peng-evolution .pe-caption>*{flex-shrink:0}
.peng-evolution .pe-glyph .pe-voice{stroke:var(--pe-bronze)}
.peng-evolution .pe-object{grid-column:1;grid-row:1}
.peng-evolution .pe-caption{grid-column:2;grid-row:1}
.peng-evolution .pe-interaction{grid-column:1/-1;grid-row:2;min-width:0;padding:0 26px;border-top:1px solid var(--pe-rule);background:var(--pe-paper)}
.peng-evolution .pe-interaction .pe-transport{padding-top:21px}
.peng-evolution .pe-reference{margin:22px 0 0;border-top:1px solid var(--pe-rule);border-bottom:1px solid var(--pe-rule)}
.peng-evolution .pe-reference>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:62px;padding:16px 0;font-size:19px;line-height:1.6;color:var(--pe-ink);cursor:pointer;list-style:none}
.peng-evolution .pe-reference>summary::-webkit-details-marker{display:none}
.peng-evolution .pe-reference>summary::after{content:"+";flex:0 0 auto;color:var(--pe-bronze);font:26px/1 Georgia,serif}
.peng-evolution .pe-reference[open]>summary::after{content:"−"}
.peng-evolution .pe-reference>summary:focus-visible{outline:2px solid var(--pe-bronze);outline-offset:3px}
.peng-evolution .pe-reference-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:8px 0 26px}
.peng-evolution .pe-reference-card{min-width:0;padding:0 18px;border-left:1px solid var(--pe-rule)}
.peng-evolution .pe-reference-card:first-child{padding-left:0;border-left:0}
.peng-evolution .pe-reference-card:last-child{padding-right:0}
.peng-evolution .pe-mini{display:block;width:100%;height:130px;margin:0 0 19px;color:var(--pe-ink);background:#e9ede3}
.peng-evolution .pe-mini .pe-voice{stroke:var(--pe-bronze)}
.peng-evolution .pe-reference-card h3{margin:0 0 12px;font-size:22px;font-weight:400;line-height:1.5;color:var(--pe-ink)}
.peng-evolution .pe-reference-card p{margin:10px 0;font-size:19px;line-height:1.85;color:var(--pe-muted);overflow-wrap:anywhere}
.peng-evolution .pe-reference-card a{font-size:16px;line-height:1.8;color:var(--pe-ink);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
@media(max-width:950px){.peng-evolution .pe-heading{grid-template-columns:1fr;gap:17px}.peng-evolution .pe-lead{max-width:700px}.peng-evolution .pe-caption{padding:31px 25px 25px}.peng-evolution .pe-stage{height:470px}.peng-evolution .pe-stage::before{inset:75px 26px 54px}.peng-evolution .pe-stage::after{inset:85px 18px 44px}.peng-evolution .pe-description{font-size:19px}.peng-evolution .pe-figure-note{padding-inline:22px}}
@media(max-width:700px){.peng-evolution{margin:48px 0;padding-top:21px}.peng-evolution .pe-heading{gap:16px;margin-bottom:23px}.peng-evolution .pe-heading h2{font-size:32px;line-height:1.5}.peng-evolution .pe-eyebrow{font-size:12px;margin-bottom:14px;letter-spacing:.12em}.peng-evolution .pe-lead{font-size:19px;line-height:1.9}.peng-evolution .pe-exhibit{grid-template-columns:1fr}.peng-evolution .pe-object{border-right:0;border-bottom:1px solid var(--pe-rule)}.peng-evolution .pe-stage{height:360px}.peng-evolution .pe-glyph{width:272px;height:272px;max-width:82%;max-height:78%;margin-top:28px}.peng-evolution .pe-stage-top{left:20px;right:20px;top:19px;font-size:11px}.peng-evolution .pe-stage-label{font-size:15px}.peng-evolution .pe-stage-index{font-size:25px}.peng-evolution .pe-stage::before{inset:69px 27px 43px}.peng-evolution .pe-stage::after{inset:77px 19px 35px}.peng-evolution .pe-stage-bottom{left:20px;right:20px;bottom:15px;font-size:10px}.peng-evolution .pe-figure-note{padding:16px 19px;font-size:16px;line-height:1.8;min-height:90px}.peng-evolution .pe-caption{padding:26px 20px 25px}.peng-evolution .pe-name{font-size:38px!important}.peng-evolution .pe-era{font-size:16px;margin-bottom:18px}.peng-evolution .pe-description{font-size:19px;line-height:1.9;min-height:7.6em;margin-bottom:22px}.peng-evolution .pe-observation{font-size:19px;line-height:1.9;margin-bottom:20px}.peng-evolution .pe-source{font-size:16px}.peng-evolution .pe-transport{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:20px;padding-bottom:3px}.peng-evolution .pe-button{min-height:50px;min-width:0;padding:10px 12px;font-size:19px}.peng-evolution .pe-loop{grid-column:1/-1;justify-self:end;min-height:48px;font-size:18px;padding:8px 0;margin-left:0}.peng-evolution .pe-range{height:48px}.peng-evolution .pe-step{font-size:18px;line-height:1.5;min-height:86px;padding:8px 3px 14px;gap:7px}.peng-evolution .pe-step-number{font-size:11px}.peng-evolution .pe-bottom{display:block;padding-top:15px}.peng-evolution .pe-status{font-size:17px;min-height:30px}.peng-evolution .pe-scope{margin-top:9px;text-align:left;font-size:16px;line-height:1.8}}
@media(max-width:360px){.peng-evolution .pe-heading h2{font-size:29px}.peng-evolution .pe-stage{height:334px}.peng-evolution .pe-glyph{width:250px;height:250px}.peng-evolution .pe-caption{padding-inline:17px}.peng-evolution .pe-step{font-size:16px;min-height:85px}.peng-evolution .pe-figure-note{padding-inline:17px}.peng-evolution .pe-description{min-height:9.5em}}
/* Reserve stable label / copy space as the five examples change. The player may
 * measure the longest verified text and set --pe-caption-height once per width. */
@media(max-width:950px) and (min-width:701px){.peng-evolution .pe-caption{height:var(--pe-caption-height,564px)}}
@media(max-width:700px){.peng-evolution .pe-caption{height:var(--pe-caption-height,750px)}.peng-evolution .pe-name{min-height:2.6em}.peng-evolution .pe-step>span:last-child{max-width:4em;overflow-wrap:anywhere}}
@media(max-width:360px){.peng-evolution .pe-caption{height:var(--pe-caption-height,840px)}}
@media(max-width:950px) and (min-width:701px){.peng-evolution .pe-reference-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 0}.peng-evolution .pe-reference-card:nth-child(3n+1){padding-left:0;border-left:0}.peng-evolution .pe-reference-card:nth-child(3n){padding-right:0}}
@media(max-width:700px){.peng-evolution .pe-object{grid-column:1;grid-row:1;border-bottom:0}.peng-evolution .pe-caption{grid-column:1;grid-row:3;border-top:1px solid var(--pe-rule)}.peng-evolution .pe-interaction{grid-column:1;grid-row:2;padding:0 16px}.peng-evolution .pe-interaction .pe-transport{padding-top:18px}.peng-evolution .pe-interaction .pe-step{font-size:16px;min-height:85px}.peng-evolution .pe-interaction .pe-loop{min-height:48px}.peng-evolution .pe-reference>summary{font-size:19px;min-height:64px}.peng-evolution .pe-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 0;padding-bottom:22px}.peng-evolution .pe-reference-card{padding:0 14px}.peng-evolution .pe-reference-card:nth-child(2n+1){border-left:0;padding-left:0}.peng-evolution .pe-reference-card:nth-child(2n){padding-right:0}.peng-evolution .pe-reference-card h3{font-size:22px}.peng-evolution .pe-mini{height:130px;margin-bottom:15px}}
@media(max-width:420px){.peng-evolution .pe-reference-grid{grid-template-columns:1fr;gap:24px}.peng-evolution .pe-reference-card,.peng-evolution .pe-reference-card:first-child,.peng-evolution .pe-reference-card:last-child{padding:22px 0 0;border-left:0;border-top:1px solid var(--pe-rule)}.peng-evolution .pe-reference-card:first-child{padding-top:0;border-top:0}.peng-evolution .pe-mini{height:130px;margin-bottom:16px}.peng-evolution .pe-reference-card p{font-size:19px}}
@media(prefers-reduced-motion:reduce){.peng-evolution button{transition:none}.peng-evolution *{scroll-behavior:auto}}
.peng-evolution .pe-reference-note{margin:0 0 24px;font-size:16px;line-height:1.85;color:var(--pe-muted)}
@media(max-width:700px){.peng-evolution .pe-name{min-height:1.3em}.peng-evolution .pe-play{padding-inline:6px;gap:6px}.peng-evolution .pe-play [data-pe-play-label]{white-space:nowrap}}
@media print{.peng-evolution{break-inside:auto;margin:30px 0}.peng-evolution .pe-transport,.peng-evolution .pe-timeline,.peng-evolution .pe-status{display:none}.peng-evolution .pe-stage{height:320px}.peng-evolution .pe-caption{padding:20px;height:auto;overflow:visible}.peng-evolution .pe-name{font-size:30px!important}.peng-evolution .pe-description{min-height:0}.peng-evolution .pe-heading h2{font-size:28px}}