.held {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  background: transparent; pointer-events: none; opacity: 0; visibility: hidden;
}
.held.finding .h-stage { padding-top: calc(var(--sh3d-top, 5rem) + 4.5rem); }
.held.stacked .h-card::before, .held.stacked .h-card::after {
  --mm: calc(100cqw / 127); content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); border-radius: calc(0.6 * var(--mm));
  box-shadow: 0 0 0 1px var(--line), 0 calc(1.2 * var(--mm)) calc(4 * var(--mm)) var(--drop-far);
}
.held.stacked .h-card::before { transform: translate(calc(2.2 * var(--mm)), calc(2 * var(--mm))) rotate(1.6deg); }
.held.stacked .h-card::after { transform: translate(calc(-1.6 * var(--mm)), calc(3.4 * var(--mm))) rotate(-1.2deg); }
.held.on { opacity: 1; visibility: visible; transition: opacity 120ms ease-out; }
.held.on * { visibility: inherit; }
.h-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding-top: 2.5rem; }
.h-card {
  container-type: inline-size; position: relative; flex: none; pointer-events: auto; cursor: pointer;
  width: min(36rem, calc(100vw - 32px - 2.5rem), calc((100vh - 12rem) * 127 / 104)); aspect-ratio: 127 / 104;
  touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent;
}
.h-frame { position: relative; flex: none; }
.h-side {
  position: absolute; top: 50%; z-index: 1; width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; padding: 0;
  display: grid; place-items: center; font: 400 1.25rem / 1 var(--font-ui); pointer-events: auto;
}
.h-prev { left: -1.25rem; }
.h-next { right: -1.25rem; }
.h-side:focus-visible { outline: 2px solid var(--edge); outline-offset: 3px; }
.h-card:focus-visible .h-flip { outline: 2px solid var(--edge); outline-offset: 6px; }
.h-slide { position: absolute; inset: 0; perspective: 160cqw; }
.h-flip {
  --mm: calc(100cqw / 127);
  position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.3, 0.7, 0.2, 1);
}
.h-flip.flipped { transform: rotateY(180deg); }
.h-flip.snap { transition: none; }
.h-front, .h-back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: calc(0.6 * var(--mm)); box-shadow: 0 calc(0.1 * var(--mm)) calc(0.8 * var(--mm)) var(--drop-near), 0 calc(1.2 * var(--mm)) calc(4.8 * var(--mm)) var(--drop-far);
}
.h-front { background: var(--face); color: var(--ink); }
.h-back { background: var(--face); color: var(--ink); transform: rotateY(180deg); display: flex; flex-direction: column; padding: calc(5.5 * var(--mm)); gap: calc(2.6 * var(--mm)); overflow: hidden; }
.h-photo { position: absolute; left: 0; right: 0; top: 0; height: calc(66.5 * var(--mm)); margin: 0; overflow: hidden; background: var(--paper); border-radius: calc(0.6 * var(--mm)) calc(0.6 * var(--mm)) 0 0; display: grid; place-items: center; }
.h-photo span { font: 600 calc(13.5 * var(--mm)) / 1 var(--font-display); color: var(--ink-3); opacity: 0.7; }
.h-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms ease-out; }
.h-photo img.in { opacity: 1; }
.h-photo img.now { transition: none; }
.h-title {
  position: absolute; left: calc(5.08 * var(--mm)); right: calc(5.08 * var(--mm)); top: calc(70.2 * var(--mm)); margin: 0;
  font: 600 calc(6.03 * var(--mm)) / calc(7.94 * var(--mm)) var(--font-display); color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.h-meta {
  position: absolute; left: calc(5.08 * var(--mm)); right: calc(5.08 * var(--mm)); top: calc(97.2 * var(--mm)); transform: translateY(-50%);
  display: flex; align-items: center; gap: calc(3 * var(--mm)); font: 400 calc(4.13 * var(--mm)) / 1 var(--font-code); color: var(--ink-3); white-space: nowrap;
}
.h-stamp {
  max-width: calc(54 * var(--mm)); overflow: hidden; text-overflow: ellipsis; padding: calc(1.2 * var(--mm)) calc(1.9 * var(--mm));
  border: calc(0.5 * var(--mm)) solid var(--stamp); border-radius: calc(0.4 * var(--mm)); color: var(--stamp);
  font: 500 calc(3.81 * var(--mm)) / 1 var(--font-code); transform: rotate(-0.035rad);
}
.h-num { margin-left: auto; }
.h-tabs { position: absolute; bottom: 100%; right: calc(6 * var(--mm)); display: flex; gap: calc(2.5 * var(--mm)); }
.h-tabs button {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: calc(30 * var(--mm)); height: calc(8 * var(--mm)); display: grid; place-items: center; overflow: hidden; white-space: nowrap;
  background: var(--c); border-radius: calc(1.2 * var(--mm)) calc(1.2 * var(--mm)) 0 0;
  font: 700 calc(3.6 * var(--mm)) / 1 var(--font-ui); color: var(--ink);
}
.h-sticky {
  position: absolute; width: calc(18 * var(--mm)); height: calc(18 * var(--mm)); background: var(--sticky);
  left: calc(13 * var(--mm)); top: calc(13 * var(--mm)); transform: translate(-50%, -50%) rotate(0.1rad);
  box-shadow: 0 calc(0.3 * var(--mm)) calc(1.2 * var(--mm)) var(--drop-near);
}
.h-label { font: 600 calc(3.4 * var(--mm)) / 1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.h-btitle { margin: 0; font: 600 calc(5 * var(--mm)) / 1.3 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.h-text { flex: 1; min-height: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; font: 400 calc(4.6 * var(--mm)) / 1.5 var(--font-display); color: var(--ink); overflow-wrap: anywhere; touch-action: pan-y; }
.h-btags { font: 400 calc(3.6 * var(--mm)) / 1 var(--font-code); color: var(--ink-3); }
.h-also { font: 400 calc(3.4 * var(--mm)) / 1.3 var(--font-ui); color: var(--ink-3); }
.h-bar { flex: none; pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.75rem; padding: 0.5rem 0 1.25rem; max-width: 100%; }
.h-bar .key { font-family: var(--font-ui); text-decoration: none; white-space: nowrap; }
.h-bar .key:focus-visible, .h-bar .key:focus { outline: 2px solid var(--edge); outline-offset: 3px; }
.h-arch { font: 400 var(--t-xs) var(--font-ui); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .held.on { transition: none; }
  .h-flip { transition: none; }
  .h-photo img { transition: none; }
}