/* Atom, heyatom.ai. Atom panel colors from SuperVoiceIdentity.swift, General Sans. Amber only means "needs you". */

:root {
  --raised: #f1f1ef;
  --raised-deep: #e6e5e2;
  --ink: #1c1b1a;
  --muted: #6f6d69;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --accent-hover: #1d4fd0;
  --brand: #2563eb;
  --brand-deep: #1a47bd;
  --brand-ink: #ffffff;
  --brand-muted: #edf2ff;
  --brand-faint: #f2f6ff;
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --dark: #121211;

  /* Atom panel, dark appearance */
  --sv-surface: #1c1c1b;
  --sv-raised: #262625;
  --sv-rail: #151514;
  --sv-fg: #ffffff;
  --sv-muted: #a3a19d;
  --sv-faint: #86847f;
  --sv-amber: #ffb020;
  --sv-tint: #5c9eff;

  /* Atom, light appearance */
  --paper: #fcfcfb;
  --paper-raised: #f1f1ef;
  --paper-fg: #1c1b1a;
  --paper-muted: #6f6d69;

  --font: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace; /* taste-skill-ignore: Atom panel's own tool-step and owner-words styling */

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.5rem, 7vw, 6.5rem);

  --margin: max(16px, 3vw);
  --wrap: 1240px;
  /* Side padding that keeps content in a centered --wrap column while the section background runs full bleed. */
  --gutter: max(var(--margin), calc((100% - var(--wrap)) / 2));
  --radius: 6px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius);
  font-weight: 500; font-size: var(--step-body); text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
/* Apple glyph on download buttons: inherits the button ink and sits on the label baseline. */
.btn__apple { flex: none; width: 0.82em; height: 1em; margin-right: 0.45em; transform: translateY(-0.08em); }
.btn--small { min-height: 44px; padding: 0 16px; font-size: var(--step-small); }
.btn--light { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-hover); }
  .btn--light:hover { background: #ffffff; }
}
.link { font-weight: 500; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }

/* ---------- top corner links, ink follows the chapter beneath ---------- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  color: var(--top-ink, var(--ink));
  background: var(--top-bg, var(--paper));
  transition: color 300ms var(--ease-out), background-color 300ms var(--ease-out);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.top[data-ink="paper"] { --top-ink: var(--paper); }
.top[data-bg="ink"] { --top-bg: var(--ink); }
.top[data-bg="paper"] { --top-bg: var(--paper); }
.top[data-bg="raised"] { --top-bg: var(--raised); }
.top[data-bg="brand"] { --top-bg: var(--brand); --top-ink: var(--brand-ink); }
.top[data-bg="brand"] .btn { background: var(--brand-ink); color: var(--brand); }
.top__mark { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; text-decoration: none; }
.top__links { display: flex; align-items: center; gap: 22px; font-size: var(--step-small); font-weight: 500; }
.top__links a:not(.btn) { text-decoration: none; padding: 12px 0; }
@media (hover: hover) and (pointer: fine) {
  .top__links a:not(.btn):hover { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* ---------- floating download, only between the hero and the download section ---------- */
.float-dl {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
  min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: var(--step-small);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s 180ms;
}
.float-dl.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s; }
.float-dl.is-on:active { transform: scale(0.97); }

