/* AI Phone website (docs/FRONTENDS.md, section 4). Warm black, minimal, Space Grotesk (draft
   120): the phone in the middle, what the AI is doing step by step on the left, the chat on the
   right. One accent, used sparingly: Clawd's orange from the wordmark (draft 154) marks what is
   happening right now. No blur, no backdrop-filter; the only endless animations are the live
   dots and the spinners.

   The page is fluid: the phone is as tall as the window allows, and every other size is
   calc(N * var(--u)), N px at a 1440x900 window, growing and shrinking with it. */

@font-face {
  font-family: "Space Grotesk";
  /* site/fonts/ (SIL Open Font License, OFL-SpaceGrotesk.txt): served with the site itself */
  src: url("fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* draft 120: warm black and warm grays; the accent is Clawd's orange (the wordmark) */
  --bg: #0d0c0b;
  --panel: #141210;
  --text: #f3eee7;
  --text-2: #d2cac0;
  --muted: #a59d93;
  --faint: #877f76;
  --dim: #6a635b;
  --line: #1f1c19;
  --line-2: #2a2622;
  --line-3: #3d3832;
  --accent: #d77757;
  --accent-tint: rgba(215, 119, 87, 0.12);
  --live: #ff5c5c;
  --warn: #ffb4a8;
  --claude: rgba(243, 238, 231, 0.06);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Activity's and the chat's boxes (draft 163): inner padding, corners */
  --box-pad: calc(24 * var(--u));
  --box-r: calc(20 * var(--u));

  /* layout */
  --vh: 100vh;
  --u: max(0.9px, min(calc(var(--vh) / 900), calc(100vw / 1440)));
  /* the phone's screen, width / height (720x1600); site.js follows the video if it differs */
  --ar: 0.45;
  --gutter: calc(32 * var(--u));
  /* the gutter, or more beside a landscape phone's notch (viewport-fit=cover) */
  --inset-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --inset-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  /* never shorter than what's in it (44 px links, its padding, the hairline): the stage below
     is sized from it, so the page is exactly one window tall and doesn't scroll */
  --top-h: max(52px, calc(60 * var(--u)), calc(45px + 16 * var(--u)));
  --pad-y: calc(8 * var(--u));
  --gap: calc(48 * var(--u));
  --bezel: calc(10 * var(--u));
  /* the stage's bottom padding, on the first screen too */
  --stage-pb: calc(12 * var(--u));
  --side-min: calc(300 * var(--u));
  /* the two sides grow with the window, so the page uses its width; only very wide windows
     (ultrawide) leave a margin */
  --side-max: calc(760 * var(--u));
  --fit-h: max(
    440px,
    calc(
      var(--vh) - var(--top-h) - var(--pad-y) - var(--stage-pb) - 2 * var(--bezel)
    )
  );
  --screen-w: min(
    calc(var(--fit-h) * var(--ar)),
    calc(100vw - 2 * var(--gutter) - 2 * var(--gap) - 2 * var(--side-min) - 2 * var(--bezel))
  );
  --screen-h: calc(var(--screen-w) / var(--ar));
  /* the screen's corners are tight, because the stream's own status bar runs close to its edges:
     at 0.115 the clock's first digit and the battery were cut off (measured on the phone's 720 px
     screen: 0.09 is the most that keeps "1:04" whole, and a 5 or a 7, with its bar at the top
     left, needs 0.07). The body's corners follow them, one bezel out, so the bezel is as wide
     around the corners as along the sides (a rounder body made it thin there) */
  --screen-r: calc(var(--screen-w) * 0.068);
  --body-r: calc(var(--screen-r) + var(--bezel));
  --frame-w: calc(var(--screen-w) + 2 * var(--bezel));
  --stage-h: calc(var(--screen-h) + 2 * var(--bezel));
}

@supports (height: 100dvh) {
  :root {
    --vh: 100dvh;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* an always-visible scrollbar (Windows, or a Mac set to show them) takes its width from the
     right edge only; the same width on the left (site.js measures it; overlay scrollbars take
     none) keeps the phone in the window's middle */
  padding-left: var(--scrollbar, 0px);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: calc(16 * var(--u));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

a {
  color: var(--text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgba(243, 238, 231, 0.25);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.eyebrow {
  font-size: max(12px, calc(13 * var(--u)));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* "Thinking..." and the like: three dots that come and go one after another */
.dots i {
  font-style: normal;
  animation: blink 1.4s infinite;
}

.dots i:nth-child(2) {
  animation-delay: 0.2s;
}

.dots i:nth-child(3) {
  animation-delay: 0.4s;
}

/* ---- the top bar ---------------------------------------------------------------------------- */

/* the name on the left, Docs and X on the right */
.top {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u)) calc(24 * var(--u));
  min-height: var(--top-h);
  /* a hairline under it, from the window's left edge (past html's scrollbar padding); the
     padding makes up for it, so the name stays in line with the column under it */
  margin-left: calc(-1 * var(--scrollbar, 0px));
  padding: calc(8 * var(--u)) var(--inset-r) calc(8 * var(--u))
    calc(var(--inset-l) + var(--scrollbar, 0px));
  border-bottom: 1px solid var(--line);
}

/* the wordmark (draft 154): Clawd holding the phone, as tall as the name's font size */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  font-size: max(17px, calc(20 * var(--u)));
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
}

.brand svg {
  flex: none;
  width: 2.2em;
  height: 1em;
}

/* Docs and claudeonfon on X, quiet until pointed at */
.links {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  margin-left: auto;
}

.links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 500;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s;
}

.links a:hover {
  color: var(--text);
}

.link-x {
  min-width: 44px;
  margin-right: -13px; /* the logo, not its touch area, in line with the column's edge */
}

.link-x svg {
  width: max(15px, calc(17 * var(--u)));
  height: max(15px, calc(17 * var(--u)));
  fill: currentColor;
}

/* ---- the stage: right now | phone | chat ------------------------------------------------ */

.stage {
  position: relative;
  display: grid;
  /* the two sides are always the same width, so the phone stays in the middle */
  grid-template-columns: minmax(0, var(--side-max)) var(--frame-w) minmax(0, var(--side-max));
  grid-template-rows: var(--stage-h);
  grid-template-areas: "left player right";
  justify-content: center;
  gap: var(--gap);
  padding: var(--pad-y) var(--inset-r) var(--stage-pb) var(--inset-l);
}

.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.col-left {
  grid-area: left;
}

.col-right {
  grid-area: right;
}

.player-col {
  grid-area: player;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- the phone --------------------------------------------------------------------------- */

.phone {
  position: relative;
  padding: var(--bezel);
  border-radius: var(--body-r);
  background: #000;
  box-shadow:
    0 0 0 1px var(--line-2),
    0 0 calc(140 * var(--u)) rgba(215, 119, 87, 0.1);
}

.screen {
  /* the camera: centered, 4.6% of the screen's width across (33 px of the phone's 720), its
     middle 1.5% of the screen's height below the top edge (y = 24 of 1600), on the status
     bar's middle line (its clock and icons span y = 11 to 36) */
  --hole-d: 4.6%;
  --hole-y: 1.5%;
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  border-radius: var(--screen-r);
  overflow: hidden;
  isolation: isolate;
  background: #080706;
}

/* a hairline of glass over the display's edge, so no layer's antialiased edge shows */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #000;
  pointer-events: none;
}

.screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #080706;
}

/* the HLS picture's last frame while WebRTC takes over (site.js, holdStill) */
.screen .still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.punch-hole {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: var(--hole-y);
  width: var(--hole-d);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 30%, rgba(150, 175, 230, 0.22) 0, rgba(150, 175, 230, 0) 22%),
    radial-gradient(circle at 50% 50%, #0d0e12 0, #050506 38%, #000 64%);
  box-shadow: 0 0 0 max(0.5px, calc(0.5 * var(--u))) rgba(0, 0, 0, 0.6);
}

.screen:fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}

