:root{color-scheme:dark;--ink:#11110f;--paper:#d9cdb4;--muted:#a59c88;--gold:#b89a61;--red:#804339;--line:rgba(185,157,110,.24)}
*{box-sizing:border-box}html,body{margin:0;min-width:300px;background:var(--ink);color:var(--paper);font-family:"Microsoft YaHei","PingFang SC",sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.5}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:6px}[hidden]{display:none!important}
#experience{position:relative;height:100svh;min-height:660px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 48%,#28271f 0%,#171814 43%,#11110f 76%)}
#stage,.ambient{position:absolute;inset:0;z-index:-2;pointer-events:none}#stage canvas{display:block;width:100%;height:100%}.ambient{z-index:-1;background:radial-gradient(ellipse at center,transparent 30%,rgba(9,10,8,.26));}
.masthead{position:absolute;inset:32px 42px auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.signature{display:flex;gap:13px;align-items:center;font-family:"Noto Serif CJK SC","Songti SC",SimSun,serif;font-size:19px;letter-spacing:.2em}.signature small{display:block;font-family:"Microsoft YaHei",sans-serif;font-size:9px;letter-spacing:.16em;color:var(--muted);margin-top:8px}.seal{border:1px solid #875246;color:#bd8170;width:30px;height:36px;display:grid;place-items:center;font-size:20px;line-height:1;transform:rotate(-3deg);letter-spacing:0}.chapter{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.2em;color:var(--muted)}.chapter>span:first-child{color:var(--gold);font-family:serif;border-right:1px solid var(--line);padding-right:14px}
.side-note{position:absolute;top:45%;writing-mode:vertical-rl;font-family:SimSun,serif;font-size:11px;letter-spacing:.5em;color:#7e7767}.left-note{left:45px}.right-note{right:45px}
.intro{position:absolute;top:25%;left:50%;transform:translateX(-50%);text-align:center;width:min(90%,600px);transition:opacity .9s}.eyebrow{font-size:10px;letter-spacing:.36em;color:var(--gold);margin:0 0 22px}h1{font-family:"Noto Serif CJK SC","Songti SC",SimSun,serif;font-size:clamp(52px,6.8vw,92px);font-weight:400;letter-spacing:.2em;padding-left:.2em;margin:0;text-shadow:0 2px 30px #0d0e0b}.title-rule{display:flex;align-items:center;justify-content:center;gap:20px;margin:22px 0;color:#9e7951;font:12px SimSun,serif}.title-rule i{width:38px;height:1px;background:var(--line)}.poem{font-family:"Noto Serif CJK SC","Songti SC",SimSun,serif;font-size:clamp(14px,1.5vw,18px);line-height:2.25;letter-spacing:.19em;color:#c2b79e;margin:0}
.entry{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);text-align:center;width:min(90%,460px)}.primary{border:1px solid #88764f;background:rgba(41,38,29,.5);min-width:182px;min-height:48px;padding:12px 24px;font-family:"Songti SC",SimSun,serif;font-size:15px;letter-spacing:.3em;display:inline-flex;align-items:center;justify-content:center;gap:26px;transition:background .3s,border .3s}.primary:hover{border-color:#c5ac77;background:rgba(132,108,62,.2)}.primary span:last-child{letter-spacing:0}.privacy{font-size:10px;line-height:1.9;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px}.text-button,.quiet-button{background:none;border:0;padding:8px;color:var(--muted);font-size:10px;letter-spacing:.05em}.text-button{text-decoration:underline;text-underline-offset:5px}.text-button:hover,.quiet-button:hover{color:var(--paper)}
.guidance{position:absolute;top:16%;left:50%;transform:translateX(-50%);width:90%;text-align:center}.guidance .eyebrow{margin-bottom:13px}.guidance h2{font:400 clamp(25px,3.1vw,40px)/1.5 "Songti SC",SimSun,serif;letter-spacing:.18em;margin:0}.guidance>p:last-child{font-size:11px;letter-spacing:.06em;color:var(--muted);line-height:1.8;margin-top:13px}.interaction{position:absolute;bottom:16.5%;left:50%;transform:translateX(-50%);width:min(86%,520px);text-align:center}.interaction p{font-size:11px;letter-spacing:.09em;color:var(--muted);line-height:1.8}.hold-track{width:116px;height:2px;margin:16px auto;background:#403d32}.hold-track span{display:block;height:100%;background:var(--gold);width:0;transition:width .1s linear}.demo-label{color:#c29978!important;font-size:10px!important}.demo-input{display:flex;align-items:center;justify-content:center;gap:16px;font-size:10px;color:var(--muted)}input[type=range]{width:160px;accent-color:#b89860;height:20px}
.notice{position:absolute;left:50%;transform:translateX(-50%);bottom:9%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;line-height:1.8;text-align:center;width:min(85%,720px);color:var(--muted)}.status-dot{width:4px;height:4px;background:#9e976f;border-radius:50%;flex-shrink:0}.notice[data-error="true"]{color:#d9aa92}.notice[data-error="true"] .status-dot{background:#bf7760}.utilities{position:absolute;right:32px;bottom:8%;display:flex;flex-direction:column;align-items:flex-end;gap:0}.quiet-button{font-size:9px;min-height:28px;padding:4px 8px}.footer{position:absolute;left:42px;right:42px;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.footer p{font-size:9px;letter-spacing:.07em;color:#8f8878;margin:0}.footer p span{color:#6d695e}.chapters{display:flex;gap:28px;margin:0;padding:0;list-style:none;color:#69695e;font:12px SimSun,serif}.chapters li{position:relative}.chapters li:not(:last-child):after{content:"";position:absolute;width:11px;height:1px;background:#393b33;top:50%;left:22px}.chapters li.current{color:#d9c194}.chapters li.current:before{content:"";position:absolute;bottom:-9px;left:5px;width:3px;height:3px;border-radius:50%;background:#b5945a}.chapters li.visited{color:#a08d68}
#debug-panel{position:absolute;z-index:5;right:30px;top:105px;max-width:min(360px,90vw);background:#181b17f5;border:1px solid #565341;padding:18px;font-size:11px;line-height:1.6}#debug-info{font-size:10px;white-space:pre-wrap;color:#b2b9a4}#debug-panel>p{color:var(--gold)}#debug-panel label{font-size:10px}.noscript{position:absolute;bottom:15%;width:100%;text-align:center;background:#211b16;padding:12px}body[data-scene="transition"] .guidance h2{font-size:clamp(24px,3vw,38px)}
@media(max-width:700px){.masthead{inset:22px 22px auto}.signature{font-size:16px}.signature small{font-size:8px;letter-spacing:0}.seal{width:25px;height:30px;font-size:17px}.chapter{font-size:9px;gap:8px}.chapter>span:first-child{padding-right:8px}.left-note{left:20px}.right-note{right:20px}.side-note{font-size:9px}.intro{top:24%}.entry{bottom:23%}.guidance{top:16%}.guidance>p:last-child{max-width:290px;margin:12px auto}.interaction{bottom:23%}.notice{bottom:15.5%;font-size:10px;width:84%}.utilities{bottom:9%;right:0;left:0;flex-direction:row;justify-content:center;align-items:center;gap:9px}.footer{left:22px;right:22px;bottom:22px}.chapters{gap:22px}.chapters li:not(:last-child):after{left:18px;width:8px}.footer p{font-size:8px;max-width:110px;line-height:1.8;text-align:right}.privacy{font-size:9px}.poem{letter-spacing:.12em}#debug-panel{right:20px;top:95px}}
@media(max-height:700px) and (min-width:701px){#experience{min-height:580px}.intro{top:20%}h1{font-size:62px}.eyebrow{margin-bottom:15px}.title-rule{margin:14px 0}.entry{bottom:18%}.guidance{top:14%}.interaction{bottom:18%}.notice{bottom:10%}.privacy{margin:10px 0 2px}.utilities{bottom:10%}.footer{bottom:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 流程控件沿用帛色细线与原字体；六幕导航是真实按钮，任何状态都可操作。 */
.chapters{gap:16px}.chapters li:after,.chapters li:before{display:none!important}
.chapters button{position:relative;min-width:30px;min-height:36px;padding:6px;background:none;border:0;border-bottom:1px solid transparent;color:#99917b;font:14px SimSun,serif}
.chapters button:hover{color:var(--paper)}.chapters button.current{color:#ead4a4;border-bottom-color:var(--gold)}
.chapters button[data-state="completed"]{color:#c1ae7d}.chapter-mark{position:absolute;top:0;right:-5px;font:8px sans-serif;color:#b3a281}
.flow-actions{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);width:min(92%,610px);text-align:center}
.flow-actions>div{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.flow-actions .primary{min-width:162px;min-height:38px;padding:8px 14px;font-size:12px;letter-spacing:.12em}
.completion{font:13px/1.8 SimSun,serif;letter-spacing:.12em;color:#d5bd8e;margin:0 0 12px}
.entry{bottom:26%}.interaction{bottom:150px;width:min(86%,560px)}.notice{bottom:65px;width:min(82%,690px)}
.utilities{bottom:17%;right:26px}.footer{bottom:18px}.footer p{line-height:1.7;text-align:right}
.guidance #scene-description{max-width:520px;margin:12px auto 0;font-size:11px;line-height:1.8;color:var(--muted)}
.stage-state{font-size:9px!important;margin:7px 0!important;color:#a99773!important;letter-spacing:.12em}
.mode-badge{position:absolute;left:50%;transform:translateX(-50%);top:83px;width:90%;text-align:center;font-size:10px;letter-spacing:.08em;color:#bd9271;margin:0}
.extra-help{max-width:500px;margin:10px auto 0;font-size:10px!important;color:#c7b18d!important;line-height:1.75!important}
#body-start{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
#body-start .primary{font-size:12px;min-height:42px;min-width:174px;letter-spacing:.15em}
#debug-panel{position:relative;inset:auto;margin:0 auto;padding:18px 28px;width:min(100%,800px);max-width:none;z-index:auto;overflow-wrap:anywhere;border-top:1px solid #565341}
#debug-close{float:right}.debug-open #experience{overflow:hidden}
@media(min-width:901px) and (max-height:800px){
  .intro{top:16%}h1{font-size:clamp(52px,5.2vw,68px)}.intro .eyebrow{margin-bottom:14px}.intro .title-rule{margin:14px 0}.poem{font-size:16px}.entry{bottom:25%}
}
@media(max-width:900px){
  .utilities{bottom:54px;right:18px;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:3px;left:18px}
  .notice{bottom:91px;width:90%;font-size:10px}.flow-actions{bottom:140px}.interaction{bottom:225px}.entry{bottom:245px}
  .footer{left:18px;right:18px;bottom:12px}.chapters{gap:12px}.footer p{font-size:8px;max-width:180px}
  #experience{min-height:760px}.intro{top:22%}.guidance{top:15%}
}
@media(max-width:520px){
  .masthead{inset:20px 20px auto;align-items:flex-start}.chapter{max-width:130px;letter-spacing:.05em;text-align:right}.chapter>span:first-child{display:none}
  .signature small{max-width:135px;font-size:8px}.mode-badge{top:78px;font-size:9px}.flow-actions>div{gap:8px}
  .footer{flex-direction:column;gap:4px}.footer p{max-width:none;font-size:8px}.footer p br{display:none}.chapters{gap:15px}
  .utilities{bottom:92px}.notice{bottom:126px}.flow-actions{bottom:178px}.interaction{bottom:255px}.entry{bottom:278px}
  .intro{top:18%}.guidance{top:15%}.guidance #scene-description{max-width:300px}.guidance h2{font-size:24px}
  .side-note{top:40%}.extra-help{max-width:310px}.privacy{font-size:9px}.completion{font-size:11px}
  #experience{min-height:820px}.flow-actions .primary{font-size:11px;min-width:138px;min-height:34px}
}
/* V1 控件共用原有舞台底部槽位，图层不变成网站卡片。 */
#audio-controls{font-size:10px;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}
#audio-controls input{width:100px}#level-text{min-width:110px;font-size:9px}
#union-controls{font-size:10px;line-height:1.8}#coverage{max-width:650px;margin:0 auto 7px;font-size:9px;letter-spacing:0}
.union-buttons{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.union-buttons .primary{font-size:12px;letter-spacing:.12em;min-width:140px;min-height:40px;padding:8px 14px}
#live-status{font-size:9px;letter-spacing:0;max-width:610px}#export-status{font-size:9px;letter-spacing:0;margin:5px 0 0}
#demo-pinch{border:1px solid var(--line);padding:5px 14px;min-width:65px}#demo-pinch[aria-pressed=true]{color:var(--paper);border-color:var(--gold)}
body[data-scene=union] .interaction{width:min(88%,720px);bottom:170px}
body[data-scene=union] .flow-actions{bottom:99px}body[data-scene=union] .guidance{top:14%}
#help{max-height:62px;overflow-y:auto}#scene-description{padding:0 5px}
@media(max-width:900px){body[data-scene=union] .interaction{bottom:223px}body[data-scene=union] .flow-actions{bottom:140px}.interaction{bottom:225px}.guidance #scene-description{max-width:480px}.entry .privacy{max-width:390px;margin:13px auto 6px}}
@media(max-width:520px){body[data-scene=union] .interaction{bottom:258px}body[data-scene=union] .flow-actions{bottom:178px}.union-buttons{gap:5px}.union-buttons .primary{font-size:11px;min-width:125px;min-height:34px}#coverage{font-size:8px}#live-status{font-size:8px}#audio-controls{gap:6px}.guidance #scene-description{max-width:305px}.entry .privacy{max-width:310px}}
@media(min-width:521px) and (max-width:900px){body[data-scene=union] .interaction{bottom:181px}body[data-scene=union] .completion{margin-bottom:6px}}
@media(max-width:520px){body[data-scene=union] .interaction{bottom:229px}.union-buttons .text-button{font-size:9px}body[data-scene=union] .completion{margin-bottom:6px}}
/* 完成文案会增高底部操作区；给合卷导出按钮保留独立可点击区域。 */
body[data-scene=union][data-complete=true] .interaction{bottom:186px}
@media(max-width:900px){body[data-scene=union][data-complete=true] .interaction{bottom:228px}}
@media(max-width:520px){body[data-scene=union][data-complete=true] .interaction{bottom:255px}}