/* The lab side: the toolbox page. It loads the network page's shell.css first and wears the same app chrome,
   one to one and dark like the network side (founder, 2026-10-04: "not too white dominant"). What differs is the
   room: a black wall of panels with seams and one warm wash, where the network side has a night sky and its net.
   Porcelain is kept for one or two objects per page, the way the network side keeps it for the card. */

  :root {
    --wall: #0b0c0f; --panel: rgba(17,21,28,.6); --panel-2: rgba(23,28,37,.7); --seam: rgba(255,255,255,.035);
    --ink: #eef1f4; --graphite: #98a2ae; --graphite-2: #6b7581;
    /* two operators, two colours: orange marks what you do, blue marks what the agent does */
    --you: #ff8a33; --you-ink: #ffb26b; --you-soft: rgba(255,138,51,.14); --agent: #2fd6f2; --agent-ink: #6fe3f7; --agent-soft: rgba(47,214,242,.13);
    /* text and lines on the wall's tiles (the same names carry dark ink inside a porcelain object, see .porcelain) */
    --p-bone: #eef1f4; --p-dust: #98a2ae; --p-line: rgba(255,255,255,.1); --p-signal: #2fd6f2; --p-ember: #ff8a33; --p-ok: #4cd18a; --p-vibe: #ffd23f;
    --night: var(--wall); --tile: 220px; --shot-r: 14px;
  }
  body { background: var(--wall); }
  .ambient { background:
    linear-gradient(to right, var(--seam) 1px, transparent 1px) 0 0 / var(--tile) var(--tile),
    linear-gradient(to bottom, var(--seam) 1px, transparent 1px) 0 0 / var(--tile) var(--tile),
    radial-gradient(55% 45% at 4% 0%, rgba(234,123,43,.13), transparent 70%),
    radial-gradient(50% 45% at 100% 100%, rgba(246,197,56,.06), transparent 70%); }
  .topfade { background: radial-gradient(55% 45% at 4% 0%, rgba(234,123,43,.13), transparent 70%) fixed, var(--wall); }

  .c0x-cloud-pill .ps { display: none; }
  @media (max-width: 760px) { .c0x-cloud-pill .pl { display: none; } .c0x-cloud-pill .ps { display: inline; } }

  /* the announcement line: the lab's loudspeaker, between sections */
  .pa { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; margin: 0; border-top: 1px solid var(--line); color: var(--graphite); font-size: 1.02rem; max-width: none; }
  .pa::before { content: ""; flex: 0 0 auto; width: 34px; height: 12px; border-radius: 2px; align-self: center; background: repeating-linear-gradient(-45deg, #0a0d12 0 6px, #f6c538 6px 12px); }
  .pa b { color: var(--ink); font-weight: 600; }

  /* tile: the wall's one material, the same translucent tile the network side's sections use */
  .plate { background: var(--panel); color: var(--p-bone); border: 1px solid var(--line); border-radius: var(--r-card); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  /* porcelain: the lab's one light material, for the instrument in the hero and the seat worth taking */
  .porcelain { --p-bone: #0e1420; --p-dust: #55606d; --p-line: rgba(14,20,32,.13); --p-signal: #087a96; --p-ember: #c2560a; --p-ok: #1f9d5c; --p-vibe: #b98a00;
    background: linear-gradient(180deg, #f3f5f8, #e3e7ed); color: var(--p-bone); border-radius: var(--r-card); box-shadow: 0 1px 0 #fff inset, 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.5); }

  /* who does it: the two operator tags used on every page of this side */
  .who { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem var(--body); padding: 3px 9px 3px 7px; border-radius: 999px; white-space: nowrap; }
  .who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .who.you { color: var(--you-ink); background: var(--you-soft); } .who.agent { color: var(--agent-ink); background: var(--agent-soft); } .who.both { color: var(--ink); background: linear-gradient(90deg, var(--you-soft), var(--agent-soft)); } .who.none { color: var(--graphite); background: rgba(255,255,255,.07); }
  .porcelain .who.you { color: #a8480a; background: #ffe6cf; } .porcelain .who.agent { color: #086a85; background: #d5f0f7; } .porcelain .who.both { color: #0e1420; background: linear-gradient(90deg, #ffe6cf, #d5f0f7); } .porcelain .who.none { color: #55606d; background: rgba(14,20,32,.08); }

  /* status lights: lit is live, half is beta, ring is Insider preview, dim is coming, dashed is not yet checked */
  .st { display: inline-flex; align-items: center; gap: 7px; font: 500 .8rem var(--body); color: inherit; }
  .st::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
  .st.live::before { background: var(--p-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-ok) 22%, transparent); }
  .st.beta::before { background: linear-gradient(90deg, var(--p-vibe) 50%, transparent 50%); border: 1.5px solid var(--p-vibe); }
  .st.alpha::before { border: 2px solid var(--p-signal); }
  .st.soon::before { background: rgba(127,137,150,.5); }
  .st.tbc::before { border: 1.5px dashed currentColor; opacity: .7; }

  /* a real screenshot of the app, at the capture ratio, 16:10 (2560 by 1600, founder 2026-11-05). No bezel and no crop: the picture's corners
     are the rounded corners (founder, 2026-10-04). data-plain adds the switch to the plain dark capture of the same
     screen; data-clip adds a clip that plays on hover, preloaded before the pointer arrives (js/shots.js). */
  .shot { position: relative; margin: 0; }
  .shot .pic { position: relative; display: block; aspect-ratio: var(--ar, 16 / 10); border-radius: var(--shot-r); overflow: hidden; background: #07090d; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 40px 80px -44px rgba(0,0,0,.95); }
  .shot .pic img, .shot .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: inherit; }
  .shot .pic video { opacity: 0; transition: opacity .18s linear; }
  .shot.playing .pic video { opacity: 1; }
  .shot figcaption { margin-top: 10px; color: var(--graphite-2); font-size: .86rem; }
  .shot .shot-ui { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 2; opacity: 0; transition: opacity .25s var(--ease); }
  .shot:hover .shot-ui, .shot:focus-within .shot-ui, .shot.touched .shot-ui { opacity: 1; }
  .shot .shot-ui button, .shot .hint { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 11px; background: rgba(8,12,18,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #eef1f4; font: 600 .76rem var(--body); cursor: pointer; }
  .shot .shot-ui button[aria-pressed="true"] { background: #eef1f4; color: #0a0d12; }
  .shot .hint { position: absolute; left: 10px; bottom: 10px; z-index: 2; cursor: default; display: inline-flex; align-items: center; gap: 7px; transition: opacity .25s var(--ease); }
  .shot .hint::before { content: ""; border-left: 8px solid var(--you); border-block: 5px solid transparent; }
  .shot.playing .hint { opacity: 0; }

  /* media slot: says which clip or screenshot goes here until it is recorded. The slots are the shot list. */
  .slot { position: relative; display: grid; align-content: end; gap: 6px; aspect-ratio: 16 / 10; padding: 18px 20px; margin: 0; overflow: hidden; border-radius: var(--shot-r); color: var(--p-bone); background: radial-gradient(120% 90% at 20% 0%, #161d2a 0%, #0a0d12 62%); box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 40px 80px -44px rgba(0,0,0,.95); }
  .slot.wide { aspect-ratio: 16 / 9; }
  @media (max-width: 760px) { .slot, .slot.wide { aspect-ratio: auto; min-height: 250px; padding-top: 58px; } .slot .tri, #stations .film .slot::after { display: none; } }
  .slot::before { content: ""; position: absolute; inset: 10px; border-radius: 8px; pointer-events: none; opacity: .5; background: linear-gradient(var(--p-dust), var(--p-dust)) 0 0 / 14px 1.5px no-repeat, linear-gradient(var(--p-dust), var(--p-dust)) 0 0 / 1.5px 14px no-repeat, linear-gradient(var(--p-dust), var(--p-dust)) 100% 0 / 14px 1.5px no-repeat, linear-gradient(var(--p-dust), var(--p-dust)) 100% 0 / 1.5px 14px no-repeat, linear-gradient(var(--p-dust), var(--p-dust)) 0 100% / 14px 1.5px no-repeat, linear-gradient(var(--p-dust), var(--p-dust)) 0 100% / 1.5px 14px no-repeat, linear-gradient(var(--p-dust), var(--p-dust)) 100% 100% / 14px 1.5px no-repeat, linear-gradient(var(--p-dust), var(--p-dust)) 100% 100% / 1.5px 14px no-repeat; }
  .slot .kind { position: absolute; top: 22px; left: 24px; display: inline-flex; align-items: center; gap: 8px; font: 500 .74rem var(--mono); color: var(--p-dust); }
  .slot .kind::before { content: ""; width: 0; height: 0; border-left: 9px solid var(--p-ember); border-block: 6px solid transparent; }
  .slot.still .kind::before { width: 9px; height: 9px; border: 0; border-radius: 2px; background: var(--p-signal); }
  .slot b { font: 600 1.05rem/1.25 var(--display); max-width: 32ch; }
  .slot span { color: var(--p-dust); font-size: .9rem; max-width: 46ch; }

  footer.labfoot { margin-top: 40px; padding: 28px 0 8px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; color: var(--graphite-2); font-size: .88rem; }
  footer.labfoot img { height: 22px; width: auto; }
  footer.labfoot p { max-width: 80ch; }