.grasp-viewer { --grasp-mint: #63d5ad; width: 100%; min-width: 0; padding: 16px; color: #e7efed; border: 1px solid rgba(116, 169, 151, .22); border-radius: 18px; background: linear-gradient(145deg, #101d22, #0a1117); box-sizing: border-box; }
.grasp-viewer__heading { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.grasp-viewer__eyebrow { color: #8ead9f; font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.grasp-viewer__name { color: #eef6f2; font-size: 19px; line-height: 1.35; font-weight: 620; }
.grasp-viewer__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #203c39; border-radius: 12px; background: radial-gradient(ellipse at 50% 65%, #1b3938, #091119 75%); }
.grasp-viewer__poster, .grasp-viewer__canvas, .grasp-viewer__axes { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.grasp-viewer__canvas { touch-action: none; cursor: grab; z-index: 3; outline-offset: -3px; }
.grasp-viewer__axes { z-index: 4; pointer-events: none; }
.grasp-viewer__canvas:active { cursor: grabbing; }
.grasp-viewer__poster[hidden] { display: none; }
.grasp-viewer__cube { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); font-size: 62px; font-weight: 200; color: #a0cfba; opacity: .24; pointer-events: none; }
.grasp-viewer__poster:not([hidden]) + .grasp-viewer__cube { display: none; }
.grasp-viewer__button { appearance: none; display: inline-flex; justify-content: center; align-items: center; min-height: 36px; margin: 0; padding: 6px 11px; border: 1px solid #344c49; border-radius: 7px; background: #182a2e; color: #c9d9d5; font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; }
.grasp-viewer__button:hover { background: #25433e; color: white; }
.grasp-viewer__button:focus-visible, .grasp-viewer__canvas:focus-visible { outline: 2px solid var(--grasp-mint); outline-offset: 3px; }
.grasp-viewer__button.is-selected { background: #20483d; color: #b8f2d7; border-color: #45846d; }
.grasp-viewer__start { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; white-space: nowrap; background: rgba(12, 36, 32, .94); color: #c5f5e2; padding: 9px 16px; border-color: #5c9c85; border-radius: 999px; font-size: 12px; box-shadow: 0 3px 20px #0005; }
.grasp-viewer.is-active .grasp-viewer__start, .grasp-viewer.is-active .grasp-viewer__cube { display: none; }
.grasp-viewer.is-loading .grasp-viewer__start { opacity: .7; cursor: progress; }
.grasp-viewer__toolbar { display: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.grasp-viewer.is-active .grasp-viewer__toolbar { display: flex; }
.grasp-viewer__poses, .grasp-viewer__controls { display: flex; gap: 4px; }
.grasp-viewer__controls .grasp-viewer__button { width: 36px; padding: 4px; font-size: 19px; }
.grasp-viewer__controls .grasp-viewer__expand { width: auto; padding-inline: 12px; font-size: 13px; }
.grasp-viewer-dialog { width: calc(100vw - 32px); height: calc(100dvh - 32px); max-width: none; max-height: none; padding: 0; border: 1px solid #53786b; border-radius: 16px; background: #0a1117; overflow: hidden; }
.grasp-viewer-dialog::backdrop { background: #071710b8; }
.grasp-viewer-dialog .grasp-viewer { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 0; width: 100%; height: 100%; }
.grasp-viewer-dialog .grasp-viewer__stage { flex: 1; min-height: 0; max-height: none; aspect-ratio: auto; }
.grasp-viewer-dialog .grasp-viewer__heading { margin-bottom: 0; }
.grasp-viewer-dialog .grasp-viewer__toolbar { margin-top: 0; }
.grasp-viewer__help { display: none; margin-top: 4px; color: #72968c; font-size: 10px; line-height: 1.5; }
.grasp-viewer.is-active .grasp-viewer__help { display: block; }
.grasp-viewer__status { margin: 7px 0 0; color: #bad6ca; font-size: 11px; line-height: 1.5; }
.grasp-viewer__status:empty { display: none; }
@media (max-width: 580px) { .grasp-viewer { padding: 12px; } }