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:has(.pick.on) .card-thumb { animation: card-dance .45s ease-in-out infinite alternate; box-shadow: var(--lift-3); }
.hover-group:nth-child(even):has(.pick.on) .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); }
.hover-group.flying:has(.pick.on) .card-thumb { animation: none; }
.flying[data-pile] > * { box-shadow: var(--lift-2); }

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

@keyframes ask-focus { from { filter: blur(12px); } }
#ask:not(.hidden) { animation: ask-focus .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; }
@starting-style { #ask-ph span { opacity: 0; filter: blur(12px); } }
#ask-ph span.out { 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); }

#messages { width: min(900px, 90vw); transition: opacity 1.2s ease, transform 0.4s 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 { align-items: center; }
#messages.collapsed > .column:not(:last-child) { display: none; }
#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; }

.chat-slot { position: relative; width: 12px; height: 12px; }
.chat-slot > * { position: absolute; transition: opacity .15s; }

.chat-dot {
  top: 3px; left: 3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}
.chat-dot.finished { opacity: 1; }
.chat-dot.busy     { opacity: 1; animation: chat-pulse 1.6s ease-in-out infinite; }

.chat-action { inset: 0; cursor: pointer; }
.chat-mark             { opacity: 0.45; }
.pick:hover .chat-mark { opacity: 0.9; }
.pick .chat-mark:hover { opacity: 1; }
.pick:has(.chat-action.armed) .chat-dot,
.pick:has(.chat-action.armed) .chat-mark { opacity: 0; }
.chat-action.armed { opacity: 1; filter: none; 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:has(.avatar-img) {
  background: none;
}
.avatar:has(.avatar-img) .avatar-letter {
  display: none;
}

.svg-editor-zoom {
  position: absolute;
  right: calc(var(--base-size) * 2);
  bottom: calc(var(--base-size) * 2);
  font-family: ui-monospace, monospace;
  font-size: calc(var(--base-size) * 3);
  color: var(--color-secondary-foreground);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity .2s;
}
.svg-editor-zoom.on { opacity: 0.5; }

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

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

[data-block]:empty::before,
[data-block] > p:only-child:empty::before {
  content: 'Write…';
  color: var(--color-secondary-foreground);
  opacity: 0.35;
  pointer-events: none;
}

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

.bike-grid { min-height: 100%; }
.bike-grid > * { position: absolute; }
.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; }