.viewer { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); overflow: hidden; margin-bottom: var(--sec); scroll-margin-top: 90px; }
.v-stage { position: relative; min-height: 520px; background: radial-gradient(90% 90% at 40% 30%, #f8fbfe, #dfe8f2); }
.v-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .2s ease; }
.v-stage canvas.dim { opacity: 0; }
.v-tabs { position: absolute; z-index: 2; left: 16px; top: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.v-tabs button { pointer-events: auto; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  padding: 9px 16px; border-radius: 999px; color: var(--navy); background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px -4px rgba(14, 27, 62, .25); transition: background .2s, color .2s; }
.v-tabs button:hover { background: #fff; }
.v-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.v-hint { position: absolute; left: 18px; bottom: 12px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }
.v-side { position: relative; display: flex; flex-direction: column; }
/* 手順の説明が開いても、行の高さ（＝3Dの画面の大きさ）を変えない */
@media (min-width: 901px) { .v-side { height: 0; min-height: 100%; overflow: auto; } }
.v-in { padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; flex: 1; }
.v-side .en { margin: 0 0 4px; font-size: 14px; color: var(--sky); }
.v-side h2 { margin: 0 0 16px; font-size: var(--t-h3); line-height: 1.5; letter-spacing: .04em; }
.steps { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: s; display: grid; gap: 6px; }
.steps li { counter-increment: s; position: relative; padding: 10px 12px 10px 48px; border-radius: 14px; cursor: pointer; transition: background .25s; }
.steps li::before {
  content: counter(s); position: absolute; left: 12px; top: 11px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 700 14px/1 var(--en); background: var(--bg); color: var(--muted); transition: .25s;
}
.steps b { display: block; font-size: 15px; line-height: 1.6; }
.steps span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .35s; }
.steps li.on { background: var(--sky-soft); }
.steps li.on::before { background: var(--blue); color: #fff; }
.steps li.on span { max-height: 8em; }
.v-ctrl { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }

.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.tl { background: #fff; border-radius: var(--r-md); padding: 22px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tl h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: .04em; }
.tl p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.8; }
.tl .refs { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl .refs a { font: 600 14px/1 var(--en); letter-spacing: .04em; color: var(--blue); text-decoration: none; padding: 6px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.tl .refs a:hover { background: var(--sky-soft); }
.tl .refs a.chip { font-size: 12.5px; font-weight: 700; font-family: inherit; background: var(--navy); color: #fff; box-shadow: none; padding: 7px 12px; }
.tl .refs a.chip:hover { background: var(--blue); }

@media (max-width: 900px) {
  .viewer { grid-template-columns: 1fr; }
  .v-stage { min-height: 380px; }
  .v-tabs { left: 12px; right: 12px; top: 12px; gap: 5px; }
  .v-tabs button { font-size: 12px; padding: 7px 11px; letter-spacing: .02em; }
}