/* =====================================================
   ClearMic · light theme, minimal
   ===================================================== */

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

* {
	margin: 0;
	padding: 0;
}

:root {
	color-scheme: light;

	--bg: #fafaf9;
	--surface: #ffffff;
	--surface-2: #f5f5f4;
	--surface-3: #ebebe9;

	--text: #0a0a0a;
	--text-2: #525252;
	--text-3: #a3a3a3;
	--text-4: #d4d4d4;

	--border: #ececeb;
	--border-2: #dcdcda;

	--accent: #373cff;
	--accent-hover: #2a2ee8;
	--accent-soft: #eef0ff;
	--accent-ring: rgba(55, 60, 255, 0.16);

	--ok: #16a34a;
	--ok-soft: #ecfdf5;
	--err: #dc2626;
	--err-soft: #fef2f2;
	--amber: #b45309;
	--amber-soft: #fef3c7;

	--font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--r-sm: 6px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-xl: 16px;

	--ease: cubic-bezier(0.2, 0, 0, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);

	--shadow-card:
		0 1px 2px rgba(15, 15, 15, 0.04),
		0 4px 16px rgba(15, 15, 15, 0.04);
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.005em;
	text-wrap: pretty;
	animation: pageIn 480ms var(--ease-out-expo) both;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

@keyframes pageIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

::selection {
	background: var(--accent);
	color: white;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
}

[hidden] {
	display: none !important;
}

/* ===== utilities ===== */

.mono {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
}

.tabular {
	font-variant-numeric: tabular-nums;
}

.hint {
	font-size: 12px;
	color: var(--text-3);
	line-height: 1.5;
	text-wrap: pretty;
}

.step > h1 + .hint {
	text-wrap: balance;
}

/* ===== nav ===== */

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	max-width: 920px;
	margin: 0 auto;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text);
}

.brand-mark {
	width: 22px;
	height: 22px;
	display: block;
	flex-shrink: 0;
	border-radius: 50%;
	outline: 1px solid rgba(0, 0, 0, 0.06);
	outline-offset: -1px;
	box-shadow: 0 1px 2px rgba(55, 60, 255, 0.22);
	transition-property: transform;
	transition-duration: 320ms;
	transition-timing-function: var(--ease-spring);
}

.brand:hover .brand-mark {
	transform: rotate(-2deg) scale(1.04);
}

.brand:active .brand-mark {
	transform: rotate(-2deg) scale(0.96);
	transition-duration: 140ms;
}

.nav-right {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.quota {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--accent-soft);
	font-size: 12px;
	font-weight: 500;
	color: var(--accent);
	transition-property: background-color, color, scale;
	transition-duration: 220ms;
	transition-timing-function: var(--ease);
	animation: quotaIn 360ms var(--ease-out-expo) both;
}

@keyframes quotaIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.quota[data-state="low"] {
	background: #fef3c7;
	color: var(--amber);
}

.quota[data-state="empty"] {
	background: var(--err-soft);
	color: var(--err);
}

.quota-num {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.quota-label {
	color: inherit;
	opacity: 0.85;
}

.account {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	min-height: 32px;
}

.account-label {
	color: var(--text-2);
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.link {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: var(--r-sm);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-2);
	min-height: 32px;
	transition-property: background-color, color;
	transition-duration: 140ms;
	transition-timing-function: var(--ease);
}

.link:hover {
	background: var(--surface-2);
	color: var(--text);
}

.link:active {
	scale: 0.96;
}

/* ===== main / card ===== */

main {
	max-width: 460px;
	margin: 0 auto;
	padding: 24px 24px 72px;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	padding: 28px;
	box-shadow: var(--shadow-card);
}

/* progress dots */
.progress {
	display: flex;
	gap: 5px;
	margin-bottom: 22px;
}

.dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--surface-3);
	transition-property: width, background-color;
	transition-duration: 240ms;
	transition-timing-function: var(--ease);
}

.dot.done {
	background: var(--text-3);
}

.dot.active {
	width: 22px;
	background: var(--accent);
}

