/* Sizely – size guide */
.szg-trigger-wrap { margin: 0 0 14px; }
.szg-trigger {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 2px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--szg-accent, currentColor);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition: text-decoration-color 0.2s;
}
.szg-trigger:hover { text-decoration-color: currentColor; }
.szg-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.szg {
	--szg-accent: #0f172a;
	--szg-line: color-mix(in srgb, currentColor 12%, transparent);
	--szg-soft: color-mix(in srgb, currentColor 4%, transparent);
	line-height: 1.45;
	margin: 0 0 1.5em;
}
.szg *, .szg *::before, .szg *::after { box-sizing: border-box; }
.szg__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.szg .szg__title { margin: 0 !important; font-size: 1.25em; line-height: 1.25; letter-spacing: -0.01em; }

.szg__units { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--szg-soft); border: 1px solid var(--szg-line); }
.szg__units button {
	all: unset;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
	opacity: 0.7;
	transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.szg__units button[aria-pressed="true"] { background: var(--szg-accent); color: #fff; opacity: 1; }
.szg__units button:focus-visible { outline: 2px solid var(--szg-accent); outline-offset: 2px; }

.szg__scroll { overflow-x: auto; border: 1px solid var(--szg-line); border-radius: 14px; }
.szg__scroll:focus-visible { outline: 2px solid var(--szg-accent); outline-offset: 2px; }
.szg .szg__table { width: 100%; margin: 0 !important; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; border: 0 !important; }
.szg__table th, .szg__table td { padding: 10px 14px !important; text-align: center; white-space: nowrap; border: 0 !important; border-bottom: 1px solid var(--szg-line) !important; background: transparent; }
.szg__table thead th {
	position: sticky;
	top: 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--szg-accent);
}
.szg__table tbody th { font-weight: 700; text-align: left; position: sticky; left: 0; background: Canvas; }
.szg__table thead th:first-child { text-align: left; position: sticky; left: 0; z-index: 1; }
.szg__table tbody tr:nth-child(even) td, .szg__table tbody tr:nth-child(even) th { background-image: linear-gradient(var(--szg-soft), var(--szg-soft)); }
.szg__table tbody tr:hover td, .szg__table tbody tr:hover th { background-image: linear-gradient(color-mix(in srgb, var(--szg-accent) 10%, transparent), color-mix(in srgb, var(--szg-accent) 10%, transparent)); }
.szg__table tbody tr:last-child > * { border-bottom: 0 !important; }

.szg__how { display: flex; gap: 18px; align-items: flex-start; margin-top: 18px; }
.szg .szg__img { width: 160px; height: auto; flex: none; border-radius: 12px; margin: 0 !important; }
.szg__note { font-size: 14px; opacity: 0.85; }
.szg__note p { margin: 0 0 0.6em !important; }
.szg .szg__note-title { font-weight: 700; opacity: 1; margin-bottom: 4px !important; }
@media (max-width: 560px) { .szg__how { flex-direction: column; } .szg .szg__img { width: 100%; max-width: 260px; } }

/* Modal */
.szg-modal {
	width: min(820px, calc(100vw - 24px));
	max-height: calc(100vh - 40px);
	padding: 28px;
	border: 0;
	border-radius: 22px;
	color: #0f172a;
	background: #fff;
	box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.5);
	overflow: auto;
}
.szg-modal::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); }
.szg-modal[open] { animation: szg-in 0.25s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes szg-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.szg-modal .szg { margin: 0; }
.szg-modal .szg__head { padding-right: 44px; }
.szg-modal .szg__table tbody th { background: #fff; }
.szg-modal__x {
	all: unset;
	position: absolute;
	top: 18px;
	right: 18px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f1f5f9;
	cursor: pointer;
}
.szg-modal__x:hover { background: #e2e8f0; }
.szg-modal__x:focus-visible { outline: 2px solid var(--szg-accent); outline-offset: 2px; }
@media (max-width: 560px) { .szg-modal { padding: 20px 16px; } }
@media (prefers-reduced-motion: reduce) { .szg-modal[open] { animation: none; } }
@supports not (color: color-mix(in srgb, red 10%, white)) {
	.szg { --szg-line: rgba(127, 127, 127, 0.22); --szg-soft: rgba(127, 127, 127, 0.06); }
}