#collaboration { color: var(--text); background: var(--navy-0); }
#collaboration .skip-demo { display: inline-block; margin-top: 22px; color: var(--cyan); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; }
#collaboration .pin-track, #collaboration .pin { position: relative; }
#collaboration .collab-layout { display: grid; grid-template-columns: minmax(240px, 0.72fr) minmax(0, 2.28fr); align-items: center; gap: 28px; }
#collaboration .beats { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
#collaboration .beats > li { padding: 16px 18px; border: 1px solid rgb(145 165 194 / 18%); border-radius: 16px; background: rgb(8 21 43 / 78%); transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease; }
#collaboration .beats > li > span { display: block; margin-bottom: 7px; color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.7rem; }
#collaboration .beats h3 { margin-bottom: 7px; font-size: 1.05rem; }
#collaboration .beats p { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.6; }
#collaboration .beats .code { color: #B9CBE6; font-size: 0.82em; }
#collaboration .collab-app { min-width: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr); grid-template-rows: minmax(0, 1fr) auto; border: 1px solid #1C3A61; border-radius: 20px; background: var(--navy-1); box-shadow: 0 28px 80px rgb(0 0 0 / 26%); }
#collaboration .collab-conversation { min-width: 0; min-height: 0; overflow: hidden; }
#collaboration .demo-messages { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; height: 100%; padding: 24px; }
#collaboration .demo-messages p { margin: 0; }
#collaboration .demo-user { flex: none; align-self: flex-end; max-width: 88%; padding: 14px 17px; border-radius: 18px 18px 4px 18px; color: var(--paper); background: var(--cobalt); }
#collaboration .demo-tool { flex: none; padding-left: 14px; border-left: 2px solid var(--cyan); }
#collaboration .demo-tool code { display: block; margin-bottom: 5px; color: var(--cyan); font-size: 0.7rem; line-height: 1.5; }
#collaboration .demo-tool p { color: var(--text); }
#collaboration .collab-receipts { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 24px; border-left: 1px solid rgb(145 165 194 / 18%); background: rgb(5 11 24 / 32%); }
#collaboration .demo-pending { flex: none; margin: 0; padding: 13px 14px; border: 1px solid rgb(53 196 141 / 30%); border-radius: 12px; color: var(--success); background: rgb(53 196 141 / 7%); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.76rem; line-height: 1.55; }
#collaboration .demo-approval { flex: none; padding: 16px; border: 1px solid rgb(143 167 255 / 34%); border-radius: 14px; background: rgb(143 167 255 / 7%); }
#collaboration .demo-approval strong { display: block; color: var(--human); font-size: 0.92rem; }
#collaboration .demo-decision { display: inline-flex; margin: 10px 0; padding: 2px 10px; border-radius: 999px; color: var(--success); background: rgb(53 196 141 / 12%); font-size: 0.8rem; }
#collaboration .demo-approval p { margin: 0; color: var(--text); font-size: 0.9rem; }
#collaboration .demo-audit { grid-column: 1 / -1; padding: 16px 24px; border-top: 1px solid rgb(145 165 194 / 18%); color: var(--muted); background: rgb(5 11 24 / 48%); }
#collaboration .demo-timeline { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 8px; padding: 0; list-style: none; color: var(--text); font-size: 0.82rem; }
#collaboration .demo-timeline li { position: relative; }
#collaboration .demo-timeline li + li::before { content: ''; position: absolute; top: 50%; left: -16px; width: 8px; height: 1px; background: var(--cyan); }
#collaboration .demo-audit > p { margin: 0; font-size: 0.82rem; }
#collaboration .collab-app [data-demo][aria-hidden="true"] { display: none; }
html.js:not(.reduce):not(.low-motion) #collaboration .collab-app[data-beat="1"] [data-demo]:not([data-from="1"]),
html.js:not(.reduce):not(.low-motion) #collaboration .collab-app[data-beat="2"] [data-demo]:not([data-from="1"]):not([data-from="2"]) { display: none; }
@media (min-width: 360px) {
  html.js:not(.reduce):not(.low-motion):not(.collaboration-failed) #collaboration:not(.live) .collab-app [data-demo]:not([data-from="1"]) { display: none; }
}

