/* Page shell and shared preview chips from the original portfolio. */
:root { color-scheme: dark; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f0f0ed; font-synthesis: none; text-rendering: geometricPrecision; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
button { border: 0; color: inherit; font: inherit; }
.play-page { height: 100%; overflow: hidden; border-radius: 12px; background: #252525; }
body, button, a { cursor: auto; }
@media (max-width: 760px) { .play-page { border-radius: 10px; } }
.social-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.social-chips a {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 6px;
  border: 1px solid #484848;
  border-radius: 17px;
  color: #d7d7d4;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.social-chips a:hover,
.social-chips a:focus-visible {
  border-color: #666;
  background: #363636;
  color: #fff;
  outline: none;
}

.social-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: #444;
  color: #e7e7e4;
}

.social-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.social-icon rect,
.social-icon circle:not(.icon-dot) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.social-icon .icon-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-icon .icon-dot {
  fill: currentColor;
}

.social-arrow {
  color: #888;
  font-size: 11px;
}