/* ------------------------------------------------------------------------
   M. Curtis McCoy — Console Front Screen
   Same tokens and lighting as the Console UI login screen.
   ------------------------------------------------------------------------ */

:root{
	--mcm-bg:#08090A;
	--mcm-ink:#F4F5F6;
	--mcm-muted:#8A9099;
	--mcm-quiet:#767C85;              /* 4.7:1 on --mcm-bg — passes AA at 11px */
	--mcm-line:rgba(255,255,255,.10);
	--mcm-line-soft:rgba(255,255,255,.06);
	--mcm-cell:rgba(12,13,15,.86);
	--mcm-accent:#FFFFFF;
	--mcm-accent-rgb:255,255,255;
	--mcm-accent-ink:#0A0B0C;
	--mcm-status:#35D07F;
	--mcm-status-rgb:53,208,127;
	--mcm-warn:#F5A524;
	--mcm-warn-rgb:245,165,36;
	--mcm-danger:#E5484D;
	--mcm-danger-rgb:229,72,77;
	--mcm-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;

	/* Live state — JS flips data-state on <body>. */
	--mcm-state:var(--mcm-status);
	--mcm-state-rgb:var(--mcm-status-rgb);
}

body[data-state="degraded"]{ --mcm-state:var(--mcm-warn);   --mcm-state-rgb:var(--mcm-warn-rgb); }
body[data-state="offline"] { --mcm-state:var(--mcm-danger); --mcm-state-rgb:var(--mcm-danger-rgb); }

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

html{ background:var(--mcm-bg); height:100%; -webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; }

