:root {
	--pad-background: #f4f2ef;
	--pad-accent: #e0aa34;
	--pad-text: #333333;
}

.pad-widget,
.pad-widget * {
	box-sizing: border-box;
}

.pad-widget {
	position: fixed;
	right: 24px;
	top: 20vh;
	z-index: 2147483000;
	color: var(--pad-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}

.pad-widget__trigger {
	position: relative;
	z-index: 2;
	display: grid;
	width: 56px;
	height: 56px;
	margin-left: auto;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--pad-accent);
	color: #27231b;
	box-shadow: 0 4px 10px rgba(51, 51, 51, 0.16), 0 14px 30px rgba(51, 51, 51, 0.22) !important;
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.pad-widget__trigger:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(51, 51, 51, 0.18), 0 18px 38px rgba(51, 51, 51, 0.28) !important;
}

.pad-widget__trigger:focus-visible,
.pad-widget__trigger:active,
.pad-widget__trigger[aria-expanded="true"] {
	box-shadow: 0 4px 10px rgba(51, 51, 51, 0.16), 0 14px 30px rgba(51, 51, 51, 0.22) !important;
}

.pad-widget__trigger svg {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 29px;
	height: 29px;
	margin: 0;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	transform: translate(calc(-50% + 2px), -50%);
}

.pad-widget__panel {
	position: absolute;
	right: 72px;
	top: 0;
	width: min(320px, calc(100vw - 32px));
	max-height: calc(80vh - 24px);
	padding: 24px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid rgba(51, 51, 51, 0.09);
	border-radius: 24px;
	background: var(--pad-background);
	box-shadow: 0 24px 64px rgba(51, 51, 51, 0.2);
	animation: pad-panel-in 180ms ease-out;
}

.pad-widget__panel[hidden] {
	display: none;
}

@keyframes pad-panel-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.pad-widget__header {
	margin-bottom: 20px;
}

.pad-widget__header h2 {
	margin: 0;
	padding-left: 15px;
	color: var(--pad-text);
	font-size: 25px;
	font-weight: 720;
	letter-spacing: -0.035em;
	line-height: 1.15;
}

.pad-widget__group {
	padding: 15px;
	border: 1px solid rgba(51, 51, 51, 0.1);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.55);
}

.pad-widget__label {
	margin: 0;
	padding-bottom: 0.7em;
	font-size: 14px;
	font-weight: 700;
}

.pad-widget__stepper {
	display: grid;
	grid-template-columns: 48px 1fr 48px;
	align-items: center;
	gap: 8px;
}

.pad-widget__stepper button {
	display: flex;
	width: 48px;
	min-width: 48px;
	height: 48px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(51, 51, 51, 0.12);
	border-radius: 50%;
	background: #ffffff;
	color: var(--pad-text);
	font: inherit;
	font-size: 17px;
	font-weight: 750;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}

.pad-widget__stepper output {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
}

.pad-widget__actions {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.pad-widget__actions > button {
	display: grid;
	min-height: 48px;
	padding: 9px 12px;
	grid-template-columns: 30px 1fr;
	align-items: center;
	gap: 9px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: transparent;
	color: var(--pad-text);
	font: inherit;
	font-size: 14px;
	font-weight: 680;
	text-align: left;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.pad-widget__actions > button:hover {
	border-color: rgba(51, 51, 51, 0.1);
	background: rgba(255, 255, 255, 0.62);
}

.pad-widget__actions > button[aria-pressed="true"] {
	border-color: rgba(224, 170, 52, 0.7);
	background: rgba(224, 170, 52, 0.17);
}

.pad-widget__icon {
	display: flex;
	width: 30px;
	height: 30px;
	min-width: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(224, 170, 52, 0.19);
	line-height: 0;
}

.pad-widget__icon svg {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	overflow: visible;
	shape-rendering: geometricPrecision;
}

.pad-widget__icon--light circle {
	fill: #ffffff;
	stroke: #333333;
	stroke-width: 1.5;
}

.pad-widget__icon--light path {
	fill: #333333;
}

.pad-widget__icon--high circle {
	fill: #333333;
	stroke: #333333;
	stroke-width: 1.5;
}

.pad-widget__icon--high path {
	fill: #ffffff;
}

.pad-widget__icon--link path {
	fill: none;
	stroke: #333333;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.pad-widget__reset {
	display: flex;
	width: 100%;
	min-height: 48px;
	margin-top: 18px;
	padding: 10px 18px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--pad-accent);
	color: #1b1b1b;
	font: inherit;
	font-size: 13px;
	font-weight: 750;
	cursor: pointer;
}

.pad-widget__reset svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.pad-widget__reset:hover {
	background: #cb8a00;
	color: #000000;
}

.pad-widget__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pad-widget button:focus-visible {
	outline: 3px solid #4b3a13;
	outline-offset: 3px;
}

html.pad-font-size-90 { font-size: 90% !important; }
html.pad-font-size-110 { font-size: 110% !important; }
html.pad-font-size-120 { font-size: 120% !important; }
html.pad-font-size-130 { font-size: 130% !important; }

html.pad-light-contrast-root {
	background: #ffffff !important;
}

body.pad-light-contrast {
	background: #ffffff !important;
	color: #000000 !important;
	background-image: none !important;
}

body.pad-light-contrast :where(main, article, section, header, footer, nav, aside, div):not(.pad-widget):not(.pad-widget *):not(a *):not(button *):not([role="button"] *) {
	background-color: #ffffff !important;
	background-image: none !important;
	border-color: #000000 !important;
	box-shadow: none !important;
	color: #000000 !important;
	text-shadow: none !important;
}

body.pad-light-contrast :where(main, article, section, header, footer, nav, aside, div):not(.pad-widget):not(.pad-widget *):not(a *):not(button *):not([role="button"] *)::before,
body.pad-light-contrast :where(main, article, section, header, footer, nav, aside, div):not(.pad-widget):not(.pad-widget *):not(a *):not(button *):not([role="button"] *)::after {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.pad-light-contrast :where(h1, h2, h3, h4, h5, h6, p, span, strong, em, li, dt, dd, blockquote, label):not(.pad-widget *):not(a *):not(button *):not([role="button"] *) {
	color: #000000 !important;
	text-shadow: none !important;
}

body.pad-high-contrast {
	background: #000000 !important;
	color: #ffffff !important;
}

body.pad-high-contrast :where(main, article, section, header, footer, nav, div):not(.pad-widget):not(.pad-widget *) {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
}

body.pad-high-contrast a:not(.pad-widget *) {
	color: #ffe45c !important;
}

body.pad-highlight-links a:not(.pad-widget *) {
	outline: 3px solid #006dcc !important;
	outline-offset: 3px !important;
}

@media (max-width: 480px) {
	.pad-widget {
		right: 12px;
		left: auto;
	}
	.pad-widget__panel {
		right: 0;
		left: auto;
		top: 54px;
		max-height: calc(80vh - 70px);
		padding: 20px;
		border-radius: 20px;
	}
	.pad-widget__trigger {
		width: 44px;
		height: 44px;
	}
	.pad-widget__trigger svg {
		width: 24px;
		height: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pad-widget *,
	.pad-widget *::before,
	.pad-widget *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}