/* SVG artwork keeps interface icons monochrome on every platform. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  pointer-events: none;
}
.icon-arrow { width: 18px; height: 18px; }
.button > span { display: inline-flex; align-items: center; }
.button .icon-arrow { width: 20px; height: 20px; }
.card-bottom > span:last-child { display: flex; align-items: center; }
.card-bottom .icon-arrow { width: 22px; height: 22px; }
.metal-pill .icon { width: 12px; height: 12px; }
.step-icon .icon { width: 28px; height: 28px; }
.mini-shield { display: inline-flex; align-items: center; justify-content: center; }
.mini-shield .icon { width: 12px; height: 12px; }
.chip-circuit { display: block; width: 100%; height: 100%; }
.nav .real-logo { flex-shrink: 0; }
.nav-actions .portal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fff, #f3f3f3);
  box-shadow: inset 0 1px #fff;
}
.portal .icon { width: 15px; height: 15px; }
.menu-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
  color: #303030;
  background: #fff;
  border: 1px solid #c5c5c5;
  border-radius: 8px;
  line-height: 0;
}
.menu-toggle .icon { width: 21px; height: 21px; }
.menu-line { transform-origin: 12px 12px; transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] .menu-line-top { transform: translateY(5px) rotate(45deg); transform-origin: 12px 7px; }
.menu-toggle[aria-expanded="true"] .menu-line-middle { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-line-bottom { transform: translateY(-5px) rotate(-45deg); transform-origin: 12px 17px; }
#motion-toggle { display: inline-flex; align-items: center; gap: 7px; }
#motion-toggle .icon { width: 13px; height: 13px; }
#motion-toggle .icon-play { display: none; }
#motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
#motion-toggle[aria-pressed="true"] .icon-play { display: inline-block; }
@media (max-width: 800px) {
  .nav-actions { flex-shrink: 0; margin-right: 10px; }
  .nav-actions .portal { padding: 10px 12px; font-size: 12px; }
}
@media (max-width: 480px) {
  .nav .brand.real-logo { width: clamp(108px, 30vw, 124px); }
  .nav-actions .portal { gap: 6px; padding: 10px; }
  .hero-cta { flex-wrap: wrap; }
  .card-bottom .icon-arrow { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-line { transition: none; }
}