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 { 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); }

.ph { display: block; width: 100%; height: auto; color: var(--color-tertiary-background); }

@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-ph .cursor-pointer { pointer-events: auto; }
@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 chat-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

@keyframes dot-jump {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-0.3em); }
}
.dots i { display: inline-block; font-style: normal; margin: 0 0.1em; animation: dot-jump 1s infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }

@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; }
#stage, .pin { transition: filter .3s ease; }
.dimmed { filter: blur(calc(var(--base-size) * 9)); pointer-events: none; }

.diff-add { background: color-mix(in srgb, var(--color-positive) 12%, transparent); }
.diff-del { box-shadow: inset 0 2px 0 var(--color-negative); }

.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); 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; }
#messages.collapsed > .column { align-items: center; }
#messages.collapsed > .column:not(:last-child) { display: none; }

.rail-foot { border-top: 1px solid var(--color-secondary-background); }
.rail-card { max-height: 100%; }
.chat-when { font-variant-numeric: tabular-nums; }
#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; }
#messages { opacity: 0; }
body.chatting #chatarea { visibility: visible; }
body.chatting #messages { opacity: 1; }

.pick .chat-box { opacity: .5; pointer-events: auto; transition: transform .15s; }
.pick .chat-box:hover { opacity: 1; }
.chat-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; margin: 1px; }
.chat-box.finished { transform: scale(1.4); }
.chat-box.busy     { animation: chat-throb 1.6s ease-in-out infinite; }
@keyframes chat-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(.6); } }
[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: transform .12s ease;
}
.avatar-dot:hover, .avatar-dot.over {
  transform: scale(2);
  z-index: 1;
}
.avatar-letter {
  display: block;
}
.avatar-dot .avatar-letter {
  display: none;
}
.avatar-dot:hover .avatar-letter, .avatar-dot.over .avatar-letter {
  display: block;
}
.avatar-up {
  display: none;
}
.avatar-mine:not(:has(.avatar-img)):hover .avatar-letter {
  display: none;
}
.avatar-mine:not(:has(.avatar-img)):hover .avatar-up {
  display: block;
}
.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: color-mix(in srgb, var(--select, #0D99FF) 16%, transparent);
}

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, .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 {
  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; }