/* Insomnia website. Colours come from the website kit: the sunrise gradient at the top of the page,
   the night-sky dither blues (#121a5e, #2a3db4, #7d93ff, #eef1ff) after it. app.js updates the
   --sky-* and --ink variables while the sky changes, so the bars follow the canvas. */

:root {
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Times New Roman", Times, serif;
  --ui: "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --sky-top: #de4b2c;
  --sky-bottom: #f59a3b;
  --ink: #fffaf3;
  --dim: #ffcd85;
  --accent: #fff0b3;
  --night: #0e1450;
  --deep: #121a5e;
  --glass: rgba(16, 22, 86, 0.58);
  --rim: rgba(238, 241, 255, 0.26);
  --text: #eef1ff;
  --muted: #a9b6ff;
  --yellow: #f4d33a;
  --blue: #2f8bff;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--night);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  color: var(--text);
  font: 400 15px/1.65 var(--mono);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

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

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

#sky {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
}

/* ---- Top and bottom bars, like a terminal's title and status lines ----------------------------- */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 38px;
  padding: 0 18px;
  font-size: 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--sky-top) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.bar p {
  margin: 0;
}

.bar a {
  text-decoration: none;
}

.bar-top {
  top: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 32%, transparent);
}

.bar-bottom {
  bottom: 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 32%, transparent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bar .eye {
  width: 20px;
  height: 20px;
  color: var(--ink);
}

.bar-right {
  display: flex;
  gap: 20px;
}

.path {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.bar-right a:hover,
.keyhints a:hover {
  text-decoration: underline;
}

.keyhints {
  display: flex;
  gap: 18px;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.keyhints b {
  color: var(--accent);
  font-weight: 600;
  margin-right: 4px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---- The first screen: the canvas draws the eye and wordmark, the stage holds it while it changes -- */

main {
  position: relative;
  z-index: 1;
}

.stage {
  position: relative;
  height: 250vh;
  height: 250lvh;
}

.stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--ink);
}

/* The kit's wordmark: Times New Roman, near-white, with a deep glow so it reads over the sky. */
.hero-art > * {
  filter: drop-shadow(0 var(--glow-y, 4px) var(--glow-blur, 18px) var(--glow, rgba(10, 16, 80, 0.55)));
}

#hero-word {
  font-family: var(--serif);
  font-weight: 400;
  fill: currentColor;
  text-anchor: middle;
}

.tagline {
  position: absolute;
  left: 50%;
  top: var(--tag-top, 72%);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 48px);
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-size: clamp(16px, 1.6vw, 23px);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 10px var(--glow, rgba(10, 16, 80, 0.55));
}

.cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 62px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-shadow: 0 1px 8px var(--glow, rgba(10, 16, 80, 0.55));
  opacity: var(--cue, 1);
}

.cue-arrow {
  animation: nudge 1.6s ease-in-out infinite;
}

@keyframes nudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cue-arrow {
    animation: none;
  }
}

/* ---- Content: frosted windows over the night sky ------------------------------------------------ */

.section {
  position: relative;
  padding: 14vh 24px;
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
}

.wrap.narrow {
  max-width: 780px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.split.flip > .copy {
  order: 2;
}

.copy p,
.wrap > p {
  max-width: 60ch;
  text-shadow: 0 1px 14px rgba(8, 12, 60, 0.9);
}

.win {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--rim);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(4, 6, 40, 0.38);
  overflow: hidden;
}

.win-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px dashed var(--rim);
  font-size: 12px;
  color: var(--muted);
}

.win-body {
  padding: 26px 28px 30px;
}

h2 {
  margin: 0 0 22px;
  font: 400 clamp(42px, 6vw, 84px) / 0.98 var(--serif);
  letter-spacing: -0.01em;
  color: #f4f6ff;
  text-shadow: 0 3px 30px rgba(10, 16, 80, 0.75);
}

.num {
  margin: 0 0 10px;
  color: var(--yellow);
  font-size: 16px;
  letter-spacing: 0.1em;
}

.fine {
  color: var(--muted);
  font-size: 13px;
}