.screen:fullscreen video,
.screen:fullscreen .still {
  object-fit: contain;
  background: #000;
}

.screen:-webkit-full-screen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}

.screen:-webkit-full-screen video,
.screen:-webkit-full-screen .still {
  object-fit: contain;
  background: #000;
}

.screen:fullscreen .punch-hole,
.screen:fullscreen::after {
  display: none;
}

.screen:-webkit-full-screen .punch-hole,
.screen:-webkit-full-screen::after {
  display: none;
}

/* loading / offline / break card over the video */
.screen-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12%;
  text-align: center;
  background: #12100e;
  transition: opacity 0.4s ease;
}

.screen-card[data-kind="live"] {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

.screen-icon {
  width: calc(var(--screen-w) * 0.2);
  height: calc(var(--screen-w) * 0.2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: calc(var(--screen-w) * 0.06);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.screen-icon:empty,
.screen-card[data-kind="loading"] .screen-icon {
  display: none;
}

.screen-icon svg {
  width: 42%;
  height: 42%;
}

.screen-card .spinner {
  display: none;
  margin-bottom: calc(var(--screen-w) * 0.06);
}

.screen-card[data-kind="loading"] .spinner,
.screen-card[data-kind="waiting"] .spinner {
  display: block;
}

.screen-title {
  font-size: max(17px, calc(var(--screen-w) * 0.07));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.screen-card[data-kind="loading"] .screen-title,
.screen-card[data-kind="waiting"] .screen-title {
  font-size: max(14px, calc(var(--screen-w) * 0.046));
  color: var(--muted);
}

.screen-text {
  margin-top: calc(var(--screen-w) * 0.028);
  font-size: max(13.5px, calc(var(--screen-w) * 0.045));
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;
}

.screen-text:empty {
  display: none;
}

/* a circular progress indicator */
.spinner {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  color: var(--text);
}

.screen-card .spinner {
  width: max(30px, calc(var(--screen-w) * 0.1));
  height: max(30px, calc(var(--screen-w) * 0.1));
}

.spinner svg {
  width: 100%;
  height: 100%;
  animation: spin 1.6s linear infinite;
}

.spinner circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1 126;
  stroke-dashoffset: 0;
  animation: dash 1.4s ease-in-out infinite;
}

.buffering {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  padding: calc(10 * var(--u));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
}

.tap-play {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  border: 0;
  cursor: pointer;
  font-size: calc(17 * var(--u));
  font-weight: 560;
  background: rgba(0, 0, 0, 0.55);
}

.tap-play-icon {
  width: max(56px, calc(var(--screen-w) * 0.2));
  height: max(56px, calc(var(--screen-w) * 0.2));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #000;
  background: var(--text);
  transition: transform 0.2s var(--ease);
}

.tap-play:hover .tap-play-icon {
  transform: scale(1.05);
}

.tap-play-icon svg {
  width: 44%;
  height: 44%;
  margin-left: 5%;
}

/* ---- the controls: on the picture, like a video player's (draft 53) ------------------------ */
/* They show while the pointer is over the picture, a few seconds after a finger tapped it
   (site.js, .show-controls), while one of them has the keyboard focus and while the picture is
   behind live (.is-behind). Until the first tap on the sound, "Tap for sound" waits in the corner. */

.controls {
  --ctl: max(36px, calc(var(--screen-w) * 0.11));
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--screen-w) * 0.012);
  padding: calc(var(--screen-w) * 0.16) calc(var(--screen-w) * 0.035) calc(var(--screen-w) * 0.045);
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .screen:hover .controls {
    opacity: 1;
    pointer-events: auto;
  }

  .screen:hover .sound-chip {
    opacity: 0;
    pointer-events: none;
  }
}

.controls:has(:focus-visible),
.screen.show-controls .controls,
.screen.is-behind .controls {
  opacity: 1;
  pointer-events: auto;
}

.screen.show-controls .sound-chip {
  opacity: 0;
  pointer-events: none;
}

/* nothing to control without a picture */
.stage:not([data-view="live"]) .controls,
.stage:not([data-view="live"]) .sound-chip {
  display: none;
}

.controls-gap {
  flex: 1 1 auto;
}

.sound {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--screen-w) * 0.008);
  flex: none;
  transition: opacity 0.2s;
}

