/* Hero: a dark room lit only by the cat's eyes. The headline lights with them; ⌥ Space shows
   moglight's launcher under them, at once, and the cat rises to peek over its edge. Positions
   (eye line, eye span, where the copy and the panel sit) are measured by js/sections/hero.js. */

#top.hero {
  --eye-y: 380px;
  --eye-w: 360px;
  --copy-top: 520px;
  --peek: 0px;
  --shine: 1;
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 1100px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #040507 0%, #050608 58%, var(--night) 100%);
}

/* ───────── the room: one 0 × 0 box at the point between the eyes; everything hangs off it */

#top .hero-room {
  position: absolute;
  left: 50%;
  top: var(--eye-y);
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.6s var(--ease-out);
}
#top.is-open .hero-room { transform: translate3d(0, var(--peek), 0); transition-duration: 0.42s; }
/* Open, the cat rises until its ears may pass under the nav: the room fades into the night there,
   so they dissolve before the nav's row instead of being cut off by the window's edge. --fade
   (set by the layout) ends just above the eyes. */
#top.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: var(--fade, 104px);
  background: linear-gradient(#040507 18px, rgba(4, 5, 7, 0.82) 38%, rgba(4, 5, 7, 0.45) 62%, rgba(4, 5, 7, 0.15) 84%, rgba(4, 5, 7, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
#top.hero.is-open::before { opacity: 1; transition-duration: 0.42s; }
#top .hero-room > * { position: absolute; }
/* No size until hero.js paints them (a blank canvas's own 300 × 150 would jump when it does). */
#top .hero-room canvas { display: block; max-width: none; width: 0; height: 0; }

/* The cat is black on black: a cool light behind its head is what shows its outline. */
#top .hero-back {
  left: calc(var(--eye-w) * -1.25);
  top: calc(var(--eye-w) * -1.42);
  width: calc(var(--eye-w) * 2.5);
  height: calc(var(--eye-w) * 1.95);
  background: radial-gradient(closest-side, rgba(24, 66, 150, 0.36), rgba(14, 38, 96, 0.16) 52%, rgba(8, 20, 52, 0.05) 78%, transparent);
}
/* The eyes' light on the room around them, as bright as the eyes are open. */
#top .hero-bloom {
  left: calc(var(--eye-w) * -1.75);
  top: calc(var(--eye-w) * -1.05);
  width: calc(var(--eye-w) * 3.5);
  height: calc(var(--eye-w) * 2.3);
  background: radial-gradient(closest-side, rgba(56, 196, 255, 0.12), rgba(28, 136, 255, 0.05) 40%, rgba(0, 90, 255, 0.016) 70%, transparent);
  will-change: opacity;
}
#top .hero-spill { will-change: opacity; }
/* Where you pet it. */
#top .hero-pet { pointer-events: auto; cursor: pointer; border-radius: 45% 45% 40% 40%; -webkit-tap-highlight-color: transparent; }

/* ───────── the copy */

#top .hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--copy-top);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gutter);
  text-align: center;
}
#top.is-open .hero-copy { visibility: hidden; }
/* The demo's panel only covers the copy: screen readers keep the headline and Download (the panel
   is aria-hidden then), and a click there still lands on the hero and ends the demo. */
#top.is-open.is-demo .hero-copy { visibility: visible; opacity: 0; pointer-events: none; }

