:root{--navy: #07162d;--tech: #12345a;--cyan: #20c5f7;--green: #55e6c1;--red: #ff5b62;--white: #f4f8ff;--dim: #9db2cf;--glass: rgba(9, 27, 52, .74);--glass-strong: rgba(9, 27, 52, .9);--line: rgba(120, 190, 255, .18);--font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", system-ui, sans-serif;--nav-w: 156px;--panel-w: 372px}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--navy);color:var(--white);font-family:var(--font)}body{overflow:hidden;-webkit-font-smoothing:antialiased}button,a,input{font-family:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.scene-canvas{width:100%;height:100%;touch-action:none}.glass,.side-nav,.info-panel,.transport,.timeline,.sound-panel,.subtitles span,.end-card,.top-controls .icon-btn,.sim-badge{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.sheet-handle{display:none}.panel-scroll{overflow-y:auto;padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:rgba(120,190,255,.3) transparent}.panel-kicker{display:flex;justify-content:space-between;color:var(--cyan);font-weight:700;font-size:14px;letter-spacing:.04em}.panel-kicker span{color:var(--dim);font-weight:400}.panel-title{margin:0;font-size:24px;line-height:1.35;font-weight:900}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;color:var(--cyan);background:#20c5f71f;border:1px solid rgba(32,197,247,.35)}.panel-sec h3{margin:0 0 8px;font-size:13px;letter-spacing:.08em;color:var(--dim);font-weight:700}.panel-sec p{margin:0;font-size:15px;line-height:1.7;color:#dbe6f5}.panel-sec.risk{padding:12px 14px;border-radius:14px;background:#ff5b6214;border:1px solid rgba(255,91,98,.25)}.panel-sec.risk h3{color:#ff9ea2}.values{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}.values li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6;color:#dbe6f5}.values li:before{content:"";position:absolute;left:2px;top:7px;width:10px;height:10px;border-radius:3px;background:var(--green);box-shadow:0 0 8px #55e6c199}.scope{margin:0;font-size:12.5px;line-height:1.6;color:var(--dim);padding:10px 12px;border-left:3px solid rgba(32,197,247,.5);background:#ffffff08;border-radius:0 10px 10px 0}.note{margin:6px 0;font-size:13px;line-height:1.6;color:var(--dim)}.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:12px;background:#00000040;border:1px solid var(--line);margin-bottom:10px}.seg-btn{padding:9px 6px;border:0;border-radius:9px;background:transparent;color:var(--dim);font-size:14px;font-weight:500;transition:all .2s}.seg-btn.on{background:var(--cyan);color:var(--navy);font-weight:700}.seg-btn.on.ok{background:var(--green)}.seg-btn.on.bad{background:var(--red);color:#fff}.status{display:flex;align-items:center;gap:8px;font-size:14px;padding:9px 12px;border-radius:10px;background:#ffffff0d;margin-bottom:10px}.status .dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:none}.status-busy .dot{background:var(--cyan);animation:blink .8s infinite}.status-ok{background:#55e6c11f;color:var(--green)}.status-ok .dot{background:var(--green)}.status-bad{background:#ff5b621f;color:#ff9ea2}.status-bad .dot{background:var(--red)}@keyframes blink{50%{opacity:.3}}.btn-row{display:flex;flex-wrap:wrap;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid rgba(32,197,247,.45);background:#12345ad9;color:var(--white);font-size:14.5px;font-weight:700;text-decoration:none;transition:all .2s}.btn:hover:not(:disabled){background:#20c5f733}.btn.primary{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}.btn.primary:hover:not(:disabled){background:#5ad6ff}.btn.ghost{background:transparent;border-color:var(--line);color:#c9d7ea}.btn.link{background:transparent;border:none;color:var(--cyan);padding:4px 0;justify-content:flex-start}.btn.full{width:100%}.btn.lg{padding:14px 22px;font-size:16px;border-radius:14px}.pin-dots{display:flex;gap:8px;margin:6px 0 12px}.pin-dots span{width:32px;height:38px;border-radius:8px;border:1px solid var(--line);background:#ffffff0a;position:relative}.pin-dots span.on{border-color:var(--cyan)}.pin-dots span.on:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:10px;height:10px;border-radius:50%;background:var(--white)}.dragscan{position:relative;height:112px;border-radius:14px;border:1px dashed rgba(32,197,247,.4);background:#0003;margin-bottom:10px;touch-action:none}.dragscan-hint{position:absolute;left:0;right:0;top:8px;text-align:center;font-size:12.5px;color:var(--dim)}.dragscan-phone{position:absolute;left:18px;top:28px;width:70px;height:74px;border-radius:14px;border:2px solid var(--cyan);background:#0e2440;color:var(--cyan);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:700;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2;transition:box-shadow .2s;cursor:grab}.dragscan-phone.dragging{cursor:grabbing;box-shadow:0 0 24px #20c5f799;transition:none}.dragscan-qr{position:absolute;right:22px;top:28px;width:74px;height:74px;border-radius:10px;background:#fff;display:grid;place-items:center;color:var(--green);transition:all .2s}.dragscan-qr.over{box-shadow:0 0 0 4px var(--cyan),0 0 26px #20c5f7b3}.dragscan-qr.busy{box-shadow:0 0 0 3px var(--cyan);animation:blink .6s infinite}.dragscan.done .dragscan-qr{background:#55e6c126}.mini-qr{width:58px;height:58px;background:linear-gradient(var(--navy),var(--navy)) 0 0/18px 18px no-repeat,linear-gradient(var(--navy),var(--navy)) 100% 0/18px 18px no-repeat,linear-gradient(var(--navy),var(--navy)) 0 100%/18px 18px no-repeat,repeating-conic-gradient(var(--navy) 0 25%,#fff 0 50%) 50% 50%/8px 8px}.intro-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.intro-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:12px 10px;border-radius:14px;border:1px solid var(--line);background:#12345a99;color:var(--white);text-align:left;transition:all .2s}.intro-card:hover{border-color:var(--cyan);transform:translateY(-2px)}.intro-card .n{color:var(--cyan);font-weight:900;font-size:13px}.intro-card .t{font-weight:700;font-size:15px}.intro-card .d{font-size:11.5px;color:var(--dim)}.layers{display:flex;flex-direction:column;gap:8px}.layer{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#ffffff08;color:var(--dim);transition:all .4s}.layer svg,.layer .t-logo{grid-row:span 2}.layer .t{font-weight:700;font-size:15px}.layer .p{font-size:12.5px}.layer.on{color:var(--white)}.layer.on.c1{border-color:var(--cyan);box-shadow:inset 0 0 20px #20c5f726}.layer.on.c1 svg{color:var(--cyan)}.layer.on.c2{border-color:#6fa8ff;box-shadow:inset 0 0 20px #6fa8ff26}.layer.on.c2 svg{color:#6fa8ff}.layer.on.c3{border-color:var(--green);box-shadow:inset 0 0 20px #55e6c126}.layer.on.c3 svg{color:var(--green)}.hotspot{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid rgba(32,197,247,.7);background:#07162dd1;color:var(--white);font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 0 18px #20c5f773;animation:hsIn .5s cubic-bezier(.2,1.4,.4,1);transition:transform .2s}.hotspot:hover{transform:scale(1.08)}.hotspot-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:var(--navy);font-size:12px;font-weight:900;position:relative}.hotspot-num:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;border:2px solid var(--cyan);animation:ping 1.8s infinite}@keyframes ping{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}@keyframes hsIn{0%{opacity:0;transform:scale(.6)}}.intro-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#12345a8c,#07162df0 70%);z-index:60;padding:20px}.intro-box{width:min(620px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}.intro-kicker{margin:10px 0 0;color:var(--cyan);letter-spacing:.12em;font-size:13px;text-transform:uppercase}.intro-box h1{margin:0;white-space:nowrap;font-size:clamp(30px,8vw,60px);font-weight:900;letter-spacing:.02em;background:linear-gradient(180deg,#fff,#9fdcff);-webkit-background-clip:text;background-clip:text;color:transparent}.intro-sub{margin:0;color:#c9d7ea;font-size:17px;line-height:1.7}.intro-facts{list-style:none;display:flex;gap:10px;padding:0;margin:4px 0;flex-wrap:wrap;justify-content:center}.intro-facts li{padding:10px 16px;border-radius:14px;background:#12345a99;border:1px solid var(--line);font-size:14px;color:#c9d7ea}.intro-facts b{color:var(--cyan);font-size:22px;margin-right:6px}.loader{width:min(360px,100%);display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--dim)}.loader-bar{height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden}.loader-bar span{display:block;height:100%;background:var(--cyan)}.intro-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.intro-note{margin:4px 0 0;font-size:12.5px;color:var(--dim)}.fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}.fallback-note{margin:0;color:var(--dim);font-size:14px;text-align:center}.fallback-stage{display:flex;gap:20px;align-items:flex-end;width:100%;justify-content:center}.fb-monitor{flex:1;max-width:760px;padding:14px;border-radius:18px;background:#141e2b;box-shadow:0 20px 60px #00000080}.fb-monitor canvas{width:100%;display:block;border-radius:6px}.fb-phone{width:120px;padding:8px;border-radius:18px;background:#10161f}.fb-phone canvas{width:100%;display:block;border-radius:10px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app{position:relative;width:100%;height:100%;overflow:hidden;display:grid;gap:12px;padding:0 14px 14px;grid-template-columns:var(--nav-w) minmax(0,1fr) var(--panel-w);grid-template-rows:68px minmax(0,1fr) auto;grid-template-areas:"top top top" "nav stage side" "bottom bottom side";background:radial-gradient(ellipse at 40% 30%,#0e2a4a,var(--navy) 70%)}.app:not(.is-started){grid-template-areas:"top top top" "stage stage stage" "stage stage stage"}.top-bar{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;z-index:30}.status-center{flex:1 1 auto;min-width:0;max-width:460px;margin:0 auto;text-align:center;padding:7px 14px;border-radius:999px;font-size:13px;color:#c9d7ea;background:#07162d99;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .25s}.status-center.is-toast{color:var(--navy);background:var(--green);border-color:var(--green);font-weight:700}.brand{display:flex;align-items:center;gap:10px;flex:none}.brand-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,var(--cyan),#1478c8);color:var(--navy);box-shadow:0 0 24px #20c5f759}.brand-logo{height:36px}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-text strong{font-size:20px;letter-spacing:.02em}.brand-text span{font-size:13px;color:var(--dim)}.top-controls{display:flex;gap:8px;align-items:center;flex:none}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:42px;height:42px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--white);text-decoration:none;font-size:14px;transition:background .2s,border-color .2s,color .2s}.icon-btn:hover:not(:disabled){border-color:#20c5f799;background:#12345ae6}.icon-btn.on{color:var(--cyan);border-color:#20c5f780}.icon-btn.big{min-width:48px;height:48px;border-radius:50%;background:var(--cyan);color:var(--navy);border:none}.icon-btn.big:hover{background:#5ad6ff}.icon-btn.sm{min-width:32px;height:32px;padding:0}.stage-area{grid-area:stage;position:relative;min-height:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--navy)}.app:not(.is-started) .stage-area{border:0;border-radius:0;margin:0 -14px -14px}.side-nav{grid-area:nav;align-self:start;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}.nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--dim);font-size:15px;text-align:left;transition:all .2s}.nav-item:hover{color:var(--white);background:#20c5f714}.nav-item.visited{color:#c9d7ea}.nav-item.active{color:var(--navy);background:var(--cyan);font-weight:700;box-shadow:0 0 20px #20c5f759}.right-col{grid-area:side;min-height:0;display:flex;flex-direction:column;gap:12px}.sound-panel{flex:none;padding:14px 16px;border-radius:18px;background:var(--glass-strong);border:1px solid rgba(32,197,247,.35);display:flex;flex-direction:column;gap:10px}.sound-head{display:flex;justify-content:space-between;align-items:center}.slider-row{display:grid;grid-template-columns:92px 1fr 40px;align-items:center;gap:8px;font-size:14px}.slider-row em{font-style:normal;color:var(--cyan);text-align:right;font-variant-numeric:tabular-nums}.slider-row input{accent-color:var(--cyan);width:100%}.check-row{display:flex;gap:8px;align-items:center;font-size:14px}.check-row input{accent-color:var(--cyan);width:16px;height:16px}.info-panel{flex:1 1 auto;min-height:0;border-radius:20px;background:var(--glass);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}.bottom-bar{grid-area:bottom;display:flex;flex-direction:column;gap:8px;min-width:0}.subtitles{min-height:46px;display:flex;align-items:center;justify-content:center;padding:6px 16px;border-radius:14px;background:#040c1ab3;border:1px solid var(--line)}.subtitles span{font-size:18px;line-height:1.45;text-align:center;font-weight:500;animation:subIn .25s ease}.subtitles em{font-style:normal;font-size:13px;color:#9db2cf80}@keyframes subIn{0%{opacity:0;transform:translateY(4px)}}.timeline-wrap{display:flex;flex-direction:column;gap:6px;padding:10px 14px 8px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}.transport{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.tp-group{display:flex;align-items:center;gap:4px}.transport .icon-btn:not(.big){border-radius:50%;background:transparent;border-color:transparent}.time-label{font-variant-numeric:tabular-nums;font-size:14px;color:#c9d7ea;letter-spacing:.04em}.speed{display:inline-flex;padding:3px;border-radius:999px;background:#00000040;border:1px solid var(--line);margin-right:6px}.speed button{border:0;background:transparent;color:var(--dim);font-size:13px;font-weight:700;padding:6px 10px;border-radius:999px;font-variant-numeric:tabular-nums}.speed button.on{background:var(--cyan);color:var(--navy)}.pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);font-size:13.5px;font-weight:700}.pill.on{color:var(--navy);background:var(--green);border-color:var(--green)}.scrub{position:relative;height:26px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline-offset:4px;border-radius:6px}.scrub-track{position:relative;width:100%;height:8px;border-radius:4px;background:#ffffff1f}.scrub-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#1890d8,var(--cyan))}.scrub-tick{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:#07162de6;z-index:2}.scrub-thumb{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;border:3px solid var(--cyan);box-shadow:0 0 12px #20c5f7b3;z-index:3;transition:transform .15s}.scrub:hover .scrub-thumb,.scrub.dragging .scrub-thumb{transform:scale(1.25)}.scrub.dragging .scrub-fill,.scrub.dragging .scrub-thumb{transition:none}.scrub-labels{list-style:none;margin:0;padding:0;display:flex}.scrub-labels li{flex-basis:0;min-width:0}.scrub-labels button{width:100%;border:0;background:transparent;color:var(--dim);font-size:12.5px;text-align:left;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:6px}.scrub-labels button:hover{color:var(--white)}.scrub-labels button.done{color:var(--green)}.scrub-labels button.cur{color:var(--white);font-weight:700}.end-block{margin-top:6px;padding:14px;border-radius:14px;border:1px solid var(--line);background:#ffffff08;display:flex;flex-direction:column;gap:8px;transition:all .4s}.end-block.show{border-color:#20c5f799;background:#20c5f714;box-shadow:0 0 24px #20c5f726}.end-block strong{font-size:22px;font-weight:900}.end-block p{margin:0;font-size:14px;color:#dbe6f5;line-height:1.6}.end-motto{color:var(--cyan);font-weight:700;font-size:14.5px}@media (max-width: 1180px){:root{--panel-w: 330px;--nav-w: 132px}.nav-item{font-size:14px;padding:10px}.status-center{display:none}}@media (max-width: 820px){.hide-sm{display:none!important}.app,.app:not(.is-started){display:flex;flex-direction:column;gap:8px;padding:0 8px}.top-bar{flex:none;height:56px}.brand-mark{width:34px;height:34px;border-radius:10px}.brand-text strong{font-size:17px}.brand-text span{font-size:12px}.icon-btn{min-width:42px;height:42px}.side-nav{display:none}.stage-area{flex:1 1 auto;order:2;min-height:140px;border-radius:16px}.app:not(.is-started) .stage-area{margin:0 -8px}.bottom-bar{flex:none;gap:6px;order:3}.subtitles{min-height:40px;padding:4px 10px}.subtitles span{font-size:15px}.timeline-wrap{padding:8px 10px 6px}.transport{gap:4px}.transport .icon-btn{min-width:38px;height:38px}.transport .icon-btn.big{min-width:44px;height:44px}.time-label{font-size:12px;order:3}.speed button{padding:5px 7px;font-size:12px}.pill{height:32px;padding:0 9px;font-size:12px}.pill span{display:none}.scrub-labels button{font-size:10.5px;padding:2px 1px}.right-col{flex:none;order:4;gap:8px;height:52px;transition:height .35s ease;margin:0 -8px}.app.sheet-open .right-col{height:42vh}.sound-panel{margin:0 8px}.info-panel{border-radius:18px 18px 0 0;border-bottom:0}.sheet-handle{display:flex;align-items:center;justify-content:space-between;gap:10px;height:52px;flex:none;padding:0 18px;border:0;background:transparent;color:var(--white);font-size:15px;font-weight:700;position:relative}.sheet-handle:before{content:"";position:absolute;top:6px;left:50%;transform:translate(-50%);width:40px;height:4px;border-radius:2px;background:#ffffff4d}.sheet-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-panel .chev{transition:transform .3s;flex:none}.app.sheet-open .info-panel .chev{transform:rotate(180deg)}.panel-scroll{padding:4px 18px 24px}.app:not(.sheet-open) .panel-scroll{display:none}.panel-title{font-size:21px}.btn{padding:12px 14px}.hotspot{font-size:12px;padding:4px 9px 4px 4px}.hotspot-num{width:22px;height:22px;font-size:11px}.fb-phone{width:70px}}.t-logo{display:inline-block;object-fit:contain;flex:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.12));transition:opacity .4s,filter .4s}.t-logo.dim{opacity:.35;filter:grayscale(.8)}.brand-logo{height:42px;width:auto}.nav-item.active .t-logo{filter:drop-shadow(0 0 4px rgba(7,22,45,.6))}.end-head{display:flex;align-items:center;gap:10px}.layer{grid-template-columns:36px 1fr}@media (max-width: 820px){.brand-logo{height:36px}}.panel-sec.scene-card{padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#ffc14524,#ff7a8a1f);border:1px solid rgba(255,193,69,.35)}.panel-sec.scene-card h3{color:#ffd27a}.layer.on.c4{border-color:#a98bff;box-shadow:inset 0 0 20px #a98bff2e}