#esw-scroll-controls.esw-stt-controls {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--esw-stt-gap);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	box-sizing: border-box;
}

#esw-scroll-controls.esw-stt-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

#esw-scroll-controls .esw-stt-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--esw-stt-size);
	height: var(--esw-stt-size);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid var(--esw-control-border, var(--esw-stt-border));
	background: var(--esw-control-bg, var(--esw-stt-bg));
	color: var(--esw-control-icon, var(--esw-stt-icon));
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.16);
	transition: background-color .18s ease, color .18s ease, transform .12s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

#esw-scroll-controls .esw-stt-control:hover,
#esw-scroll-controls .esw-stt-control:focus-visible,
#esw-scroll-controls .esw-stt-control.esw-stt-active {
	background: var(--esw-stt-hover-bg);
	color: var(--esw-stt-hover-icon);
}

#esw-scroll-controls .esw-stt-control:active {
	transform: scale(.96);
}

#esw-scroll-controls .esw-stt-control:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

#esw-scroll-controls .esw-stt-top {
	border-radius: 50%;
}

#esw-scroll-controls .esw-stt-page {
	width: calc(var(--esw-stt-size) * 1.15);
	height: calc(var(--esw-stt-size) * .58);
	border-radius: calc(var(--esw-stt-size) * .12);
}

#esw-scroll-controls .esw-stt-page-symbol {
	display: block;
	width: 62%;
	height: 42%;
	border-radius: 2px;
	background: currentColor;
	opacity: .88;
}

#esw-scroll-controls .esw-stt-triangle {
	width: var(--esw-stt-size);
	height: calc(var(--esw-stt-size) * .78);
	background: var(--esw-control-bg, var(--esw-stt-bg));
	color: var(--esw-control-icon, var(--esw-stt-icon));
	border-color: var(--esw-arrow-outer, var(--esw-control-border, var(--esw-stt-border)));
	box-shadow: 0 4px 14px rgba(0,0,0,.16);
	border-radius: calc(var(--esw-stt-size) * .12);
}

#esw-scroll-controls .esw-stt-triangle:hover,
#esw-scroll-controls .esw-stt-triangle:focus-visible,
#esw-scroll-controls .esw-stt-triangle.esw-stt-active {
	background: var(--esw-stt-hover-bg);
	color: var(--esw-stt-hover-icon);
}

#esw-scroll-controls svg {
	display: block;
	width: 72%;
	height: 72%;
	fill: currentColor;
	pointer-events: none;
}

#esw-scroll-controls .esw-stt-top svg {
	width: 64%;
	height: 64%;
}

#esw-scroll-controls .esw-stt-triangle svg {
	width: 100%;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	#esw-scroll-controls.esw-stt-controls,
	#esw-scroll-controls .esw-stt-control {
		transition: none;
	}
}


#esw-scroll-controls .esw-stt-speed-popup {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	min-width: 180px;
	max-width: min(240px, 70vw);
	padding: 10px;
	background: #ffffff;
	color: #111111;
	border: 1px solid #111111;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.2);
	box-sizing: border-box;
}

#esw-scroll-controls .esw-stt-speed-popup[hidden] {
	display: none !important;
}

#esw-scroll-controls .esw-stt-speed-title {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 8px;
	text-align: center;
}

#esw-scroll-controls .esw-stt-speed-options {
	display: grid;
	gap: 6px;
}

#esw-scroll-controls .esw-stt-speed-option {
	width: 100%;
	min-height: 38px;
	padding: 7px 10px;
	background: #ffffff;
	color: #111111;
	border: 1px solid #111111;
	border-radius: 7px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.2;
	box-sizing: border-box;
}

#esw-scroll-controls .esw-stt-speed-option:hover,
#esw-scroll-controls .esw-stt-speed-option:focus-visible,
#esw-scroll-controls .esw-stt-speed-option.esw-stt-selected {
	background: #111111;
	color: #ffffff;
}

@media (max-width: 600px) {
	#esw-scroll-controls .esw-stt-speed-popup {
		right: calc(100% + 8px);
		max-width: min(210px, 68vw);
	}
}


#esw-scroll-controls .esw-stt-triangle-up svg {
	width: var(--esw-stt-top-arrow-icon-size);
	height: var(--esw-stt-top-arrow-icon-size);
	max-width: 200%;
	max-height: 200%;
}

#esw-scroll-controls .esw-stt-top svg {
	width: var(--esw-stt-top-icon-size);
	height: var(--esw-stt-top-icon-size);
	max-width: 200%;
	max-height: 200%;
}

#esw-scroll-controls .esw-stt-triangle-down svg {
	width: var(--esw-stt-bottom-arrow-icon-size);
	height: var(--esw-stt-bottom-arrow-icon-size);
	max-width: 200%;
	max-height: 200%;
}