#top .hero-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.2vw, 94px);
  line-height: 1.03;
  letter-spacing: -0.042em;
  white-space: nowrap;
}
#top .hero-title > span { display: block; }
/* Unlit, the letters are barely there; the lit copy on top follows the eyes. */
#top .hero-t-base { color: rgba(214, 226, 240, 0.085); }
#top .hero-t-base .hero-t-em { color: rgba(97, 233, 251, 0.1); }
#top .hero-t-lit { position: absolute; inset: 0; color: #f4f7fb; will-change: opacity; }
#top .hero-lede { margin-top: clamp(16px, 1.8vw, 24px); max-width: 40em; text-wrap: balance; will-change: opacity; }
/* Wide enough, what it is takes the first line and the promise the second. */
@media (min-width: 720px) { #top .hero-lede-a { display: block; } }
/* Until the script takes over, the copy starts where the intro does, unlit; if the script never
   runs, it lights on its own. Still pages show it lit. */
.js #top .hero-t-lit { opacity: 0; animation: hero-light 0.9s ease-out 2.5s forwards; }
.js #top .hero-lede { opacity: 0.4; animation: hero-light 0.9s ease-out 2.5s forwards; }
@keyframes hero-light { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js #top .hero-t-lit, .js #top .hero-lede { opacity: 1; animation: none; } }
.motion-off #top .hero-t-lit, .motion-off #top .hero-lede { opacity: 1; animation: none; }

#top .hero-cta { display: flex; align-items: center; justify-content: center; gap: 14px 24px; margin-top: clamp(26px, 3vw, 38px); }
/* the glyph fills only the middle 59% of its image: at 19 px it stands as tall as the label's capitals */
#top .hero-cta .btn img { width: 19px; height: 19px; margin: -3px -2px 0 -3px; filter: invert(1); opacity: 0.9; }
#top .hero-fine { margin-top: 20px; color: var(--text-2); }

/* ───────── the keycaps you can press (or tap): graphite, lit from under when pressed */

#top .hero-try {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 6px 8px;
  border-radius: 14px;
  color: var(--text-2);
  font-size: 14.5px;
  -webkit-tap-highlight-color: transparent;
}
#top .hero-try-label { margin-right: 6px; }
#top .on-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  #top .on-keys { display: none; }
  #top .on-touch { display: inline; }
}
#top .hero-cap {
  position: relative;
  display: block;
  height: 40px;
  border-radius: 8px;
  background: radial-gradient(130% 140% at 50% 0%, #2b2e34 0%, #1c1d22 55%, #141519 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1.5px 3px rgba(0, 0, 0, 0.5),
    0 3px 0 #0a0b0e,
    0 4px 0 #050608,
    0 8px 16px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.035);
  color: rgba(232, 238, 246, 0.84);
  font-family: var(--font-text);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, color 0.25s, text-shadow 0.25s;
}
#top .hero-cap::after { /* the backlight leaking out from under the key */
  content: "";
  position: absolute;
  inset: -7px -7px -11px;
  z-index: -1;
  border-radius: 15px;
  background: radial-gradient(closest-side, rgba(97, 233, 251, 0.6), rgba(0, 150, 255, 0.16) 62%, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
#top .hero-cap-opt { width: 52px; }
#top .hero-cap-space { width: 112px; }
#top .hero-cap .g { position: absolute; right: 8px; top: 4px; font-size: 13px; line-height: 1.2; }
#top .hero-cap .w { position: absolute; right: 8px; bottom: 5px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; opacity: 0.72; }
#top .hero-cap-space .w { left: 0; right: 0; text-align: center; }
#top .hero-cap.is-down { color: #effeff; text-shadow: 0 0 10px rgba(97, 233, 251, 0.75); }
#top .hero-cap.is-down::after { opacity: 0.75; transition-duration: 0.08s; }
#top .hero-cap.is-down {
  transform: translateY(2.5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 2px rgba(0, 0, 0, 0.5),
    0 0.5px 0 #0a0b0e,
    0 1.5px 0 #050608,
    0 4px 8px rgba(0, 0, 0, 0.6);
}
#top .hero-try:focus-visible { outline-offset: 2px; }

/* ───────── moglight, under the eyes */

#top .hero-demo { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#top .hero-demo[hidden] { display: none; }
#top .hero-panels { position: absolute; pointer-events: auto; }
/* While the demo plays, a click goes past it: it ends the demo instead of landing on a row. */
#top.is-demo .hero-panels, #top.is-demo .hero-hint { pointer-events: none; }
/* …except the buttons under it on touch: a tap on one takes the demo over and does what it says. */
#top.is-demo .hero-hint button { pointer-events: auto; }
#top .hero-panels::before { /* the eyes' blue light pooling behind the panel */
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  top: -30%;
  bottom: -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 110, 255, 0.11), rgba(0, 60, 255, 0.035) 60%, transparent);
  pointer-events: none;
}
#top .hero-panels > .mog-panel,
#top .hero-feature > .mog-panel { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
#top .hero-panels > .mog-panel[hidden] { display: none; }
/* A feature module's screen (js/demo/<id>.js): its own element over the panel, drawn by MogUI or by itself. */
#top .hero-feature { position: absolute; inset: 0; }
#top .hero-panels > .mog-panel::after,
#top .hero-feature > .mog-panel::after { /* the eyes' light catching the panel's top edge */
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 0;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(150, 240, 255, 0.5), transparent);
  opacity: var(--shine);
  pointer-events: none;
}
#top .hero-panels .mog-row { cursor: default; }
/* The footer's cat eyes keep their soft glow (ui.css's ellipsis rule for the footer's label would clip it to a box). */
#top .mog-footer-left .mog-eyes { overflow: visible; }
#top .hero-panels .mog-back { cursor: pointer; }
#top .hero-gen { display: block; width: calc(200 * var(--u)); height: calc(200 * var(--u)); border-radius: calc(8 * var(--u)); image-rendering: pixelated; }
#top .hero-gen-note { max-width: calc(320 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u)); color: var(--mog-tertiary); }
/* Phones: the same panel, laid out natively narrow (rows lose their right-hand extras, like the app's compact window). */
#top .hero-panels.is-compact .mog-accessory,
#top .hero-panels.is-compact .mog-hotkey,
#top .hero-panels.is-compact .mog-tag:not(.is-default) { display: none; }
/* The compact chat's tools: New Chat stays in the footer (⌘N), and the round buttons sit as close
   as the app's (about 7.5 pt apart), so the row fits a 360 px phone with an answer running. */
