/* 四個模擬畫面只在可見時啟動，靜止狀態仍保留完整內容。 */
.stage-card{padding:23px}.stage-card h3{margin:12px 0 9px}.stage-card p{margin:0}.stage-graphic{margin:14px 0 11px;padding:0;min-height:185px;overflow:hidden}.stage-note{font-size:11px}.demo-caption{display:block;line-height:1.5}

.icp-radar{background:#111;color:#FDF0D5}.radar-field{height:151px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,transparent 0 23%,#0ABAB555 23.4% 24%,transparent 24.4% 45%,#0ABAB544 45.4% 46%,transparent 46.4%),linear-gradient(#0abab527 1px,transparent 1px),linear-gradient(90deg,#0abab527 1px,transparent 1px),#142326;background-size:auto,23px 23px,23px 23px,auto}.radar-sweep{position:absolute;width:280px;height:280px;left:50%;top:50%;margin:-140px;background:conic-gradient(from 0deg,transparent 0 277deg,#0ABAB500 285deg,#0ABAB58a 347deg,#0ABAB5 360deg);border-radius:50%;transform:rotate(0deg)}.visual-live .radar-sweep{animation:radar-turn 3.2s linear infinite}.radar-node{position:absolute;z-index:1;background:#111;border:1px solid #0ABAB5;color:#fff;box-shadow:0 0 9px #0ABAB5;padding:5px 8px;font-size:11px;font-weight:900}.radar-node:before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;background:#0ABAB5;border-radius:50%;box-shadow:0 0 8px #0ABAB5}.radar-node small{display:block;color:#0ABAB5;font-size:8px;letter-spacing:.1em;margin-left:12px}.radar-node:nth-of-type(1){left:11%;top:22%}.radar-node:nth-of-type(2){right:10%;top:12%}.radar-node:nth-of-type(3){right:24%;bottom:13%}.visual-live .radar-node{animation:node-glow 3.2s ease-in-out infinite}.visual-live .radar-node:nth-of-type(2){animation-delay:1s}.visual-live .radar-node:nth-of-type(3){animation-delay:2s}.radar-terminal{height:34px;display:flex;align-items:center;gap:8px;padding:0 12px;border-top:1px solid #0ABAB5;color:#0ABAB5;font:700 11px/1.2 monospace;white-space:nowrap}.radar-terminal span{overflow:hidden}.visual-live .radar-terminal span{animation:terminal-type 2s steps(22,end) .4s both}.visual-live .radar-terminal b{animation:blink .8s step-end infinite}

.script-stream{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:13px;background:#111}.script-beat{position:relative;min-width:0;min-height:159px;padding:11px;background:linear-gradient(#FDF0D5,#FDF0D5) padding-box,conic-gradient(from var(--border-angle),#111 0 62%,#0ABAB5 75%,#fff 80%,#111 91%) border-box;border:2px solid transparent;box-shadow:3px 3px 0 #0ABAB5;color:#111}.visual-live .script-beat{animation:border-loop 3s linear infinite}.script-beat b{display:flex;justify-content:space-between;gap:4px;padding-bottom:7px;border-bottom:1px solid #111;font:900 11px/1.2 monospace}.script-beat small{font-size:9px}.script-beat span{display:block;margin-top:10px;font-size:12px;line-height:1.5;font-weight:800}.visual-live .script-beat span{animation:script-type 1s steps(24,end) both}.visual-live .script-beat:nth-child(2) span{animation-delay:1.15s}.visual-live .script-beat:nth-child(3) span{animation-delay:2.3s}.visual-live .script-beat span:after{content:"▌";color:#0ABAB5;animation:blink .7s step-end infinite}

.viewfinder{position:relative;height:188px;background:radial-gradient(ellipse at 48% 44%,#203e40,#111 76%);color:#fff;box-shadow:inset 0 0 30px #0ABAB577}.viewfinder:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#0ABAB536 44%,transparent 56%);transform:translateX(-100%)}.visual-live .viewfinder:before{animation:light-pass 5s ease-in-out infinite}.viewfinder-top,.viewfinder-bottom{position:absolute;z-index:2;left:11px;right:11px;display:flex;justify-content:space-between;align-items:center;font:900 10px/1 monospace;letter-spacing:.07em}.viewfinder-top{top:10px}.viewfinder-top span{display:flex;align-items:center;gap:5px}.viewfinder-top b{font-size:10px;color:#FDF0D5}.viewfinder-top strong{color:#0ABAB5}.viewfinder-bottom{bottom:10px;font-size:9px;color:#FDF0D5}.viewfinder-bottom span{color:#0ABAB5}.rec-dot{display:inline-block;width:10px;height:10px;margin-right:3px}.focus-grid{position:absolute;inset:28px 24px 25px;background:linear-gradient(90deg,transparent 33.2%,#ffffff30 33.4% 33.6%,transparent 33.8% 66.4%,#ffffff30 66.6% 66.8%,transparent 67%),linear-gradient(transparent 33.2%,#ffffff30 33.4% 33.6%,transparent 33.8% 66.4%,#ffffff30 66.6% 66.8%,transparent 67%)}.focus-grid>i{position:absolute;width:19px;height:19px;border-color:#0ABAB5;border-style:solid}.focus-grid>i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}.focus-grid>i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}.focus-grid>i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}.focus-grid>i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0}.focus-target{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);color:#0ABAB5;font:400 30px/1 monospace}.audio-wave{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);height:48px;display:flex;align-items:center;gap:4px}.audio-wave span{width:5px;height:25%;background:#0ABAB5;box-shadow:0 0 6px #0ABAB5}.visual-live .audio-wave span{animation:wave .7s ease-in-out infinite alternate}.visual-live .audio-wave span:nth-child(3n){animation-delay:-.35s}.visual-live .audio-wave span:nth-child(3n+1){animation-delay:-.15s}

.delivery-stream{height:188px;background:#e6f9f4}.delivery-head{height:31px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#111;color:#fff;font:900 10px/1 monospace;letter-spacing:.06em}.delivery-head i{width:7px;height:7px;border-radius:50%;background:#0ABAB5;box-shadow:0 0 8px #0ABAB5}.delivery-flow{height:155px;display:grid;align-content:center;gap:8px;padding:12px;background:linear-gradient(#0abab521 1px,transparent 1px),linear-gradient(90deg,#0abab521 1px,transparent 1px);background-size:24px 24px}.delivery-file{display:flex;align-items:center;gap:9px;border:2px solid #111;padding:6px 9px;background:#fff;box-shadow:3px 3px 0 #111;font:850 11px/1.2 monospace}.delivery-file:nth-child(2){background:#FDF0D5}.delivery-file b{display:grid;place-items:center;width:24px;height:24px;flex:none;background:#0ABAB5;border:1px solid #111}.delivery-file span{flex:1}.delivery-file i{display:block;width:34%;height:7px;border:1px solid #111;background:linear-gradient(90deg,#0ABAB5 0 0) left/0% 100% no-repeat,#fff}.visual-live .delivery-file{animation:export-pop .5s both}.visual-live .delivery-file:nth-child(2){animation-delay:.5s}.visual-live .delivery-file:nth-child(3){animation-delay:1s}.visual-live .delivery-file i{animation:export-fill 2s linear forwards}.visual-live .delivery-file:nth-child(2) i{animation-delay:.5s}.visual-live .delivery-file:nth-child(3) i{animation-delay:1s}

@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes border-loop{to{--border-angle:360deg}}@keyframes radar-turn{to{transform:rotate(360deg)}}@keyframes node-glow{0%,40%,100%{opacity:.55;box-shadow:0 0 4px #0ABAB5}15%,25%{opacity:1;box-shadow:0 0 19px #0ABAB5}}@keyframes terminal-type{from{max-width:0}to{max-width:30ch}}@keyframes script-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes light-pass{50%,100%{transform:translateX(130%)}}@keyframes wave{to{height:95%}}@keyframes export-pop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}@keyframes export-fill{to{background-size:100% 100%}}

@media(max-width:900px){.engine-idle{display:none}}
@media(max-width:620px){.stage-card{padding:18px}.stage-graphic{min-height:0}.icp-radar,.viewfinder,.delivery-stream{height:auto;min-height:188px}.radar-field{height:155px}.radar-terminal{font-size:9px;padding-inline:6px;gap:3px}.script-stream{grid-template-columns:1fr;padding:10px}.script-beat{min-height:0;padding:10px}.script-beat span{margin-top:6px}.delivery-file{font-size:10px}.viewfinder-top,.viewfinder-bottom{font-size:8px}.viewfinder-top b{font-size:8px}}
@media(prefers-reduced-motion:reduce){.icp-radar *,.script-stream *,.viewfinder *,.delivery-stream *,.viewfinder:before{animation:none!important}.radar-terminal span{max-width:none!important}.script-beat span{clip-path:none!important}}
/* 固定手機文字版面，以裁切揭示取代寬度動畫，避免打字時反覆換行。 */
@media(max-width:900px){
  .radar-terminal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;height:auto;min-height:50px;padding:7px 8px;font-size:10px;line-height:1.5;white-space:normal}
  .radar-terminal span{grid-row:2;grid-column:1;display:block;width:fit-content;min-width:0;max-width:100%;margin:0;overflow-wrap:anywhere}
  .radar-terminal b{grid-row:2;grid-column:2;align-self:end}
  .visual-live .radar-terminal span{animation:terminal-reveal 2s steps(22,end) .4s both}
}
@keyframes terminal-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}