.cm-counter {
	width: 100%;
	box-sizing: border-box;
	background: var(--cm-background);
	color: var(--cm-text);
	border-radius: var(--cm-radius);
	padding: var(--cm-padding);
	margin: var(--cm-margin);
	border-width: var(--cm-border-width);
	border-style: var(--cm-border-style);
	border-color: transparent;
	box-shadow: none;
}
.cm-counter[style*="--cm-border:1"] { border-color: var(--cm-border-color); }
.cm-counter[style*="--cm-shadow:1"] { box-shadow: var(--cm-shadow-x) var(--cm-shadow-y) var(--cm-shadow-blur) var(--cm-shadow-spread) var(--cm-shadow-color); }
.cm-counter-inner { width: 100%; }
.cm-counter-clock-wrap { display:flex; justify-content:center; margin-bottom:22px; }
.cm-clock {
	position:relative;
	width:var(--cm-clock-size);
	height:var(--cm-clock-size);
	max-width:100%;
	box-sizing:border-box;
	flex:0 1 auto;
	border-radius:50%;
	background:transparent;
	border:1px solid color-mix(in srgb, var(--cm-clock-color) 45%, transparent);
	box-shadow:0 0 0 8px color-mix(in srgb, var(--cm-clock-color) 7%, transparent), 0 18px 50px color-mix(in srgb, var(--cm-clock-color) 15%, transparent), inset 0 0 30px rgba(15,23,42,.08);
	overflow:hidden;
}
.cm-clock::before { content:''; position:absolute; inset:5%; border-radius:50%; border:1px dashed color-mix(in srgb, var(--cm-clock-color) 24%, transparent); animation:cm-clock-spin 18s linear infinite; }
.cm-clock-glow { position:absolute; inset:8.5%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--cm-clock-color) 10%, transparent), transparent 68%); animation:cm-clock-pulse 2.2s ease-in-out infinite; }
.cm-clock-face { position:absolute; inset:11.5%; border-radius:50%; background:var(--cm-clock-bg); backdrop-filter:blur(2px); border:1px solid color-mix(in srgb, var(--cm-clock-color) 28%, transparent); }
.cm-clock-mark { position:absolute; left:50%; top:50%; width:3px; height:3.8%; margin-left:-1.5px; border-radius:3px; background:var(--cm-clock-color); transform-origin:50% calc(var(--cm-mark-distance) + 1.5px); }
.cm-mark-12 { transform:translate(-50%, calc(var(--cm-mark-distance) * -1)); }
.cm-mark-3 { transform:translate(var(--cm-mark-distance), -50%) rotate(90deg); }
.cm-mark-6 { transform:translate(-50%, calc(var(--cm-mark-distance) * .90)) rotate(180deg); }
.cm-mark-9 { transform:translate(calc(var(--cm-mark-distance) * -1), -50%) rotate(270deg); }
.cm-clock-hand { position:absolute; left:50%; top:50%; display:block; border-radius:999px; transform-origin:50% 100%; transform:translate(-50%, -100%) rotate(0deg); }
.cm-clock-hour { width:var(--cm-hour-width); height:var(--cm-hour-length); background:var(--cm-hour-color); }
.cm-clock-minute { width:var(--cm-minute-width); height:var(--cm-minute-length); background:var(--cm-minute-color); }
.cm-clock-second { width:var(--cm-second-width); height:var(--cm-second-length); background:var(--cm-second-color); box-shadow:0 0 8px color-mix(in srgb, var(--cm-second-color) 50%, transparent); }
.cm-clock-center { position:absolute; left:50%; top:50%; width:max(8px, calc(var(--cm-clock-size) * .045)); height:max(8px, calc(var(--cm-clock-size) * .045)); transform:translate(-50%,-50%); border-radius:50%; background:var(--cm-clock-color); box-shadow:0 0 0 3px var(--cm-clock-bg); }
.cm-clock-digital { position:absolute; left:50%; top:67%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; min-width:44%; max-width:78%; padding:3% 4%; border-radius:8px; background:color-mix(in srgb, var(--cm-clock-bg) 38%, transparent); backdrop-filter:blur(3px); pointer-events:none; opacity:var(--cm-target-opacity); text-align:center; box-sizing:border-box; }
.cm-clock-date,.cm-clock-deadline { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-clock-date { font-size:var(--cm-target-size); font-weight:800; letter-spacing:.03em; color:var(--cm-target-color); line-height:1.1; }
.cm-clock-deadline { font-size:calc(var(--cm-target-size) * .95); font-weight:800; letter-spacing:.03em; color:var(--cm-clock-color); line-height:1.1; }
@keyframes cm-clock-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes cm-clock-pulse { 0%,100%{opacity:.35;transform:scale(.98)} 50%{opacity:.85;transform:scale(1.02)} }
.cm-counter-title { color:var(--cm-text); font-size:16px; font-weight:600; line-height:1.4; margin-bottom:12px; }
.cm-counter-number { color:var(--cm-number); font-size:var(--cm-font-size); font-weight:var(--cm-font-weight); line-height:1; }
.cm-prefix,.cm-suffix { display:inline; margin:0 8px; font-size:.4em; font-weight:600; vertical-align:middle; }
.cm-time-units { display:inline-flex; align-items:flex-start; justify-content:inherit; gap:.08em; max-width:100%; }
.cm-time-unit { display:inline-flex; flex-direction:column; align-items:center; min-width:1.3em; }
.cm-time-unit .cm-value { display:block; font-variant-numeric:tabular-nums; }
.cm-time-label { display:block; margin-top:8px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.55; }
.cm-time-separator { font-size:.7em; line-height:1.1; opacity:.35; padding-top:.05em; }
.cm-finished .cm-counter-number { filter:saturate(.7); }
@media (max-width:600px) {
	.cm-counter-number { font-size:clamp(30px,12vw,var(--cm-font-size)); }
	.cm-counter { padding:calc(var(--cm-padding) * .75); }
	.cm-time-label { font-size:9px; margin-top:5px; }
	.cm-prefix,.cm-suffix { margin:0 4px; }
	.cm-clock { width:min(var(--cm-clock-size), 88vw); height:min(var(--cm-clock-size), 88vw); }
	.cm-clock-date,.cm-clock-deadline { font-size:clamp(8px, 3.2vw, var(--cm-target-size)); }
}