/* Simple Spin 360 — viewer styles */
.sspin{
	position:relative;
	width:100%;
	background:transparent;
	user-select:none;
	-webkit-user-select:none;
}
.sspin-stage{
	position:relative;
	width:100%;
	aspect-ratio:1/1;
	overflow:hidden;
	border-radius:10px;
	background:transparent;
	cursor:grab;
	/* vertical swipes scroll the page; horizontal drags spin */
	touch-action:pan-y;
}
.sspin.sspin-grab .sspin-stage{cursor:grabbing}
/* while zoomed the viewer pans in both axes, so it claims all touch input */
.sspin.sspin-zoomed .sspin-stage{touch-action:none}
.sspin:fullscreen{display:flex;flex-direction:column;background:var(--sspin-fsbg,#fff);padding:20px}
.sspin:fullscreen .sspin-stage{flex:1;min-height:0;aspect-ratio:auto;border-radius:0}
.sspin:fullscreen .sspin-ring{width:50%;min-width:300px;margin-left:auto;margin-right:auto}
.sspin-cv{position:absolute;inset:0;width:100%;height:100%;display:block}

.sspin-load{
	position:absolute;inset:0;display:grid;place-items:center;
	transition:opacity .4s;
}
.sspin-load.sspin-gone{opacity:0;pointer-events:none}
.sspin-load-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.sspin-load-txt{
	font:11px/1 monospace;letter-spacing:.18em;text-transform:uppercase;
	color:#888;
}
.sspin-bar{width:140px;height:2px;background:rgba(128,128,128,.2);border-radius:2px;overflow:hidden}
.sspin-bar i{display:block;height:100%;width:0%;background:var(--sspin-accent,#C8623A);transition:width .12s}

.sspin-fs{
	position:absolute;top:12px;right:12px;
	width:36px;height:36px;border-radius:9px;
	border:1px solid rgba(0,0,0,.12);
	background:rgba(255,255,255,.7);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	display:grid;place-items:center;cursor:pointer;padding:0;
	color:#333;transition:background .15s;
}
.sspin-fs:hover{
	background:var(--sspin-accent,#C8623A);
	border-color:var(--sspin-accent,#C8623A);
	color:#fff;
}
.sspin-fs:focus-visible{outline:2px solid var(--sspin-accent,#C8623A);outline-offset:2px}
.sspin:fullscreen .sspin-fs{
	background:var(--sspin-accent,#C8623A);
	border-color:var(--sspin-accent,#C8623A);
	color:#fff;
}
.sspin-fs svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.sspin-badge{
	position:absolute;right:12px;bottom:12px;
	font:700 10px/1 monospace;letter-spacing:.16em;
	padding:5px 9px;border-radius:5px;
	opacity:0;transition:opacity .25s;pointer-events:none;
}
.sspin-badge.sspin-loading{opacity:1;background:rgba(255,255,255,.7);color:#555}
.sspin-badge.sspin-hd{opacity:1;background:var(--sspin-accent,#C8623A);color:#fff}

.sspin-hint{
	position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
	font:11px/1 monospace;letter-spacing:.12em;text-transform:uppercase;
	color:#555;background:rgba(255,255,255,.7);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	padding:7px 13px;border-radius:99px;pointer-events:none;
	transition:opacity .5s;white-space:nowrap;
}
.sspin-hint.sspin-gone{opacity:0}

/* ---- degree scrubber ---- */
.sspin-ring{
	margin-top:14px;padding:8px 2px 2px;
	cursor:ew-resize;touch-action:none;
}
.sspin-ticks{display:flex;justify-content:space-between;align-items:flex-end;height:24px}
.sspin-ticks span{
	width:1.5px;height:11px;border-radius:1px;
	background:var(--sspin-base,#808080);opacity:.35;
	transition:height .12s,background .12s,opacity .12s;
}
.sspin-ticks span.sspin-on{background:var(--sspin-accent,#C8623A);opacity:1;height:24px}
.sspin-ticks span.sspin-near{opacity:.7;height:17px}
.sspin-ring-label{
	margin-top:8px;display:flex;justify-content:space-between;
	font:10.5px/1 monospace;letter-spacing:.14em;color:var(--sspin-base,#808080);
}