code {
  font: inherit;
  color: var(--yellow);
}

/* ---- The menu bar: the kit's glass capsule, pinned while the scroll plays its steps sideways ------ */

.pill-stage {
  position: relative;
  height: 560vh;
  height: 560lvh;
}

.pill-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  --pill-scale: 1.5;
}

.pill-label {
  position: absolute;
  top: calc(38px + 9vh);
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.pill-label .num {
  display: inline;
  margin-right: 12px;
  font-size: inherit;
}

.pill-zone {
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.pill-zone .menubar {
  transform: scale(var(--pill-scale));
  transform-origin: 50% 0;
}

.pill-track {
  position: absolute;
  top: max(50%, calc(26% + 200px));
  left: 0;
  display: flex;
  gap: 56px;
  will-change: transform;
}

.pill-step {
  flex: none;
  width: min(780px, 80vw);
  text-align: center;
  opacity: 0.2;
}

.pill-step h2 {
  margin: 0 0 14px;
  font-size: clamp(34px, 4.6vw, 64px);
}

.pill-step p {
  margin: 0;
  color: var(--muted);
}

.pill-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(38px + 5vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pill-foot > * {
  width: fit-content;
}

.pill-dots {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill-dots button {
  font: inherit;
  font-size: 16px;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid rgba(169, 182, 255, 0.3);
  padding: 5px 11px;
  cursor: pointer;
}

.pill-dots button[aria-current="step"] {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

.pill-hint {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  opacity: 0.8;
}

/* Liquid glass: a clear body that blurs and brightens the sky behind it, a specular rim that catches
   light at the top left and bottom right, and a sheen across the top like light on a curved surface.
   In Chromium, app.js adds .lg-refract and an SVG filter that bends the sky near the rim like a lens. */
.menubar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  font: 500 14px/1 var(--ui);
  color: #fff;
  text-shadow: 0 1px 2px rgba(6, 10, 50, 0.5);
  background: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: blur(5px) saturate(1.3) brightness(1.12);
  backdrop-filter: blur(5px) saturate(1.3) brightness(1.12);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.18),
    inset 0 0 16px rgba(255, 255, 255, 0.1),
    0 10px 28px rgba(4, 8, 48, 0.3),
    0 1px 3px rgba(4, 8, 48, 0.28);
  white-space: nowrap;
}

.lg-refract .menubar {
  backdrop-filter: url(#lg-refract) blur(1.5px) saturate(1.3) brightness(1.12);
}

.menubar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.18) 22%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.18) 78%, rgba(255, 255, 255, 0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.menubar::after {
  content: "";
  position: absolute;
  inset: 1.5px 10px 52% 10px;
  z-index: -1;
  border-radius: 999px 999px 50% 50% / 999px 999px 100% 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.menubar button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.mb-fields {
  display: flex;
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.45s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s ease;
}

.fields-open .mb-fields {
  max-width: 260px;
  opacity: 1;
}

.mb-fields input {
  width: 64px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(4, 8, 48, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
  color: #fff;
  font: 500 13px var(--ui);
  text-align: center;
  outline: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.mb-fields input:last-child {
  width: 74px;
}

.mb-fields input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.mb-fields input:focus,
.mb-fields input.focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.18);
}

.mb-fieldwrap,
.mb-eyewrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* The part of the pill the current step is about: a yellow ring, and a tag under it. */
[data-target] {
  position: relative;
  border-radius: 999px;
}

[data-target]::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px var(--yellow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

[data-target].is-target::before {
  opacity: 1;
  animation: ring 1.6s ease-in-out infinite;
}

@keyframes ring {
  50% {
    box-shadow: 0 0 0 1.5px var(--yellow), 0 0 0 5px rgba(244, 211, 58, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-target].is-target::before {
    animation: none;
  }
}

[data-target]::after {
  content: "↑ " attr(data-tag);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -4px);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(10, 16, 80, 0.78);
  color: var(--yellow);
  font: 500 calc(12px / var(--pill-scale, 1)) / 1.5 var(--mono);
  letter-spacing: 0.04em;
  text-shadow: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

[data-target].is-target[data-tag]:not([data-tag=""])::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* The right-click menu: a dark macOS menu under the eye. */
.mb-menu {
  position: absolute;
  top: calc(100% + 9px);
  left: -6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: calc(220px / var(--pill-scale, 1));
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(rgba(40, 46, 110, 0.8), rgba(22, 26, 72, 0.84));
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.3),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.2),
    0 18px 40px rgba(4, 6, 40, 0.45);
  font: 400 calc(14px / var(--pill-scale, 1)) / 1 var(--ui);
  text-shadow: none;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.menu-open .mb-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.menubar .mb-menu > * {
  padding: 5px 10px;
  border-radius: 8px;
  text-align: left;
}

.mb-line {
  color: rgba(255, 255, 255, 0.5);
}

.menubar .mb-menu > .mb-sep {
  height: 1px;
  margin: 3px 6px;
  padding: 0;
  background: rgba(255, 255, 255, 0.16);
}

.menubar .mb-menu button:hover {
  background: var(--blue);
}

.mb-eye {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: background 0.2s ease;
}

.mb-eye:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
}

.mb-eye .eye {
  width: 26px;
  height: 26px;
}

.mb-count,
.mb-end {
  display: none;
  font-variant-numeric: tabular-nums;
}

.running .mb-count,
.running .mb-end {
  display: inline-block;
}

.mb-end {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 16px !important;
  line-height: 20px !important;
  background: conic-gradient(rgba(255, 255, 255, 0.55) calc(var(--hold, 0) * 1turn), transparent 0) !important;
}

.mb-sys {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 6px;
}

.ico {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.ico circle,
.ico .fill {
  fill: #fff;
  stroke: none;
}

.ico.batt {
  width: 25px;
  height: 14px;
}

/* ---- Terminal lists: the lid log, the battery meter, the recovery steps ------------------------- */

.log,
.meter,
.flow {
  list-style: none;
  margin: 0;
  padding: 22px 24px 26px;
  font-size: 13.5px;
  line-height: 1.85;
  overflow-x: auto;
}

.log {
  font-size: 13px;
}

.log li {
  display: grid;
  grid-template-columns: 24ch 8ch minmax(14ch, 1fr);
  gap: 8px;
  padding-left: 2ch;
  white-space: nowrap;
}

.log li i {
  white-space: normal;
  line-height: 1.5;
  padding-top: 0.2em;
}

@media (max-width: 860px) {
  .log li {
    grid-template-columns: 1fr auto;
    gap: 0 12px;
  }
  .log li i {
    grid-column: 1 / -1;
    padding: 0 0 4px 2ch;
  }
}

.log li.ev {
  grid-template-columns: 1fr auto;
  padding-left: 0;
  margin-top: 6px;
  color: #f4f6ff;
}

.log li.ev:first-child {
  margin-top: 0;
}

.log li.ev span::before {
  content: "$ ";
  color: var(--yellow);
}

.log time {
  color: var(--muted);
}

.log span {
  color: var(--muted);
}

.log li.ev span {
  color: #f4f6ff;
}

.log b,
.flow b {
  color: #f4f6ff;
  font-weight: 600;
}

.log i,
.flow i {
  font-style: normal;
  color: #7d93ff;
}

.meter li {
  display: grid;
  grid-template-columns: 5ch auto 1fr;
  gap: 14px;
  white-space: pre;
}

.meter .pct {
  text-align: right;
  color: var(--muted);
}

.meter .bar-cells {
  color: #f4f6ff;
  letter-spacing: 0.02em;
}

.meter .bar-cells i {
  font-style: normal;
  color: #2a3db4;
}

.meter .what {
  color: #7d93ff;
}

.meter .m-low .bar-cells {
  color: var(--yellow);
}

.meter .m-end .bar-cells {
  color: #ee3a52;
}

.meter li.heat {
  margin-top: 12px;
  grid-template-columns: 5ch 1fr;
}

.flow li {
  display: grid;
  grid-template-columns: 3ch auto;
  column-gap: 8px;
}

.flow li i {
  grid-column: 2;
}

.flow li i::before {
  content: "└─ ";
  color: #2a3db4;
}

.flow li.alt {
  margin-top: 8px;
}

.flow li.alt b {
  color: var(--yellow);
}

.reveal.armed > li {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal.on > li {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal.armed > li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Extras, install, end ------------------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.card .win-body {
  padding: 20px 22px 24px;
}

.card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.prompt {
  margin: 22px 0 26px;
}

.prompt pre {
  margin: 0;
  padding: 20px 22px 22px;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 14px;
  color: #f4f6ff;
}

.copy-btn {
  font: inherit;
  font-size: 12px;
  color: var(--yellow);
  background: none;
  border: 1px solid color-mix(in srgb, var(--yellow) 50%, transparent);
  border-radius: 999px;
  padding: 2px 12px;
  cursor: pointer;
}

.copy-btn:hover {
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
}

.warning {
  margin-top: 28px;
  padding: 16px 20px;
  border-left: 3px solid var(--yellow);
  background: rgba(16, 22, 86, 0.6);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
}

.end {
  position: relative;
  padding: 10vh 24px 120px;
  text-align: center;
}

.end p {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.end-mark {
  margin: 0 0 10px;
  font: 400 clamp(30px, 4vw, 52px) / 1.1 var(--serif);
  color: #f4f6ff;
  text-shadow: 0 3px 30px rgba(10, 16, 80, 0.75);
}

/* ---- Small screens ------------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .pill-pin {
    --pill-scale: 1.3;
  }
}

@media (max-width: 980px) {
  .pill-pin {
    --pill-scale: 1.12;
  }
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split.flip > .copy {
    order: 0;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .keyhints {
    display: none;
  }
  .bar-bottom {
    justify-content: flex-end;
  }
  .mb-sys > :not(#mb-clock) {
    display: none;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 14px;
  }
  .bar {
    padding: 0 12px;
  }
  .path {
    display: none;
  }
  .mb-sys {
    margin-left: 0;
  }
  .fields-open .mb-sys {
    display: none;
  }
  .mb-menu {
    left: 50%;
    transform: translate(-50%, -4px);
  }
  .menu-open .mb-menu {
    transform: translate(-50%, 0);
  }
  .pill-pin {
    --pill-scale: 1;
  }
  .pill-zone {
    top: 25%;
  }
  .pill-track {
    top: max(42%, calc(25% + 170px));
  }
  .pill-track {
    gap: 28px;
  }
  .pill-dots button {
    font-size: 15px;
    padding: 5px 9px;
  }
  .pill-hint {
    font-size: 13px;
  }
  .log,
  .meter,
  .flow {
    font-size: 12px;
    padding: 18px 16px 20px;
  }
}

/* Short windows: a smaller pill, the captions just below where its menu opens, and no hint line, so
   the captions clear both the menu and the step buttons. The 38px is the height of the top and bottom
   bars, 48px the pill at 1.2x, and 106px its open menu. */
@media (max-height: 680px) {
  .pill-label {
    top: calc(38px + 2vh);
  }
  .pill-zone {
    top: calc(38px + 2vh + 48px);
  }
  .pill-track {
    top: calc(38px + 2vh + 218px);
  }
  .pill-step h2 {
    margin-bottom: 8px;
    font-size: clamp(28px, 6.5vh, 52px);
  }
  .pill-foot {
    bottom: calc(38px + 2vh);
  }
  .pill-hint {
    display: none;
  }
}

@media (max-height: 680px) and (min-width: 521px) {
  .pill-pin {
    --pill-scale: 1.2;
  }
}

/* Very short windows, like a phone on its side: drop the section label to fit the menu and caption. */
@media (max-height: 440px) {
  .pill-label {
    display: none;
  }
  .pill-zone {
    top: calc(38px + 2vh);
  }
  .pill-track {
    top: calc(38px + 2vh + 170px);
  }
}

/* Under 365px there's no room for the step buttons under the caption. The scroll still plays the steps. */
@media (max-height: 365px) {
  .pill-foot {
    display: none;
  }
}

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