/* INFINITY FIELD — isolated component styles. No global selectors. */
.tmm-field {
  --field-paper: #f7fbf7;
  --field-ink: #173d32;
  --field-accent: #137475;
  position: relative;
  isolation: isolate;
  background: var(--field-paper);
}
.tmm-field[data-field-theme="forest"] {
  --field-paper: #071e18;
  --field-ink: #edf8ee;
  --field-accent: #a7e4ad;
}
.tmm-field__art {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 23% 19%, #a0d9aa26, transparent 43%),
    radial-gradient(ellipse at 81% 26%, #9cd4ba24, transparent 41%);
}
.tmm-field__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 68%, var(--field-paper));
}
.tmm-field__canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 900px;
}
/* This small SVG is also the no-JavaScript / no-canvas fallback. */
.tmm-field__fallback {
  position: absolute;
  inset: 32px 0 auto;
  width: 100%;
  height: 260px;
  color: var(--field-accent);
  opacity: .23;
}
.tmm-field[data-field-ready] .tmm-field__fallback { display: none; }
.tmm-field__motion {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .35rem;
  background: var(--field-paper);
  color: var(--field-ink);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.tmm-field__motion:focus-visible { outline: var(--focus); outline-offset: 4px; }
.tmm-field__motion[hidden] { display: none; }
@media (max-width: 600px) {
  .tmm-field__fallback { top: 20px; height: 190px; }
}
@media (forced-colors: active) {
  .tmm-field__art { display: none; }
}