/* 3D sketch page — builds on style.css */
body.viewer-page { overflow: hidden; }
.viewer { position: fixed; inset: var(--head) 0 0 0; background: #fff; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#gl:active { cursor: grabbing; }

.pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pin {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: #fff; color: var(--ink); border: 1px solid var(--ink);
  font-size: 12px; font-weight: 700; line-height: 1; will-change: transform;
  transition: background .2s, color .2s, border-color .2s;
}
.pin:hover, .pin.is-on { background: #d93b38; border-color: #d93b38; color: #fff; }

.v-title { position: absolute; left: 0; top: 0; padding: 22px 60px 34px var(--pad); max-width: min(520px, 70vw); pointer-events: none; background: radial-gradient(ellipse at 30% 40%, #fff 55%, rgba(255,255,255,0) 100%); }
.v-num { display: block; font-weight: 700; line-height: .9; font-size: 44px; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.3px #d93b38; margin-bottom: 8px; }
.v-title h1 { font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; letter-spacing: -.045em; }
.v-title p { margin-top: 6px; font-size: 14px; color: var(--mute); }

.v-tools { position: absolute; right: var(--pad); top: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.v-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; border: 1px solid var(--ink); background: rgba(255, 255, 255, .92); }
.v-group button { padding: 8px 14px; font-size: 13.5px; border-right: 1px solid var(--line); transition: background .2s, color .2s; }
.v-group button:last-child { border-right: 0; }
.v-group button:hover { background: #f0f0ee; }
.v-group button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.v-group [data-toggle][aria-pressed="true"] { background: var(--ink); color: #fff; }

.v-card { position: absolute; left: var(--pad); bottom: 64px; width: min(360px, calc(100vw - 2 * var(--pad))); background: #fff; border: 1px solid var(--ink); padding: 18px 20px 20px; }
.v-card[hidden] { display: none; }
.card-n { display: block; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px #d93b38; }
.card-t { margin-top: 8px; font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -.03em; }
.card-d { margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
.card-x { position: absolute; right: 8px; top: 6px; padding: 6px 8px; font-size: 14px; color: var(--mute); }
.card-x:hover { color: var(--ink); }

.v-note { position: absolute; left: var(--pad); right: var(--pad); bottom: 16px; font-size: 12.5px; color: var(--mute); pointer-events: none; max-width: 70ch; }

.v-fallback { position: absolute; inset: 0; background: #fff; display: grid; place-content: center; gap: 14px; padding: var(--pad); text-align: center; }
.v-fallback[hidden] { display: none; }
.v-fallback img { max-width: min(900px, 100%); margin-inline: auto; }

@media (max-width: 720px) {
  .v-title { padding-top: 14px; max-width: 62vw; }
  .v-num { font-size: 32px; }
  .v-title p { display: none; }
  .v-tools { top: auto; bottom: 96px; left: var(--pad); right: var(--pad); align-items: stretch; }
  .v-group { justify-content: stretch; }
  .v-group button { flex: 1; padding: 9px 6px; font-size: 12.5px; }
  .v-card { bottom: 210px; }
  .v-note { font-size: 11.5px; bottom: 10px; }
}