/* v1.5 modern visual system */
#esw-scroll-controls.esw-stt-has-rail {
	padding: var(--esw-stt-rail-padding);
	background: var(--esw-stt-rail-bg);
	border: var(--esw-stt-rail-border-width) solid var(--esw-stt-rail-border);
	border-radius: var(--esw-stt-rail-radius);
}

#esw-scroll-controls .esw-stt-control {
	border-width: var(--esw-stt-control-border-width);
	border-radius: var(--esw-stt-control-radius);
}

#esw-scroll-controls.esw-stt-has-shadow .esw-stt-control {
	box-shadow: 0 5px 16px rgba(0,0,0,var(--esw-stt-shadow-alpha));
}

#esw-scroll-controls .esw-stt-page-up,
#esw-scroll-controls .esw-stt-page-down {
	display: inline-flex;
	visibility: visible;
	opacity: 1;
	width: calc(var(--esw-stt-size) * var(--esw-stt-page-width-scale));
	height: calc(var(--esw-stt-size) * var(--esw-stt-page-height-scale));
	min-width: calc(var(--esw-stt-size) * .70);
	min-height: calc(var(--esw-stt-size) * .35);
	flex: 0 0 auto;
}

#esw-scroll-controls .esw-stt-triangle {
	height: calc(var(--esw-stt-size) * var(--esw-stt-arrow-height-scale));
}

#esw-scroll-controls.esw-stt-center-emphasis .esw-stt-top {
	width: calc(var(--esw-stt-size) * var(--esw-stt-center-scale));
	height: calc(var(--esw-stt-size) * var(--esw-stt-center-scale));
	margin-top: calc((var(--esw-stt-size) * (var(--esw-stt-center-scale) - 1)) / -4);
	margin-bottom: calc((var(--esw-stt-size) * (var(--esw-stt-center-scale) - 1)) / -4);
	border-width: var(--esw-stt-center-ring-width);
	border-color: var(--esw-stt-center-ring-color);
	z-index: 2;
}

#esw-scroll-controls.esw-stt-center-shadow .esw-stt-top {
	box-shadow: 0 7px 22px rgba(0,0,0,calc(var(--esw-stt-shadow-alpha) + .08));
}

#esw-scroll-controls .esw-stt-speed-popup {
	background: var(--esw-stt-popup-bg);
	color: var(--esw-stt-popup-text);
	border-color: var(--esw-stt-popup-border);
	border-radius: var(--esw-stt-popup-radius);
}

#esw-scroll-controls .esw-stt-speed-option {
	background: transparent;
	color: var(--esw-stt-popup-text);
	border-color: var(--esw-stt-popup-border);
	border-radius: calc(var(--esw-stt-popup-radius) * .6);
}

#esw-scroll-controls .esw-stt-speed-option:hover,
#esw-scroll-controls .esw-stt-speed-option:focus-visible,
#esw-scroll-controls .esw-stt-speed-option.esw-stt-selected {
	background: var(--esw-stt-popup-selected-bg);
	color: var(--esw-stt-popup-selected-text);
}


/* v1.5.1: explicitly preserve Page Up / Page Down controls in all modern presets */
#esw-scroll-controls .esw-stt-page-up,
#esw-scroll-controls .esw-stt-page-down {
	align-items: center;
	justify-content: center;
	background: var(--esw-control-bg, var(--esw-stt-bg));
	color: var(--esw-control-icon, var(--esw-stt-icon));
	border-style: solid;
	border-color: var(--esw-arrow-outer, var(--esw-control-border, var(--esw-stt-border)));
}



/* v1.5.2 clean geometry and independent width/height scaling */
#esw-scroll-controls .esw-stt-control {
	transform-origin: center;
}

#esw-scroll-controls .esw-stt-triangle {
	width: calc(var(--esw-stt-size) * var(--esw-stt-overall-width-scale));
	height: calc(var(--esw-stt-size) * var(--esw-stt-arrow-height-scale) * var(--esw-stt-overall-height-scale));
}

#esw-scroll-controls .esw-stt-page-up,
#esw-scroll-controls .esw-stt-page-down {
	width: calc(var(--esw-stt-size) * var(--esw-stt-page-width-scale) * var(--esw-stt-overall-width-scale));
	height: calc(var(--esw-stt-size) * var(--esw-stt-page-height-scale) * var(--esw-stt-overall-height-scale));
}

#esw-scroll-controls .esw-stt-top {
	width: calc(var(--esw-stt-size) * var(--esw-stt-overall-width-scale));
	height: calc(var(--esw-stt-size) * var(--esw-stt-overall-height-scale));
}