/* step */
.step {
	display: flex;
	flex-direction: column;
	gap: 18px;
	animation: stepIn 420ms var(--ease-out-expo) both;
}

.step > * {
	animation: stepChunkIn 460ms var(--ease-out-expo) both;
}

.step > *:nth-child(1) {
	animation-delay: 40ms;
}
.step > *:nth-child(2) {
	animation-delay: 90ms;
}
.step > *:nth-child(3) {
	animation-delay: 150ms;
}
.step > *:nth-child(4) {
	animation-delay: 210ms;
}
.step > *:nth-child(5) {
	animation-delay: 270ms;
}
.step > *:nth-child(6) {
	animation-delay: 330ms;
}

@keyframes stepIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes stepChunkIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.step > h1 {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--text);
}

.step > h1 + .hint {
	margin-top: -14px;
}

/* ===== actions row ===== */
.actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.actions.end {
	justify-content: flex-end;
}

/* ===== buttons ===== */

.primary,
.ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 16px;
	border-radius: var(--r-md);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.005em;
	min-height: 40px;
	transition-property: background-color, color, box-shadow, scale;
	transition-duration: 140ms;
	transition-timing-function: var(--ease);
}

.primary {
	background: var(--accent);
	color: #ffffff;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.16) inset,
		0 1px 2px rgba(55, 60, 255, 0.24);
}

.primary:hover:not(:disabled) {
	background: var(--accent-hover);
}

.primary:focus-visible {
	outline: 0;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.16) inset,
		0 1px 2px rgba(55, 60, 255, 0.24),
		0 0 0 3px var(--accent-ring);
}

.primary:active:not(:disabled) {
	scale: 0.96;
}

.primary:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.primary.block,
.ghost.block {
	width: 100%;
}

a.primary {
	text-decoration: none;
}

.ghost {
	background: transparent;
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--border-2);
}

.ghost:hover:not(:disabled) {
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border-2);
}

.ghost:focus-visible {
	outline: 0;
	box-shadow:
		inset 0 0 0 1px var(--accent),
		0 0 0 3px var(--accent-ring);
}

.ghost:active:not(:disabled) {
	scale: 0.96;
}

.ghost:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.icon-btn {
	position: relative;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: var(--r-sm);
	color: var(--text-3);
	flex-shrink: 0;
	transition-property: background-color, color, scale;
	transition-duration: 140ms;
	transition-timing-function: var(--ease);
}

/* expand hit area to a minimum of 40x40 without affecting layout */
.icon-btn::after {
	content: "";
	position: absolute;
	inset: -4px;
}

.icon-btn:hover {
	background: var(--surface-2);
	color: var(--text);
}

.icon-btn:active {
	scale: 0.96;
}

.icon-btn svg {
	width: 14px;
	height: 14px;
}

/* ===== dropzone ===== */

.dropzone {
	position: relative;
	padding: 36px 20px;
	border: 1.5px dashed var(--border-2);
	border-radius: var(--r-lg);
	background: var(--surface-2);
	cursor: pointer;
	transition-property: background-color, border-color, box-shadow;
	transition-duration: 180ms;
	transition-timing-function: var(--ease);
}

.dropzone:hover,
.dropzone.is-drag {
	background: var(--accent-soft);
	border-color: var(--accent);
}

.dropzone.is-drag {
	box-shadow: 0 0 0 4px var(--accent-ring);
}

.dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	color: transparent;
}

.dropzone-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	pointer-events: none;
}

.dropzone-icon {
	width: 28px;
	height: 28px;
	color: var(--text-3);
	margin-bottom: 2px;
}

.dropzone-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
}

/* filled state */
.dropzone.has-file {
	padding: 10px;
	background: var(--surface);
	border-style: solid;
	border-color: var(--border);
	cursor: default;
}

.dropzone.has-file .file-tag {
	animation: tagIn 360ms var(--ease-out-expo) both;
}