.ctl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--ctl);
  min-width: var(--ctl);
  padding: 0;
  border: 0;
  border-radius: calc(var(--ctl) / 2);
  flex: none;
  cursor: pointer;
  font: inherit;
  font-size: max(13px, calc(var(--screen-w) * 0.04));
  font-weight: 560;
  color: #fff;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s;
}

.ctl-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.ctl-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.ctl-btn .ico {
  width: max(18px, calc(var(--screen-w) * 0.058));
  height: max(18px, calc(var(--screen-w) * 0.058));
}

.sound-btn .i-off,
.sound-btn .i-low,
.sound-btn .i-on {
  display: none;
}

.sound-btn[data-level="off"] .i-off,
.sound-btn[data-level="low"] .i-low,
.sound-btn[data-level="high"] .i-on {
  display: inline;
}

.sound.is-off {
  opacity: 0.5;
}

.sound.is-off .sound-btn {
  cursor: default;
}

.ctl-golive {
  padding: 0 calc(var(--screen-w) * 0.042) 0 calc(var(--screen-w) * 0.032);
  background: rgba(255, 255, 255, 0.16);
}

.ctl-golive:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* the track is drawn thin; the input itself is as tall as the buttons, for fingers */
.sound-range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--screen-w) * 0.3);
  height: var(--ctl);
  margin: 0 calc(var(--screen-w) * 0.015) 0 calc(var(--screen-w) * 0.008);
  padding: 0;
  flex: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.sound-range:disabled {
  cursor: default;
}

