/* by claude */
.platforms {
  --platforms-on: var(--summer-fg-soft);
  --platforms-off: color-mix(in srgb, var(--summer-fg-soft) 24%, transparent);
  position: relative;
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid var(--summer-border-strong);
  border-radius: 999px;
  color: var(--platforms-on);
  font-family: var(--summer-font-mono);
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: help;
  outline: none;
  transition: border-color var(--summer-fast) var(--summer-ease);
}

.platforms:hover,
.platforms:focus-visible {
  border-color: color-mix(in srgb, var(--summer-accent) 45%, var(--summer-border));
}

.platforms__icon {
  display: inline-block;
  width: var(--platforms-icon-width);
  height: 1.1em;
  vertical-align: -0.2em;
  background: var(--platforms-off);
  -webkit-mask: var(--platforms-mask) center / var(--platforms-icon-width) var(--platforms-icon-height) no-repeat;
  mask: var(--platforms-mask) center / var(--platforms-icon-width) var(--platforms-icon-height) no-repeat;
}

.platforms__icon + .platforms__icon,
.platforms__version + .platforms__icon {
  margin-left: 0.4em;
}

.platforms__icon--on {
  background: var(--platforms-on);
}

.platforms__version {
  margin-left: 0.2em;
  font-size: 0.85em;
}

.platforms__divider {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin: 0 0.55em;
  vertical-align: -0.12em;
  background: var(--summer-border-strong);
}

.platforms__upgrade {
  --platforms-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 2a10 10 0 0 1 7.38 16.75' /%3E%3Cpath d='m16 12-4-4-4 4' /%3E%3Cpath d='M12 16V8' /%3E%3Cpath d='M2.5 8.875a10 10 0 0 0-.5 3' /%3E%3Cpath d='M2.83 16a10 10 0 0 0 2.43 3.4' /%3E%3Cpath d='M4.636 5.235a10 10 0 0 1 .891-.857' /%3E%3Cpath d='M8.644 21.42a10 10 0 0 0 7.631-.38' /%3E%3C/svg%3E");
  display: inline-block;
  width: 1em;
  height: 1.1em;
  margin-right: 0.4em;
  vertical-align: -0.2em;
  background: color-mix(in srgb, var(--summer-accent) 70%, var(--summer-fg-muted));
  -webkit-mask: var(--platforms-mask) center / 0.95em no-repeat;
  mask: var(--platforms-mask) center / 0.95em no-repeat;
}

.platforms__icon--android {
  --platforms-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 5.01 24 13.98'%3E%3Cpath d='M18.4395 5.5586c-.675 1.1664-1.352 2.3318-2.0274 3.498-.0366-.0155-.0742-.0286-.1113-.043-1.8249-.6957-3.484-.8-4.42-.787-1.8551.0185-3.3544.4643-4.2597.8203-.084-.1494-1.7526-3.021-2.0215-3.4864a1.1451 1.1451 0 0 0-.1406-.1914c-.3312-.364-.9054-.4859-1.379-.203-.475.282-.7136.9361-.3886 1.5019 1.9466 3.3696-.0966-.2158 1.9473 3.3593.0172.031-.4946.2642-1.3926 1.0177C2.8987 12.176.452 14.772 0 18.9902h24c-.119-1.1108-.3686-2.099-.7461-3.0683-.7438-1.9118-1.8435-3.2928-2.7402-4.1836a12.1048 12.1048 0 0 0-2.1309-1.6875c.6594-1.122 1.312-2.2559 1.9649-3.3848.2077-.3615.1886-.7956-.0079-1.1191a1.1001 1.1001 0 0 0-.8515-.5332c-.5225-.0536-.9392.3128-1.0488.5449zm-.0391 8.461c.3944.5926.324 1.3306-.1563 1.6503-.4799.3197-1.188.0985-1.582-.4941-.3944-.5927-.324-1.3307.1563-1.6504.4727-.315 1.1812-.1086 1.582.4941zM7.207 13.5273c.4803.3197.5506 1.0577.1563 1.6504-.394.5926-1.1038.8138-1.584.4941-.48-.3197-.5503-1.0577-.1563-1.6504.4008-.6021 1.1087-.8106 1.584-.4941z'/%3E%3C/svg%3E");
  --platforms-icon-width: 1.14em;
  --platforms-icon-height: 0.664em;
}

.platforms__icon--ios {
  --platforms-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.22 0 19.55 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
  --platforms-icon-width: 0.847em;
  --platforms-icon-height: 1.04em;
}

.platforms__icon--windows {
  --platforms-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H11.377V11.372H0ZM12.623,0H24V11.372H12.623ZM0,12.623H11.377V24H0Zm12.623,0H24V24H12.623'/%3E%3C/svg%3E");
  --platforms-icon-width: 0.8em;
  --platforms-icon-height: 0.8em;
}

.platforms__icon--linux {
  --platforms-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.11 0 19.78 24'%3E%3Cpath d='M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065z'/%3E%3C/svg%3E");
  --platforms-icon-width: 0.857em;
  --platforms-icon-height: 1.04em;
}

.platforms__icon--macos {
  --platforms-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.8 1.8 20.4 20.4'%3E%3Cpath d='M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --platforms-icon-width: 0.84em;
  --platforms-icon-height: 0.84em;
}

.platforms::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  padding: 3px 9px;
  border: 1px solid var(--summer-border);
  border-radius: var(--summer-radius-sm);
  background: var(--summer-surface);
  box-shadow: var(--summer-shadow);
  color: var(--summer-fg);
  font-family: var(--summer-font-sans);
  font-size: var(--summer-text-sm);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  translate: 0 3px;
  pointer-events: none;
  transition: opacity var(--summer-fast) var(--summer-ease), translate var(--summer-fast) var(--summer-ease), visibility var(--summer-fast);
  z-index: var(--summer-z-raised);
}

.platforms:hover::after,
.platforms:focus::after {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* -- under .summer-content to win over its link color and underline */
.summer-content .version-tag {
  --version-tag-accent: color-mix(in srgb, var(--summer-accent) 65%, var(--summer-fg-muted));
  --version-tag-border: color-mix(in srgb, var(--summer-accent) 35%, var(--summer-border));
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--version-tag-border);
  border-radius: 999px;
  overflow: hidden;
  color: var(--summer-fg-soft);
  font-size: 0.85em;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--summer-fast) var(--summer-ease);
}

.summer-content .version-tag--old {
  --version-tag-accent: var(--summer-fg-muted);
  --version-tag-border: var(--summer-border-strong);
}

.summer-content .version-tag:hover,
.summer-content .version-tag:focus-visible {
  --version-tag-border: color-mix(in srgb, var(--summer-accent) 60%, var(--summer-border));
  color: var(--summer-fg);
}

.version-tag__label {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px 1px 8px;
  background: color-mix(in srgb, var(--version-tag-accent) 14%, transparent);
  color: var(--version-tag-accent);
  font-family: var(--summer-font-sans);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.version-tag__version {
  align-self: baseline;
  padding: 1px 9px 1px 6px;
  font-family: var(--summer-font-mono);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .platforms,
  .platforms::after,
  .summer-content .version-tag {
    transition: none;
  }
}