/* ---------- hero ---------- */
.hero { background: var(--brand); color: var(--brand-ink); }
.hero .hero__note, .hero .run__name label { color: var(--brand-muted); }
.hero .btn { background: var(--brand-ink); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .hero .btn:hover { background: #eef3ff; } }
.hero .run__name-input { background: rgba(255, 255, 255, 0.16); color: var(--brand-ink); caret-color: var(--brand-ink); }
.hero .stage__pause { color: var(--brand-ink); }
.hero {
  padding: clamp(88px, 11vh, 120px) var(--gutter) clamp(48px, 7vh, 80px);
  overflow: hidden;
}
.hero__title {
  max-width: 18ch;
  font-size: clamp(2.5rem, min(5vw, 7.2vh), 4.75rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.hero__copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px 40px; }
.hero__copy > .hero__act { align-self: center; justify-self: center; }
.hero__sub { margin-top: clamp(16px, 2.5vh, 24px); }
.hero__sub { max-width: 52ch; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; }
.hero__act { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero__note { font-size: var(--step-small); color: var(--muted); }

/* ---------- the deck: agents at work ---------- */
.deck { margin-top: clamp(28px, 4vh, 44px); }
.deck__screen {
  position: relative;
  height: clamp(460px, 38vw, 560px);
  padding: 14px;
  background: var(--dark);
  border-radius: 12px;
  overflow: hidden;
  color: var(--sv-fg);
}
.panes { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; width: 60%; height: 100%; }
.pane { display: flex; flex-direction: column; min-height: 0; background: var(--sv-surface); border-radius: 8px; overflow: hidden; }
.pane__bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--sv-raised); font-size: 0.8125rem; }
.pane__name { font-weight: 500; }
.pane__kind { color: var(--sv-muted); }
.pane__state { margin-left: auto; color: var(--sv-muted); transition: color 160ms var(--ease-out); }
.pane__state--needs { padding: 2px 8px; border-radius: 999px; background: var(--sv-amber); color: #1d1d1f; font-weight: 500; }
.pane__out { margin: 0; padding: 12px; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; color: #d8d6d1; white-space: pre-wrap; overflow: hidden; } /* taste-skill-ignore: terminal pane output and needs-you outline */
.pane__out code { font: inherit; }
.pane__out .ok { color: #55d48c; }
.pane__out .dim { color: var(--sv-faint); }
.spin { display: inline-block; width: 10px; height: 10px; margin-left: 6px; border: 1.5px solid var(--sv-faint); border-right-color: transparent; border-radius: 50%; animation: spin 0.9s linear infinite; vertical-align: -1px; }
.pane--needs { box-shadow: inset 0 0 0 1.5px var(--sv-amber); } /* taste-skill-ignore: terminal pane output and needs-you outline */
.pane__ask { padding: 14px 12px; display: grid; gap: 12px; font-size: 0.875rem; }
.pane__btns { display: flex; gap: 8px; }
.pane__btn { padding: 6px 14px; border-radius: 6px; background: var(--sv-raised); font-size: 0.8125rem; }
.pane__btn--yes { background: var(--sv-fg); color: #1d1d1f; font-weight: 500; }
.deck .deck__editor { left: auto; right: 14px; top: auto; bottom: 14px; width: calc(40% - 38px); height: 38%; }
.deck .deck__panel { right: 14px; top: 14px; bottom: auto; width: calc(40% - 38px); min-width: 0; }
.js .deck [data-deck-owner], .js .deck [data-deck-step], .js .deck [data-deck-reply], .js .deck [data-auth-merge] {
  opacity: 0; transition: opacity 260ms var(--ease-out);
}
.js .deck .is-on { opacity: 1 !important; }

/* ---------- the run ---------- */
.hero__title span { display: block; }
.said { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; min-height: 2.6em; }
.said__tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step-small); font-weight: 500; color: var(--brand-muted); }
.said__dot { flex: none; width: 10px; height: 10px; transform: translateY(-0.1em); border-radius: 50%; background: var(--brand-muted); transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.said__dot.is-live { background: #ffffff; animation: pulse 1s ease-in-out infinite; }
.said__text { max-width: 40ch; font-size: clamp(1.375rem, 2.3vw, 2rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--brand-ink); }
.said__draft { color: var(--brand-muted); }
.run__name { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: var(--step-body); font-weight: 500; }
.run__name label { color: var(--muted); }
.run__name-input {
  width: 6.5em; padding: 2px 8px;
  border: 0; border-radius: var(--radius);
  background: var(--raised); color: var(--ink);
  font-size: var(--step-body); font-weight: 700;
}
.run__screen { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; height: clamp(400px, 31vw, 460px); }
.run__panes { display: grid; grid-auto-rows: 1fr; gap: 10px; min-height: 0; }
.run__panes:empty::before { content: "No agents yet"; align-self: center; justify-self: center; color: var(--sv-faint); font-size: var(--step-small); }
.run__panes .pane.is-new { animation: unfold 560ms var(--ease-reveal) both; }
@keyframes unfold { from { clip-path: inset(0 0 100% 0 round 8px); opacity: 0.4; } to { clip-path: inset(0 0 0 0 round 8px); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.pane__bar { position: relative; }
.pane__bar::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(92, 158, 255, 0.24);
  opacity: 0; transition: opacity 600ms ease;
  pointer-events: none;
}
.pane.is-addressed .pane__bar::after { opacity: 1; transition-duration: 160ms; }
.pane__out .bad { color: #e26a52; }
.pane__call { display: grid; gap: 14px; padding: 14px 14px 16px; overflow: hidden; }
.pane--call .lt__text { font-size: 0.875rem; }
.pane--call .pane__state { color: var(--sv-tint); }
.deck .run__panel { position: static; width: auto; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.run__feed { font-size: 0.8125rem; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.run__feed > * { flex: none; }
.run__feed > .is-new { animation: arrive 360ms var(--ease-out) both; }
.run__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.run__steps { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.run__steps li { position: relative; z-index: 1; }

.run__steps button {
  min-height: 36px; padding: 0 12px;
  border: 0; border-radius: 999px;
  background: rgba(10, 30, 90, 0.24); color: var(--brand-faint);
  font-size: var(--step-small); font-weight: 500; cursor: pointer;
  transition: background-color 240ms ease, color 240ms ease, transform 160ms var(--ease-out);
}
.run__steps button:active { transform: scale(0.97); }
.run__steps button[aria-selected="true"] { background: var(--brand-ink); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .run__steps button:not([aria-selected="true"]):hover { background: rgba(10, 30, 90, 0.4); } }

/* ---------- the desktop: a fixed 1280 by 780 canvas scaled to its column ---------- */
.run { margin-top: clamp(24px, 4vh, 40px); }
.run .run__foot { margin: 0 0 16px; }
.desk { position: relative; margin-right: 96px; }
.desk__canvas {
  position: relative; width: 1280px; height: 720px;
  transform-origin: top left;
  border-radius: 14px; overflow: hidden;
  background: #0d1b33;
  color: var(--sv-fg);
}
.desk__wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menubar {
  position: absolute; inset: 0 0 auto 0; height: 28px;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: rgba(10, 20, 40, 0.42);
  font-size: 13px; color: #ffffff;
}
.menubar__app { font-weight: 700; }
.menubar__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.menubar__atom { width: 12px; height: 12px; border-radius: 50%; background: var(--sv-tint); }
.mwin { position: absolute; border-radius: 12px; overflow: hidden; background: var(--sv-surface); }
.mwin__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: var(--sv-raised); font-size: 13px; color: var(--sv-muted); }
.mwin__bar i { width: 11px; height: 11px; border-radius: 50%; background: #5a5955; }
.mwin__bar i:first-child { background: #ff5f57; } .mwin__bar i:nth-child(2) { background: #febc2e; } .mwin__bar i:nth-child(3) { background: #28c840; }
.mwin__bar span { margin-left: 10px; }
.mwin__rec { margin-left: auto !important; color: #ff6b5e; }
.mwin--meet.is-ended .mwin__rec { color: var(--sv-faint); }
.mwin--meet, .mwin--editor { left: 36px; top: 54px; width: 640px; height: 378px; }
.mwin--term { left: 700px; top: 54px; width: 544px; height: 400px; display: flex; flex-direction: column; }
.mwin--term .run__panes { flex: 1; padding: 8px; }
/* The compact companion, docked bottom right (SVCompanionView): status card with the face, reply box above it. */
.comp { position: absolute; right: 22px; bottom: 22px; width: 360px; display: grid; gap: 8px; justify-items: end; }
.comp__reply {
  max-width: 360px; padding: 12px 14px; border-radius: 14px;
  background: var(--sv-surface); color: var(--sv-fg); font-size: 14px; line-height: 1.45;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* taste-skill-ignore: reply box border, as in the app */
  opacity: 0; transition: opacity 200ms ease;
}
.comp__reply.is-on { opacity: 1; }
.comp__card {
  display: flex; align-items: center; gap: 12px; width: 360px; padding: 12px 12px 12px 14px;
  border-radius: 16px; background: rgba(38, 38, 37, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.35); /* taste-skill-ignore: floating companion card */
}
.comp__text { flex: 1; min-width: 0; }
.comp__head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sv-muted); }
.comp__head b { color: var(--sv-fg); font-weight: 600; }
.comp__head .panel__status { color: var(--sv-muted); }
.comp__doppler { display: inline-flex; align-items: center; gap: 2px; margin-right: 2px; }
.comp__doppler i { width: 2px; height: 6px; border-radius: 1px; background: var(--sv-muted); }
.comp__doppler i:nth-child(2) { height: 10px; }
.comp__step { margin-top: 3px; font-size: 14px; color: var(--sv-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp__ctx { display: block; margin-top: 9px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.1); }
.comp__ctx span { display: block; width: 14%; height: 100%; border-radius: 1px; background: #5fa38f; }
.comp__face {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 58px; height: 58px; border-radius: 16px; background: #1c1c1e;
  box-shadow: inset 0 0 0 2px #2c2c2e; /* taste-skill-ignore: face housing */
}
.comp__face i { width: 9px; height: 18px; border-radius: 5px; background: #7fd3ea; transition: height 200ms var(--ease-out), width 200ms var(--ease-out), opacity 200ms ease; animation: eyeBlink 4.8s infinite; }
@keyframes eyeBlink { 0%, 94%, 100% { opacity: 1; } 97% { opacity: 0.15; } }
.comp__face[data-face-state="hearing"] i { width: 11px; height: 23px; }
.comp__face[data-face-state="working"] i, .comp__face[data-face-state="thinking"] i { width: 13px; height: 8px; }
.comp__face[data-face-state="idle"] i { width: 13px; height: 3px; opacity: 0.6; }
.comp__face[data-face-state="speaking"] i { animation: talkEyes 0.5s ease-in-out infinite alternate; }
@keyframes talkEyes { from { transform: scaleY(0.85); } to { transform: scaleY(1.1); } }
.tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.tile { position: relative; margin: 0; border-radius: 8px; overflow: hidden; height: 236px; background: #111; }
.tile--self { position: absolute; right: 18px; bottom: 18px; width: 132px; height: 92px; z-index: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } /* taste-skill-ignore: self-view overlay */
.tile img { width: 100%; height: 100%; object-fit: cover; }
.face { position: absolute; inset: 0; display: block; }
.face__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.face__talk { opacity: 0; transition: opacity 180ms ease; }
.face.is-talking .face__talk { opacity: 1; transition-duration: 120ms; }
.tile figcaption { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); font-size: 12px; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 3px #3ddc84; opacity: 0; transition: opacity 200ms ease; } /* taste-skill-ignore: active speaker outline, as in call apps */
.tile.is-speaking::after { opacity: 1; }
.mwin--meet.is-ended .tile { opacity: 0.45; transition: opacity 400ms ease; }
.caption { margin: 0 10px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.5); font-size: 15px; line-height: 1.4; color: #f2f1ee; min-height: 64px; }
.caption b { margin-right: 6px; color: var(--sv-tint); font-weight: 600; }
.mwin__code { margin: 0; padding: 18px 20px; font-family: var(--mono); font-size: 14px; line-height: 1.7; color: #d8d6d1; white-space: pre; } /* taste-skill-ignore: code in the editor window */
.mwin__code code { font: inherit; }
.c-k { color: #c792ea; } .c-s { color: #f0b66d; }
.dock {
  position: absolute; left: 43%; bottom: 10px; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 8px; padding: 7px 10px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); /* taste-skill-ignore: dock edge */
}
.dock__i { display: block; width: 54px; height: 54px; }
.dock__tile { position: relative; }
.dock__tile::before { content: ""; position: absolute; inset: 9%; border-radius: 22%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* taste-skill-ignore: Codex app tile */
.dock__tile img { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); }
.dock__sep { width: 1px; align-self: stretch; margin: 4px 2px; background: rgba(255, 255, 255, 0.35); }
.pane__kind { display: inline-flex; align-items: center; gap: 5px; }
.pane__icon { width: 16px; height: 16px; border-radius: 4px; }
.pane__icon--codex { display: inline-grid; place-items: center; background: #ffffff; }
.pane__icon--codex img { width: 11px; height: 11px; }
.nowrap { white-space: nowrap; }
.inline-icon { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin: 0 2px; }

/* ---------- the opening: messy windows and Atom's rocket cursor ---------- */
.mwin.is-messy { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); } /* taste-skill-ignore: overlapping windows */
.mwin.is-grabbed { box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(127, 211, 234, 0.8); z-index: 3; } /* taste-skill-ignore: window being dragged */
.tiles__wait { grid-column: 1 / -1; display: grid; place-items: center; height: 236px; margin: 0; border-radius: 8px; background: #141414; color: var(--sv-muted); font-size: 15px; }
.rocket { position: absolute; left: 0; top: 0; width: 40px; height: 40px; z-index: 5; opacity: 0; pointer-events: none; transition: opacity 200ms ease; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); } /* taste-skill-ignore: Atom's cursor */
.rocket.is-on { opacity: 1; }
.rocket svg { display: block; }
.rocket__flame { transform-box: fill-box; transform-origin: top center; animation: flame 0.16s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scaleY(1.35); } }
.rocket__star { position: absolute; z-index: 4; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffe7a8; pointer-events: none; }
.rocket__beacon { position: absolute; z-index: 4; width: 40px; height: 40px; margin: -20px; border-radius: 50%; box-shadow: 0 0 0 3px #7fd3ea; pointer-events: none; } /* taste-skill-ignore: click beacon */

/* ---------- the webcam circle and what you say ---------- */
.cam { position: absolute; right: -104px; top: 96px; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; z-index: 2; }
.cam__face { position: relative; width: 156px; height: 156px; flex: none; }
.cam__clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #ffffff, 0 12px 32px rgba(8, 20, 60, 0.35); } /* taste-skill-ignore: streamer webcam overlay */
.cam__clip > img { width: 100%; height: 100%; object-fit: cover; }
.cam__ring { position: absolute; inset: -9px; border-radius: 50%; box-shadow: 0 0 0 3px #3ddc84; opacity: 0; transition: opacity 200ms ease; } /* taste-skill-ignore: speaking ring */
.cam__ring.is-live { opacity: 1; animation: pulse 1s ease-in-out infinite; }
.cam__bubble {
  position: relative; max-width: 420px; margin-bottom: 64px; padding: 14px 18px;
  border-radius: 18px 18px 4px 18px;
  background: #ffffff; color: var(--ink);
  font-size: 19px; font-weight: 500; line-height: 1.35;
  opacity: 0; transform: translateY(8px) scale(0.97); transform-origin: bottom right;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  box-shadow: 0 12px 32px rgba(8, 20, 60, 0.3); /* taste-skill-ignore: floating speech bubble */
}
.cam__bubble.is-on { opacity: 1; transform: none; }
.cam__bubble .said__draft { color: var(--muted); }
html:not(.js) .cam__bubble { opacity: 1; transform: none; }

/* ---------- Atom, talking back from the bottom left ---------- */
.bot { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; z-index: 2; }
.bot__face { position: relative; width: 132px; height: 132px; flex: none; }
/* Atom as a holographic figure of light, after the reference image: cyan glow, violet accents, sparkles at the edge. */
.bot__clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #0b1636; box-shadow: 0 0 0 3px rgba(127, 211, 234, 0.9), 0 0 28px 6px rgba(92, 158, 255, 0.55), 0 0 60px 14px rgba(177, 140, 255, 0.25); animation: holoGlow 3.2s ease-in-out infinite alternate; } /* taste-skill-ignore: holographic glow */
.bot__clip > img { width: 100%; height: 100%; object-fit: cover; }
@keyframes holoGlow { to { box-shadow: 0 0 0 3px rgba(127, 211, 234, 1), 0 0 36px 10px rgba(92, 158, 255, 0.7), 0 0 80px 20px rgba(177, 140, 255, 0.35); } } /* taste-skill-ignore: holographic glow */
.bot.is-talking .bot__clip { animation-duration: 0.9s; }
.bot__spark { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #e6f6ff; transform: rotate(var(--a)) translateX(72px); opacity: 0; animation: spark 2.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes spark { 0%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(66px) scale(0.6); } 40% { opacity: 1; transform: rotate(var(--a)) translateX(76px) scale(1); } 70% { opacity: 0.4; transform: rotate(calc(var(--a) + 14deg)) translateX(82px) scale(0.8); } }
.bot .face__v { border-radius: 50%; }
.bot .cam__ring { box-shadow: 0 0 0 3px #7fd3ea; } /* taste-skill-ignore: speaking ring */
.bot__bubble { font-style: italic; border-radius: 18px 18px 18px 4px; transform-origin: bottom left; margin-bottom: 56px; }

/* Hero, top down: headline, subline, button, then the desktop at the full content width with
   the webcam and Atom hanging off its edges, and the scenario pills in a row underneath. */
.hero__act { display: inline-grid; justify-items: start; gap: 12px; }
.hero__note { width: 0; min-width: 100%; }
.run { display: flex; flex-direction: column; }
.run .run__foot { order: 2; margin: 18px 0 0; align-items: flex-start; }
@media (min-width: 1101px) {
  .desk { margin-right: 0; }
  .cam { right: -28px; }
  .bot { left: -28px; }
}
@media (min-width: 1400px) {
  .cam { right: -64px; }
  .bot { left: -56px; }
}

@media (max-width: 1100px) {
  .hero__act .btn { white-space: nowrap; }
  .desk { margin-right: 0; }
  .cam { right: 8px; top: auto; bottom: -36px; }
  .cam__face { width: 112px; height: 112px; }
  .cam__bubble { font-size: 16px; max-width: 320px; margin-bottom: 40px; }
  .bot__face { width: 96px; height: 96px; }
}
@media (max-width: 760px) {
  .desk__canvas { width: auto; height: auto; padding: 40px 10px 176px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .menubar { height: 26px; gap: 10px; font-size: 12px; }
  .menubar span:not(.menubar__app):not(.menubar__right) { display: none; }
  .mwin { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .comp { position: relative; right: auto; bottom: auto; width: auto; justify-items: stretch; }
  .comp__card, .comp__reply { width: auto; max-width: none; }
  .mwin--editor, .dock { display: none; }
  .tiles { height: auto; }
  .caption { font-size: 14px; margin-bottom: 10px; }
  .mwin--term .run__panes { grid-auto-rows: auto; }
  .mwin--term .pane__out { max-height: 88px; }
  /* Zero height so the webcam row rises into the canvas's empty lower padding and leaves Atom its own row below. */
  .cam { position: relative; inset: auto; height: 0; margin: 0 10px; transform: translateY(-14px); justify-content: flex-end; }
  .tile { height: 120px; }
  .run__steps { gap: 6px; }
  .run__steps button { min-height: 44px; padding: 0 12px; }
  .tile--self { width: 72px; height: 54px; right: 14px; bottom: 14px; }
  .cam__face { width: 84px; height: 84px; }
  .cam__bubble { font-size: 15px; margin-bottom: 30px; max-width: none; }
  .bot { position: relative; left: auto; bottom: auto; margin: 14px 0 0; }
  .bot__face { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .cam__bubble { transform: none; transition: opacity 200ms linear; }
  .cam__ring.is-live { animation: none; }
  .comp__face i { animation: none; }
  .bot__clip, .bot__spark, .rocket__flame { animation: none; }
}

/* ---------- included: dictation and rewrite, one story in a chat window, a fixed 1200 by 600 stage scaled to the column ---------- */
.incl { background: var(--raised); padding: clamp(96px, 14vh, 160px) var(--gutter); }
.incl__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.incl__p { max-width: 44ch; font-size: var(--step-lead); line-height: 1.3; }
.dfilm { margin: 48px 0 0; }
.dfilm__frame { position: relative; }
.dfilm__stage { position: relative; width: 1200px; height: 600px; transform-origin: top left; }
.dfilm__foot { display: flex; justify-content: flex-end; margin-top: 20px; }
.dw {
  border-radius: 12px; overflow: hidden; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(28, 27, 26, 0.07), 0 24px 60px rgba(28, 27, 26, 0.16); /* taste-skill-ignore: floating app window */
}

/* the key: no typing, just hold right Option */
.dkey { position: absolute; left: 0; top: 150px; z-index: 3; width: 420px; padding: 10px; border-radius: 18px; background: var(--sv-surface); color: var(--sv-fg); outline: 3px solid transparent; outline-offset: 2px; transition: outline-color 260ms ease; }
.dkey.is-held { outline-color: #3ddc84; }
.dkey__view { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.dkey__clip { width: 100%; height: 100%; object-fit: cover; }
.dkey__no { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 420ms var(--ease-out), visibility 0s 420ms; }
.dkey__no img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dkey__no.is-gone { opacity: 0; visibility: hidden; }
.dkey__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px 2px; font-size: 14px; color: var(--sv-muted); }
.dkey__cap kbd { padding: 3px 9px; border-radius: 6px; background: var(--sv-raised); color: var(--sv-fg); font: inherit; font-weight: 600; }
.dkey.is-held .dkey__cap > span { color: #3ddc84; }
.nokb { position: relative; width: 132px; height: 132px; border-radius: 50%; box-shadow: inset 0 0 0 13px #e5322d; opacity: 0; transform: scale(1.8) rotate(-14deg); } /* taste-skill-ignore: the no sign */
.nokb::after { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 13px; margin-left: -6.5px; background: #e5322d; transform: rotate(-45deg); }
.nokb.is-on { opacity: 1; transform: none; transition: opacity 120ms ease, transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* the speaker's webcam, live while they talk */
.dcam { position: absolute; left: 24px; top: 0; z-index: 4; width: 128px; height: 128px; opacity: 0; transform: scale(0.75); transition: opacity 300ms var(--ease-out), transform 480ms var(--ease-reveal); }
.dcam.is-on { opacity: 1; transform: none; }
.dcam.is-talking { transform: scale(1.06); }
.dcompose__text { white-space: pre-line; }

/* the chat app */
.dchat { position: absolute; left: 360px; top: 0; width: 840px; height: 600px; z-index: 1; display: grid; grid-template-columns: 170px 1fr; }
.dchat .mchatapp__feed { justify-content: flex-start; }
.dchat .msg__text { white-space: pre-line; }
.dhud { align-self: center; display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 0 20px 12px; padding: 12px 18px; border-radius: 16px; background: var(--sv-surface); color: var(--sv-fg); opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
.dhud.is-on { opacity: 1; transform: none; }
.dhud .wave { flex: none; }
.dhud .wave[hidden] { display: none; }
.dhud__text { min-width: 0; font-size: 15px; line-height: 1.45; color: var(--sv-muted); }
.dhud__text.is-cmd { color: var(--sv-fg); font-weight: 500; }
.dhud__text .is-drop { color: var(--sv-faint); text-decoration: line-through; text-decoration-color: rgba(255, 107, 94, 0.8); }
.dcompose { position: relative; margin: 0 20px 20px; min-height: 92px; padding: 14px 16px; border-radius: 12px; font-size: 17px; line-height: 1.5; box-shadow: inset 0 0 0 1.5px var(--raised-deep); } /* taste-skill-ignore: message box edge */
.dcompose { padding-right: 64px; }
.dcompose__send { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 10px; background: var(--brand); transition: transform 140ms var(--ease-out), background-color 140ms ease; }
.dcompose__send::after { content: ""; position: absolute; left: 13px; top: 11px; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #ffffff; }
.dcompose__send.is-pressed { transform: scale(0.88); background: var(--brand-deep); }
.dcompose__ph { position: absolute; left: 16px; top: 14px; color: var(--paper-muted); pointer-events: none; }
.dcompose__text:not(:empty) + .dcompose__ph { display: none; }
.dcompose__text .is-in { animation: rise 260ms var(--ease-out) both; }
.dcompose__text .w { border-radius: 2px; transition: background-color 120ms ease; }
.dcompose__text .w.is-sel { background: rgba(37, 99, 235, 0.22); }
.dcompose__text.is-swapping { opacity: 0; transition: opacity 220ms ease; }
.dcompose__text { transition: opacity 300ms ease; }
.dcursor { position: absolute; left: 0; top: 0; z-index: 9; opacity: 0; pointer-events: none; transition: opacity 200ms ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } /* taste-skill-ignore: pointer shadow */
.dcursor.is-on { opacity: 1; }

@media (max-width: 760px) {
  .incl__copy { grid-template-columns: 1fr; }
  .dfilm { margin-top: 32px; }
  .dfilm__stage { width: auto; height: auto; display: grid; gap: 14px; }
  .dkey, .dchat { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .dchat { grid-template-columns: 1fr; }
  .dchat .mchatapp__side { display: none; }
  .dhud { margin: 0 12px 10px; }
  .dcompose { margin: 0 12px 12px; }
  .dcursor { display: none; }
  .dcam { position: relative; left: auto; top: auto; width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .nokb.is-on, .dhud, .dcompose__text .is-in { transition: none; animation: none; transform: none; }
}

/* ---------- meetings: the live panel ---------- */
.meet { background: var(--dark); color: var(--paper); padding: clamp(96px, 14vh, 160px) var(--gutter); }
.meet__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.meet__p { max-width: 40ch; font-size: var(--step-lead); line-height: 1.3; }
.mpanel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-red, #ff4d3d); animation: pulse 1.6s ease-in-out infinite; }
.is-ended .mpanel__dot { animation: none; background: var(--sv-faint); }
@keyframes pulse { 50% { opacity: 0.35; } }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 7px; background: var(--sv-rail); font-size: 0.8125rem; text-align: center; }
.seg span { padding: 4px 0; border-radius: 5px; color: var(--sv-muted); }
.seg .seg--on { background: var(--sv-raised); color: var(--sv-fg); font-weight: 500; }
.lt__block { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.lt__block + .lt__block { margin-top: 18px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11); } /* taste-skill-ignore: speaker-block divider from the live transcript */
.lt__block.is-new { animation: arrive 360ms var(--ease-out) both; }
.lt__disc { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: 0.6875rem; font-weight: 700; }
.lt__head { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 0.8125rem; }
.lt__head b { font-weight: 600; }
.lt__head span { color: var(--sv-faint); font-variant-numeric: tabular-nums; }
.lt__live { width: 5px; height: 5px; border-radius: 50%; background: var(--sv-tint); animation: pulse 1s ease-in-out infinite; }
.lt__block.is-settled .lt__live, .is-ended .lt__live { display: none; }
.lt__text { margin-top: 2px; color: var(--sv-muted); font-size: 0.9375rem; line-height: 1.45; }
.lt__draft { color: var(--sv-faint); }
.ln > .is-new { animation: rise 320ms var(--ease-out) both; }
.ln__p { padding-left: 16px; text-indent: -16px; }
.ln__p::before { content: "•"; display: inline-block; width: 16px; text-indent: 0; }
.ln__h { margin-top: 6px; color: var(--sv-fg); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ln__count { padding: 1px 6px; border-radius: 6px; background: var(--sv-rail); font-size: 0.8125rem; font-weight: 700; color: var(--sv-muted); }
.ln__items { display: grid; gap: 8px; }
.ln__items li { display: flex; align-items: baseline; gap: 8px; color: var(--sv-fg); animation: rise 320ms var(--ease-out) both; }
.ln__box { flex: none; width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--sv-faint); transform: translateY(2px); } /* taste-skill-ignore: checkbox outline */
.ln__owner { padding: 1px 6px; border-radius: 5px; background: rgba(177, 140, 255, 0.18); color: #b18cff; font-size: 0.8125rem; font-weight: 600; }

/* ---------- meetings: app windows on the section ground, a fixed 1200 by 680 stage scaled to the column ---------- */
.mfilm { margin: 48px 0 0; }
.mfilm__frame { position: relative; }
.mfilm__stage { position: relative; width: 1200px; height: 680px; transform-origin: top left; color: var(--sv-fg); }
.mfilm__foot { margin-top: 20px; }
.meet .run__steps button { color: var(--paper); background: var(--sv-raised); }
.meet .run__steps button[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.meet .stage__pause { color: var(--paper); }

.mw {
  position: absolute; border-radius: 12px; overflow: hidden; background: var(--sv-surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55); /* taste-skill-ignore: floating app window */
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-reveal), visibility 0s;
}
.mw--call { left: 0; top: 56px; width: 680px; height: 470px; z-index: 1; }
.mw--live { left: 620px; top: 0; width: 580px; height: 680px; z-index: 2; display: flex; flex-direction: column; padding: 14px 16px 14px; }
.mw--slate { left: 110px; top: 24px; width: 590px; height: 640px; z-index: 3; padding: 30px 34px; background: var(--paper); color: var(--paper-fg); }
.mw--term { left: 730px; top: 420px; width: 470px; height: 250px; z-index: 5; display: flex; flex-direction: column; }
.mvoice { position: absolute; left: 740px; top: 40px; width: 410px; z-index: 4; display: grid; gap: 12px; justify-items: start; }

/* Part two: the call and the live window step back, the Slate comes forward. */
.mw--slate, .mw--term { opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 320ms var(--ease-out), transform 520ms var(--ease-reveal), visibility 0s 520ms; }
.mw--term { transform: translateX(40px); }
[data-part="2"] .mw--slate { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mw--term.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-part="2"] .mw--call { opacity: 0.4; transform: translate(-20px, 10px) scale(0.96); }
[data-part="2"] .mw--live { opacity: 0.4; transform: translate(20px, 10px) scale(0.96); }

/* the call */
.mcall__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; height: calc(100% - 34px); }
.mcall__tiles .tile { height: auto; }
.mcall__end { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.7); font-size: 16px; opacity: 0; transition: opacity 300ms ease; }
.mw--call.is-ended .tile { opacity: 0.4; transition: opacity 400ms ease; }
.mw--call.is-ended .mcall__end { opacity: 1; }
.mw--call.is-ended .mwin__rec { color: var(--sv-faint); }

/* Atom's live meeting window */
.mlive__head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; font-size: 15px; }
.mlive__head b { font-weight: 600; }
.mlive__clock { margin-left: auto; color: var(--sv-muted); font-variant-numeric: tabular-nums; }
.mw--live .seg { font-size: 13px; }
.mlive__tx { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 4px 10px; }
.mlive__tx .lt__block { padding: 6px 8px; margin-left: -8px; margin-right: -8px; border-radius: 8px; transition: background-color 300ms ease; }
.mlive__tx .lt__block + .lt__block { margin-top: 10px; padding-top: 10px; }
.mlive__tx .lt__text { font-size: 15px; }
.lt__block.is-cited { background: rgba(92, 158, 255, 0.16); }
.lt__block.is-cited .lt__text { color: var(--sv-fg); }
.mlive__sum { padding: 12px 14px; border-radius: 10px; background: var(--sv-raised); }
.mlive__label { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--sv-fg); }
.mlive__sum .ln { display: grid; gap: 6px; min-height: 44px; font-size: 14px; color: var(--sv-muted); }
.mlive__chat { display: grid; gap: 8px; padding-top: 10px; font-size: 14px; }
.mlive__chat:empty { padding-top: 0; }
.mlive__chat > .is-new { animation: rise 320ms var(--ease-out) both; }
.mchat__q { justify-self: end; max-width: 80%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--sv-tint); color: #0b1636; font-weight: 500; }
.mchat__a { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--sv-raised); }
.mchat__who { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sv-muted); }
.mchat__who img { width: 18px; height: 18px; border-radius: 50%; }
.mfact { padding-left: 10px; color: var(--sv-fg); font-weight: 500; box-shadow: inset 2px 0 0 var(--sv-tint); } /* taste-skill-ignore: found fact */
.msrc { justify-self: start; padding: 1px 7px; border-radius: 5px; background: rgba(92, 158, 255, 0.18); color: var(--sv-tint); font-size: 12px; font-weight: 600; }
.mlive__input { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 46px; padding: 0 8px 0 14px; border-radius: 12px; background: var(--sv-rail); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-size: 15px; } /* taste-skill-ignore: chat box edge */
.mlive__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; }
.mlive__ph { color: var(--sv-faint); }
.mlive__mic { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sv-raised); }
.mlive__mic::before { content: ""; position: absolute; left: 12px; top: 8px; width: 8px; height: 12px; border-radius: 4px; background: var(--sv-muted); }
.mlive__mic::after { content: ""; position: absolute; left: 10px; top: 15px; width: 12px; height: 8px; border-radius: 0 0 7px 7px; box-shadow: 0 2px 0 0 var(--sv-muted); } /* taste-skill-ignore: microphone glyph */
.mlive__input.is-voice .mlive__mic { background: #3ddc84; }
.mlive__input.is-voice .mlive__mic::before { background: #0b1f12; }
.mlive__input.is-voice .mlive__mic::after { box-shadow: 0 2px 0 0 #0b1f12; } /* taste-skill-ignore: microphone glyph */
.mlive__input .caret { background: var(--sv-fg); }

/* voice: a waveform while someone speaks, then the words */
.wave { display: inline-flex; align-items: center; gap: 3px; height: 26px; color: #3ddc84; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(0.2); animation: wave 0.7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -97ms); }
.wave i:nth-child(3n) { animation-duration: 0.55s; }
.wave i:nth-child(4n + 1) { animation-duration: 0.9s; }
@keyframes wave { from { transform: scaleY(0.15); } to { transform: scaleY(var(--h, 0.9)); } }
.wave--atom { color: #7fd3ea; }
.vcap { display: flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 16px 10px 10px; border-radius: 999px; background: rgba(28, 28, 27, 0.92); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 40px rgba(0, 0, 0, 0.5); animation: rise 320ms var(--ease-out) both; } /* taste-skill-ignore: floating voice capsule */
.vcap--atom { border-radius: 22px; align-items: flex-start; }
.vcap__face { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.vcap__face img { width: 100%; height: 100%; object-fit: cover; }
.vcap--atom .vcap__face { box-shadow: 0 0 0 2px #7fd3ea; } /* taste-skill-ignore: Atom's ring */
.vcap__body { min-width: 0; padding-top: 2px; }
.vcap__text { font-size: 15px; line-height: 1.4; }
.vcap--atom .vcap__text { font-style: italic; }
.vcap .wave, .mlive__field .wave { transition: opacity 200ms ease; }
.vcap.is-heard .wave { display: none; }

/* the Slate: the finished notes */
.slate__kicker { font-size: 13px; font-weight: 600; color: var(--accent); }
.slate__title { margin-top: 4px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.slate__meta { margin-top: 6px; font-size: 14px; color: var(--paper-muted); }
.slate__h { margin-top: 22px; font-size: 15px; font-weight: 700; }
.slate__p, .slate__list { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.slate__list li { padding-left: 16px; text-indent: -16px; }
.slate__list li::before { content: "•"; display: inline-block; width: 16px; text-indent: 0; }
.slate__items { margin-top: 8px; display: grid; gap: 10px; font-size: 15px; }
.slate__items li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; transition: background-color 300ms ease; }
.slate__items li.is-handed { background: var(--brand-faint); }
.slate__items .ln__box { box-shadow: inset 0 0 0 1.5px var(--paper-muted); transform: none; } /* taste-skill-ignore: checkbox outline */
.slate__owner { padding: 1px 7px; border-radius: 5px; background: var(--brand-muted); color: var(--brand-deep); font-size: 13px; font-weight: 600; }
.slate__at { margin-left: auto; color: var(--paper-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.slate__agent { display: none; flex-basis: 100%; padding-left: 21px; font-size: 13px; color: var(--brand-deep); font-weight: 500; }
.slate__agent.is-on { display: block; animation: rise 320ms var(--ease-out) both; }

/* the agent handoff */
.mw--term .pane { flex: 1; margin: 8px; }
.mw--term .pane__out { font-size: 13px; }

/* Part three: the call is over, you and Atom show up, and the team hears about it in chat. */
.mw--chat { left: 60px; top: 20px; width: 600px; height: 640px; z-index: 7; display: grid; grid-template-columns: 150px 1fr; background: var(--paper); color: var(--paper-fg); opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity 320ms var(--ease-out), transform 560ms var(--ease-reveal), visibility 0s 560ms; }
.mw--chat.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-part="3"] .mw--call, [data-part="3"] .mw--live { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s 300ms; }
[data-part="3"] .mw--slate { opacity: 0.2; visibility: visible; transform: translate(40px, 0) scale(0.96); }
[data-part="3"] .mw--term.is-on { opacity: 0.35; transform: translate(10px, 10px) scale(0.96); }
[data-part="3"] .mvoice { opacity: 0; transition: opacity 300ms ease; }
.mchatapp__side { padding: 18px 12px; background: var(--ink); color: var(--sv-muted); font-size: 14px; display: grid; align-content: start; gap: 4px; }
.mchatapp__team { margin-bottom: 12px; padding: 0 8px; color: var(--paper); font-weight: 700; font-size: 16px; }
.mchatapp__ch { padding: 5px 8px; border-radius: 6px; }
.mchatapp__ch.is-on { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.mchatapp__main { display: flex; flex-direction: column; min-width: 0; }
.mchatapp__head { padding: 16px 20px; font-size: 16px; font-weight: 700; box-shadow: inset 0 -1px 0 var(--raised-deep); } /* taste-skill-ignore: chat header divider */
.mchatapp__head > span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--paper-muted); }
.mchatapp__feed { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 16px 20px 20px; overflow: hidden; }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; }
.msg.is-new { animation: rise 320ms var(--ease-out) both; }
.msg__gif { position: relative; width: 160px; height: 160px; margin: 6px 0 0; border-radius: 10px; overflow: hidden; background: #1a2a5e; }
.msg__gif video { width: 100%; height: 100%; object-fit: cover; }
.msg__gifbadge { position: absolute; left: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.msg__av { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.msg__who { display: flex; align-items: center; gap: 8px; }
.msg__who b { font-weight: 700; }
.msg__who span { color: var(--paper-muted); font-size: 13px; }
.msg__app { padding: 0 5px; border-radius: 4px; background: var(--raised-deep); color: var(--paper-muted); font-size: 11px !important; font-weight: 700; letter-spacing: 0.04em; }
.msg__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg__link { padding: 4px 10px; border-radius: 6px; background: var(--brand-faint); color: var(--brand-deep); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--brand-muted); } /* taste-skill-ignore: link chip edge */
.msg__reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 28px; }
.react { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--raised); font-size: 14px; box-shadow: inset 0 0 0 1px var(--raised-deep); } /* taste-skill-ignore: reaction chip edge */
.react b { font-size: 12px; font-weight: 600; color: var(--paper-muted); font-variant-numeric: tabular-nums; }
.react.is-pop { animation: pop 420ms var(--ease-out) both; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

.mpeople { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.mme { position: absolute; right: 0; top: 30px; display: flex; align-items: flex-end; gap: 12px; opacity: 0; transform: translateY(16px) scale(0.7); transform-origin: right center; transition: opacity 360ms var(--ease-out), transform 560ms var(--ease-reveal); }
.mai { position: absolute; left: 700px; top: 330px; display: flex; align-items: flex-end; gap: 12px; opacity: 0; filter: blur(10px); transform: scale(0.86); transform-origin: left center; transition: opacity 800ms var(--ease-out), filter 800ms var(--ease-out), transform 800ms var(--ease-reveal); }
.mme.is-on, .mai.is-on { opacity: 1; filter: none; transform: none; }
.mme .cam__bubble, .mai .cam__bubble { max-width: 320px; font-size: 18px; }
.mai .wave { display: flex; margin-bottom: 4px; }
.mai .wave[hidden] { display: none; }
.mpeople .face { border-radius: 50%; overflow: hidden; }

@media (max-width: 760px) {
  .mfilm { margin-top: 32px; }
  .mfilm__stage { width: auto; height: auto; display: grid; gap: 14px; }
  .mw, .mvoice { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .mw, .mw--term.is-on, [data-part="2"] .mw--slate { transform: none; opacity: 1; visibility: visible; }
  [data-part="1"] .mw--slate, [data-part="2"] .mw--call, [data-part="2"] .mw--live, .mw--term:not(.is-on), .mvoice:empty { display: none; }
  .mcall__tiles { height: 300px; }
  .mw--live { height: 600px; }
  .mw--slate { padding: 22px 20px; }
  .slate__title { font-size: 24px; }
  .mw--term { height: 230px; }
  .vcap--atom { border-radius: 18px; }
  [data-part="3"] .mw--slate, [data-part="3"] .mw--term, [data-part="3"] .mvoice, [data-part="3"] .mw--call, [data-part="3"] .mw--live, .mw--chat:not(.is-on), [data-part="1"] .mpeople, [data-part="2"] .mpeople { display: none; }
  .mw--chat { grid-template-columns: 1fr; height: auto; }
  .mchatapp__side { display: none; }
  .mpeople { position: relative; inset: auto; display: grid; gap: 14px; }
  .mme, .mai { position: relative; left: auto; right: auto; top: auto; }
  .mpeople, .mai { order: -1; }
  .mme { justify-content: flex-end; }
  .mme .cam__bubble, .mai .cam__bubble { max-width: none; font-size: 16px; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave i { animation: none; transform: scaleY(var(--h, 0.6)); }
  .mw, .mw--slate, .mw--term { transition: opacity 200ms linear, visibility 0s; transform: none; }
  [data-part="2"] .mw--call, [data-part="2"] .mw--live { transform: none; }
  .vcap, .mlive__chat > .is-new, .slate__agent.is-on, .msg.is-new, .react.is-pop { animation: none; }
  .mme, .mai, .mw--chat { transform: none; filter: none; transition: opacity 200ms linear, visibility 0s; }
}

/* ---------- shared: pause button, caret, Atom panel lines ---------- */
.stage__pause {
  min-height: 44px; padding: 0 16px;
  background: transparent; border: 2px solid currentColor; border-radius: var(--radius);
  color: var(--ink); font-weight: 500; font-size: var(--step-small); cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.stage__pause:active { transform: scale(0.97); }
.caret {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 1px;
  vertical-align: text-bottom; background: var(--paper-fg);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.panel__head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.panel__head b { font-weight: 500; }
.panel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-tint); }
.panel__status { color: var(--sv-muted); transition: color 160ms var(--ease-out); }
.panel__status.is-heard { color: var(--sv-tint); }
.v-owner {
  color: var(--sv-muted);
  padding-left: 10px;
  box-shadow: inset 2px 0 0 var(--sv-faint); /* taste-skill-ignore: Atom panel's own tool-step and owner-words styling */
}
.v-step { display: flex; align-items: center; gap: 8px; color: var(--sv-muted); font-family: var(--mono); font-size: 0.8125rem; } /* taste-skill-ignore: Atom panel's own tool-step and owner-words styling */
.v-step code { font: inherit; }
.v-step__mark { position: relative; width: 12px; height: 12px; flex: none; }
.v-step__mark::before {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid var(--sv-muted); border-right-color: transparent; border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.is-done .v-step__mark::before {
  border: 0; border-radius: 0; animation: none;
  inset: 1px 3px 3px 3px;
  box-shadow: inset -2px -2px 0 var(--sv-muted); /* taste-skill-ignore: Atom panel's own tool-step and owner-words styling */
  transform: rotate(40deg) scaleX(0.6);
}
@keyframes spin { to { transform: rotate(360deg); } }
.v-reply { color: var(--sv-fg); }

/* ---------- behind: computer use, a fixed 1200 by 660 stage scaled to the column ---------- */
.behind { background: var(--dark); color: var(--paper); padding: clamp(96px, 14vh, 160px) var(--gutter) clamp(48px, 8vh, 96px); }
.behind { overflow-x: clip; }
.behind__copy { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: end; }
.behind__p { max-width: 44ch; font-size: var(--step-lead); line-height: 1.3; }
.behind .stage__pause { color: var(--paper); }
.bfilm { margin: 48px 0 0; }
.bfilm__frame { position: relative; }
.bfilm__stage { position: relative; width: 1200px; height: 660px; transform-origin: top left; color: var(--sv-fg); }
.bfilm__foot { display: flex; justify-content: flex-end; margin-top: 20px; }

/* windows */
.bw {
  position: absolute; border-radius: 12px; overflow: hidden; background: var(--sv-surface);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.55); /* taste-skill-ignore: floating app window */
  transition: filter 320ms var(--ease-out), box-shadow 240ms ease;
}
.bw__yours { flex: none; white-space: nowrap; margin-left: auto !important; padding: 1px 8px; border-radius: 5px; background: rgba(92, 158, 255, 0.18); color: var(--sv-tint); font-size: 12px; font-weight: 600; }
.bw--fly { left: 0; top: 10px; width: 470px; height: 500px; z-index: 2; background: var(--paper); color: var(--paper-fg); filter: brightness(0.62) saturate(0.85); }
.bw--fly .mwin__bar { background: var(--paper-raised); }
.bw--fly.is-work { filter: none; box-shadow: 0 0 0 2px #86d4e8, 0 24px 60px rgba(0, 0, 0, 0.55); } /* taste-skill-ignore: window Atom is working */
.bw--doc { z-index: 6; background: var(--paper); color: var(--paper-fg); }
.bw--doc .mwin__bar { background: var(--paper-raised); }
.bw--doc .mwin__bar, .bw--fly .mwin__bar { color: var(--paper-muted); }
.bw--doc .bw__yours { background: var(--brand-muted); color: var(--brand-deep); }

/* the airline site Atom works: a narrow browser window, so the site uses its compact layout */
.kx__chrome { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; background: var(--paper-raised); box-shadow: inset 0 -1px 0 var(--raised-deep); } /* taste-skill-ignore: browser toolbar edge */
.kx__nav { display: flex; gap: 8px; }
.kx__nav i { width: 7px; height: 7px; border: solid var(--paper-muted); border-width: 0 0 1.6px 1.6px; transform: rotate(45deg); }
.kx__nav i + i { transform: rotate(-135deg); opacity: 0.5; }
.kx__url { flex: 1; min-width: 0; padding: 4px 10px; border-radius: 7px; background: var(--paper); color: var(--paper-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx__url::before { content: ""; display: inline-block; width: 7px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--paper-muted); vertical-align: -0.5px; }
.kx { height: calc(100% - 68px); display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; color: #1a2433; }
.kx__head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #0c3d5e; color: #ffffff; }
.kx__logo { width: 18px; height: 14px; background: #8fd0ff; clip-path: polygon(0 60%, 45% 0, 60% 35%, 100% 20%, 55% 100%, 45% 55%); }
.kx__head b { font-size: 15px; letter-spacing: -0.01em; }
.kx__links { display: flex; gap: 12px; margin-left: 20px; font-size: 11.5px; color: #b9d7ec; }
.kx__steps { display: flex; gap: 2px; padding: 8px 14px; counter-reset: k; font-size: 11px; color: #5b6878; box-shadow: inset 0 -1px 0 #e3e8ee; } /* taste-skill-ignore: step bar edge */
.kx__steps li { counter-increment: k; display: flex; align-items: center; gap: 4px; }
.kx__steps li::before { content: counter(k); display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #e3e8ee; font-size: 9.5px; font-weight: 700; }
.kx__steps li + li { margin-left: 8px; }
.kx__steps li.is-on { color: #0c3d5e; font-weight: 700; }
.kx__steps li.is-on::before { background: #0c3d5e; color: #ffffff; }
.kx__steps li.is-past::before { background: #1f9d55; color: #ffffff; }
.kx__pages { position: relative; flex: 1; min-height: 0; }
.kx__page { position: absolute; inset: 0; width: 386px; padding: 10px 14px; display: grid; align-content: start; gap: 8px; opacity: 0; visibility: hidden; transform: translateX(10px); transition: opacity 220ms ease, transform 320ms var(--ease-out), visibility 0s 320ms; }
.kx__page.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kx__h { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.kx__trip { display: flex; gap: 14px; font-size: 11.5px; color: #7a8796; }
.kx__trip .is-on { color: #0c3d5e; font-weight: 700; }
.kx__form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kx__f { display: grid; gap: 1px; padding: 5px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px #cfd8e1; transition: box-shadow 160ms ease; } /* taste-skill-ignore: form field edge */
.kx__f span { font-size: 10.5px; color: #7a8796; }
.kx__f b { min-height: 1.4em; font-size: 13px; font-weight: 600; }
.kx__f--wide { grid-column: 1 / -1; }
.kx__f.is-focus { box-shadow: inset 0 0 0 2px #0f6fb0; } /* taste-skill-ignore: focused field */
.kx__btn { justify-self: start; padding: 8px 16px; border-radius: 6px; background: #c2410c; color: #ffffff; font-weight: 700; font-size: 13px; transition: transform 120ms ease; }
.kx__btn.is-press { transform: scale(0.95); }
.kx__sum { font-size: 11.5px; color: #4d5a69; }
.kx__dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.kx__dates span { display: grid; padding: 4px 6px; border-radius: 6px; background: #f1f4f7; font-size: 10.5px; color: #4d5a69; }
.kx__dates b { font-size: 12px; color: #1a2433; }
.kx__dates .is-on { background: #0c3d5e; color: #b9d7ec; }
.kx__dates .is-on b { color: #ffffff; }
.kx__sort { display: flex; justify-content: space-between; font-size: 11px; color: #7a8796; }
.kx__sort b { font-size: 13px; color: #1a2433; }
.kx__res { display: grid; gap: 5px; }
.kx__res li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #dbe2e9; transition: box-shadow 160ms ease, background-color 160ms ease; } /* taste-skill-ignore: result card edge */
.kx__res p { display: grid; gap: 1px; }
.kx__res p b { font-size: 13px; }
.kx__res p span { font-size: 11px; color: #5b6878; }
.kx__res em { display: grid; justify-items: end; font-style: normal; font-size: 10px; color: #7a8796; }
.kx__res em b { font-size: 15px; color: #1a2433; }
.kx__res li.is-pick { background: #eef6fc; box-shadow: inset 0 0 0 2px #0f6fb0; } /* taste-skill-ignore: chosen result */
.kx__fares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kx__fares div { display: grid; align-content: start; gap: 3px; padding: 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px #dbe2e9; font-size: 10.5px; color: #4d5a69; transition: box-shadow 160ms ease, background-color 160ms ease; } /* taste-skill-ignore: fare card edge */
.kx__fares b { font-size: 13px; color: #1a2433; }
.kx__fares em { margin-bottom: 4px; font-style: normal; font-size: 17px; font-weight: 700; color: #1a2433; }
.kx__fares div.is-pick { background: #eef6fc; box-shadow: inset 0 0 0 2px #0f6fb0; } /* taste-skill-ignore: chosen fare */
.kx__legs { display: flex; gap: 6px; }
.kx__legs span { padding: 4px 8px; border-radius: 6px; background: #f1f4f7; font-size: 11px; color: #4d5a69; }
.kx__legs span.is-on { background: #0c3d5e; color: #ffffff; }
.kx__legs b { margin-left: 4px; }
.kx__plane { justify-self: start; padding: 8px 16px; border-radius: 40px 40px 10px 10px; background: #f1f4f7; }
.kx__cols, .kx__seats { display: grid; grid-template-columns: repeat(7, 20px); gap: 4px; }
.kx__cols i { font-style: normal; font-size: 9.5px; text-align: center; color: #7a8796; }
.kx__seats { margin-top: 4px; }
.kx__seats i { height: 17px; border-radius: 4px 4px 3px 3px; background: #9ccbe8; font-style: normal; font-size: 9px; display: grid; place-items: center; color: transparent; transition: background-color 200ms ease; }
.kx__seats i.is-taken { background: #cfd6dd; }
.kx__seats i.is-row { background: transparent; color: #7a8796; }
.kx__seats i.is-hover { position: relative; box-shadow: 0 0 0 2px #0f6fb0; } /* taste-skill-ignore: hovered seat */
.kx__seats i.is-hover::after { content: "14C · Aisle"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; background: #1a2433; color: #ffffff; font-size: 10px; white-space: nowrap; }
.kx__seats i.is-pick { background: #e8590c; color: #ffffff; }
.kx__legend { display: flex; gap: 12px; font-size: 10.5px; color: #5b6878; }
.kx__legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }
.s-free { background: #9ccbe8; } .s-taken { background: #cfd6dd; } .s-pick { background: #e8590c; }
.kx__auto { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #e6f6ec; color: #1f7a45; font-size: 10.5px; font-weight: 600; opacity: 0; transition: opacity 240ms ease; }
.kx__auto.is-on { opacity: 1; }
.kx__legsum { display: grid; gap: 4px; }
.kx__legsum li { display: grid; gap: 1px; padding: 6px 9px; border-radius: 6px; background: #f1f4f7; }
.kx__legsum b { font-size: 11.5px; }
.kx__legsum span { font-size: 11px; color: #4d5a69; }
.kx__price { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.kx__price td { padding: 3px 0; color: #4d5a69; }
.kx__price td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kx__total td { padding-top: 6px; font-size: 14px; font-weight: 700; color: #1a2433; box-shadow: inset 0 1px 0 #dbe2e9; } /* taste-skill-ignore: total rule */
.kx__card { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #4d5a69; }
.kx__visa { padding: 1px 5px; border-radius: 3px; background: #1a1f71; color: #ffffff; font-size: 9px; font-weight: 800; font-style: italic; }
.kx__agree { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #4d5a69; }
.kx__agree i { width: 12px; height: 12px; border-radius: 3px; background: #0f6fb0; }
.kx__book { position: relative; padding: 9px 22px; }
.kx__book.is-ready { animation: ready 1.4s ease-in-out infinite; }
.kx__book.is-ready::after { content: "Ready for you"; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 5px; background: #ffb020; color: #1d1d1f; font-size: 11px; font-weight: 700; white-space: nowrap; }
@keyframes ready { 50% { box-shadow: 0 0 0 5px rgba(255, 176, 32, 0.5); } } /* taste-skill-ignore: the button waiting for your click */
.kx__ok { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #1f9d55; }
.kx__ok::before { content: ""; width: 8px; height: 15px; border: solid #ffffff; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(40deg); }

/* when you click Book, the airline window comes to the front for that click */
.bw--fly.is-front { z-index: 8; filter: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.6); } /* taste-skill-ignore: the window brought forward */

/* the music app, its covers made for this site */
.bw--tune { left: 0; top: 10px; width: 392px; height: 504px; z-index: 7; background: #121214; color: #f2f2f3; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 320ms var(--ease-out), transform 520ms var(--ease-reveal), visibility 0s 520ms, box-shadow 240ms ease; }
.bw--tune.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bw--tune .mwin__bar { background: #1b1b1e; color: #9b9ba3; }
.bw--tune.is-work { box-shadow: 0 0 0 2px #86d4e8, 0 24px 60px rgba(0, 0, 0, 0.55); } /* taste-skill-ignore: window Atom is working */
.tune { display: grid; gap: 10px; padding: 14px 16px; font-size: 12px; }
.tune__top { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: #9b9ba3; }
.tune__search { flex: 1; padding: 6px 12px; border-radius: 999px; background: #222226; }
.tune__nav { display: flex; gap: 10px; }
.tune__nav b { color: #f2f2f3; font-weight: 600; }
.tune__artw { position: relative; display: block; width: 112px; height: 112px; }
.tune__hplay { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 180ms ease; }
.tune__hplay i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff; transition: transform 120ms ease; }
.tune__hplay i::before { content: ""; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #121214; }
.tune__artw.is-hover .tune__hplay { opacity: 1; }
.tune__artw.is-press .tune__hplay i { transform: scale(0.9); }
.tune__now { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: end; }
.tune__art { width: 112px; height: 112px; border-radius: 8px; object-fit: cover; }
.tune__kicker { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9b9ba3; }
.tune__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.tune__eq i { width: 2px; height: 3px; background: #ff5c8a; }
.is-playing .tune__eq i { animation: eq 0.9s ease-in-out infinite alternate; }
.is-playing .tune__eq i:nth-child(2) { animation-duration: 0.6s; } .is-playing .tune__eq i:nth-child(3) { animation-duration: 0.75s; }
@keyframes eq { to { height: 10px; } }
.tune__title { margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.tune__artist { font-size: 13px; color: #d6d6da; }
.tune__album { font-size: 11px; color: #9b9ba3; }
.tune__prog { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: 8px; font-size: 10.5px; color: #9b9ba3; font-variant-numeric: tabular-nums; }
.tune__prog span:last-child { text-align: right; }
.tune__bar { position: relative; height: 4px; border-radius: 2px; background: #2e2e33; overflow: hidden; }
.tune__bar i { position: absolute; inset: 0; background: #f2f2f3; transform-origin: left center; transform: scaleX(0); transition: transform 1s linear; }
.tune__ctl { display: flex; align-items: center; justify-content: center; gap: 22px; }
.tune__play { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f2f2f3; transition: transform 120ms ease; }
.tune__play.is-press { transform: scale(0.9); }
.tune__play i { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #121214; }
.is-playing .tune__play i { width: 12px; height: 14px; margin: 0; border: 0; background: linear-gradient(90deg, #121214 0 4px, transparent 4px 8px, #121214 8px); } /* taste-skill-ignore: pause glyph */
.tc { position: relative; display: block; width: 14px; height: 14px; color: #9b9ba3; }
.tc--prev::before, .tc--next::before { content: ""; position: absolute; top: 2px; width: 0; height: 0; border-style: solid; border-width: 5px 8px 5px 0; border-color: transparent currentColor transparent transparent; }
.tc--prev::before { left: 3px; }
.tc--prev::after, .tc--next::after { content: ""; position: absolute; top: 2px; width: 2px; height: 10px; background: currentColor; }
.tc--prev::after { left: 1px; }
.tc--next::before { right: 3px; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.tc--next::after { right: 1px; }
.tc--shuf::before, .tc--rep::before { content: ""; position: absolute; inset: 3px 1px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; } /* taste-skill-ignore: player glyph */
.tc--shuf::before { transform: skewX(-20deg); }
.tc--vol::before { content: ""; position: absolute; left: 1px; top: 3px; width: 9px; height: 9px; background: currentColor; clip-path: polygon(0 30%, 40% 30%, 100% 0, 100% 100%, 40% 70%, 0 70%); }
.tune__vol { display: grid; grid-template-columns: 28px 1fr 24px; align-items: center; gap: 8px; color: #9b9ba3; font-size: 11px; font-variant-numeric: tabular-nums; }
.tune__vicon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; transition: background-color 160ms ease; }
.tune__vol.is-hover .tune__vicon { background: #2e2e33; }
.tune__vol .tune__slider, .tune__vol .tune__num { opacity: 0; transform: scaleX(0.2); transform-origin: left center; transition: opacity 220ms ease, transform 360ms var(--ease-reveal); }
.tune__vol.is-hover .tune__slider, .tune__vol.is-hover .tune__num { opacity: 1; transform: none; }
.tune__slider { position: relative; height: 4px; border-radius: 2px; background: #2e2e33; --v: 0.7; }
.tune__fill { position: absolute; inset: 0; border-radius: 2px; background: #f2f2f3; transform-origin: left center; transform: scaleX(var(--v)); }
.tune__knob { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #ffffff; }
.tune__num { text-align: right; }
.tune__next { margin-top: 4px; font-size: 12px; font-weight: 700; }
.tune__list { display: grid; gap: 7px; }
.tune__list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }
.tune__list img { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; }
.tune__list p { display: grid; }
.tune__list b { font-size: 12.5px; font-weight: 600; }
.tune__list span, .tune__list em { font-size: 11px; color: #9b9ba3; font-style: normal; }
.bcur.is-high, .bfx.is-high { z-index: 8; }
.bcur.is-top { z-index: 11; }
.bw--doc.is-top { z-index: 10; }
.orch.is-back { z-index: 4; }

/* the wiki page you review */
.bw--doc { left: 400px; top: 24px; width: 600px; height: 616px; }
.wiki { position: relative; display: grid; grid-template-columns: 124px 1fr; grid-template-rows: auto 1fr; height: calc(100% - 34px); font-size: 13px; line-height: 1.5; }
.wiki__top { grid-column: 1 / -1; padding: 12px 18px 10px; box-shadow: inset 0 -1px 0 var(--raised-deep); } /* taste-skill-ignore: page header edge */
.wiki__crumb { font-size: 11px; color: var(--paper-muted); }
.wiki__title { margin-top: 2px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.wiki__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--paper-muted); }
.wiki__meta img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.wiki__meta b { color: var(--paper-fg); font-weight: 600; }
.wiki__pill { padding: 1px 7px; border-radius: 4px; background: #fff1d6; color: #8a5a00; font-weight: 700; font-size: 10.5px; }
.wiki__toc { display: grid; align-content: start; gap: 5px; padding: 12px 10px 12px 18px; font-size: 11.5px; color: var(--paper-muted); box-shadow: inset -1px 0 0 var(--raised-deep); } /* taste-skill-ignore: page sidebar edge */
.wiki__toc p { margin-bottom: 2px; font-size: 10.5px; font-weight: 700; color: var(--paper-fg); }
.wiki__toc span { transition: color 200ms ease; }
.wiki__toc span.is-on { color: var(--accent); font-weight: 700; }
.wiki__scroll { position: relative; overflow: hidden; }
.wiki__page { display: grid; grid-template-columns: minmax(0, 1fr) 168px; transition: transform 900ms var(--ease-in-out); }
.wiki__body { min-width: 0; padding: 12px 16px 40px; display: grid; align-content: start; gap: 6px; }
.wiki__body ul, .wiki__body ol { display: grid; gap: 3px; padding-left: 14px; }
.wiki__body ul li { list-style: disc; }
.wiki__h { margin-top: 10px; font-size: 14px; font-weight: 700; }
.wiki__h:first-child { margin-top: 0; }
.wiki__sub { font-size: 12px; font-weight: 700; color: var(--paper-muted); }
.wiki__req { padding-left: 0 !important; }
.wiki__req li { display: grid; grid-template-columns: 26px 1fr; }
.wiki__req b { font-size: 11px; color: var(--paper-muted); padding-top: 1px; }
.wiki__table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11.5px; overflow-wrap: anywhere; }
.wiki__table th { text-align: left; padding: 4px 6px; background: var(--paper-raised); font-size: 11px; }
.wiki__table td { padding: 4px 6px; box-shadow: inset 0 -1px 0 var(--raised-deep); } /* taste-skill-ignore: table rule */
.wiki__table code { font-family: var(--mono); font-size: 11px; } /* taste-skill-ignore: field names in the data model */
.wiki__code { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--paper-raised); font-family: var(--mono); font-size: 11px; line-height: 1.5; white-space: pre; } /* taste-skill-ignore: code in the spec */
.wiki__code code { font: inherit; }
.wiki__body .w { border-radius: 2px; transition: background-color 120ms ease; }
.wiki__body .w.is-sel { background: rgba(37, 99, 235, 0.22); }
.wiki__body .w.is-noted { background: rgba(255, 176, 32, 0.28); }
.wiki__body [data-wnote] { background: rgba(255, 176, 32, 0.16); border-radius: 2px; }
.wiki__side { position: relative; background: var(--paper-raised); }
.wiki__bar { position: absolute; right: 2px; top: 4px; bottom: 4px; width: 6px; border-radius: 3px; }
.wiki__bar i { position: absolute; left: 0; right: 0; top: 0; height: 30%; border-radius: 3px; background: rgba(28, 27, 26, 0.32); transition: transform 900ms var(--ease-in-out); }
.wcard { position: absolute; left: 8px; right: 12px; padding: 8px 10px; border-radius: 9px; background: var(--paper); font-size: 12px; line-height: 1.4; box-shadow: 0 0 0 1px var(--raised-deep), 0 6px 16px rgba(28, 27, 26, 0.08); } /* taste-skill-ignore: inline comment card */
.wcard { transition: top 320ms var(--ease-out); }
.wcard.is-new { animation: rise 320ms var(--ease-out) both; }
.wcard.is-focus { box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(28, 27, 26, 0.08); } /* taste-skill-ignore: comment being written */
.wcard__who { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 11px; color: var(--paper-muted); }
.wcard__who img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.wcard__who b { color: var(--paper-fg); }
.wcard__text:empty::before { content: "Add a comment"; color: var(--paper-muted); }
.wiki__cbtn { position: absolute; z-index: 2; padding: 4px 10px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 200ms var(--ease-out); pointer-events: none; }
.wiki__cbtn.is-on { opacity: 1; transform: none; }

/* the companion, drawn from the app: compact docked status with its face, and a separate reply box */
.acomp { position: absolute; left: 840px; bottom: 10px; z-index: 10; width: 352px; display: flex; flex-direction: column; gap: 8px; transform-origin: bottom right; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-reveal); }
.acomp.is-away { opacity: 0; transform: scale(0.9); pointer-events: none; }
.acomp__status { position: relative; height: 84px; padding: 14px 92px 12px 14px; border-radius: 16px; background: rgba(44, 44, 43, 0.96); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 8px 24px rgba(0, 0, 0, 0.38); } /* taste-skill-ignore: the app's notification material */
.acomp__line { display: flex; align-items: center; gap: 7px; height: 18px; font-size: 12px; white-space: nowrap; }
.acomp__line b { font-weight: 600; }
.acomp__word { font-weight: 500; transition: color 160ms ease; }
.acomp__now { margin-top: 5px; font-size: 12px; line-height: 18px; color: var(--sv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acomp__status .aface { position: absolute; right: 14px; top: 10px; width: 64px; height: 64px; }
.acomp.is-needs .acomp__word { color: #ffb020; }
.acomp__reply { padding: 11px 14px 12px; border-radius: 14px; background: var(--sv-surface); font-size: 13px; line-height: 19px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 8px 24px rgba(0, 0, 0, 0.38); opacity: 0; transform: translateY(8px); transition: opacity 220ms var(--ease-out), transform 420ms var(--ease-reveal); } /* taste-skill-ignore: the app's reply box */
.acomp__reply.is-on { opacity: 1; transform: none; }
.acomp__reply.is-needs { box-shadow: 0 0 0 1px #ffb020, 0 8px 24px rgba(0, 0, 0, 0.38); } /* taste-skill-ignore: needs-you border */
.areply__needs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; color: #ffb020; font-weight: 600; }
.areply__needs::before { content: ""; width: 7px; height: 7px; background: #ffb020; transform: rotate(45deg); }
.areply__text { color: var(--sv-fg); }
.areply__acts { display: flex; gap: 6px; margin-top: 10px; }
.areply__acts span { padding: 3px 10px; border-radius: 5px; font-size: 12px; transition: transform 120ms ease; }
.areply__acts span:not(.is-amber):not(.is-plain) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11); } /* taste-skill-ignore: the app's compact buttons */
.areply__acts .is-amber { background: #ffb020; color: #1d1d1f; font-weight: 600; }
.areply__acts .is-plain { color: var(--sv-muted); }
.areply__acts .is-press { transform: scale(0.94); }
.areply__dots { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.areply__dots i { width: 5px; height: 5px; border-radius: 50%; background: #86d4e8; }

/* status marks, from the app's shared vocabulary */
.amark { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 1.5px; width: 14px; height: 14px; }
.amark i { display: block; width: 1.7px; height: 6px; border-radius: 2px; background: #86d4e8; }
.amark i:nth-child(2), .amark i:nth-child(4) { height: 10px; }
.amark i:nth-child(3) { height: 14px; }
.amark--listening { animation: breathe 3s ease-in-out infinite; }
.amark--speaking i { animation: amarkWave 0.8s ease-in-out infinite; }
.amark--speaking i:nth-child(2) { animation-delay: -0.2s; } .amark--speaking i:nth-child(3) { animation-delay: -0.5s; } .amark--speaking i:nth-child(4) { animation-delay: -0.3s; }
.amark--working { border: 2px solid rgba(92, 158, 255, 0.16); border-top-color: #5c9eff; border-radius: 50%; animation: spin 1.1s linear infinite; }
.amark--needs { width: 12px; height: 12px; margin: 1px; border-radius: 50%; background: #ffb020; }
.amark--idle { width: 10px; height: 10px; margin: 2px; border: 2px solid #6e6c68; border-radius: 50%; }
@keyframes breathe { 50% { opacity: 0.5; } }
@keyframes amarkWave { 50% { transform: scaleY(0.55); } }
.acomp.is-heard .acomp__line { color: #0b1636; }
.acomp__line { position: relative; }
.acomp__line::before { content: ""; position: absolute; inset: -3px -8px; border-radius: 999px; background: #86d4e8; opacity: 0; transition: opacity 160ms ease; z-index: -1; }
.acomp.is-heard .acomp__line::before { opacity: 1; }
.acomp.is-heard .amark i { background: #0b1636; }

/* the face: SVCompanionFace's body, eyes, mouth and antenna */
.aface svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aface .aface__eyes { transform-box: fill-box; transition: transform 280ms var(--ease-out); }
.aface .aface__mouth { opacity: 0; transform-box: fill-box; transform-origin: center; }
.aface .aface__tip { transition: fill 300ms ease; }
.aface[data-pose="hearing"] .aface__body { transform: translateY(-1.5px); }
.aface[data-pose="hearing"] .aface__eyes { transform: scaleY(1.2); }
.aface[data-pose="working"] .aface__eyes { transform: translate(1.5px, -1.6px) scaleY(0.7); }
.aface[data-pose="speaking"] .aface__mouth { opacity: 1; animation: talk 0.9s ease-in-out infinite; }
.aface[data-pose="needs"] .aface__tip { fill: #ffb020; }
.aface[data-pose="needs"] .aface__body { animation: bob 1.2s ease-in-out infinite; }
.aface .aface__body { transition: transform 280ms var(--ease-out); }
.aface__lids { animation: faceBlink 5.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes faceBlink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes talk { 50% { transform: scaleY(0.55); } }
@keyframes bob { 50% { transform: translateY(-1.5px); } }

/* the open panel: conversation on the left, the rail with the face on the right */
.apanel { position: absolute; left: 800px; top: 22px; z-index: 11; width: 392px; height: 628px; display: grid; grid-template-columns: 1fr 52px; border-radius: 16px; overflow: hidden; background: var(--sv-surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 24px 60px rgba(0, 0, 0, 0.55); transform-origin: bottom right; opacity: 0; visibility: hidden; transform: scale(0.4); transition: opacity 220ms var(--ease-out), transform 420ms var(--ease-reveal), visibility 0s 420ms; } /* taste-skill-ignore: the app's panel */
.apanel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.apanel__main { display: flex; flex-direction: column; min-width: 0; padding: 14px 18px 12px 20px; }
.apanel__head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sv-muted); }
.apanel__head b { font-size: 15px; font-weight: 600; color: var(--sv-fg); }
.apanel__icons { margin-left: auto; display: flex; gap: 12px; }
.apanel__feed { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px 0; font-size: 14px; line-height: 1.55; }
.apanel__feed > * { animation: rise 320ms var(--ease-out) both; }
.pf__you { margin-top: 14px; color: var(--sv-muted); }
.pf__reply { color: var(--sv-fg); }
.pf__meta { font-size: 12px; color: var(--sv-muted); }
.pf__step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sv-muted); }
.pf__step .amark { width: 12px; height: 12px; }
.pf__step.is-done .amark { animation: none; border: 0; }
.pf__step.is-done .amark::before { content: ""; width: 4px; height: 8px; border: solid #86d4e8; border-width: 0 1.6px 1.6px 0; transform: translateY(-1px) rotate(40deg); }
.pf__saved { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: rgba(134, 212, 232, 0.1); box-shadow: inset 0 0 0 1px rgba(134, 212, 232, 0.35); font-size: 12px; color: var(--sv-muted); } /* taste-skill-ignore: the saved playbook card */
.pf__saved b { color: #86d4e8; font-size: 13px; }
.pf__play { align-self: flex-start; padding: 2px 8px; border-radius: 5px; background: rgba(134, 212, 232, 0.14); color: #86d4e8; font-size: 12px; font-weight: 600; }
.apanel__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; font-size: 13px; color: var(--sv-muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* taste-skill-ignore: panel footer divider */
.apanel__model { display: flex; align-items: center; gap: 6px; }
.apanel__model i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sv-muted); } /* taste-skill-ignore: model glyph */
.apanel__model b { color: var(--sv-fg); font-weight: 600; }
.apanel__rail { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 8px 0 14px; background: var(--sv-rail); }
.apanel__slot { width: 44px; height: 44px; border-radius: 10px; background: #233236; display: grid; place-items: center; }
.apanel__slot .aface { width: 40px; height: 40px; }
.apanel__rail .ic--gear { margin-top: auto; }
.ic { position: relative; display: block; width: 16px; height: 16px; color: var(--sv-muted); }
.ic--more::before { content: "···"; position: absolute; inset: -4px 0 0; font-size: 14px; font-style: normal; letter-spacing: 1px; }
.ic--vol::before { content: ""; position: absolute; left: 1px; top: 4px; width: 8px; height: 8px; background: currentColor; clip-path: polygon(0 30%, 40% 30%, 100% 0, 100% 100%, 40% 70%, 0 70%); }
.ic--pin::before { content: ""; position: absolute; left: 4px; top: 1px; width: 8px; height: 9px; border-radius: 2px 2px 0 0; box-shadow: inset 0 0 0 1.5px currentColor; } /* taste-skill-ignore: pin glyph */
.ic--pin::after { content: ""; position: absolute; left: 7.25px; top: 10px; width: 1.5px; height: 5px; background: currentColor; }
.ic--x::before, .ic--x::after { content: ""; position: absolute; left: 7px; top: 2px; width: 1.6px; height: 12px; background: currentColor; transform: rotate(45deg); }
.ic--x::after { transform: rotate(-45deg); }
.ic--term::before { content: ""; position: absolute; inset: 1px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; } /* taste-skill-ignore: terminal glyph */
.ic--term::after { content: ">"; position: absolute; left: 4px; top: 0; font-size: 10px; font-weight: 700; font-style: normal; }
.ic--agents::before, .ic--agents::after { content: ""; position: absolute; top: 2px; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; } /* taste-skill-ignore: people glyph */
.ic--agents::before { left: 0; } .ic--agents::after { left: 8px; }
.ic--clock::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; } /* taste-skill-ignore: clock glyph */
.ic--clock::after { content: ""; position: absolute; left: 7.25px; top: 4px; width: 1.5px; height: 5px; background: currentColor; }
.ic--gear::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor, 0 0 0 1.5px var(--sv-rail), 0 0 0 3px currentColor; } /* taste-skill-ignore: gear glyph */

/* the agent window: a list of agents with their status, and a terminal pane each */
.orch { position: absolute; left: 30px; top: 22px; z-index: 9; width: 760px; height: 628px; border-radius: 12px; overflow: hidden; background: #141413; color: #d8d6d1; font-family: var(--mono); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 80px rgba(0, 0, 0, 0.65); opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.97); transition: opacity 320ms var(--ease-out), transform 560ms var(--ease-reveal), visibility 0s 560ms; } /* taste-skill-ignore: terminal window */
.orch.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.orch .mwin__bar { background: #1f1f1e; font-family: var(--font); }
.orch__body { display: grid; grid-template-columns: 190px 1fr; height: calc(100% - 34px); font-size: 12px; line-height: 1.55; }
.orch__side { padding: 10px 0; box-shadow: inset -1px 0 0 #2c2c2a; } /* taste-skill-ignore: terminal divider */
.orch__label { padding: 2px 14px 6px; color: #9a9893; }
.orch__label--agents { margin-top: 14px; padding-top: 10px; box-shadow: inset 0 1px 0 #2c2c2a; } /* taste-skill-ignore: terminal divider */
.orch__item { display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; padding: 5px 14px; }
.orch__item.is-on { background: #232322; }
.orch__item b { font-weight: 600; color: #ffffff; }
.orch__item span { grid-column: 2; font-size: 11px; color: #9a9893; }
.orch__item.is-new { animation: rise 320ms var(--ease-out) both; }
.od { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; }
.od--work { background: #f5d76e; }
.od--done { background: #6ee7b7; }
.od--idle { box-shadow: inset 0 0 0 1.5px #6ee7b7; } /* taste-skill-ignore: idle dot */
.orch__item .st--work { color: #f5d76e; }
.orch__main { display: flex; flex-direction: column; min-width: 0; }
.orch__tabs { display: flex; font-size: 12px; box-shadow: inset 0 -1px 0 #2c2c2a; } /* taste-skill-ignore: terminal divider */
.orch__tabs span { padding: 4px 14px; color: #9a9893; }
.orch__tabs span.is-on { color: #ffffff; font-weight: 600; box-shadow: inset 0 -2px 0 #86d4e8; } /* taste-skill-ignore: active tab underline */
.orch__panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 10px; }
.opane { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 10px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #383836; animation: unfold 520ms var(--ease-reveal) both; } /* taste-skill-ignore: terminal pane border */
.opane:first-child { grid-row: 1 / 3; box-shadow: inset 0 0 0 1px #86d4e8; } /* taste-skill-ignore: focused pane border */
.opane__label { position: absolute; left: 0; right: 0; top: 0; padding: 6px 10px; background: #1f1f1e; color: #9a9893; font-size: 11px; line-height: 1.2; }
.opane:first-child .opane__label { color: #86d4e8; }
.opane__out { display: grid; gap: 4px; white-space: pre-wrap; }
.opane__out p { animation: fade 240ms ease both; }
.opane__out .you { color: #b9b5c8; }
.opane__out .you::before { content: "› "; color: #86d4e8; }
.opane__out .dot::before { content: "● "; color: #ffb020; }
.opane__out .ok { color: #6ee7b7; }
.opane__out .busy { color: #ffb020; }
.opane__out .dim { color: #9a9893; }

/* Atom, the same figure of light as the hero, in the top right corner */
.bholo { position: absolute; right: -36px; top: -44px; z-index: 12; display: flex; align-items: flex-start; gap: 12px; pointer-events: none; opacity: 0; filter: blur(10px); transform: scale(0.86); transform-origin: right top; transition: opacity 800ms var(--ease-out), filter 800ms var(--ease-out), transform 800ms var(--ease-reveal); }
.bholo.is-on { opacity: 1; filter: none; transform: none; }
.bholo .bot__face { width: 124px; height: 124px; }
.bholo.is-talking .bot__clip { animation-duration: 0.9s; }
.bholo .face { border-radius: 50%; overflow: hidden; }
/* mirrored so the figure faces into the stage from the right-hand corner */
.bholo .bot__clip > * { transform: scaleX(-1); }
.bholo .cam__ring { box-shadow: 0 0 0 3px #7fd3ea; } /* taste-skill-ignore: speaking ring */
.bholo__bubble { margin: 44px 0 0; max-width: 360px; font-size: 17px; border-radius: 18px 4px 18px 18px; transform-origin: top right; }
.bholo .wave { display: flex; margin-bottom: 4px; }
.bholo .wave[hidden] { display: none; }

/* you, on camera */
.bme { position: absolute; left: 6px; top: 524px; z-index: 12; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.bme__face { position: relative; flex: none; width: 112px; height: 112px; }
.bme .face { border-radius: 50%; overflow: hidden; }
.bme__said { max-width: 330px; padding: 10px 16px; border-radius: 18px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 28px rgba(0, 0, 0, 0.4); font-size: 17px; line-height: 1.35; opacity: 0; transform: translateX(-8px); transition: opacity 200ms ease, transform 320ms var(--ease-out); } /* taste-skill-ignore: speech bubble edge so it reads over the white page */
.bme__said.is-on { opacity: 1; transform: none; }
.bme__said .wave { color: #3ddc84; height: 20px; }

/* two pointers: yours stays on the wiki, Atom's works the window behind it */
.bptr, .bcur { position: absolute; left: 0; top: 0; z-index: 13; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; transition: opacity 200ms ease; }
.bcur { width: 0; height: 0; }
.bptr b { margin-top: 16px; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.bptr b { background: var(--ink); color: var(--paper); }
/* the rocket from ComputerCursorArtwork: it turns to its heading, burns while it flies, and pulses a radar ring on a click */
.bcur__body { position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; transition: transform 160ms ease; }
.bcur__art { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)); transition: transform 260ms var(--ease-out), opacity 260ms ease; } /* taste-skill-ignore: the app's cursor shadow */
.bcur.is-small .bcur__art { transform: scale(0.2); opacity: 0; }
.bcur__flame { opacity: 0; }
.bcur.is-burn .bcur__flame { animation: burn 0.12s linear infinite; }
@keyframes burn { 0% { opacity: 0.65; } 25% { opacity: 1; } 50% { opacity: 0.7; } 75% { opacity: 0.9; } 100% { opacity: 0.65; } }
.bcur.is-click .bcur__art { animation: rocketPress 260ms ease both; }
@keyframes rocketPress { 25% { transform: scale(0.78); } 70% { transform: scale(1.08); } }
.bfx { position: absolute; left: 0; top: 0; z-index: 5; overflow: visible; pointer-events: none; }
.bfx.is-top { z-index: 11; }
.bfx__ring { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #ff9500; opacity: 0; animation: radar 850ms ease-out both; } /* taste-skill-ignore: the cursor's radar ring */
.bfx__ring + .bfx__ring { box-shadow: inset 0 0 0 1px #ff9500; animation-delay: 120ms; } /* taste-skill-ignore: the cursor's radar ring */
@keyframes radar { 0% { transform: scale(0.25); opacity: 0; } 40% { opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } }
.bfx__ticks { position: absolute; width: 98px; height: 98px; margin: -49px 0 0 -49px; opacity: 0; animation: ticks 850ms ease-out both; }
.bfx__ticks i { position: absolute; background: #ff9500; }
.bfx__ticks i:nth-child(1), .bfx__ticks i:nth-child(2) { left: 48.5px; width: 1px; height: 6px; } /* taste-skill-ignore: the radar's tick marks */
.bfx__ticks i:nth-child(1) { top: 0; } .bfx__ticks i:nth-child(2) { bottom: 0; }
.bfx__ticks i:nth-child(3), .bfx__ticks i:nth-child(4) { top: 48.5px; width: 6px; height: 1px; } /* taste-skill-ignore: the radar's tick marks */
.bfx__ticks i:nth-child(3) { left: 0; } .bfx__ticks i:nth-child(4) { right: 0; }
@keyframes ticks { from { opacity: 0.45; } to { opacity: 0; } }
.bfx__seg { position: absolute; height: 4px; margin-top: -2px; border-radius: 2px; background: #ff9500; box-shadow: 0 0 6px rgba(255, 149, 0, 0.6); transform-origin: left center; animation: seg 480ms ease-out both; } /* taste-skill-ignore: the rocket's ribbon glow */
@keyframes seg { from { opacity: 0.7; } to { opacity: 0; transform: var(--rot) scaleY(0.4); } }
.bcur.is-landing .bcur__flame { transform: scale(1.25); transform-origin: 0 29px; transform-box: view-box; }
.bfx__puff { position: absolute; width: 44px; height: 10px; margin: -5px 0 0 -22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 160, 0.85), rgba(255, 149, 0, 0) ); animation: puff 850ms ease-out both; } /* taste-skill-ignore: landing puff */
@keyframes puff { from { transform: scale(0.3); opacity: 1; } to { transform: scale(2.2, 1.6); opacity: 0; } }
.bfx__burst { position: absolute; width: 0; height: 0; opacity: 0; animation: burst 850ms ease-out both; }
.bfx__burst i { position: absolute; left: 12px; top: -0.75px; width: 5px; height: 1.5px; border-radius: 1px; background: #ff9500; transform-origin: -12px 0.75px; transform: rotate(var(--r)); }
@keyframes burst { 0% { transform: scale(0.25); opacity: 0; } 40% { opacity: 0.7; } 100% { transform: scale(2.5); opacity: 0; } }
.bcur { z-index: 5; opacity: 0; }
.bcur.is-on { opacity: 1; }
.bptr svg, .bcur svg { transition: transform 120ms ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); } /* taste-skill-ignore: pointer shadow */
.is-click svg { transform: scale(0.82); }

@media (max-width: 1024px) {
  .behind__copy { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bfilm { margin-top: 32px; }
  .bfilm__stage { width: auto; height: auto; display: grid; gap: 12px; }
  .bw, .acomp, .apanel, .orch, .bme { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: auto; transform: none !important; }
  .bme { order: -2; }
  .bholo { position: relative; right: auto; top: auto; order: -3; justify-content: flex-end; flex-direction: row; }
  .bholo:not(.is-on) { display: none; }
  .bholo .bot__face { width: 84px; height: 84px; }
  .bholo__bubble { margin-top: 10px; font-size: 15px; }
  .bfilm .mwin__bar span:not(.bw__yours) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bme__face { width: 76px; height: 76px; }
  .bme__said { font-size: 15px; }
  .bw--doc { order: -1; }
  .wiki { grid-template-columns: 1fr; height: auto; }
  .wiki__toc { display: none; }
  .wiki__scroll { height: 440px; min-width: 0; }
  .wiki__page { grid-template-columns: minmax(0, 1fr) 132px; }
  .wiki__code { white-space: pre-wrap; }
  .wiki__meta { flex-wrap: wrap; }
  .wiki__cbtn, .bptr, .bcur, .bfx { display: none; }
  .chud { position: relative; left: auto; bottom: auto; margin: 0 12px 12px; transform: none; }
  .chud:not(.is-on) { display: none; }
  .bw--fly:not(.is-work):not(.is-front), .apanel:not(.is-on), .orch:not(.is-on), .acomp.is-away, .bw--tune:not(.is-on) { display: none; }
  .bw--fly { height: 470px; filter: none; }
  .kx__page { width: auto; }
  .apanel { height: 380px; }
  .orch { height: 520px; }
  .orch__body { grid-template-columns: 1fr; }
  .orch__side { display: none; }
  .orch__panes { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 150px; }
  .opane:first-child { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wiki__page, .wiki__bar i { transition: none; }
  .acomp, .apanel, .orch, .bme__said, .acomp__reply, .chud, .kx__page { transition: opacity 200ms linear, visibility 0s; transform: none; }
  .apanel:not(.is-on) { transform: none; }
  .bholo, .bcur.is-burn .bcur__flame, .bfx > *, .is-playing .tune__eq i, .kx__book.is-ready, .apanel__feed > *, .wcard.is-new, .opane, .opane__out p, .orch__item.is-new, .aface *, .amark, .amark i { animation: none !important; }
}

.head { font-size: var(--step-head); font-weight: 700; line-height: 1; letter-spacing: -0.025em; max-width: 18ch; }

/* ---------- room ---------- */
.room { padding: clamp(96px, 14vh, 160px) var(--gutter) clamp(48px, 8vh, 96px); background: var(--paper); }
.room__copy { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: end; }
.room__h { font-size: var(--step-head); font-weight: 700; line-height: 1; letter-spacing: -0.025em; }
.rlabs { margin-top: clamp(48px, 7vh, 80px); padding: clamp(32px, 5vw, 72px); border-radius: var(--radius); background: var(--brand-faint); }
.rlabs__kick { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-size: var(--step-small); }
.rlabs__kick b { color: var(--brand); font-weight: 600; }
.rlabs__kick span { color: var(--muted); }
.rlabs__line { max-width: 36ch; font-size: clamp(1.25rem, 1rem + 1.6vw, 2.25rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.room__p { max-width: 44ch; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; }
.room__note { margin-top: 16px; max-width: 44ch; color: var(--muted); }
.rfilm { margin: 48px 0 0; }
.rfilm__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--dark); }
.rfilm__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rfilm__cap {
  position: absolute; left: 50%; bottom: clamp(16px, 4%, 40px); max-width: calc(100% - 32px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--sv-surface); color: var(--sv-fg); font-size: var(--step-small);
  transform: translateX(-50%); transition: opacity 200ms ease;
}
.rfilm__cap .panel__dot { flex: none; }
.rfilm__cap.is-swap { opacity: 0; }
.rfilm__cap.is-person .panel__dot { background: var(--sv-fg); }

/* ---------- price ---------- */
.price {
  display: grid; grid-template-columns: 4fr 1fr 7fr;
  align-items: center;
  min-height: 80svh;
  padding: clamp(96px, 14vh, 160px) var(--gutter);
  background: var(--ink); color: var(--paper);
}
.price__intro { grid-column: 1; align-self: start; }
.price__h { font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.price__intro p { margin-top: 16px; max-width: 30ch; color: #d8d6d1; }
.price__fig { grid-column: 3; position: relative; }
.price__num { display: flex; align-items: baseline; gap: 18px; line-height: 0.85; }
.price__digits { font-size: clamp(7.5rem, 16vw, 15rem); font-weight: 700; letter-spacing: -0.04em; color: var(--sv-tint); }
.price__unit { font-size: 1.125rem; font-weight: 500; }
.price__chip {
  position: absolute; top: -4px; left: clamp(160px, 22vw, 330px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--sv-surface); color: var(--sv-fg); font-size: var(--step-small);
}
.price__list { display: grid; gap: 6px; margin: 36px 0 32px; font-size: 1.125rem; }

/* ---------- cta ---------- */
.cta { padding: clamp(110px, 18vh, 200px) var(--gutter); background: var(--brand); color: var(--brand-ink); }
.cta .cta__note { color: var(--brand-muted); }
.cta .cta__input { background: rgba(255, 255, 255, 0.16); color: var(--brand-ink); caret-color: var(--brand-ink); }
.cta .cta__btn { background: var(--brand-ink); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .cta .cta__btn:hover { background: #eef3ff; } }
.cta__line {
  font-size: clamp(2rem, 4.8vw, 5.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em;
  max-width: 16em;
}
.cta__input {
  width: 4.4em; height: 1.08em;
  padding: 0 0.12em; margin: 0 0.06em;
  vertical-align: -0.12em;
  border: 0; border-radius: 0.1em;
  background: var(--raised); color: var(--ink);
  font-weight: 700; letter-spacing: -0.03em;
}
.cta__btn {
  height: 1.08em; padding: 0 0.16em;
  vertical-align: -0.12em;
  border: 0; border-radius: 0.1em;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.cta__btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cta__btn:hover { background: var(--accent-hover); } }
.cta__note { margin-top: 28px; max-width: 46ch; color: var(--muted); font-size: 1rem; }

/* ---------- footer ---------- */
.foot { background: var(--dark); color: var(--paper); padding: 88px var(--gutter) 0; overflow: hidden; }
.foot__row { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; }
.foot__places { display: grid; gap: 6px; font-size: clamp(1.625rem, 2.4vw, 2.25rem); font-weight: 500; }
.foot__places a { color: var(--paper); text-decoration: none; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: 0.9375rem; }
.foot__cols ul { display: grid; gap: 4px; align-content: start; }
.foot__cols a { text-decoration: none; color: #d8d6d1; display: inline-block; padding: 8px 0; }
@media (hover: hover) and (pointer: fine) {
  .foot a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}
.foot__legal { display: flex; justify-content: space-between; margin-top: 96px; font-size: 0.8125rem; color: #a3a19d; }
.foot__legal a { text-decoration: none; }
.foot__word {
  margin: 24px 0 -0.24em;
  font-size: 22vw; font-weight: 700; line-height: 0.9; letter-spacing: -0.06em;
  color: #2c2c2a;
}

/* ---------- entrances ---------- */
.js [data-reveal] {
  opacity: 0;
  transition: opacity 500ms ease;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-reveal].in { opacity: 1; }
.js h2[data-reveal] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.25em);
  transition: clip-path 700ms var(--ease-reveal), transform 700ms var(--ease-reveal);
}
.js h2[data-reveal].in { clip-path: inset(0 0 -0.2em 0); transform: none; }


/* ---------- tablet and phone ---------- */
@media (max-width: 1024px) {
  .panes { width: 100%; height: 60%; }
  .deck__screen { height: auto; min-height: 640px; }
  .deck .deck__editor { display: none; }
  .deck .deck__panel { left: 14px; right: 14px; width: auto; }
  .run__screen { grid-template-columns: 1fr; height: auto; }
  .run__panes { grid-auto-rows: minmax(150px, auto); }
  .deck .run__panel { height: 320px; }
  .meet__copy, .incl__copy { grid-template-columns: 1fr; }
  .room__copy { grid-template-columns: 1fr; }
  .price { grid-template-columns: 1fr; gap: 48px; }
  .price__intro, .price__fig { grid-column: 1; }
}

@media (max-width: 760px) {
  .rlabs { padding: 24px 20px; }
  .rlabs__line { font-size: 1.25rem; }
  .rfilm { margin-top: 32px; }
  .rfilm__cap { padding: 8px 12px; border-radius: 16px; }

  .top__links { gap: 16px; }
  .hero__copy { grid-template-columns: minmax(0, 1fr); }
  .hero__copy > .hero__act { justify-self: start; }
  .hero__act { align-items: flex-start; }
  .deck__screen { min-height: 0; display: grid; gap: 10px; }
  .panes { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .deck .deck__panel { position: static; }
  .run__foot { flex-direction: column; align-items: flex-start; }
  .tx li { grid-template-columns: 1fr; gap: 2px; }
  .foot__row { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .price__chip { left: auto; right: 0; }
  .cta__line { font-size: 8.2vw; }
  .hero__title { font-size: 7.4vw; letter-spacing: -0.03em; }
  .cta__input { width: 3.4em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-dl, .float-dl.is-on { transform: none; }
    .js [data-reveal] { transform: none; transition: opacity 300ms linear; }
  .js h2[data-reveal] { clip-path: none; transform: none; opacity: 0; transition: opacity 300ms linear; }
  .js h2[data-reveal].in { opacity: 1; }
  .run__panes .pane.is-new, .run__feed > .is-new, .lt__block.is-new { animation: fade 240ms ease both; }
  .caret { animation: none; }
  .v-step__mark::before { animation: none; }
}

/* Production availability surfaces; shared demos and layout stay unchanged. */
.launch-status { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.preview-label { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; padding-bottom: 24px; }
.preview-note { max-width: 36ch; color: #d8d6d1; }
.hero__act .hero__note { width: auto; min-width: 0; max-width: 28ch; }
.price__chip { position: static; display: inline-flex; }
:focus-visible { outline-color: currentColor; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--paper); color: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (max-width: 1024px) {
  .hero__copy { grid-template-columns: minmax(0, 1fr); }
  .hero__copy > .hero__act { justify-self: start; }
}