@keyframes tagIn {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.dropzone.has-file:hover {
	background: var(--surface);
	border-color: var(--border);
	box-shadow: none;
}

.dropzone.has-file input[type="file"] {
	pointer-events: none;
}

.file-tag {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 6px 6px 4px;
	position: relative;
	z-index: 1;
}

.file-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	background: var(--accent-soft);
	color: var(--accent);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.file-icon svg {
	width: 18px;
	height: 18px;
}

.file-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.file-info strong {
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-info .hint {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* ===== options ===== */

.pipeline {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pipeline-option {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--border);
	transition-property: background-color, box-shadow, transform;
	transition-duration: 180ms;
	transition-timing-function: var(--ease);
}

.pipeline-option:hover {
	background: var(--surface-2);
}

.pipeline-option:has(.pipeline-toggle input:checked) {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1.5px var(--accent);
	transform: translateY(-1px);
}

.pipeline-option:has(.pipeline-toggle input:checked):hover {
	background: var(--accent-soft);
}

.pipeline-option:has(.pipeline-toggle input:focus-visible) {
	box-shadow:
		inset 0 0 0 1.5px var(--accent),
		0 0 0 3px var(--accent-ring);
}

.pipeline-toggle {
	display: block;
	cursor: pointer;
}

/* Knob panel area is not a toggle target — clicking inside it shouldn't read as a toggle attempt */
.knob-panel {
	cursor: default;
}

/* visually-hidden but still focusable and accessible */
.pipeline-toggle input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pipeline-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pipeline-text strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	letter-spacing: -0.005em;
}

.pipeline-text .hint {
	color: var(--text-3);
}

.pipeline-option:has(.pipeline-toggle input:checked) .pipeline-text .hint {
	color: var(--accent);
	opacity: 0.78;
}

.knob-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	margin-top: 4px;
	border-radius: var(--r-sm); /* 12 (outer) − 12 (padding) ≈ flush; use small radius to feel inset */
	background: rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 0 0 1px rgba(55, 60, 255, 0.14);
	animation: resultIn 280ms var(--ease-out-expo) both;
}

.opt-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.opt-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-2);
}

.opt-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 6px;
}

.opt-row.compact .opt-card {
	min-height: 34px;
	padding: 8px;
	font-size: 12px;
}

.opt-card {
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: var(--r-md);
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--border-2);
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
	min-height: 38px;
	transition-property: background-color, color, box-shadow, scale, transform;
	transition-duration: 180ms;
	transition-timing-function: var(--ease);
}

.opt-card:has(input:checked) {
	transform: translateY(-1px);
}

.opt-card:hover {
	background: var(--surface-2);
}

.opt-card:active {
	scale: 0.96;
}

.opt-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.opt-card:has(input:checked) {
	background: var(--accent-soft);
	color: var(--accent);
	box-shadow: inset 0 0 0 1.5px var(--accent);
}

.opt-card:focus-within {
	box-shadow:
		inset 0 0 0 1.5px var(--accent),
		0 0 0 3px var(--accent-ring);
}

/* ===== check-row (single checkbox option with visible control) ===== */

.check-row {
	display: block;
	padding: 14px;
	border-radius: var(--r-md);
	background: var(--surface-2);
	cursor: pointer;
	box-shadow: inset 0 0 0 1px transparent;
	transition-property: background-color, box-shadow, transform;
	transition-duration: 160ms;
	transition-timing-function: var(--ease);
}

.check-row:hover {
	background: var(--surface-3);
}

.check-row:has(input:checked) {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1.5px var(--accent);
	transform: translateY(-1px);
}

.check-row:has(input:checked):hover {
	background: var(--accent-soft);
}

.check-row:has(input:focus-visible) {
	box-shadow:
		inset 0 0 0 1.5px var(--accent),
		0 0 0 3px var(--accent-ring);
}

/* visually-hidden but still focusable */
.check-row input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.check-row-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.check-row-copy strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	letter-spacing: -0.005em;
}

.check-row-copy span {
	font-size: 12px;
	color: var(--text-3);
	line-height: 1.5;
}

