:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#20343e;font-size:14px;background:#e7edef;--ink:#20343e;--muted:#62767f;--line:#d4dfe3;--accent:#ba4524}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:0;background:none;color:inherit}button:hover{background:#dce6e9}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c05233;outline-offset:3px}a{color:inherit}button{transition:background .15s,color .15s}button.active{color:var(--accent);background:#f5e9e3}button.primary,.primary{display:inline-block;background:#243d48;color:white;padding:13px 18px;border-radius:4px;text-align:center;text-decoration:none;border:1px solid transparent;font-weight:550}.primary:hover{background:#365967}.secondary{padding:11px 12px;border:1px solid #cbd8de;border-radius:4px;margin-top:10px;text-align:center}.full{width:100%}[hidden]{display:none!important}#app{height:100dvh;min-height:650px;display:flex;flex-direction:column;overflow:hidden}.topbar{height:84px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 28px;gap:24px;border-bottom:1px solid #ccd8de;background:#eaf0f2;z-index:5}.brand{display:flex;align-items:center;gap:18px;padding:0}.brand img{width:169px;height:49px;object-fit:contain}.brand>span{border-left:1px solid #cad4d9;padding-left:18px;font-size:20px;font-weight:650;letter-spacing:2px;text-align:left}.brand small{display:block;font-size:10px;letter-spacing:1px;font-weight:450;margin-top:5px}.brand:hover{background:none}.topbar nav{display:flex;background:#f7fafa;border:1px solid white;padding:4px;border-radius:5px;gap:3px}.topbar nav button{padding:10px 17px;font-size:13px;border-radius:3px}.topbar nav button.active{background:#243d48;color:white}.top-actions{display:flex;gap:14px;align-items:center}.top-actions button{font-size:12px}#help{width:28px;height:28px;border:1px solid #8d9fa8;border-radius:50%}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 325px;gap:0;flex:1;min-height:0}.stage{position:relative;overflow:hidden;min-width:0}#scene{display:block;width:100%;height:100%;touch-action:none;outline:none}.heading{position:absolute;left:30px;top:28px;pointer-events:none;z-index:2}.heading p{font-size:11px;letter-spacing:2px;margin:0 0 13px;color:#617781}.heading h1{font-size:clamp(25px,2.6vw,42px);font-weight:570;line-height:1.4;margin:0 0 10px;letter-spacing:-1px}.heading>span{font-size:12px;color:#62757e}.scene-tools{position:absolute;bottom:36px;left:28px;display:flex;gap:4px;padding:4px;background:#f7fafae8;border:1px solid white;border-radius:5px;z-index:3}.scene-tools button{font-size:12px;padding:8px 12px;border-radius:3px}.scene-note{position:absolute;left:30px;bottom:13px;color:#768a94;font-size:10px;pointer-events:none}#hotspots{position:absolute;inset:0;pointer-events:none;overflow:hidden}.hotspot{position:absolute;transform:translate(-50%,-100%);padding:4px 9px 4px 4px;display:flex;align-items:center;gap:7px;background:#f8fafbf2;box-shadow:0 3px 16px #1b354220;border:1px solid white;border-radius:4px;pointer-events:auto;white-space:nowrap;font-size:11px}.hotspot i{font:10px ui-monospace,monospace;padding:5px 4px;background:#263e49;color:white;border-radius:2px;font-style:normal}.hotspot.running{border-color:#d69a65}.hotspot.running i,.hotspot.selected i{background:#bc502e}.hotspot.selected{background:#fff2e8}.hotspot:hover{z-index:5;background:white}.hotspot span{max-width:120px;overflow:hidden;text-overflow:ellipsis}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#e7edefdd;z-index:8;color:#536b78}#fallback{position:absolute;inset:30% 15%;padding:20px;background:white;text-align:center;z-index:4}#fallback button{padding:10px;border:1px solid var(--line)}#panel{border-left:1px solid #d4dfe3;background:#f6f9fa;overflow:auto;scrollbar-width:thin;min-height:0}.panel-heading{padding:24px 23px 20px;border-bottom:1px solid #dde5e8}.panel-heading>span{font-size:10px;letter-spacing:1.5px;color:#687f8c}.panel-heading h2{font-size:19px;margin:7px 0 0;line-height:1.45;font-weight:600}#panel-content{padding:20px 23px 24px}.intro{font-size:13px;color:#637783;line-height:1.85;margin:0 0 17px}.gift-choice,.segmented{display:flex;gap:8px;margin:12px 0}.gift-choice button{flex:1;border:1px solid var(--line);padding:12px 4px;border-radius:3px;background:white;font-size:12px}.gift-choice button.active{border-color:#b55e41;background:#fff5ef;color:#9d4227}.gift-choice i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px}.amber{background:#e6ae38}.cyan{background:#4ca9c2}.current-step{margin-top:21px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.current-step small{font-size:10px;color:#7b8c94}.current-step h3{font-size:17px;margin:8px 0}.current-step p{font-size:12px;color:#657b86;line-height:1.8;margin:7px 0}.text-button{padding:6px 0;font-size:12px;color:var(--accent)}.section-label{display:block;font-size:11px;color:#62757e;margin-top:19px}.segmented{background:#e8eff2;padding:4px;border-radius:4px}.segmented button{font-size:12px;padding:9px 6px;flex:1}.segmented button.active{background:white;color:var(--ink);box-shadow:0 2px 4px #234a5510}.caption{font-size:11px;line-height:1.75;color:#788a94}.recover{width:100%;padding:12px;color:#a13e21;background:#fff0e7;border:1px solid #e2a38b;border-radius:4px;font-size:12px;margin:10px 0}.options{border-top:1px solid var(--line);margin-top:17px;padding-top:14px}.options summary{font-size:12px;cursor:pointer;color:#58707d}.toggle{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:14px 0;border-bottom:1px solid var(--line)}select{padding:6px;background:#fff;border:1px solid #ccd8dd;border-radius:3px;color:#425c6a;font-size:12px}.toggle input{accent-color:var(--accent)}.product-list{margin-top:0}.product-row{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 5px;width:100%;border-bottom:1px solid var(--line)}.product-row>span{font:10px ui-monospace,monospace;color:#92a2aa}.product-row>div{flex:1;min-width:0}.product-row strong{font-size:13px;font-weight:600;display:block}.product-row small{font-size:10px;color:#798b94;display:block;margin-top:5px;line-height:1.5}.product-row b{font-weight:400;color:#7c919c}.selected-product{margin:20px 0 0}.selected-product img{width:100%;height:145px;object-fit:contain;background:#edf2f4;border:1px solid #e1e9ed}.selected-product h3{font-size:17px;margin-bottom:9px}.selected-product p{font-size:12px;line-height:1.9;color:#657985}.metrics{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line);padding:20px 0;gap:18px}.metrics span{display:block;font-size:11px;color:#7b8d96}.metrics strong{font:36px ui-monospace,monospace;display:block;margin-top:9px;letter-spacing:-2px}.metrics em{font:11px sans-serif;letter-spacing:0;margin-left:5px;color:#82949c}.order-record{padding:20px 0 8px}.order-record>small{font-size:10px;color:#80939c}.order-record h3{font-size:18px;font-weight:600}.order-record dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px}.order-record dt{color:#83939b}.order-record dd{margin:0;text-align:right}.event-list{border-top:1px solid var(--line);margin-top:16px}.event-list button{display:flex;align-items:center;gap:9px;width:100%;padding:13px 5px;font-size:12px;text-align:left;border-bottom:1px solid #e3e9ec}.event-list i{width:7px;height:7px;border:1px solid #adc0ca;border-radius:50%}.event-list small{margin-left:auto;color:#8297a1;font-size:10px}.event-list .done i{background:#708f9b}.event-list .active i{background:#bd502d;border-color:#bd502d}.timeline{background:#f6f9fa;border-top:1px solid #d1dee3;padding:16px 28px 11px;z-index:4;flex-shrink:0}.playback{display:flex;align-items:center;gap:16px}.playback>button:not(.primary){font-size:12px;padding:9px 2px;white-space:nowrap}.playback .primary{min-width:90px;padding:11px 13px;font-size:13px}.speed-label{display:flex;gap:6px;align-items:center;font-size:11px;color:#6c8590}.progress-block{flex:1;min-width:0}.progress-meta{display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px}.progress-meta strong{font-weight:550}#clock{color:#849aa5;font:10px ui-monospace,monospace}input[type=range]{accent-color:#b85332}#scrubber{display:block;appearance:none;width:100%;height:4px;margin:10px 0;background:linear-gradient(to right,#bd5637 var(--progress,0%),#d7e1e5 var(--progress,0%));cursor:pointer}#scrubber::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#b85232;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #b85232}#chapters{display:flex;justify-content:space-between;margin:14px 0 10px;border-top:1px solid #e1e8ec;padding-top:12px}#chapters button{font-size:11px;padding:5px 7px;white-space:nowrap;border-radius:3px}#chapters button span{font:9px ui-monospace,monospace;color:#9daeb7;margin-right:7px}#chapters button.active span{color:#c27359}.footer-meta{display:flex;justify-content:space-between;font-size:9px;color:#8ca0ab;letter-spacing:.3px}.waiting #phase-label{color:#ad4526}dialog{border:1px solid #fff;border-radius:7px;padding:0;color:var(--ink);background:#f8fafb;width:min(1080px,94vw);max-height:92dvh;box-shadow:0 25px 120px #071e3d55}dialog::backdrop{background:#132d4366;backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:22px 27px;background:#f5f8f9}.dialog-header h2{font-size:24px;font-weight:580;margin:5px 0}.dialog-header p{font-size:10px;letter-spacing:2px;color:#778b97;margin:0}.dialog-header>button{width:36px;height:36px;font-size:27px;color:#6f838e}.product-layout{display:grid;grid-template-columns:1.25fr 1fr;min-height:540px}.diagram-side{background:#eaf0f3;display:flex;flex-direction:column;justify-content:center;padding:22px;overflow:hidden}#diagram-host{width:100%;aspect-ratio:1.1;display:grid;place-items:center;overflow:visible}#diagram-host svg{width:100%;height:100%;max-height:490px;overflow:visible}#diagram-host [data-part]{cursor:pointer;transition:filter .15s,opacity .15s}#diagram-host [data-part]:hover{filter:drop-shadow(0 0 4px #e4754077)}#diagram-host .selected-part{filter:drop-shadow(0 0 6px #cc663a99)}.explode-control{display:flex;align-items:center;gap:12px;font-size:12px;padding:16px 8px 5px}.explode-control input{min-width:0;flex:1}.explode-control output{font:11px ui-monospace,monospace;min-width:35px;text-align:right}.diagram-caption{font-size:10px;color:#7e929d;text-align:center}.product-copy{padding:26px;max-height:70dvh;overflow:auto}#product-lead{font-size:13px;line-height:1.9;margin:0 0 21px;color:#657b88}#part-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}#part-list button{display:flex;gap:9px;align-items:center;text-align:left;padding:11px 9px;border:1px solid #d4dfe5;background:white;font-size:12px;border-radius:3px}#part-list button.active{background:#f7e9e1;border-color:#d59981;color:#a64b2c}#part-list span{color:#b18f7b;font:9px ui-monospace,monospace}.part-info{margin:18px 0;padding:14px 15px;border-left:2px solid #cd6945;background:#edf2f5}.part-info h3{margin:0 0 6px;font-size:13px}.part-info p{margin:0;color:#667e8b;font-size:12px;line-height:1.8}#product-benefits h3{font-size:13px}#product-benefits ul{padding-left:17px;font-size:12px;line-height:1.9;color:#637b89;margin-bottom:23px}.product-copy>.primary,.product-copy>.secondary{width:100%;font-size:13px}.help-copy{padding:20px 30px 30px;font-size:14px;line-height:1.9;max-width:720px}.notice{font-size:11px;color:#8296a3;border-top:1px solid var(--line);padding-top:15px}.help-copy label{display:block;padding:10px 0}#help-dialog{width:min(700px,94vw)}#toast{position:fixed;bottom:180px;left:50%;transform:translate(-50%,10px);opacity:0;background:#243d48;color:white;border-radius:4px;padding:12px 18px;pointer-events:none;z-index:30;font-size:12px;transition:all .2s;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 355px}.heading{top:35px;left:38px}#panel-content{padding-inline:28px}.panel-heading{padding-inline:28px}}
@media(max-width:1050px){.topbar{padding:0 18px;gap:12px}.brand img{width:130px}.brand>span{font-size:17px;gap:10px;padding-left:10px}.topbar nav button{padding:9px 10px}.workspace{grid-template-columns:minmax(0,1fr) 292px}.heading{left:20px;top:22px}.heading h1{font-size:27px}.heading>span{font-size:10px}.scene-tools{left:18px}.scene-tools button{padding:8px 9px}.hotspot span{display:none}.top-actions{gap:8px}.timeline{padding-inline:20px}.playback{gap:11px}}
@media(max-width:760px){#app{height:auto;min-height:100dvh;overflow:visible}.topbar{height:114px;flex-wrap:wrap;padding:12px 15px 9px;gap:7px}.brand img{width:133px;height:35px}.brand>span{font-size:17px}.brand small{font-size:9px}.topbar nav{order:3;width:100%;padding:3px}.topbar nav button{flex:1;padding:8px;font-size:12px}.top-actions #quality{display:none}.top-actions{margin-left:auto}.workspace{display:flex;flex-direction:column;min-height:0}.stage{height:53dvh;min-height:360px;max-height:600px}.heading{top:16px;left:18px}.heading h1{font-size:25px;line-height:1.25;margin-bottom:7px}.heading h1 br{display:none}.heading p{font-size:9px;margin-bottom:8px}.heading>span{font-size:10px}.scene-tools{left:14px;bottom:32px;gap:1px}.scene-tools button{font-size:10px;padding:8px}.scene-note{left:18px;font-size:9px;bottom:13px}.hotspot{padding:3px;gap:0}.hotspot i{font-size:9px}.hotspot span{display:none}#panel{border-left:0;border-top:1px solid #ccdbe1;max-height:none;overflow:visible}.panel-heading{padding:18px 20px 14px}.panel-heading h2{font-size:18px}#panel-content{padding:17px 20px 24px}.intro{font-size:12px}.current-step{padding:12px 0}.timeline{order:1;padding:12px 15px;position:sticky;bottom:0}.workspace{order:0}.playback{gap:10px;flex-wrap:wrap}.playback .primary{min-width:75px;padding:10px;font-size:12px}.playback #sound{display:none}.speed-label{margin-left:auto}.progress-block{order:2;flex-basis:100%}.playback>button:not(.primary){padding:8px 4px}#chapters{overflow-x:auto;gap:9px;margin:8px 0 3px;padding-top:7px;justify-content:flex-start}#chapters button{font-size:10px;padding:5px 3px}#chapters button span{display:none}.footer-meta{display:none}.product-layout{grid-template-columns:1fr}.dialog-header{padding:16px 19px;position:sticky;top:0;z-index:2}.dialog-header h2{font-size:20px}.diagram-side{padding:12px 20px}#diagram-host{height:280px;aspect-ratio:auto}#diagram-host svg{max-height:270px}.product-copy{max-height:none;overflow:visible;padding:20px}dialog{max-height:94dvh;width:96vw}.diagram-caption{margin-bottom:0}.explode-control{padding-top:0}.selected-product img{height:170px}.metrics{padding-block:15px}.event-list button{padding:12px 4px}#toast{bottom:172px}.help-copy{padding:15px 20px;font-size:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.hotspot{padding:4px;gap:0;border-radius:50%;}.hotspot i{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;padding:0}.hotspot span{display:none}.hotspot:hover,.hotspot:focus-visible,.hotspot.selected{border-radius:5px;gap:6px;padding-right:9px}.hotspot:hover span,.hotspot:focus-visible span,.hotspot.selected span{display:block}.hotspot.selected{z-index:3}

.stage.focused .heading{opacity:0}.selected-product{margin-top:8px}.selected-product img{height:170px}

.hotspot-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hotspot-lines line{stroke:#708893;stroke-width:1;opacity:.65}.hotspot.selected{border-radius:50%;gap:0;padding:4px}.hotspot.selected span{display:none}.hotspot.selected:hover{border-radius:5px;gap:6px;padding-right:9px}.hotspot.selected:hover span{display:block}@media(max-width:760px){.hotspot i{width:22px;height:22px}.hotspot{padding:3px}.hotspot.selected{padding:3px}.hotspot:hover span,.hotspot:focus-visible span,.hotspot.selected:hover span{display:none}}