.sh3d-canvas { transition: filter 300ms, transform 300ms; }
.sh3d.finding .sh3d-canvas { filter: blur(14px) brightness(0.9); transform: scale(1.04); }
.sh3d.finding .sh3d-bar { top: var(--sh3d-top, 4.5rem); bottom: auto; padding-top: 0.75rem; }
.sh3d.finding :is(.sh3d-go, .sh3d-hint, .sh3d-peek, .sh3d-help, .sh3d-keyhelp) { display: none; }
body:has(.sh3d.finding) .footer { opacity: 0; visibility: hidden; }
.sh3d-canvas { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; display: block; }
.sh3d.on .sh3d-list { position: fixed; inset: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; white-space: nowrap; }
html.js .sh3d:not(.on):not(.fail) .sh3d-list { visibility: hidden; }
html.js .sh3d:not(.fail) .sh3d-list .thumb { display: none; }
.sh3d-stage { position: fixed; left: 0; right: 0; top: var(--sh3d-top, 0px); bottom: 0; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.main:has(> .sh3d.on) { padding-bottom: 0; }
html:has(.sh3d.on), body:has(.sh3d.on) { overflow: hidden; overscroll-behavior: none; }
body:has(.sh3d.on) .footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; pointer-events: none; transition: opacity 250ms, visibility 250ms; }
body:has(.sh3d.on) .footer-inner { padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 0.35rem); justify-content: center; gap: 0.25rem 1rem; font-size: var(--t-xs); }
body:has(.sh3d.on) .footer-inner > * { pointer-events: auto; }
body:has(.sh3d.on:not(.lit)) .footer, body:has(.sh3d-bar.holding) .footer { opacity: 0; visibility: hidden; }

.sh3d-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none;
  padding: 0.5rem 16px calc(env(safe-area-inset-bottom, 0px) + 1.9rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  transition: opacity 250ms, visibility 250ms;
}
.sh3d.on:not(.lit) .sh3d-bar, .sh3d-bar.holding { opacity: 0; visibility: hidden; }
.sh3d-bar::before {
  content: ""; position: absolute; inset: -1.5rem 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--desk) 3rem);
}
.sh3d.finding .sh3d-bar::before { display: none; }
.sh3d-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; pointer-events: auto; max-width: 100%; }
.sh3d-q { width: min(16rem, calc(100vw - 32px)); }
@media (max-width: 640px) {
  .sh3d-tools { flex-wrap: nowrap; width: 100%; }
  .sh3d-q { flex: 1 1 auto; width: auto; min-width: 0; max-width: 16rem; }
}
.sh3d-found { font: 400 var(--t-xs) / 1 var(--font-code); color: var(--ink-3); }
.sh3d.finding .sh3d-found { font-size: var(--t-sm); color: var(--accent); }
.sh3d-hint {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1rem; max-width: 100%;
  font: 400 var(--t-xs) / 1.4 var(--font-ui); color: var(--ink-2);
}
.sh3d-hint span { white-space: nowrap; }
.sh3d-hint .count { font-family: var(--font-code); color: var(--accent); }
.sh3d-help { min-width: 2.2rem; font-family: var(--font-code); }
@media (pointer: coarse) { .sh3d-help, .sh3d-keyhelp { display: none; } }
.sh3d-keyhelp {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; max-width: min(36rem, 100%);
  padding: 0.5rem 0.85rem; border-radius: 8px; background: var(--face); box-shadow: 0 0 0 1px var(--line), 0 6px 18px var(--drop-far);
  font: 400 var(--t-xs) / 1.4 var(--font-ui); color: var(--ink-2);
}
.sh3d-keyhelp span { white-space: nowrap; }
.sh3d-keyhelp kbd {
  font: 400 0.72rem / 1 var(--font-code); color: var(--ink); padding: 0.18rem 0.38rem; margin-right: 0.3rem;
  border-radius: 5px; background: var(--face); box-shadow: 0 1.5px 0 var(--edge-n-deep), 0 0 0 1px var(--line);
}
.sh3d-peek {
  margin: 0; max-width: min(36rem, 100%); padding: 0.4rem 0.75rem; border-radius: 8px; background: var(--face);
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px var(--drop-far);
  font: 500 var(--t-sm) / 1.35 var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh3d-peek small { margin-left: 0.5rem; font: 400 var(--t-xs) / 1 var(--font-code); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .sh3d-bar, .sh3d-canvas, body:has(.sh3d.on) .footer { transition: none; } }