:root {
	--hwb-teal: #008f8c;
	--hwb-teal-dark: #006f6d;
	--hwb-ink: #16302b;
	--hwb-muted: #75827f;
}

.hwb-dock {
	position: fixed;
	top: auto;
	right: max(18px, env(safe-area-inset-right));
	bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
	z-index: 9987;
	max-width: calc(100vw - 32px);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 8px, 0);
	transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
	font-family: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hwb-dock.is-ready {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}

.hwb-dock.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, 6px, 0);
}

.hwb-dock__inner {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hwb-save-button,
.hwb-dismiss-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 1px solid rgba(13, 58, 56, .12);
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 12px 28px rgba(16, 41, 39, .11), 0 2px 6px rgba(16, 41, 39, .04);
	backdrop-filter: blur(14px) saturate(135%);
	-webkit-backdrop-filter: blur(14px) saturate(135%);
	color: var(--hwb-ink);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}

.hwb-save-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 6px 14px 6px 10px;
	border-radius: 999px;
	cursor: pointer;
	text-align: left;
}

.hwb-save-button:hover,
.hwb-dismiss-button:hover {
	border-color: rgba(0, 143, 140, .2);
	box-shadow: 0 14px 30px rgba(16, 41, 39, .12), 0 2px 8px rgba(16, 41, 39, .05);
	background: rgba(255, 255, 255, .98);
	color: var(--hwb-ink);
}

.hwb-save-button:focus-visible,
.hwb-dismiss-button:focus-visible {
	outline: 0;
	border-color: rgba(0, 143, 140, .42);
	box-shadow: 0 0 0 4px rgba(0, 143, 140, .11), 0 12px 30px rgba(16, 41, 39, .12);
}

.hwb-save-button:disabled,
.hwb-dismiss-button:disabled {
	cursor: wait;
}

.hwb-save-button__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: rgba(0, 143, 140, .08);
	color: var(--hwb-teal-dark);
	flex: 0 0 auto;
}

.hwb-save-button__icon svg,
.hwb-dismiss-button svg {
	display: block;
}

.hwb-bookmark-fill {
	opacity: 0;
	transform-origin: center;
	transform: scale(.8);
	transition: opacity .18s ease, transform .18s ease;
}

.hwb-save-button__copy {
	display: flex;
	align-items: center;
	min-width: 42px;
	line-height: 1;
}

.hwb-save-button__copy strong {
	font-size: 12px;
	font-weight: 760;
	letter-spacing: -.012em;
}

.hwb-save-button.is-saved {
	border-color: rgba(0, 143, 140, .22);
	background: rgba(244, 252, 251, .96);
	color: var(--hwb-teal-dark);
}

.hwb-save-button.is-saved .hwb-save-button__icon {
	background: var(--hwb-teal);
	color: #fff;
}

.hwb-save-button.is-saved .hwb-bookmark-fill {
	opacity: 1;
	transform: scale(1);
}

.hwb-save-button.is-saved .hwb-bookmark-outline {
	opacity: 0;
}

.hwb-save-button__spinner {
	width: 0;
	height: 16px;
	margin-left: 0;
	border: 2px solid rgba(0, 143, 140, .18);
	border-top-color: var(--hwb-teal);
	border-radius: 50%;
	opacity: 0;
	transition: width .18s ease, margin-left .18s ease, opacity .18s ease;
	flex: 0 0 auto;
}

.hwb-save-button.is-loading {
	opacity: .82;
}

.hwb-save-button.is-loading .hwb-save-button__spinner {
	width: 16px;
	margin-left: 2px;
	opacity: 1;
	animation: hwb-spin .75s linear infinite;
}

.hwb-dismiss-button {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	color: #7a8a87;
}

.hwb-toast {
	position: fixed;
	left: 50%;
	bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px));
	z-index: 10030;
	max-width: min(420px, calc(100vw - 32px));
	padding: 11px 16px;
	border: 1px solid rgba(0, 143, 140, .2);
	border-radius: 13px;
	background: #0e2927;
	box-shadow: 0 14px 36px rgba(12, 34, 32, .2);
	color: #fff;
	font-family: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 650;
	opacity: 0;
	pointer-events: none;
	transform: translate3d(-50%, 10px, 0);
	transition: opacity .2s ease, transform .2s ease;
}

.hwb-toast.is-visible {
	opacity: 1;
	transform: translate3d(-50%, 0, 0);
}

.hwb-toast.is-error {
	border-color: rgba(255, 143, 143, .25);
	background: #482326;
}

@keyframes hwb-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 1180px) {
	.hwb-dock,
	.hwb-dock.is-ready {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
	}

	.hwb-save-button {
		min-height: 48px;
		padding: 6px 14px 6px 10px;
	}

	.hwb-dismiss-button {
		width: 36px;
		height: 36px;
	}

	.hwb-toast {
		bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px));
	}
}

@media (max-width: 640px) {
	.hwb-dock,
	.hwb-dock.is-ready {
		right: max(12px, env(safe-area-inset-right));
		bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
	}

	.hwb-dock__inner {
		gap: 7px;
	}

	.hwb-save-button {
		padding: 6px 12px 6px 9px;
		min-height: 44px;
	}

	.hwb-save-button__icon {
		width: 26px;
		height: 26px;
	}

	.hwb-dismiss-button {
		width: 32px;
		height: 32px;
	}
}