/**
 * ASCAND 3D Model Library — viewer styles.
 *
 * Themes such as Neve, Astra, Kadence, OceanWP and GeneratePress style bare
 * `button`, `a`, `input`, `label`, `fieldset` and `canvas` elements globally,
 * several of them with !important. Everything below is therefore scoped to
 * .ascand-ml-viewer and re-declares the properties themes are known to touch,
 * so the viewer looks the same regardless of the active theme.
 *
 * @package Ascand_ML
 */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.ascand-ml-viewer {
	--ascand-ml-w: 100%;
	--ascand-ml-h: 400px;
	--ascand-ml-radius: 8px;
	--ascand-ml-bg: transparent;
	--ascand-ml-panel-bg: rgba( 22, 22, 24, 0.94 );
	--ascand-ml-panel-fg: #e6e6e8;
	--ascand-ml-panel-muted: #9b9ba1;
	--ascand-ml-accent: #4aa3ff;
	--ascand-ml-chip: rgba( 0, 0, 0, 0.55 );

	position: relative !important;
	display: block !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
	width: var( --ascand-ml-w ) !important;
	max-width: 100% !important;
	height: var( --ascand-ml-h ) !important;
	min-height: 0 !important;
	margin: 1.5em 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var( --ascand-ml-radius ) !important;
	background: var( --ascand-ml-bg ) !important;
	overflow: hidden !important;
	line-height: 1.4 !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 13px !important;
	color: var( --ascand-ml-panel-fg ) !important;
	contain: layout paint;
}

.ascand-ml-viewer *,
.ascand-ml-viewer *::before,
.ascand-ml-viewer *::after {
	box-sizing: border-box;
}

.ascand-ml-stage {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	touch-action: none;
}

/* Themes routinely declare `canvas { max-width: 100%; height: auto; }`, which
   would fight the renderer's explicit pixel size. */
.ascand-ml-viewer canvas {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	outline: none;
}

/* --------------------------------------------------------------------------
   Status and hint chips
   Both sit on top of an arbitrary background — the page background shows
   through when the viewer is transparent — so they carry their own contrast.
   -------------------------------------------------------------------------- */

.ascand-ml-status {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate( -50%, -50% ) !important;
	max-width: calc( 100% - 32px ) !important;
	margin: 0 !important;
	padding: 8px 14px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var( --ascand-ml-chip ) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-align: center !important;
	pointer-events: none;
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
}

.ascand-ml-status[hidden] {
	display: none !important;
}

.ascand-ml-status.is-error {
	border-radius: 8px !important;
	background: rgba( 140, 20, 20, 0.85 ) !important;
	pointer-events: auto;
}

.ascand-ml-hint {
	position: absolute !important;
	right: 46px !important;
	bottom: 10px !important;
	max-width: calc( 100% - 60px ) !important;
	margin: 0 !important;
	padding: 3px 9px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var( --ascand-ml-chip ) !important;
	color: rgba( 255, 255, 255, 0.85 ) !important;
	font-size: 11px !important;
	line-height: 1.5 !important;
	white-space: nowrap;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.4s ease;
}

.ascand-ml-viewer.is-loaded .ascand-ml-hint {
	opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Buttons — full reset, because theme button rules are the single biggest
   source of visual breakage.
   -------------------------------------------------------------------------- */

.ascand-ml-viewer .ascand-ml-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 6px 12px !important;
	border: 1px solid rgba( 255, 255, 255, 0.22 ) !important;
	border-radius: 6px !important;
	background: rgba( 0, 0, 0, 0.5 ) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	text-shadow: none !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
	cursor: pointer !important;
	transform: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
	-webkit-appearance: none;
	appearance: none;
}

.ascand-ml-viewer .ascand-ml-btn:hover,
.ascand-ml-viewer .ascand-ml-btn:focus-visible {
	background: rgba( 0, 0, 0, 0.72 ) !important;
	border-color: rgba( 255, 255, 255, 0.4 ) !important;
	color: #fff !important;
	text-decoration: none !important;
}

.ascand-ml-viewer .ascand-ml-btn:focus-visible {
	outline: 2px solid var( --ascand-ml-accent ) !important;
	outline-offset: 2px !important;
}

.ascand-ml-viewer .ascand-ml-btn svg {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	max-width: none !important;
	pointer-events: none;
}

