@property --color-primary-background   { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --color-secondary-background { syntax: '<color>'; inherits: true; initial-value: #eee; }
@property --color-tertiary-background  { syntax: '<color>'; inherits: true; initial-value: #ddd; }
@property --color-primary-foreground   { syntax: '<color>'; inherits: true; initial-value: #111; }
@property --color-secondary-foreground { syntax: '<color>'; inherits: true; initial-value: #222; }
@property --color-tertiary-foreground  { syntax: '<color>'; inherits: true; initial-value: #333; }
@property --color-accent-primary       { syntax: '<color>'; inherits: true; initial-value: #0000cd; }
@property --color-accent-secondary     { syntax: '<color>'; inherits: true; initial-value: purple; }
html {
  transition:
    --color-primary-background .4s ease, --color-secondary-background .4s ease, --color-tertiary-background .4s ease,
    --color-primary-foreground .4s ease, --color-secondary-foreground .4s ease, --color-tertiary-foreground .4s ease,
    --color-accent-primary .4s ease, --color-accent-secondary .4s ease;
}

html, [data-theme=light] {
  --lift-1: 0 2px 8px 0 rgba(0, 0, 0, .06);
  --lift-2: 0 4px 16px 0 rgba(0, 0, 0, .09);
  --lift-3: 0 6px 24px 0 rgba(0, 0, 0, .12);
}
[data-theme=dark] {
  --lift-1: 0 2px 8px 0 rgba(0, 0, 0, .3);
  --lift-2: 0 4px 16px 0 rgba(0, 0, 0, .35);
  --lift-3: 0 6px 24px 0 rgba(0, 0, 0, .45);
}
.card-thumb { content-visibility: auto; contain-intrinsic-size: auto 300px; background-clip: padding-box; border-color: color-mix(in srgb, var(--color-primary-foreground) 8%, transparent); transition: box-shadow .15s ease, transform .15s ease; }
[data-pile] > * { transition: transform .25s ease; }
.hover-group:hover .card-thumb { box-shadow: var(--lift-1); transform: scale(1.01) rotate(.4deg); }
.hover-group:nth-child(even):hover .card-thumb { transform: scale(1.01) rotate(-.4deg); }
.hover-group:active .card-thumb { box-shadow: var(--lift-2); transform: scale(1.02); }
@keyframes card-dance {
  from { transform: scale(1.02) rotate(.5deg) translateY(-2px); }
  to   { transform: scale(1.02) rotate(-.5deg) translateY(0); }
}
.hover-group.on .card-thumb { animation: card-dance .45s ease-in-out infinite alternate; box-shadow: var(--lift-3); }
.hover-group.on:nth-child(even) .card-thumb { animation-delay: -.2s; animation-direction: alternate-reverse; }

.flying { z-index: 20; pointer-events: none; will-change: transform; }
.hover-group.flying .card-thumb { animation: none; transform: none; box-shadow: var(--lift-3); }
.flying[data-pile] > * { box-shadow: var(--lift-2); }
.hover-group .card-thumb.bare { border-color: transparent; box-shadow: none; }

.ph { display: block; width: 100%; height: auto; }

@keyframes focus-in { from { filter: blur(12px); } }
#ask:not(.hidden) { animation: focus-in .4s ease; }
#ask-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: 3.5rem; opacity: .35; color: #fff; white-space: pre; }
#ask-ph span { transition: opacity .5s, filter .5s; }
#ask-say { text-align: center; font-size: 1.25rem; opacity: .35; color: #fff; white-space: pre; padding-top: .5rem; }
#ask-say:empty { display: none; }
#ask-ph .cursor-pointer { pointer-events: auto; }
#ask-ph .caret { width: .05em; height: .9em; background: currentColor; animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@starting-style { #ask-ph span { opacity: 0; filter: blur(12px); } }
#ask:has(#ask-input:not(:placeholder-shown)) #ask-ph { opacity: 0; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

#messages table { width: 100%; margin: calc(var(--base-size) * 2) 0; }

@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: .35; } }
.moving { animation: breathe 1.8s ease-in-out infinite; }

@property --fill { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.filling {
  animation: none;
  transition: --fill .3s linear;
  mask-image: linear-gradient(to top, #000 calc(var(--fill) - 3%), rgb(0 0 0 / .3) calc(var(--fill) + 3%));
}
.pin { position: fixed; inset: 0; z-index: 9; display: flex; background: var(--color-primary-background); overflow: auto; pointer-events: auto; }
#stage, .pin { transition: filter .3s ease; }
.dimmed { filter: blur(calc(var(--base-size) * 9)); pointer-events: none; }
#stage:has(.pin) { filter: none; overflow: visible; }
#stage.dimmed .bike-grid > :not(:has(.pin)) { filter: blur(calc(var(--base-size) * 9)); }
body:has(.pin.dimmed) .bike-pins { filter: blur(calc(var(--base-size) * 9)); }
body:has(.pin.dimmed) .bike-pins > * { pointer-events: none !important; }
.bike-grid > :has(.pin) { z-index: 9; transform: none !important; }
#stage .card-thumb:has(> .pin) { content-visibility: visible; overflow: visible; transform: none; animation: none; }

.card-thumb:empty { aspect-ratio: 16 / 9; }
.moving > .card-thumb:empty, #stage.moving:empty { background: var(--color-secondary-background); }
.filling > .card-thumb:empty, #stage.filling:empty { background: linear-gradient(to top, var(--color-secondary-background) calc(var(--fill) - 3%), transparent calc(var(--fill) + 3%)); }

.chat-bg { border-radius: inherit; }

#messages > .align-end + .align-start,
#messages > .align-start + .align-end       { margin-top: calc(var(--base-size) * 3); }

.message-body > * { margin-block: 0; }
.message-body > blockquote { padding-left: calc(var(--base-size) * 2); border-left: 2px solid currentColor; opacity: .7; }

#messages { width: min(900px, 90vw); opacity: 0; transition: opacity 1.2s ease !important; }
body.typing #messages { opacity: 0 !important; transition-delay: 1s !important; }
#messages .message { width: fit-content; }
#messages:not(.collapsed) .message { max-width: 70%; }
#messages.collapsed { width: fit-content; max-width: min(900px, 90vw); }
#messages.collapsed > .column { margin-top: 0; align-items: center; }
#messages.collapsed > .column:not(:last-child) { display: none; }

.rail-foot { border-top: 1px solid var(--color-secondary-background); flex-shrink: 0; max-height: 50vh; }
#messages > .column { transition: opacity .32s ease, filter .32s ease, transform .32s ease; }
@starting-style {
  #messages > .column { opacity: 0; filter: blur(6px); transform: translateY(6px); }
}
#messages.no-entrance > .column { transition: none; }

#chatarea { visibility: hidden; }
body.chatting #chatarea { visibility: visible; }
body.chatting #messages { opacity: 1; }

.pick .chat-box { transition: transform .15s; }
.pick.done .hit { opacity: 1; }
.chat-box.finished { transform: scale(1.4); }
[data-arm] { color: var(--color-negative); }

.avatar {
  border-radius: 50%;
  background: var(--avatar-bg, var(--color-secondary-background));
  color: var(--avatar-ink, inherit);
  font-size: calc(var(--base-size) * 3);
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-dot {
  width: calc(var(--base-size) * 3);
  height: calc(var(--base-size) * 3);
  font-size: calc(var(--base-size) * 1.5);
  overflow: hidden;
  transition: scale .12s ease;
}
.avatar-dot:hover {
  scale: 2;
  z-index: 1;
}
.faces { display: flex; align-items: center; flex-shrink: 0; }
.faces > * + * { margin-inline-start: calc(var(--base-size) * -1); }
.avatar-letter {
  display: block;
}
.avatar-dot:not(:hover) :is(.avatar-letter, .avatar-eye) {
  display: none;
}
.bike-cursors {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
}
.bike-cursors > .avatar {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: auto;
  transition: translate .1s linear, scale .12s ease;
}
.avatar-eye {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #1a1a1a;
}
.eye-white {
  fill: #fff;
}
.eye-gaze {
  transition: transform .3s ease;
}
.eye-shut {
  display: none;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: .9;
  stroke-linecap: round;
}
.asleep .eye-open {
  display: none;
}
.asleep .eye-shut {
  display: inline;
}
.avatar-up {
  display: none;
}
.avatar-mine.wearing .avatar-letter {
  display: none;
}
.avatar-mine.wearing .avatar-up {
  display: block;
  position: relative;
  z-index: 1;
}
.rail-presence:has(.avatar-lead) > :not(.avatar-lead) {
  opacity: .35;
}
.avatar:has(.avatar-img) {
  background: none;
}
.avatar:has(.avatar-img) .avatar-letter {
  display: none;
}

.doc {
  width: 100%;
  max-width: calc(var(--base-size) * 180);
  margin-inline: auto;
  padding: calc(var(--base-size) * 10);
}

[data-block]:not([data-block="code"]) { white-space: pre-wrap; }

[data-block] {
  padding-inline: calc(var(--base-size) * 0.75);
  margin-inline: calc(var(--base-size) * -0.75);
  border-radius: calc(var(--base-size) * 0.75);
}
.bike-doc:focus { outline: none; }
.doc-span ::selection, .doc-span::selection { background: transparent; }
[data-block][data-bike-selected] {
  outline: none !important;
  background: var(--color-tertiary-background);
}

ul[data-block], ol[data-block] { margin-block: 0; }
[data-block] li.task { list-style: none; }
[data-block] li.task .check { display: inline-block; vertical-align: -0.05em; margin-inline-end: 0.4em; cursor: pointer; }
[data-block] li.task.done > [data-text] { opacity: 0.5; }

th { text-align: start; }
td, th { padding-inline: 0 calc(var(--base-size) * 4); }

[data-empty]:empty::before {
  content: attr(data-empty);
  color: var(--color-secondary-foreground);
  opacity: 0.35;
  pointer-events: none;
}

.doc-gallery > * { opacity: .5; transition: opacity .15s, border-color .15s; }
.doc-gallery > *:hover { opacity: 1; border-color: color-mix(in srgb, var(--color-primary-foreground) 30%, transparent); }

.ref-tag { border-radius: 100px; background: var(--color-tertiary-background); line-height: 1; padding: 2px 6px; }

.stage-scroll { overflow-y: auto; overflow-x: hidden; padding: calc(var(--base-size) * 8); }

.rail-open .rail-head:not(.hidden):has(+ .rail-body:not(.hidden)) { border-bottom: 1px solid var(--color-secondary-background); }

.pane { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; min-height: 0; }

.bike-grid { min-height: 100%; }
.bike-grid > * { position: absolute; transition: top .18s, left .18s; }
.bike-rail { top: 0; left: 0; padding: calc(var(--base-size) * 3); z-index: 9999; --gone: 1; width: min(calc(var(--base-size) * 89), 100vw); height: 100vh; opacity: 0; touch-action: pan-y; transition: opacity .2s, transform .2s; }
body.reaching .bike-rail, body.timing .bike-rail, body.stranger .bike-rail, .bike-rail.rail-open { opacity: 1; }
.bike-rail.rail-open { --gone: 0; }
.rail-chip { position: absolute; top: calc(var(--base-size) * 5 + 1px); left: calc(var(--base-size) * 6 + 1px); z-index: 1; }
.rail-presence { opacity: var(--gone); transition: opacity .32s ease; }
.rail-open .rail-presence { pointer-events: none; }
.rail-card {
  max-height: 100%;
  width: min(calc(var(--base-size) * 83), calc(100vw - var(--base-size) * 6));
  opacity: calc(1 - var(--gone));
  filter: blur(calc(var(--gone) * 6px));
  transform: translateX(calc(var(--gone) * var(--base-size) * -1.5));
  transition: opacity .32s ease, filter .32s ease, transform .32s ease;
}
.rail-drag, .rail-drag .rail-card, .rail-drag .rail-presence { transition: none; }
.bike-rail:not(.rail-open) { width: calc(var(--base-size) * 2); }
.bike-rail:not(.rail-open) .rail-card { pointer-events: none; }
.bike-rail, .bike-grid { user-select: none; -webkit-user-select: none; }
.bike-rail input, .bike-rail textarea, .bike-rail [contenteditable],
.bike-grid input, .bike-grid textarea, .bike-grid [contenteditable] { user-select: text; -webkit-user-select: text; }