/* The quiet line at the foot of the page, and the accessibility menu (a11y.js). Same night language: small,
   spaced letters, glass, a soft blur on arrival. Shared by the studio and /join. */
.foot { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 18px 0 26px; }
.foot a, .foot button { font: inherit; font-size: .68rem; font-weight: 400; letter-spacing: .16em; color: var(--muted); text-decoration: none; background: none; border: 0; padding: 4px 2px; margin: 0; border-radius: 4px; cursor: pointer; transition: color .3s cubic-bezier(.23, 1, .32, 1); }
.foot a:hover { color: var(--ink); }
.a11y-toggle { position: fixed; bottom: 18px; right: 18px; z-index: 21; width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--muted); border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: color .3s cubic-bezier(.23, 1, .32, 1), border-color .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s; }
html .a11y-toggle:hover, html .a11y-toggle[aria-expanded=true] { color: var(--ink); border-color: rgba(142, 162, 255, .6); box-shadow: 0 0 18px rgba(142, 162, 255, .35); background: color-mix(in srgb, var(--bg) 60%, transparent); }
@media (max-width: 640px) { .a11y-toggle { bottom: 12px; right: 12px; } .a11y { right: 12px; bottom: 58px; } }
.foot .dot { color: var(--line); font-size: .6rem; }
.foot-fixed { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; pointer-events: none; }
.foot-fixed > * { pointer-events: auto; }

.a11y { position: fixed; bottom: 66px; right: 18px; z-index: 20; width: min(248px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow: auto; transform-origin: bottom right;
  display: grid; gap: 0; padding: 12px; border-radius: 18px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(142, 162, 255, .06) inset;
  animation: a11y-in .5s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes a11y-in { from { opacity: 0; filter: blur(8px); transform: translateY(8px) scale(.97); } }
.a11y-title { margin: 2px 10px 6px; font-size: .66rem; font-weight: 500; letter-spacing: .24em; color: var(--muted); }
.a11y-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 7px 10px; border: 0; border-radius: 10px;
  font: inherit; font-size: .78rem; font-weight: 300; color: var(--ink); background: transparent; cursor: pointer; text-align: start; transition: background-color .25s; }
.a11y-opt:hover { background: rgba(238, 240, 255, .06); }
.a11y-opt[aria-pressed=true] { background: rgba(142, 162, 255, .14); }
.a11y-val { font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.a11y-opt[aria-pressed=true] .a11y-val { color: var(--ink); }
.a11y-opt[aria-pressed=true] .a11y-val::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8ea2ff; margin-inline-end: 7px; box-shadow: 0 0 10px #8ea2ff; vertical-align: 1px; }
.a11y-reset { margin: 4px 0 0; padding: 6px; border: 0; background: none; font: inherit; font-size: .7rem; letter-spacing: .08em; color: var(--muted); cursor: pointer; border-radius: 8px; }
.a11y-reset:hover { color: var(--ink); }
.a11y button:focus-visible, .foot :focus-visible { outline: 2px solid #8ea2ff; outline-offset: 2px; }

/* the choices */
html.a11y-size1 { font-size: 21px !important; }
html.a11y-size2 { font-size: 24px !important; }
html.a11y-contrast { --muted: rgba(238, 240, 255, .88) !important; --line: rgba(238, 240, 255, .5) !important; }
html.a11y-contrast #field, html.a11y-contrast .cursor-light { opacity: .45 !important; }
html.a11y-calm #field, html.a11y-calm .cursor-light { display: none !important; }
html.a11y-calm body { background: radial-gradient(60% 50% at 60% 60%, #0d1a5c, transparent 70%), radial-gradient(40% 40% at 25% 30%, #1a1150, transparent 70%), #01020a !important; }
html.a11y-calm .bg-logo img { transform: none !important; }
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 4px; }

/* The music button while the music waits for the first click: a slow breath of light (sound.js adds .waiting). */
html button.sound-toggle.waiting { color: var(--ink); animation: music-breathe 2.6s ease-in-out infinite; }
html button.sound-toggle.waiting::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(142, 162, 255, .55), rgba(142, 162, 255, 0) 68%); animation: music-halo 2.6s ease-in-out infinite; }
@keyframes music-breathe {
  0%, 100% { box-shadow: 0 0 6px rgba(142, 162, 255, .25); border-color: rgba(142, 162, 255, .35); background-color: rgba(142, 162, 255, .06); }
  50% { box-shadow: 0 0 28px 6px rgba(142, 162, 255, .6); border-color: rgba(185, 200, 255, .9); background-color: rgba(142, 162, 255, .24); } }
@keyframes music-halo { 0%, 100% { opacity: .2; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { html button.sound-toggle.waiting, html button.sound-toggle.waiting::before { animation: none; box-shadow: 0 0 18px rgba(142, 162, 255, .5); } }
html.a11y-calm button.sound-toggle.waiting { box-shadow: 0 0 18px rgba(142, 162, 255, .5); border-color: rgba(185, 200, 255, .9); }