.ascand-ml-actions {
	position: absolute !important;
	bottom: 10px !important;
	left: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ascand-ml-viewer .ascand-ml-btn--gear {
	position: absolute !important;
	right: 8px !important;
	bottom: 8px !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
}

.ascand-ml-viewer .ascand-ml-btn--panel {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	padding: 6px 8px !important;
	background: rgba( 255, 255, 255, 0.08 ) !important;
	border-color: rgba( 255, 255, 255, 0.18 ) !important;
	font-size: 11px !important;
}

.ascand-ml-viewer .ascand-ml-btn--danger {
	width: 100% !important;
	margin-top: 8px !important;
	padding: 6px 8px !important;
	background: rgba( 220, 60, 60, 0.14 ) !important;
	border-color: rgba( 255, 110, 110, 0.32 ) !important;
	color: #ff9b9b !important;
	font-size: 11px !important;
}

.ascand-ml-viewer .ascand-ml-btn--danger:hover {
	background: rgba( 220, 60, 60, 0.26 ) !important;
	color: #ffc0c0 !important;
}

/* --------------------------------------------------------------------------
   Settings panel
   -------------------------------------------------------------------------- */

.ascand-ml-panel {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 5 !important;
	box-sizing: border-box !important;
	width: 264px !important;
	min-width: 0 !important;
	max-width: calc( 100% - 16px ) !important;
	max-height: calc( 100% - 16px ) !important;
	margin: 0 !important;
	padding: 10px !important;
	border: 1px solid rgba( 255, 255, 255, 0.14 ) !important;
	border-radius: 10px !important;
	background: var( --ascand-ml-panel-bg ) !important;
	color: var( --ascand-ml-panel-fg ) !important;
	font-size: 12px !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}

.ascand-ml-panel[hidden] {
	display: none !important;
}

.ascand-ml-panel__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: 0 0 8px !important;
	padding: 0 0 6px !important;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.14 ) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.ascand-ml-viewer .ascand-ml-panel__close {
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: transparent !important;
	color: inherit !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	opacity: 0.65;
	-webkit-appearance: none;
	appearance: none;
}

.ascand-ml-viewer .ascand-ml-panel__close:hover {
	opacity: 1;
}

.ascand-ml-viewer .ascand-ml-group {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 ) !important;
	background: none !important;

	/* Browsers give every fieldset an implicit `min-inline-size: min-content`
	   that a plain `min-width: 0` does not override. Without both of these the
	   group refuses to shrink and its right edge is clipped by the panel. */
	min-width: 0 !important;
	min-inline-size: 0 !important;
}

.ascand-ml-viewer .ascand-ml-group:first-of-type {
	border-top: 0 !important;
}

.ascand-ml-viewer .ascand-ml-group legend {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 8px 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var( --ascand-ml-panel-muted ) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

.ascand-ml-viewer .ascand-ml-row {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	color: inherit !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	cursor: default;
}

.ascand-ml-row[hidden] {
	display: none !important;
}

.ascand-ml-row__label {
	flex: 0 0 84px !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	padding-right: 2px !important;
	color: inherit !important;
	font-size: 12px !important;
	line-height: 1.25 !important;

	/* Deliberately not nowrap: translated labels are often longer than the
	   English ones, and wrapping keeps them readable where clipping would not. */
	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
	hyphens: auto;
}

.ascand-ml-viewer .ascand-ml-row output {
	flex: 0 0 34px !important;
	color: var( --ascand-ml-panel-muted ) !important;
	font-size: 11px !important;
	font-variant-numeric: tabular-nums;
	text-align: right !important;
}

.ascand-ml-row--buttons {
	display: flex !important;
	gap: 6px !important;
}

/* --------------------------------------------------------------------------
   Form controls — reset then restyle, so theme input rules cannot leak in.
   -------------------------------------------------------------------------- */

.ascand-ml-viewer input[type="range"],
.ascand-ml-viewer input[type="color"],
.ascand-ml-viewer input[type="checkbox"] {
	box-sizing: border-box !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	font-family: inherit !important;
	line-height: normal !important;
	cursor: pointer !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Range */
.ascand-ml-viewer input[type="range"] {
	flex: 1 1 40px !important;
	width: auto !important;
	min-width: 40px !important;
	height: 16px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	outline: none;
}

.ascand-ml-viewer input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.22 );
}

.ascand-ml-viewer input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}

.ascand-ml-viewer input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.22 );
}

.ascand-ml-viewer input[type="range"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}

.ascand-ml-viewer input[type="range"]:focus-visible {
	outline: 2px solid var( --ascand-ml-accent );
	outline-offset: 3px;
}

/* Colour */
.ascand-ml-viewer input[type="color"] {
	flex: 1 1 40px !important;
	width: auto !important;
	min-width: 40px !important;
	height: 22px !important;
	border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
	border-radius: 4px !important;
	background: transparent !important;
	overflow: hidden;
}

.ascand-ml-viewer input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

.ascand-ml-viewer input[type="color"]::-webkit-color-swatch {
	border: 0;
	border-radius: 3px;
}

.ascand-ml-viewer input[type="color"]::-moz-color-swatch {
	border: 0;
	border-radius: 3px;
}

