/**
 * ASCAND 3D Converter — front-end styles.
 *
 * Scoped to .ascand-conv and written defensively: themes such as Neve, Astra,
 * Kadence and GeneratePress style bare button, input, label, select, fieldset
 * and canvas elements site-wide, several of them with !important.
 *
 * @package Ascand_Conv
 */

/* --------------------------------------------------------------------------
   Container and layout
   -------------------------------------------------------------------------- */

.ascand-conv {
	--ascand-conv-h: 460px;
	--ascand-conv-radius: 8px;
	--ascand-conv-panel-bg: rgba( 22, 22, 24, 0.94 );
	--ascand-conv-panel-fg: #e6e6e8;
	--ascand-conv-panel-muted: #9b9ba1;
	--ascand-conv-accent: #4aa3ff;
	--ascand-conv-chip: rgba( 0, 0, 0, 0.55 );
	--ascand-conv-surface: rgba( 127, 127, 140, 0.09 );
	--ascand-conv-line: rgba( 127, 127, 140, 0.32 );

	display: block !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 1.5em 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

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

.ascand-conv-privacy {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 0 0 10px !important;
	padding: 9px 12px !important;
	border: 1px solid rgba( 60, 160, 90, 0.34 ) !important;
	border-radius: 6px !important;
	background: rgba( 60, 160, 90, 0.09 ) !important;
	color: inherit !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}

.ascand-conv-privacy svg {
	flex: 0 0 auto !important;
	width: 14px !important;
	height: 14px !important;
	margin-top: 2px !important;
	max-width: none !important;
	color: #3c9a5f;
}

/* --------------------------------------------------------------------------
   Drop zone
   -------------------------------------------------------------------------- */

.ascand-conv-drop {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 160px !important;
	margin: 0 !important;
	padding: 26px 18px !important;
	border: 2px dashed var( --ascand-conv-line ) !important;
	border-radius: var( --ascand-conv-radius ) !important;
	background: var( --ascand-conv-surface ) !important;
	color: inherit !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.ascand-conv-drop:hover,
.ascand-conv-drop:focus-visible,
.ascand-conv-drop.is-over {
	border-color: var( --ascand-conv-accent ) !important;
	background: rgba( 74, 163, 255, 0.09 ) !important;
	outline: none;
}

.ascand-conv-drop svg {
	width: 30px !important;
	height: 30px !important;
	max-width: none !important;
	opacity: 0.5;
}

.ascand-conv-drop__title {
	font-size: 15px !important;
	font-weight: 600 !important;
}

.ascand-conv-drop__hint {
	color: inherit !important;
	font-size: 12px !important;
	opacity: 0.7;
}

.ascand-conv .ascand-conv-file {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

.ascand-conv-error {
	margin: 10px 0 0 !important;
	padding: 9px 12px !important;
	border: 1px solid rgba( 214, 54, 56, 0.4 ) !important;
	border-radius: 6px !important;
	background: rgba( 214, 54, 56, 0.09 ) !important;
	color: #b32d2e !important;
	font-size: 13px !important;
}

.ascand-conv-error[hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Workspace: preview on the left, conversion controls on the right
   -------------------------------------------------------------------------- */

.ascand-conv-workspace {
	display: grid !important;
	grid-template-columns: minmax( 0, 1fr ) 260px !important;
	gap: 14px !important;
	margin-top: 12px !important;
}

.ascand-conv-workspace[hidden] {
	display: none !important;
}

.ascand-conv-stage-wrap {
	position: relative !important;
	min-width: 0 !important;
	height: var( --ascand-conv-h ) !important;
	border: 1px solid var( --ascand-conv-line ) !important;
	border-radius: var( --ascand-conv-radius ) !important;
	overflow: hidden !important;
	background: var( --ascand-conv-surface ) !important;
	contain: layout paint;
}

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

/* Themes commonly set `canvas { max-width: 100%; height: auto }`, which fights
   the renderer's explicit pixel size. */
.ascand-conv 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;
}

.ascand-conv-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-radius: 999px !important;
	background: var( --ascand-conv-chip ) !important;
	color: #fff !important;
	font-size: 13px !important;
	text-align: center !important;
	pointer-events: none;
}

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

/* --------------------------------------------------------------------------
   Side column
   -------------------------------------------------------------------------- */

.ascand-conv-side {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	min-width: 0 !important;
}

.ascand-conv-meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
	padding-bottom: 8px !important;
	border-bottom: 1px solid var( --ascand-conv-line ) !important;
}

.ascand-conv-meta__name {
	font-size: 13px !important;
	font-weight: 600 !important;
	overflow-wrap: anywhere;
}

.ascand-conv-meta__stats {
	font-size: 12px !important;
	opacity: 0.7;
}

.ascand-conv-field {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	min-width: 0 !important;
	margin: 0 !important;
	color: inherit !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-transform: none !important;
}

.ascand-conv-field[hidden] {
	display: none !important;
}

.ascand-conv-field--check {
	flex-direction: row !important;
	align-items: center !important;
	gap: 7px !important;
}

.ascand-conv-field__label {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	opacity: 0.65;
}

.ascand-conv select {
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 7px 9px !important;
	border: 1px solid var( --ascand-conv-line ) !important;
	border-radius: 6px !important;
	background-color: transparent !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
}

.ascand-conv-fidelity {
	min-width: 0 !important;
	padding: 9px 11px !important;
	border-radius: 6px !important;
	background: var( --ascand-conv-surface ) !important;
	font-size: 11.5px !important;
	line-height: 1.5 !important;
}

.ascand-conv-fidelity p {
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

.ascand-conv-fidelity p:last-child {
	margin-bottom: 0 !important;
}

.ascand-conv-fidelity__loses {
	opacity: 0.72;
}

.ascand-conv-fidelity__block {
	color: #b32d2e !important;
	font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Converter buttons (the panel buttons are covered by the shared rules below)
   -------------------------------------------------------------------------- */

.ascand-conv .ascand-conv-btn--primary {
	width: 100% !important;
	padding: 10px 14px !important;
	border: 0 !important;
	background: var( --ascand-conv-accent ) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.ascand-conv .ascand-conv-btn--primary:hover:not( :disabled ) {
	background: #2f8ae8 !important;
	border-color: transparent !important;
}

.ascand-conv .ascand-conv-btn--primary:disabled {
	background: var( --ascand-conv-line ) !important;
	color: rgba( 255, 255, 255, 0.75 ) !important;
	cursor: not-allowed !important;
}

.ascand-conv .ascand-conv-btn--ghost {
	width: 100% !important;
	padding: 7px 12px !important;
	border: 1px solid var( --ascand-conv-line ) !important;
	background: transparent !important;
	color: inherit !important;
	font-size: 12px !important;
	opacity: 0.8;
}

.ascand-conv .ascand-conv-btn--ghost:hover {
	background: var( --ascand-conv-surface ) !important;
	color: inherit !important;
	opacity: 1;
}

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

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

.ascand-conv .ascand-conv-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-conv .ascand-conv-btn:hover,
.ascand-conv .ascand-conv-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-conv .ascand-conv-btn:focus-visible {
	outline: 2px solid var( --ascand-conv-accent ) !important;
	outline-offset: 2px !important;
}

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

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

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

.ascand-conv .ascand-conv-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-conv .ascand-conv-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-conv .ascand-conv-btn--danger:hover {
	background: rgba( 220, 60, 60, 0.26 ) !important;
	color: #ffc0c0 !important;
}

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

.ascand-conv-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-conv-panel-bg ) !important;
	color: var( --ascand-conv-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-conv-panel[hidden] {
	display: none !important;
}

.ascand-conv-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-conv .ascand-conv-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-conv .ascand-conv-panel__close:hover {
	opacity: 1;
}

.ascand-conv .ascand-conv-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-conv .ascand-conv-group:first-of-type {
	border-top: 0 !important;
}

.ascand-conv .ascand-conv-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-conv-panel-muted ) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

.ascand-conv .ascand-conv-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-conv-row[hidden] {
	display: none !important;
}

.ascand-conv-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-conv .ascand-conv-row output {
	flex: 0 0 34px !important;
	color: var( --ascand-conv-panel-muted ) !important;
	font-size: 11px !important;
	font-variant-numeric: tabular-nums;
	text-align: right !important;
}

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

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

.ascand-conv input[type="range"],
.ascand-conv input[type="color"],
.ascand-conv 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-conv 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-conv input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.22 );
}

.ascand-conv 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-conv input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.22 );
}

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

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