.sound-range:focus-visible {
  outline: none;
}

.sound-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, #fff var(--fill), rgba(255, 255, 255, 0.35) var(--fill));
}

.sound-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s var(--ease);
}

.sound-range::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.sound-range::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: #fff;
}

.sound-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s var(--ease);
}

.sound-range:not(:disabled):hover::-webkit-slider-thumb,
.sound-range:not(:disabled):active::-webkit-slider-thumb {
  transform: scale(1.15);
}

.sound-range:not(:disabled):hover::-moz-range-thumb,
.sound-range:not(:disabled):active::-moz-range-thumb {
  transform: scale(1.15);
}

.sound-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 0 0 4px #fff;
}

.sound-range:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 0 0 4px #fff;
}

/* short of room, site.js drops the slider (fitBar); narrow screens and devices whose volume a
   page can't set (iOS) keep only the toggle */
.controls.fit-norange .sound-range,
.sound.fixed-volume .sound-range {
  display: none;
}

@media (max-width: 419.98px) {
  .sound-range {
    display: none;
  }
}

.i-exit,
.is-fullscreen .i-enter {
  display: none;
}

.is-fullscreen .i-exit {
  display: inline;
}

/* "Tap for sound": until the first tap on the sound, in the picture's corner */
.sound-chip {
  position: absolute;
  z-index: 4;
  left: calc(var(--screen-w) * 0.04);
  bottom: calc(var(--screen-w) * 0.05);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: max(34px, calc(var(--screen-w) * 0.11));
  padding: 0 calc(var(--screen-w) * 0.046) 0 calc(var(--screen-w) * 0.036);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: max(13px, calc(var(--screen-w) * 0.041));
  font-weight: 560;
  color: #fff;
  background: rgba(18, 18, 22, 0.84);
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 0.2s ease,
    background-color 0.2s;
  animation: hint-in 0.6s var(--ease);
}

.sound-chip:hover {
  background: rgba(32, 32, 38, 0.9);
}

.sound-chip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.sound-chip .ico {
  width: max(16px, calc(var(--screen-w) * 0.052));
  height: max(16px, calc(var(--screen-w) * 0.052));
}

@keyframes hint-in {
  from {
    opacity: 0;
    transform: translateY(calc(4 * var(--u)));
  }
}

/* ---- left: its activity, a few words per step, newest first (draft 83) ------------------ */

/* a box like the chat's (draft 163): the heading in a strip whose line stops where the text
   does, short of the box's edges */
.now {
  gap: calc(22 * var(--u));
  padding: 0 var(--box-pad) calc(20 * var(--u));
  border: 1px solid var(--line-2);
  border-radius: var(--box-r);
  overflow: hidden;
}

.now-eyebrow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: 0;
  padding: calc(17 * var(--u)) 0 calc(16 * var(--u));
  border-bottom: 1px solid var(--line);
}

.stale {
  margin-left: auto;
  padding: 0 calc(9 * var(--u));
  border-radius: 999px;
  font-size: max(11.5px, calc(12 * var(--u)));
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.now-quiet {
  font-size: max(15px, calc(17 * var(--u)));
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* by activity, newest first (draft 216, below); a line with a dot on top while nothing is under
   way (paused, a break); earlier activities dimmer (site.js sets each row's opacity) */
.steps {
  /* shrinks with a short window; site.js (fitSteps) then leaves out the oldest steps */
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
}

.steps:empty {
  display: none;
}

.step {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  font-size: max(16px, calc(19 * var(--u)));
  line-height: 1.3;
  color: var(--text-2);
}

/* the dot's place in front of every step, so the words line up; wrapped lines hang under it */
.step-x {
  --dot: calc(7px + 10 * var(--u));
  min-width: 0;
  padding-left: var(--dot);
  text-indent: calc(-1 * var(--dot));
  overflow-wrap: anywhere;
}

.step-x::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: calc(10 * var(--u));
  border-radius: 50%;
  vertical-align: 0.15em;
}

.step.is-now {
  color: var(--text);
}

.step.is-now .step-x::before {
  background: var(--accent);
}

/* paused, a break, the phone away: a hollow dot */
.step.is-off .step-x::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--faint);
}