#collaboration.live .pin-track { height: 450vh; height: round(down, 450vh, 1px); }
#collaboration.live .pin { position: sticky; top: 56px; height: calc(100svh - 56px); display: flex; align-items: center; overflow: hidden; }
#collaboration.live .collab-layout { width: 100%; max-height: 100%; }
#collaboration.live .collab-app { height: min(620px, calc(100svh - 112px)); min-height: 0; }
#collaboration.live .beats { gap: 8px; }
#collaboration.live .beats > li { padding: 12px 15px; }
#collaboration.live .beats > li > p { display: none; }
#collaboration.live .beats > li.is-current { border-color: rgb(0 200 229 / 58%); background: rgb(16 36 67 / 88%); transform: translateX(4px); }
#collaboration.live .beats > li.is-current > p { display: block; }
#collaboration.live .beats > li.is-done > span { color: var(--success); }
#collaboration.live .demo-user.is-current { animation: collab-user-in 180ms ease-out both; }
#collaboration.live .demo-tool.is-current { animation: collab-tool-in 180ms ease-out both; }
#collaboration.live .demo-pending.is-current,
#collaboration.live .demo-approval.is-current { animation: collab-receipt-in 180ms ease-out both; }
#collaboration.live .demo-audit.is-current { animation: collab-audit-in 180ms ease-out both; }

@keyframes collab-user-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes collab-tool-in { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes collab-receipt-in { from { opacity: 0; transform: translateX(20px) translateY(8px); } to { opacity: 1; transform: translateX(0) translateY(0); } }
@keyframes collab-audit-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
  #collaboration .collab-layout { grid-template-columns: 1fr; }
  #collaboration .collab-app { order: 1; }
  #collaboration .beats { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #collaboration.live .pin { padding: 12px 0; }
  #collaboration.live .collab-layout { display: flex; flex-direction: column; align-items: stretch; gap: 12px; height: 100%; }
  #collaboration.live .collab-app { flex: 1 1 auto; order: 1; width: 100%; height: auto; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  #collaboration.live .collab-receipts { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding: 12px 16px; border-top: 1px solid rgb(145 165 194 / 18%); border-left: 0; }
  #collaboration.live .demo-pending, #collaboration.live .demo-approval { flex: 1 1 180px; }
  #collaboration.live .demo-audit { grid-column: 1; padding: 12px 16px; }
  #collaboration.live .beats { display: block; flex: none; order: 2; width: 100%; }
  #collaboration.live .beats > li { display: none; }
  #collaboration.live .beats > li.is-current { display: block; transform: none; }
}

@media (max-width: 600px) {
  #collaboration .beats { grid-template-columns: 1fr; }
  #collaboration .collab-app { grid-template-columns: 1fr; }
  #collaboration .collab-receipts { padding: 18px; border-top: 1px solid rgb(145 165 194 / 18%); border-left: 0; }
  #collaboration .demo-audit { grid-column: 1; }
  #collaboration .demo-messages { gap: 10px; padding: 14px; }
  #collaboration .demo-user { padding: 11px 13px; font-size: 0.86rem; }
  #collaboration .demo-tool { padding-left: 10px; }
  #collaboration .demo-tool code { font-size: 0.62rem; }
  #collaboration .demo-tool p { font-size: 0.86rem; }
  #collaboration .demo-pending { font-size: 0.68rem; }
  #collaboration .demo-timeline, #collaboration .demo-audit > p { font-size: 0.74rem; }
  #collaboration.live .beats > li { padding: 12px 14px; }
  #collaboration.live .beats p { font-size: 0.78rem; }
}

html.reduce #collaboration .pin,
html.low-motion #collaboration .pin,
html.collaboration-failed #collaboration .pin { position: relative; }
html.reduce #collaboration .pin-track,
html.low-motion #collaboration .pin-track,
html.collaboration-failed #collaboration .pin-track { height: auto; }
html.reduce #collaboration .beats > li,
html.low-motion #collaboration .beats > li,
html.collaboration-failed #collaboration .beats > li,
html.reduce #collaboration .beats > li > p,
html.low-motion #collaboration .beats > li > p,
html.collaboration-failed #collaboration .beats > li > p { display: block; }
html.reduce #collaboration .collab-app [data-from="4"],
html.reduce #collaboration .collab-app [data-from="5"],
html.low-motion #collaboration .collab-app [data-from="4"],
html.low-motion #collaboration .collab-app [data-from="5"],
html.collaboration-failed #collaboration .collab-app [data-from="4"],
html.collaboration-failed #collaboration .collab-app [data-from="5"] { display: none; }

@media (max-width: 359px) {
  #collaboration .pin { position: relative; }
  #collaboration .pin-track { height: auto; }
  #collaboration .beats > li, #collaboration .beats > li > p { display: block; }
  #collaboration .collab-app [data-from="4"], #collaboration .collab-app [data-from="5"] { display: none; }
}