/* Codex维护：2026-09-08。独立展示页，移动端目录为可收起面板。 */
.environment-bar{position:absolute;left:20px;top:75px;display:flex;gap:3px;padding:4px;background:#f5f2e9ed;border:1px solid #ffffff80;border-radius:7px;box-shadow:0 5px 20px #142e2412;backdrop-filter:blur(12px)}.environment-bar button{font-size:12px;padding:8px 12px;min-height:35px;border:0}.environment-bar button span{font-size:15px;margin-right:3px}.environment-bar button[aria-pressed=true]{background:#244f46;color:white}.stage[data-environment=dusk] .environment-bar button[aria-pressed=true]{background:#955e39}.stage[data-environment=night] .environment-bar button[aria-pressed=true]{background:#34476c}.stage[data-environment=night] .stage-note{color:#d2dded}.stage[data-environment=night] .north{text-shadow:0 1px 5px #06112a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(max-width:900px){.environment-bar{left:12px;top:61px}}@media(max-width:650px){.environment-bar{left:10px;top:60px;gap:1px}.environment-bar button{padding:7px 10px;min-height:36px;font-size:11px}.environment-bar button span{margin-right:2px}}
:root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#283c38;background:#ede9de;font-synthesis:none;--line:#d2d4c7;--ink:#244f46;--muted:#707e75;--gold:#aa7940}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{color:var(--ink);cursor:pointer;background:none;border:1px solid var(--line);border-radius:5px;padding:8px 12px;transition:background .15s,color .15s}button:hover{background:#e0e7db}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ac7434;outline-offset:3px}button.active{background:var(--ink);color:#fff;border-color:var(--ink)}a{color:inherit;text-underline-offset:4px}.top{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:#f5f2e9}.brand{display:flex;gap:14px;align-items:center}.brand svg{width:44px;height:44px;fill:none;stroke:#8c3d31;stroke-width:1.5}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted)}h1,h2,p{margin:0}h1{font:600 29px/1.35 "KaiTi","STKaiti","Noto Serif SC",serif;letter-spacing:3px}h1 em{font:normal 12px "Microsoft YaHei",sans-serif;letter-spacing:1px;color:#788276;margin-left:10px}.top nav{display:flex;align-items:center;gap:20px;font-size:12px}.top nav a{text-decoration:none}.top nav button{border:0}main{height:calc(100dvh - 112px);display:grid;grid-template-columns:minmax(0,1fr) 322px;min-height:300px}.stage{position:relative;overflow:hidden;background:#aebabc}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}.viewbar{position:absolute;top:20px;left:20px;display:flex;padding:4px;gap:3px;border:1px solid #ffffff70;border-radius:7px;background:#f5f2e9e6;backdrop-filter:blur(12px);box-shadow:0 5px 20px #142e2412}.viewbar button{font-size:12px;padding:7px 11px;border:0}.stage-note{position:absolute;top:24px;right:22px;display:flex;align-items:center;gap:14px;font-size:11px;color:#2e4c47}.north{display:block;font-size:12px;font-weight:bold}.stage-bottom{position:absolute;bottom:19px;left:23px;right:20px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:#324e49}.stage-bottom>span{padding:8px 12px;background:#f4f2e2c4;border-radius:4px}.stage-bottom>div{display:flex;gap:5px}.stage-bottom button{background:#f5f2e9e8;font-size:11px;padding:7px 10px}.stage-bottom button[aria-pressed=true]{background:var(--ink);color:white}#panel{border-left:1px solid var(--line);background:#f5f2e9;overflow:auto;scrollbar-width:thin}.panel-body{padding:23px 20px 14px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.section-title h2{font-size:13px;letter-spacing:1px}.section-title span{font-size:10px;color:var(--muted)}.mode-buttons{display:flex;gap:7px}.mode-buttons button{flex:1;font-size:12px}.toggles{display:flex;justify-content:space-between;padding:13px 0 0;font-size:11px;color:#54685d}.toggles label{cursor:pointer;display:flex;align-items:center;gap:2px}input[type=checkbox]{accent-color:var(--ink)}#selection{margin:21px 0;padding:23px 0;border-block:1px solid var(--line)}#part-name{font:600 23px/1.5 "KaiTi","STKaiti",serif;margin:8px 0;color:var(--ink);overflow-wrap:anywhere}#part-role{font-size:12px;line-height:1.85;color:#485d52}.part-meta{font-size:10px;line-height:1.7;color:#7c857c;margin-top:12px}.range-label{font-size:11px;display:block;margin-top:17px}.range-label output{float:right;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--ink);margin:10px 0}.selection-actions{display:flex;gap:8px}.selection-actions button{font-size:11px;flex:1}#focus{background:var(--ink);color:white}.search{display:flex;align-items:center;background:#e9eadf;border:1px solid var(--line);border-radius:5px;padding:0 9px;gap:7px}.search span{font-size:25px;line-height:1}.search input{width:100%;border:0;background:none;padding:10px 0;min-width:0;font-size:12px;color:var(--ink);outline:none}select{width:100%;border:1px solid var(--line);background:transparent;color:#4a6356;padding:8px;border-radius:5px;margin:8px 0;font-size:11px}#parts-list{max-height:235px;overflow:auto;scrollbar-width:thin}.part-row{width:100%;text-align:left;border:0;border-bottom:1px solid #d2d4c770;border-radius:0;padding:10px 1px;display:flex;align-items:center;gap:9px;font-size:11px}.part-row .dot{display:block;width:5px;height:5px;flex:none;border-radius:50%;background:#849d86}.part-row span:nth-child(2){flex:1}.part-row small{font-size:9px;color:#849285}.accuracy{border-top:1px solid var(--line);margin-top:20px;padding-top:15px;font-size:10px;line-height:1.8;color:#84897f}.accuracy button{font-size:10px;border:0;padding:7px 0;text-decoration:underline;text-underline-offset:3px}#panel-toggle{display:none}footer{height:32px;display:flex;align-items:center;justify-content:center;background:#ede9de;color:#788177;font-size:10px;white-space:pre}footer a{text-decoration:none}#loading{position:absolute;inset:0;z-index:10;background:#e9ece3f5;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .4s}.loading-seal{border:1px solid #a66046;color:#8f422f;font:24px/1.12 "KaiTi",serif;padding:12px 8px;margin-bottom:20px}#loading h2{font:24px "KaiTi",serif;letter-spacing:3px}#loading p{font-size:12px;color:#667a6c;margin-top:12px;max-width:90%;text-align:center;line-height:1.7}.load-track{width:180px;height:2px;background:#cdd6c8;margin-top:23px}.load-track i{display:block;height:2px;width:2%;background:#456955;transition:width .3s}#marker{position:absolute;pointer-events:none;transform:translate(-50%,-100%);font-size:11px;max-width:230px;z-index:2}#marker span{display:block;padding:7px 11px;border:1px solid #e9c788;background:#24493aeF;color:#fff;border-radius:4px;box-shadow:0 2px 10px #142e2440}#marker i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff1b7;box-shadow:0 0 0 3px #ba973673;bottom:-10px;left:50%}dialog{background:#f5f2e9;color:#324c40;max-width:min(620px,92vw);max-height:85dvh;overflow:auto;border:1px solid #c3c7b8;border-radius:9px;box-shadow:0 25px 100px #102f3440;padding:32px}dialog::backdrop{background:#132c2f80;backdrop-filter:blur(4px)}dialog h2{font:25px/1.5 "KaiTi",serif;margin:12px 0 18px}dialog p,dialog li{font-size:13px;line-height:1.85;margin-bottom:13px}dialog ol,dialog ul{padding-left:20px}.dialog-close{position:absolute;right:12px;top:10px;border:0;font-size:25px;padding:0 7px}.dialog-done{background:var(--ink);color:white;margin-top:8px}#loading.error .load-track{display:none}noscript{position:fixed;inset:150px 20px auto;z-index:100;padding:30px;background:#fff}[hidden]{display:none!important}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 360px}.panel-body{padding:28px}.section-title h2{font-size:14px}#part-role{font-size:13px}}
@media(max-width:900px){h1 em{display:none}.stage-note>span:last-child{display:none}.top{padding:0 18px}.viewbar{gap:0;left:12px;top:12px}.viewbar button{padding:7px 9px}.stage-bottom{left:12px;right:12px}#hint{display:none}main{grid-template-columns:minmax(0,1fr) 290px}.panel-body{padding:20px 15px}.stage-bottom>div{margin-left:auto}}
@media(max-width:650px){.top{height:65px;padding:0 14px}.brand{gap:8px}.brand svg{width:32px;height:32px}h1{font-size:25px}.eyebrow{font-size:9px}.top nav{gap:6px;font-size:10px}.top nav button{font-size:10px;padding:6px}.top nav a{max-width:70px;line-height:1.6}.top nav a span{display:none}main{height:calc(100dvh - 93px);display:block;position:relative}.stage{height:100%}.viewbar{top:12px;left:10px;padding:3px}.viewbar button{padding:7px 9px;font-size:11px}.stage-note{right:12px;top:63px}#panel{position:absolute;left:10px;right:10px;bottom:10px;border:1px solid #c9ccbd;border-radius:9px;z-index:4;max-height:70%;box-shadow:0 5px 30px #17322322;background:#f5f2e9f5;backdrop-filter:blur(16px)}#panel-toggle{display:flex;justify-content:space-between;width:100%;border:0;padding:14px 16px;font-size:12px;font-weight:600}#panel-toggle span{font-size:14px}.panel-body{display:none;padding:5px 18px 18px}#panel.open .panel-body{display:block}#panel.open #panel-toggle span{transform:rotate(180deg)}#panel.open{overflow:auto}#selection{margin:14px 0;padding:17px 0}.layers .section-title{display:none}.toggles{padding-top:10px}.stage-bottom{bottom:71px}footer{height:28px;font-size:9px}.panel-body .accuracy{margin-top:10px}#parts-list{max-height:150px}#part-name{font-size:22px}#part-role{font-size:12px}.section-title{margin-bottom:9px}dialog{padding:27px 22px}dialog p,dialog li{font-size:12px}#marker{max-width:180px}}

/* Codex维护：手机选取面板为近半屏，给高亮构件保留观察空间。 */
@media(max-width:650px){#panel.open{max-height:46%}}


/* Codex维护：2026-09-08，构件男声解说控件；移动端保留模型观察区域。 */
.voice-setting{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:19px;font-size:12px}.voice-setting label{display:flex;align-items:center;gap:5px;cursor:pointer}.voice-setting small{font-size:10px;color:#6d8071}#voice-card{padding:12px;background:#e6ebdf;border:1px solid #d0d8c6;border-radius:5px;margin:13px 0}.voice-heading{display:flex;align-items:center;justify-content:space-between;gap:6px}.voice-heading strong{font-size:12px;font-weight:500}.voice-heading>div{display:flex;gap:4px;flex-shrink:0}.voice-heading button{padding:5px 9px;font-size:11px}#voice-status{display:block;min-height:16px;margin-top:8px;color:#5c7563;font-size:11px}#voice-card details{margin-top:7px;font-size:11px}#voice-card summary{cursor:pointer;color:#486752}#voice-transcript{line-height:1.85;font-size:12px;margin:9px 0 0}#voice-enabled{accent-color:#24493a}@media(max-width:650px){.voice-setting{margin-top:12px;font-size:11px}#voice-card{padding:10px}.voice-heading button{min-height:34px;min-width:42px}#voice-card details{font-size:11px}}