#staves-track-teaser { font-family:Manrope,Arial,sans-serif; color:#edf2f1; background:transparent; width:100%; margin:0; padding:120px 4.5% 96px; color-scheme:dark; --human:#eed4a4; --agent:#69d8e7; --ink:#edf2f1; }
#staves-track-teaser * { box-sizing:border-box; }
#staves-track-teaser h2 { font-family:inherit; font-size:clamp(38px,4.5vw,64px); line-height:1.08; letter-spacing:-.055em; font-weight:500; margin:0 0 24px; max-width:800px; }
#staves-track-teaser .teaser-copy { font-size:16px; line-height:1.7; color:#aebfc6; margin:0; max-width:620px; }
#staves-track-teaser .drawing { max-width:1100px; margin:64px 0 48px; }
#staves-track-teaser svg { width:100%; display:block; overflow:visible; }
#staves-track-teaser .lane-name { font-family:inherit; font-size:13px; fill:#c3cfd3; }
#staves-track-teaser .lane-kind { font-family:inherit; font-size:12px; fill:#91a3ae; }
#staves-track-teaser .rail { stroke-width:1; transform-box:fill-box; transform-origin:left; }
#staves-track-teaser .job rect { fill:#122128; stroke-width:1; }
#staves-track-teaser .job text { font-family:inherit; font-size:13px; font-weight:500; fill:#edf2f1; }
#staves-track-teaser .job .job-detail { font-size:12px; fill:#a9bbc3; font-weight:400; }
#staves-track-teaser .handoff { fill:none; stroke:#789da2; stroke-width:1.3; stroke-dasharray:1; stroke-dashoffset:0; }
#staves-track-teaser .artifact { font-family:inherit; fill:#a9c8ca; font-size:12px; }
#staves-track-teaser .reveal { opacity:1; }
#staves-track-teaser[data-running] .reveal { animation:staves-place .65s cubic-bezier(.16,1,.3,1) var(--delay,0s) both; }
#staves-track-teaser[data-running] .rail { animation:staves-track .9s cubic-bezier(.16,1,.3,1) var(--delay,0s) both; }
#staves-track-teaser[data-running] .handoff { animation:staves-connect 1s cubic-bezier(.4,0,.2,1) var(--delay,0s) both; }
#staves-track-teaser .conversion { display:flex; flex-direction:column; align-items:center; gap:18px; padding:96px 0 24px; text-align:center; }
#staves-track-teaser .conversion h3 { margin:0; font-size:clamp(28px,4vw,36px); font-weight:500; line-height:1.2; letter-spacing:-.035em; }
#staves-track-teaser .conversion p { color:#aebfc6; font-size:16px; line-height:1.6; margin:0; max-width:440px; }
#staves-track-teaser .signup { display:inline-flex; align-items:center; justify-content:center; min-height:56px; min-width:240px; max-width:100%; margin-top:10px; padding:16px 28px; border-radius:4px; background:#b8dcd9; color:#10242c; font-size:16px; font-weight:700; text-decoration:none; white-space:normal; }
#staves-track-teaser a:focus-visible, #staves-track-teaser button:focus-visible { outline:2px solid #edf2f1; outline-offset:4px; }
@keyframes staves-place { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes staves-track { from { opacity:0; transform:scaleX(0); } to { opacity:.2; transform:scaleX(1); } }
@keyframes staves-connect { from { stroke-dashoffset:1; opacity:0; } 1% { opacity:1; } to { stroke-dashoffset:0; opacity:1; } }
@media(max-width:819px) {
  #staves-track-teaser { padding:64px 20px 48px; }
  #staves-track-teaser .conversion { padding-top:36px; gap:16px; }
  #staves-track-teaser .conversion p { max-width:none; }
  #staves-track-teaser .drawing { margin:40px -8px 24px; }
}
@media(prefers-reduced-motion:reduce) {
  #staves-track-teaser[data-running] .reveal, #staves-track-teaser[data-running] .rail, #staves-track-teaser[data-running] .handoff { animation:none; }
}

#staves-track-teaser[data-paused] .reveal,
#staves-track-teaser[data-paused] .rail,
#staves-track-teaser[data-paused] .handoff { animation-play-state:paused; }
#staves-track-teaser[data-ready] .reveal,
#staves-track-teaser[data-ready] .rail,
#staves-track-teaser[data-ready] .handoff { opacity:0; }

#staves-track-teaser .technical-note { padding:32px 0; border-bottom:1px solid #26363f; }
#staves-track-teaser .technical-note h3 { margin:0 0 10px; font-size:18px; line-height:1.4; font-weight:500; letter-spacing:-.02em; }
#staves-track-teaser .technical-note p { max-width:580px; margin:0; color:#aebfc6; font-size:14px; line-height:1.7; }
#staves-track-teaser .conversion .release-note { max-width:440px; font-size:12px; line-height:1.6; color:#aebfc6; }

/* What Staves is, in one line, before the questions start. */
#staves-track-teaser .marketing-faq { padding:80px 0 0; }
#staves-track-teaser .marketing-faq h2 { font-size:clamp(30px,3.5vw,48px); margin-bottom:32px; }
#staves-track-teaser .faq-answers { max-width:900px; }
#staves-track-teaser details { border-bottom:1px solid #26363f; }
#staves-track-teaser summary { padding:22px 0; cursor:pointer; font-size:18px; line-height:1.5; font-weight:500; }
#staves-track-teaser details p { margin:0 0 24px; max-width:720px; color:#aebfc6; font-size:16px; line-height:1.75; }
#staves-track-teaser details a { text-decoration:underline; text-underline-offset:4px; color:#b8dcd9; }
#staves-track-teaser summary:focus-visible { outline:2px solid #edf2f1; outline-offset:4px; }
@media(max-width:819px) { #staves-track-teaser .marketing-faq { padding-top:48px; } #staves-track-teaser summary { font-size:16px; } }

/* The format, shown by the one thing only it records: the code and the people disagreeing. */
#staves-track-teaser .format-note { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:start; padding:80px 0 32px; border-bottom:1px solid #26363f; }
#staves-track-teaser .format-note h2 { font-size:clamp(30px,3.5vw,48px); margin-bottom:20px; }
#staves-track-teaser .format-copy p { max-width:520px; margin:0 0 16px; color:#aebfc6; font-size:16px; line-height:1.7; }
#staves-track-teaser .format-links { display:flex; gap:24px; flex-wrap:wrap; margin-top:24px!important; }
#staves-track-teaser .format-links a { color:#b8dcd9; text-decoration:underline; text-underline-offset:4px; }
#staves-track-teaser .format-sample { margin:0; padding:22px 24px; overflow-x:auto; background:#0c161c; border:1px solid #26363f; border-radius:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.65; color:#c9d6db; }
#staves-track-teaser .release-note a { text-decoration:underline; text-underline-offset:3px; }
#staves-track-teaser .release-note code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; background:#ffffff12; border-radius:4px; padding:2px 5px; }
@media(max-width:819px) {
  #staves-track-teaser .format-note { grid-template-columns:1fr; gap:28px; padding-top:48px; }
  #staves-track-teaser .format-sample { font-size:11.5px; padding:16px; }
}