/* /ask/ — all colour from the theme's tokens. */
.an-ask-page { max-width: 52rem; margin: 0 auto; padding: 34px var(--an-gutter, 20px) 64px; }

.an-ask-top h1 {
	margin: 0 0 10px; font-family: var(--an-font-editorial);
	font-size: clamp(27px, 5vw, 44px); line-height: var(--an-lh-tight);
	letter-spacing: -.025em; text-wrap: balance;
}
.an-ask-sub { margin: 0 0 22px; color: var(--an-text-2); max-width: 60ch; }

.an-ask-form {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--an-line); border-radius: 999px;
	background: var(--an-surface);
}
.an-ask-form:focus-within { border-color: var(--an-accent); }
.an-ask-ico { display: flex; color: var(--an-text-3); }
.an-ask-form input {
	flex: 1; min-width: 0; padding: 12px 4px; min-height: 46px;
	border: 0; background: none; color: var(--an-text);
	font: inherit; font-size: 16px;
}
.an-ask-form input:focus { outline: none; }
.an-ask-go {
	padding: 11px 20px; min-height: 44px; border: 0; border-radius: 999px;
	background: var(--an-accent); color: var(--an-bg);
	font: inherit; font-weight: 600; cursor: pointer;
}
.an-ask-mic {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: none;
	border: 1px solid var(--an-line); border-radius: 50%;
	background: var(--an-bg); cursor: pointer;
}
.an-ask-mic-dot {
	width: 11px; height: 11px; border-radius: 50%;
	background: var(--an-text-3); transition: background var(--an-fast) var(--an-ease);
}
[data-state="listening"] .an-ask-mic { border-color: var(--an-accent); }
[data-state="listening"] .an-ask-mic-dot { background: var(--an-accent); animation: an-ask-pulse 1.1s ease-in-out infinite; }
[data-state="thinking"] .an-ask-mic-dot { background: var(--an-accent); opacity: .45; }
@keyframes an-ask-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.55); } }
@media (prefers-reduced-motion: reduce) {
	[data-state="listening"] .an-ask-mic-dot { animation: none; }
	.an-ask-mic-dot { transition: none; }
}

.an-ask-live { margin: 10px 2px 0; min-height: 1.3em; font-size: 13.5px; color: var(--an-text-3); }

.an-ask-eg { margin-top: 26px; }
.an-ask-eg p { margin: 0 0 10px; font-size: 12.5px; color: var(--an-text-3); }
.an-ask-eg a {
	display: inline-block; margin: 0 7px 7px 0; padding: 8px 15px;
	border: 1px solid var(--an-line); border-radius: 999px;
	color: var(--an-text-2); text-decoration: none; font-size: 14px;
}
.an-ask-eg a:hover { border-color: var(--an-accent); color: var(--an-accent); }

.an-ask-ref {
	margin-top: 26px; padding: 20px 22px;
	border: 1px solid var(--an-line); border-left: 3px solid var(--an-accent);
	border-radius: 0 var(--an-radius-md) var(--an-radius-md) 0;
	background: var(--an-surface);
}
.an-ask-ref-k {
	margin: 0 0 6px; font-family: var(--an-font-mono); font-size: 11px;
	font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--an-accent);
}
.an-ask-ref-v {
	margin: 0 0 8px; font-family: var(--an-font-editorial);
	font-size: clamp(26px, 4.4vw, 38px); line-height: 1.06;
	letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.an-ask-ref-s { margin: 0 0 10px; color: var(--an-text-2); max-width: 58ch; }
.an-ask-ref-l { font-size: 14px; }

.an-ask-quotes { margin-top: 30px; }
.an-ask-quotes-h {
	margin: 0 0 14px; font-family: var(--an-font-mono); font-size: 11px;
	font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--an-text-3);
}
.an-ask-q { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--an-line-soft, var(--an-line)); }
.an-ask-q:last-child { border-bottom: 0; }
.an-ask-q blockquote {
	margin: 0 0 7px; font-family: var(--an-font-editorial);
	font-size: 17.5px; line-height: var(--an-lh-snug); color: var(--an-text);
}
.an-ask-q figcaption a { font-size: 13.5px; color: var(--an-text-3); }
.an-ask-q figcaption a:hover { color: var(--an-accent); }

.an-ask-none {
	margin-top: 26px; padding: 18px 20px;
	border: 1px solid var(--an-line); border-radius: var(--an-radius-md);
	background: var(--an-surface);
}
.an-ask-none p { margin: 0 0 8px; max-width: 60ch; color: var(--an-text-2); }
.an-ask-none p:last-child { margin: 0; }
.an-ask-none strong { color: var(--an-text); }

.an-ask-how {
	margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--an-line);
	font-size: 12.5px; color: var(--an-text-3); max-width: 70ch;
}