/* RotaKit — viewer styles */
.rotakit{
	position:relative;
	width:100%;
	background:transparent;
	user-select:none;
	-webkit-user-select:none;
}
.rotakit-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;
}
.rotakit.rotakit-grab .rotakit-stage{cursor:grabbing}
.rotakit-cv{position:absolute;inset:0;width:100%;height:100%;display:block}

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

.rotakit-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;
}
.rotakit-hint.rotakit-gone{opacity:0}