.check-row:has(input:checked) .check-row-copy span {
	color: var(--accent);
	opacity: 0.78;
}

/* ===== fields ===== */

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.input {
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--text);
	background: var(--surface);
	border: 0;
	border-radius: var(--r-md);
	padding: 11px 14px;
	width: 100%;
	min-height: 40px;
	box-shadow: inset 0 0 0 1px var(--border-2);
	transition-property: box-shadow, background-color;
	transition-duration: 160ms;
	transition-timing-function: var(--ease);
}

.input::placeholder {
	color: var(--text-3);
}

.input:hover {
	box-shadow: inset 0 0 0 1px var(--text-3);
}

.input:focus {
	outline: 0;
	box-shadow:
		inset 0 0 0 1.5px var(--accent),
		0 0 0 3px var(--accent-ring);
}

.turnstile-shell {
	min-height: 65px;
	display: flex;
	align-items: center;
}

#turnstile-widget {
	min-height: 65px;
	display: flex;
	align-items: center;
}

#turnstile-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-2);
}

#turnstile-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text-3);
	flex-shrink: 0;
}

#turnstile-status[data-state="ready"] {
	color: var(--ok);
}

#turnstile-status[data-state="ready"]::before {
	background: var(--ok);
}

#turnstile-status[data-state="error"] {
	color: var(--err);
}

#turnstile-status[data-state="error"]::before {
	background: var(--err);
}

/* ===== code cells ===== */

.code-section {
	display: flex;
	flex-direction: column;
	gap: 14px;
	animation: resultIn 380ms var(--ease-out-expo) both;
}

.code-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.code-meta .hint {
	margin: 0;
}

.resend-link {
	background: none;
	color: var(--accent);
	font-size: 12px;
	font-weight: 500;
	padding: 0;
	cursor: pointer;
	border-radius: var(--r-sm);
	transition-property: color, opacity;
	transition-duration: 140ms;
	transition-timing-function: var(--ease);
}

.resend-link:hover:not(:disabled) {
	color: var(--accent-hover);
}

.resend-link:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--accent-ring);
}

.resend-link:disabled {
	color: var(--text-3);
	cursor: not-allowed;
}

.code-cells {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
}

.code-cell {
	font-family: var(--font-mono);
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	color: var(--text);
	background: var(--surface);
	border: 0;
	border-radius: var(--r-md);
	height: 48px;
	width: 100%;
	min-width: 0;
	box-shadow: inset 0 0 0 1px var(--border-2);
	transition-property: box-shadow, background-color, color;
	transition-duration: 140ms;
	transition-timing-function: var(--ease);
	caret-color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.code-cell:hover {
	box-shadow: inset 0 0 0 1px var(--text-3);
}

.code-cell:focus {
	outline: 0;
	box-shadow:
		inset 0 0 0 1.5px var(--accent),
		0 0 0 3px var(--accent-ring);
}

.code-cell.is-filled {
	background: var(--accent-soft);
	color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent-soft);
}

.code-cell.is-filled:focus {
	background: var(--surface);
	color: var(--text);
	box-shadow:
		inset 0 0 0 1.5px var(--accent),
		0 0 0 3px var(--accent-ring);
}

.code-cell.just-filled {
	animation: cellPop 320ms var(--ease-spring) both;
}

@keyframes cellPop {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.07);
	}
	100% {
		transform: scale(1);
	}
}

/* ===== processing ===== */

.proc-meta {
	display: flex;
	flex-direction: column;
	background: var(--surface-2);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--border);
}

.proc-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	font-size: 13px;
	box-shadow: 0 1px 0 var(--border);
}

.proc-row:last-child {
	box-shadow: none;
}

.proc-row > span:first-child {
	color: var(--text-2);
	flex-shrink: 0;
}

.proc-value {
	color: var(--text);
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: capitalize;
	background: var(--surface-3);
	color: var(--text-2);
	transition-property: background-color, color;
	transition-duration: 320ms;
	transition-timing-function: var(--ease);
	white-space: nowrap;
}

