/* ABC bounce explorer (js/widgets/abc3d.js) */
.cn-abc3d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cn-abc3d-view { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #eef0f5 80%); cursor: grab; }
.cn-abc3d-view:active { cursor: grabbing; }
.cn-abc3d-view canvas { display: block; width: 100% !important; height: 100% !important; }
.cn-abc3d-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 1.5rem; }
.cn-abc3d-hint { position: absolute; right: 10px; bottom: 8px; font-size: 1.15rem; color: #9aa0ad; pointer-events: none; }
.cn-abc3d-tags { position: absolute; inset: 0; pointer-events: none; }
.cn-abc3d-tag { position: absolute; transform: translate(-50%, -50%); font-family: "roboto-bold", sans-serif; font-size: 1.3rem; white-space: nowrap;
  text-shadow: 0 0 4px #fff, 0 0 2px #fff; transition: opacity .3s; }
.cn-abc3d-right { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.cn-abc3d-imgs { position: relative; width: 100%; aspect-ratio: 496 / 262; border-radius: 10px; overflow: hidden; background: #0d0000; transition: background .45s; }
.cn-abc3d-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; }
.cn-abc3d-imgs img.show { opacity: 1; }
@media (max-width: 800px) { .cn-abc3d-grid { grid-template-columns: 1fr; } }

/* two rows on the right: small ground truth above, reconstruction below (both cropped to the letter band) */
.cn-abc3d-right { justify-content: flex-start; gap: 10px; }
.cn-abc3d-gt { position: relative; width: 100%; aspect-ratio: 496 / 170; border-radius: 10px; overflow: hidden; background: #f4efe8; }
.cn-abc3d-gt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.cn-abc3d-imgs { aspect-ratio: 496 / 210; }
.cn-abc3d-imgs img { object-position: 50% 55%; }

/* shared button design (same as css/real3d.css); scoped under .cn-abc3d to beat the lab's button/button:focus rules */
.cn-abc3d .cn-xbtns { display: flex; gap: 8px; margin: 0 0 8px; flex-wrap: nowrap; }
.cn-abc3d .cn-xtoggles { margin-bottom: 14px; }
.cn-abc3d .cn-xbtn { flex: 1 1 0; min-width: 0; height: 44px; line-height: 1.15; margin: 0; padding: 0 10px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--c); color: var(--c); font-family: inherit; font-size: 1.45rem; font-weight: 600;
  text-transform: none; letter-spacing: normal; display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: 0;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.cn-abc3d .cn-xbtn i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); transition: background .15s; }
.cn-abc3d .cn-xbtn:hover, .cn-abc3d .cn-xbtn:focus { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
.cn-abc3d .cn-xbtn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.cn-abc3d .cn-xbtn.on, .cn-abc3d .cn-xbtn.on:hover, .cn-abc3d .cn-xbtn.on:focus { background: var(--c); color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 45%, transparent); }
.cn-abc3d .cn-xbtn.on i { background: #fff; }
.cn-abc3d .cn-xbtn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
@media (max-width: 700px) { .cn-abc3d .cn-xbtns { flex-wrap: wrap; } .cn-abc3d .cn-xbtn { flex: 1 1 calc(50% - 4px); } }
/* presets (grey, no dot) above the toggles; toggles show a check box -- identical to css/real3d.css */
.cn-abc3d .cn-xpresets { margin-bottom: 8px; }
.cn-abc3d .cn-xpre { height: 40px; font-size: 1.4rem; background: #f3f4f6; }
.cn-abc3d .cn-xtog i { width: 14px; height: 14px; border-radius: 4px; background: #fff; border: 1.5px solid var(--c); position: relative; }
.cn-abc3d .cn-xtog.on i { background: #fff; border-color: #fff; }
.cn-abc3d .cn-xtog.on i::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--c); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* small image labels above each image (shared look with css/real3d.css) */
.cn-abc3d .cn-imlbl { font-size: 1.3rem; line-height: 1.3; font-weight: 600; color: #4b5563; margin: 0 0 4px 2px; }

/* 3D view vertically centred against the two stacked images on the right */
.cn-abc3d-grid { align-items: center; }
.cn-abc3d-right { height: auto; }

/* bunny scene: ground truth and reconstruction side by side (both near-square), next to the 3D view */
.cn-abc3d[data-scene="bunny"] .cn-abc3d-grid { grid-template-columns: 1fr 1.15fr; }
.cn-abc3d[data-scene="bunny"] .cn-abc3d-right { flex-direction: row; gap: 10px; }
.cn-abc3d[data-scene="bunny"] .cn-abc3d-right > div { flex: 1 1 0; min-width: 0; }
.cn-abc3d[data-scene="bunny"] .cn-abc3d-gt { aspect-ratio: 1 / 1; background: #fff; border: 1px solid #eceef2; box-sizing: border-box; }
.cn-abc3d[data-scene="bunny"] .cn-abc3d-gt img { object-fit: contain; object-position: 50% 50%; padding: 8px; box-sizing: border-box; }
.cn-abc3d[data-scene="bunny"] .cn-abc3d-imgs { aspect-ratio: 1 / 1; background: #000; }
.cn-abc3d[data-scene="bunny"] .cn-abc3d-imgs img { object-fit: contain; object-position: 50% 50%; }
.cn-abc3d[data-scene="bunny"] .cn-imlbl { min-height: 2.6em; display: flex; align-items: flex-end; }
@media (max-width: 800px) { .cn-abc3d[data-scene="bunny"] .cn-abc3d-grid { grid-template-columns: 1fr; } }