.cinematic-demo{display:block;padding:35px}.cinema-header{display:grid;grid-template-columns:1.3fr .7fr;gap:45px;align-items:end;margin-bottom:30px}.cinema-header .mono{font-size:9px;letter-spacing:1px}.cinema-header h3{font-size:32px;margin:15px 0}.cinema-header p{font-size:13px;color:#ad9abb;line-height:1.8;margin:0;max-width:550px}.cinema-selector label{font-size:9px;letter-spacing:1px}.cinema-selector select{font-size:12px;margin-top:12px}.workflow-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:65px 120px;padding:20px 25px 25px;isolation:isolate;background:radial-gradient(ellipse at center,#8e44ed18,transparent 65%)}.workflow-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.workflow-wires path{stroke:#a877ef33;stroke-width:1.5;fill:none}.workflow-wires .wire-energy{stroke:#c69aff;stroke-width:2;stroke-dasharray:10 260;stroke-dashoffset:0;opacity:0;filter:drop-shadow(0 0 5px #bf7aff)}.workflow-stage[data-phase=running] .wire-energy{opacity:1;animation:wire-transit 3s linear infinite}.workflow-hub{position:absolute;left:50%;top:50%;width:82px;height:82px;translate:-50% -50%;display:grid;place-content:center;text-align:center;z-index:2;background:#150b25;border:1px solid #bd8fff77;border-radius:25px;box-shadow:0 0 45px #a05aff22}.workflow-hub>span{color:#d6aaff;font-size:39px;line-height:1}.workflow-hub small{font:6px monospace;color:#ae8bd0;letter-spacing:1px;margin-top:6px}.hub-rings{position:absolute;inset:-10px;border:1px dashed #b795ff55;border-radius:50%;animation:portrait-light-turn 30s linear infinite}.workflow-stage[data-phase=running] .hub-rings{animation-duration:5s}.workflow-stage[data-phase=review] .workflow-hub{box-shadow:0 0 35px #c797ff55}.flow-station{position:relative;border:1px solid #b795ff25;border-radius:21px;background:linear-gradient(140deg,#1a1127,#0d0914);overflow:hidden;min-height:245px;box-shadow:0 8px 30px #0002;transition:border-color .5s,box-shadow .5s,transform .5s}.flow-station.active{border-color:#d0a4ff;box-shadow:0 0 32px #9a50ff25;transform:translateY(-3px)}.flow-station.completed{border-color:#aa7ad466}.station-heading{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid #b795ff19;color:#a58abe}.station-heading svg{width:18px;height:18px;color:#c49bff}.station-heading .mono{font-size:8px;letter-spacing:1px}.station-led{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#634c7b}.active .station-led{background:#e4c5ff;box-shadow:0 0 13px #bd85ff;animation:client-pulse 1.4s infinite}.completed .station-led{background:#b795ff}.mock-chat-header{display:flex;gap:9px;align-items:center;padding:15px 18px 9px}.mock-avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,#7c46b5,#342341);color:#e1cdf4;font:10px monospace}.mock-chat-header strong{font-size:11px;font-weight:500}.mock-chat-header small{display:block;font-size:8px;color:#8e7c9e;margin-top:4px}.chat-time{margin-left:auto;font:8px monospace;color:#7c698f}.mock-chat-space{padding:8px 18px 15px;min-height:140px}.flow-incoming{font-size:12px;line-height:1.8;padding:12px 14px;background:#30213f;color:#e4d5f0;border-radius:0 13px 13px 13px;opacity:.15;filter:blur(4px);transform:translateY(8px);transition:opacity .5s,filter .5s,transform .5s}.station-inbox.received .flow-incoming{opacity:1;filter:none;transform:none;animation:message-arrive .6s cubic-bezier(.2,.8,.3,1)}.mock-receipt{display:block;font-size:8px;color:#b99dce;text-align:right;margin-top:8px;min-height:10px}.flow-typing{display:none;gap:4px;padding:12px 0}.flow-typing i{width:5px;height:5px;border-radius:50%;background:#c19de7;animation:typing-dot .9s infinite}.flow-typing i:nth-child(2){animation-delay:.15s}.flow-typing i:nth-child(3){animation-delay:.3s}.station-inbox.inbox-is-typing .flow-typing{display:flex}.station-inbox.inbox-is-typing .flow-incoming{display:none}.data-card,.team-ticket,.reply-review{padding:20px;opacity:.2;filter:blur(2px);transition:opacity .5s,filter .5s}.flow-station.revealed :is(.data-card,.team-ticket,.reply-review){opacity:1;filter:none;animation:message-arrive .55s ease}.data-ticket{font-size:8px;color:#bc95e5;letter-spacing:1px}.data-row{display:flex;gap:16px;justify-content:space-between;border-bottom:1px solid #b795ff1c;padding:10px 0;font-size:10px;line-height:1.6}.data-row>span{color:#897598}.data-row strong{color:#d3bee8;font-weight:400;text-align:right}.data-save{display:flex;gap:7px;color:#a88abe;font-size:8px;line-height:1.6;margin-top:12px}.data-save>span:first-child{color:#d4adff}.task-tag,.review-tag{font:7px 'IBM Plex Mono',monospace;letter-spacing:.8px;padding:5px 8px;border:1px solid #b795ff44;border-radius:20px;color:#c3a2e5}.team-ticket h4{font-size:17px;font-weight:500;line-height:1.35;margin:16px 0 10px;letter-spacing:-.5px}.team-ticket>p{font-size:10px;color:#9f8bad;line-height:1.7}.task-footer{display:flex;align-items:center;gap:10px;border-top:1px solid #b795ff22;padding-top:14px;margin-top:16px;font-size:9px;color:#b19bc5}.team-avatars{display:flex;padding-right:5px}.team-avatars i{font:7px monospace;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#613a82;border:2px solid #1a1127;color:#dec8f3}.team-avatars i+i{margin-left:-6px;background:#42355f}.task-check{margin-left:auto;color:#c59eec}.reply-review p{font-size:12px;line-height:1.85;color:#d9c5e8;margin:17px 0 12px}.reply-review button{width:100%;padding:10px 12px;background:#b795ff25;border:1px solid #c79bff77;border-radius:12px;color:#e6d3ff;cursor:pointer;font-size:10px;line-height:1.6;box-shadow:0 0 20px #ab70ff17}.reply-review button:hover{background:#b795ff44}.reply-review button[hidden],#scene-sent[hidden]{display:none}#scene-sent{font-size:9px;color:#c9a5ef;line-height:1.8}.cinema-timeline{display:flex;align-items:center;gap:17px;padding:20px 24px;margin-top:15px;border:1px solid #b795ff22;border-radius:15px;background:#0b0712}.cinema-timeline>.mono{font-size:10px;letter-spacing:1px;white-space:nowrap;color:#c19be9}.scene-progress{width:110px;height:4px;flex-shrink:0;border-radius:20px;background:#b795ff19;overflow:hidden}.scene-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8652cf,#e1b8ff);transition:width .5s}.cinema-timeline #demo-status{border:0;min-height:0;padding:0;margin:0;font-size:10px;color:#bda5d2;letter-spacing:0;line-height:1.8}.cinema-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:24px}.cinema-bottom .lab-actions{margin:0;flex-shrink:0}.cinema-bottom .lab-small{max-width:430px;color:#887499;margin:0;font-size:9px!important}@keyframes wire-transit{to{stroke-dashoffset:-1080}}@keyframes message-arrive{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:1000px){.workflow-stage{gap:55px 85px;padding:15px 0}.workflow-hub{width:65px;height:65px;border-radius:20px}.workflow-hub>span{font-size:30px}.workflow-hub small{font-size:5px}.cinema-header{gap:25px}.cinema-bottom{align-items:flex-start;flex-direction:column;gap:18px}.cinema-bottom .lab-small{max-width:none}.cinema-timeline{flex-wrap:wrap}.cinema-timeline #demo-status{flex:1;min-width:180px}}@media(max-width:600px){.cinematic-demo{padding:23px 16px}.cinema-header{grid-template-columns:1fr;gap:20px}.cinema-header h3{font-size:26px}.workflow-stage{grid-template-columns:1fr;gap:24px;padding:0 0 0 18px;background:linear-gradient(90deg,#ba82ff33 0 1px,transparent 1px);background-size:1px calc(100% - 60px);background-repeat:no-repeat;background-position:4px 30px}.workflow-wires,.workflow-hub{display:none}.flow-station{min-height:0;border-radius:18px;overflow:visible}.flow-station:before{content:'';position:absolute;left:-19px;top:26px;width:9px;height:9px;border-radius:50%;background:#342045;border:1px solid #b795ff66}.flow-station.active:before{background:#d8b4ff;box-shadow:0 0 15px #bb85ff}.station-heading{padding:13px 16px}.mock-chat-space{min-height:120px}.mock-chat-header{padding:13px 16px 6px}.data-card,.team-ticket,.reply-review{padding:17px}.cinema-timeline{padding:15px;gap:12px}.cinema-timeline #demo-status{flex-basis:100%;min-width:0}.scene-progress{flex:1}.cinema-bottom .lab-actions{width:100%}.reply-review p,.flow-incoming{font-size:11px}.cinema-selector select{font-size:12px}.workflow-stage[data-phase=idle] .station-data .data-card,.workflow-stage[data-phase=idle] .station-team .team-ticket,.workflow-stage[data-phase=idle] .station-reply .reply-review{max-height:130px;overflow:hidden}.flow-station.revealed :is(.data-card,.team-ticket,.reply-review){max-height:none!important}.cinema-header>div>.mono{font-size:8px}}
.cinema-toolbar{margin:0 0 28px}.cinema-toolbar .lab-actions{margin:0}.cinema-bottom .lab-small{max-width:none}
@media(max-width:600px){.workflow-stage .flow-station:not(.revealed) :is(.data-card,.team-ticket,.reply-review){display:none}.workflow-stage .flow-station:not(.revealed){min-height:0}.workflow-stage .station-inbox .mock-chat-space{min-height:0}.workflow-stage[data-phase=idle] .flow-incoming{display:none}.workflow-stage[data-phase=idle] .mock-chat-space{padding:0}.cinema-toolbar{margin-bottom:22px}}