#esw-scroll-controls.esw-stt-center-emphasis .esw-stt-top {
	width: calc(var(--esw-stt-size) * var(--esw-stt-center-scale) * var(--esw-stt-overall-width-scale));
	height: calc(var(--esw-stt-size) * var(--esw-stt-center-scale) * var(--esw-stt-overall-height-scale));
}

#esw-scroll-controls .esw-stt-page-up svg,
#esw-scroll-controls .esw-stt-page-down svg {
	width: 46%;
	height: 46%;
	max-width: 90%;
	max-height: 90%;
	display: block;
	pointer-events: none;
}

#esw-scroll-controls.esw-stt-rail-shadow {
	box-shadow: 0 8px 28px rgba(0,0,0,var(--esw-stt-rail-shadow-alpha));
}

/* Explicitly neutralize old generated artwork that could create diagonal lines. */
#esw-scroll-controls .esw-stt-page-up::before,
#esw-scroll-controls .esw-stt-page-up::after,
#esw-scroll-controls .esw-stt-page-down::before,
#esw-scroll-controls .esw-stt-page-down::after {
	content: none !important;
	display: none !important;
}


/* v1.6.0 solid panel mode */
#esw-scroll-controls.esw-stt-solid-panel {
	gap: var(--esw-stt-panel-button-gap);
	padding: var(--esw-stt-panel-inner-padding);
	background: var(--esw-stt-rail-bg);
	border: var(--esw-stt-rail-border-width) solid var(--esw-stt-rail-border);
	border-radius: var(--esw-stt-panel-outer-radius);
	overflow: visible;
}

#esw-scroll-controls.esw-stt-solid-panel .esw-stt-control {
	margin: 0;
	border-radius: var(--esw-stt-panel-button-radius);
	flex-shrink: 0;
}

/* When panel gap is zero, visually connect the controls while keeping the center button prominent. */
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-control + .esw-stt-control {
	margin-top: var(--esw-stt-panel-button-gap);
}

#esw-scroll-controls.esw-stt-solid-panel.esw-stt-center-emphasis .esw-stt-top {
	position: relative;
	z-index: 3;
}

/* Keep the main panel background visible around all controls. */
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-triangle,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-page-up,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-page-down,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-top {
	box-sizing: border-box;
}

/* Optional "floating card" depth around the complete background panel. */
#esw-scroll-controls.esw-stt-solid-panel.esw-stt-rail-shadow {
	box-shadow:
		0 10px 28px rgba(0,0,0,var(--esw-stt-rail-shadow-alpha)),
		0 2px 8px rgba(0,0,0,calc(var(--esw-stt-rail-shadow-alpha) * .55));
}

/* Improve contrast for white-panel / dark-button combinations. */
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-control {
	background: var(--esw-control-bg, var(--esw-stt-bg));
	color: var(--esw-control-icon, var(--esw-stt-icon));
	border-color: var(--esw-arrow-outer, var(--esw-control-border, var(--esw-stt-border)));
}


/* v1.6.1: prevent native iOS/Safari selection/copy callout during long-press */
#esw-scroll-controls,
#esw-scroll-controls *,
#esw-scroll-controls button,
#esw-scroll-controls svg,
#esw-scroll-controls span,
#esw-scroll-controls .esw-stt-speed-popup,
#esw-scroll-controls .esw-stt-speed-popup * {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

#esw-scroll-controls .esw-stt-control,
#esw-scroll-controls .esw-stt-speed-option {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}


/* v1.8.0 — independent launcher + layered vector arrow controls */

/* Every control remains a separate HTML button. Icon artwork never receives pointer events,
   so the complete button hit area responds consistently across touch browsers. */
#esw-scroll-controls .esw-stt-control,
#esw-scroll-controls .esw-stt-control *,
#esw-scroll-controls .esw-stt-control svg {
	-webkit-tap-highlight-color: transparent;
}

#esw-scroll-controls .esw-stt-control > *,
#esw-scroll-controls .esw-stt-control svg,
#esw-scroll-controls .esw-stt-layered-arrow,
#esw-scroll-controls .esw-stt-layered-arrow * {
	pointer-events: none !important;
}

/* Launcher mode: only the existing center circle is visible until it is tapped. */
#esw-scroll-controls.esw-stt-launcher-mode:not(.esw-stt-expanded) {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	gap: 0 !important;
}

#esw-scroll-controls.esw-stt-launcher-mode:not(.esw-stt-expanded) .esw-stt-control:not(.esw-stt-top) {
	display: none !important;
}

#esw-scroll-controls.esw-stt-launcher-mode:not(.esw-stt-expanded) .esw-stt-top {
	margin: 0 !important;
}

/* Arrow buttons are transparent hit targets. The visible artwork is arrow-shaped,
   made from two independently colored copies of the same SVG vector. */
