/* One shot, playing by itself on the app's Warm paper, and the reader never leaves the main conversation. The agents the
   app offers and the rest of its catalog, each its real mark, spiral into one face in the real Volition window; from there
   one ask sets them working at once, more asks follow, the app's own couriers carry work out, and the results come back as
   Juno's own words.
   The site's type, inks, bar, buttons and footer are /site.css. */
.track { position: relative; }
.stage { position: relative; height: 100svh; min-height: 520px; overflow: hidden; contain: strict; }
/* Life's board under everything: a field the screen's light falls on, and the cursor seeds. */
.field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5;
  -webkit-mask-image: radial-gradient(62% 64% at 50% 52%, #000 0%, rgb(0 0 0/.55) 52%, transparent 100%);
  mask-image: radial-gradient(62% 64% at 50% 52%, #000 0%, rgb(0 0 0/.55) 52%, transparent 100%); }
/* The room's light: what the screen throws on the wall behind it, in the working agent's ink. */
.spill { position: absolute; inset: -20%; pointer-events: none; opacity: var(--spill); }
.spill i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-sine);
  background: radial-gradient(56% 54% at 50% 54%, color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 7%, transparent) 62%, transparent 100%); }
.spill i[data-on] { opacity: 1; }
.vignette { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(var(--room), transparent 96px, transparent calc(100% - 40px), var(--room)),
    linear-gradient(90deg, color-mix(in srgb, var(--room) 80%, transparent), transparent 4%, transparent 96%, color-mix(in srgb, var(--room) 80%, transparent)); }
.narrow .vignette { background: linear-gradient(var(--room), var(--room) 58px, transparent 112px, transparent calc(100% - 96px), var(--room)); }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* The marks on the far side of their orbit, under the window. */
.fx-back { z-index: 1; }

.world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; z-index: 1; pointer-events: none; }
.world .win { position: absolute; }
.w1 { left: 0; top: 0; width: 1240px; height: 820px; }
.w1 { --gutter-w: 48px; }
.narrow .w1 { width: 780px; height: 1100px; --gutter-w: 31px; }
.coda { position: absolute; left: 620px; top: 890px; translate: -50% 0; transition: opacity 1s var(--ease-sine), translate 1s var(--ease-arrive); }
.coda:not([data-on]) { opacity: 0; translate: -50% 10px; }
.coda p { margin: 0; font: 400 27px/1.2 var(--site); letter-spacing: -.01em; color: var(--coda-ink); white-space: nowrap; }
.narrow .coda { left: 390px; top: 1170px; }
.narrow .coda p { font-size: 38px; }

/* The headline: over the opening, fading as the marks pour into Juno, and gone before the window comes in. */
.hero { position: absolute; z-index: 4; left: 50%; top: calc(max(18px, env(safe-area-inset-top)) + 72px); translate: -50% 0; width: min(92vw, 900px);
  margin: 0; text-align: center; pointer-events: none; }
.hero h1 { margin: 0; font: 600 clamp(30px, min(5.4vw, 7.4svh), 64px)/1.04 var(--site); letter-spacing: -.025em; color: var(--site-ink); text-wrap: balance; }
.progress { position: absolute; z-index: 4; right: clamp(18px, 3.4vw, 40px); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 6px); width: 72px; height: 2px;
  background: var(--track-ink); border-radius: 2px; overflow: hidden; }
.progress i { position: absolute; inset: 0; background: var(--bar-ink); transform-origin: 0 0; transform: scaleX(0); }

/* ------------------------------------------------------------------ the window: the real app, in the page's look */
/* As the app draws it since #3655: a seamless 36px bar in the window's own colour, the thread under it, and over the
   thread's top left the corner (ui/corner.tsx, ui/corner.css), whose sizes and inks are copied here as the app has them. */
.win { border-radius: 12px; overflow: hidden; background: var(--theme-background); color: var(--t1);
  box-shadow: var(--win-shadow); container-type: inline-size;
  display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; isolation: isolate; }
.titlebar { height: 36px; flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 1px 10px 0 88px;
  background: var(--theme-background); position: relative; user-select: none; }
.lights { position: absolute; left: 14px; top: 12px; display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgb(0 0 0/.25); }
.lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tb { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: var(--t3); }
.tb-face { width: 28px; height: 28px; margin-left: 4px; display: grid; place-items: center; border-radius: 50%; }
.tb-face canvas { width: 22px; height: 22px; border-radius: 50%; }