/* Colour */
.ascand-conv 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-conv input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

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

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

/* Checkbox */
.ascand-conv 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-conv input[type="checkbox"]::before,
.ascand-conv input[type="checkbox"]::after {
	content: none !important;
}

.ascand-conv input[type="checkbox"]:checked {
	background: var( --ascand-conv-accent ) !important;
	border-color: var( --ascand-conv-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-conv input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --ascand-conv-accent ) !important;
	outline-offset: 2px !important;
}

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

.ascand-conv .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;
}



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

@media ( max-width: 782px ) {
	.ascand-conv-workspace {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}

	.ascand-conv-stage-wrap {
		height: min( var( --ascand-conv-h ), 60vh ) !important;
	}
}

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

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

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

/* --------------------------------------------------------------------------
   LEGO options
   -------------------------------------------------------------------------- */

.ascand-conv .ascand-conv-lego {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-inline-size: 0 !important;
	margin: 0 !important;
	padding: 9px 11px !important;
	border: 1px solid var( --ascand-conv-line ) !important;
	border-radius: 6px !important;
	background: none !important;
}

.ascand-conv .ascand-conv-lego[hidden] {
	display: none !important;
}

.ascand-conv .ascand-conv-lego legend {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: inherit !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	opacity: 0.65;
}

.ascand-conv .ascand-conv-lego .ascand-conv-field {
	margin-bottom: 4px !important;
}