#esw-scroll-controls .esw-stt-triangle,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-triangle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max(var(--esw-stt-size), 44px);
	min-width: 44px;
	height: max(calc(var(--esw-stt-size) * var(--esw-stt-arrow-height-scale)), 44px);
	min-height: 44px;
	padding: 0 !important;
	margin: 0;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible;
	touch-action: manipulation;
	cursor: pointer;
}

#esw-scroll-controls .esw-stt-layered-arrow {
	position: relative;
	display: block;
	width: 78%;
	height: 78%;
}

#esw-scroll-controls .esw-stt-arrow-outer,
#esw-scroll-controls .esw-stt-arrow-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#esw-scroll-controls .esw-stt-arrow-outer {
	color: var(--esw-arrow-outer, var(--esw-control-border, var(--esw-stt-border)));
}

#esw-scroll-controls .esw-stt-arrow-inner {
	color: var(--esw-arrow-inner, var(--esw-control-icon, var(--esw-stt-icon)));
	transform: scale(calc(var(--esw-stt-arrow-inner-scale) / 100));
	transform-origin: 50% 50%;
}

#esw-scroll-controls .esw-stt-arrow-outer svg,
#esw-scroll-controls .esw-stt-arrow-inner svg {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	fill: currentColor;
}

/* Hover/active changes only the top arrow color; the lower arrow-shaped outline stays visible. */
#esw-scroll-controls .esw-stt-triangle:hover .esw-stt-arrow-inner,
#esw-scroll-controls .esw-stt-triangle:focus-visible .esw-stt-arrow-inner,
#esw-scroll-controls .esw-stt-triangle.esw-stt-active .esw-stt-arrow-inner {
	color: var(--esw-stt-hover-icon);
}

#esw-scroll-controls .esw-stt-triangle:active {
	transform: scale(.96);
}

/* Keep speed selector above every independent button and easy to tap. */
#esw-scroll-controls .esw-stt-speed-popup {
	z-index: 50;
	pointer-events: auto;
}

#esw-scroll-controls .esw-stt-speed-option {
	min-height: 44px;
	touch-action: manipulation;
}


/* v1.8.1: dedicated layered-arrow colors.
   These intentionally override preset/global control colors for the two arrow SVG layers. */
#esw-scroll-controls .esw-stt-triangle-up .esw-stt-arrow-outer,
#esw-scroll-controls .esw-stt-triangle-down .esw-stt-arrow-outer {
	color: var(--esw-arrow-outer) !important;
}

#esw-scroll-controls .esw-stt-triangle-up .esw-stt-arrow-inner,
#esw-scroll-controls .esw-stt-triangle-down .esw-stt-arrow-inner {
	color: var(--esw-arrow-inner) !important;
}


/* v1.8.2 — explicit layered-arrow stacking order */
#esw-scroll-controls .esw-stt-layered-arrow {
	position: relative;
	isolation: isolate;
}

#esw-scroll-controls .esw-stt-arrow-outer {
	z-index: 1 !important;
}

#esw-scroll-controls .esw-stt-arrow-inner {
	z-index: 2 !important;
}


/* v1.8.3 — square page-scroll rectangles */
#esw-scroll-controls .esw-stt-page-up,
#esw-scroll-controls .esw-stt-page-down,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-page-up,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-page-down {
	border-radius: 0 !important;
}


/* v1.8.4 — balanced control proportions.
   Rectangles stay visually subordinate to the center circle.
   Arrow size settings now directly scale the complete layered SVG artwork. */
#esw-scroll-controls .esw-stt-page-up,
#esw-scroll-controls .esw-stt-page-down,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-page-up,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-page-down {
	width: calc(var(--esw-stt-size) * .82) !important;
	min-width: 0 !important;
	max-width: calc(var(--esw-stt-size) * .82) !important;
}

/* The old icon-size controls targeted nested SVGs that v1.8 layered arrows replaced.
   Apply those settings to the layered artwork container itself. */
#esw-scroll-controls .esw-stt-triangle-up .esw-stt-layered-arrow {
	width: var(--esw-stt-top-arrow-icon-size) !important;
	height: var(--esw-stt-top-arrow-icon-size) !important;
	max-width: 140% !important;
	max-height: 140% !important;
}

#esw-scroll-controls .esw-stt-triangle-down .esw-stt-layered-arrow {
	width: var(--esw-stt-bottom-arrow-icon-size) !important;
	height: var(--esw-stt-bottom-arrow-icon-size) !important;
	max-width: 140% !important;
	max-height: 140% !important;
}

/* Give the transparent arrow hit targets enough room for larger artwork. */
#esw-scroll-controls .esw-stt-triangle,
#esw-scroll-controls.esw-stt-solid-panel .esw-stt-triangle {
	width: max(calc(var(--esw-stt-size) * 1.10), 44px);
	height: max(calc(var(--esw-stt-size) * 1.10), 44px);
	overflow: visible !important;
}