.hdp {
	--r: #968f96;
	--rl: #efe6f3;
	--j: #797759;
	--jl: #c8c6b9;
	--l: #a8692a;
	--ll: #f6e8d6;
	--ink: #2b2430;
	--mute: #6b6370;
	--line: #d9d3dc;
	box-sizing: border-box;
	container-type: inline-size;
	max-width: 760px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--ink);
}

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

.hdp-types {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(4px, 1cqi, 8px);
	margin: 0 0 22px;
}

.hdp button.hdp-t {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-width: 0;
	margin: 0;
	font: inherit;
	color: var(--ink);
	background: none;
	border: 1px solid var(--line);
	box-shadow: none;
	padding: 6px 2px 5px;
	cursor: pointer;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.15;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hdp button.hdp-t img {
	display: block;
	width: clamp(18px, 6cqi, 30px);
	height: auto;
	margin: 0 auto 4px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	pointer-events: none;
}

.hdp button.hdp-t span {
	display: block;
	max-width: 100%;
	font-size: clamp(8px, 2.3cqi, 12px);
	font-weight: 600;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.hdp button.hdp-t:hover,
.hdp button.hdp-t:focus-visible {
	border-color: var(--r);
	background: none;
	color: var(--ink);
}

.hdp button.hdp-t:focus-visible {
	outline: 2px solid var(--r);
	outline-offset: 2px;
}

.hdp button.hdp-t[aria-pressed="true"],
.hdp button.hdp-t[aria-pressed="true"]:hover,
.hdp button.hdp-t[aria-pressed="true"]:focus-visible {
	background: var(--r);
	border-color: var(--r);
	color: #fff;
}

.hdp svg.hdp-wheel {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.hdp-wheel text {
	font-family: inherit;
}

.hdp-ring {
	fill: none;
	stroke: var(--line);
	stroke-dasharray: 3 5;
}

.hdp-core {
	fill: #faf8fb;
	stroke: var(--line);
}

.hdp-n {
	cursor: pointer;
	outline: none;
}

.hdp-r {
	--c: var(--r);
	--cl: var(--rl);
}

.hdp-j {
	--c: var(--j);
	--cl: var(--jl);
}

.hdp-l {
	--c: var(--l);
	--cl: var(--ll);
}

.hdp-n circle {
	fill: var(--cl);
	stroke: var(--c);
	stroke-width: 1.5;
	transition: stroke-width 0.15s, fill 0.15s;
}

.hdp .hdp-n text {
	font-size: 15px;
	font-weight: 600;
	fill: var(--c);
	pointer-events: none;
}

.hdp-n:hover circle,
.hdp-n:focus-visible circle {
	stroke-width: 4;
}

.hdp-n:focus-visible {
	outline: none;
}

.hdp-n.on circle {
	fill: var(--c);
	stroke-width: 4;
}

.hdp .hdp-n.on text {
	fill: #fff;
}

.hdp .hdp-num {
	font-size: 34px;
	font-weight: 600;
	fill: var(--ink);
}

.hdp .hdp-nick {
	font-size: 16px;
	font-weight: 600;
	fill: var(--ink);
}

.hdp .hdp-lines,
.hdp .hdp-extra {
	font-size: 13px;
	fill: var(--mute);
}

.hdp-wheel-wrap {
	position: relative;
}

.hdp a.hdp-button {
	display: inline-block;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--c, var(--r));
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.hdp a.hdp-button:hover,
.hdp a.hdp-button:focus-visible {
	background: color-mix(in srgb, var(--c, var(--r)) 84%, #000);
	color: #fff;
}

.hdp a.hdp-button:focus-visible {
	outline: 2px solid var(--c, var(--r));
	outline-offset: 2px;
}

.hdp a.hdp-center-link {
	position: absolute;
	left: 50%;
	top: 69%;
	z-index: 2;
	max-width: 38%;
	transform: translate(-50%, -50%);
}

.hdp a.hdp-center-link[hidden] {
	display: none;
}

.hdp-key {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	font-size: 14px;
	color: var(--mute);
	margin: 8px 0 14px;
}

.hdp-key i {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: -1px;
}

.hdp-swatch-r {
	background: var(--r);
}

.hdp-swatch-j {
	background: var(--j);
}

.hdp-swatch-l {
	background: var(--l);
}

.hdp-panel:empty {
	display: none;
}

.hdp-panel {
	border-top: 1px solid var(--line);
	padding-top: 20px;
}

.hdp .hdp-panel h3 {
	font-size: 1.25em;
	font-weight: 600;
	margin: 0 0 16px;
	padding: 0;
}

.hdp-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px 36px;
}

.hdp-card {
	border-left: 3px solid var(--c);
	padding-left: 16px;
}

.hdp .hdp-card h4 {
	margin: 0 0 2px;
	padding: 0;
	font-size: 1.05em;
	font-weight: 600;
}

.hdp-card p {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.55;
}

.hdp-card .m {
	font-size: 13px;
	color: var(--mute);
}

.hdp-card dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 12px;
	row-gap: 4px;
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.hdp-card dt,
.hdp-card dd {
	margin: 0;
}

.hdp-card dt {
	color: var(--mute);
}

.hdp-card .hdp-more {
	margin-top: 14px;
}

p.hdp-key span {
    font-size: 1rem;
}
@media screen and (max-width: 767px) {
	.hdp a.hdp-center-link {
		font-size: 1rem;
	}
}