/* Checkbox */
.ascand-ml-viewer input[type="checkbox"] {
	position: relative !important;
	flex: 0 0 auto !important;
	width: 15px !important;
	height: 15px !important;
	border: 1px solid rgba( 255, 255, 255, 0.35 ) !important;
	border-radius: 3px !important;
	background: rgba( 255, 255, 255, 0.06 ) !important;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.ascand-ml-viewer input[type="checkbox"]::before,
.ascand-ml-viewer input[type="checkbox"]::after {
	content: none !important;
}

.ascand-ml-viewer input[type="checkbox"]:checked {
	background: var( --ascand-ml-accent ) !important;
	border-color: var( --ascand-ml-accent ) !important;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-6'/%3E%3C/svg%3E" ) !important;
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
}

.ascand-ml-viewer input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --ascand-ml-accent ) !important;
	outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   Utility and editor notices
   -------------------------------------------------------------------------- */

.ascand-ml-viewer .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

.ascand-ml-notice {
	margin: 1em 0;
	padding: 10px 14px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #3c434a;
	font-size: 14px;
}

.ascand-ml-debug {
	margin: 1em 0;
	padding: 12px;
	border-radius: 6px;
	background: #23282d;
	color: #e6e6e8;
	font-size: 12px;
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Responsive and motion preferences
   -------------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.ascand-ml-panel {
		top: 6px !important;
		right: 6px !important;
		left: 6px !important;
		width: auto !important;
		max-width: none !important;
	}

	.ascand-ml-row__label {
		flex-basis: 76px !important;
	}

	.ascand-ml-hint {
		display: none !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ascand-ml-viewer *,
	.ascand-ml-viewer *::before,
	.ascand-ml-viewer *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   View presets and axis buttons
   -------------------------------------------------------------------------- */

.ascand-ml-views {
	display: block !important;
	min-width: 0 !important;
	margin: 0 0 6px !important;
}

.ascand-ml-views__label {
	display: block !important;
	margin: 4px 0 4px !important;
	color: var( --ascand-ml-panel-muted, inherit ) !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	opacity: 0.75;
}

.ascand-ml-grid {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	gap: 4px !important;
	min-width: 0 !important;
	margin: 0 0 6px !important;
}

.ascand-ml-grid .ascand-ml-btn--grid {
	width: 100% !important;
	min-width: 0 !important;
	padding: 5px 2px !important;
	background: rgba( 255, 255, 255, 0.08 ) !important;
	border-color: rgba( 255, 255, 255, 0.16 ) !important;
	font-size: 10.5px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.ascand-ml-grid .ascand-ml-btn--grid:hover {
	background: rgba( 255, 255, 255, 0.18 ) !important;
}

/* --------------------------------------------------------------------------
   Panel sections
   The panel is capped to the viewer height and scrolls. With every section
   expanded the content ran roughly 600px, so on a default-height viewer the
   last section sat below the fold and was easy to miss entirely. Collapsing
   them keeps everything reachable without scrolling.
   -------------------------------------------------------------------------- */

.ascand-ml-viewer details.ascand-ml-group,
.ascand-ml details.ascand-ml-group {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 ) !important;
	background: none !important;
}

.ascand-ml-viewer details.ascand-ml-group:first-of-type,
.ascand-ml details.ascand-ml-group:first-of-type {
	border-top: 0 !important;
}

.ascand-ml-viewer .ascand-ml-group > summary,
.ascand-ml .ascand-ml-group > summary {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 8px 0 6px !important;
	border: 0 !important;
	background: none !important;
	color: var( --ascand-ml-panel-muted, inherit ) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	list-style: none !important;
	user-select: none;
}

/* Safari and older WebKit render their own marker unless this is cleared. */
.ascand-ml-viewer .ascand-ml-group > summary::-webkit-details-marker,
.ascand-ml .ascand-ml-group > summary::-webkit-details-marker {
	display: none !important;
}

.ascand-ml-viewer .ascand-ml-group > summary::before,
.ascand-ml .ascand-ml-group > summary::before {
	content: "" !important;
	flex: 0 0 auto !important;
	width: 0 !important;
	height: 0 !important;
	border-top: 4px solid transparent !important;
	border-bottom: 4px solid transparent !important;
	border-left: 5px solid currentColor !important;
	transition: transform 0.15s ease !important;
}

.ascand-ml-viewer .ascand-ml-group[open] > summary::before,
.ascand-ml .ascand-ml-group[open] > summary::before {
	transform: rotate( 90deg ) !important;
}

.ascand-ml-viewer .ascand-ml-group > summary:hover,
.ascand-ml .ascand-ml-group > summary:hover {
	color: #fff !important;
}

.ascand-ml-viewer .ascand-ml-group > summary:focus-visible,
.ascand-ml .ascand-ml-group > summary:focus-visible {
	outline: 2px solid var( --ascand-ml-accent ) !important;
	outline-offset: 2px !important;
}

.ascand-ml-viewer .ascand-ml-group[open],
.ascand-ml .ascand-ml-group[open] {
	padding-bottom: 6px !important;
}

/* --------------------------------------------------------------------------
   Axis navigator
   Sits in the top-left corner of the stage, which is the only corner not
   already taken by the status chip, the settings panel, the gear or the
   download button.
   -------------------------------------------------------------------------- */

.ascand-ml-gizmo {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 4 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	box-sizing: border-box !important;
	width: 84px !important;
	margin: 0 !important;
	padding: 0 !important;
	user-select: none;
}

.ascand-ml-gizmo svg {
	display: block !important;
	width: 84px !important;
	height: 84px !important;
	max-width: none !important;
	overflow: visible;
}

.ascand-ml-gizmo__arm {
	stroke: rgba( 255, 255, 255, 0.45 );
	stroke-width: 2.5;
	stroke-linecap: round;
}

.ascand-ml-gizmo__ball {
	cursor: pointer;
}

.ascand-ml-gizmo__ball circle {
	fill: rgba( 40, 40, 46, 0.85 );
	stroke: rgba( 255, 255, 255, 0.5 );
	stroke-width: 1.5;
	transition: stroke 0.12s ease;
}

.ascand-ml-gizmo__ball text {
	fill: #fff;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-anchor: middle;
	pointer-events: none;
}

/* Blender's axis colouring: X red, Y green, Z blue. */
.ascand-ml-gizmo__ball[data-gizmo-axis="x"] circle,
.ascand-ml-gizmo__ball[data-gizmo-axis="-x"] circle { fill: #e8556d; stroke: #f28b9b; }
.ascand-ml-gizmo__ball[data-gizmo-axis="y"] circle,
.ascand-ml-gizmo__ball[data-gizmo-axis="-y"] circle { fill: #7dbd3a; stroke: #a6d97a; }
.ascand-ml-gizmo__ball[data-gizmo-axis="z"] circle,
.ascand-ml-gizmo__ball[data-gizmo-axis="-z"] circle { fill: #4a9ae8; stroke: #8cc2f2; }

/* Negative directions read as hollow, as they do in Blender. */
.ascand-ml-gizmo__ball:not( .is-positive ) circle {
	fill: rgba( 30, 30, 34, 0.8 );
}

.ascand-ml-gizmo__ball:hover circle,
.ascand-ml-gizmo__ball:focus-visible circle {
	stroke: #fff;
	stroke-width: 2.5;
}

.ascand-ml-gizmo__ball:focus {
	outline: none;
}

.ascand-ml-gizmo__turns {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: 3px !important;
	width: 100% !important;
}

.ascand-ml .ascand-ml-btn--turn,
.ascand-ml-viewer .ascand-ml-btn--turn {
	width: 100% !important;
	min-width: 0 !important;
	padding: 3px 0 !important;
	border-color: rgba( 255, 255, 255, 0.2 ) !important;
	background: rgba( 0, 0, 0, 0.45 ) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

@media ( max-width: 600px ) {
	.ascand-ml-gizmo {
		width: 66px !important;
	}
	.ascand-ml-gizmo svg {
		width: 66px !important;
		height: 66px !important;
	}
}

/* Axis locks, directly under the navigator. */
.ascand-ml-gizmo__locks {
	display: grid !important;
	grid-template-columns: repeat( 3, 1fr ) !important;
	gap: 3px !important;
	width: 100% !important;
	margin-top: 3px !important;
}

.ascand-ml .ascand-ml-btn--turn.is-active,
.ascand-ml-viewer .ascand-ml-btn--turn.is-active {
	background: var( --ascand-ml-accent ) !important;
	border-color: var( --ascand-ml-accent ) !important;
	color: #fff !important;
}

/* Point size, under the navigator and only shown for point clouds. */
.ascand-ml-pointsize {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	margin-top: 5px !important;
	padding: 4px 5px !important;
	border-radius: 5px !important;
	background: rgba( 0, 0, 0, 0.45 ) !important;
	border: 1px solid rgba( 255, 255, 255, 0.16 ) !important;
}

.ascand-ml-pointsize[hidden] {
	display: none !important;
}

.ascand-ml-pointsize__label {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 4px !important;
	margin-bottom: 2px !important;
	color: #fff !important;
	font-size: 9.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	opacity: 0.85;
}

.ascand-ml-pointsize__label output {
	color: rgba( 255, 255, 255, 0.75 ) !important;
	font-size: 9.5px !important;
	font-variant-numeric: tabular-nums;
	font-weight: 400 !important;
	text-transform: none !important;
}

.ascand-ml-pointsize input[type="range"] {
	display: block !important;
	width: 100% !important;
	flex: none !important;
	height: 14px !important;
}