.step-t {
  flex: none;
  font-size: max(12px, calc(13 * var(--u)));
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.step.is-now .step-t {
  font-weight: 600;
  color: var(--accent);
}

.step.enter {
  animation: step-in 0.45s var(--ease) backwards;
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(calc(-6 * var(--u)));
  }
}

/* activities (draft 216): the one under way open, its arrow orange; earlier ones one line each,
   closed, their arrows gray. An open one shows its newest steps along a thin line (the step under
   way brighter) and, under way, Clawd, THINKING and its newest narration line */
.act {
  font-size: max(16px, calc(19 * var(--u)));
  line-height: 1.3;
  color: var(--text-2);
}

.act.is-now {
  color: var(--text);
}

.act.enter {
  animation: step-in 0.45s var(--ease) backwards;
}

.act-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.act-head:focus-visible {
  outline-offset: 4px;
  border-radius: 4px;
}

/* the arrow in the dot's place, so the words line up with the other rows */
.act-x {
  --dot: calc(7px + 10 * var(--u));
  min-width: 0;
  padding-left: var(--dot);
  text-indent: calc(-1 * var(--dot));
  overflow-wrap: anywhere;
}

.act-arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: calc(var(--dot) - 10px);
  vertical-align: 0.05em;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}

.act.is-open .act-arrow {
  transform: rotate(90deg);
}

.act.is-now .act-arrow {
  stroke: var(--accent);
}

@media (hover: hover) {
  .act:not(.is-now) .act-head:hover .act-arrow {
    stroke: var(--text-2);
  }
}

.act.is-now .act-head .step-t {
  font-weight: 600;
  color: var(--accent);
}

.act-body {
  margin: calc(12 * var(--u)) 0 0 calc(7px + 10 * var(--u));
}

.act-steps {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  margin: 0;
  padding: 2px 0 2px calc(14 * var(--u));
  border-left: 1px solid var(--line-2);
  list-style: none;
  font-size: max(14px, calc(15 * var(--u)));
  line-height: 1.3;
  color: var(--muted);
}

.act-step.is-now {
  color: var(--text);
}

.act-thought {
  margin-top: calc(12 * var(--u));
  font-size: max(13.5px, calc(14.5 * var(--u)));
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: pretty;
}

.act-clawd {
  width: calc(17 * var(--u));
  height: calc(10 * var(--u));
  margin-right: calc(8 * var(--u));
  vertical-align: -1px;
}

.act-thinking {
  margin-right: calc(8 * var(--u));
  font-size: max(11px, calc(11.5 * var(--u)));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- right: the chat (docs/CHAT.md) ------------------------------------------------------- */

/* a box (draft 163), as tall as the player on desktop; its list scrolls. The lines under the
   heading and over the field stop where the text does, short of the box's edges */
.chat {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--box-pad) calc(6 * var(--u));
  border: 1px solid var(--line-2);
  border-radius: var(--box-r);
  overflow: hidden;
}

.chat .for-dm,
.chat[data-tab="dm"] .for-group {
  display: none;
}

.chat[data-tab="dm"] .for-dm {
  display: inline;
}

/* under the tabs: the group chat's note or the DM tab's line, and the chat's state */
.chat-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  /* a little room under the note, before the messages fading out at the top of the list */
  padding: calc(14 * var(--u)) 0 calc(8 * var(--u));
}

.chat-head-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.chat-sub {
  min-height: 1.4em;
  font-size: max(12.5px, calc(13 * var(--u)));
  line-height: 1.4;
  color: var(--muted);
}

.chat-retry {
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  margin-left: auto;
  padding-top: 1px;
  font-size: max(12.5px, calc(13 * var(--u)));
  white-space: nowrap;
  color: var(--muted);
}

.chat-retry {
  color: var(--warn);
}

.chat-retry .ico {
  width: 15px;
  height: 15px;
}

.chat[data-state="offline"] .chat-retry .ico,
.chat[data-state="connecting"] .chat-retry .ico {
  animation: spin 1.6s linear infinite;
}

/* the messages */
.chat-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-note {
  flex: none;
  font-size: max(12.5px, calc(13 * var(--u)));
  line-height: 1.45;
  color: var(--faint);
}