#top .hero-panels.is-compact .mog-composer .mog-spacer + .mog-tool { display: none; }
#top .hero-panels.is-compact .mog-composer .mog-round + .mog-round { margin-left: calc(-9.5 * var(--u)); }
/* The narrowest phones: closer tools, and Attach (+) gives way. */
@media (max-width: 359px) {
  #top .hero-panels.is-compact .mog-composer .mog-tools { gap: calc(12 * var(--u)); }
  #top .hero-panels.is-compact .mog-composer .mog-tools > .mog-tool:first-child { display: none; }
  #top .hero-panels.is-compact .mog-composer .mog-round + .mog-round { margin-left: calc(-4.5 * var(--u)); }
}

/* A phone's on-screen keyboard is up while the visitor types in moglight: hero.js lifts the panel
   (.hero-demo) to sit just above it, and the cat and the line under the panel step aside. */
#top .hero-demo { transition: transform 0.18s var(--ease-out); }
#top.is-kb .hero-room, #top.is-kb .hero-hint { opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0s 0.15s; }
@media (prefers-reduced-motion: reduce) { #top .hero-demo { transition: none; } }

/* Root search's list and the agent chat's transcript scroll for real: a wheel, a trackpad or a
   finger (phones have no arrow keys), never the page behind them. The transcript keeps the newest
   message in view while it streams (hero.js), and a long one can be scrolled back to its start. */
#top .hero-panels .is-scroll > .mog-body,
#top .hero-panels .mog-transcript {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}
#top .hero-panels .is-scroll > .mog-body::-webkit-scrollbar,
#top .hero-panels .mog-transcript::-webkit-scrollbar { display: none; }
#top .hero-panels .is-scroll .mog-list { padding-bottom: calc(6 * var(--u)); }
#top .hero-panels .mog-transcript.is-bottom { justify-content: flex-start; }
#top .hero-panels .mog-transcript.is-bottom > :first-child { margin-top: auto; }

/* The footer's primary, Actions and Terminal, and the chat composer's chips, are buttons, as in the
   app (a finger-sized hit area on touch, the look unchanged). */
#top .hero-panels .mog-footer .mog-primary,
#top .hero-panels .mog-footer .mog-label,
#top .hero-panels .mog-footer .mog-glyph,
#top .hero-panels .mog-footer .mog-keys,
#top .hero-panels [data-tool] { position: relative; cursor: pointer; }
#top .hero-panels [data-tool]:hover { color: var(--mog-text); }
@media (pointer: coarse) {
  #top .hero-panels .mog-footer .mog-primary::before,
  #top .hero-panels [data-tool]::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  #top .hero-panels .mog-back::before, #top .hero-panels .mog-mic::before { content: ""; position: absolute; inset: -10px; }
  #top .hero-panels .mog-search .mog-mic::before { inset: -15px; } /* the 14 px microphone: 44 to hit */
  #top .hero-panels .mog-back, #top .hero-panels .mog-mic { position: relative; }
}

/* ⌘K: the selected thing's actions, a card over the panel's bottom right (the app's ActionPanelView). */
#top .hero-ap {
  position: absolute;
  z-index: 5;
  right: calc(10 * var(--u));
  bottom: calc(46 * var(--u));
  width: min(calc(360 * var(--u)), calc(100% - 20 * var(--u)));
  max-height: calc(100% - 64 * var(--u));
  display: flex;
  flex-direction: column;
  border-radius: calc(12 * var(--u));
  background: var(--mog-menu, rgb(41, 41, 43));
  box-shadow:
    inset 0 0 0 1px var(--mog-menu-edge, rgba(255, 255, 255, 0.12)),
    0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#top .hero-ap-list { flex: 1; min-height: 0; overflow: hidden; padding-top: calc(6 * var(--u)); }
#top .hero-ap .mog-row { cursor: pointer; }
#top .hero-ap .mog-icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: 0 calc(6 * var(--u)) 0 calc(3 * var(--u)); opacity: 0.8; }
#top .hero-ap-none { padding: calc(18 * var(--u)) 0; text-align: center; font-size: calc(13 * var(--u)); color: var(--mog-tertiary); }
#top .hero-ap-field { flex: none; height: calc(40 * var(--u)); display: flex; align-items: center; padding: 0 calc(14 * var(--u)); border-top: 1px solid var(--mog-separator); }
#top .hero-ap-q { font-size: calc(13.5 * var(--u)); color: var(--mog-strong); }
#top .hero-ap-q.is-empty { color: var(--mog-tertiary); }
#top .hero-ap-q .mog-caret { height: calc(16 * var(--u)); width: calc(1.6 * var(--u)); }

/* The chat composer's menus (model, reasoning, access): a dark macOS pop-up menu under the chip. */
#top .hero-menu {
  position: absolute;
  z-index: 7;
  display: flex;
  flex-direction: column;
  min-width: calc(180 * var(--u));
  padding: calc(5 * var(--u));
  border-radius: calc(11 * var(--u));
  background: var(--mog-popup, rgba(40, 40, 44, 0.96));
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.75),
    inset 0 0 0 0.5px var(--mog-popup-edge, rgba(255, 255, 255, 0.17)),
    0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.55);
  font-family: var(--mog-font);
  font-size: calc(13 * var(--u));
  line-height: 1;
  color: var(--mog-popup-text, rgba(255, 255, 255, 0.88));
}
#top .hero-mi {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(22 * var(--u));
  flex: none;
  padding: 0 calc(18 * var(--u)) 0 calc(22 * var(--u));
  border-radius: calc(6 * var(--u));
  font: inherit;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}