.status-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.status-badge[data-state="pending"],
.status-badge[data-state="queued"] {
	color: var(--amber);
	background: var(--amber-soft);
}

.status-badge[data-state="processing"] {
	color: var(--accent);
	background: var(--accent-soft);
}

.status-badge[data-state="processing"]::before {
	animation: pulse 1.2s ease-in-out infinite;
}

.status-badge[data-state="completed"] {
	color: var(--ok);
	background: var(--ok-soft);
}

.status-badge[data-state="failed"],
.status-badge[data-state="canceled"] {
	color: var(--err);
	background: var(--err-soft);
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}

.result {
	display: flex;
	flex-direction: column;
	gap: 10px;
	animation: resultIn 460ms var(--ease-out-expo) both;
}

.result-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 2px;
}

@keyframes resultIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ===== native audio player ===== */

.player {
	width: 100%;
	height: 40px;
	display: block;
	border-radius: var(--r-md);
}

/* ===== transcript ===== */

.transcript {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	border-radius: var(--r-md);
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--border);
}

.transcript-head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-2);
}

.transcript-head svg {
	width: 13px;
	height: 13px;
	color: var(--text-3);
}

.transcript #transcript-text {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--text-2);
	text-wrap: pretty;
}

#transcript-more {
	margin-top: 2px;
}

/* ===== error ===== */

.error {
	margin-top: 6px;
	padding: 10px 12px;
	border-radius: var(--r-md);
	background: var(--err-soft);
	color: var(--err);
	font-size: 13px;
	line-height: 1.45;
	animation: stepIn 240ms var(--ease);
}

/* ===== library ===== */

.library {
	margin-top: 36px;
	animation: stepIn 320ms 80ms var(--ease) both;
}

.library-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0 6px 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--border);
}

.library-header h2 {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-2);
	letter-spacing: -0.005em;
}

.library-header .hint {
	font-size: 11px;
}

.job-list {
	display: flex;
	flex-direction: column;
}

.empty {
	padding: 28px 4px;
	color: var(--text-3);
	font-size: 13px;
	text-align: center;
}

.job-card {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
	align-items: center;
	padding: 12px 8px;
	transition: background-color 140ms var(--ease);
	border-radius: var(--r-md);
	margin: 0 -4px;
	animation: rowIn 460ms var(--ease-out-expo) both;
	animation-delay: calc(var(--i, 0) * 55ms);
}

.job-card + .job-card {
	box-shadow: 0 -1px 0 var(--border);
}

.job-card:hover {
	background: var(--surface-2);
	box-shadow: none;
}

.job-card:hover + .job-card {
	box-shadow: none;
}

@keyframes rowIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.job-card-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.job-card-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.job-card-title {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.job-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

.job-card-meta .dot-sep {
	color: var(--text-4);
	margin: 0 -1px;
}

.job-card-pipeline {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.job-card-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	flex-shrink: 0;
}

.job-card .download {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border-radius: var(--r-sm);
	color: var(--accent);
	font-size: 12.5px;
	font-weight: 500;
	background: transparent;
	transition-property: background-color, scale;
	transition-duration: 140ms;
	transition-timing-function: var(--ease);
}

.job-card .download svg {
	width: 12px;
	height: 12px;
}

.job-card .download:hover {
	background: var(--accent-soft);
}

.job-card .download:active {
	scale: 0.96;
}

.job-card .download:focus-visible {
	outline: 0;
	background: var(--accent-soft);
	box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ===== responsive ===== */

@media (max-width: 600px) {
	.quota-label {
		display: none;
	}

	.quota {
		padding: 5px 8px;
	}
}

@media (max-width: 480px) {
	.nav {
		padding: 16px 20px;
	}

	.nav-right {
		gap: 8px;
	}

	main {
		padding: 16px 16px 48px;
	}

	.card {
		padding: 22px;
		border-radius: var(--r-lg);
	}

	.code-cell {
		height: 44px;
		font-size: 16px;
	}

	.account-label {
		max-width: 120px;
		font-size: 12px;
	}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}