@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme:dark; font-family:Manrope,Arial,sans-serif; background:#08090d; color:#f1f2f4; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
[hidden] { display:none!important; }
a:hover { color:#fff; text-decoration:underline; text-underline-offset:5px; }
a:focus-visible, button:focus-visible { outline:2px solid #d9fbbb; outline-offset:5px; }
.skip { position:absolute; left:-9999px; z-index:10; }
.skip:focus { left:20px; top:20px; background:#08090d; padding:12px; }
#hero-story { height:650svh; position:relative; }
.hero-stage { position:sticky; top:0; height:100svh; overflow:hidden; }
header { position:absolute; z-index:3; top:0; width:100%; padding:28px 4.5%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { display:flex; align-items:center; gap:9px; font-size:30px; font-weight:700; letter-spacing:-1.6px; }
.logo svg { width:26px; height:32px; fill:none; stroke:currentColor; stroke-width:3; }
.private { color:#adb1bd; font-size:12px; }
.entry { display:flex; align-items:center; gap:28px; }
.entry a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; padding:12px 0; }
.request { color:#c1c5d0; }
.login { border-bottom:1px solid #5f626c; }
#sculpture { position:absolute; inset:0; height:100%; overflow:hidden; background:radial-gradient(ellipse at 55% 35%,#16303960,transparent 65%),#080c10; }
#sculpture canvas { display:block; width:100%; height:100%; position:relative; z-index:1; }
#sculpture:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(28deg,#020509ef 0%,#02050990 19%,transparent 49%),radial-gradient(ellipse at 60% 40%,transparent 30%,#02050988 100%); z-index:1; }
.scene-container { position:absolute!important; inset:0; }
.graph-tooltip { font-family:Manrope,Arial,sans-serif!important; font-size:12px!important; padding:8px 12px!important; background:#111d29ed!important; color:#d9e9ed!important; border:1px solid #34444e!important; border-radius:4px!important; }
.hero-copy { position:absolute; inset:0; height:100%; z-index:2; pointer-events:none; display:flex; align-items:flex-end; padding:0 4.5% 150px; }
.intro { max-width:800px; }
.eyebrow { font-size:12px; color:#adb6c8; margin:0 0 22px; }
h1 { font-size:clamp(42px,4.5vw,76px); line-height:1.08; font-weight:500; letter-spacing:-.055em; margin:0 0 24px; }
h1 span { color:#bcc8d0; }
.definition { font-size:16px; line-height:1.6; color:#edf2f1; max-width:620px; margin:0 0 16px; }
/* What Staves is, in the fold: nobody should have to reach the FAQ to find out that it starts
   at a command line. */
.mechanism-lead { font-size:14px; line-height:1.6; color:#9fb0bd; max-width:560px; margin:0 0 16px; }
.audience { font-size:14px; line-height:1.6; color:#b7becb; max-width:560px; margin:0 0 20px; }
.invitation { display:flex; align-items:center; gap:28px; }
.cta { pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 20px; border:1px solid #9aaca7; border-radius:4px; font-size:14px; font-weight:600; background:#dcece5; color:#10242c; white-space:nowrap; }
.cta:hover { color:#10242c; background:#f0f8f4; text-decoration:none; }
.invited { font-size:13px; line-height:1.5; color:#c1c5d0; max-width:40ch; }
.already { pointer-events:auto; font-size:13px; line-height:1.65; color:#b7becb; max-width:560px; margin:18px 0 0; }
.already a { border-bottom:1px solid #5f626c; }
.invited code, .already code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#e2e8ec; white-space:nowrap; }
.already code { background:#ffffff12; border-radius:4px; padding:2px 5px; }
/* With room for the whole sentence the link reads as part of it; narrow screens keep the tap target. */
@media(min-width:820px) { .invited .login { display:inline; min-height:0; padding:0; } }
.chapters { position:absolute; right:4.5%; top:36%; z-index:4; display:flex; flex-direction:column; gap:6px; }
.chapters button { border:0; border-left:2px solid transparent; background:none; color:#a4acbb; font-size:12px; min-width:44px; min-height:44px; }
.chapters button[aria-current=step] { color:#fff; border-color:#d9fbbb; }
.hero-stage .scene-caption { position:absolute; right:6%; bottom:145px; color:#aab1c7; font-size:11px; z-index:2; }
.data-caption { position:absolute; top:17%; right:7%; z-index:2; color:#a9bcc9; font-size:10px; pointer-events:none; }
.role-key { position:absolute; right:4.5%; bottom:88px; z-index:4; display:flex; gap:17px; }
.role-key span { display:flex; align-items:center; gap:6px; font-size:11px; }
.role-key svg { width:17px; height:17px; }
.stage-footer { position:absolute; bottom:0; z-index:3; width:100%; padding:18px 4.5%; border-top:1px solid #ffffff18; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; color:#a4acbb; }
.stage-footer>a { padding-block:12px; min-height:44px; }
.scene-controls { display:flex; gap:20px; }
.scene-controls button { background:none; border:0; min-height:44px; padding:8px; font-size:12px; }
.mobile-cloud { display:none; }
/* The scene has the chapter numbers; without it the count is what says where in the hero a reader is. */
.story-count { display:none; font-variant-numeric:tabular-nums; }
.normal-flow .story-count { display:inline-block; }
.site-footer { position:relative; padding:24px 4.5%; border-top:1px solid #ffffff18; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#a4acbb; }
.site-footer a { display:inline-flex; align-items:center; min-height:44px; }

/* The document layout drops the scene, not the story: both widths keep the sticky stage and tell
   the same six headlines by scrolling. Only the phone rewrites the hero into a reading column. */
.normal-flow #sculpture, .normal-flow .hero-stage .scene-caption, .normal-flow .role-key, .normal-flow .scene-controls { display:none; }
.normal-flow .hero-copy { pointer-events:auto; }
.normal-flow .stage-footer { padding:10px 6%; }
/* Without the scene the stage keeps its own light, rather than reading as a black rectangle. */
.normal-flow:not(.mobile-story) .hero-stage { background:radial-gradient(ellipse at 55% 35%,#16303960,transparent 65%),#080c10; }
.normal-flow.mobile-story .chapters { display:none; }
.normal-flow.mobile-story header { position:relative; }
.normal-flow.mobile-story .hero-copy { position:relative; inset:auto; height:auto; display:block; max-width:780px; margin:auto; padding:0 6% 32px; }
.normal-flow.mobile-story .eyebrow, .normal-flow.mobile-story .audience { display:none; }
.normal-flow.mobile-story h1 { font-size:clamp(40px,7.8vw,64px); }
.normal-flow.mobile-story .definition { font-size:16px; color:#b7becb; max-width:500px; margin-bottom:24px; }
@media(max-width:819px) {
  header { padding:16px 20px; gap:16px; flex-wrap:wrap; row-gap:2px; }
  /* A bare "Sign in" asks a stranger for an account. The invitation keeps its lead here and wraps
     if it has to; only the command drops, and the hero's own line still carries that. */
  .private, .entry .header-request, .invited-rest { display:none; }
  .entry { gap:18px; flex-wrap:wrap; justify-content:flex-end; }
  .invited { max-width:none; }
  .logo { font-size:27px; }
  .normal-flow .hero-copy { padding:0 20px 32px; }
  .normal-flow h1 { font-size:clamp(38px,10vw,52px); }
  .normal-flow .stage-footer { padding-inline:20px; }
  .site-footer { padding:16px 20px; }
}
@media(max-height:700px) and (min-width:820px) {
  .hero-copy { padding-bottom:130px; }
  h1 { font-size:42px; }
  .hero-stage .scene-caption { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; transition:none!important; }
}

/* Mobile atmosphere shares the headline area; no separate graphic spacer. */
.normal-flow.mobile-story .hero-copy { padding-top:64px; isolation:isolate; touch-action:pan-y; }
.normal-flow.mobile-story .intro { position:relative; min-height:350px; }
.normal-flow.mobile-story .mobile-cloud { display:block; position:absolute; inset:-30px -15% 0; z-index:-1; overflow:hidden; pointer-events:none; mask-image:linear-gradient(transparent,#000 20%,#000 65%,transparent); }
.mobile-cloud .cloud { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; background:radial-gradient(ellipse at 32% 35%,#c49e633d,transparent 48%),radial-gradient(ellipse at 70% 50%,#418f9d45,transparent 52%); }
.mobile-cloud .cloud:nth-child(2) { background:radial-gradient(ellipse at 65% 30%,#56b6c650,transparent 50%),radial-gradient(ellipse at 25% 65%,#666fc342,transparent 55%); }
.mobile-cloud .cloud:nth-child(3) { background:radial-gradient(ellipse at 30% 30%,#7c72ba48,transparent 50%),radial-gradient(ellipse at 70% 65%,#c09d6840,transparent 52%); }
.mobile-cloud .cloud.active { opacity:1; animation:cloud-settle 4s ease-out both; }
@keyframes cloud-settle { from { transform:translate3d(-3%,2%,0) scale(.92); } to { transform:translate3d(2%,-1%,0) scale(1.08); } }
@media(prefers-reduced-motion:reduce) { .mobile-cloud .cloud, .mobile-cloud .cloud.active { transition:none; animation:none; } }

/* Native vertical scrolling advances the document story, then releases the hero. */
.normal-flow #hero-story { --flat-stage-height:max(100svh,620px); height:calc(var(--flat-stage-height) * 6); }
.normal-flow .hero-stage { position:sticky; top:0; height:100svh; overflow-y:auto; }
/* Long copy remains reachable on short screens and at larger text sizes. */
.normal-flow.mobile-story .hero-copy { padding-bottom:100px; }
/* Leave the fixed analytics preference control its own bottom row, clear of the skip link. */
.normal-flow.mobile-story .stage-footer { position:sticky; bottom:0; padding-bottom:46px; background:#080c10; }
.normal-flow.mobile-story .hero-copy { padding-top:clamp(32px,8svh,64px); }

/* The install command is the first thing to do; the format is the first thing to read. */
.command { gap:14px; font-weight:500; cursor:copy; }
.command code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px; }
.command .copy-state { font-size:12px; color:#3d5a57; min-width:3.5em; text-align:right; }
.secondary { pointer-events:auto; display:inline-flex; align-items:center; min-height:48px; font-size:14px; color:#dce6ea; text-decoration:underline; text-decoration-color:#5f626c; text-underline-offset:5px; }
.secondary:hover { text-decoration-color:#dce6ea; }
.entry .login { border-bottom:0; text-decoration:underline; text-decoration-color:#5f626c; text-underline-offset:5px; }
.site-footer nav { display:flex; gap:22px; }
@media(max-width:819px) {
  .wide-only { display:none!important; }
  .invitation { flex-wrap:wrap; gap:14px 22px; }
  .command code { font-size:13px; }
}