/*
 * Orbit Station website design system — the 1.7 "violet nebula" look of the
 * extension, shared by every page on orbitstation.app. Linked after
 * styles.css (Tailwind utilities); hand-written, no build step.
 *
 * Tokens mirror design/olyron/accents/orbit.css in the extension.
 */
:root {
  --bg: #070a16;
  --ink: #f4f3fb;
  --ink-2: rgba(244, 243, 251, 0.8);
  --ink-3: rgba(244, 243, 251, 0.68);
  --violet: #a898ff;
  --violet-2: #c4b9ff;
  --accent-solid: #6d5af0;
  --accent-solid-hover: #7b68f5;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.17);
  --card: rgba(255, 255, 255, 0.045);
  --card-hover: rgba(255, 255, 255, 0.07);
  --panel: rgba(16, 20, 36, 0.86);
  --launch: linear-gradient(90deg, #7944ec, #8e47a4 50%, #b84f66 78%, #d9574a);
  --shadow-window: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 120px -40px rgba(124, 92, 255, 0.6);
  color-scheme: dark;
}

/* ── Page ───────────────────────────────────────────────────────────── */
html body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Nebula and star dust, fixed behind everything (pure CSS, no JS starfield). */
html body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 8% 14%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 22% 62%, rgba(217, 204, 255, 0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 37% 9%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1px 1px at 55% 88%, rgba(207, 224, 255, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 23%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(1px 1px at 84% 57%, rgba(217, 204, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 93% 91%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 4% 83%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 63% 45%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 47% 31%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 15% 40%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 78% 76%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(ellipse 75% 50% at 50% -10%, rgba(124, 92, 255, 0.3), transparent 65%),
    radial-gradient(ellipse 45% 40% at 100% 35%, rgba(79, 70, 229, 0.13), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 75%, rgba(168, 85, 247, 0.1), transparent 60%),
    linear-gradient(180deg, #0c1024 0%, #080b18 45%, #05070f 100%);
}
html body h1,
html body h2,
html body h3,
html body h4,
html body .font-display {
  font-family: inherit;
  letter-spacing: -0.028em;
}
html body ::selection { background: rgba(155, 138, 251, 0.38); color: #fff; }
html body :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
html body a { text-underline-offset: 3px; }

/* Older pages keep their gradient headings, repainted in the violet family. */
html body .gradient-text {
  background: linear-gradient(120deg, #ffffff 0%, #ddd5ff 45%, #a898ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Readability floor: faint white text utilities used across the older pages
   are lifted to comfortable contrast on the dark background. */
html body .text-white\/15 { color: rgba(255, 255, 255, 0.5); }
html body .text-white\/20 { color: rgba(255, 255, 255, 0.55); }
html body .text-white\/25 { color: rgba(255, 255, 255, 0.6); }
html body .text-white\/30 { color: rgba(255, 255, 255, 0.64); }
html body .text-white\/35 { color: rgba(255, 255, 255, 0.68); }
html body .text-white\/40 { color: rgba(255, 255, 255, 0.7); }
html body .text-white\/45 { color: rgba(255, 255, 255, 0.72); }
html body .text-white\/50 { color: rgba(255, 255, 255, 0.74); }
html body .text-white\/55 { color: rgba(255, 255, 255, 0.76); }
html body .text-white\/60 { color: rgba(255, 255, 255, 0.78); }
/* Accent as text is the light violet (7:1+); as a fill it stays the solid violet. */
html body .text-accent { color: var(--violet); }
html body .text-accent-light,
html body .text-indigo-400,
html body .text-indigo-300 { color: var(--violet-2); }
html body .text-cyan { color: var(--violet); }

/* ── Layout helpers ─────────────────────────────────────────────────── */
/* :where() keeps these at zero specificity, so Tailwind utilities on the same
   element (mt-*, pt-0, max-w-*) still win even though this file loads last. */
:where(.os-container) { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 640px) { :where(.os-container) { padding-left: 28px; padding-right: 28px; } }
:where(.os-section) { position: relative; padding-top: 88px; padding-bottom: 88px; }
@media (min-width: 768px) { :where(.os-section) { padding-top: 120px; padding-bottom: 120px; } }
.os-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--accent-solid); color: #fff; font-weight: 600; }
.os-skip:focus { left: 12px; }

/* ── Type ───────────────────────────────────────────────────────────── */
.os-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 14px;
}
.os-h1 {
  font-size: clamp(2.6rem, 7vw, 5.1rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.os-h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.os-h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 680; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.os-lede { font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.os-body { font-size: 1rem; line-height: 1.65; color: var(--ink-3); text-wrap: pretty; }
.os-fine { font-size: 0.875rem; line-height: 1.55; color: var(--ink-3); }
.os-violet { color: var(--violet); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.os-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}
.os-btn svg { width: 18px; height: 18px; flex: none; }
.os-btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.os-btn-primary { background: var(--accent-solid); box-shadow: 0 10px 30px -12px rgba(109, 90, 240, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.os-btn-primary:hover { background: var(--accent-solid-hover); transform: translateY(-1px); }
.os-btn-launch {
  background: var(--launch);
  box-shadow: 0 16px 40px -14px rgba(184, 79, 102, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12) inset, inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.os-btn-launch:hover { transform: translateY(-1px); filter: brightness(1.07) saturate(1.05); box-shadow: 0 20px 50px -14px rgba(184, 79, 102, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.16) inset; }
.os-btn-ghost { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); color: var(--ink); }
.os-btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.26); }
@media (prefers-reduced-motion: reduce) { .os-btn:hover { transform: none; } }

/* ── Surfaces ───────────────────────────────────────────────────────── */
.os-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.os-card-hover { transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.os-card-hover:hover { background: var(--card-hover); border-color: rgba(168, 152, 255, 0.32); }
.os-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(24, 28, 50, 0.72), rgba(14, 17, 32, 0.72));
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.os-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--violet-2);
  background: rgba(155, 138, 251, 0.12);
  border: 1px solid rgba(155, 138, 251, 0.26);
  flex: none;
}
.os-icon svg { width: 20px; height: 20px; }
.os-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.os-pill:hover { border-color: rgba(168, 152, 255, 0.45); background: rgba(155, 138, 251, 0.1); }
.os-pill-tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 650; color: #fff; background: var(--accent-solid); }
.os-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 520;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}
.os-chip svg { width: 15px; height: 15px; color: var(--violet); flex: none; }

/* Keycaps, as in the extension. */
.os-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 7px;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.os-kbd-lg { min-width: 34px; height: 34px; font-size: 15px; border-radius: 9px; padding: 0 9px; }
.os-keys { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Screenshot window. */
.os-window {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #070a16;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-window);
}
.os-window-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  background: rgba(18, 22, 40, 0.96);
  border-bottom: 1px solid var(--line);
}
.os-window-dots { display: flex; gap: 7px; flex: none; }
.os-window-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.os-window-dots i:nth-child(1) { background: #ff5f57; }
.os-window-dots i:nth-child(2) { background: #febc2e; }
.os-window-dots i:nth-child(3) { background: #28c840; }
.os-window-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 14px 0 10px;
  margin-top: 12px;
  align-self: flex-start;
  border-radius: 9px 9px 0 0;
  background: #0b0f1f;
  border: 1px solid var(--line);
  border-bottom: 0;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-2);
}
.os-window-tab img { width: 14px; height: 14px; border-radius: 4px; }
.os-window img.os-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
@media (max-width: 639px) {
  .os-window { border-radius: 12px; }
  .os-window-bar { height: 30px; gap: 10px; padding: 0 10px; }
  .os-window-dots i { width: 8px; height: 8px; }
  .os-window-tab { height: 22px; margin-top: 8px; font-size: 11px; }
}

/* Cut-out cards (stack card, privacy card) float with a violet halo. */
.os-float {
  display: block;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 50px rgba(124, 92, 255, 0.4));
}

/* ── Nav ────────────────────────────────────────────────────────────── */
.os-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(7, 10, 22, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.os-nav-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.os-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 680; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.os-nav-cta { min-height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 419px) {
  .os-brand { font-size: 16px; gap: 9px; }
  .os-brand img { width: 30px; height: 30px; }
  .os-nav-cta { padding: 0 12px; font-size: 13.5px; }
}
.os-brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 24px -4px rgba(124, 92, 255, 0.6); }
.os-nav-links { display: none; align-items: center; gap: 4px; }
.os-nav-links a { padding: 8px 11px; border-radius: 9px; font-size: 14.5px; font-weight: 520; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; }
.os-nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
@media (min-width: 900px) { .os-nav-links { display: flex; } }
@media (max-width: 1199px) { .os-nav-links .os-nav-extra { display: none; } }
.os-menu { position: relative; }
.os-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; color: var(--ink); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.os-menu summary::-webkit-details-marker { display: none; }
.os-menu summary svg { width: 20px; height: 20px; }
.os-menu-list { position: absolute; right: 0; top: 54px; width: 220px; padding: 8px; border-radius: 16px; background: rgba(16, 20, 36, 0.98); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9); }
.os-menu-list a { display: block; padding: 11px 12px; border-radius: 10px; font-size: 15px; font-weight: 520; color: var(--ink-2); text-decoration: none; }
.os-menu-list a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
@media (min-width: 900px) { .os-menu { display: none; } }

/* ── Tour tabs (segmented control, like the view switcher) ──────────── */
.os-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}
.os-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 639px) {
  .os-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .os-tab { justify-content: center; padding: 0 8px; gap: 7px; font-size: 14px; }
}
.os-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px 0 10px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 580;
  color: var(--ink-2);
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.os-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.os-tab[aria-selected='true'] { color: #fff; background: rgba(155, 138, 251, 0.18); border-color: rgba(168, 152, 255, 0.45); }
.os-tab .os-kbd { min-width: 24px; height: 24px; font-size: 12px; }
.os-tab[aria-selected='true'] .os-kbd { background: var(--accent-solid); border-color: rgba(255, 255, 255, 0.3); }
.os-tab-progress { height: 2px; margin-top: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.os-tab-progress i { display: block; height: 100%; width: 0; background: var(--violet); }

/* ── Looks switcher (1.8): thumbnail tabs, like the extension's Look popover ── */
/* Same surface and selected state as .os-tabs, laid out as a grid so all six
   looks stay visible (also without JS). */
.os-looks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
}
@media (max-width: 767px) { .os-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.os-look {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-width: 0;
  padding: 7px 7px 10px;
  border-radius: 13px;
  font: inherit;
  text-align: left;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.os-look:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.os-look[aria-selected='true'] { color: #fff; background: rgba(155, 138, 251, 0.18); border-color: rgba(168, 152, 255, 0.45); }
.os-look-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  background: #070a16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.85);
  transition: border-color 0.15s ease;
}
.os-look[aria-selected='true'] .os-look-thumb { border-color: rgba(168, 152, 255, 0.75); }
.os-look-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; padding: 0 3px; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.os-look-name .os-pill-tag { padding: 1px 7px; font-size: 11px; letter-spacing: 0.01em; }
@media (max-width: 639px) {
  .os-looks { gap: 4px; padding: 4px; border-radius: 15px; }
  .os-look { gap: 7px; padding: 5px 5px 8px; border-radius: 11px; }
  .os-look-thumb { border-radius: 6px; }
  .os-look-name { gap: 4px; padding: 0 2px; font-size: 13px; }
  .os-look-name .os-pill-tag { padding: 1px 6px; font-size: 10.5px; }
}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.os-faq details { border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: border-color 0.2s ease, background-color 0.2s ease; }
.os-faq details[open] { background: rgba(255, 255, 255, 0.06); border-color: rgba(168, 152, 255, 0.3); }
.os-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 16.5px; font-weight: 620; color: var(--ink); }
.os-faq summary::-webkit-details-marker { display: none; }
.os-faq summary svg { width: 18px; height: 18px; color: var(--violet); flex: none; transition: transform 0.2s ease; }
.os-faq details[open] summary svg { transform: rotate(180deg); }
.os-faq .os-faq-a { padding: 0 22px 22px; font-size: 15.5px; line-height: 1.7; color: var(--ink-3); }
.os-faq code { font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: rgba(155, 138, 251, 0.14); color: var(--violet-2); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.os-footer { border-top: 1px solid var(--line); padding: 44px 0 52px; }
.os-footer a { color: var(--ink-2); text-decoration: none; }
.os-footer a:hover { color: #fff; text-decoration: underline; }

/* ── Motion ─────────────────────────────────────────────────────────── */
.js .os-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.js .os-reveal.is-in { opacity: 1; transform: none; }
@keyframes os-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.os-rise { animation: os-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes os-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.os-bob { animation: os-bob 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .js .os-reveal { opacity: 1; transform: none; transition: none; }
  .os-rise, .os-bob { animation: none; }
  html { scroll-behavior: auto; }
}

/* Back to top */
.os-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(24, 28, 50, 0.9);
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.8), 0 0 40px -12px rgba(124, 92, 255, 0.6);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  cursor: pointer;
}
.os-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.os-top:hover { background: var(--accent-solid); }
.os-top svg { width: 20px; height: 20px; }

/* Looks switcher caption: reserve the longest caption's lines so the cards below
   do not jump when the selected look changes (line-height is .os-body's 1.65). */
#looks-caption { min-height: calc(2 * 1.65em); }
@media (max-width: 639px) { #looks-caption { min-height: calc(3 * 1.65em); } }
@media (max-width: 359px) { #looks-caption { min-height: calc(4 * 1.65em); } }
/* The look panels take focus (ARIA tabs pattern). .os-window clips overflow, so draw the ring inside. */
#looks [role='tabpanel']:focus-visible { outline-offset: -3px; border-radius: 0 0 17px 17px; }