@media (pointer: coarse) { #top .hero-mi { min-height: 36px; } }
#top .hero-mi.is-hl { background: rgb(10, 110, 235); color: #fff; }
#top .hero-mi:focus-visible { outline: none; }
#top .hero-check { position: absolute; left: calc(6 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
#top .hero-mi[aria-checked="true"] .hero-check { opacity: 1; }
#top .hero-menu-sep { height: 1px; margin: calc(5 * var(--u)) calc(10 * var(--u)); background: var(--mog-separator); flex: none; }

/* The real text field: invisible, laid over the bar, so the panel itself draws what you type. */
#top .hero-field {
  position: absolute;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  opacity: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: text;
}

/* The line under the panel: quiet plain text (keycaps live only in the hero's invitation and the
   keyboard section). The demo brightens the words for the key it presses. */
#top .hero-hint {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  padding: 0 16px;
  font-size: 12.5px;
  color: var(--text-3); /* quiet, and still readable: the only instructions on screen */
  pointer-events: auto;
}
#top .hero-hint > span { white-space: nowrap; transition: color 0.25s; }
#top .hero-hint .sep { color: rgba(206, 216, 230, 0.22); }
#top .hero-hint .is-lit { color: rgba(236, 246, 255, 0.92); transition-duration: 0.05s; }
#top .hero-hint .ms { color: rgba(97, 233, 251, 0.58); }
#top .hero-hint .simple-only, #top .hero-hint .simple-only + .sep { display: none; } /* css/demo/settings.css shows it */
#top .hero-hint a.hero-get { color: rgba(97, 233, 251, 0.85); text-decoration: underline; text-decoration-color: rgba(97, 233, 251, 0.35); text-underline-offset: 3px; }
#top .hero-hint a.hero-get:hover { color: #b8ffff; }
#top .hero-hint button,
#top .hero-hint a.hero-get:first-child:not(:only-child) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
#top .hero-hint button:active { background: rgba(255, 255, 255, 0.12); }
/* Narrower phones keep the buttons on one row. */
@media (max-width: 389px) {
  #top .hero-hint { gap: 8px 6px; padding: 0 12px; }
  #top .hero-hint button { gap: 6px; padding: 0 12px; }
}

