.ns-audio button{
	appearance:none;-webkit-appearance:none;font:inherit;
	box-shadow:none;text-transform:none;letter-spacing:normal;
	min-width:0;min-height:0;background-image:none;
}
/* Narration player. Rides on the renderer's own custom properties where they
   exist (--ns-accent etc.) with literal fallbacks from the same palette, so it
   holds up even if the variable set changes. */

/* Variant chips. Rendered only when more than one file exists, so a single
   narration shows the heading and the controls and nothing else. */
.ns-audio-langs{
	display:flex;gap:6px;margin:0;flex:0 0 auto;
}
.ns-audio-lang{
	padding:2px 9px;font-size:11px;line-height:1.7;letter-spacing:.06em;
	text-transform:uppercase;cursor:pointer;border-radius:11px;
	background:transparent;color:rgba(255,255,255,.6);
	border:1px solid rgba(255,255,255,.22);
	transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.ns-audio-lang:hover{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.4)}
.ns-audio-lang.is-on{
	color:var(--ns-accent,#58A7F9);
	border-color:var(--ns-accent,#58A7F9);
	background:rgba(88,167,249,.12);
}

.ns-audio-ctl{
	display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;
}
/* The seek bar has the second line to itself. */
.ns-audio-line{
	display:flex;align-items:center;gap:10px;margin-top:12px;
}
.ns-audio .ns-audio-play{
	flex:0 0 auto;width:34px;height:34px;padding:0;
	display:inline-flex;align-items:center;justify-content:center;
	background-color:rgba(255,255,255,.08);background-image:none;
	border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:none;
	cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
.ns-audio .ns-audio-play:hover{
	background:rgba(255,255,255,.16);border-color:var(--ns-accent,#58A7F9);
}
.ns-audio .ns-audio-play svg{
	width:14px;height:14px;fill:var(--ns-accent,#58A7F9);display:block;
}
.ns-audio .ns-audio-ic-pause{display:none}
.ns-audio.is-playing .ns-audio-ic-pause{display:block}
.ns-audio.is-playing .ns-audio-ic-play{display:none}

.ns-audio-bar{
	flex:1 1 auto;height:5px;border-radius:3px;cursor:pointer;
	background:rgba(255,255,255,.14);overflow:hidden;min-width:60px;
}
.ns-audio-fill{
	height:100%;width:0;background:var(--ns-accent,#58A7F9);
	border-radius:3px;transition:width .15s linear;
}
.ns-audio-time{
	flex:0 0 auto;font-size:12px;letter-spacing:.02em;
	color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;
}

/* The top variant is the phone stand-in: below 900px the sidebar drops
   beneath the article, so the sidebar player goes with it and this slim bar
   takes over at the head of the flow (order 0 against the flexed flow's
   body order 1 / side order 2). */
/* The shared .ns-ed-akin size is clamp(20px,1.9vw,26px), sized for two-word
   headings like "Key takeaways". "Listen to this post" is four words in a
   narrow column and wrapped to a second line, so the player heading is scaled
   down on its own without touching the other boxes. */
.ns-audio .ns-ed-akin{font-size:clamp(15px,1.35vw,18px)}

.ns-audio--top{display:none}
@media (max-width:900px){
	.ns-audio--top{
		display:block;order:0;
		margin:0 0 clamp(16px,3vw,24px);
	}
	.ns-ed-side .ns-audio--side{display:none}
}