.physics-section {
  background: var(--black);
  color: var(--white);
  padding-block: 3.5rem 2.5rem;
}
.physics-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  padding-bottom: 2rem;
}
.physics-heading h2 {
  font: 800 clamp(2.75rem, 4.8vw, 4.5rem)/0.98 var(--display);
  text-transform: uppercase;
}
.physics-heading h2 > span:not(.motion-word) { color: var(--graphite); }
.physics-intro { max-width: 34ch; font-size: 0.875rem; color: var(--graphite); }
.physics-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-block: 0.85rem;
  border-top: 1px solid #a9b5a5;
}
.physics-help { font-size: 0.75rem; color: var(--graphite); }
.physics-controls { display: flex; gap: 0.5rem; }
.physics-controls[hidden] { display: none; }
.physics-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  font: 400 0.75rem/1 var(--mono);
  border: 1px solid #555552;
  border-radius: 6px;
  background: transparent;
  color: var(--white);
  transition: background 160ms ease, color 160ms ease;
}
.physics-control:hover,
.physics-control:focus-visible { color: var(--black); background: var(--white); }
.physics-control svg { width: 20px; height: 20px; }
.physics-control .play-icon,
.physics-control[data-paused="true"] .pause-icon { display: none; }
.physics-control[data-paused="true"] .play-icon { display: block; }
.physics-stage {
  position: relative;
  touch-action: pan-y pinch-zoom;
  --badge-size: 104px;
  border-block: 1px solid #a9b5a5;
  background-image: radial-gradient(#a9b5a566 0.7px, transparent 0.7px);
  background-size: 20px 20px;
}
.physics-stage[data-ready="true"] { overflow: hidden; }
.physics-fallback {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  max-width: 1248px;
  margin-inline: auto;
  padding: 24px;
  list-style: none;
}
.physics-fallback li {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.skill-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #151515;
  background: #f3f3f1;
  border: 1px solid #dededb;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 3px 0 rgb(37 39 37 / 7%);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y pinch-zoom;
}
button.skill-badge { cursor: pointer; }
button.skill-badge:disabled { opacity: 1; cursor: default; }
[data-shape="circle"] .skill-badge {
  width: max(var(--badge-size), 5.25rem);
  height: max(var(--badge-size), 5.25rem);
  padding: 8px;
  border-radius: 50%;
  font: 400 0.6875rem/1.3 var(--mono);
}
[data-shape="tile"] .skill-badge {
  width: max-content;
  max-width: min(17rem, calc(100vw - 56px));
  min-height: 60px;
  padding: 12px 20px;
  border-radius: 6px;
  background: #232323;
  color: #efefed;
  border-color: #676765;
  font: 800 1.375rem/1.15 var(--display);
  overflow-wrap: break-word;
}
.skill-badge small { font: 400 0.625rem/1.3 var(--mono); color: #555; }
.skill-badge img {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter 180ms ease;
  pointer-events: none;
}
.skill-badge:focus-visible img,
.skill-badge[aria-pressed="true"] img { filter: grayscale(0); }
.skill-badge:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.skill-badge[aria-pressed="true"] { border-color: #626260; }
@media (hover: hover) {
  .skill-badge:hover img { filter: grayscale(0); }
  .skill-badge:hover { border-color: #626260; }
  .physics-stage[data-ready="true"] .skill-badge { cursor: grab; }
  .physics-stage[data-dragging="true"] .skill-badge { cursor: grabbing; }
}
.physics-stage[data-ready="true"] .physics-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
.physics-stage[data-ready="true"] [data-skill] {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center;
}
.physics-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
@media (max-width: 959px) {
  .physics-stage { --badge-size: 96px; }
  .physics-heading { align-items: start; }
}
@media (max-width: 599px) {
  .physics-section { padding-block: 2.5rem 2rem; }
  .physics-heading { gap: 1rem; padding-bottom: 1.5rem; }
  .physics-heading h2 { font-size: 2.75rem; }
  .physics-intro { font-size: 0.8125rem; }
  .physics-stage { --badge-size: 84px; }
  .physics-controls { width: 100%; }
  .physics-control { flex: 1; }
  .physics-fallback { gap: 10px; padding: 24px 14px; }
  .skill-badge img { width: 28px; height: 28px; }
  [data-shape="tile"] .skill-badge { min-height: 52px; font-size: 1.25rem; padding: 12px 16px; }
}
@media (hover: none), (pointer: coarse) {
  .physics-drag-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .physics-drag-hint { display: none; }
  .physics-control, .skill-badge img { transition: none; }
}