/* Windows a feature opens outside the panel (Settings), over the whole hero: above the copy (it
   comes later at the same level), under moglight's panel, which floats over windows as on the Mac. */
#top .hero-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#top .hero-layer > * { pointer-events: auto; }

/* ───────── phones */

@media (max-width: 719px) {
  #top .hero-title { white-space: normal; font-size: clamp(40px, 11.4vw, 54px); line-height: 1.04; }
  #top .hero-t-em { display: block; }
  #top .hero-lede { max-width: 21em; font-size: 17px; }
  #top .hero-cta { flex-direction: column; gap: 16px; margin-top: 26px; }
  #top .hero-cta .btn { min-width: 220px; }
  #top .hero-cap .w { font-size: 10.5px; } /* a phone's smallest legible size */
  #top .hero-fine { margin-top: 14px; }
}

/* Short windows (a phone on its side, a small laptop window): the hero is the window's height, the
   headline scales with the height too and stays on one line, and hero.js shrinks the cat, so the
   headline and its buttons are in view without scrolling. */
@media (max-height: 560px) and (orientation: landscape) {
  #top.hero { min-height: 0; }
  #top .hero-title { font-size: clamp(28px, min(6.2vw, 12vh), 94px); white-space: nowrap; }
  #top .hero-t-em { display: inline; }
  #top .hero-lede { max-width: 40em; margin-top: 10px; font-size: 16px; }
  #top .hero-cta { flex-direction: row; gap: 14px 24px; margin-top: 18px; }
  #top .hero-cta .btn { min-width: 0; }
  #top .hero-fine { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #top .hero-room, #top.hero::before, #top .hero-cap, #top .hero-cap::after { transition: none; }
}

/* Large displays: the hero fills the screen as it fills a laptop's, with a bigger headline (and a
   bigger cat: hero.js's BIG uses the same query). */
@media (min-width: 1900px) and (min-height: 1120px) {
  #top.hero { max-height: 1320px; }
  #top .hero-title { font-size: clamp(44px, 6.2vw, 124px); }
}

/* Portrait tablets: the headline breaks like the phone's, two big lines under the cat. */
@media (min-width: 720px) and (orientation: portrait) {
  #top .hero-title { font-size: min(10.5vw, 94px); white-space: normal; }
  #top .hero-t-em { display: block; }
}
/* The compact panel's search text, so the whole placeholder fits a 358 px panel; narrower phones
   scale it with the room left beside the microphone (--fit, set by the layout). */
#top .hero-panels.is-compact .mog-query { font-size: calc(17.6 * var(--u) * var(--fit, 1)); }
/* …and a faint wash of it inside the glass, behind the search bar. */
#top .hero-panels > .mog-panel::before,
#top .hero-feature > .mog-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(110 * var(--u));
  background: radial-gradient(46% 100% at 50% 0%, rgba(97, 233, 251, 0.06), rgba(0, 117, 255, 0.02) 60%, transparent);
  opacity: var(--shine);
  pointer-events: none;
}

/* ───────── the X card (card.html, html.hero-card): the hero alone in a tweet's 640 × 480 frame.
   No nav and no scrolling; hero.js sets --cz (the frame against 640 × 480) and, in a phone-tall
   frame, keeps the controls in its top 70%. A wide frame gets the one-line headline; a phone's
   tall one keeps the phone's layout. */
