/* One shot, playing by itself on the launch video's blue desktop, 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 Graves 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
   Graves'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; }
/* The stage is clear: the desktop's wallpaper (/site.css) shows through it, as round the window in the video. */
/* The room's light: what the screen throws on the wallpaper 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; }
.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; }
/* Until page.js has placed the window (first-paint.js marks a page that will run the story .story), it waits off the
   desktop rather than painting where the plain page puts it, and fades in where the camera puts it. */
.world .win { transition: opacity .5s var(--ease-sine); }
.story .stage:not([data-placed]) .world .win { opacity: 0; }
/* A phone's opening icon shows whole, once decoded (landing/phone.js), never drawn in as it loads. */
.ph-logo { transition: opacity .3s var(--ease-sine); }
.story .ph-stage:not([data-icon]) .ph-logo { opacity: 0; }
/* Without scripts nothing places it: the window sits under the headline in the page's flow, to read as it is. */
html:not(.story) .stage { display: flex; flex-direction: column; height: auto; contain: none; overflow: visible;
  padding: calc(max(18px, env(safe-area-inset-top)) + 72px) var(--gutter) 64px; }
html:not(.story) .hero { order: -1; position: static; translate: none; width: auto; }
html:not(.story) .world { position: static; width: auto; height: auto; margin-top: 40px; }
html:not(.story) .w1 { position: relative; width: auto; max-width: 1240px; height: min(820px, 78svh); margin: 0 auto; }
html:not(.story) .coda { display: none; }
.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; width: 1160px; translate: -50% 0; text-align: center; transition: opacity .9s var(--ease-sine); }
/* Under the window from the start, where a short screen would show its top: it comes in as the camera pulls back at the end.
   As wide as the window (less its margins), so a size too long for one line wraps, balanced, rather than running past it. */
.story .coda:not([data-on]) { opacity: 0; }
.coda p { margin: 0; font: 400 56px/1.15 var(--site); letter-spacing: -.01em; color: var(--coda-ink); text-wrap: balance; }
.narrow .coda { left: 390px; top: 1160px; width: 740px; }
.narrow .coda p { font-size: 78px; }

/* The headline paints immediately; the story fades it out before the window starts to zoom. */
.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; }
/* Replay, once the story has played to its end (page.js): the phone's own Play again icon (#ph-again), alone, beside
   Download for Mac. It keeps its room in the bar throughout, so nothing in it moves as it comes and goes. */
/* Replay's rewind (page.js), while the stage is faded out: everything goes straight back to the opening, with no transition. */
.stage[data-rewind] *, .stage[data-rewind] *::before, .stage[data-rewind] *::after { transition: none !important; }
.again { width: 32px; height: 32px; margin: 0 6px 0 auto; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px;
  background: none; color: var(--site-ink); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-sine), visibility 0s .3s; }
.again[data-on] { opacity: .6; visibility: visible; transition: opacity .6s var(--ease-sine); }
.again[data-on]:hover { opacity: 1; }
.again:focus-visible { outline: 2px solid var(--site-hover-line); outline-offset: 2px; }
.again svg { width: 17px; height: 17px; }
/* The owl in the headline (landing/owl-headline.js), on both the stage and the phone's: the 05 owl on its dark tile, a
   touch taller than Hanken's .70em caps and dipping just under the baseline, as an emoji does. Each word is its own box
   so the intro can open the owl's gap; the owl and "Graves," never part. The owl keeps one layer from its first paint
   on, so neither the intro's swell and fade nor their end builds or tears one down, which would redraw the tile. It
   waits hidden until the script has closed its gap up, and without scripts it is not there at all. */
h1[data-owl] .nb { white-space: nowrap; }
h1[data-owl] .w { display: inline-block; will-change: transform; }
h1[data-owl] .owl { display: inline-block; position: relative; width: .8em; height: .8em; vertical-align: -.07em; margin: 0 .02em 0 0; transform-origin: 50% 60%;
  will-change: transform, opacity; }
