/* AutoScroll control — theme by overriding these variables in your own stylesheet */
:root {
  --as-bg: #ffffff;
  --as-fg: #063B73;
  --as-accent: #159447;
  --as-accent-fg: #ffffff;
  --as-border: rgba(6, 59, 115, .14);
  --as-shadow: 0 14px 34px -12px rgba(6, 59, 115, .45);
  --as-size: 44px;          /* button size */
  --as-offset-x: 18px;      /* distance from the screen edge */
  --as-offset-y: 18px;      /* distance from the bottom */
  --as-radius: 999px;
  --as-speed: .35s;
}
.as-ctrl {
  position: fixed; z-index: 85; bottom: var(--as-offset-y);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; background: var(--as-bg); border: 1px solid var(--as-border);
  border-radius: var(--as-radius); box-shadow: var(--as-shadow);
  transition: opacity var(--as-speed) ease, transform var(--as-speed) ease;
}
.as-ctrl[hidden] { display: none; }
.as-right { right: var(--as-offset-x); }
.as-left { left: var(--as-offset-x); }
.as-btn {
  width: var(--as-size); height: var(--as-size); border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--as-fg);
  transition: background var(--as-speed) ease, color var(--as-speed) ease, transform var(--as-speed) ease;
}
.as-btn:hover { background: rgba(6, 59, 115, .08); }
.as-btn:active { transform: scale(.92); }
.as-btn:focus-visible { outline: 3px solid var(--as-accent); outline-offset: 2px; }
.as-btn.is-on { color: var(--as-accent); }
.as-play { background: var(--as-fg); color: #fff; box-shadow: 0 8px 18px -8px rgba(6, 59, 115, .7); }
.as-play:hover { background: var(--as-accent); color: var(--as-accent-fg); }
.as-ctrl.is-playing .as-play { background: var(--as-accent); color: var(--as-accent-fg); animation: as-pulse 1.8s ease-in-out infinite; }
.as-top { width: calc(var(--as-size) - 8px); height: calc(var(--as-size) - 8px); opacity: .75; }
.as-top:hover { opacity: 1; }
.as-dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.as-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--as-border); transition: background var(--as-speed) ease, transform var(--as-speed) ease; }
.as-dots i.on { background: var(--as-accent); transform: scale(1.15); }
.as-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes as-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(21, 148, 71, .45); } 50% { box-shadow: 0 0 0 8px rgba(21, 148, 71, 0); } }

/* Tablets and phones: smaller, and see-through until touched */
@media (max-width: 900px) {
  .as-ctrl { --as-size: 38px; --as-offset-x: 10px; --as-offset-y: 12px; opacity: .78; }
  .as-ctrl:hover, .as-ctrl:focus-within, .as-ctrl.is-playing { opacity: 1; }
}
@media (max-width: 480px) {
  .as-ctrl { --as-size: 36px; padding: 4px; gap: 2px; }
}
@media print { .as-ctrl { display: none !important; } }