body{
	margin:0;
	min-height:100vh;
	min-height:100dvh;
	color:var(--mcm-ink);
	font:400 15px/1.5 var(--mcm-font);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	/* Three-point lighting, matched to the login screen:
	   warm-neutral key from the top, cool fill low right, near-black base. */
	background:
		radial-gradient(1240px 700px at 50% -16%, #25292E 0%, rgba(37,41,46,0) 60%),
		radial-gradient(900px 600px at 92% 112%, rgba(150,158,168,.13) 0%, rgba(150,158,168,0) 70%),
		var(--mcm-bg);
	background-attachment:fixed;
	overflow-x:hidden;
	overflow-x:clip;
}

a{ color:inherit; }

/* Page shell — holds the layout and clips the radar to the page, so a large
   radar never adds scrollbars. Grows with content, so scrolling still works. */
.mcm-shell{
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	min-height:100dvh;
	overflow:hidden;
	overflow:clip;
}

.mcm-sr{
	position:absolute !important;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}

/* Console grid ------------------------------------------------------------ */

.mcm-grid{
	position:fixed;
	inset:0;
	z-index:0;
	pointer-events:none;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size:64px 64px;
	background-position:center center;
	-webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 46%, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
	        mask-image:radial-gradient(ellipse 58% 52% at 50% 46%, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
}

/* Top bar ----------------------------------------------------------------- */

.mcm-top{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:28px clamp(16px, 4vw, 48px);
}

.mcm-brand{
	display:flex;
	align-items:center;
	gap:14px;
	min-height:44px;
	color:var(--mcm-ink);
	text-decoration:none;
	border-radius:6px;
}

.mcm-brand__name{
	font-size:15px;
	font-weight:600;
	letter-spacing:.055em;
	white-space:nowrap;
}

.mcm-brand__logo{ display:block; height:auto; width:calc(var(--mcm-logo-k, 160) * 1px); max-width:160px; }

.mcm-brand__sub{
	padding-left:14px;
	border-left:1px solid var(--mcm-line);
	font-size:9.5px;
	line-height:18px;
	font-weight:600;
	letter-spacing:.36em;
	text-transform:uppercase;
	color:var(--mcm-muted);
	white-space:nowrap;
}

.mcm-top__signin{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:40px;
	padding:0 18px;
	border:1px solid var(--mcm-line);
	border-radius:10px;
	background:rgba(255,255,255,.02);
	color:var(--mcm-ink);
	font-size:11px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	text-decoration:none;
	white-space:nowrap;
	transition:border-color .15s ease, background-color .15s ease;
}

.mcm-top__signin:hover{
	border-color:rgba(255,255,255,.28);
	background:rgba(255,255,255,.06);
}

/* Screen tabs — the same bar as the wall screens (/1–/4), Home current.
   They take the top-right corner (the header button is dropped when they
   show; the center Open console button stays), leaving the middle clear
   for the radar. When the row runs out of room they wrap, still right. */
.mcm-top:has(.mcm-tabs){ flex-wrap:wrap; row-gap:16px; }
.mcm-tabs{
	flex:none;
	display:flex;
	gap:4px;
	margin:0 0 0 auto;
	padding:4px;
	border:1px solid var(--mcm-line);
	border-radius:12px;
	background:rgba(255,255,255,.025);
	overflow-x:auto;
	scrollbar-width:none;
}
.mcm-tabs::-webkit-scrollbar{ display:none; }

.mcm-tab{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:38px;
	padding:0 14px;
	border-radius:9px;
	color:var(--mcm-muted);
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.04em;
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .15s ease, color .15s ease;
}
.mcm-tab:hover{ color:var(--mcm-ink); background:rgba(255,255,255,.05); }
.mcm-tab[aria-current="page"]{ color:var(--mcm-accent-ink); background:var(--mcm-accent); }
.mcm-tab__n{ font-size:10px; letter-spacing:.14em; opacity:.7; }
.mcm-short{ display:none; }



/* Status ------------------------------------------------------------------ */

.mcm-main{
	position:relative;
	z-index:1;
	flex:1 0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:16px 16px 40px;
	text-align:center;
}

.mcm-status{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:8px 0;
}

.mcm-radar{
	position:absolute;
	left:50%;
	top:50%;
	z-index:-1;
	width:640px;
	height:640px;
	transform:translate(-50%, -50%);
	pointer-events:none;
	border-radius:50%;
	overflow:hidden;
	-webkit-mask-image:radial-gradient(closest-side, #000 45%, transparent 100%);
	        mask-image:radial-gradient(closest-side, #000 45%, transparent 100%);
}

.mcm-radar span{
	position:absolute;
	inset:0;
	margin:auto;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.055);
}

.mcm-radar span:nth-child(1){ width:24%; height:24%; }
.mcm-radar span:nth-child(2){ width:50%; height:50%; }
.mcm-radar span:nth-child(3){ width:76%; height:76%; }

.mcm-sweep{
	position:absolute;
	inset:0;
	border-radius:50%;
	background:conic-gradient(from 0deg,
		rgba(var(--mcm-state-rgb), 0) 0deg,
		rgba(var(--mcm-state-rgb), 0) 315deg,
		rgba(var(--mcm-state-rgb), .05) 358.6deg,
		rgba(var(--mcm-state-rgb), .30) 359.4deg,
		rgba(var(--mcm-state-rgb), 0) 360deg);
	animation:mcm-spin 10s linear infinite;
}

.mcm-headline{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:18px;
	margin:0;
	font-size:clamp(25px, 3.3vw, 40px);
	font-weight:500;
	line-height:1.15;
	letter-spacing:-.012em;
	color:var(--mcm-ink);
}

.mcm-dot{
	position:relative;
	flex:none;
	width:12px;
	height:12px;
	border-radius:50%;
	background:var(--mcm-state);
	box-shadow:
		0 0 0 4px rgba(var(--mcm-state-rgb), .16),
		0 0 22px rgba(var(--mcm-state-rgb), .55);
	transition:background-color .4s ease, box-shadow .4s ease;
}

.mcm-dot::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:50%;
	border:1px solid rgba(var(--mcm-state-rgb), .7);
	animation:mcm-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}

.mcm-checked{
	margin:14px 0 0;
	font-size:13px;
	font-weight:500;
	letter-spacing:.02em;
	color:var(--mcm-muted);
	font-variant-numeric:tabular-nums;
}

/* Readout ----------------------------------------------------------------- */

.mcm-telemetry{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:1px;
	width:min(780px, 100%);
	margin:56px 0 0;
	padding:0;
	border:1px solid var(--mcm-line);
	border-radius:16px;
	background:var(--mcm-line-soft);
	overflow:hidden;
	text-align:left;
	box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.mcm-cell{
	min-width:0;
	padding:18px 20px 17px;
	background:var(--mcm-cell);
	-webkit-backdrop-filter:blur(10px);
	        backdrop-filter:blur(10px);
}

.mcm-cell dt{
	margin:0 0 9px;
	font-size:10px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--mcm-muted);
}

.mcm-cell dd{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0;
	min-height:28px;
	font-size:17px;
	font-weight:500;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}

.mcm-val{ display:inline-flex; align-items:baseline; }

.mcm-unit{
	margin-left:5px;
	font-size:12px;
	font-weight:600;
	letter-spacing:.08em;
	color:var(--mcm-muted);
}

.mcm-spark{
	flex:1 1 auto;
	min-width:28px;
	max-width:84px;
	height:26px;
	overflow:visible;
}

.mcm-spark polyline{
	fill:none;
	stroke:var(--mcm-state);
	stroke-width:1.5;
	stroke-linecap:round;
	stroke-linejoin:round;
	vector-effect:non-scaling-stroke;
	filter:drop-shadow(0 0 4px rgba(var(--mcm-state-rgb), .45));
	transition:stroke .4s ease;
}

.mcm-lock{
	flex:none;
	width:15px;
	height:15px;
	fill:none;
	stroke:var(--mcm-state);
	stroke-width:1.5;
	stroke-linecap:round;
	transition:stroke .4s ease;
}

/* Primary action ---------------------------------------------------------- */

.mcm-cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	min-width:248px;
	min-height:52px;
	margin-top:40px;
	padding:0 30px;
	border-radius:10px;
	background:var(--mcm-accent);
	color:var(--mcm-accent-ink);
	font-size:12px;
	font-weight:700;
	letter-spacing:.22em;
	text-transform:uppercase;
	text-decoration:none;
	box-shadow:
		0 12px 32px rgba(0,0,0,.5),
		inset 0 -1px 0 rgba(0,0,0,.12);
	transition:transform .15s ease, box-shadow .15s ease;
}

.mcm-cta svg{
	width:16px;
	height:16px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
	transition:transform .15s ease;
}

.mcm-cta:hover{
	transform:translateY(-1px);
	box-shadow:
		0 16px 40px rgba(0,0,0,.55),
		0 0 0 4px rgba(var(--mcm-accent-rgb), .14);
}

.mcm-cta:hover svg{ transform:translateX(3px); }
.mcm-cta:active{ transform:translateY(0); }

/* Secondary link under the main button (repository). Quiet by design:
   one primary action, one small secondary. */
.mcm-alt{
	display:inline-flex;
	align-items:center;
	gap:9px;
	min-height:44px;
	margin-top:18px;
	padding:0 12px;
	border-radius:8px;
	color:var(--mcm-muted);
	font-size:11px;
	font-weight:600;
	letter-spacing:.2em;
	text-transform:uppercase;
	text-decoration:none;
	transition:color .15s ease;
}
.mcm-alt svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.mcm-alt .mcm-alt__out{ width:11px; height:11px; opacity:.7; transition:transform .15s ease; }
.mcm-alt:hover{ color:var(--mcm-ink); }
.mcm-alt:hover .mcm-alt__out{ transform:translate(2px, -2px); }

/* Focus — keyboard only, matches the login screen ring. */
.mcm-brand:focus-visible,
.mcm-top__signin:focus-visible,
.mcm-tab:focus-visible,
.mcm-alt:focus-visible,
.mcm-cta:focus-visible{
	outline:2px solid var(--mcm-accent);
	outline-offset:4px;
}

/* Footer ------------------------------------------------------------------ */

.mcm-foot{
	position:relative;
	z-index:1;
	padding:20px 16px calc(26px + env(safe-area-inset-bottom));
	text-align:center;
	font-size:11px;
	letter-spacing:.04em;
	color:var(--mcm-quiet);
}

/* Motion ------------------------------------------------------------------ */

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

@keyframes mcm-ping {
	0%   { transform:scale(1);   opacity:.9; }
	80%  { opacity:0; }
	100% { transform:scale(3.6); opacity:0; }
}

@keyframes mcm-rise { to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: no-preference){
	.mcm-rise{
		opacity:0;
		transform:translateY(8px);
		animation:mcm-rise .8s cubic-bezier(.2,.7,.2,1) forwards;
		animation-delay:calc(var(--i, 0) * 90ms + 60ms);
	}
}

/* Honour a computer's "reduce motion" setting unless Settings → Console
   Front → "Animate on every computer" is on (body.mcm-motion-always). */
@media (prefers-reduced-motion: reduce){
	body:not(.mcm-motion-always) .mcm-sweep{ display:none; }
	body:not(.mcm-motion-always) .mcm-dot::after{ animation:none; opacity:0; }
}

.mcm-still .mcm-sweep{ display:none; }
.mcm-still .mcm-dot::after{ animation:none; opacity:0; }

/* Degraded / offline: sweep stops, so movement never implies health. */
body[data-state="offline"] .mcm-sweep{ animation-play-state:paused; opacity:.4; }

/* Phone ------------------------------------------------------------------- */

@media (max-width: 640px){
	.mcm-top{ padding:16px; }

	.mcm-brand{
		flex-direction:column;
		align-items:flex-start;
		justify-content:center;
		gap:2px;
	}
	.mcm-brand__sub{
		padding-left:0;
		border-left:0;
		font-size:8.5px;
		line-height:14px;
		letter-spacing:.32em;
	}

	.mcm-top__signin{ min-height:44px; padding:0 16px; }

	.mcm-top:has(.mcm-tabs){ flex-wrap:wrap; }
	.mcm-tabs{ flex:1 0 100%; margin:0; padding:3px; gap:3px; }
	.mcm-tab{ flex:1 1 0; justify-content:center; min-height:44px; padding:0 8px; font-size:13px; }
	.mcm-tab__n,.mcm-full{ display:none; }
	.mcm-short{ display:inline; }

	.mcm-main{ padding:8px 16px 28px; }

	.mcm-radar{ width:480px; height:480px; }

	.mcm-headline{ gap:14px; }
	.mcm-dot{ width:10px; height:10px; }

	.mcm-telemetry{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		margin-top:40px;
	}
	.mcm-cell{ padding:15px 16px 14px; }
	.mcm-cell dd{ font-size:16px; }

	.mcm-cta{
		width:100%;
		max-width:420px;
		margin-top:28px;
	}
}

@media (max-width: 360px){
	.mcm-headline{ font-size:22px; }
	.mcm-cell dd{ font-size:15px; }
}

/* Short laptop screens — keep everything above the fold. */
@media (min-width: 641px) and (max-height: 700px){
	.mcm-top{ padding-top:20px; padding-bottom:20px; }
	.mcm-telemetry{ margin-top:40px; }
	.mcm-cta{ margin-top:30px; }
}

/* Large display ------------------------------------------------------------
   Settings → Console Front → Desktop size → Large. Screens 1024px and up.
   Every size is measured in --u: one hundredth of a 16:9 screen's width,
   capped by height, so the layout fills a 1920×1080 TV the way it fills a
   laptop and never overflows a shorter window (content ≈ 47u ≤ 84% of the
   height). max() floors keep every size at or above the Standard layout.
   Reference at 1920×1080 (u = 19.2px): status 124px, readout values 46px,
   labels 24px, button text 24px. */

@media (min-width: 1024px){

	.mcm-size-large{ --u:min(1vw, 1.7778vh); }

	.mcm-size-large .mcm-grid{
		background-size:max(64px, 5 * var(--u)) max(64px, 5 * var(--u));
	}

	/* Top bar */
	.mcm-size-large .mcm-top{
		padding:max(28px, 2.3 * var(--u)) max(48px, 3.3 * var(--u));
	}
	.mcm-size-large .mcm-brand{
		gap:max(14px, 1.25 * var(--u));
		min-height:max(44px, 3.1 * var(--u));
	}
	.mcm-size-large .mcm-brand__name{ font-size:max(15px, 1.56 * var(--u)); }
	.mcm-size-large .mcm-brand__logo{
		width:calc(var(--mcm-logo-k, 160) * max(1px, .104 * var(--u)));
		max-width:none;
	}
	.mcm-size-large .mcm-brand__sub{
		padding-left:max(14px, 1.25 * var(--u));
		font-size:max(9.5px, .84 * var(--u));
		line-height:max(18px, 1.5 * var(--u));
	}
	.mcm-size-large .mcm-top__signin{
		min-height:max(40px, 3.1 * var(--u));
		padding:0 max(18px, 1.65 * var(--u));
		border-radius:max(10px, .73 * var(--u));
		font-size:max(11px, .94 * var(--u));
	}
	/* Tabs: .9u equals the wall's 1rem, so the bar is the same size on every screen. */
	.mcm-size-large .mcm-tabs{
		gap:max(4px, .27 * var(--u));
		padding:max(4px, .27 * var(--u));
		border-radius:max(12px, .81 * var(--u));
	}
	.mcm-size-large .mcm-tab{
		gap:max(8px, .5 * var(--u));
		min-height:max(38px, 2.34 * var(--u));
		padding:0 max(14px, .9 * var(--u));
		border-radius:max(9px, .56 * var(--u));
		font-size:max(12.5px, .81 * var(--u));
	}
	.mcm-size-large .mcm-tab__n{ font-size:max(10px, .648 * var(--u)); }

	/* Status */
	.mcm-size-large .mcm-main{
		padding:max(16px, 1 * var(--u)) 16px max(40px, 2 * var(--u));
	}
	.mcm-size-large .mcm-radar{
		width:max(640px, 73 * var(--u));
		height:max(640px, 73 * var(--u));
	}
	.mcm-size-large .mcm-headline{
		gap:max(18px, 1.9 * var(--u));
		font-size:max(40px, 6.45 * var(--u));
	}
	.mcm-size-large .mcm-dot{
		width:max(12px, 1.35 * var(--u));
		height:max(12px, 1.35 * var(--u));
		box-shadow:
			0 0 0 max(4px, .42 * var(--u)) rgba(var(--mcm-state-rgb), .16),
			0 0 max(22px, 2.3 * var(--u)) rgba(var(--mcm-state-rgb), .55);
	}
	.mcm-size-large .mcm-dot::after{ border-width:max(1px, .1 * var(--u)); }
	.mcm-size-large .mcm-checked{
		margin-top:max(14px, 1.15 * var(--u));
		font-size:max(13px, 1.56 * var(--u));
	}

	/* Readout */
	.mcm-size-large .mcm-telemetry{
		grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
		width:min(96vw, max(780px, 86 * var(--u)));
		margin-top:max(56px, 3.65 * var(--u));
		border-radius:max(16px, 1.46 * var(--u));
		box-shadow:0 max(24px, 1.6 * var(--u)) max(60px, 4 * var(--u)) rgba(0,0,0,.5);
	}
	.mcm-size-large .mcm-cell{
		padding:max(18px, 1.77 * var(--u)) max(20px, 1.9 * var(--u)) max(17px, 1.67 * var(--u));
	}
	.mcm-size-large .mcm-cell dt{
		margin-bottom:max(9px, .83 * var(--u));
		font-size:max(10px, 1.25 * var(--u));
		letter-spacing:.16em;
	}
	.mcm-size-large .mcm-cell dd{
		gap:max(10px, .94 * var(--u));
		min-height:max(28px, 3.1 * var(--u));
		font-size:max(17px, 2.4 * var(--u));
	}
	.mcm-size-large .mcm-unit{
		margin-left:max(5px, .4 * var(--u));
		font-size:max(12px, 1.2 * var(--u));
	}
	.mcm-size-large .mcm-spark{
		min-width:max(28px, 3 * var(--u));
		max-width:max(84px, 8.85 * var(--u));
		height:max(26px, 2.5 * var(--u));
	}
	.mcm-size-large .mcm-spark polyline{ stroke-width:max(1.5px, .12 * var(--u)); }
	.mcm-size-large .mcm-lock{
		width:max(15px, 1.56 * var(--u));
		height:max(15px, 1.56 * var(--u));
	}

	/* Primary action */
	.mcm-size-large .mcm-cta{
		gap:max(12px, 1 * var(--u));
		min-width:max(248px, 24 * var(--u));
		min-height:max(52px, 5 * var(--u));
		margin-top:max(40px, 3.33 * var(--u));
		padding:0 max(30px, 2.5 * var(--u));
		border-radius:max(10px, .94 * var(--u));
		font-size:max(12px, 1.25 * var(--u));
	}
	.mcm-size-large .mcm-alt{
		gap:max(9px, .75 * var(--u));
		min-height:max(44px, 3 * var(--u));
		margin-top:max(18px, 1.5 * var(--u));
		font-size:max(11px, .94 * var(--u));
	}
	.mcm-size-large .mcm-alt svg{ width:max(14px, 1.15 * var(--u)); height:max(14px, 1.15 * var(--u)); }
	.mcm-size-large .mcm-alt .mcm-alt__out{ width:max(11px, .9 * var(--u)); height:max(11px, .9 * var(--u)); }
	.mcm-size-large .mcm-cta svg{
		width:max(16px, 1.56 * var(--u));
		height:max(16px, 1.56 * var(--u));
	}

	/* Footer */
	.mcm-size-large .mcm-foot{
		padding:max(20px, 1.46 * var(--u)) 16px calc(max(26px, 1.46 * var(--u)) + env(safe-area-inset-bottom));
		font-size:max(11px, .94 * var(--u));
	}
}

/* Eight tabs: never squeeze below their labels — on a phone the strip
   scrolls sideways, like the wall screens. */
.mcm-tabs .mcm-tab{ flex:1 0 auto; }

/* Screen cycle — same button and progress line as the wall screens. */
@view-transition { navigation: auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.5s; }
.mcm-cycle{
	display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 15px 0 11px; margin-left:auto;
	border:1px solid var(--mcm-line); border-radius:10px; background:rgba(255,255,255,.02); color:var(--mcm-muted);
	font:inherit; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
	transition:border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .3s ease;
}
.mcm-cycle + .mcm-tabs{ margin-left:0; }
.mcm-cycle:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:var(--mcm-ink); }
.mcm-cycle:focus-visible{ outline:2px solid var(--mcm-accent); outline-offset:3px; }
.mcm-cycle[hidden]{ display:none; }
.mcm-cycle .cyc-ico{ width:20px; height:20px; flex:none; overflow:visible; }
.mcm-cycle .cyc-track{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.4; }
.mcm-cycle .cyc-fill{ fill:none; stroke:var(--mcm-status); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:10px 10px; }
.mcm-cycle .cyc-play{ fill:currentColor; }
.mcm-cycle .cyc-pause{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; display:none; }
.mcm-cycle.is-on{ color:var(--mcm-ink); border-color:rgba(var(--mcm-status-rgb), .55); background:rgba(var(--mcm-status-rgb), .1); box-shadow:0 0 18px rgba(var(--mcm-status-rgb), .22); }
.mcm-cycle.is-on .cyc-play{ display:none; }
.mcm-cycle.is-on .cyc-pause{ display:inline; }
.mcm-cycling .mcm-cycle .cyc-fill{ animation:mcm-cyc-fill var(--cycle, 10s) linear forwards; filter:drop-shadow(0 0 4px rgba(var(--mcm-status-rgb), .8)); }
.mcm-cycling .mcm-tab[aria-current="page"]{ position:relative; overflow:hidden; }
.mcm-cycling .mcm-tab[aria-current="page"]::after{
	content:""; position:absolute; left:0; right:0; bottom:0; height:3px; transform-origin:left; transform:scaleX(0);
	background:var(--mcm-status); box-shadow:0 0 10px rgba(var(--mcm-status-rgb), .9);
	animation:mcm-cyc-line var(--cycle, 10s) linear forwards;
}
.mcm-cycle-paused .mcm-cycle .cyc-fill,.mcm-cycle-paused .mcm-tab[aria-current="page"]::after{ animation-play-state:paused; }
@keyframes mcm-cyc-fill{ to { stroke-dashoffset:0; } }
@keyframes mcm-cyc-line{ to { transform:scaleX(1); } }
@media (max-width: 720px){
	.mcm-cycle{ padding:0 11px; }
	.mcm-cycle .cyc-l{ display:none; }
}