.ascand-conv .ascand-conv-hint {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-size: 11px !important;
	line-height: 1.45 !important;
	opacity: 0.68;
}

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

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

.ascand-conv-views__label {
	display: block !important;
	margin: 4px 0 4px !important;
	color: var( --ascand-conv-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-conv-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-conv-grid .ascand-conv-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-conv-grid .ascand-conv-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-conv-viewer details.ascand-conv-group,
.ascand-conv details.ascand-conv-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-conv-viewer details.ascand-conv-group:first-of-type,
.ascand-conv details.ascand-conv-group:first-of-type {
	border-top: 0 !important;
}

.ascand-conv-viewer .ascand-conv-group > summary,
.ascand-conv .ascand-conv-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-conv-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-conv-viewer .ascand-conv-group > summary::-webkit-details-marker,
.ascand-conv .ascand-conv-group > summary::-webkit-details-marker {
	display: none !important;
}

.ascand-conv-viewer .ascand-conv-group > summary::before,
.ascand-conv .ascand-conv-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-conv-viewer .ascand-conv-group[open] > summary::before,
.ascand-conv .ascand-conv-group[open] > summary::before {
	transform: rotate( 90deg ) !important;
}

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

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

.ascand-conv-viewer .ascand-conv-group[open],
.ascand-conv .ascand-conv-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-conv-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-conv-gizmo svg {
	display: block !important;
	width: 84px !important;
	height: 84px !important;
	max-width: none !important;
	overflow: visible;
}

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

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

.ascand-conv-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-conv-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-conv-gizmo__ball[data-gizmo-axis="x"] circle,
.ascand-conv-gizmo__ball[data-gizmo-axis="-x"] circle { fill: #e8556d; stroke: #f28b9b; }
.ascand-conv-gizmo__ball[data-gizmo-axis="y"] circle,
.ascand-conv-gizmo__ball[data-gizmo-axis="-y"] circle { fill: #7dbd3a; stroke: #a6d97a; }
.ascand-conv-gizmo__ball[data-gizmo-axis="z"] circle,
.ascand-conv-gizmo__ball[data-gizmo-axis="-z"] circle { fill: #4a9ae8; stroke: #8cc2f2; }

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

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

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

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

.ascand-conv .ascand-conv-btn--turn,
.ascand-conv-viewer .ascand-conv-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-conv-gizmo {
		width: 66px !important;
	}
	.ascand-conv-gizmo svg {
		width: 66px !important;
		height: 66px !important;
	}
}

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

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

/* Point size, under the navigator and only shown for point clouds. */
.ascand-conv-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-conv-pointsize[hidden] {
	display: none !important;
}

.ascand-conv-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-conv-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-conv-pointsize input[type="range"] {
	display: block !important;
	width: 100% !important;
	flex: none !important;
	height: 14px !important;
}