.story h1[data-owl]:not([data-live]) .owl { visibility: hidden; }
html:not(.story) h1[data-owl] .owl { display: none; }
/* The canvas draws the whole tile, as the 05 icon PNGs have it; its soft shadow is the icon's, at this size. */
h1[data-owl] .owl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
h1[data-owl] .owl[data-t="dark"] canvas { filter: drop-shadow(0 .012em .015em rgb(0 0 0/.32)) drop-shadow(0 .002em .002em rgb(0 0 0/.12)); }
h1[data-owl] .owl[data-t="light"] canvas { filter: drop-shadow(0 .012em .015em rgb(0 0 0/.2)) drop-shadow(0 .002em .002em rgb(0 0 0/.12)); }
.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); will-change: transform; }

/* ------------------------------------------------------------------ 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; }
/* The fill is currentColor and it is `color` that transitions, never background-color: Chrome runs a background-color
   transition on the compositor through a paint worklet, and once one has run every later commit waits on it, which held
   the story's main thread ~7 ms a frame from the first working dot on. Colour interpolates the same either way. */
.ci-dot { position: absolute; top: 11px; left: 12px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; color: var(--theme-foreground); opacity: .9;
  transition: opacity var(--motion) var(--ease-sine), 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]) { color: 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] { color: var(--ui-green); opacity: 1; }
.ci-dot[data-dot=later] { color: 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); }
/* A teammate's name over their sessions: Sessions' header, quieter. */
.ci-person { font-weight: 400; }
.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; }
/* "N more" and Add an agent: the row's grid, a 16px glyph in the face column, the words still at x 50. */
.ci-row[data-flat] .ci-lab { font-weight: 400; color: var(--t2); opacity: .8; }
.ci-glyph { position: absolute; top: 6px; left: 27px; display: grid; width: 16px; height: 16px; place-items: center; color: var(--t3); }
.ci-glyph svg { width: 14px; height: 14px; stroke-width: 2; }
.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;
  margin-right: 30px; transition: margin var(--motion) var(--ease-arrive); }
/* Send's room is kept while typing (it slides in as the margin goes), so the typed lines never rewrap. */
.typed[data-send] { margin-right: 0; }
/* Typing (page.js Typing): the rest of the line is laid out but unseen, and a letter either side of the caret keeps with it. */
.typed-rest { visibility: hidden; }
.typed-word { white-space: nowrap; }
.typed:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--ui-base) var(--placeholder-alpha), transparent); }
/* The caret takes no room: what follows it is where it would be without it. */
.caret { display: inline-block; width: 1.5px; height: 17px; background: var(--t1); vertical-align: -3px; margin: 0 -2.5px 0 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; }
/* The main session's model, thinking level and context meter (ui/composer.tsx Controls, page.js Controls), here and on a
   phone, in the app's own type (its --font-sans, the site's --sans) whatever the window round it uses: the model in the secondary ink and the level in the tertiary, each in the row's quiet 24px button; the meter's
   14px ring, from the top, over its own track at .22. */
.model { display: flex; align-items: center; margin-left: auto; font: 12.5px/1.5 var(--sans); }
.model > span { display: flex; align-items: center; height: 24px; padding: 0 5px; border-radius: 6px; color: var(--t2); }
.model > .effort { color: var(--t3); }
.model > .meter { width: 28px; margin-left: 3px; padding: 0; justify-content: center; color: var(--t3); }
.meter svg { width: 14px; height: 14px; rotate: -90deg; }
.meter circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.meter circle:first-child { opacity: .22; }

/* The window's own topmost layer: the last child of .win, whose isolation closes every other layer (the corner's 20, the couriers',
   the thread's) beneath it, and the highest z-index there is (as the page's .screen has). Nothing that comes after may sit above it. */
.pointer { position: absolute; left: 0; top: 0; width: 18px; height: 26px; z-index: 2147483647; 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}