.main { --corner-w: clamp(220px, 22cqw, 288px); flex: 1; min-height: 0; position: relative; display: flex; }
.main > .thread { padding-left: clamp(0px, 2 * var(--corner-w) + 816px - 100cqw, var(--corner-w) + 24px); }
.thread .courier { z-index: 4; }

.corner { --p: 999; --hover: color-mix(in srgb, var(--ui-base) 6%, var(--theme-background)); position: absolute; top: 8px; bottom: 8px; left: 8px; z-index: 20;
  width: var(--corner-w); color: var(--t1); pointer-events: none; }
.ci-dot { position: absolute; top: 11px; left: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--theme-foreground); opacity: .9;
  transition: opacity var(--motion) var(--ease-sine), background-color var(--motion) var(--ease-sine), box-shadow var(--motion) var(--ease-sine), transform 180ms; }
.ci-dot:not([data-working]):not([data-dot=ask]):not([data-dot=later]):not([data-dot=none]) { background: transparent; box-shadow: inset 0 0 0 1.25px var(--theme-foreground); opacity: .6; }
.ci-dot[data-working] { animation: corner-breathe 1600ms var(--ease-sine) infinite; }
.ci-dot[data-dot=ask] { background: var(--ui-green); opacity: 1; }
.ci-dot[data-dot=later] { background: transparent; box-shadow: inset 0 0 0 1.25px var(--ui-green); opacity: .8; }
/* An agent ready for work has no dot (ui/corner.tsx AgentRow). */
.ci-dot[data-dot=none] { opacity: 0; }
@keyframes corner-breathe { 50% { opacity: .25; transform: scale(.8); } }

.corner-v { position: absolute; top: 0; left: 0; width: 100%; height: 32px; }
.corner-v::before { content: ''; position: absolute; inset: 0; border-radius: 8px; background: var(--hover); opacity: 0; transition: opacity 120ms var(--ease-sine); }
.corner-v[data-on]::before { opacity: 1; }
.corner-v .ci-dot { top: 13px; }
.corner-v-face { position: absolute; top: 6px; left: 25px; width: 20px; height: 20px; border-radius: 5px; }
.corner-v-face canvas { display: block; width: 20px; height: 20px; border-radius: 5px; }
.corner-v-text { position: absolute; top: 8px; right: 10px; left: 50px; height: 16px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.corner-v-name { font-size: 13px; font-weight: 600; line-height: 16px; letter-spacing: -.01em; }
.corner-v-says { margin-left: auto; font-size: 11px; color: var(--t3); opacity: 0; transform: translateX(4px); transition: opacity 140ms var(--ease-sine), transform 200ms var(--ease-arrive); }
.corner-v[data-on] .corner-v-says { opacity: 1; transform: none; }

.ci { --shift: calc(clamp(0, var(--i, 0) - var(--p), 1) * 18px); position: absolute; top: 0; left: 0; width: 100%;
  transform: translate3d(var(--x, 0px), calc(var(--y, 0px) + var(--shift)), 0);
  transition: transform 320ms var(--ease-arrive), opacity 200ms var(--ease-sine); }
.ci:not([data-on]) { opacity: 0; --x: -6px; }
.ci-head { height: 24px; display: flex; align-items: center; padding: 0 4px 0 12px; }
.ci-tog { display: inline-flex; height: 24px; align-items: center; gap: 6px; padding-right: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--t3); }
.ci-caret { width: 12px; height: 12px; margin-left: -2px; opacity: 0; rotate: 90deg; }
.ci-count { min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--ui-green) 16%, transparent);
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 16px; text-align: center; color: var(--ui-green);
  transition: opacity 160ms var(--ease-sine), transform 260ms var(--ease-arrive); }
.ci-count:not([data-on]) { opacity: 0; transform: scale(.5); }
/* The Agents header's +, quiet until the pointer is over it. */
.ci-add { display: grid; width: 22px; height: 22px; margin-left: auto; place-items: center; border-radius: 6px; color: var(--t3); opacity: .75; }
.ci-add svg { width: 14px; height: 14px; }
.ci-row { height: 46px; color: var(--t2); }
.ci-wa, .ci-wb { position: absolute; top: 0; right: 0; left: 0; height: 28px; border-radius: 8px; background: var(--hover); opacity: 0;
  transition: opacity 120ms var(--ease-sine), transform 160ms var(--ease-arrive); }
