:root{color-scheme:dark;font-family:'Microsoft YaHei','Segoe UI',sans-serif;background:#091511;color:#e4e7d8;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}#app{position:relative;height:100svh;min-height:320px;overflow:hidden}#viewport{position:absolute;inset:0}canvas{display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#030a0860,transparent 25%,transparent 67%,#030b0965),radial-gradient(ellipse at 52% 45%,transparent 38%,#020b0850 100%)}.masthead{position:absolute;left:0;top:0;right:0;height:150px;pointer-events:none}.chapter{position:absolute;left:3.3vw;top:30px;font-family:'Noto Serif SC','SimSun',serif;font-size:25px;letter-spacing:3px;color:#ecebd8;text-shadow:0 2px 20px #0009}.chapter i{display:block;width:31px;height:1px;background:#d4c998;margin-top:16px}.brand{position:absolute;top:21px;left:50%;transform:translateX(-50%);text-align:center;width:max-content;text-shadow:0 2px 20px #0009}.brand svg{width:29px;height:24px;fill:#d9cca0}.brand h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,2.05vw,32px);letter-spacing:.35px;font-weight:400;margin:6px 0 8px;color:#f0efdf}.brand em{font-size:.75em;margin:0 5px;opacity:.65;font-style:normal}.brand p{font-family:'SimSun',serif;font-size:13px;letter-spacing:4px;margin:0;color:#d4d9c9}.edition{position:absolute;right:3.3vw;top:39px;font-size:10px;letter-spacing:2.3px;color:#c1c8b9aa}.controls{position:absolute;right:30px;bottom:38px;width:118px;z-index:3}.fold{width:100%;height:35px;color:#ced5c3;font-size:12px;letter-spacing:2px;background:#08191273;border:1px solid #d2d2ad42;border-radius:30px;backdrop-filter:blur(12px)}.fold:hover{background:#22382dbb;border-color:#e6dab588}.controls.expanded{width:276px;bottom:35px;border:1px solid #d1d7b834;border-radius:15px;background:#091b15e8;box-shadow:0 15px 60px #0005;backdrop-filter:blur(20px);padding:14px 19px 16px}.expanded .fold{width:auto;float:right;border:0;background:none;height:24px;padding:0;letter-spacing:1px}.panel-top{display:flex;justify-content:space-between;align-items:center;padding:8px 0 24px;clear:both}.panel-top h2{font-size:16px;font-weight:400;letter-spacing:1px;margin:0}.live{font-size:10px;letter-spacing:1px;color:#a3b2a0}.live b{font-size:16px;font-weight:400;color:#d4dfc7}#controlBody{max-height:calc(100svh - 160px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#69806b transparent}#controlBody[hidden]{display:none}.label{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#ccd8c7}output{font-variant-numeric:tabular-nums;color:#d5c99b}input[type=range]{appearance:none;width:100%;height:3px;background:#59725d;margin:22px 0 12px;cursor:pointer;accent-color:#d9caa0}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#e0d2a6;border-radius:50%;box-shadow:0 0 0 4px #ddc89910}.phase-labels{display:flex;justify-content:space-between;font-size:11px;color:#819883}button:not(.fold){border:1px solid #c1ccaa40;border-radius:6px;min-height:36px;padding:7px 11px;background:#c9dec209;color:#dce5d1}button:not(.fold):hover{background:#c5d5b71e;border-color:#d9dab78c}.primary{width:100%;margin-top:17px;background:#d0d5b8!important;color:#243c2e!important;border-color:transparent!important;font-size:13px}.section-title{font-size:11px;color:#8eaa93;letter-spacing:2px;margin:22px 0 10px}.view-buttons{display:flex;gap:5px}.view-buttons button{font-size:11px!important;padding:7px 5px!important;flex:1;white-space:nowrap}.view-buttons .selected{background:#b9ccaa25!important;border-color:#c8d8b367!important}.toggle{display:flex;justify-content:space-between;align-items:center;position:relative;margin:14px 0;font-size:13px;cursor:pointer}.toggle input{position:absolute;right:0;opacity:0;width:34px;height:20px}.toggle i{width:32px;height:18px;border-radius:20px;background:#354b3c;pointer-events:none;position:relative}.toggle i:after{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#b6c7b0;transition:transform .2s}.toggle input:checked+i{background:#778f68}.toggle input:checked+i:after{transform:translateX(14px);background:#e8e6cc}.quality-row{border-top:1px solid #c4d0b120;padding-top:17px;margin-top:21px}select{font-size:12px;background:#182c20;color:#d4dec8;border:1px solid #becfaa35;border-radius:5px;padding:6px}.quality-note{display:flex;justify-content:space-between;color:#849d88;font-size:10px;margin-top:12px}.quiet{width:100%;font-size:12px;margin-top:13px;border:0!important;color:#aec0aa!important}.entrance{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);text-align:center}.connection{height:51px;width:344px;border:1px solid #c9d1b778;border-radius:30px;display:flex;align-items:center;padding:5px;background:linear-gradient(90deg,#172b2185,#17281b69);backdrop-filter:blur(10px);box-shadow:0 5px 35px #00150b30,inset 0 1px 10px #e9e4c308}.sequence{flex:1;font-family:Georgia,serif;letter-spacing:5px;font-size:20px;color:#e2e5d2;padding-bottom:8px;text-shadow:0 0 8px #f9efaf80}.separator{width:1px;height:21px;background:#dce0c578;margin-right:16px}.connection #enter{background:linear-gradient(130deg,#e3d6a6,#b5a16e);border:1px solid #efe2bd70;border-radius:23px;color:#25382c;padding:8px 18px;min-height:38px;font-family:'SimSun',serif;font-size:15px;letter-spacing:1px;box-shadow:0 0 23px #dbca8c18}.connection #enter:hover{background:linear-gradient(130deg,#f3e8bf,#caba89)}#enter span{margin-left:13px;font-family:Georgia,serif}#demoNote{display:block;margin-top:10px;font-size:10px;letter-spacing:2px;color:#b5c3ae9c}footer{position:absolute;bottom:23px;left:3.3vw;font-size:10px;letter-spacing:2px;color:#a0b09aab;pointer-events:none}footer span+span{display:block;margin-top:7px;color:#a0b09a77}button:focus-visible,input:focus-visible,select:focus-visible,.toggle input:focus-visible+i{outline:2px solid #ecd6a1;outline-offset:4px}#loading,#error{position:absolute;inset:0;z-index:20;background:#0a1712;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px;text-align:center}#loading p{font-family:'SimSun',serif;letter-spacing:5px;font-size:16px;color:#c5cfb8}.loader{width:35px;height:35px;border:1px solid #d9ca9225;border-top-color:#e0d6ab;border-radius:50%;animation:spin 2s linear infinite;margin-bottom:20px}#error p{max-width:500px;line-height:1.8;color:#b4c4aa;font-size:14px}#error[hidden],#loading[hidden]{display:none}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.chapter{font-size:18px;top:27px;left:24px;letter-spacing:1px}.chapter i{margin-top:12px;width:24px}.brand{top:20px}.brand h1{font-size:23px}.edition{display:none}.controls{right:20px;bottom:28px}.controls.expanded{bottom:25px}footer{left:24px;font-size:9px;letter-spacing:1px;max-width:180px}.entrance{bottom:44px}.connection{width:320px}}
@media(max-width:640px){.chapter{top:23px;left:20px;font-size:14px}.chapter i{width:18px;margin-top:10px}.brand{top:72px}.brand h1{font-size:24px}.brand p{font-size:11px;letter-spacing:3px}.brand svg{width:23px;height:20px}.controls{top:20px;right:17px;bottom:auto;width:100px}.fold{font-size:11px;height:32px;letter-spacing:1px}.controls.expanded{top:18px;bottom:auto;width:min(276px,calc(100vw - 34px));padding:12px 17px}.expanded #controlBody{max-height:calc(100svh - 135px)}.entrance{bottom:46px}.connection{height:47px;width:min(320px,calc(100vw - 36px))}.connection #enter{min-height:34px;padding:6px 15px;font-size:14px}.sequence{font-size:19px;letter-spacing:4px}.separator{margin-right:10px}#demoNote{font-size:9px;letter-spacing:1px}footer{left:20px;bottom:14px;font-size:9px}footer span+span{display:none}}
@media(max-height:570px) and (min-width:641px){.brand{top:13px}.brand h1{font-size:23px;margin:2px 0 4px}.brand svg{width:21px;height:17px}.brand p{font-size:10px}.chapter{top:22px;font-size:20px}.entrance{bottom:15px}.connection{height:44px}.connection #enter{min-height:31px}#demoNote{display:none}.controls{bottom:19px}.controls.expanded{bottom:15px}#controlBody{max-height:calc(100svh - 90px)}}

/* The entry itself conducts the scene; production has no growth scrubber. */
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vignette{background:linear-gradient(180deg,#10201720,transparent 22%,transparent 72%,#030b0930)}
.entrance{bottom:36px;min-height:122px;display:flex;align-items:center;flex-direction:column;justify-content:flex-start}
.connection{width:450px;height:55px;padding:5px 6px 5px 22px;background:linear-gradient(90deg,#20382bcc,#1a2c20a3);border-color:#d5d9b86b;transition:border-color .2s,box-shadow .2s}
.connection:focus-within{border-color:#efe0b5b3;box-shadow:0 0 28px #d1dbad18,inset 0 1px 10px #e9e4c308}
.connection .sequence{appearance:none;min-width:0;width:0;flex:1;border:0;border-radius:0;background:transparent;color:#eee6c9;font-family:Georgia,'Microsoft YaHei',serif;font-size:21px;letter-spacing:5px;text-align:left;height:40px;padding:0;outline:0;caret-color:#e8dbaa;text-shadow:0 0 8px #f9efaf45}
.connection .sequence::placeholder{font-size:13px;letter-spacing:2px;color:#bacab2;opacity:.86}
.connection .separator{flex-shrink:0;margin:0 12px;width:1px}.connection #enter{flex-shrink:0;min-height:40px;padding:8px 17px}.connection #enter:disabled{opacity:.44;cursor:default}
.rhythm-marks{display:flex;gap:6px;align-items:center;height:21px;margin-bottom:6px;pointer-events:none}.rhythm-marks i{width:3px;height:3px;border-radius:50%;background:#e1dcc43b;transition:background .2s,box-shadow .2s,transform .2s}.rhythm-marks i.lit{background:#e5d6a8;box-shadow:0 0 8px #e1d29a70}.rhythm-marks i.current{transform:scale(1.6);background:#fff0c9}
#demoNote{margin-top:11px;font-size:10px;letter-spacing:1.5px;color:#c5d0bbbf;display:block}.reset-sequence{font-size:11px!important;letter-spacing:2px;margin-top:7px;min-height:25px!important;border:0!important;padding:3px 12px!important;color:#c0cdb5!important;background:transparent!important}.reset-sequence:hover{color:#f3e6c5!important}
@media(max-width:640px){.entrance{bottom:23px;min-height:123px;width:calc(100vw - 32px)}.connection{width:100%;height:51px;padding-left:16px}.connection .sequence{font-size:19px;letter-spacing:3px}.connection .sequence::placeholder{font-size:12px;letter-spacing:1px}.connection #enter{font-size:13px;min-height:37px;padding:7px 12px}.connection #enter span{margin-left:7px}.connection .separator{margin:0 9px}#demoNote{font-size:9px;letter-spacing:1px}footer span+span{display:none}footer{bottom:12px;font-size:8px}.rhythm-marks{gap:6px}}
@media(max-height:570px) and (min-width:641px){.entrance{bottom:5px;min-height:99px}.connection{height:45px}.connection #enter{min-height:33px}.rhythm-marks{height:10px;margin-bottom:5px}#demoNote{margin-top:6px;font-size:9px}.reset-sequence{margin-top:2px;min-height:19px!important}.sequence{height:32px!important}footer{max-width:175px;font-size:8px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.rhythm-marks i,.connection{transition:none}}
@media(prefers-reduced-motion:reduce){.loader{animation:none}.toggle i:after{transition:none}}

/* —— 总门认证：错误提示条浮于输入胶囊上方（不挤压布局）＋校验中 spinner —— */
.gate-error{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);width:max-content;max-width:min(440px,88vw);margin:0;padding:8px 18px;font-size:12.5px;letter-spacing:1px;line-height:1.5;text-align:center;color:#f4b79c;background:#241410d9;border:1px solid #e08a6a55;border-radius:20px;backdrop-filter:blur(10px);box-shadow:0 6px 26px #0008,inset 0 1px 8px #f0a07a18;pointer-events:none}
.gate-error.shake{animation:gateShake .42s}
@keyframes gateShake{0%,100%{transform:translateX(-50%)}18%,62%{transform:translateX(calc(-50% - 6px))}36%,82%{transform:translateX(calc(-50% + 6px))}}
.btn-spin{display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-1px;border:2px solid #25382c55;border-top-color:#25382c;border-radius:50%;animation:spin .7s linear infinite}
@media(max-width:640px){.gate-error{bottom:70px;font-size:11.5px;padding:7px 14px;max-width:calc(100vw - 40px)}}
@media(max-height:570px) and (min-width:641px){.gate-error{bottom:38px;font-size:11px;padding:6px 13px}}
@media(prefers-reduced-motion:reduce){.gate-error.shake{animation:none}.btn-spin{animation:none}}