/* Social execution: native platform details, one continuous piece of work. */
.motion-canvas[data-scene=social] { background: radial-gradient(ellipse at 12% 80%,#d8cdf0 0,transparent 52%),radial-gradient(ellipse at 100% 10%,#d2e6ff 0,transparent 54%),#e7edf5; }
.si-hub { position: absolute; left: 24px; top: 46px; width: 952px; height: 480px; border-radius: 12px; border: 1px solid #b6c1d1; box-shadow: 0 19px 40px #24355728; overflow: hidden; background: #f5f7fa; color: #172330; }
.si-chrome { height: 34px; padding: 0 13px; background: #dfe7f2; display: flex; gap: 5px; align-items: end; }
.si-chrome .traffic-lights { padding: 0 14px 0 0; gap: 5px; }
.si-browser-tab { display: flex; align-items: center; gap: 7px; height: 28px; width: 173px; padding: 0 10px; border-radius: 7px 7px 0 0; font-size: 10px; color: #6a7889; }
.si-browser-tab img { width: 13px; height: 13px; }
.si-browser-tab b { font-size: 14px; font-weight: 400; margin-left: auto; color: #8c96a3; }
.si-plus { align-self: center; margin-left: 10px; font-size: 20px; color: #64778b; }
.si-address { display: flex; align-items: center; gap: 14px; height: 29px; background: white; border-bottom: 1px solid #e0e6ed; padding: 0 13px; color: #7f8b98; font-size: 15px; }
.si-address > div { position: relative; display: flex; align-items: center; flex: 1; border-radius: 20px; background: #f1f4f8; height: 21px; padding: 0 10px; font-size: 9px; }
.si-address b { margin-left: auto; font-size: 13px; font-weight: 400; }
.si-url { position: absolute; top: 4px; left: 29px; opacity: 0; }
.si-workspace { padding: 0 16px; }
.si-workspace-heading { height: 58px; display: flex; align-items: center; justify-content: space-between; }
.si-workspace-heading small { display: block; font-size: 7px; font-weight: 650; letter-spacing: 1.5px; color: #94a1b1; margin-bottom: 4px; }
.si-workspace-heading h4 { font-size: 23px; line-height: 1.1; letter-spacing: -.8px; }
.si-connected { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #7f938c; }
.si-connected i { width: 5px; height: 5px; border-radius: 50%; background: #55a47c; }
.si-columns { display: grid; grid-template-columns: 216px 1fr 264px; gap: 14px; height: 310px; }
.si-discover { position: relative; min-width: 0; }
.si-column-label { display: flex; align-items: center; gap: 7px; height: 27px; color: #5c526c; }
.si-column-label img { width: 13px; height: 13px; }
.si-column-label strong { font-size: 10px; font-weight: 600; }
.si-column-label > span { margin-left: auto; font-size: 13px; }
.si-feed-mask { height: 283px; overflow: hidden; border-radius: 8px; mask-image: linear-gradient(180deg,transparent,black 4%,black 91%,transparent); }
.si-feed-track { display: flex; flex-direction: column; gap: 16px; }
.si-creator { flex-shrink: 0; position: relative; height: 264px; overflow: hidden; border-radius: 9px; background: white; border: 1px solid #fff; box-shadow: 0 3px 10px #27384e14; }
.si-portrait { position: relative; height: 239px; overflow: hidden; isolation: isolate; }
.si-portrait-marcus { background: #839cd0; }
.si-portrait-priya { background: #db9c7b; }
.si-portrait-elena { background: #a0ae8b; }
.si-portrait::after { content: ''; position: absolute; inset: 120px 0 0; background: linear-gradient(transparent,#17112582); pointer-events: none; }
.si-avatar { display: block; flex-shrink: 0; background-image: url('assets/meetings/meeting-guests-atlas.png'); background-size: 400% 300%; background-position: 0 var(--avatar-row); background-repeat: no-repeat; image-rendering: pixelated; }
.motion-canvas .si-creator-photo { position: absolute; width: 239px; height: 239px; left: calc(50% - 119.5px); top: 0; }
.si-reel-count { position: absolute; top: 9px; right: 9px; padding: 3px 6px; border: 1px solid #ffffff90; border-radius: 5px; background: #ffffffd9; color: #3b383d; font-size: 9px; font-weight: 600; }
.si-reel-icon { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 22px; height: 22px; background: #fff; border-radius: 7px; }
.si-reel-icon img { width: 15px; height: 15px; }
.si-reel-cover { position: absolute; bottom: 79px; left: 11px; right: 11px; font-size: 20px; font-weight: 750; line-height: 1.06; letter-spacing: -.6px; color: white; text-shadow: 0 1px 5px #0008; }
.si-creator-caption { position: absolute; bottom: 25px; left: 0; right: 0; padding: 10px 11px 8px; background: #ffffffed; color: #263032; }
.si-creator-caption strong { display: block; font-size: 11px; font-weight: 700; }
.si-creator-caption > span { display: block; font-size: 8px; color: #7d8790; margin-top: 2px; }
.si-creator-actions { display: flex; justify-content: space-between; align-items: center; height: 25px; padding: 0 10px; color: #574d5b; font-size: 14px; }
.si-shortlisted { position: absolute; z-index: 3; bottom: 28px; left: 8px; right: 8px; background: #292334; color: white; border: 1px solid #d8c9ef; border-radius: 7px; padding: 10px; font-size: 9px; box-shadow: 0 6px 20px #28184730; opacity: 0; }
.si-platform-card { position: relative; border: 1px solid #dce3ec; border-radius: 9px; background: #fff; overflow: hidden; box-shadow: 0 5px 16px #17314b08; }
.si-platform-heading { height: 35px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border-bottom: 1px solid #edf0f4; }
.si-platform-heading img { width: 17px; height: 17px; }
.si-platform-heading strong { font-size: 11px; font-weight: 650; }
.si-platform-heading > span { margin-left: auto; font-size: 10px; color: #8c9aaa; }
.si-person { display: flex; align-items: center; gap: 9px; height: 58px; padding: 0 14px; border-bottom: 1px solid #edf0f4; }
.si-person > .si-avatar { width: 34px; height: 34px; border-radius: 50%; }
.si-person strong { display: block; font-size: 12px; font-weight: 650; }
.si-person strong span { font-size: 9px; color: #9ba6b1; font-weight: 400; }
.si-person small { display: block; font-size: 8px; color: #93a0ad; margin-top: 3px; }
.si-person-status { width: 6px; height: 6px; margin-left: auto; background: #73aa84; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px #73aa8440; }
.si-discovery-note { position: absolute; top: 102px; left: 18px; right: 18px; }
.si-note-label { font-size: 7px; letter-spacing: 1.2px; color: #7f73a1; font-weight: 600; }
.si-discovery-note h4 { font-size: 26px; line-height: 1.04; margin-top: 9px; color: #25213a; }
.si-discovery-note > p { font-size: 10px; line-height: 1.5; margin-top: 9px; color: #8c8a9a; }
.si-mini-reel { display: flex; align-items: center; height: 42px; gap: 8px; padding: 5px; background: #f4f1f8; border: 1px solid #e9e1f0; border-radius: 6px; margin-top: 12px; }
.si-mini-reel > .si-avatar { width: 30px; height: 30px; border-radius: 4px; }
.si-mini-reel > div { display: grid; grid-template-columns: 10px 1fr; gap: 3px 4px; align-items: center; }
.si-mini-reel > div img { width: 10px; height: 10px; }
.si-mini-reel strong { font-size: 9px; font-weight: 600; }
.si-mini-reel > div span { grid-column: 1 / -1; font-size: 8px; color: #9991a7; }
.si-mini-reel > b { margin-left: auto; margin-right: 4px; color: #8973a4; }
.si-research-state { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 7px; color: #a5a1b0; }
.si-research-state svg { width: 12px; height: 12px; }
.si-context { position: absolute; top: 99px; left: 14px; right: 14px; height: 36px; display: flex; gap: 8px; align-items: center; padding: 0 9px; border: 1px solid #e2eaf3; background: #f7fafe; border-radius: 6px; opacity: 0; }
.si-context > img { width: 19px; height: 19px; }
.si-context small { display: block; font-size: 6px; color: #9aa8bc; letter-spacing: .7px; margin-bottom: 2px; }
.si-context strong { display: block; font-size: 9px; font-weight: 550; color: #586980; }
.si-context > span { margin-left: auto; color: #8197b1; font-size: 12px; }
.si-composer { position: absolute; top: 156px; left: 14px; right: 14px; height: 129px; border: 1px solid #7aa8d5; border-radius: 6px; box-shadow: 0 0 0 3px #0a66c20b; background: #fff; overflow: hidden; opacity: 0; }
.si-compose-copy { height: 95px; padding: 12px 12px 4px; font-size: 12px; line-height: 1.5; color: #364960; }
.si-message-line { display: block; white-space: nowrap; }
.si-compose-tools { height: 33px; border-top: 1px solid #e9eff5; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; color: #9aabbb; font-size: 12px; }
.si-send { padding: 4px 11px; border-radius: 18px; background: #0a66c2; color: white; font-size: 10px; font-weight: 600; }
.si-send > span { margin-left: 5px; font-size: 8px; }
.si-sent-message { position: absolute; top: 143px; right: 14px; left: 14px; opacity: 0; transform-origin: right bottom; }
.si-sent-message > div { padding: 9px 12px; color: #28547c; background: #e5f1fd; border: 1px solid #d5e7f8; border-radius: 10px 10px 2px 10px; font-size: 12px; line-height: 1.4; }
.si-sent-message small { display: block; text-align: right; margin-top: 5px; color: #9daebe; font-size: 8px; }
.si-sent-message small span { color: #2474bc; }
.si-message-receipt { position: absolute; bottom: 14px; left: 21px; right: 14px; display: flex; align-items: center; gap: 9px; color: #91a4b4; font-size: 9px; line-height: 1.5; opacity: 0; }
.si-message-receipt svg { color: #629780; width: 17px; height: 17px; }
.si-message-receipt b { color: #718ba3; font-weight: 500; }
.si-brief { position: absolute; bottom: 10px; left: 12px; right: 12px; display: flex; align-items: center; gap: 9px; height: 45px; padding: 6px 9px; border: 1px solid #ddd7ea; background: #f8f6fc; border-radius: 6px; opacity: 0; }
.si-brief > span { display: grid; place-items: center; width: 28px; height: 30px; border: 1px solid #e7e2ee; border-radius: 6px; background: #fff; }
.si-brief svg { width: 18px; height: 18px; color: #80768f; }
.si-brief small { display: block; font-size: 6px; letter-spacing: .9px; color: #a89cb7; margin-bottom: 2px; }
.si-brief strong { display: block; font-size: 11px; font-weight: 600; color: #595066; }
.si-brief p { font-size: 7px; color: #a49baf; margin-top: 3px; }
.si-brief > b { margin-left: auto; color: #9988ad; font-weight: 400; }
.si-right-column { display: grid; grid-template-rows: 162px 136px; gap: 12px; }
.si-x .si-platform-heading { height: 28px; }
.si-x .si-platform-heading img { width: 13px; height: 13px; }
.si-x .si-platform-heading strong { font-size: 9px; }
.si-x-account { display: flex; align-items: center; gap: 7px; padding: 7px 12px 0; height: 37px; }
.si-x-account > span:first-child { width: 25px; height: 25px; border-radius: 50%; color: white; background: #18191e; display: grid; place-items: center; }
.si-x-account svg { width: 16px; height: 16px; }
.si-x-account strong { display: block; font-size: 10px; font-weight: 650; }
.si-x-account strong b { color: #1d9bf0; font-size: 7px; }
.si-x-account small { display: block; font-size: 7px; color: #99a2ad; }
.si-x-account > .si-x-posted { margin-left: auto; font-size: 8px; color: #489571; opacity: 0; }
.si-x-preview { padding: 7px 13px 0; }
.si-x-preview p { font-size: 10px; line-height: 1.5; color: #495365; }
.si-x-preview b { font-weight: 550; color: #252d3d; }
.si-x-link { display: flex; justify-content: space-between; align-items: center; border-radius: 4px; height: 22px; padding: 0 7px; margin-top: 5px; background: #f0eef7; color: #554368; font-size: 9px; font-weight: 650; }
.si-x-link > span { font-size: 7px; color: #978ba4; font-weight: 400; }
.si-x-actions { display: flex; justify-content: space-between; position: absolute; left: 15px; right: 15px; bottom: 4px; font-size: 10px; color: #a6afb9; }
.si-x-composer { position: absolute; top: 66px; left: 12px; right: 12px; height: 83px; background: #fff; opacity: 0; }
.si-post-line { display: block; font-size: 10px; line-height: 1.5; color: #495365; white-space: nowrap; }
.si-x-composer > div { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e9edf2; padding-top: 5px; margin-top: 6px; font-size: 11px; color: #5894c2; }
.si-post-button { padding: 4px 15px; border-radius: 20px; background: #11141b; color: #fff; font-size: 10px; }
.si-reddit .si-platform-heading { height: 31px; }
.si-reddit .si-platform-heading img { width: 15px; height: 15px; }
.si-reddit .si-platform-heading strong { font-size: 10px; }
.si-reddit .si-platform-heading > span { border-radius: 10px; padding: 2px 7px; color: #4778b6; border: 1px solid #c7d6e7; font-size: 8px; }
.si-reddit-mask { overflow: hidden; height: 76px; padding: 0 12px; }
.si-reddit-question { height: 94px; padding-top: 9px; }
.si-reddit-question > small, .si-reddit-comment > small { color: #a79c95; font-size: 7px; }
.si-reddit-question h4 { font-size: 13px; line-height: 1.2; margin-top: 4px; letter-spacing: -.3px; color: #4a3c36; }
.si-reddit-question p { font-size: 8px; margin-top: 5px; color: #a99a90; }
.si-reddit-comment { height: 94px; padding-top: 6px; }
.si-reddit-comment p { font-size: 11px; line-height: 1.5; color: #746457; margin-top: 5px; }
.si-reddit-comment mark { color: inherit; background: transparent; }
.si-reddit-comment > span { font-size: 7px; color: #ab9888; }
.si-reddit-footer { height: 28px; display: flex; align-items: center; gap: 12px; padding: 0 12px; font-size: 8px; color: #a6978a; }
.si-reddit-footer > span:first-child { border-radius: 12px; padding: 3px 6px; background: #fff0e7; color: #ce7948; }
.si-reddit-footer b { margin-left: auto; font-weight: 400; }
.si-audience-insight { position: absolute; left: 12px; right: 12px; bottom: 5px; display: flex; align-items: center; gap: 6px; height: 21px; padding: 0 6px; font-size: 8px; color: #b66e3b; border: 1px solid #f0ddce; border-radius: 4px; background: #fff8f0; opacity: 0; }
.si-audience-insight svg { width: 12px; height: 12px; }
.si-outcomes { display: flex; justify-content: space-between; align-items: center; height: 47px; gap: 8px; }
.si-outcome { display: flex; align-items: center; gap: 6px; font-size: 8px; color: #687886; border: 1px solid #e2e7ee; border-radius: 20px; background: #fff; padding: 5px 10px; }
.si-outcome img { width: 11px; height: 11px; }
.si-outcome b { font-size: 9px; color: #459374; margin-left: 3px; opacity: 0; }
.scene-social .demo-voice { bottom: 19px; height: 58px; width: 672px; left: 164px; background: linear-gradient(130deg,#ffffffd9,#ffffff9e); color: #374158; border: 1px solid #fff; border-radius: 14px; box-shadow: 0 8px 25px #25343714; }
.scene-social .demo-voice-ring svg { color: #4c4660; width: 25px; height: 25px; }
.scene-social .voice-states small { color: #9692a6; }
.scene-social .voice-states p { color: #565369; font-size: 12px; }
.scene-social .demo-wave i { background: #9184a8; }
.scene-social .voice-finish-tick { color: #5e957a; border-color: #bbd5c6; }
.si-voice-step { position: absolute; left: 232px; top: 566px; z-index: 9; font-size: 12px; color: #565369; opacity: 0; pointer-events: none; }
.si-voice-step::before { content: 'APPRENTICE IS ON IT'; position: absolute; left: 0; top: -15px; font-size: 7px; letter-spacing: .17em; color: #9692a6; white-space: nowrap; }
.scene-social .pointer-label { background: #605278; color: #fff; }
.scene-social .cursor-pulse { border-color: #7b64a0; }