.ci[data-peek] :is(.ci-wa, .ci-wb) { opacity: 1; transition: opacity 90ms var(--ease-sine), transform 200ms var(--ease-arrive); }
.ci[data-peek] .ci-wb { transform: translateY(18px); }
.ci-tick { position: absolute; top: 8px; left: 9px; width: 12px; height: 12px; color: var(--t1); opacity: 0; transform: scale(.5);
  transition: opacity 120ms var(--ease-sine) 60ms, transform 260ms var(--ease-arrive) 60ms; }
.ci-tick svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ci-row[data-done] .ci-dot { opacity: 0; transform: scale(.3); animation: none; }
.ci-row[data-done] .ci-tick { opacity: 1; transform: none; }
.ci-row[data-inbox] .ci-tick { color: var(--ui-green); }
.ci-face { position: absolute; top: 6px; left: 27px; width: 16px; height: 16px; border-radius: 4px; overflow: hidden; }
.ci-face img, .ci-face canvas { display: block; width: 16px; height: 16px; border-radius: 4px; }
.ci-face[data-life], .ci-face[data-life] canvas { border-radius: 5px; }
/* A working logo: a band of light crosses it. */
.ci-face[data-working]::after { content: ''; position: absolute; inset: 0 auto 0 -100%; width: 100%; mix-blend-mode: soft-light;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255/.7) 50%, transparent 80%); animation: corner-sweep 1800ms var(--ease-sine) infinite; }
@keyframes corner-sweep { to { transform: translateX(200%); } }
.ci-l1 { position: absolute; top: 6px; right: 10px; left: 50px; height: 16px; display: flex; align-items: center; gap: 8px; }
.ci-lab { min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 500; line-height: 16px; letter-spacing: -.005em; white-space: nowrap; text-overflow: ellipsis;
  color: var(--t1); opacity: .74; transition: opacity 140ms var(--ease-sine); }
.ci[data-peek] .ci-lab, .ci-row[data-group=now] .ci-lab { opacity: 1; }
.ci-row[data-ag] .ci-lab { opacity: .86; }
.ci-l2 { position: absolute; top: 24px; right: 10px; left: 50px; height: 16px; display: flex; gap: 10px; font-size: 11.5px; line-height: 16px; white-space: nowrap;
  color: var(--t3); opacity: 0; transform: translateY(-4px); transition: opacity 100ms var(--ease-sine), transform 160ms var(--ease-arrive); }
.ci[data-peek] .ci-l2 { opacity: 1; transform: none; transition: opacity 200ms var(--ease-arrive) 40ms, transform 200ms var(--ease-arrive); }
.ci-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ci-meta { flex: none; margin-left: auto; font-size: 11px; }
.ci-row[data-inbox] .ci-l1 { right: 38px; }
.ci[data-fresh] .ci-wa { animation: corner-tint 2.7s var(--ease-sine) both; }
@keyframes corner-tint { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sd { width: 6px; height: 6px; border-radius: 50%; background: var(--theme-foreground); opacity: .35; flex-shrink: 0; transition: opacity .6s; }
@keyframes breathe { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
/* The courier's own layer (ui/courier.tsx): a dot riding an arc from one session's dot to another's. */
.courier { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.courier span { position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--theme-foreground); offset-rotate: 0deg; opacity: 0; }

.thread { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; background: var(--theme-background); }
.views { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; overflow: hidden; padding: 24px var(--gutter-w, 48px) 0; }
.col { position: relative; max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; padding-bottom: 32px; transition: transform 520ms var(--ease-arrive); }
.msg:not([data-on]), .status:not([data-on]) { display: none; }
.msg[data-on], .status[data-on] { animation: arrive var(--motion) var(--ease-arrive) both; }
.msg.you { align-self: flex-end; max-width: 85%; border-radius: 10px; background: var(--row-active); padding: 8px 12px; }
.body { font-size: 14px; line-height: 1.714; color: var(--t1); }
/* Prose as the app's Markdown sets it (styles.css .aui-md, Typography's prose-sm): 14/24, paragraphs 16 px apart. */
.body p { margin: 0; } .body p + p { margin-top: 16px; }
.body p[data-k]:not([data-on]) { display: none; } .body p[data-k][data-on] { animation: arrive var(--motion) var(--ease-arrive) both; }
.body a { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--s1); }
/* The sessions a message started, each a chip under it (ui/thread.tsx Started, ui/crew.tsx HandOff). */
.chips { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 40px; }
.chip { height: 28px; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 1px solid var(--s2); font-size: 12px; color: var(--t3); white-space: nowrap; }
.chip:not([data-on]) { display: none; } .chip[data-on] { animation: arrive var(--motion) var(--ease-arrive) both; }
.chip img { width: 16px; height: 16px; border-radius: 4px; }
.chip b { font-weight: 500; color: var(--t1); }
.chips.solo { margin-top: 0; }
.chips.solo:not(:has(.chip[data-on])) { display: none; }
/* A worker's ask in the thread: its asker's mark and name over its words. */
.asker { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--t3); }
.asker img { width: 20px; height: 20px; border-radius: 2px; }
/* An opened ask's answers (ui/ask.tsx PILL): pills under its turn, Reply last. */
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pills:not([data-on]) { display: none; } .pills[data-on] { animation: arrive var(--motion) var(--ease-arrive) both; }
.pills span { display: inline-flex; align-items: center; gap: 6px; padding: 2px 14px; border-radius: 999px; border: 1px solid var(--s1);
  font-size: 13px; line-height: 20px; white-space: nowrap; color: var(--t1); }