.hero-card, .hero-card body { height: 100%; overflow: hidden; }
.hero-card body { min-height: 0; background: #040507; }
.hero-card #top.hero { height: 100vh; min-height: 0; max-height: none; }
/* open, the ears fade out at the frame's edge */
.hero-card #top.hero::before { background: linear-gradient(#040507, rgba(4, 5, 7, 0)); }
.hero-card .hero-card-brand {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  font: 600 14px/1 var(--font-display);
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.hero-card .hero-card-brand:hover { color: var(--text); }
.hero-card .hero-card-brand img { width: 18px; height: 18px; }
/* The panel open over the brand's row (a small card): the brand gives way at once, and comes back softly. */
.hero-card-brand { transition: color 0.2s, opacity 0.3s, visibility 0.3s; }
.hero-brand-off .hero-card-brand { opacity: 0; visibility: hidden; transition: none; }
/* The card's demo loops: its pause button, in the corner across from the brand (hero.js keeps the panel clear of it). */
.hero-card .motion-toggle { position: absolute; right: 10px; top: 7px; z-index: 5; width: 30px; height: 30px; background: rgba(4, 5, 7, 0.5); }
.hero-card .motion-toggle[aria-pressed="true"] { background: rgba(40, 42, 48, 0.8); }
@media (orientation: landscape) {
  .hero-card #top .hero-title { font-size: calc(40px * var(--cz, 1)); white-space: nowrap; }
  .hero-card #top .hero-t-em { display: inline; }
  .hero-card #top .hero-lede { max-width: none; margin-top: calc(10px * var(--cz, 1)); font-size: calc(15px * var(--cz, 1)); }
  .hero-card #top .hero-lede-a { display: block; }
  .hero-card #top .hero-cta { flex-direction: row; gap: 18px; margin-top: 16px; zoom: var(--cz, 1); }
  .hero-card #top .hero-cta .btn { --h: 44px; min-width: 0; padding: 0 20px; font-size: 15px; }
  .hero-card #top .hero-fine { margin-top: calc(12px * var(--cz, 1)); font-size: calc(12px * var(--cz, 1)); }
  .hero-card #top .hero-hint { gap: 8px; }
  .hero-card #top .hero-hint button,
  .hero-card #top .hero-hint a.hero-get:first-child:not(:only-child) { height: calc(40px * var(--cz, 1)); padding: 0 calc(14px * var(--cz, 1)); font-size: calc(13.5px * var(--cz, 1)); }
}
/* A small card on a touch screen: the buttons stay finger-sized (44 px) and their text legible,
   wrapping to two rows rather than shrinking with the frame. */
@media (orientation: landscape) and (pointer: coarse) {
  .hero-card #top .hero-cta { zoom: max(var(--cz, 1), 0.86); flex-wrap: wrap; gap: 8px 18px; }
  .hero-card #top .hero-cta .btn { --h: 52px; }
  .hero-card #top .hero-hint button,
  .hero-card #top .hero-hint a.hero-get:first-child:not(:only-child) { height: 44px; padding: 0 14px; font-size: max(12.5px, calc(13.5px * var(--cz, 1))); }
}

/* The chat's answers keep their lines, as the app's transcript does: ``` blocks are code in the mono
   font that scrolls sideways inside the answer. */
#top .mog-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
#top .mog-msg-text .hero-code {
  margin: calc(6 * var(--u)) 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--mog-fill, rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 0 0 0.5px var(--mog-edge, rgba(255, 255, 255, 0.08));
  font: calc(12.5 * var(--u)) / calc(18 * var(--u)) var(--mog-mono);
  font-variant-ligatures: none;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
#top .mog-msg-text .hero-code code { background: none; padding: 0; font-size: inherit; border-radius: 0; }
#top .hero-demo:focus { outline: none; } /* on touch it holds the focus while moglight is open (the field would bring up the keyboard) */
/* The pretend terminal's wrapped rows hang under their text, so its two-space-indented notes (and an
   agent's answer under its • or ⏺) reflow at any width. */
#top .mog-screen .mog-line { padding-left: 2ch; text-indent: -2ch; }
/* On phones the panel's scale would take section headers under 10.5 px: they stop there. */
@media (max-width: 560px) {
  #top .mog-section { font-size: max(10.5px, calc(11.5 * var(--u))); }
}