/* The hero of the lab side and its orientation panel: one job passed from tool to tool, drawn as a diagram.
   Where the network page tilts a porcelain card on a night ground, this page tilts a night panel on a porcelain wall. */

  .wrap > section.hero { position: relative; display: grid; grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); grid-template-areas: "t t" "c r"; column-gap: clamp(28px, 4vw, 72px); row-gap: 34px; align-items: start; border-top: 0; padding-block: calc(var(--hdr) + 63.5px - var(--h1) * .505) 84px; }
  .hero h1 { grid-area: t; font-size: var(--h1); line-height: 1; font-weight: 700; white-space: nowrap; }
  .hero h1 .row2 { display: block; font-size: .56em; font-weight: 700; letter-spacing: -.012em; line-height: 1.05; margin-top: .14em; }
  .hero-copy { grid-area: c; }
  .hero .lede { max-width: 47ch; }
  .hero .cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .hero .ops { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--graphite); font-size: .98rem; }
  .hero .fine { margin-top: 18px; color: var(--graphite-2); font-size: .95rem; max-width: 44ch; }
  .hero .fine b { color: var(--graphite); font-weight: 600; }
  .hero .right { grid-area: r; perspective: 1800px; justify-self: end; width: min(100%, 820px); }

  .orient { margin: 0; padding: 14px; transform: rotateY(-9deg) rotateX(1.5deg); transform-origin: 100% 50%; transition: transform .9s var(--ease); }
  .orient:hover, .orient:focus-within { transform: rotateY(-2deg) rotateX(0); }
  /* the hero instrument wears the app's black mode: a black card with a hairline, the stage one step darker (founder, 10-04: the light one looked worse than the app) */
  .orient.night { background: linear-gradient(180deg, #0f1115 0%, #08090c 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 26px; box-shadow: 0 50px 90px -40px #000, 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); }
  .orient.night .or-stage { border-radius: 16px; background: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.4px) 0 0 / 4cqw 4cqw, #050608; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .or-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; color: var(--p-dust); font-size: .86rem; }
  .or-head b { color: var(--p-bone); font: 600 1rem var(--display); }
  .or-pause { margin-left: auto; border: 1px solid var(--p-line); border-radius: 999px; padding: 5px 12px; background: transparent; color: var(--p-bone); font: 600 .8rem var(--body); cursor: pointer; }
  .or-pause:hover { border-color: var(--p-bone); }
  .or-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
  .or-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; align-content: space-between; }
  .or-track button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; color: var(--p-dust); font: 600 .84rem var(--body); transition: background .3s var(--ease), color .3s var(--ease); }
  .or-track button i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--p-bone) 24%, transparent); transition: background .3s var(--ease), box-shadow .3s var(--ease); }
  .or-track button:hover { color: var(--p-bone); }
  .or-track button[aria-current="step"] { background: color-mix(in srgb, var(--p-bone) 9%, transparent); color: var(--p-bone); }
  .or-track button[aria-current="step"] i.you { background: var(--p-ember); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-ember) 24%, transparent); }
  .or-track button[aria-current="step"] i.agent { background: var(--p-signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-signal) 22%, transparent); }
  .or-track button[aria-current="step"] i.both { background: linear-gradient(90deg, var(--p-ember) 50%, var(--p-signal) 50%); }
  .or-track button[aria-current="step"] i.none { background: var(--p-bone); }
  .or-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 14px 6px 8px; min-height: 5.4em; font-size: 1.02rem; line-height: 1.42; color: var(--p-bone); }
  .or-cap .who { margin-top: 2px; }
  .or-bar { height: 3px; margin: 0 6px 2px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--p-bone) 13%, transparent); }
  .or-bar i { display: block; width: 100%; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #ea7b2b, #f6c538); }

  /* the stage: a dotted floor, and seven small scenes. Sizes are in cqw so a scene keeps its proportions at any width. */
  .or-stage { --p-bone: #eef1f4; --p-dust: #98a2ae; --p-signal: #2fd6f2; --p-ember: #ff8a33; --p-ok: #4cd18a; --p-vibe: #ffd23f; position: relative; aspect-ratio: 16 / 10; container-type: size; border-radius: 12px; overflow: hidden; background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 4cqw 4cqw, #070b12; }
  .sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
  .sc.on { opacity: 1; visibility: visible; transition-delay: 0s; }
  .sc .win { position: absolute; box-sizing: border-box; border: 1px solid rgba(255,255,255,.16); border-radius: 1.6cqw; background: #101826; padding: 2cqw; display: grid; align-content: start; gap: 1.5cqw; }
  .sc .ln { display: block; height: 1.2cqw; border-radius: 1cqw; background: rgba(255,255,255,.24); }
  .sc .chip { display: inline-block; justify-self: start; padding: .6cqw 1.6cqw; border-radius: 99px; font: 600 clamp(9px, 2.1cqw, 13px)/1.3 var(--body); color: var(--p-bone); background: rgba(255,255,255,.1); white-space: nowrap; }
  .sc .ptr { position: absolute; display: grid; justify-items: start; gap: .4cqw; }
  .sc .ptr svg { width: 3.4cqw; height: 3.4cqw; filter: drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.6)); }
  .sc .ptr span { margin-left: 2.6cqw; padding: .3cqw 1.2cqw; border-radius: 99px; font: 600 clamp(8px, 1.9cqw, 12px)/1.3 var(--body); color: #0a0d12; }
  .sc .ptr.you svg { fill: var(--p-ember); } .sc .ptr.you span { background: var(--p-ember); }
  .sc .ptr.agent svg { fill: var(--p-signal); } .sc .ptr.agent span { background: var(--p-signal); }
  .sc .ptr.friend svg { fill: #b9a6ff; } .sc .ptr.friend span { background: #b9a6ff; }
  .sc .ask { position: absolute; display: flex; align-items: center; gap: 2cqw; padding: 1.4cqw 1.6cqw 1.4cqw 2.4cqw; border-radius: 99px; background: #eef1f4; color: #0a0d12; font: 500 clamp(9px, 2.2cqw, 14px)/1.2 var(--body); box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0,0,0,.8); opacity: 0; transform: translateY(2cqw); }
  .sc .ask b { padding: .9cqw 2cqw; border-radius: 99px; background: #0a0d12; color: #eef1f4; font-weight: 600; }
  .sc.on .ask { animation: sc-rise .5s var(--ease) 1.5s forwards; }
  @keyframes sc-rise { to { opacity: 1; transform: none; } }
  @keyframes sc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* 1 dictate */
  .sc-dic .mic { position: absolute; left: 7%; top: 30%; width: 24%; height: 40%; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; }
  .sc-dic .mic i { width: 1.7cqw; height: 22%; border-radius: 1cqw; background: var(--p-ember); }
  .sc-dic.on .mic i { animation: sc-bar .7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
  .sc-dic .mic i:nth-child(2) { animation-delay: -.5s; } .sc-dic .mic i:nth-child(3) { animation-delay: -.2s; } .sc-dic .mic i:nth-child(4) { animation-delay: -.62s; } .sc-dic .mic i:nth-child(5) { animation-delay: -.34s; } .sc-dic .mic i:nth-child(6) { animation-delay: -.1s; } .sc-dic .mic i:nth-child(7) { animation-delay: -.44s; }
  @keyframes sc-bar { from { height: 14%; } to { height: 92%; } }
  .sc-dic .paper { left: 36%; top: 32%; width: 57%; padding: 3cqw; gap: 2.4cqw; }
  .sc-dic .typed { display: block; overflow: hidden; white-space: nowrap; width: 0; border-right: .4cqw solid var(--p-ember); font: 500 clamp(9px, 2.5cqw, 15px)/1.5 var(--mono); color: var(--p-bone); }
  .sc-dic.on .typed { animation: sc-type 2.4s steps(30) .3s forwards; }
  @keyframes sc-type { to { width: 100%; } }
  /* 2 capture */
  .sc-cap .scr { left: 6%; top: 15%; width: 40%; height: 64%; }
  .sc-cap .scr .blk { display: block; height: 16cqw; border-radius: 1cqw; background: linear-gradient(135deg, #24324a, #182132); }
  .sc-cap .marq { position: absolute; left: 12%; top: 34%; width: 0; height: 0; border: .35cqw dashed var(--p-ember); border-radius: .8cqw; background: rgba(255,138,51,.12); }
  .sc-cap.on .marq { animation: sc-marq 1s var(--ease) .3s forwards; }
  @keyframes sc-marq { to { width: 70%; height: 52%; } }
  .sc-cap .board { position: absolute; left: 53%; top: 10%; width: 41%; height: 78%; border-radius: 1.6cqw; border: 1px dashed rgba(255,255,255,.22); }
  .sc-cap .shot { position: absolute; left: 14%; top: 18%; width: 62%; height: 44%; border-radius: 1cqw; background: linear-gradient(135deg, #24324a, #182132); box-shadow: 0 0 0 .3cqw #eef1f4, 0 2cqw 4cqw -1cqw rgba(0,0,0,.8); opacity: 0; transform: scale(.5) translateX(-40%); }
  .sc-cap.on .shot { animation: sc-land .6s var(--ease) 1.3s forwards; }
  @keyframes sc-land { to { opacity: 1; transform: none; } }
  .sc-cap .scribble { position: absolute; left: 10%; top: 40%; width: 80%; height: 54%; fill: none; stroke: var(--p-ember); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 180; stroke-dashoffset: 180; }
  .sc-cap.on .scribble { animation: sc-draw .9s cubic-bezier(0.22, 1, 0.36, 1) 2s forwards; }
  @keyframes sc-draw { to { stroke-dashoffset: 0; } }
  /* 3 pack */
  .sc-pack .it { position: absolute; left: 9%; width: 24%; border-radius: 1.2cqw; box-shadow: 0 0 0 .3cqw #eef1f4; }
  .sc-pack .it-a { top: 16%; height: 28%; background: linear-gradient(135deg, #24324a, #182132); }
  .sc-pack .it-b { top: 56%; height: 26%; background: #101826; display: grid; align-content: center; gap: 1.4cqw; padding: 2cqw; box-sizing: border-box; }
  .sc-pack.on .it-a { animation: sc-in-a 1s var(--ease) .4s forwards; } .sc-pack.on .it-b { animation: sc-in-b 1s var(--ease) .8s forwards; }
  @keyframes sc-in-a { to { transform: translate(215%, 55%) scale(.42); } } @keyframes sc-in-b { to { transform: translate(215%, -62%) scale(.42); } }
  .sc-pack .box { position: absolute; left: 55%; top: 26%; width: 34%; height: 50%; border-radius: 2cqw; border: .4cqw solid rgba(255,255,255,.35); display: grid; place-items: end center; padding-bottom: 2.4cqw; box-sizing: border-box; }
  .sc-pack.on .box { animation: sc-seal .6s var(--ease) 1.9s forwards; }
  @keyframes sc-seal { to { border-color: var(--p-vibe); box-shadow: 0 0 0 1.2cqw rgba(255,210,63,.14); } }
  /* 4 code */
  .sc-code .pane { top: 14%; width: 28%; height: 72%; }
  .sc-code .pane:nth-child(1) { left: 5%; } .sc-code .pane:nth-child(2) { left: 36%; } .sc-code .pane:nth-child(3) { left: 67%; }
  .sc-code .ln { transform-origin: left; transform: scaleX(0); } .sc-code .ln.c { background: var(--p-signal); }
  .sc-code.on .ln { animation: sc-grow .5s var(--ease) forwards; animation-delay: calc(.3s + var(--i) * .16s); }
  /* 5 browse */
  .sc-bro .brow { left: 10%; top: 12%; width: 62%; height: 70%; }
  .sc-bro .url { display: flex; align-items: center; gap: 1.2cqw; padding: .9cqw 1.6cqw; border-radius: 99px; background: rgba(255,255,255,.08); font: 500 clamp(8px, 2cqw, 12px)/1.3 var(--mono); color: var(--p-dust); }
  .sc-bro .url i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--p-ok); }
  .sc-bro .go { display: block; justify-self: start; width: 30%; height: 4.4cqw; border-radius: 99px; background: rgba(47,214,242,.25); border: .3cqw solid var(--p-signal); }
  .sc-bro .ptr { left: 82%; top: 78%; } .sc-bro.on .ptr { animation: sc-walk 1.2s var(--ease) .3s forwards; }
  @keyframes sc-walk { to { left: 27%; top: 62%; } }
  .sc-bro .ask { right: 5%; bottom: 8%; }
  /* 6 track */
  .sc-trk .tl { position: absolute; left: 8%; right: 8%; top: 30%; height: 9cqw; border-radius: 1.4cqw; background: rgba(255,255,255,.07); overflow: hidden; }
  .sc-trk .tl i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); transform-origin: left; transform: scaleX(0); display: grid; place-items: center; font: 600 clamp(8px, 2cqw, 12px)/1 var(--body); font-style: normal; color: #0a0d12; }
  .sc-trk .tl .a { background: #f7a51c; } .sc-trk .tl .b { background: #22d3ee; } .sc-trk .tl .c { background: #4cd18a; }
  .sc-trk.on .tl i { animation: sc-grow .7s var(--ease) forwards; } .sc-trk.on .tl .b { animation-delay: .7s; } .sc-trk.on .tl .c { animation-delay: 1.4s; } .sc-trk.on .tl .a { animation-delay: 0s; }
  .sc-trk .sum { position: absolute; left: 8%; top: 58%; display: grid; gap: .4cqw; color: var(--p-dust); font: 500 clamp(9px, 2.2cqw, 14px)/1.3 var(--body); }
  .sc-trk .sum b { font: 700 clamp(18px, 6cqw, 40px)/1 var(--display); color: var(--p-bone); letter-spacing: -.02em; }
  /* 7 link */
  .sc-link .shared { left: 14%; top: 12%; width: 72%; height: 66%; }
  .sc-link .shared .blk { display: block; height: 20cqw; border-radius: 1cqw; background: linear-gradient(135deg, #24324a, #182132); }
  .sc-link .ptr.you { left: 30%; top: 40%; } .sc-link .ptr.friend { left: 70%; top: 78%; }
  .sc-link.on .ptr.you { animation: sc-you 3.4s cubic-bezier(0.45, 0, 0.55, 1) .2s infinite alternate; } .sc-link.on .ptr.friend { animation: sc-friend 1.4s var(--ease) .5s forwards; }
  @keyframes sc-you { to { left: 22%; top: 56%; } } @keyframes sc-friend { to { left: 54%; top: 36%; } }
  .sc-link .ask { left: 50%; bottom: 6%; translate: -50% 0; }

  @media (max-width: 1240px) { .hero { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); } .or-body { grid-template-columns: 1fr; } .or-track { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .or-track button { justify-content: center; padding: 8px 2px; font-size: .74rem; flex-direction: column; gap: 5px; } }
  @media (max-width: 979px) {
    /* the same lockup as the network page's phone hero (css/hero-card.css): first title line centred on the ring,
       title starting just past the arc, the block reaching below the cutout. All from the frame's variables. */
    :root { --h1: clamp(2.05rem, 7.6vw, 3.4rem); }
    .wrap > section.hero { display: flex; flex-direction: column; gap: 18px; padding-block: calc(var(--hdr) + 30px) 64px; }
    .hero h1 { white-space: normal; text-wrap: balance; font-size: var(--h1); }
    .hero h1 .row2 { font-size: .7em; }
    body.sb-open { --h1: clamp(1.28rem, 5.5vw, 2.5rem); }
    body.sb-open .wrap > section.hero { padding-top: calc(var(--hdr) + var(--c0x-sidebar-cutout-mask-center-y) - var(--h1) * 0.505); }
    body.sb-open .hero > h1 { padding-left: calc(var(--c0x-sidebar-cutout-center-x) + var(--c0x-sidebar-cutout-mask-radius) + 7px - var(--c0x-sidebar-cutout-paint-width) - 9px); min-height: calc(var(--c0x-sidebar-cutout-bottom) + 8px - var(--c0x-sidebar-cutout-mask-center-y) + var(--h1) * 0.505); }
    body.sb-open .hero > h1 .row2 { font-size: max(.6em, 13.5px); margin-top: .3em; }
    body.sb-open .hero .lede { font-size: 1.04rem; line-height: 1.5; }
    .hero .right { width: 100%; justify-self: stretch; } .orient { transform: none; padding: 10px; } .orient:hover { transform: none; }
    .or-track button span { display: none; } .or-cap { font-size: .95rem; min-height: 7em; }
    .or-head span:not(#orCount) { display: none; } .or-head #orCount { margin-left: auto; } .or-pause { margin-left: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .orient { transition: none; transform: none; } .sc, .sc * { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }