.guide-section {
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.guide-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.guide-card,
.guide-list,
.guide-symbol-grid > div {
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}

.guide-card {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
}

.guide-card strong,
.guide-list strong {
  color: var(--ink);
  font-weight: 880;
}

.guide-card span,
.guide-list p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.82rem, 3.35vw, 0.94rem);
  font-weight: 620;
  line-height: 1.42;
}

.guide-symbol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.guide-symbol-grid > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  padding: 9px 10px;
}

.guide-symbol-grid b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, rgba(0, 0, 0, 0.65));
  color: color-mix(in srgb, var(--accent) 80%, #ffffff);
  font-size: 0.88rem;
  font-weight: 920;
  line-height: 1;
}

.guide-symbol-grid b::before {
  display: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  content: "";
  -webkit-mask: var(--guide-icon-mask) center / contain no-repeat;
  mask: var(--guide-icon-mask) center / contain no-repeat;
}

.guide-symbol-grid b[class*="guide-icon-"]::before {
  display: block;
}

.guide-icon-arrow {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M14.7 5.3 8 12l6.7 6.7-1.9 1.9L4.2 12l8.6-8.6 1.9 1.9Z'/%3E%3C/svg%3E");
}

.guide-icon-search {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10.7 4a6.7 6.7 0 1 0 0 13.4 6.7 6.7 0 0 0 0-13.4Zm0 2.2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm5.1 9.1 4.2 4.2-1.6 1.6-4.2-4.2 1.6-1.6Z'/%3E%3C/svg%3E");
}

.guide-icon-history {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4 5h2v3.1A7.5 7.5 0 1 1 4.75 13H7a5.25 5.25 0 1 0 1.28-3.43H11v2H4V5Zm7 4h2v3.2l2.6 1.55-1.03 1.72L11 13.33V9Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.guide-icon-grid {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z'/%3E%3C/svg%3E");
}

.guide-icon-list {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 6h14v2H5V6Zm0 5h14v2H5v-2Zm0 5h14v2H5v-2Z'/%3E%3C/svg%3E");
}

.guide-icon-star {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m12 3.4 2.45 5.05 5.55.8-4.03 3.92.95 5.53L12 16.1l-4.92 2.6.95-5.53L4 9.25l5.55-.8L12 3.4Zm0 4.6-.98 2.02-2.22.32 1.6 1.56-.38 2.22L12 13.07l1.98 1.05-.38-2.22 1.6-1.56-2.22-.32L12 8Z'/%3E%3C/svg%3E");
}

.guide-icon-info {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M11 10h2v8h-2v-8Zm0-4h2v2h-2V6Z'/%3E%3C/svg%3E");
}

.guide-icon-bolt {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M13.2 2 5.6 13.2h5.2L9.6 22l8-12h-5.3L13.2 2Zm-1.7 6.8-.35 3.1h2.45l-1.1 1.65.35-2.95h-2.5l1.15-1.8Z'/%3E%3C/svg%3E");
}

.guide-icon-bookmark {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h10a2 2 0 0 1 2 2v16l-7-3-7 3V5a2 2 0 0 1 2-2Zm0 2v12.95l5-2.15 5 2.15V5H7Z'/%3E%3C/svg%3E");
}

.guide-icon-plus {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10.8 5h2.4v5.8H19v2.4h-5.8V19h-2.4v-5.8H5v-2.4h5.8V5Z'/%3E%3C/svg%3E");
}

.guide-icon-link {
  --guide-icon-mask: url("../assets/source-link-glyph.png");
}

.guide-icon-settings {
  --guide-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42L9.12 5.07c-.61.24-1.18.56-1.69.98l-2.49-1a.5.5 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65a7.9 7.9 0 0 0 0 1.96l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.51.4 1.08.74 1.69.98l.38 2.65a.5.5 0 0 0 .5.42h4a.5.5 0 0 0 .5-.42l.38-2.65c.61-.24 1.18-.56 1.69-.98l2.49 1a.5.5 0 0 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.12-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
}

.guide-symbol-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.16;
}

.guide-list {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
}

.accent-setting {
  cursor: pointer;
}

.image-credit-section {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(220, 255, 0, 0.18);
}

.image-credit-section h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.96rem;
}

.image-credit-section p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.8rem, 3.2vw, 0.9rem);
  line-height: 1.45;
}

.image-credit-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-credit-list li {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: clamp(0.76rem, 3vw, 0.86rem);
  line-height: 1.35;
}

.image-credit-list em {
  color: var(--text);
  font-style: normal;
}

.image-credit-list a,
.image-credit-section p a {
  color: var(--accent);
  font-weight: 850;
  text-decoration: none;
}

.settings-detail-panel .setting-row {
  margin-top: 0;
}

.customization-panel {
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
}

.customization-panel .accent-setting {
  cursor: default;
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.065);
}

.setting-row strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.05rem;
  line-height: 1.1;
}

.color-control {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.color-control input {
  width: 64px;
  height: 64px;
  margin: -8px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  cursor: pointer;
}

.info-panel ol {
  margin: 0;
  padding-left: 22px;
  color: #d5dbe6;
}

.info-panel li {
  margin-bottom: 11px;
}

.small-note {
  margin: 16px 0 10px;
  color: var(--danger);
  font-size: 0.88rem;
  font-weight: 820;
}

.source-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  color: var(--accent);
  font-weight: 900;
}

.preference-toggle {
  border-radius: 0;
}

.preference-toggle[aria-pressed="true"] .settings-glyph {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: var(--accent);
  color: #050608;
}

.app-toast {
  position: fixed;
  right: 18px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: min(260px, calc(100vw - 36px));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(6, 9, 12, 0.88);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 880;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(20px) saturate(145%);
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.app-update-prompt {
  position: fixed;
  right: 16px;
  bottom: calc(77px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 45;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  max-width: 620px;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.13));
  border-radius: 18px;
  padding: 11px 12px 11px 15px;
  background: linear-gradient(145deg, rgba(24, 30, 40, 0.98), rgba(11, 15, 20, 0.98));
  color: var(--ink);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(130%);
  transition: bottom var(--ios-spring);
}

body.bottom-nav-collapsed .app-update-prompt {
  bottom: calc(6px + env(safe-area-inset-bottom));
}

.app-update-copy,
.app-update-copy strong,
.app-update-copy small {
  display: block;
}

.app-update-copy {
  min-width: 0;
}

.app-update-copy strong {
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.18;
}

.app-update-copy small {
  margin-top: 2px;
  color: #b3bdca;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.25;
}

.app-update-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-update-actions button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 880;
  cursor: pointer;
}

.app-update-later {
  padding-inline: 7px !important;
  background: transparent;
  color: var(--muted);
}

.app-update-now {
  border-color: var(--accent) !important;
  background: var(--accent);
  color: #050608;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

.offline-readiness-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.offline-readiness-summary.is-ready {
  border-color: color-mix(in srgb, var(--rec-green) 50%, var(--line));
}

.offline-readiness-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f0b84c;
  box-shadow: 0 0 0 5px rgba(240, 184, 76, 0.13);
}

.offline-readiness-summary.is-ready .offline-readiness-indicator {
  background: var(--rec-green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rec-green) 15%, transparent);
}

.offline-readiness-summary strong,
.offline-readiness-summary small {
  display: block;
}

.offline-readiness-summary small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.audit-status-actions {
  display: grid;
  gap: 9px;
}

.audit-status-actions button {
  width: 100%;
}

.update-changelog-detail {
  display: grid;
  gap: 13px;
}

.update-changelog-detail > * {
  margin-block: 0;
}

.dialog-frame[data-sheet-kind="update-changelog"] .dialog-header .eyebrow {
  display: none;
}

.dialog-frame[data-sheet-kind="update-changelog"] .dialog-header h2 {
  padding-top: 0;
  color: color-mix(in srgb, var(--accent) 82%, #ffffff);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 1.15;
  text-transform: uppercase;
}

.update-changelog-release {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.update-changelog-release[hidden] {
  display: none;
}

.dialog-frame[data-sheet-kind="update-changelog"] .dialog-header .update-changelog-release {
  margin-top: 10px;
}

.dialog-frame[data-sheet-kind="update-changelog"] .dialog-header {
  padding-bottom: 10px;
}

.dialog-frame[data-sheet-kind="update-changelog"] > #detailBody {
  padding-top: 10px;
}

.update-changelog-release span {
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, 0.035));
  color: color-mix(in srgb, var(--accent) 72%, #ffffff);
  font-size: 0.68rem;
  font-weight: 860;
  line-height: 1;
}

.update-changelog-sections {
  display: grid;
  gap: 10px;
}

.update-changelog-section {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.055);
}

.update-changelog-section h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
}

.update-changelog-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #c6ceda;
  font-size: 0.74rem;
  line-height: 1.42;
}

.update-changelog-section li::marker {
  color: var(--accent);
}

.update-changelog-back {
  width: 100%;
}

@media (max-width: 520px) {
  .app-update-prompt {
    right: 12px;
    left: 12px;
    gap: 7px;
    padding: 10px 10px 10px 13px;
  }
}

body.compact-mode .app-shell {
  padding-inline: 13px;
}

body.compact-mode .search-band,
body.compact-mode .search-band.is-stuck,
body.compact-mode .search-band.is-compact,
body.compact-mode .search-band.has-floating-title,
body.compact-mode .app-shell.variant-route .search-band,
body.compact-mode .app-shell.variant-route .search-band.is-stuck,
body.compact-mode .app-shell.variant-route .search-band.has-floating-title {
  margin-inline: -13px;
  padding-inline: 13px;
}

body.compact-mode .stage,
body.compact-mode .variant-page,
body.compact-mode .variant-list,
body.compact-mode .saved-list,
body.compact-mode .search-result-groups,
body.compact-mode .search-group-list {
  gap: 7px;
}

body.compact-mode .variant-card {
  gap: 6px;
  padding: 9px;
  border-radius: 20px;
}

body.compact-mode .variant-card-toolbar {
  min-height: 24px;
  margin: -2px 0 -3px;
}

body.compact-mode .variant-number-pill {
  height: 24px;
  min-height: 24px;
  font-size: 0.64rem;
}

body.compact-mode .scenario-pill,
body.ultra-compact-mode .scenario-pill {
  height: 24px;
  min-height: 24px;
}

body.compact-mode .variant-number-pill strong {
  min-width: 18px;
  height: 18px;
  font-size: 0.7rem;
}

body.compact-mode .variant-card h2 {
  font-size: 0.84rem;
  line-height: 1.12;
}

body.compact-mode .variant-card p {
  font-size: 0.76rem;
  line-height: 1.13;
}

body.compact-mode .saved-content-section,
body.compact-mode .recent-topic-section {
  --saved-context-size: 0.66rem;
  --saved-title-size: 0.84rem;
}

body.compact-mode .rating-strip {
  gap: 4px;
}

body.compact-mode .rating-row {
  min-height: 0;
  padding: 6px 8px;
  border-radius: 14px;
}

body.compact-mode .modality {
  font-size: 0.76rem;
  line-height: 1.12;
}

body.compact-mode .recommendation-meta {
  margin-top: 2px;
  font-size: 0.66rem;
}

body.compact-mode .actions {
  gap: 6px;
}

body.compact-mode .actions.has-more {
  grid-template-columns: minmax(78px, 0.8fr) minmax(0, 1.5fr) 38px;
}

body.compact-mode .action-button,
body.compact-mode .more-recs-button,
body.compact-mode .source-action-button {
  min-height: 38px;
  height: 38px;
  border-radius: 19px;
  font-size: 0.78rem;
}

body.compact-mode .source-action-button {
  width: 38px;
  min-width: 38px;
}

body.compact-mode .source-action-button .source-link-glyph {
  width: 18px;
  height: 18px;
}

body.ultra-compact-mode .stage,
body.ultra-compact-mode .variant-page,
body.ultra-compact-mode .variant-list,
body.ultra-compact-mode .saved-list,
body.ultra-compact-mode .search-result-groups,
body.ultra-compact-mode .search-group-list {
  gap: 5px;
}

body.ultra-compact-mode .variant-card {
  gap: 6px;
  padding: 8px 8px 7px;
  border-radius: 18px;
}

body.ultra-compact-mode .variant-card-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  min-height: 24px;
  margin: -2px 0 -1px;
}

body.ultra-compact-mode .variant-number-pill {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.ultra-compact-mode .variant-number-pill strong {
  min-width: 24px;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  border-radius: 50%;
  background: var(--accent);
  color: #050608;
  font-size: 0.72rem;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent);
}

body.ultra-compact-mode .variant-number-pill.variant-pill-party {
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  filter: none;
  animation: variant-number-party-pulse 820ms ease-in-out infinite;
  animation-delay: var(--party-pill-delay, 0ms);
}

body.ultra-compact-mode .variant-number-pill.variant-pill-party strong {
  border-color: rgba(255, 255, 255, 0.72);
  background: var(--accent);
  color: #050608;
  text-shadow: none;
  animation: ultra-variant-circle-party-flash 360ms steps(2, end) infinite;
  animation-delay: var(--party-pill-delay, 0ms);
}

@keyframes ultra-variant-circle-party-flash {
  0% {
    filter: brightness(1) saturate(150%);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.5),
      0 0 0 rgba(255, 255, 255, 0),
      0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent);
  }

  50% {
    filter: brightness(1.34) saturate(230%);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.72),
      0 0 14px rgba(255, 255, 255, 0.78),
      0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  100% {
    filter: brightness(1.08) saturate(175%);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.58),
      0 0 8px rgba(255, 255, 255, 0.42),
      0 8px 18px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

body.ultra-compact-mode .variant-context-pill {
  display: inline-flex;
  min-height: 24px;
  padding: 0 8px;
  font-size: 0.54rem;
}

body.ultra-compact-mode .ultra-card-actions {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

body.ultra-compact-mode .variant-head {
  padding: 1px 0 0;
}

body.ultra-compact-mode .variant-card h2 {
  font-size: 0.85rem;
  line-height: 1.12;
}

body.ultra-compact-mode .variant-card p {
  font-size: 0.7rem;
}

body.ultra-compact-mode .saved-content-section,
body.ultra-compact-mode .recent-topic-section {
  --saved-context-size: 0.64rem;
  --saved-title-size: 0.85rem;
}

body.ultra-compact-mode .rating-strip {
  gap: 4px;
}

body.ultra-compact-mode .rating-row {
  padding: 5px 7px;
  border-radius: 13px;
}

body.ultra-compact-mode .modality {
  font-size: 0.72rem;
}

body.ultra-compact-mode .recommendation-meta {
  font-size: 0.62rem;
}

body.ultra-compact-mode .actions.has-more {
  grid-template-columns: minmax(58px, 0.68fr) minmax(0, 1.35fr) 34px 34px;
}

body.ultra-compact-mode .actions.ultra-direct-actions {
  grid-template-columns: minmax(0, 1fr) 34px 34px;
}

body.ultra-compact-mode .more-recs-button,
body.ultra-compact-mode .action-button.primary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

body.ultra-compact-mode .action-button,
body.ultra-compact-mode .more-recs-button,
body.ultra-compact-mode .source-action-button {
  min-height: 34px;
  height: 34px;
  border-radius: 17px;
  font-size: 0.72rem;
}

body.ultra-compact-mode .source-action-button {
  width: 34px;
  min-width: 34px;
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: var(--accent);
  color: #050608;
}

body.ultra-compact-mode .ultra-card-actions .action-save-button,
body.ultra-compact-mode .ultra-card-actions .source-action-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 50%;
}

body.ultra-compact-mode .ultra-card-actions .action-save-button svg {
  width: 13px;
  height: 13px;
}

body.ultra-compact-mode .ultra-card-actions .source-action-button .source-link-glyph {
  width: 13px;
  height: 13px;
}

body.oled-mode,
body.oled-mode:is(body) {
  background: #000;
}

body.oled-mode::before {
  background: #000;
}

html:has(body.oled-mode) {
  background: #000;
}

body.oled-mode .app-shell,
body.oled-mode .search-band,
body.oled-mode .customization-panel,
body.oled-mode .settings-list {
  background: transparent;
}

body.oled-mode .glass-card,
body.oled-mode .variant-card.glass-card,
body.oled-mode .empty-state,
body.oled-mode .info-panel,
body.oled-mode .search-box,
body.oled-mode .round-button,
body.oled-mode .crumb,
body.oled-mode .variant-key,
body.oled-mode .bottom-nav,
body.oled-mode .install-prompt,
body.oled-mode .card-action-sheet,
body.oled-mode dialog::backdrop {
  background: rgba(4, 5, 7, 0.88);
}

body.oled-mode .glass-card,
body.oled-mode .variant-card.glass-card,
body.oled-mode .empty-state,
body.oled-mode .info-panel {
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.11), 0 18px 56px rgba(0, 0, 0, 0.78);
}

body.oled-mode .section-glyph-control,
body.oled-mode .rp-filter-toggle {
  background: rgba(3, 5, 7, 0.82);
  box-shadow: none;
  backdrop-filter: none;
}

body.oled-mode .saved-view-toggle {
  border-color: var(--line);
  background: #000;
  box-shadow: none;
  backdrop-filter: none;
}

body.oled-mode .saved-view-toggle button.active {
  background: var(--accent);
  box-shadow: none;
}

body.oled-mode .rp-card,
body.oled-mode .rp-check-group {
  background: rgba(3, 5, 7, 0.82);
  box-shadow: none;
}

body.oled-mode .topic-card,
body.oled-mode .variant-card.glass-card,
body.oled-mode .saved-criterion-card {
  border: 1px solid var(--line);
}

body.oled-mode .topic-card:hover,
body.oled-mode .variant-card.glass-card:hover,
body.oled-mode .saved-criterion-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

body.oled-mode .rp-step label {
  background: transparent;
}

body.oled-mode .section-card.photo-card::after,
body.oled-mode .section-card.photo-card::before,
body.oled-mode .home-tools::before,
body.oled-mode .tile-title-glass::before {
  background: transparent;
  opacity: 0;
}

body.oled-mode .tile-photo {
  filter: grayscale(0.12) contrast(1.06) brightness(0.7);
}

body.oled-mode .rating-row,
body.oled-mode .setting-row,
body.oled-mode .source-freshness,
body.oled-mode .variant-legend .recommendation-key,
body.oled-mode .recent-searches {
  background: rgba(3, 5, 7, 0.72);
}

body.oled-mode .rating-row.usually-appropriate {
  background: rgba(8, 31, 18, 0.56);
}

body.oled-mode .rating-row.may-appropriate {
  background: rgba(34, 31, 16, 0.58);
}

body.oled-mode .rating-row.not-appropriate {
  background: rgba(34, 11, 16, 0.58);
}

body.oled-mode .rating-row.no-top-recommendation-note {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 76%),
    rgba(3, 5, 7, 0.82);
}

body.monochrome-mode {
  --accent: #b8c0cc;
  --green: #b8c0cc;
  --aqua: #b8c0cc;
  --pink: #b8c0cc;
  --amber: #b8c0cc;
}

body.monochrome-mode:is(body) {
  background:
    radial-gradient(circle at 80% -10%, rgba(184, 192, 204, 0.1), transparent 28rem),
    radial-gradient(circle at 15% 15%, rgba(184, 192, 204, 0.07), transparent 22rem),
    linear-gradient(160deg, #050608 0%, #090b0f 46%, #020303 100%);
}

body.monochrome-mode::before {
  background:
    radial-gradient(circle at 80% -10%, rgba(184, 192, 204, 0.1), transparent 28rem),
    radial-gradient(circle at 15% 15%, rgba(184, 192, 204, 0.07), transparent 22rem),
    linear-gradient(160deg, #050608 0%, #090b0f 46%, #020303 100%);
}

body.monochrome-mode .tile-photo,
body.monochrome-mode .section-glyph-button img,
body.monochrome-mode .quick-section img,
body.monochrome-mode .tile-glyph-badge img,
body.monochrome-mode .list-glyph-badge img {
  filter: grayscale(1) contrast(1.04) brightness(0.82);
}

body.monochrome-mode .section-card.photo-card::before,
body.monochrome-mode .section-card.photo-card::after,
body.monochrome-mode .home-tools::before,
body.monochrome-mode .tile-title-glass::before {
  opacity: 0;
}

body.monochrome-mode .glass-card,
body.monochrome-mode .variant-card.glass-card,
body.monochrome-mode .topic-card,
body.monochrome-mode .section-card,
body.monochrome-mode .empty-state,
body.monochrome-mode .info-panel {
  border-color: rgba(184, 192, 204, 0.105);
  background: rgba(17, 20, 26, 0.66);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.052), 0 10px 28px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px) saturate(102%);
}

body.monochrome-mode .section-list .section-list-item,
body.monochrome-mode .settings-list .settings-list-item,
body.monochrome-mode .settings-detail-panel .settings-list-item {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.monochrome-mode .section-list-item,
body.monochrome-mode .settings-list-item {
  border-bottom-color: rgba(184, 192, 204, 0.16);
}

body.monochrome-mode .section-list-item:hover,
body.monochrome-mode .settings-list-item:hover {
  background: rgba(184, 192, 204, 0.035);
}

body.monochrome-mode .section-card:not(.photo-card)::before,
body.monochrome-mode .topic-card::before,
body.monochrome-mode .variant-card::before {
  opacity: 0;
}

body.monochrome-mode .section-card.photo-card {
  background: rgba(14, 17, 22, 0.9);
}

body.monochrome-mode .tile-title-glass {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.82);
}

body.monochrome-mode .tile-glyph-badge,
body.monochrome-mode .list-glyph-badge,
body.monochrome-mode .settings-glyph {
  background: rgba(6, 8, 12, 0.86);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

/* Toolbar buttons already provide the circular frame around their glyph. */
body.monochrome-mode :is(.home-shortcut-button, .home-criteria-shortcut, .criteria-interactive-button) .settings-glyph {
  background: transparent;
  box-shadow: none;
}

body.monochrome-mode :is(.home-shortcut-button, .home-criteria-shortcut) {
  color: var(--ink);
}

body.monochrome-mode .home-tools::before,
body.monochrome-mode .source-freshness,
body.monochrome-mode .install-prompt,
body.monochrome-mode .dialog-frame,
body.monochrome-mode .card-action-overlay,
body.monochrome-mode .card-action-sheet,
body.monochrome-mode .recent-searches {
  filter: saturate(0);
}

body.monochrome-mode .rating-row.usually-appropriate,
body.monochrome-mode .rating-row.may-appropriate,
body.monochrome-mode .rating-row.not-appropriate,
body.monochrome-mode .rating-row.no-top-recommendation-note,
body.monochrome-mode .key-chip.usually-appropriate,
body.monochrome-mode .key-chip.may-appropriate,
body.monochrome-mode .key-chip.not-appropriate {
  filter: none;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: rgba(5, 6, 8, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(150%);
  will-change: transform, opacity;
  transition:
    transform var(--ios-spring),
    opacity 220ms ease,
    border-color 220ms ease;
}

body.bottom-nav-collapsed .bottom-nav {
  opacity: 0.18;
  pointer-events: none;
  transform: translateY(calc(100% - 8px));
  border-top-color: rgba(255, 255, 255, 0.04);
}

.nav-button {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 54px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.nav-button::before {
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: 24px;
  background: transparent;
  content: "";
}

.nav-button.active {
  color: #050608;
}

.nav-button.active::before {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent);
}

.nav-button:focus-visible {
  outline: none;
}

.nav-button:focus-visible::before {
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

dialog {
  width: min(100vw, 760px);
  max-height: 100dvh;
  margin: auto auto 0;
  border: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 180ms ease,
    transform var(--ios-spring);
}

dialog[data-sheet-kind="install"] {
  margin-bottom: 0;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px) saturate(120%);
}

dialog.sheet-open {
  opacity: 1;
  transform: translateY(0);
}

dialog.sheet-dismissing {
  opacity: 0;
  transform: translateY(26px);
}

dialog.sheet-dragging {
  transition: none;
  transform: translateY(var(--sheet-drag-y, 0));
}

dialog[data-sheet-kind="radiopaedia-search"] {
  margin: 0 auto auto;
  transform: translateY(-22px);
}

dialog[data-sheet-kind="radiopaedia-search"].sheet-open {
  transform: translateY(0);
}

dialog[data-sheet-kind="radiopaedia-search"].sheet-dismissing {
  transform: translateY(-26px);
}

dialog[data-sheet-kind="radiopaedia-search"] .dialog-frame {
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0 0 24px 24px;
  clip-path: inset(0 round 0 0 24px 24px);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.5), inset 0 -1px rgba(255, 255, 255, 0.08);
}

dialog[data-sheet-kind="radiopaedia-search"] .dialog-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: end;
  gap: 14px;
  padding: max(18px, env(safe-area-inset-top, 0px)) 16px 16px 18px;
  border-radius: 0;
}

dialog[data-sheet-kind="radiopaedia-search"] .dialog-header > div {
  display: block;
}

dialog[data-sheet-kind="radiopaedia-search"] .dialog-header h2 {
  padding-top: 5px;
  line-height: 1.1;
}

dialog[data-sheet-kind="radiopaedia-search"] .dialog-header .round-button {
  position: static;
  align-self: end;
  width: 40px;
  height: 40px;
}

dialog[data-sheet-kind="radiopaedia-search"] .sheet-grabber {
  display: none;
}

.dialog-frame {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  clip-path: inset(0 round 30px 30px 0 0);
  background:
    radial-gradient(circle at 22% -4%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 42%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.014)),
    rgba(11, 14, 19, 0.96);
  box-shadow: 0 -18px 70px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(34px) saturate(145%);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dialog-frame[data-sheet-kind="install"] {
  min-height: min(36dvh, 360px);
}

.dialog-frame[data-sheet-kind="radiopaedia-search"] {
  min-height: 0;
}

.radiopaedia-search-form {
  display: grid;
  gap: 12px;
}

.radiopaedia-search-form label {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 850;
}

.radiopaedia-search-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  font: inherit;
}

.radiopaedia-search-form input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

.radiopaedia-search-form button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, transparent);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--accent);
  color: #050608;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.dialog-frame[data-sheet-kind="scenarios"] {
  transition: height var(--ios-spring);
}

.dialog-frame[data-sheet-kind="scenarios"].scenario-recommendations-open {
  height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
}

.sheet-grabber {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  height: 0;
  place-items: center;
  background: transparent;
  pointer-events: none;
}

.sheet-grabber::before {
  display: block;
  width: 42px;
  height: 5px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(220, 232, 244, 0.34);
  content: "";
}

.dialog-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  padding: 30px 66px 16px 18px;
  border-radius: 30px 30px 0 0;
  background:
    radial-gradient(circle at 22% -32px, color-mix(in srgb, var(--accent) 6%, transparent), transparent 48%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.014)),
    rgba(11, 14, 19, 0.96);
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: blur(34px) saturate(145%);
}

.dialog-header > div {
  min-width: 0;
}

.dialog-header .eyebrow {
  max-width: 100%;
}

.dialog-header h2 {
  max-width: 100%;
  padding-top: 6px;
  overflow-wrap: anywhere;
}

.dialog-header .round-button {
  position: absolute;
  top: 32px;
  right: 16px;
  width: 44px;
  height: 44px;
}

#detailBody {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 18px;
  background: transparent;
}

.detail-section {
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.detail-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.scenario-browser {
  min-width: 0;
}

.scenario-parent-title {
  margin: 0;
  padding: 0 0 14px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
}

.scenario-selector-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.scenario-selector-item {
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.scenario-selector {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 15px 2px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.scenario-selector > span:first-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.scenario-selector strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  line-height: 1.3;
}

.scenario-selector small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.25;
}

.scenario-chevron {
  color: var(--quiet);
  font-size: 1.55rem;
  line-height: 1;
  transition: transform var(--ios-spring), color 180ms ease;
}

.scenario-selector-item.expanded .scenario-chevron {
  color: var(--accent);
  transform: rotate(90deg);
}

.scenario-selector-item.expanded .scenario-selector strong {
  color: color-mix(in srgb, var(--accent) 68%, var(--ink));
}

.scenario-expanded {
  min-width: 0;
  padding: 0 0 16px;
}

.scenario-rating-strip {
  gap: 6px;
}

.scenario-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 2px 0;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 760;
}

.scenario-source-row a {
  color: var(--accent);
  text-decoration: none;
}

.scenario-source-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.scenario-source-actions button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.detail-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.install-detail-grid {
  padding-top: 15px;
}

.detail-pill {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 17px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--ink);
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.detail-pill strong {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.data-freshness-grid .detail-pill {
  min-height: 68px;
}

.application-status-detail {
  display: grid;
  gap: 12px;
}

.application-status-detail > * {
  margin-block: 0;
}

.application-status-detail .data-freshness-grid {
  gap: 9px;
}

.application-status-detail .detail-pill {
  padding: 11px 12px;
}

.application-status-note {
  padding-inline: 2px;
  font-size: 0.72rem;
  line-height: 1.42;
}

.detail-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 820;
}

.detail-swipe-hint span:first-child {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 999px;
  padding: 5px 8px;
  color: color-mix(in srgb, var(--accent) 78%, #ffffff);
  white-space: nowrap;
}

.report-button {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-color: rgba(255, 99, 112, 0.55);
  background:
    linear-gradient(135deg, rgba(255, 99, 112, 0.22), rgba(255, 99, 112, 0.08)),
    rgba(36, 12, 18, 0.62);
  text-decoration: none;
}

.report-button strong {
  margin-bottom: 4px;
  color: #ffb4bc;
  text-align: center;
}

.report-button span {
  display: block;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 920;
  line-height: 1.1;
  text-align: center;
}

.rrl-table {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

.rrl-table > div {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.055);
  color: #dce5ef;
  font-size: 0.78rem;
  font-weight: 720;
}

.rrl-table strong {
  color: var(--ink);
}

@media (min-width: 700px) {
  .app-shell {
    padding-inline: 28px;
  }

  .search-band {
    margin-inline: -28px;
    padding-inline: 28px;
  }

  .section-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .topic-grid,
  .variant-list,
  .saved-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1020px) {
  .section-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #c3cedd;
    --quiet: #aebbd0;
  }

  button,
  input,
  select,
  textarea,
  .topic-card,
  .variant-card,
  .settings-card,
  .detail-pill {
    border-width: 2px;
  }

  :focus-visible {
    outline: 4px solid color-mix(in srgb, var(--accent) 82%, white) !important;
    outline-offset: 3px;
  }
}

@media (forced-colors: active) {
  *,
  *::before,
  *::after {
    forced-color-adjust: auto;
    text-shadow: none !important;
  }

  button,
  input,
  select,
  textarea,
  a,
  .topic-card,
  .variant-card,
  .settings-card,
  .detail-pill,
  .app-update-prompt {
    border: 1px solid ButtonText !important;
  }

  a,
  button,
  [role="button"] {
    color: LinkText;
  }

  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px;
  }

  .rating-chip,
  .status-indicator,
  .source-badge {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* Align the close control with the title even when platform fonts wrap it. */
dialog[data-sheet-kind="radiopaedia-search"] .dialog-header > div { display: contents; }
dialog[data-sheet-kind="radiopaedia-search"] .dialog-header .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
dialog[data-sheet-kind="radiopaedia-search"] .dialog-header { row-gap: 0; align-items: center; }
dialog[data-sheet-kind="radiopaedia-search"] .dialog-header h2 { grid-column: 1; grid-row: 2; }
dialog[data-sheet-kind="radiopaedia-search"] .dialog-header .round-button { grid-column: 2; grid-row: 2; align-self: center; transform: translateY(-8px); }

.install-guide { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.install-guide figure { margin: 0; min-width: 0; }
.install-guide img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 30px; background: var(--bg-soft); }
.install-guide figcaption { margin: 0 0 10px; font-weight: 600; color: var(--ink); font-size: .9rem; line-height: 1.4; }
.install-guide figcaption span { color: var(--accent); font-weight: 700; }
.install-guide-intro { margin-bottom: 0; }

.install-guide > li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); padding-top: 12px; }