/* Sixteen authored views form a manually controlled 360 degree turnaround. */
.kado-spin{width:100%;min-width:0}
.kado-spin-stage{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:8px;user-select:none;-webkit-user-select:none}
.kado-spin-stage:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.kado-spin-fallback,.kado-spin-atlas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kado-spin-fallback{display:block;object-fit:contain;-webkit-user-drag:none}
.kado-spin-atlas{background-size:400% 400%;background-position:0 0;background-repeat:no-repeat}
.kado-spin-atlas[hidden],.kado-spin-controls[hidden]{display:none!important}
.kado-spin:not(.is-ready) .kado-spin-controls{display:none}
.kado-spin.is-ready .kado-spin-fallback{visibility:hidden}
.kado-spin.is-ready .kado-spin-stage{cursor:grab;touch-action:pan-y}
.kado-spin-stage.is-dragging{cursor:grabbing}
.kado-spin-controls{padding-top:18px}
.kado-spin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
#kado-spin-play,.kado-spin-angles button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:transparent;border:1px solid var(--button-outline);border-radius:6px;padding:10px 15px;color:var(--text);font-size:14px;line-height:1.35}
#kado-spin-play:hover,.kado-spin-angles button:hover{background:var(--elevated);border-color:var(--accent)}
#kado-spin-play[aria-pressed=true],.kado-spin-angles button[aria-pressed=true]{border-color:var(--accent);background:var(--elevated);color:var(--text)}
#kado-spin-play:disabled{cursor:default;opacity:.65}
#kado-spin-view{color:var(--muted);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
#kado-spin-angle{display:block;width:100%;height:44px;margin:9px 0 8px;cursor:ew-resize;accent-color:var(--accent)}
#kado-spin-angle:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.kado-spin-angles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kado-spin-angles button{padding-inline:8px;font-size:13px}
.kado-spin .kado-spin-hint{margin-top:14px;font-size:13px;line-height:1.6;text-align:center;color:var(--faint)}
@media(max-width:700px){.kado-spin-controls{padding-top:15px}.kado-spin-toolbar{gap:10px}#kado-spin-view{font-size:13px}.kado-spin-angles{gap:7px}.kado-spin .kado-spin-hint{font-size:12px}}
@media print{.kado-spin-controls,.kado-spin-hint,.kado-spin-atlas{display:none!important}.kado-spin.is-ready .kado-spin-fallback{visibility:visible}}
