/* The mark has room to breathe; the motion switch stays within reach. */
.serpents {
  color: #dce9e3;
  background: #091614;
  padding-bottom: clamp(38px, 5vw, 78px);
}
.serpents .section-top { border-color: #8fb5a92e; color: #96aaa1; }
.serpent-composition { gap: 8%; grid-template-columns: minmax(0, 1.18fr) minmax(270px, .82fr); padding-top: 22px; }
#serpent-stage { background: none; height: clamp(390px, 43vw, 630px); }
.serpent-copy { padding-block: 32px; }
.serpent-copy > .micro { color: #8baca0; font-size: 9px; }
.serpent-copy h2 { font-size: clamp(48px, 5.65vw, 88px); font-weight: 400; letter-spacing: -.055em; line-height: 1.04; margin-block: 28px; }
.serpent-copy h2 em { color: #9de6cf; }
.serpent-copy > p { color: #a9bcb3; font-size: 15px; max-width: 330px; }
.serpent-coordinate { bottom: 12px; color: #78958a; letter-spacing: .12em; }
.serpent-toolbar { margin-top: 30px; }
.serpent-toolbar .small-control { border-color: #739a8866; color: #d6e9de; background: transparent; padding: 14px 20px; }
.serpent-toolbar .small-control:hover { background: #b3e5cf0c; border-color: #a3d7c2; }
#serpent-status { color: #839d90; min-height: 18px; margin-top: 18px; font-size: 10px; }
.serpent-footnote { color: #799186; line-height: 1.7; margin-top: 8px; }

/* This control is outside the sticky header and every scrolling section. */
.motion.motion-dock {
  position: fixed;
  z-index: 2000;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 13px 18px;
  border: 1px solid #96d6c77a;
  border-radius: 100px;
  background: #10241feb;
  color: #d5f7ea;
  box-shadow: 0 3px 18px #00191024;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 600 10px/1.2 'Courier New', monospace;
  letter-spacing: .035em;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.motion-dock .motion-label { display: inline; white-space: nowrap; }
.motion-dock .motion-icon { width: 12px; font-size: 14px; line-height: 1; }
.motion-dock .motion-action { display: inline; padding-left: 11px; border-left: 1px solid #98d8c246; font-size: 8px; color: #8caf9f; white-space: nowrap; }
.motion-dock:hover { background: #1c392f; border-color: #c1f7db; }
.motion-dock:focus-visible { outline: 3px solid #66d9bf; outline-offset: 4px; }
.motion-dock[aria-pressed="true"] { background: #e8eee7f5; color: #24473a; border-color: #8da896; }
.motion-dock[aria-pressed="true"] .motion-action { color: #476757; border-color: #8cae9d66; }
.contact footer { padding-bottom: 88px; }

/* Native dialogs make page controls inert, so each has the same motion switch. */
.dialog-top .dialog-motion { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; white-space: nowrap; font-size: 9px; }
.dialog-top .dialog-motion .motion-label { display: inline; }
.dialog-top .dialog-motion .motion-icon { font-size: 12px; }
.dialog-top { gap: 12px; }
.project-dialog .dialog-top,
.rules-dialog .dialog-top { position: sticky; top: 0; z-index: 10; background: var(--paper, #eaf0e7); }
.revealed .notae-status { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 64px); }
.paused { scroll-behavior: auto; }
html:has(body.paused), body.paused .book-right { scroll-behavior: auto !important; }
body.paused *, body.paused *::before, body.paused *::after { transition-duration: 0s !important; animation-play-state: paused !important; }

@media (max-width: 760px) {
  .serpent-composition { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  #serpent-stage { height: clamp(320px, 98vw, 550px); }
  .serpent-copy { padding-top: 24px; }
  .serpent-copy h2 { font-size: clamp(48px, 12vw, 76px); margin-block: 20px; }
  .serpent-copy h2 br { display: initial; }
  .serpent-copy h2 em { display: inline; }
  .serpent-copy > p { max-width: 450px; font-size: 14px; }
  .motion.motion-dock { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); gap: 9px; padding: 12px 15px; }
  .motion-dock .motion-label { display: inline; }
  .dialog-top .dialog-motion { padding: 8px; font-size: 8px; gap: 6px; }
  .rules-dialog .dialog-top { flex-wrap: wrap; }
  .rules-dialog .dialog-top h2 { width: 100%; }
  .revealed .notae-status { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 64px); }
}
@media print { .motion-dock, .dialog-motion { display: none !important; } }