@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* cozmospace.com. Black page: Cozmo is the only lit object, the brand line carries the hero, one email field.
   Built from the approved round 6 mockup (v22); the fonts are self-hosted, see fonts/README.md. */
:root {
  --page: #000000;
  --fg: #F2F2F0;
  --muted: #8E8E8A;
  --faint: #5A5A57;
  --line: #262626;
  --field: #0E0E0E;
  --accent: #FF6B2C;          /* brand tangerine */
  --accent-ink: #160800;
  --visor: #5BFFB0;           /* the visor prompt green from the renders */
  --chrome: #161616;
  --display: "Bricolage Grotesque", "SF Pro Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans: "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
html, body { background: var(--page) }
body { margin: 0; color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px }


.page { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-inline: clamp(16px, 4vw, 48px); overflow: hidden; isolation: isolate }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.03em }
.brand img { width: 22px; height: 22px }
.soon { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .02em }
.soon i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: blink 2.4s ease-in-out infinite }

/* Cozmo: Higgsfield loops on black; screen blend drops any near-black haze into the page */
.cozmo { position: relative; aspect-ratio: 1; width: min(40vh, 400px, 84vw) }
.cozmo .v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent) }

h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.032em; line-height: .95; margin: 0; text-wrap: balance }
.lede { margin: 0; color: var(--muted); font-size: 18px; max-width: 30em; text-wrap: balance }
.lede b { color: var(--fg); font-weight: 500 }

form { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 470px; height: 52px; padding: 5px 5px 5px 18px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s }
form:focus-within { box-shadow: inset 0 0 0 1px #4A4A4A, 0 0 0 4px rgba(255,107,44,.10) }
form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--fg); font-family: var(--mono); font-size: 14px; line-height: 1; padding: 0; outline: none; caret-color: var(--accent) }
form input::placeholder { color: #4C4C4A }
/* the field's own ring shows focus, so the page-wide outline stays off the input inside it */
form input:focus-visible { outline: none }
/* phones zoom into any field set under 16px, which throws the layout off */
@media (max-width: 900px), (pointer: coarse) { form input { font-size: 16px } }
form button { flex: none; height: 100%; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 500; font-size: 14.5px; cursor: pointer }
form button:hover { filter: brightness(1.07) }
form.bad { box-shadow: inset 0 0 0 1px #F0454B }
.said { min-height: 1.5em; margin: 0; font-size: 14px; color: var(--muted) }
.said.ok { color: #3EE8A0 } .said.err { color: #F0454B }



/* Dot matrix: type is the backdrop, Cozmo stands in it, copy sits on the bottom corners */
.matrix .main { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr auto; gap: 24px 48px; padding-block: 8px 12px }
.matrix .cozmo { grid-column: 1 / -1; justify-self: center; align-self: center; aspect-ratio: 420 / 560; width: min(44vh, 340px, 64vw) }
.matrix .copy { display: contents }
.matrix h1 { grid-column: 1; grid-row: 2; align-self: end; font-size: clamp(44px, 7vw, 104px) }
/* the line, the field and the helper are one block, level with the headline's last line and flush with the right margin, like the Linear and Vercel heroes (Omar, mockup v41) */
.matrix .act { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-self: end; justify-self: end; width: min(100%, 470px); min-width: 0 }
.matrix .lede { margin: 0 0 6px; max-width: none; color: var(--fg); font-size: 20px; font-weight: 500; letter-spacing: -.01em }
@media (min-width: 761px) { .matrix .main { padding-right: 28px } }

@media (max-width: 760px) {
  .matrix .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; row-gap: 16px }
  .matrix h1 { grid-row: 2 }
  .matrix .act { grid-column: 1; grid-row: 3; justify-self: stretch; width: auto }
  form button { padding: 0 12px }
}
@media (max-width: 620px) { .matrix .lede { font-size: 18px } }

/* scroll line: a quiet label over a thin line that a drop of light runs down, like Apple's product pages */
.cue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #77776F; text-decoration: none }
.cue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 -14px / 1px 14px, #262626; animation: drop 2.2s cubic-bezier(.5,0,.3,1) infinite }
.cue:hover { color: #B4B4B0 }
@keyframes drop { to { background-position: 0 40px, 0 0 } }
/* monitors only (Omar): on a laptop, 13 to 16 inch (up to 1728 pt wide), the label crowds the headline and the signup */
@media (max-width: 1799px) { .cue { display: none } }
@media (prefers-reduced-motion: reduce) { .cue::after { animation: none; background: #333 } }

/* pager: four full screens that snap, then the footer */
html { scroll-snap-type: y mandatory; scroll-behavior: smooth }
.page { scroll-snap-align: start }

/* the one-window screen: the island, shown in the real window (Cozmo Dark metrics from IslandView, SidebarView, DecisionCardView) */
.more, .all { position: relative; min-height: 100svh; scroll-snap-align: start; display: grid; padding-inline: clamp(16px, 4vw, 48px); overflow: hidden; isolation: isolate }
.more { grid-template-rows: 1fr; background: radial-gradient(55% 50% at 72% 45%, rgba(255,107,44,.07), transparent 70%), #000 }
.more::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(#1A1A1A 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 60% at 70% 50%, #000, transparent); mask-image: radial-gradient(70% 60% at 70% 50%, #000, transparent) }
.more-in { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(28px, 4vw, 64px); width: 100%; max-width: 1320px; margin: 0 auto; padding-block: clamp(24px, 5vh, 64px) }
.facts { display: grid; gap: clamp(12px, 2vh, 20px); min-width: 0 }
.eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent) }
h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.9vw, 58px); letter-spacing: -0.032em; line-height: .98; text-wrap: balance }
h2 em { font-style: normal; color: var(--accent) }
.sub { margin: 0; color: var(--muted); font-size: clamp(15.5px, 1.2vw, 17.5px); max-width: 31em; text-wrap: pretty }
.how { margin: clamp(2px, 1vh, 10px) 0 0; padding: 0; list-style: none; display: grid; border-top: 1px solid #1A1A1A }
.how li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: baseline; padding-block: clamp(10px, 1.6vh, 14px); border-bottom: 1px solid #1A1A1A; font-size: 14px; line-height: 1.5; color: var(--muted) }
.how li b { font-weight: 500; color: var(--fg) }
.how .k { display: flex; gap: 3px; white-space: nowrap }
.how .band { width: 100%; max-width: 96px; height: 20px; border-radius: 5px; background: repeating-linear-gradient(-45deg, rgba(240,69,75,.28) 0 6px, rgba(240,69,75,.12) 6px 12px); box-shadow: inset 0 0 0 1px rgba(240,69,75,.5); align-self: center }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: #141414; box-shadow: inset 0 0 0 1px #2A2A2A, 0 1px 0 #2A2A2A; font: 500 12px/1 -apple-system, "SF Pro Text", var(--sans); color: var(--fg) }

/* the window */
.stage { position: relative; min-width: 0 }
.win { position: relative; display: grid; grid-template-columns: 31% minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr); gap: 0 8px; height: clamp(340px, 60vh, 520px); padding: 0 8px 8px; border-radius: 14px; background: #242424; box-shadow: inset 0 0 0 1px #3A3A3A, 0 40px 120px -20px rgba(0,0,0,.9), 0 0 90px -30px rgba(255,107,44,.3); font-family: -apple-system, "SF Pro Text", var(--sans); font-size: 12px; color: #E8E8E6 }
.tb { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 8px; padding-left: 6px }
.tb .lt { width: 12px; height: 12px; border-radius: 50% } .tb .r { background: #FF5F57 } .tb .y { background: #FEBC2E } .tb .g { background: #28C840 }
.tb svg { width: 15px; height: 15px; color: #6A6A66 } .tb .first { margin-left: 10px } .tb .gr { color: #3A3A38 }
.tb .bell { margin-left: auto; margin-right: 6px }
.side { min-width: 0; display: grid; align-content: start; gap: 1px; padding: 6px 4px; border-radius: 10px; background: #2A2A2A; box-shadow: inset 0 0 0 1px #343434; overflow: hidden }
.grp { display: flex; gap: 6px; padding: 9px 10px 4px; font-size: 11px; font-weight: 600; color: #8E8E8A } .grp span { font-weight: 400; color: #5A5A57; font-variant-numeric: tabular-nums }
.row { display: grid; grid-template-columns: 12px 18px minmax(0, 1fr) auto; gap: 0 8px; align-items: center; padding: 5px 8px; border-radius: 8px; min-width: 0 }
.row .n { grid-row: span 2; font: 11px/1 ui-monospace, var(--mono); color: #5A5A57; text-align: right }
.row .hm { grid-row: span 2; position: relative; width: 18px; height: 18px }
.row .hm img { width: 18px; height: 18px; opacity: .55; filter: grayscale(1) }
.row .hm i { position: absolute; right: -3px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px #2A2A2A; display: grid; place-items: center; font: 700 7px/1 var(--sans); font-style: normal }
.row b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row small { grid-column: 3; font-size: 11px; color: #7A7A78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row em { grid-row: 1 / span 2; grid-column: 4; font: normal 11px/1 ui-monospace, var(--mono); color: #5A5A57 }
.row.on { background: #383838 }
.chip { display: inline-flex; align-items: center; height: 15px; padding: 0 5px; margin-left: 5px; border-radius: 4px; background: #262626; box-shadow: inset 0 0 0 1px #343434; font: 9.5px/1 ui-monospace, var(--mono); color: #A8A8A4; vertical-align: 1px }
.s-work { box-shadow: inset 0 0 0 1.6px #5B7CFF, 0 0 0 2px #2A2A2A !important; background: #2A2A2A }
.s-need { background: #FFB020; color: #2A1A00 } .s-done { background: #3EE8A0; color: #062216 } .s-idle { background: #8B90A8; width: 7px !important; height: 7px !important }
.panes { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px }
.pane { min-width: 0; display: grid; grid-template-rows: 26px minmax(0, 1fr); border-radius: 10px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #343434; overflow: hidden }
.pane.big { grid-row: span 2 }
.pane.focus { box-shadow: inset 0 0 0 1px rgba(255,107,44,.6), 0 0 24px -6px rgba(255,107,44,.35) }
.pane:not(.focus) .tx { opacity: .7 }
.tx .cc { color: #D97757 } .tx .tbox { display: block; width: max-content; max-width: 100%; margin-bottom: 4px; padding: 4px 10px; border-radius: 4px; box-shadow: inset 0 0 0 1px #4A4A4A } .tx .cc-b { box-shadow: inset 0 0 0 1px #D97757 } .tx .w { color: #F2F2F0 } .tx .bx { color: #5A5A57 } .tx .cx { color: #7AA2FF }
.ph { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid #2C2C2C; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden }
.ph i { width: 6px; height: 6px; border-radius: 50%; background: #5A5A57 } .focus .ph i { background: var(--accent) }
.ph span { font-weight: 400; color: #7A7A78 }
.tx { padding: 10px 12px; font: 11px/1.6 "JetBrains Mono", ui-monospace, var(--mono); color: #D4D4D0; white-space: pre; overflow: hidden }
.tx .p { color: #E8E8E6 } .tx .bad { color: #F0454B } .tx .d { color: #6A6A66 } .tx .g { color: #3EE8A0 } .tx .a { color: #FFB020 } .tx .b { color: #5B7CFF }
.tx .cur { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: var(--accent); animation: blink 1.1s steps(2) infinite }
.tx .after { display: none } .st-allowed .tx .after, .st-busy .tx .after { display: inline } .st-allowed .tx .wait, .st-busy .tx .wait { display: none }

/* the island: a grey pill that opens into the decision card, the way the Mac's own island opens */
.isl { position: absolute; left: 50%; top: 6px; z-index: 5; width: 156px; height: 28px; transform: translateX(-50%); border-radius: 14px; background: #333; box-shadow: inset 0 0 0 1px #4A4A4A; overflow: hidden;
  transition: width .55s cubic-bezier(.3,1.35,.5,1), height .55s cubic-bezier(.3,1.35,.5,1), border-radius .55s ease, background .3s, box-shadow .3s }
.isl .pill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: opacity .25s }
.isl .pill img { width: 15px; height: 15px }
.isl .pill i { width: 10px; height: 10px; border-radius: 50%; display: grid; place-items: center; font: 700 7.5px/1 var(--sans); font-style: normal }
.isl .pill span { display: none } .isl .pill b { font-weight: 500; color: #9A9A96 }
.isl[data-s="busy"] .p-busy, .isl[data-s="need"] .p-need, .isl[data-s="allowed"] .p-allowed { display: inline }
.isl[data-s="need"] .pill i.s-need { animation: blink 1.4s ease-in-out infinite }
.isl .crd { position: absolute; left: 0; top: 0; width: 540px; max-width: 100vw; padding: 14px 16px 12px; opacity: 0; transition: opacity .2s; pointer-events: none; text-align: left }
.isl[data-s="open"] { border-radius: 20px; background: #2C2C2C; box-shadow: inset 0 0 0 1px #4A4A4A, 0 30px 70px -10px rgba(0,0,0,.85) }
.isl[data-s="open"] .pill { opacity: 0 } .isl[data-s="open"] .crd { opacity: 1; transition: opacity .3s .25s }
.crd .hd { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0 10px; align-items: center }
.crd .ic { grid-row: span 2; width: 26px; height: 26px; border-radius: 6px; background: #3A3A3A; display: grid; place-items: center } .crd .ic img { width: 16px; height: 16px }
.crd .t { font-size: 13px; font-weight: 600 } .crd .m { grid-column: 2; font-size: 11px; color: #7A7A78 } .crd .w { grid-row: 1; grid-column: 3; font: 11px/1 ui-monospace, var(--mono); color: #FFB020 }
.crd .well { display: flex; align-items: center; margin: 11px 0 8px; padding: 9px 12px; border-radius: 8px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #3A3A3A; font: 12px/1.3 "JetBrains Mono", ui-monospace, var(--mono) }
.crd .well span { margin-left: auto; font: 11px/1 -apple-system, var(--sans); color: #6A6A66 }
.crd .why { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: #9A9A96 }
.crd .bar { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid #2E2E2E }
.crd .later { margin-right: auto; font-size: 11.5px; color: #6A6A66 }
.crd .bt { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; background: #3C3C3C; font-size: 11.5px; transition: transform .12s, filter .12s } .crd .bt small { font-size: 10.5px; opacity: .65 }
.crd .bt.pri { background: var(--accent); color: var(--accent-ink) } .crd .bt.press { transform: scale(.94); filter: brightness(1.25) }
.peek { position: absolute; right: clamp(-60px, -3vw, -20px); bottom: clamp(-70px, -6vh, -30px); width: clamp(140px, 20vh, 200px); aspect-ratio: 1; z-index: 6; pointer-events: none }
.peek video, .peek .still { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 46%, #000 70%, transparent 100%) }

/* the features screen: the features that only Cozmo has, at the weight they deserve */
.all { grid-template-rows: 1fr auto; background: radial-gradient(50% 40% at 50% 0%, rgba(255,107,44,.06), transparent 70%), #000 }
.all-in { display: grid; align-content: center; gap: clamp(14px, 2.6vh, 30px); width: 100%; max-width: 1320px; margin: 0 auto; padding-block: clamp(10px, 3.4vh, 56px) 4px }
.all .head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27em); align-items: end; gap: 12px 48px }
.all .head .eyebrow { grid-column: 1 / -1 }
.all h2 { font-size: clamp(32px, 3.9vw, 56px) }
.all .sub { justify-self: end }
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px } .tile.run { grid-column: 1 / -1 }
.tile { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: clamp(16px, 2.4vh, 22px) 20px; border-radius: 14px; background: #0A0A0A; box-shadow: inset 0 0 0 1px #1C1C1C; min-width: 0 }
.tile h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -0.02em; line-height: 1.15; color: var(--fg) }
.tile p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty }
.vis { align-self: end; margin-top: 6px; display: grid; gap: 2px; padding: 9px 12px; border-radius: 9px; background: #121212; box-shadow: inset 0 0 0 1px #222; font: 11.5px/1.65 "JetBrains Mono", ui-monospace, var(--mono); color: #8E8E8A; min-width: 0; overflow: hidden }
.vis div { display: flex; gap: 10px; white-space: nowrap } .vis div > :last-child:not(:first-child) { margin-left: auto }
.tile kbd { min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; vertical-align: 1px }
.vis .w { color: #E8E8E6 } .vis .acc { color: var(--accent) } .vis .dim { color: #5A5A57 }
.vis .ok::before, .vis .wk::before, .vis .nd::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 0 }
.vis .ok { color: #3EE8A0 } .vis .ok::before { background: #3EE8A0 } .vis .wk { color: #5B7CFF } .vis .wk::before { box-shadow: inset 0 0 0 1.5px #5B7CFF } .vis .nd { color: #FFB020 } .vis .nd::before { background: #FFB020 }

/* reveal: each block rises in once its screen arrives */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
.in .rv { opacity: 1; transform: none }
.in .rv:nth-child(2) { transition-delay: .08s } .in .rv:nth-child(3) { transition-delay: .16s } .in .rv:nth-child(4) { transition-delay: .24s }
.in .stage.rv { transition-delay: .15s } .in .tile.rv { transition-delay: calc(var(--i, 0) * .06s) }

@media (max-width: 1100px) { .win { grid-template-columns: minmax(0, 1fr) } .side { display: none } }
@media (max-width: 900px) {
  html { scroll-snap-type: none }
  .more-in { grid-template-columns: 1fr }
  .all .head { grid-template-columns: 1fr } .all .sub { justify-self: start }
  .peek { right: -10px; bottom: -60px }
}
@media (max-width: 620px) {
  .feat { grid-template-columns: 1fr }
  /* phones: one terminal across the window, the one that needs you */
  .win { height: 380px } .panes { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) } .pane.big { grid-row: auto } .pane:not(.big) { display: none }
  .crd .bt small, .crd .later { display: none } .how li { grid-template-columns: 1fr; gap: 6px }
}

/* collapsed sidebar rail, agent marks, launch entrances, live tiles, pager */
.win { grid-template-columns: 44px minmax(0, 1fr) !important }
.rail { display: grid; align-content: start; justify-items: center; gap: 6px; padding-top: 4px }
.tile-r { position: relative; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center }
.tile-r.on { background: #383838 }
.tile-r img { width: 18px; height: 18px; opacity: .55; filter: grayscale(1) }
.tile-r i { position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #242424; display: grid; place-items: center; font: 700 7px/1 var(--sans); font-style: normal }
.tile-r.on i { box-shadow: 0 0 0 2px #383838 }
.tile-r .s-work { box-shadow: inset 0 0 0 1.6px #5B7CFF, 0 0 0 2px #242424 !important; background: #242424 }
.ph .mk { width: 13px; height: 13px; object-fit: contain }
/* the one-window screen arrives like a landing: the window comes down from a tilt onto the page */
.more .stage.rv { opacity: 0; transform: perspective(1400px) translateY(90px) rotateX(26deg) scale(.88); transform-origin: 50% 100%; transition: opacity .9s ease, transform 1.3s cubic-bezier(.16,1,.3,1) }
.more.in .stage.rv { opacity: 1; transform: none }
.more .stage::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -40px; height: 80px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,107,44,.55), transparent); filter: blur(10px); opacity: 0; transition: opacity 1.4s ease .2s }
.more.in .stage::after { opacity: .5 }
.lines { display: block; overflow: hidden; padding-bottom: .06em } .lines > span { display: block; transform: translateY(105%); transition: transform 1s cubic-bezier(.16,1,.3,1) }
.in .lines > span { transform: none } .in .lines:nth-child(2) > span { transition-delay: .12s }
h2.rv:has(.lines) { opacity: 1; transform: none }
/* the features screen: the tiles stand up one by one, then their contents come alive */
.all .tile.rv { opacity: 0; transform: perspective(1200px) translateY(40px) rotateX(18deg); transform-origin: 50% 100% }
.all.in .tile.rv { opacity: 1; transform: none; transition: opacity .8s ease, transform 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(.15s + var(--i, 0) * .09s) }
.pulse::before { animation: blink 1.6s ease-in-out infinite }
.live-rank { position: relative; display: block; height: 74px } .live-rank .r { position: absolute; left: 12px; right: 12px; transition: top .6s cubic-bezier(.3,1.3,.5,1) }
.live-rank .r { left: 6px; right: 6px; padding: 0 6px; border-radius: 5px; transition: top .6s cubic-bezier(.3,1.3,.5,1), background .4s } .live-rank .r.top { background: rgba(255,176,32,.1) }
.caret { display: inline-block; width: 7px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(2) infinite }
.live-type .out, .live-host .out { opacity: 0; transition: opacity .3s } .done-typing .out { opacity: 1 }
.st.nd::before { animation: blink .8s ease-in-out infinite }
.tile.run { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: 1fr; align-items: center; gap: 24px;
  background: radial-gradient(60% 120% at 70% 50%, rgba(255,107,44,.07), transparent 70%), #0A0A0A }
.run-copy { display: grid; gap: 10px; align-content: center }
.run-copy .any { font: 12.5px/1.4 "JetBrains Mono", ui-monospace, var(--mono); color: #B8B8B4 } .run-copy .any .acc { color: var(--accent) }
.orbit { position: relative; height: 240px }
.orbit .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; box-shadow: inset 0 0 0 1px #262626; transform: translate(-50%, -50%) }
.orbit .r1 { width: 330px; height: 96px } .orbit .r2 { width: 600px; height: 192px; box-shadow: inset 0 0 0 1px #1F1F1F }
.orbit .hub { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 13px; display: grid; place-items: center; background: #161616; box-shadow: inset 0 0 0 1px #2E2E2E, 0 0 40px rgba(255,107,44,.3) } .orbit .hub img { width: 24px; height: 24px }
.orbit .ag { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 3px; width: 76px; offset-rotate: 0deg; offset-anchor: 50% 13px; animation: orbit 48s linear infinite; animation-delay: var(--d) }
.orbit .ag.in { offset-path: ellipse(165px 48px at 50% 50%) } .orbit .ag.out { offset-path: ellipse(300px 96px at 50% 50%) }
.ag .ai { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) }
.ag .ai img { width: 15px; height: 15px; opacity: .92 }
.ag .sh { font: 600 10px/1 "JetBrains Mono", var(--mono); color: #F2F2F0 }
.ag em { font: normal 9.5px/1 var(--mono); color: #9A9A96; white-space: nowrap }
@keyframes orbit { from { offset-distance: 0% } to { offset-distance: 100% } }
/* pager dots: where you are among the four screens */
.dots { position: fixed; right: 22px; top: 50%; z-index: 20; display: grid; gap: 12px; transform: translateY(-50%) }
.dots a { display: block; width: 8px; height: 8px; border-radius: 50%; background: #333; transition: height .3s, background .3s, border-radius .3s }
.dots a.on { height: 22px; border-radius: 4px; background: var(--accent) }
@media (max-width: 900px) { .dots { display: none } }
@media (max-width: 1100px) { .tile.run { grid-template-columns: 1fr } }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr } }
@media (max-width: 620px) { .orbit { height: 250px } .orbit .r1 { width: 170px; height: 100px } .orbit .r2 { width: 320px; height: 210px } .orbit .ag.in { offset-path: ellipse(85px 50px at 50% 50%) } .orbit .ag.out { offset-path: ellipse(160px 105px at 50% 50%) } .ag em { display: none } }
@media (max-height: 800px) and (min-width: 901px) { .all h2 { font-size: clamp(30px, 3.2vw, 46px) } .all .tile p { font-size: 13px } }
@media (prefers-reduced-motion: reduce) { .more .stage.rv, .all .tile.rv, .lines > span { transform: none !important; opacity: 1 !important } }

/* the machines screen: every machine, one sidebar; the machines wire themselves into the sidebar as it arrives */
.hosts { position: relative; min-height: 100svh; scroll-snap-align: start; display: grid; padding-inline: clamp(16px, 4vw, 48px); overflow: hidden; isolation: isolate;
  background: radial-gradient(45% 50% at 70% 50%, rgba(91,124,255,.07), transparent 70%), radial-gradient(30% 30% at 70% 50%, rgba(255,107,44,.06), transparent 70%), #000 }
.hosts::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: radial-gradient(#1A1A1A 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(60% 60% at 70% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 70% 50%, #000, transparent) }
.hosts-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 4vw, 64px); width: 100%; max-width: 1320px; margin: 0 auto; padding-block: clamp(24px, 5vh, 64px) }
.cmd { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: clamp(4px, 1.2vh, 10px); padding: 11px 16px; border-radius: 10px; background: #0E0E0E; box-shadow: inset 0 0 0 1px #222; font: 13px/1 "JetBrains Mono", ui-monospace, var(--mono); white-space: nowrap; overflow: hidden }
.cmd .acc { color: var(--accent) } .cmd .w { color: #E8E8E6 } .cmd .caret { margin-left: -6px }
.cmd .res { margin-left: 10px; color: #3EE8A0; opacity: 0; transition: opacity .4s } .cmd .res::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #3EE8A0 }
.cmd.done-typing .res { opacity: 1 }
.net { position: relative; height: clamp(360px, 62vh, 520px); min-width: 0 }
.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.ln { fill: none; stroke: #3A3A3A; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6 }
.pk { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 4px rgba(255,107,44,.9)) }
.hosts.in .pk { opacity: 1; animation: packet 2.6s cubic-bezier(.5,0,.5,1) infinite 1.2s } .hosts.in .p2 { animation-delay: 2s } .hosts.in .p3 { animation-delay: 1.6s; animation-direction: reverse }
@keyframes packet { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
.hosts.in .ln { animation: flow 1.6s linear infinite }
@keyframes flow { to { stroke-dashoffset: -20 } }
.node { position: absolute; width: clamp(150px, 17vw, 196px); display: grid; grid-template-columns: 34px 1fr; gap: 1px 10px; align-items: center; padding: 11px 34px 11px 12px; border-radius: 12px; background: #0E0E0E; box-shadow: inset 0 0 0 1px #262626; transform: translate(-50%, -50%) }
.node .ico { grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #181818; box-shadow: inset 0 0 0 1px #2A2A2A; color: #B8B8B4 } .node .ico svg { width: 20px; height: 20px }
.node b { font-weight: 500; font-size: 14px } .node small { font-size: 11.5px; color: #7A7A78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.node .dots3 { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px }
.n1 { left: 13%; top: 14% } .n2 { left: 13%; top: 86% } .n3 { left: 87%; top: 50% }
.n1 .ico { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,107,44,.5) }
s.nd, s.wk, s.ok { display: inline-block; width: 8px; height: 8px; border-radius: 50%; text-decoration: none } s.nd { background: #FFB020 } s.ok { background: #3EE8A0 } s.wk { box-shadow: inset 0 0 0 1.6px #5B7CFF }
.hub-card { position: absolute; left: 50%; top: 50%; width: min(310px, 40%); transform: translate(-50%, -50%); display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: #242424; box-shadow: inset 0 0 0 1px #3A3A3A, 0 30px 80px -10px rgba(0,0,0,.9), 0 0 70px -20px rgba(255,107,44,.35); font-size: 12px }
.hc-h { display: flex; align-items: center; gap: 7px; padding: 6px 8px 8px; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: -.02em }
.hc-h img { width: 16px; height: 16px } .hc-h span { margin-left: auto; font: 400 11px/1 var(--sans); letter-spacing: 0; color: #7A7A78 }
.hr { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; padding: 7px 9px; border-radius: 8px }
.hr s { grid-row: span 2 } .hr b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hr em { grid-column: 3; grid-row: 1 / span 2; font: normal 10px/1 ui-monospace, var(--mono); padding: 3px 6px; border-radius: 5px; background: #333; box-shadow: inset 0 0 0 1px #444; color: #C8C8C4 }
.hr small { grid-column: 2; font-size: 11px; color: #8A8A86 }
.hr.on { background: #343434 }
/* the arrival: machines slide in from the edges, the wires draw, the rows land one by one */
.hosts .node, .hosts .hub-card, .hosts .hr { opacity: 0; transition: opacity .7s ease, transform 1.1s cubic-bezier(.16,1,.3,1) }
.hosts .n1 { transform: translate(-90%, -50%) } .hosts .n2 { transform: translate(-90%, -50%) } .hosts .n3 { transform: translate(-10%, -50%) }
.hosts .hub-card { transform: translate(-50%, -44%) scale(.94) }
.hosts .ln { stroke-dashoffset: 0; opacity: 0; transition: opacity 1s ease .5s }
.hosts.in .node { opacity: 1; transform: translate(-50%, -50%) } .hosts.in .n2 { transition-delay: .12s } .hosts.in .n3 { transition-delay: .24s }
.hosts.in .hub-card { opacity: 1; transform: translate(-50%, -50%); transition-delay: .1s } .hosts.in .ln { opacity: 1 }
.hosts .hr { transform: translateY(6px) } .hosts.in .hr { opacity: 1; transform: none } 
.hosts.in .hr:nth-child(2) { transition-delay: .5s } .hosts.in .hr:nth-child(3) { transition-delay: .6s } .hosts.in .hr:nth-child(4) { transition-delay: .7s } .hosts.in .hr:nth-child(5) { transition-delay: .8s } .hosts.in .hr:nth-child(6) { transition-delay: .9s }
@media (max-width: 1360px) { .node small { display: none } .node { width: 150px } }
@media (max-width: 900px) { .hosts-in { grid-template-columns: 1fr } }
@media (max-width: 620px) {
}
@media (prefers-reduced-motion: reduce) { .hosts .node, .hosts .hub-card, .hosts .hr, .hosts .ln { opacity: 1 !important } }


/* each screen is introduced by the island itself: a grey pill drops in, then opens to say what is happening */
.intro { margin: 0; justify-self: start; display: inline-flex; align-items: center; width: fit-content; height: 30px; padding: 0 8px; border-radius: 15px; background: #2A2A2A; box-shadow: inset 0 0 0 1px #4A4A4A, 0 12px 30px -10px rgba(0,0,0,.9); font: 500 12.5px/1 -apple-system, "SF Pro Text", var(--sans); color: #E8E8E6; white-space: nowrap }
.intro > img { width: 16px; height: 16px; flex: none }
.intro .ix { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .9s cubic-bezier(.3,1.15,.5,1) .45s }
.in .intro .ix { grid-template-columns: 1fr }
/* the reveal clips sideways; the padding keeps descenders (the g in "landing") inside the clip */
.intro .ix > span { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; padding-block: 4px }
.intro b { margin-left: 8px; font-weight: 600 } .intro .sep { flex: none; width: 1px; height: 12px; background: #4A4A4A }
.intro .stt { display: inline-flex; align-items: center; gap: 7px; padding-right: 4px; color: #A8A8A4 } .intro .stt s { flex: none }
.intro s.nd { animation: blink 1.4s ease-in-out infinite }
.intro .tt { transition: opacity .25s } .intro .tt.swap { opacity: 0 }
.intro.rv { transform: translateY(-16px) scale(.6); transition: opacity .5s ease, transform .8s cubic-bezier(.3,1.5,.5,1) }
.in .intro.rv { transform: none }
.all .head .intro { grid-column: 1 / -1 }
#tour .stt { min-width: 11.5em }
.all .tile { transition: box-shadow .5s ease, background .5s ease }
.all .tile.lit { box-shadow: inset 0 0 0 1px rgba(255,107,44,.42), 0 0 50px -18px rgba(255,107,44,.4) }
/* Cozmo peeks over the top edge of the window from behind it, so he watches without covering a pane */
.more .stage .win { z-index: 2 }
.more .peek { --pw: clamp(136px, 19vh, 176px); left: auto; right: 72px; top: calc(var(--pw) * -.64); bottom: auto; width: var(--pw); z-index: 1;
  opacity: 0; transform: translateY(46%); transition: opacity .4s ease 1.2s, transform 1s cubic-bezier(.3,1.45,.5,1) 1.2s }
.more.in .peek { opacity: 1; transform: none }
@media (max-height: 800px) and (min-width: 901px) { .all-in { gap: 12px } .all .head { gap: 8px 48px } .all .orbit { height: 210px } }
/* the orbit drops its captions; white marks on tinted tiles read as one family, the name shows on hover */
.orbit .ag { offset-anchor: 50% 50%; width: auto; animation-play-state: running }
.orbit:hover .ag { animation-play-state: paused }
.ag .ai { width: 34px; height: 34px; border-radius: 10px; transition: background .2s, box-shadow .2s } .ag .ai img { width: 18px; height: 18px }
.ag .sh { font-size: 12px }
.ag em { position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: 4px 7px; border-radius: 6px; background: #1C1C1C; box-shadow: inset 0 0 0 1px #333; color: #E8E8E6; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3 }
.ag:hover em { opacity: 1; transform: translate(-50%, 0) } .ag:hover .ai { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3) }
@media (max-width: 620px) { .ag .ai { width: 30px; height: 30px } .ag .ai img { width: 16px; height: 16px } }
@media (max-width: 900px) { .more .peek { right: 40px } .more .stage { margin-top: 70px } }
@media (prefers-reduced-motion: reduce) { .intro .ix { grid-template-columns: 1fr } .more .peek { opacity: 1; transform: none } }
/* phones: the same constellation as the desktop, stacked: two machines above the sidebar, one below, curved wires into it */
.links-m { display: none }
@media (max-width: 620px) {
  .net { height: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "a c" "h h" "b b"; gap: 54px 12px; padding-inline: 2px }
  .links { display: none } .links-m { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
  .node { position: relative; left: auto !important; top: auto !important; width: auto; max-width: 172px; grid-template-columns: 30px 1fr; padding: 9px 30px 9px 9px }
  .node .ico { width: 30px; height: 30px } .node .ico svg { width: 18px; height: 18px } .node b { font-size: 13.5px } .node small { display: block !important; font-size: 10.5px }
  .n1 { grid-area: a; justify-self: start } .n3 { grid-area: c; justify-self: end } .n2 { grid-area: b; justify-self: center; width: 172px }
  .hub-card { position: relative; left: auto; top: auto; grid-area: h; width: auto; margin-inline: 4%; transform: translateY(24px) scale(.96) !important }
  .hosts .n1 { transform: translateX(-40px) !important } .hosts .n3 { transform: translateX(40px) !important } .hosts .n2 { transform: translateY(40px) !important }
  .hosts.in .node, .hosts.in .hub-card { transform: none !important }
}
/* phones: a compact island card, and the two agents side by side as tall columns like a vertical split */
@media (max-width: 620px) {
  .isl { height: 24px; top: 8px } .isl .pill { font-size: 11px; gap: 5px } .isl .pill img { width: 13px; height: 13px } .isl .pill i { width: 9px; height: 9px }
  .isl .crd { padding: 10px 11px 9px } .crd .hd { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 8px } .crd .ic { width: 22px; height: 22px } .crd .ic img { width: 13px; height: 13px }
  .crd .t { font-size: 11.5px } .crd .m { font-size: 10px } .crd .w { font-size: 10px }
  .crd .well { margin: 8px 0 8px; padding: 7px 9px; font-size: 10.5px } .crd .well span { display: none } .crd .why { display: none }
  .crd .bar { padding-top: 8px; gap: 5px } .crd .bt { height: 22px; padding: 0 8px; font-size: 10.5px; border-radius: 6px } .crd .bt:nth-of-type(3) { display: none }
  .isl[data-s="open"] { border-radius: 16px }
  .pane { grid-template-rows: 24px minmax(0, 1fr) } .ph { padding: 0 8px; font-size: 10.5px } .ph span { display: none }
  .tx { padding: 8px 9px; font-size: 9.5px; line-height: 1.55 } .tx .tbox { padding: 3px 7px }
}
/* phones get the same story as the desktop, rebuilt for one column */
.deck-dots { display: none }
@media (max-width: 620px) {
  /* features: the cards stack as you scroll; each one pins and the next slides over it, the one beneath settling back */
  .all { overflow: clip }
  .feat { gap: 16px }
  .feat .tile { position: sticky; top: calc(16px + var(--i) * 12px); transform-origin: 50% 0; background: #0C0C0C; box-shadow: inset 0 0 0 1px #262626, 0 -14px 34px -10px rgba(0,0,0,.95) }
  .feat .tile.lit { box-shadow: inset 0 0 0 1px rgba(255,107,44,.42), 0 -14px 34px -10px rgba(0,0,0,.95) }
  .more .stage { margin-top: 64px }
  .feat .vis { font-size: 10.5px }
}
@keyframes blink { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }

/* the Cozmo loops are scenery: where a phone refuses autoplay (Low Power Mode, reduced motion) the
   poster stays, and Safari's own play button and tap-to-fullscreen never appear over it */
.cozmo video, .peek video { pointer-events: none }
.cozmo video::-webkit-media-controls, .peek video::-webkit-media-controls,
.cozmo video::-webkit-media-controls-start-playback-button, .peek video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none }
.still { display: block; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }

/* without script nothing waits for an arrival: every screen shows its end state */
html:not(.js) .rv, html:not(.js) .lines > span, html:not(.js) .more .peek, html:not(.js) .hosts .hr, html:not(.js) .hosts .ln { opacity: 1 !important; transform: none !important }
html:not(.js) .hosts .node, html:not(.js) .hosts .hub-card { opacity: 1 !important; transform: translate(-50%, -50%) !important }
html:not(.js) .intro .ix { grid-template-columns: 1fr }
html:not(.js) .live-rank, .live-rank.still { height: auto } html:not(.js) .live-rank .r, .live-rank.still .r { position: static }
html:not(.js) .live-type .out, html:not(.js) .cmd .res { opacity: 1 }
@media (max-width: 620px) { html:not(.js) .hosts .node, html:not(.js) .hosts .hub-card { transform: none !important } }

/* the last screen is a spacewalk: one more chance at the email, and Cozmo drifting on his back across
   open space with a laptop; signing up stretches the stars and turns him one slow somersault */
.end { position: relative; min-height: 100svh; scroll-snap-align: start; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; isolation: isolate; background: #000 }
.end-main { position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) }
.end-in { position: relative; z-index: 3; display: grid; justify-items: center; gap: clamp(12px, 2vh, 18px); padding: clamp(36px, 9vh, 96px) clamp(16px, 4vw, 48px) 0; text-align: center }
.end .intro { justify-self: center }
.end h2 { font-size: clamp(36px, 4.6vw, 68px) }
.end .sub { max-width: 26em; color: #C2C2BE; font-size: clamp(16px, 1.3vw, 18px) }
.end form { margin-top: 6px; position: relative; background: #151515; box-shadow: inset 0 0 0 1px #3C3C3C, 0 20px 50px -20px rgba(0,0,0,.9) }
.end form:focus-within { box-shadow: inset 0 0 0 1px #5A5A5A, 0 0 0 4px rgba(255,107,44,.16) }
.end form.bad { box-shadow: inset 0 0 0 1px #F0454B }
.end form input::placeholder { color: #7E7E7A }
.end .said { min-height: 1.5em; text-align: center; color: #8E8E8A } .end .said.ok { color: #3EE8A0 } .end .said.err { color: #F0454B }
.space { position: relative; min-height: clamp(260px, 41vh, 440px) }
.stars { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block }
.flyer { position: absolute; z-index: 2; left: 0; top: 12%; width: clamp(240px, 27vw, 390px); animation: cross 54s linear -20s infinite; will-change: transform }
.boost { transform-origin: 45% 50% }
.bob { position: relative; animation: bob 7s ease-in-out infinite alternate }
.bob img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 34px rgba(0,0,0,.7)) }
@keyframes cross { from { transform: translateX(-110%) } to { transform: translateX(calc(100vw + 10%)) } }
@keyframes bob { 0% { transform: translateY(-14px) rotate(-7deg) } 50% { transform: translateY(6px) rotate(2deg) } 100% { transform: translateY(16px) rotate(6deg) } }
@keyframes flip { to { transform: rotate(-360deg) } }
.end.away .boost { animation: flip 2.2s cubic-bezier(.45,0,.3,1) }
/* the bar keeps only the mark, the copyright and the address, which copies on click */
.endbar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px 22px; padding: 16px clamp(16px, 4vw, 48px); border-top: 1px solid #161616; font-size: 13px }
.endbar .who { display: inline-flex; align-items: center; gap: 10px; color: #8E8E8A; white-space: nowrap }
.endbar .who img { width: 18px; height: 18px; opacity: .85 }
.endbar .mail { font: 13px/1 var(--mono); color: #D8D8D4; text-decoration: none; padding: 8px 10px; margin: -8px -10px; border-radius: 8px; white-space: nowrap; transition: color .2s, background .2s }
.endbar .mail:hover { color: #fff; background: rgba(255,255,255,.06) } .endbar .mail.ok { color: #3EE8A0 }
@media (max-width: 900px) { .space { min-height: 300px } }
@media (max-height: 800px) and (min-width: 901px) { .end-in { padding-top: 24px; gap: 10px } .space { min-height: 250px } .flyer { top: 7%; width: 260px } }
@media (max-width: 620px) { .space { min-height: 300px } .flyer { top: 22%; width: 210px; animation-duration: 32s; animation-delay: -12s } .endbar .mail { font-size: 12px } }
@media (prefers-reduced-motion: reduce) { .flyer { left: 50%; transform: translateX(-50%) } }

/* 404: one centred line on the same black, the island pill naming the error */
.lost { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px clamp(16px, 4vw, 48px); text-align: center }
.lost .intro { justify-self: center; gap: 9px; padding: 0 12px 0 8px }
.lost .intro b { margin-left: 0 }
.lost .home { margin-top: 6px; display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none }
.lost .home:hover { filter: brightness(1.07) }