@font-face{font-family:LocalSystem;src:local("Microsoft YaHei"),local("PingFang SC");font-display:swap}
:root{font-family:Inter,"Segoe UI",LocalSystem,-apple-system,BlinkMacSystemFont,sans-serif;color:#243333;background:#f4f6f5;font-synthesis:none;--teal:#145e59;--muted:#7e8c89;--border:#dfe5e2;--surface:#fff;--sidebar:256px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button{border:0;background:transparent;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid #2c8980;outline-offset:4px}button:disabled{opacity:.4;cursor:wait}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.app{height:100dvh;min-height:420px;display:grid;grid-template-rows:88px minmax(0,1fr) 118px;background:#f6f8f7}.header{display:flex;align-items:center;padding:0 34px;gap:15px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.98);z-index:10}.brand-mark{width:42px;height:46px;display:grid;place-items:center;color:var(--teal)}.brand-mark svg{width:35px;height:35px;stroke-width:1.4}.eyebrow{margin:0;color:var(--muted);font-size:9px;letter-spacing:2px;font-weight:650}.brand-copy .eyebrow{margin-bottom:7px;font-size:9px;letter-spacing:2.3px}h1{font-size:19px;line-height:1.25;margin:0;font-weight:650;letter-spacing:.3px}.header-divider{margin:0 12px;color:#bac6c2;font-weight:350}.header-subtitle{font-weight:400;font-size:15px;color:#70817c}.header-actions{margin-left:auto;display:flex;align-items:center;gap:25px}.offline-badge{display:flex;align-items:center;gap:8px;font-size:11px;color:#7c8b86}.offline-badge i{width:5px;height:5px;border-radius:50%;background:#438c76}.icon-button{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:7px;color:#62736c;transition:background .18s,color .18s}.icon-button:hover{background:#eaf0ed;color:var(--teal)}.workspace{display:flex;min-height:0;position:relative}.components{width:var(--sidebar);flex:none;display:flex;flex-direction:column;padding:29px 20px 20px 28px;background:#fafbf9;border-right:1px solid var(--border);z-index:9;overflow:auto}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading .eyebrow{font-size:8px;letter-spacing:1.9px}.panel-heading h2{font-size:17px;font-weight:600;margin:9px 0 0;letter-spacing:.5px}.panel-heading h2 span{font-size:11px;margin-left:9px;color:#8e9c97;font-weight:450}.panel-intro{font-size:10px;line-height:1.8;color:#929f99;margin:13px 0 21px}.component-list{display:flex;flex-direction:column;gap:5px}.component-item{display:flex;gap:11px;align-items:center;text-align:left;padding:11px 8px 11px 5px;min-height:53px;border-radius:7px;border:1px solid transparent;transition:background .18s,border-color .18s}.component-item:hover{background:#edf2ef}.component-item.active{background:#e7f1ec;border-color:#d5e6de}.component-number{font-variant-numeric:tabular-nums;color:#73958a;font-size:12px;letter-spacing:.3px;min-width:25px;border-right:1px solid #e0e7e2;line-height:24px}.component-item.active .component-number{color:var(--teal);border-color:#c5dad1}.component-names{display:flex;flex-direction:column;gap:4px}.component-zh{font-size:12px;font-weight:500;letter-spacing:.3px}.component-en{font-size:9px;color:#98a29d;line-height:1.25}.component-item.active .component-en{color:#77968c}.component-foot{margin-top:auto;padding-top:28px}.tiny-rule{display:block;width:24px;height:1px;background:#bbcec4;margin-bottom:12px}.component-foot p{font-size:9px;line-height:1.9;color:#95a39b;margin:0}.text-button{font-size:10px;color:var(--teal);padding:9px 0;text-align:left}.panel-close{display:none}.viewer{position:relative;flex:1;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 47%,#fff 0%,#f9fbfa 55%,#f0f4f1 100%)}#scene{display:block;width:100%;height:100%;touch-action:none;outline:0}.viewer-top{position:absolute;top:23px;left:27px;right:27px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;z-index:3}.viewer-top>*{pointer-events:auto}.stage-tabs{display:flex;background:#fff;border:1px solid #e2e8e3;box-shadow:0 3px 14px #243e3110;border-radius:8px;padding:4px;gap:2px}.stage-tabs button{padding:8px 16px;border-radius:5px;font-size:11px;color:#809087;transition:background .2s,color .2s}.stage-tabs button.active{background:#eaf1ed;color:var(--teal);font-weight:550}.stage-tabs button:hover{color:var(--teal)}.secondary-button{display:flex;align-items:center;gap:7px;background:#ffffffdf;border:1px solid #dfe7e1;border-radius:6px;font-size:10px;color:#7b8c82;padding:9px 11px;box-shadow:0 2px 9px #29433308}.secondary-button svg{width:15px;height:15px}.secondary-button.active{color:#3c6d5b;background:#f8fcf9}.scene-caption{position:absolute;left:32px;top:97px;display:flex;align-items:flex-start;gap:10px;pointer-events:none}.caption-rule{height:27px;width:2px;background:#77a594;margin-top:1px}.scene-caption>div:last-child{display:flex;flex-direction:column;gap:6px}.caption-title{font-size:9px;color:#7a9689;letter-spacing:2px;font-weight:600}.caption-detail{font-size:10px;color:#a1afa6;letter-spacing:.4px}.view-toolbar{position:absolute;left:50%;bottom:43px;transform:translateX(-50%);display:flex;align-items:center;white-space:nowrap;gap:3px;padding:5px 7px;border:1px solid #e0e7e1;background:#fffffff2;box-shadow:0 4px 18px #25463209;border-radius:8px;z-index:3}.view-label{font-size:10px;color:#9aa89f;margin:0 8px 0 5px}.view-toolbar button{min-width:40px;height:30px;padding:0 9px;border-radius:5px;color:#7d8e83;font-size:10px;display:grid;place-items:center}.view-toolbar button svg{width:16px;height:16px}.view-toolbar button.active,.view-toolbar button[aria-pressed=true]{background:#e9f2ec;color:#286751}.view-toolbar button:hover{background:#f0f5f1;color:var(--teal)}.toolbar-separator{height:16px;width:1px;background:#e2e8e3;margin:0 5px}.gesture-hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:9px;color:#9baaa0;pointer-events:none}.gesture-hint b{font-weight:400;margin:0 7px;color:#bdc9c0}.touch-hint{display:none}.mobile-components{display:none}.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.model-label{position:absolute;top:0;left:0;transform:translate(-50%,-50%);color:#71867b;background:#ffffffd9;border:1px solid #d9e4dc;box-shadow:0 2px 5px #21472d05;border-radius:5px;display:flex;align-items:center;gap:7px;padding:5px 8px;white-space:nowrap;opacity:1;transition:opacity .15s,border-color .15s;pointer-events:auto;cursor:pointer;max-width:180px}.model-label .label-id{font-size:10px;font-weight:700;color:#286950;line-height:18px;border-right:1px solid #dce6de;padding-right:6px}.model-label .label-text{font-size:9px}.model-label.active{border-color:#3f9275;background:#edf8f0;color:#28543e}.label-dot{position:absolute;width:4px;height:4px;margin:-2px;border-radius:50%;background:#6c9a80}.label-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.label-lines path{fill:none;stroke:#9ab5a6;stroke-width:.8;opacity:.7;stroke-dasharray:2 2}.loading{position:absolute;inset:0;background:#f6f9f6fa;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .3s}.loading.hidden{opacity:0;pointer-events:none}.loading h2{font-size:14px;font-weight:500;margin:22px 0 8px;color:#426655}.loading p{font-size:11px;color:#98aaa0;margin:0}.loader-icon{width:34px;height:34px;border:1px solid #d3e4d8;border-top:2px solid #397759;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:absolute;bottom:91px;left:50%;transform:translateX(-50%) translateY(8px);background:#284f3fef;color:white;padding:9px 15px;font-size:11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:20;max-width:90%;text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.playback{display:flex;align-items:center;padding:0 32px;gap:34px;background:#fff;border-top:1px solid var(--border);z-index:11}.playback-main{display:flex;align-items:center;gap:13px;flex:none;min-width:234px}.play-button{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--teal);box-shadow:0 4px 10px #1b69551c}.play-button svg{height:20px;width:20px;fill:currentColor;stroke-width:0}.play-button:hover{background:#1a7165}.playback-phase{display:flex;flex-direction:column;gap:6px}.playback-phase span{font-size:12px;font-weight:550;letter-spacing:.2px}.playback-phase small{font-size:9px;color:#9ba69e;letter-spacing:.2px}.restart-button{width:27px;margin-left:-5px}.restart-button svg{width:16px;height:16px}.timeline-wrap{flex:1;position:relative;min-width:100px;align-self:center}.timeline-meta{display:flex;justify-content:space-between;align-items:center;font-size:9px;gap:13px;color:#a0ada4;font-variant-numeric:tabular-nums;margin-bottom:9px}.timeline-meta>span:first-child{color:#4c7963;min-width:43px}.timeline-stages{display:flex;flex:1;font-size:8px;color:#a9b5ac;justify-content:space-around}.timeline-stages span:nth-child(1){flex:3}.timeline-stages span:nth-child(2){flex:4}.timeline-stages span:nth-child(3){flex:3}.timeline-stages span:nth-child(4){flex:4}.timeline-stages span:nth-child(5){flex:1;text-align:right}.timeline{display:block;appearance:none;-webkit-appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(to right,#4e8870 var(--progress,56.4%),#e2e9e3 var(--progress,56.4%));cursor:pointer;margin:0;padding:0;outline:none}.timeline::-webkit-slider-thumb{-webkit-appearance:none;height:12px;width:12px;border-radius:50%;border:3px solid #fff;background:#33745a;box-shadow:0 0 0 1px #82aa94,0 1px 3px #254a3122}.timeline::-moz-range-thumb{height:8px;width:8px;border:2px solid #fff;border-radius:50%;background:#33745a;box-shadow:0 0 0 1px #82aa94}.timeline-marks{position:relative;height:9px;pointer-events:none}.timeline-marks i{position:absolute;top:5px;width:1px;height:3px;background:#c6d3ca}.timeline-marks i:nth-child(1){left:20%}.timeline-marks i:nth-child(2){left:46.667%}.timeline-marks i:nth-child(3){left:66.667%}.timeline-marks i:nth-child(4){left:93.333%}.playback-options{display:flex;align-items:center;gap:21px;flex:none}.loop-button{display:flex;align-items:center;gap:5px;color:#a0ada4;font-size:10px;padding:8px 0}.loop-button svg{width:16px;height:16px}.loop-button.active{color:#3d795e}.speed-control{display:flex;gap:2px;border:1px solid #e4eae5;border-radius:6px;padding:3px}.speed-control button{font-size:10px;min-width:36px;padding:7px 6px;border-radius:3px;color:#8e9c92}.speed-control button.active{background:#edf3ee;color:#29654d}.drawer-backdrop{position:absolute;inset:0;background:#112b2080;z-index:8}.drawer-backdrop[hidden]{display:none}noscript{position:fixed;inset:0;background:white;padding:40px;z-index:100}
@media(min-width:1600px){:root{--sidebar:286px}.components{padding-left:36px;padding-right:26px}.component-item{min-height:61px}.component-zh{font-size:13px}.component-en{font-size:10px}.header{padding-left:40px}.app{grid-template-rows:96px minmax(0,1fr) 124px}.playback{gap:45px}.playback-main{min-width:265px}.panel-heading h2{font-size:19px}}
@media(max-width:1100px){:root{--sidebar:218px}.header{padding:0 22px}.header-actions{gap:14px}.components{padding:24px 14px 18px 19px}.component-en{font-size:8px}.component-zh{font-size:11px}.component-item{gap:7px;padding-left:4px}.playback{gap:21px;padding:0 22px}.playback-main{min-width:180px;gap:9px}.playback-phase small{font-size:8px}.playback-options{gap:13px}.loop-button span{display:none}.timeline-stages{display:none}.viewer-top{left:20px;right:20px}.stage-tabs button{padding:8px 12px}.view-toolbar button{min-width:34px}.view-label{margin-right:5px}}
@media(max-width:800px){.app{grid-template-rows:74px minmax(0,1fr) 132px}.header{padding:0 18px;gap:9px}.brand-mark{width:31px}.brand-mark svg{width:29px;height:29px}.brand-copy .eyebrow{font-size:7px;letter-spacing:1.5px;margin-bottom:6px}h1{font-size:15px}.header-subtitle{font-size:12px}.header-divider{margin:0 7px}.offline-badge{display:none}.header-actions{gap:0}.components{position:absolute;left:0;top:0;bottom:0;width:256px;transform:translateX(-100%);transition:transform .23s;box-shadow:8px 0 35px #18372a15;padding:24px}.components.open{transform:translateX(0)}.panel-close{display:grid;font-size:24px;width:28px;height:28px}.component-zh{font-size:12px}.component-en{font-size:9px}.component-item{padding:11px 5px;gap:10px}.mobile-components{display:flex;font-size:10px;padding:8px}.mobile-components svg{width:14px;height:14px}.viewer-top{top:16px;left:17px;right:17px;gap:8px}.stage-tabs{padding:3px;margin-left:auto}.stage-tabs button{padding:7px 11px;font-size:10px}.viewer-toggles .secondary-button{padding:8px}.viewer-toggles .secondary-button span{display:none}.scene-caption{left:21px;top:78px}.caption-detail{font-size:9px}.caption-title{font-size:8px;letter-spacing:1.7px}.playback{padding:16px 20px 13px;gap:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;row-gap:13px}.playback-main{min-width:0;gap:10px}.play-button{width:36px;height:36px}.playback-phase{gap:4px}.playback-phase span{font-size:11px}.playback-phase small{font-size:8px}.restart-button{width:24px;margin-left:0}.playback-options{grid-column:2;grid-row:1;gap:13px}.speed-control{padding:2px}.speed-control button{padding:6px 4px;min-width:31px;font-size:9px}.loop-button{padding:6px 0}.timeline-wrap{grid-column:1/-1;grid-row:2;width:100%;align-self:start}.timeline-meta{margin-bottom:7px;font-size:8px}.timeline-stages{display:flex;font-size:7px}.timeline-marks{height:5px}.timeline-marks i{height:2px;top:4px}.view-toolbar{bottom:39px;padding:4px 6px}.view-toolbar button{height:29px;min-width:34px;padding:0 7px;font-size:10px}.view-label{font-size:9px;margin-left:4px;margin-right:5px}.gesture-hint{bottom:15px;font-size:8px}.desktop-hint{display:none}.touch-hint{display:inline}.model-label{padding:4px 6px;gap:5px;max-width:140px}.model-label .label-text{font-size:8px}.model-label .label-id{font-size:9px;line-height:15px;padding-right:5px}.toast{bottom:87px}}
@media(max-width:480px){.app{grid-template-rows:69px minmax(0,1fr) 130px}.header{padding:0 12px;gap:7px}.brand-copy .eyebrow{font-size:6px;letter-spacing:1.3px}h1{font-size:13px;letter-spacing:.1px}.header-subtitle{font-size:10px}.header-divider{margin:0 5px}.brand-mark{width:28px}.brand-mark svg{width:26px}.header-actions .icon-button{width:30px}.header-actions svg{width:17px;height:17px}.viewer-top{left:12px;right:12px;gap:6px;top:12px}.mobile-components{font-size:9px;padding:8px 7px;gap:4px}.stage-tabs button{font-size:9px;padding:7px 8px}.viewer-toggles .secondary-button{padding:8px 6px}.scene-caption{left:16px;top:69px}.caption-title{font-size:7px;letter-spacing:1.3px}.caption-detail{font-size:8px}.caption-rule{height:25px}.playback{padding:14px 14px 11px;row-gap:12px}.playback-main{gap:7px}.playback-phase small{display:none}.playback-phase span{font-size:10px}.play-button{width:34px;height:34px}.playback-options{gap:9px}.loop-button svg{width:14px;height:14px}.speed-control button{min-width:28px;font-size:9px;padding:6px 3px}.restart-button{width:20px}.restart-button svg{width:14px}.view-toolbar{bottom:37px;gap:1px;padding:4px}.view-toolbar button{min-width:30px;padding:0 7px}.view-label{margin:0 6px}.toolbar-separator{margin:0 4px}.model-label .label-text{display:none}.model-label{padding:3px 5px;gap:0}.model-label .label-id{padding-right:0;border-right:0;font-size:9px}.model-label.active .label-text{display:block;padding-left:5px;max-width:96px;overflow:hidden;text-overflow:ellipsis}.model-label.active .label-id{padding-right:5px;border-right:1px solid #dce6de}}
@media(max-height:650px) and (min-width:801px){.app{grid-template-rows:70px minmax(0,1fr) 91px}.components{padding-top:19px}.panel-intro{margin:8px 0 8px}.component-item{min-height:39px;padding-top:6px;padding-bottom:6px}.component-names{gap:2px}.component-foot{padding-top:12px}.component-foot p{font-size:8px}.viewer-top{top:15px}.scene-caption{top:76px}.view-toolbar{bottom:33px}.gesture-hint{bottom:12px}}
@media(orientation:landscape) and (max-height:500px){.app{grid-template-rows:55px minmax(0,1fr) 76px}.header .eyebrow{display:none}.header-subtitle{font-size:11px}.brand-mark svg{height:25px}.playback{display:flex;padding:10px 18px;gap:20px}.playback-phase{display:none}.playback-main{min-width:78px}.timeline-wrap{flex:1}.playback-options{gap:10px}.timeline-stages{display:none}.viewer-top{top:10px}.scene-caption{display:none}.view-toolbar{bottom:25px}.gesture-hint{bottom:7px}.components{position:absolute;width:235px;transform:translateX(-100%)}.components.open{transform:translateX(0)}.mobile-components{display:flex}.component-foot{display:none}.component-list{gap:1px}.component-item{min-height:35px;padding:5px}.component-en{font-size:7px}.component-zh{font-size:10px}.panel-intro{margin:6px 0}.panel-heading h2{font-size:14px}.panel-close{display:grid}.model-label .label-text{display:none}}
/* Keep short landscape displays within the real viewport height. */
@media(max-height:500px){.app{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.loader-icon{animation-duration:2s}}