.pills .reply { padding-left: 10px; color: var(--t2); } .pills svg { width: 16px; height: 16px; }
.status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3); }
.status .sd { margin: 0 4px; opacity: .9; animation: breathe 2.4s var(--ease-sine) infinite; }
.words { display: inline-grid; }
.words > span { grid-area: 1/1; position: relative; overflow: clip; white-space: nowrap; }
/* The status line's shine (styles.css .shine): the words again in the foreground ink, through a moving band. */
.words > span::after { content: attr(data-text); position: absolute; inset: 0; color: var(--t1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 36%, #000 50%, transparent 64% 100%); mask-image: linear-gradient(90deg, transparent 0 36%, #000 50%, transparent 64% 100%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; animation: shine 2.6s var(--ease-sine) infinite; }
@keyframes shine { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 70%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }

.composer { flex-shrink: 0; width: calc(100% - 2 * var(--gutter-w, 48px)); max-width: 768px; margin: 0 auto 12px; display: flex; flex-direction: column; gap: 4px; }
.box { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--stroke-input); background: var(--theme-input); padding: 5px 5px 5px 14px;
  box-shadow: var(--shadow-input); transition: border-color .2s; }
.box[data-on] { border-color: var(--stroke-input-focus); }
.box .row { display: flex; align-items: flex-end; }
.typed { flex: 1; min-height: 28px; padding: 3px 0; font-size: 15px; line-height: 22px; letter-spacing: -.005em; white-space: pre-wrap; }
.typed:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--ui-base) var(--placeholder-alpha), transparent); }
.caret { display: inline-block; width: 1.5px; height: 17px; background: var(--t1); vertical-align: -3px; margin-left: 1px; animation: blink 1.1s steps(1) infinite; }
.mic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--t2); }
.mic svg { width: 17px; height: 17px; }
/* Send takes its place beside the microphone only once there are words to send. */
.send { width: 0; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--t1); color: var(--theme-background); opacity: 0; scale: .9;
  transition: opacity .12s, scale .12s, width var(--motion) var(--ease-arrive), margin var(--motion) var(--ease-arrive); }
.send svg { width: 15px; height: 15px; stroke-width: 2.25; }
.send[data-on] { width: 28px; margin-left: 2px; opacity: 1; scale: 1; }
.controls { display: flex; align-items: center; min-height: 26px; padding: 0 8px 0 9px; font-size: 12.5px; color: var(--t2); }
.controls > span { display: flex; align-items: center; height: 24px; padding: 0 5px; border-radius: 6px; }
.controls svg { width: 16px; height: 16px; }

.pointer { position: absolute; left: 0; top: 0; width: 18px; height: 26px; z-index: 11; pointer-events: none; will-change: transform; filter: drop-shadow(0 1px 1.5px rgb(0 0 0/.5)); transition: opacity .4s; }
.pointer:not([data-on]) { opacity: 0; }
.pointer::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--press-ring); opacity: 0; scale: .4; }
.pointer[data-press]::after { animation: press .5s var(--ease-arrive); }
@keyframes press { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.6; } }
.narrow .pointer { display: none; }

.landing-style-0 {color:#b9a6f2}
.landing-style-1 {color:#d97757}
.landing-style-2 {color:#3d8ff5}
.landing-style-4 {flex:1}