.crystal-viewer {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: 280px;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.crystal-viewer:focus-visible {
  outline: 2px solid #087f86;
  outline-offset: -4px;
  border-radius: inherit;
}

.viewer-canvas {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  touch-action: none;
  cursor: grab;
}

.viewer-canvas:active { cursor: grabbing; }
.crystal-viewer--compact .viewer-canvas { cursor: default; }
.crystal-viewer--compact { min-height: 200px; }

.viewer-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4%;
}

.viewer-canvas[hidden],
.viewer-fallback[hidden],
.viewer-interaction-hint[hidden] { display: none; }

.viewer-interaction-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  color: #527370;
  background: rgb(246 252 249 / 82%);
  border: 1px solid rgb(39 100 94 / 10%);
  padding: 8px 12px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: 0.015em;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.viewer-interaction-hint svg { flex: 0 0 auto; width: 16px; height: 16px; }

.viewer-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .viewer-interaction-hint { bottom: 12px; padding: 7px 10px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .crystal-viewer *, .crystal-viewer *::before, .crystal-viewer *::after { animation: none !important; }
}

/* The crystal studio keeps the scientific metadata beside a quiet rendering stage. */
.explorer { grid-template-columns: minmax(0, 1fr) 310px; box-shadow: 0 16px 50px -28px #264b3a35; }
.explorer-stage { min-height: 650px; background-color: #f6faf6; background-image: radial-gradient(ellipse at 50% 40%, #fff 0%, #eef5ef55 60%, #e8f0e9aa 100%), linear-gradient(#afc6b820 1px, transparent 1px), linear-gradient(90deg, #afc6b820 1px, transparent 1px); background-size: auto, 36px 36px, 36px 36px; transition: background-color .25s; }
.explorer-stage::after { background: radial-gradient(ellipse at center, transparent 35%, #edf4ee80 100%); }
.explorer-stage-top { align-items: center; }
.explorer-stage-top > span:first-child { display: flex; align-items: center; gap: 8px; }
.live-specimen-dot { width: 5px; height: 5px; border-radius: 50%; background: #29998c; box-shadow: 0 0 0 4px #29998c13; }
.explorer-stage-top #case-id { padding: 5px 8px; border: 1px solid #65807222; border-radius: 4px; }
.explorer-stage .crystal-viewer { inset: 48px 0 64px; }
.explorer-stage-bottom { flex-wrap: wrap; row-gap: 3px; padding: 13px 22px; }
.stage-actions { display: flex; gap: 8px; margin-left: auto; }
.stage-actions .icon-text-button { font-size: 11px; padding: 7px 6px; white-space: nowrap; border-radius: 4px; }
.stage-actions .icon-text-button:hover { background: #057f7a0a; }
.stage-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.explorer-stage[data-theme="dark"] { background-color: #111f2a; background-image: radial-gradient(ellipse at 50% 38%, #284553 0%, #172c3877 55%, #10212c 100%), linear-gradient(#87b2b50a 1px, transparent 1px), linear-gradient(90deg, #87b2b50a 1px, transparent 1px); }
.explorer-stage[data-theme="dark"]::after { background: radial-gradient(ellipse at center, transparent 35%, #0b1b2580 100%); }
.explorer-stage[data-theme="dark"] .explorer-stage-top, .explorer-stage[data-theme="dark"] .interaction-hint, .explorer-stage[data-theme="dark"] .icon-text-button { color: #bbd5d4; }
.explorer-stage[data-theme="dark"] #case-id { border-color: #bbd5d433; }
.explorer-stage[data-theme="dark"] .live-specimen-dot { background: #83d9c5; box-shadow: 0 0 0 4px #83d9c512; }
.explorer-stage[data-theme="dark"] .icon-text-button:hover { background: #a9dbc811; color: #fff; }
.crystal-details { padding: 25px 24px 22px; }
.crystal-details .eyebrow { margin-bottom: 10px; }
.crystal-details h3 { font-size: 32px; }
.sample-facts { margin: 17px 0 15px; padding: 10px 0; }
.element-legend { margin-top: 14px; }
.control-label { font: 600 11px var(--body); color: #3d5c50; }
.representation-controls { border: 0; padding: 0; margin: 21px 0 0; min-width: 0; }
.representation-controls legend { padding: 0; margin-bottom: 9px; }
.representation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.representation-grid button { display: flex; align-items: center; gap: 7px; background: #f8faf7; color: #61776a; border: 1px solid #dce5dd; border-radius: 5px; min-height: 39px; padding: 5px 8px; font-size: 11px; text-align: left; transition: border-color .15s, background .15s; }
.representation-grid button:hover { border-color: #74a396; background: #eff5ef; }
.representation-grid button[aria-pressed="true"] { color: #057f7a; background: #eaf4ef; border-color: #76a99b; box-shadow: inset 0 0 0 .5px #76a99b; font-weight: 600; }
.representation-grid svg { width: 25px; height: 24px; flex: 0 0 25px; overflow: visible; }
.representation-grid svg circle { fill: currentColor; stroke: #fff; stroke-width: 1.2; }
.representation-grid svg path { fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-note { color: #7a8a80; font-size: 9px; line-height: 1.5; margin-top: 7px; }
.studio-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.studio-switch { display: flex; padding: 2px; background: #f0f4ef; border-radius: 5px; }
.studio-switch button { display: flex; align-items: center; gap: 5px; border: 0; padding: 5px 8px; border-radius: 3px; background: transparent; color: #6b7f73; font-size: 10px; }
.studio-switch button[aria-pressed="true"] { background: white; color: #224f43; box-shadow: 0 1px 3px #2545351a; }
.studio-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #acbfb3; }
.studio-swatch.light { background: #edf4ee; }
.studio-swatch.dark { background: #1c3542; border-color: #1c3542; }
.viewer-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; margin: 18px 0 16px; font-size: 11px; }
.viewer-options input { width: 14px; height: 14px; }
.viewer-options label { gap: 7px; }
.display-settings { border-top: 1px solid #e1e8e0; margin-bottom: 19px; }
.display-settings summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 0; cursor: pointer; font-size: 11px; color: #526e5e; list-style: none; }
.display-settings summary::-webkit-details-marker { display: none; }
.display-settings summary > span { font-size: 16px; font-weight: 300; }
.display-settings[open] summary > span { transform: rotate(45deg); }
.display-settings-body { display: grid; gap: 15px; padding-top: 16px; }
.range-control { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 11px; color: #526e5e; }
.range-control output { font: 10px var(--mono); color: #789082; }
.range-control input { grid-column: 1 / -1; width: 100%; accent-color: #057f7a; margin: 0; cursor: pointer; }
.projection-control { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: #526e5e; }
.projection-control select { max-width: 145px; border: 1px solid #d4dfd5; border-radius: 4px; background: #f8faf7; padding: 7px; color: #315848; font: inherit; }
.representation-grid button:disabled, .studio-switch button:disabled, .stage-actions button:disabled { opacity: .4; cursor: default; }
.display-settings input:disabled, .display-settings select:disabled { opacity: .4; }
.download-button { margin-top: auto; }
@media (max-width: 1000px) and (min-width: 621px) {
  .explorer { grid-template-columns: minmax(0, 1fr) 280px; }
  .crystal-details { padding-inline: 20px; }
  .explorer-stage-bottom { padding-inline: 14px; }
  .explorer-stage-bottom .interaction-hint { font-size: 10px; width: 100%; }
  .stage-actions { margin-left: 0; }
}
@media (max-width: 620px) {
  .explorer { grid-template-columns: 1fr; }
  .explorer-stage { min-height: 405px; }
  .explorer-stage .crystal-viewer { inset: 48px 0 65px; }
  .explorer-stage-top { padding: 18px; }
  .explorer-stage-bottom { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 9px 16px 11px; }
  .stage-actions { grid-row: 1; margin-left: 0; justify-content: flex-end; }
  .explorer-stage-bottom .interaction-hint { grid-row: 2; text-align: right; font-size: 9px; }
  .stage-actions .icon-text-button { font-size: 10px; }
  .crystal-details { display: flex; padding: 23px; }
  .crystal-details h3 { font-size: 32px; }
  .representation-controls { margin-top: 19px; }
  .representation-grid button { min-height: 43px; font-size: 12px; padding-inline: 11px; gap: 9px; }
  .viewer-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .display-settings { margin-bottom: 20px; }
  .download-button { margin-top: 0; }
  .copy-crystal { margin-top: 13px; padding: 0; align-self: flex-start; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .explorer-stage { transition: none; } }
/* Keep long Wyckoff templates compact, including when the helper follows them. */
.template-block #sample-template { font: 10px/1.8 var(--mono); overflow-wrap: anywhere; }
.crystal-details .template-block .mono { line-height: 1.5; }
.crystal-details .template-hint { font-size: 9px; line-height: 1.5; margin-top: 5px; }
.crystal-details .sample-facts { line-height: 1.5; }
.crystal-details .sample-facts > div { padding-block: 3px; }
.representation-controls { margin-top: 16px; }
.representation-controls .control-label { line-height: 1.3; }
.representation-grid button { line-height: 1.4; }
.studio-control { margin-top: 14px; }
.viewer-options { line-height: 1.4; gap: 9px 8px; margin-block: 16px 14px; }
.display-settings summary { line-height: 1.5; }
@media (max-width: 620px) { .template-block #sample-template { font-size: 11px; } }