/* A single composition for the background handoff, from desktop to phone. */
body:not(.viewing-context) .deck-heading { display:none }
body.viewing-context :is(.demo-value,#demo-story,.demo-deep-dive>summary) { display:none }
body.viewing-context .demo-deep-dive { margin:0 }
body:not(.viewing-context) .deck { max-width:1344px; padding:58px 48px 0 }
.demo-value { display:flex; align-items:center; justify-content:space-between; gap:36px; margin-bottom:38px }
.deck .demo-value h1 { margin:0; max-width:850px; font-size:clamp(28px,3vw,40px); line-height:1.35; font-weight:600; letter-spacing:-.025em; text-wrap:balance }
.demo-entry { flex:none }
.start-upload { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:50px; min-width:210px; padding:13px 19px; border:1px solid #75d6fb; border-radius:10px; background:#38bdf8; color:#062434; font-size:14px; font-weight:700; box-shadow:0 4px 18px #38bdf810; transition:background .2s,box-shadow .2s,transform .2s }
.start-upload:hover { color:#062434; background:#75d7fb; border-color:#a7e8ff; box-shadow:0 8px 28px #38bdf825; transform:translateY(-2px) }
.start-upload:active { transform:translateY(0) }
.start-upload span { font-size:21px; font-weight:400; transition:transform .2s }
.start-upload:hover span { transform:translate(2px,-2px) }
.demo-story { position:relative; overflow:hidden; margin:0 0 20px; border:1px solid #304554; border-radius:20px; color:#ecf3f8; background:linear-gradient(120deg,#101d27,#0d151e 72%); box-shadow:0 24px 70px #00000022; isolation:isolate }
.demo-story-top { display:flex; align-items:center; padding:25px 32px 0 }
.demo-case { display:flex; align-items:center; gap:12px; min-width:0 }
.demo-case strong { font-size:28px; font-weight:650; letter-spacing:-.035em; line-height:1.3 }
.demo-case .headline-dot { width:8px; height:8px; flex:none; margin:0; border-radius:50%; background:#38bdf8; box-shadow:0 0 20px #38bdf830 }
.demo-fiction-note { margin-left:8px; color:#a4b3bf; font-size:11px; font-weight:400; letter-spacing:.02em }
.demo-progress { position:absolute; top:34px; right:32px; display:flex; align-items:center; gap:14px; color:#a7bac8; font:11px/1.3 ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums }
.demo-progress:before { content:''; width:76px; height:2px; background:linear-gradient(90deg,#38bdf8 var(--story-progress,0%),#2a3c4b var(--story-progress,0%)); border-radius:2px }
.demo-story[data-playback='manual'] .demo-progress:before { background:#547386 }
.demo-story-body { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:center; gap:48px; padding:32px; min-height:392px }
.demo-story-scene { position:relative; display:grid; place-items:center; min-width:0; min-height:304px; border-radius:14px; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,#1b34414d,transparent 75%),#0b141c }
.demo-story-scene:before { content:''; position:absolute; inset:0; background-image:radial-gradient(#547a8d40 .7px,transparent .7px); background-size:22px 22px; mask-image:radial-gradient(ellipse,#0009,transparent 75%); pointer-events:none }
.demo-scene { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:18px; width:100%; min-width:0; padding:30px 24px }
.demo-scene[hidden] { display:none }
.demo-scene small { display:block; color:#a2b9c8; font:500 11px/1.6 ui-monospace,SFMono-Regular,monospace; letter-spacing:.02em }
.demo-scene strong { display:block; margin:12px 0 10px; font-size:22px; font-weight:650; line-height:1.4; letter-spacing:-.025em; overflow-wrap:anywhere }
.demo-scene :is(.demo-doc,.demo-result,.demo-shared,.demo-proposal) { width:min(248px,46%); min-width:0; min-height:184px; padding:21px; border:1px solid #35505f; border-radius:12px; background:linear-gradient(145deg,#172631,#101c26); box-shadow:0 14px 28px #00000025 }
.demo-scene :is(.demo-doc,.demo-result,.demo-shared,.demo-proposal)>span { display:block; font-size:13px; line-height:1.85; color:#bacbd6 }
.demo-doc { border-top-color:#a4b5c2!important }
.demo-result { border-top-color:#38bdf8!important }
.demo-result strong,.demo-shared strong { color:#a9e5ff }
.demo-arrow { flex:none; color:#6ecdf5; font:24px ui-monospace,monospace; position:relative }
.demo-arrow:after { content:''; position:absolute; top:50%; left:0; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:#71d9ff; opacity:0; box-shadow:0 0 12px #38bdf860; pointer-events:none }
.demo-scene[data-scene='1'] { flex-direction:column; gap:26px }
.demo-scene[data-scene='1'] .demo-shared { width:min(260px,85%); min-height:0; padding:15px 20px; text-align:center; border-color:#3f7991; background:#122a37 }
.demo-scene[data-scene='1'] .demo-shared strong { margin:4px 0 }
.demo-actors { display:flex; justify-content:center; gap:20px; width:100%; padding-top:14px; position:relative }
.demo-actors:before { content:''; position:absolute; top:-26px; left:50%; height:27px; border-left:1px solid #416777 }
.demo-actors:after { content:''; position:absolute; top:0; left:25%; right:25%; border-top:1px solid #416777 }
.demo-team { display:flex; flex-direction:column; gap:9px; padding:9px; width:46%; border:1px solid #263c4b; border-radius:10px; position:relative }
.demo-team:before { content:''; position:absolute; top:-15px; left:50%; height:14px; border-left:1px solid #416777 }
.demo-team span { padding:10px 9px; border:1px solid #3a4c5c; border-radius:7px; font-size:13px; text-align:center; background:#14212c }
.demo-team .demo-agent { color:#b0e5fd; border-color:#386e86; background:#142b39 }
.demo-scene[data-scene='2'] .demo-proposal { width:min(248px,48%); border-left:2px solid #5baed0; min-height:188px }
.demo-scene[data-scene='2'] .demo-proposal:last-child { border-left-color:#dfb579 }
.demo-proposal strong { font-size:20px }
.demo-review { width:min(430px,100%); padding:23px; border:1px solid #395767; border-radius:12px; background:linear-gradient(140deg,#162733,#101e28); box-shadow:0 16px 30px #00000025 }
.demo-review>div { display:flex; gap:12px; padding:12px 0; font-size:14px; line-height:1.65; border-bottom:1px solid #2a3e4b }
.demo-review>div span { flex:none; color:#dca2ab; width:16px }
.demo-review>div+div span { color:#8bddbd }
.demo-review>strong { margin:18px 0 8px; font-size:18px; color:#b1e8d2 }
.demo-review p { margin:0; color:#b3c8d5; font-size:12px; line-height:1.8 }
.demo-scene[data-scene='4'] .demo-result { border-color:#456e65 }
.demo-scene[data-scene='4'] .demo-result strong { color:#b8e8d6 }
.demo-story-copy { max-width:470px; min-width:0 }
.demo-story-copy>span { color:#78c7e8; font:600 11px/1.5 ui-monospace,SFMono-Regular,monospace; letter-spacing:.065em }
.demo-story-copy h2 { margin:16px 0 18px; color:#eff5f9; font-size:clamp(26px,2.6vw,34px); font-weight:650; line-height:1.4; letter-spacing:-.025em; text-wrap:balance; overflow-wrap:anywhere }
.demo-story-copy p { margin:0; max-width:46ch; color:#b2c4d1; font-size:14px; line-height:1.95 }
.demo-title-line { display:block }
.demo-story-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:0 24px; border-top:1px solid #263948; background:#0b141d66 }
.demo-story-steps button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:68px; padding:14px 7px; min-width:0; position:relative; border:0; border-radius:0; background:transparent; color:#a6bac8; font-size:12px; font-weight:500; transition:background .2s,color .2s }
.demo-story-steps button:before { content:attr(data-step-number); color:#7999ac; font:10px ui-monospace,SFMono-Regular,monospace }
.demo-story-steps button:hover { color:#e8f3fa; background:#253e5026 }
.demo-story-steps button[aria-current='step'] { color:#c4edff; background:#38bdf809 }
.demo-story-steps button[aria-current='step']:before { color:#63cffa }
.demo-story-steps button:after { content:''; position:absolute; height:2px; bottom:0; left:15%; right:15%; background:#38bdf8; transform:scaleX(0); transition:transform .25s ease }
.demo-story-steps button[aria-current='step']:after { transform:scaleX(1) }
.demo-story-steps button:focus-visible { outline-offset:-5px; border-radius:7px }
.demo-deep-dive { margin:0 0 14px }
.demo-deep-dive>summary { display:flex; align-items:center; justify-content:space-between; list-style:none; padding:17px 2px; color:#a9c3d4; font-size:13px; font-weight:500; cursor:pointer; border-bottom:1px solid #293c4b; transition:color .2s,border-color .2s }
.demo-deep-dive>summary::-webkit-details-marker { display:none }
.demo-deep-dive>summary span { font-size:18px; transition:transform .2s }
.demo-deep-dive>summary:hover { color:#e1f3fd; border-color:#60859d }
.demo-deep-dive>summary:hover span { transform:translate(2px,-2px) }
.demo-deep-dive[open]>summary { margin-bottom:28px }
@keyframes context-crossing { 0% { opacity:0; transform:translateX(-9px) } 30% { opacity:1 } 75% { opacity:1 } 100% { opacity:0; transform:translateX(25px) } }
@keyframes handoff-card-enter { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@media(prefers-reduced-motion:no-preference) {
  .demo-scene>:not(.demo-arrow) { animation:handoff-card-enter .45s cubic-bezier(.2,.7,.3,1) both }
  .demo-scene>:last-child { animation-delay:.1s }
  .demo-arrow:after { animation:context-crossing .9s .2s ease-out both }
}
@media(max-width:1050px) {
  body:not(.viewing-context) .deck { padding:40px 30px 0 }
  .demo-story-body { gap:28px; padding:28px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) }
  .demo-scene { padding:24px 18px; gap:12px }
  .demo-scene :is(.demo-doc,.demo-result,.demo-shared,.demo-proposal) { padding:17px }
  .demo-scene strong { font-size:20px }
  .demo-story-copy h2 { font-size:28px }
}
@media(max-width:800px) {
  .demo-value { gap:22px; margin-bottom:28px }
  .deck .demo-value h1 { font-size:30px }
  .start-upload { min-width:185px }
  .demo-story-body { grid-template-columns:1fr; gap:26px; min-height:0 }
  .demo-story-copy { order:-1; max-width:600px; min-height:170px }
  .demo-story-copy p { max-width:60ch }
  .demo-story-scene { min-height:280px }
  .demo-progress:before { width:45px }
  .demo-fiction-note { max-width:230px }
}
@media(max-width:600px) {
  body:not(.viewing-context) .deck { padding:32px 18px 0 }
  .demo-value { flex-direction:column; align-items:stretch; gap:22px; margin-bottom:26px }
  .deck .demo-value h1 { font-size:clamp(26px,6.5vw,30px); line-height:1.35; max-width:100% }
  .demo-entry { width:100% }
  .start-upload { width:100%; min-height:50px }
  .demo-story { border-radius:15px; display:flex; flex-direction:column }
  .demo-story-top { padding:21px 20px 0; order:0 }
  .demo-case { flex-wrap:wrap; gap:9px }
  .demo-case strong { font-size:25px }
  .demo-fiction-note { flex-basis:100%; margin:0; max-width:none; font-size:11px }
  .demo-progress { position:static; order:1; justify-content:flex-end; padding:15px 20px 12px }
  .demo-progress:before { width:65px }
  .demo-story-steps { order:2; padding:0 6px; border-bottom:1px solid #263948 }
  .demo-story-steps button { min-height:65px; flex-direction:column; gap:5px; font-size:11px; line-height:1.4; padding:10px 2px }
  .story-step-label { text-wrap:balance; max-width:5em }
  .demo-story-steps button[data-mobile-label] .story-step-label { font-size:0 }
  .demo-story-steps button[data-mobile-label] .story-step-label:before { content:attr(data-mobile-label); font-size:11px }
  .demo-story-body { order:3; display:flex; flex-direction:column; align-items:stretch; padding:24px 18px; gap:24px }
  .demo-story-copy { order:-1; min-height:0 }
  .demo-story-copy>span { font-size:11px }
  .demo-story-copy h2 { font-size:26px; line-height:1.45; margin:12px 0 14px }
  .demo-story-copy p { font-size:14px; line-height:1.9 }
  .demo-story-scene { min-height:0; overflow:hidden }
  .demo-scene { padding:20px 14px; gap:13px }
  .demo-scene small { font-size:11px }
  .demo-scene strong { font-size:21px }
  .demo-scene :is(.demo-doc,.demo-result,.demo-shared,.demo-proposal)>span { font-size:13px }
  .demo-scene[data-scene='0'],.demo-scene[data-scene='2'],.demo-scene[data-scene='4'] { flex-direction:column }
  .demo-scene[data-scene='0'] :is(.demo-doc,.demo-result),.demo-scene[data-scene='2'] .demo-proposal,.demo-scene[data-scene='4'] :is(.demo-shared,.demo-result) { width:100%; min-height:0; padding:17px 19px }
  .demo-arrow { transform:rotate(90deg); line-height:1 }
  .demo-team { padding:7px; gap:7px }
  .demo-team span { padding:11px 5px; font-size:12px; overflow-wrap:anywhere }
  .demo-actors { gap:12px }
  .demo-review { padding:19px }
  .demo-review>div { font-size:14px }
  .demo-review>strong { font-size:18px }
  .demo-deep-dive>summary { font-size:12px; min-height:52px }
}