.chat-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(10 * var(--u)) 0 calc(8 * var(--u));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  /* messages scrolled up fade out before they reach the line above */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 calc(30 * var(--u)));
  mask-image: linear-gradient(180deg, transparent, #000 calc(30 * var(--u)));
}

.chat-scroll:focus-visible {
  outline-offset: -2px;
  border-radius: calc(10 * var(--u));
}

/* few messages sit at the bottom, next to the composer, like any chat */
.chat-list {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.chat[data-state="offline"] .chat-list {
  opacity: 0.72;
}

/* draft 124: the Activity list's size and air, no panels; who and when in small capitals */
.msg {
  position: relative;
}

.msg + .msg {
  margin-top: calc(26 * var(--u));
}

/* the same sender again, soon after: close under, without its name */
.msg.is-cont {
  margin-top: calc(10 * var(--u));
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
  font-size: max(11.5px, calc(12 * var(--u)));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.msg.is-cont .msg-meta {
  display: none;
}

.msg-time {
  font-weight: 400;
  color: var(--dim);
}

/* a long press on a touch screen shows the name and time of a follow-up message */
.msg.show-time .msg-meta {
  display: flex;
}

/* everyone's words in off-white, like the step under way in Activity (draft 173) */
.msg-text {
  margin-top: calc(6 * var(--u));
  font-size: max(16px, calc(19 * var(--u)));
  line-height: 1.38;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: normal;
}

.msg.is-cont .msg-text {
  margin-top: 0;
}

/* Claude's messages look like everyone's; only its name and Clawd before it set them apart */
.msg-clawd {
  width: calc(17 * var(--u));
  height: calc(10 * var(--u));
  flex: none;
}

/* the viewer's own message: sending, or not sent (with the reason) */
.msg-state {
  display: none;
  align-items: center;
  gap: calc(5 * var(--u));
  margin-top: calc(2 * var(--u));
  font-size: max(12px, calc(12.5 * var(--u)));
  line-height: 1.4;
  color: var(--faint);
}

.msg-state .ico {
  width: 14px;
  height: 14px;
}

.msg.is-pending .msg-state,
.msg.is-failed .msg-state {
  display: flex;
}

.msg.is-pending .msg-text {
  opacity: 0.6;
}

.msg.is-failed .msg-text {
  color: var(--muted);
}

.msg.is-failed .msg-state {
  color: var(--warn);
}

/* nothing to show yet: connecting, offline, or no messages */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  padding: calc(16 * var(--u)) 8%;
  text-align: center;
}

.chat-empty-icon {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: calc(12 * var(--u));
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.chat-empty-icon:empty {
  display: none;
}

.chat-empty-icon .ico {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  stroke-width: 1.8;
}

.chat-empty-title {
  font-size: max(15px, calc(16 * var(--u)));
  font-weight: 560;
  line-height: 1.3;
  color: var(--text);
  text-wrap: balance;
}

.chat-empty-text {
  margin-top: calc(6 * var(--u));
  font-size: max(13px, calc(14 * var(--u)));
  line-height: 1.45;
  color: var(--muted);
  text-wrap: balance;
}

.chat-empty-text:empty {
  display: none;
}

.chat-empty[data-kind="loading"] .chat-empty-title {
  font-size: max(14px, calc(14.5 * var(--u)));
  font-weight: 450;
  color: var(--faint);
}

/* scrolled up: a round arrow straight back down to the newest message, in the colors of the
   send button while the field is empty; with something new below, it widens into a "New
   messages" pill in the same colors */
.chat-pill {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(10 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  font-size: max(13px, calc(14 * var(--u)));
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  background: var(--line-2);
  transform: translateX(-50%);
  animation: pill-in 0.3s var(--ease) both;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.chat-pill:hover {
  color: var(--text);
  background: var(--line-3);
}

.chat-pill.has-news {
  width: auto;
  padding: 0 calc(13 * var(--u)) 0 calc(16 * var(--u));
}

.chat-pill-text {
  display: none;
}

.chat-pill.has-news .chat-pill-text {
  display: inline;
}

/* a 44 px target */
.chat-pill::before {
  content: "";
  position: absolute;
  inset: -5px;
}

.chat-pill .ico {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

@keyframes pill-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

/* the composer: an underlined field and a round send button */
.composer {
  flex: none;
  /* the last thing in the box: as much room under the field as the tabs have over their words */
  padding: calc(12 * var(--u)) 0 calc(8 * var(--u));
  border-top: 1px solid var(--line);
}

.composer-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  padding: 0 calc(2 * var(--u)) calc(8 * var(--u));
  font-size: max(12.5px, calc(13.5 * var(--u)));
  line-height: 1.4;
}

/* Cloudflare's box, for the few viewers it isn't sure about: a row of its own in the section
   above the field, with the chat's other notices (site.js, "Turnstile") */
.chat-check {
  flex: 0 0 100%;
  min-width: 0;
}

.chat-notice {
  display: flex;
  align-items: flex-start;
  gap: calc(7 * var(--u));
  min-width: 0;
  color: var(--warn);
  animation: rise 0.3s var(--ease) both;
}

.chat-notice:empty {
  display: none;
}

.chat-notice .ico {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.chat-count {
  margin-left: auto;
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.chat-count:empty {
  display: none;
}

.chat-count.is-over {
  color: var(--warn);
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: calc(8 * var(--u));
}

.field {
  flex: 1;
  min-width: 0;
  display: flex;
  border-bottom: 1px solid var(--line-3);
  transition: border-color 0.2s;
}

.field:focus-within {
  border-bottom-color: var(--text);
}

.field textarea {
  flex: 1;
  min-width: 0;
  display: block;
  height: 44px;
  min-height: 44px;
  max-height: calc(4 * 1.4em + 22px);
  margin: 0;
  padding: calc((44px - 1.4em) / 2) 0;
  border: 0;
  border-radius: 0;
  resize: none;
  overflow-y: hidden;
  font: inherit;
  font-size: max(14px, calc(15 * var(--u)));
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  scrollbar-width: thin;
}

.field textarea:focus,
.field textarea:focus-visible {
  outline: none;
}

.field textarea::placeholder {
  color: var(--faint);
  opacity: 1;
}

.field textarea:disabled,
.field textarea[aria-disabled="true"] {
  cursor: not-allowed;
}

.field:has(textarea:disabled),
.field:has(textarea[aria-disabled="true"]) {
  opacity: 0.6;
}

.send {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #000;
  background: var(--text);
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.send:hover {
  background: #ffffff;
}

.send:focus-visible {
  outline-offset: 2px;
}

/* nothing typed yet: a quiet button */
.send.is-idle {
  color: var(--muted);
  background: var(--line-2);
}

.send.is-idle:hover {
  color: var(--text);
  background: var(--line-3);
}

.send:disabled {
  cursor: default;
  color: var(--faint);
  background: var(--line);
}

.send > * {
  grid-area: 1 / 1;
}

.send-arrow {
  width: 20px;
  height: 20px;
  stroke-width: 2.25;
}

.send-ring {
  display: none;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.send-ring circle {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 125.7;
  stroke-dashoffset: 0;
}

.send-wait {
  display: none;
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* 5 s after sending: the ring runs down and the seconds count down */
.send.is-cooling,
.send.is-cooling:hover {
  cursor: default;
  color: var(--text);
  background: transparent;
}

.send.is-cooling .send-arrow {
  display: none;
}

.send.is-cooling .send-wait,
.send.is-cooling .send-ring {
  display: block;
}

.send.is-cooling .send-ring circle {
  animation: cool var(--cool, 5000ms) linear both;
}

@keyframes cool {
  to {
    stroke-dashoffset: 125.7;
  }
}

/* Group chat | DM Claude: two tabs across the top of the box, the open one's bar on the line
   under them (draft 167; a tablist) */
.seg {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.seg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  min-height: 44px;
  margin-bottom: -1px;
  /* the line under the tabs level with the one under "Activity" in the box beside the phone */
  padding: calc(14 * var(--u)) 2px calc(14 * var(--u));
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: max(13.5px, calc(14 * var(--u)));
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--text);
}

.seg-btn:focus-visible {
  outline-offset: 2px;
}

.unread {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
}

.seg-btn.has-unread .unread {
  display: block;
  animation: pop 0.3s var(--ease) both;
}

@keyframes pop {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
}

/* ---- the docs page (docs.html): one column under the same top bar, scrolling as pages do ---- */

.links a[aria-current="page"] {
  color: var(--text);
}

.doc {
  max-width: calc(680 * var(--u) + var(--inset-l) + var(--inset-r));
  margin: 0 auto;
  padding: calc(56 * var(--u)) var(--inset-r) calc(96 * var(--u)) var(--inset-l);
}

.doc section {
  margin-top: calc(44 * var(--u));
  padding-top: calc(28 * var(--u));
  border-top: 1px solid var(--line);
}

/* the first section starts right under the top bar's hairline */
.doc h1 + section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* the section names like the boxes' headings on the stream page */
.doc h2 {
  margin: 0;
  font-size: max(12px, calc(13 * var(--u)));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.doc ul {
  display: grid;
  gap: calc(14 * var(--u));
  margin: calc(18 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.doc li {
  position: relative;
  padding-left: calc(7px + 10 * var(--u));
  font-size: max(15.5px, calc(17 * var(--u)));
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.doc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dim);
}

.doc strong {
  font-weight: 600;
  color: var(--text);
}

.doc a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.doc a:hover {
  text-decoration-color: var(--text);
}

/* ---- motion ------------------------------------------------------------------------------ */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


@keyframes breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1 126;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90 126;
    stroke-dashoffset: -20;
  }
  100% {
    stroke-dasharray: 90 126;
    stroke-dashoffset: -125;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .dots i {
    opacity: 1;
  }

  /* a still arc instead of a spinning one */
  .spinner circle {
    stroke-dasharray: 80 126;
  }

  /* the cooldown shows its seconds only */
  .send.is-cooling .send-ring {
    display: none;
  }
}

/* ---- tablet: phone on the left, the rest beside it (landscape tablets keep three columns) -- */

@media (max-width: 1099px) {
  :root {
    --u: clamp(0.9px, calc(100vw / 960), 1.15px);
    --gap: calc(28 * var(--u));
    --side-min: calc(330 * var(--u));
    --side-max: calc(520 * var(--u));
    --stage-pb: calc(28 * var(--u));
    /* as tall as the window allows, but always leaving --side-min for the column beside it */
    --screen-w: min(
      calc(var(--fit-h) * var(--ar)),
      calc(100vw - 2 * var(--gutter) - var(--gap) - var(--side-min) - 2 * var(--bezel))
    );
  }

  .stage {
    grid-template-columns: var(--frame-w) minmax(0, var(--side-max));
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "player left"
      "player right";
    align-items: start;
    align-content: start;
    row-gap: calc(24 * var(--u));
  }

  .player-col {
    position: sticky;
    /* a phone taller than the window (landscape phones) sticks by its bottom edge instead, so
       the bar under it stays reachable */
    top: min(var(--pad-y), calc(var(--vh) - var(--pad-y) - var(--stage-h)));
  }

  .chat {
    flex: none;
    height: max(380px, calc(0.6 * var(--vh)));
  }
}

/* touch tablets: 16 px keeps iOS from zooming into the field when it gets focus (phones get the
   same below) */
@media (hover: none) and (pointer: coarse) and (min-width: 760px) {
  .field textarea {
    font-size: max(16px, calc(15 * var(--u)));
  }
}

/* ---- phones: video first, then what it's doing, then the chat ---------------------------- */

@media (max-width: 759px) {
  :root {
    --box-pad: 16px;
    --u: clamp(0.9px, calc(100vw / 400), 1.1px);
    --gutter: 16px;
    --pad-y: 4px;
    --bezel: 7px;
    --gap: 16px;
    /* as tall as the screen allows, leaving a strip of what's below it */
    --peek: 36px;
    --screen-w: max(
      200px,
      min(
        calc(100vw - 2 * 16px - 2 * var(--bezel)),
        calc(
          (
              var(--vh) - var(--top-h) - var(--pad-y) - 2 * var(--bezel) - var(--gap) -
                var(--peek)
            ) *
            var(--ar)
        )
      )
    );
  }

  @supports (height: 100svh) {
    :root {
      --vh: 100svh;
    }
  }

  .top {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap);
    padding: var(--pad-y) var(--inset-r) 24px var(--inset-l);
  }

  .player-col {
    position: static;
    order: -1;
  }

  /* the activity under way and the three before it */
  .steps > li:nth-child(n + 5) {
    display: none;
  }

  .chat {
    height: max(380px, calc(0.62 * var(--vh)));
  }

  /* 16 px keeps iOS from zooming into the field */
  .field textarea {
    font-size: 16px;
  }
}

/* narrow: "Jump to live" as an icon; the label stays for screen readers */
@media (max-width: 360px) {
  .ctl-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ctl-golive {
    width: var(--ctl);
    padding: 0;
  }
}