.cb-dice-roller {
				--cb-die-size: 64px;
				--cb-die-color: #1a1a1a;
				--cb-die-bg: #ffffff;
				--cb-button-color: #1a1a1a;
				--cb-box-bg: #fdfdfb;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 14px;
				max-width: 480px;
				padding: 20px 24px;
				border: 1px solid rgba(0, 0, 0, 0.12);
				border-radius: 14px;
				background: var(--cb-box-bg);
				font-family: inherit;
			}
			.cb-dice-tray {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 10px;
			}
			.cb-die {
				width: var(--cb-die-size);
				height: var(--cb-die-size);
				display: grid;
				place-items: center;
				border-radius: 18%;
				background: var(--cb-die-bg);
				box-shadow:
					inset 0 -3px 6px rgba(0, 0, 0, 0.18),
					inset 0 2px 3px rgba(255, 255, 255, 0.7),
					0 4px 10px rgba(0, 0, 0, 0.28);
				font-size: calc(var(--cb-die-size) * 0.55);
				font-weight: 700;
				font-variant-numeric: tabular-nums;
				color: var(--cb-die-color);
				user-select: none;
			}
			.cb-die.has-pips {
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: repeat(3, 1fr);
				place-items: stretch;
				padding: 14%;
				box-sizing: border-box;
			}
			.cb-pip {
				width: 72%;
				height: 72%;
				border-radius: 50%;
				background: var(--cb-die-color);
				place-self: center;
				box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35);
			}
			.cb-die.is-rolling {
				animation: cb-dice-shake 0.55s ease-in-out;
			}
			@keyframes cb-dice-shake {
				0%   { transform: translate(0, 0) rotate(0deg); }
				20%  { transform: translate(-3px, -2px) rotate(-8deg); }
				40%  { transform: translate(3px, 1px) rotate(6deg); }
				60%  { transform: translate(-2px, 2px) rotate(-5deg); }
				80%  { transform: translate(2px, -1px) rotate(4deg); }
				100% { transform: translate(0, 0) rotate(0deg); }
			}
			@media (prefers-reduced-motion: reduce) {
				.cb-die.is-rolling { animation: none; }
			}
			.cb-dice-total {
				margin: 0;
				min-height: 1.5em;
				line-height: 1.5;
				font-weight: 600;
			}
			.cb-dice-total.is-rolling {
				font-weight: 400;
				opacity: 0.6;
			}
			.cb-dice-button {
				cursor: pointer;
				padding: 10px 26px;
				border: 2px solid var(--cb-button-color);
				border-radius: 999px;
				background: var(--cb-button-color);
				color: #ffffff;
				font-size: 1rem;
				font-weight: 600;
				transition: transform 0.08s ease;
			}
			.cb-dice-button:hover  { transform: translateY(-1px); }
			.cb-dice-button:active { transform: translateY(1px); }
			.cb-dice-button:focus-visible {
				outline: 3px solid #4a90d9;
				outline-offset: 2px;
			}
			.cb-dice-button[disabled] {
				opacity: 0.6;
				cursor: default;
			}
			.cb-dice-games {
				width: 100%;
				margin-top: 8px;
				border-top: 1px solid rgba(0, 0, 0, 0.12);
				padding-top: 14px;
			}
			.cb-dice-games-title {
				margin: 0 0 10px;
				font-size: 1rem;
				text-align: center;
			}
			.cb-dice-game {
				border: 1px solid rgba(0, 0, 0, 0.12);
				border-radius: 10px;
				margin-bottom: 8px;
				background: #ffffff;
				overflow: hidden;
			}
			.cb-dice-game summary {
				cursor: pointer;
				padding: 10px 14px;
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				gap: 10px;
				font-weight: 600;
			}
			.cb-dice-game summary:focus-visible {
				outline: 3px solid #4a90d9;
				outline-offset: -3px;
			}
			.cb-dice-game[open] summary {
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			}
			.cb-dice-game-meta {
				font-size: 0.8rem;
				font-weight: 400;
				opacity: 0.65;
				white-space: nowrap;
			}
			.cb-dice-game-body {
				padding: 4px 14px 10px;
			}
			.cb-dice-game-body p {
				margin: 8px 0;
				font-size: 0.92rem;
				line-height: 1.5;
			}