/* Structure shared by every style direction: reset, the hero/canvas/scene contract, the motion button's
   icon swap and the sign-up dialog's mechanics. Each direction's style.css supplies the look and the
   placement. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Tabler outline icons. */
.icon {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* The yield theorem mark: square in --mark-bg, dots in --mark-dot. */
.lockup { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn { white-space: nowrap; }
/* Narrow phones: the nav keeps the logo and the call to action only. */
@media (max-width: 480px) { .nav-links > a { display: none; } }
.mark { display: block; flex: none; width: 22px; height: 22px; }
.mark rect { fill: var(--mark-bg, currentColor); }
.mark circle { fill: var(--mark-dot, var(--ground)); }

/* The canvas covers the hero; the engine draws the scene into [data-scene]'s box. */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.field { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; }
.scene { pointer-events: none; }
.scene > * { pointer-events: auto; }

.tag-button { position: relative; cursor: pointer; }
.tag-button .icon-play,
.tag-button[data-paused="true"] .icon-pause { display: none; }
.tag-button[data-paused="true"] .icon-play { display: block; }

.signup-step { display: flex; flex-direction: column; gap: 16px; }
.signup-step[hidden], .field-error[hidden] { display: none; }
.signup form { display: flex; flex-direction: column; gap: 12px; }
.signup input, .signup select { width: 100%; }
.signup h2 { outline: none; }
.dialog-close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.field-error { display: flex; align-items: center; gap: 7px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #e5484d; }

@media (forced-colors: active) {
  .mark rect { fill: CanvasText; }
  .mark circle { fill: Canvas; }
}