/**
 * 記事詳細レイアウト（is_singular時のみ読み込み）。
 * 再現対象: design/ArticleNight.dc.html（760px中央カラム）。
 */

/* ---------- 記事カラム ---------- */

.an-article {
	width: min(var(--an-content), calc(100% - 48px));
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 36px 0 72px;
}

/* ---------- 記事ヘッダー ---------- */

.an-article-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--an-line);
}

.an-article-title {
	margin: 0;
	font-family: var(--an-font-mincho);
	font-size: 30px;
	font-weight: 600;
	color: var(--an-ink);
	line-height: 1.6;
}

.an-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	font-size: 12px;
	color: var(--an-muted);
}

.an-byline {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--an-muted);
	text-decoration: none;
}

.an-byline .an-byline__avatar {
	width: 30px;
	height: 30px;
	border-radius: var(--an-radius-pill);
	object-fit: cover;
	border: 1px solid var(--an-gold-pale);
	background: var(--an-paper-2);
}

.an-byline:hover .an-byline__name {
	color: var(--an-gold-deep);
}

.an-article-meta__date time {
	color: inherit;
}

/* ---------- アイキャッチ ---------- */

.an-article-featured {
	margin: 0;
	overflow: hidden;
	background: var(--an-night-2);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
}

.an-article-featured__image {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- 結論ボックス ---------- */

.an-conclusion {
	background: var(--an-white);
	border: 2px solid var(--an-night-2);
	border-radius: var(--an-radius);
	padding: 24px 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.an-conclusion__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.an-conclusion__title {
	font-family: var(--an-font-sans);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--an-ink);
}

.an-conclusion__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.an-conclusion__list li {
	position: relative;
	padding-left: 28px;
	font-size: 14px;
	color: var(--an-text);
	line-height: 1.8;
}

.an-conclusion__list li::before {
	content: "—";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--an-gold-deep);
}

/* ---------- 目次 ---------- */

.an-toc {
	background: var(--an-white);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	padding: 26px 28px 28px;
	margin: 0 0 32px;
}

.an-toc__title {
	font-family: var(--an-font-mincho);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--an-ink);
	margin-bottom: 18px;
}

.an-entry .an-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	columns: 2;
	column-gap: 28px;
	counter-reset: an-toc;
	font-size: 14px;
}

.an-toc__item {
	break-inside: avoid;
	margin: 0 0 10px;
	counter-increment: an-toc;
}

.an-toc__list a {
	text-decoration: none;
	line-height: 1.65;
}

.an-toc__item > a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 4px 0;
	color: var(--an-ink-2);
}

.an-toc__item > a::before {
	content: counter(an-toc) ".";
	flex: 0 0 24px;
	font-family: var(--an-font-sans);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--an-gold-deep);
}

.an-toc__list a:hover {
	color: var(--an-gold-deep);
}

.an-entry .an-toc a {
	color: var(--an-ink-2);
	text-decoration: none;
	text-underline-offset: 0;
}

.an-entry .an-toc a:hover,
.an-entry .an-toc a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- 本文タイポグラフィ ---------- */

.an-entry {
	counter-reset: an-h2;
}

.an-entry > *:first-child {
	margin-top: 0;
}

.an-entry > *:last-child {
	margin-bottom: 0;
}

.an-entry p {
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--an-text);
	line-height: 2.1;
}

.an-entry a {
	color: var(--an-gold-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.an-entry a:hover {
	color: var(--an-gold);
}

/* h2 = 「01」深紺バッジ + 下罫線（番号はCSSカウンタ） */
.an-entry h2 {
	counter-increment: an-h2;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 56px 0 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--an-ink);
	font-family: var(--an-font-mincho);
	font-size: 23px;
	font-weight: 600;
	color: var(--an-ink);
	line-height: 1.5;
}

.an-entry h2::before {
	content: counter(an-h2, decimal-leading-zero);
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--an-night-2);
	border-radius: var(--an-radius-sm);
	font-family: var(--an-font-sans);
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: var(--an-gold);
}

/* h3 = 金の縦線 */
.an-entry h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 40px 0 20px;
	font-family: var(--an-font-mincho);
	font-size: 21px;
	font-weight: 600;
	color: var(--an-ink);
	line-height: 1.6;
}

.an-entry h3::before {
	content: "";
	flex-shrink: 0;
	width: 3px;
	height: 20px;
	background: var(--an-gold);
}

.an-entry h4 {
	margin: 32px 0 16px;
	font-family: var(--an-font-mincho);
	font-size: 16px;
	font-weight: 600;
	color: var(--an-ink);
}

/* リスト（金ダッシュ） */
.an-entry ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.an-entry ul li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	color: var(--an-text);
	line-height: 1.9;
}

.an-entry ul li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--an-gold-deep);
}

.an-entry ul ul {
	margin: 12px 0 0;
}

.an-entry ol {
	margin: 0 0 24px;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
	color: var(--an-text);
	line-height: 1.9;
}

.an-entry ol li::marker {
	font-family: var(--an-font-en);
	color: var(--an-gold-deep);
}

/* 引用 */
.an-entry blockquote {
	margin: 0 0 24px;
	padding: 20px 26px;
	background: var(--an-paper-2);
	border-left: 3px solid var(--an-gold);
	border-radius: 0 var(--an-radius) var(--an-radius) 0;
	color: var(--an-text-soft);
}

.an-entry blockquote p {
	color: inherit;
	margin-bottom: 12px;
}

.an-entry blockquote p:last-child {
	margin-bottom: 0;
}

.an-entry blockquote cite {
	font-size: 12px;
	font-style: normal;
	color: var(--an-muted);
}

/* テーブル */
.an-entry table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.8;
}

.an-entry th,
.an-entry td {
	border: 1px solid var(--an-line);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
	color: var(--an-text);
}

.an-entry th {
	background: var(--an-paper-2);
	font-weight: 700;
	color: var(--an-ink);
}

.an-entry .wp-block-table {
	margin: 0 0 24px;
	overflow-x: auto;
}

.an-entry .wp-block-table table {
	margin: 0;
}

/* 画像・図版 */
.an-entry img {
	max-width: 100%;
	height: auto;
	border-radius: var(--an-radius);
}

.an-entry figure {
	margin: 0 0 24px;
}

.an-entry figcaption {
	margin-top: 8px;
	font-size: 12px;
	color: var(--an-muted);
	text-align: center;
}

.an-entry hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--an-line);
}

.an-entry .an-point-box {
	margin: 0 0 24px;
}

/* ---------- 基準記事の読みやすさ・安全案内 ---------- */

.an-entry .an-article-lead {
	font-size: 17px;
	line-height: 2;
}

.an-entry .an-beginner-note,
.an-entry .an-short-answer,
.an-entry .an-note {
	margin: 0 0 28px;
	border-radius: var(--an-radius);
}

.an-entry .an-beginner-note {
	padding: 20px 24px;
	background: var(--an-paper-2);
	border: 1px solid var(--an-line);
	font-size: 14px;
	line-height: 1.9;
	color: var(--an-text-soft);
}

.an-entry .an-beginner-note strong {
	color: var(--an-ink);
}

/* ---------- 冒頭の4問チェック案内 ---------- */

.an-entry .an-reading-teaser {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: center;
	min-height: 256px;
	gap: 12px 24px;
	margin: 8px 0 38px;
	padding: 36px 24px;
	overflow: hidden;
	background:
		radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--an-gold) 22%, transparent), transparent 30%),
		var(--an-white);
	border: 2px solid var(--an-gold);
	border-radius: var(--an-radius);
	color: var(--an-ink);
	text-decoration: none;
	box-shadow: 0 12px 30px color-mix(in srgb, var(--an-night) 7%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.an-entry .an-reading-teaser:hover,
.an-entry .an-reading-teaser:focus-visible {
	color: var(--an-ink);
	border-color: var(--an-gold-deep);
	box-shadow: 0 16px 36px color-mix(in srgb, var(--an-night) 11%, transparent);
	transform: translateY(-2px);
}

.an-entry .an-reading-teaser__label {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--an-gold-deep);
}

.an-entry .an-reading-teaser strong {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: 18px;
	font-family: var(--an-font-mincho);
	font-size: 20px;
	line-height: 1.65;
}

.an-entry .an-reading-teaser__copy {
	grid-column: 1 / -1;
	grid-row: 3;
	font-size: 14px;
	line-height: 1.8;
	color: var(--an-text-soft);
}

.an-entry .an-reading-teaser__link {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	padding: 10px 16px;
	background: var(--an-night-2);
	border-radius: var(--an-radius-pill);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--an-white);
}

/* WordPressの自動改行を、案内のグリッド項目として数えない。 */
.an-entry .an-reading-teaser > br {
	display: none;
}

/* ---------- セクションごとの読書演出 ---------- */

.an-entry .an-content-section {
	position: relative;
	isolation: isolate;
	margin: 64px 0 0;
	padding-top: 1px;
	scroll-margin-top: 24px;
}

.an-entry .an-content-section > * {
	position: relative;
	z-index: 1;
}

.an-entry .an-content-section > h2 {
	margin-top: 0;
}

.an-entry .an-content-section::before,
.an-entry .an-content-section::after {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	content: "";
}

/* まず意味を静かに理解するための、三つの光。 */
.an-entry .an-content-section--meaning::before {
	top: -36px;
	right: -12px;
	width: 170px;
	height: 150px;
	background:
		radial-gradient(circle at 26% 58%, color-mix(in srgb, var(--an-gold) 32%, transparent) 0 3px, transparent 4px),
		radial-gradient(circle at 57% 32%, color-mix(in srgb, var(--an-gold) 24%, transparent) 0 5px, transparent 6px),
		radial-gradient(circle at 78% 70%, color-mix(in srgb, var(--an-gold) 18%, transparent) 0 7px, transparent 8px),
		radial-gradient(ellipse at center, color-mix(in srgb, var(--an-gold) 9%, transparent), transparent 68%);
	opacity: 0.85;
}

/* 警告は怖く見せず、四辺で静かに立ち止まらせる。 */
.an-entry .an-content-section--warning {
	padding: 28px 26px 4px;
	background: linear-gradient(145deg, color-mix(in srgb, var(--an-paper-2) 82%, var(--an-white)), var(--an-white));
	border: 1px solid var(--an-gold-pale);
	border-radius: var(--an-radius);
}

.an-entry .an-content-section--warning::after {
	top: 16px;
	right: 18px;
	width: 34px;
	height: 34px;
	background:
		linear-gradient(var(--an-gold-deep), var(--an-gold-deep)) center / 1px 100% no-repeat,
		linear-gradient(90deg, var(--an-gold-deep), var(--an-gold-deep)) center / 100% 1px no-repeat;
	opacity: 0.22;
	transform: rotate(45deg);
}

/* 診断には、選択へ視線を集めるやわらかなスポットライト。 */
.an-entry .an-content-section--reading::before {
	top: 32px;
	left: 50%;
	width: min(680px, 96%);
	height: 420px;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--an-gold) 13%, transparent), transparent 70%);
	transform: translateX(-50%);
}

.an-entry .an-content-section--reading .an-wizard {
	box-shadow: 0 18px 45px color-mix(in srgb, var(--an-night) 8%, transparent);
}

/* 恋愛は二つの気持ちが重なる、淡いシャンパンローズ。 */
.an-entry .an-content-section--love::before {
	top: -20px;
	right: -22px;
	width: 250px;
	height: 210px;
	background:
		radial-gradient(circle at 38% 52%, transparent 0 42px, color-mix(in srgb, #c9858b 23%, transparent) 43px 44px, transparent 45px),
		radial-gradient(circle at 66% 52%, transparent 0 42px, color-mix(in srgb, var(--an-gold) 25%, transparent) 43px 44px, transparent 45px),
		radial-gradient(ellipse at center, color-mix(in srgb, #e8c8c8 25%, transparent), transparent 68%);
}

/* ツインレイは二つの円を対等に置き、運命の断定には寄せない。 */
.an-entry .an-content-section--twinray::after {
	top: 8px;
	right: 10px;
	width: 126px;
	height: 66px;
	background:
		radial-gradient(circle at 38% 50%, transparent 0 28px, color-mix(in srgb, var(--an-gold-deep) 24%, transparent) 29px 30px, transparent 31px),
		radial-gradient(circle at 68% 50%, transparent 0 28px, color-mix(in srgb, var(--an-ink-2) 18%, transparent) 29px 30px, transparent 31px);
}

/* 仕事は考えを整理する薄い設計グリッド。 */
.an-entry .an-content-section--work::before {
	inset: -12px 0 auto;
	height: 210px;
	background-image:
		linear-gradient(color-mix(in srgb, var(--an-ink-2) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--an-ink-2) 6%, transparent) 1px, transparent 1px),
		linear-gradient(180deg, color-mix(in srgb, var(--an-white) 18%, transparent), var(--an-paper));
	background-size: 28px 28px, 28px 28px, 100% 100%;
	mask-image: linear-gradient(to bottom, #000, transparent);
}

/* お金は派手な金運保証ではなく、重なった硬貨のような輪。 */
.an-entry .an-content-section--money::after {
	top: 0;
	right: 8px;
	width: 112px;
	height: 78px;
	background:
		radial-gradient(ellipse at 36% 50%, transparent 0 25px, color-mix(in srgb, var(--an-gold) 28%, transparent) 26px 28px, transparent 29px),
		radial-gradient(ellipse at 68% 50%, transparent 0 25px, color-mix(in srgb, var(--an-gold-deep) 18%, transparent) 26px 28px, transparent 29px);
	transform: rotate(-8deg);
}

/* 健康と人間関係は呼吸のような、穏やかな青緑の波。 */
.an-entry .an-content-section--health::before {
	top: -24px;
	left: -18px;
	width: 260px;
	height: 160px;
	background:
		radial-gradient(ellipse at 30% 55%, color-mix(in srgb, #98c7bf 22%, transparent), transparent 58%),
		radial-gradient(ellipse at 72% 42%, color-mix(in srgb, #aac7db 18%, transparent), transparent 58%);
	filter: blur(2px);
}

/* 行動は三つのステップが順番に進む。 */
.an-entry .an-content-section--actions .an-actions {
	position: relative;
}

.an-entry .an-content-section--actions .an-actions::before {
	position: absolute;
	top: 28px;
	bottom: 28px;
	left: 35px;
	z-index: 0;
	width: 1px;
	background: linear-gradient(var(--an-gold), var(--an-gold-pale));
	content: "";
}

.an-entry .an-content-section--actions .an-actions li {
	z-index: 1;
}

/* 不安の章は、情報量を抑えた淡い青紫で着地させる。 */
.an-entry .an-content-section--nothing {
	padding: 28px 26px 4px;
	background:
		radial-gradient(ellipse at 92% 4%, color-mix(in srgb, #b8b7d9 20%, transparent), transparent 36%),
		color-mix(in srgb, #f4f3fa 55%, var(--an-white));
	border: 1px solid color-mix(in srgb, #aaa8cc 38%, var(--an-line));
	border-radius: var(--an-radius);
}

/* 比較は桁の違いを追いやすい直線的な見え方にする。 */
.an-entry .an-content-section--comparison .an-table-wrap {
	background: var(--an-white);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--an-night) 7%, transparent);
}

.an-entry .an-content-section--comparison tbody tr[data-an-current-number] {
	background: color-mix(in srgb, var(--an-gold) 10%, var(--an-white));
}

/* FAQは質問を選びやすく、開閉の印だけを添える。 */
.an-entry .an-content-section--faq .an-faq summary {
	position: relative;
}

.an-entry .an-content-section--faq .an-faq summary::after {
	position: absolute;
	top: 50%;
	right: 20px;
	font-family: var(--an-font-sans);
	font-size: 18px;
	font-weight: 400;
	color: var(--an-gold-deep);
	content: "+";
	transform: translateY(-50%);
}

.an-entry .an-content-section--faq .an-faq details[open] summary::after {
	content: "−";
}

.an-entry .an-content-section--faq .an-faq details {
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.an-entry .an-content-section--faq .an-faq details[open] {
	border-color: var(--an-gold-pale);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--an-night) 5%, transparent);
}

/* 出典は読後に落ち着ける紙面として控えめにする。 */
.an-entry .an-content-section--sources {
	padding: 28px 26px 4px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--an-paper-2) 74%, var(--an-white)), var(--an-white));
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
}

/* JavaScriptが使える場合だけ、スクロール位置に合わせて一度表示する。 */
.an-entry .an-content-section.an-reveal-ready:not(.is-visible) {
	opacity: 0;
	transform: translateY(22px);
}

.an-entry .an-content-section.an-reveal-ready {
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1);
}

.an-entry .an-content-section--meaning.an-reveal-ready:not(.is-visible)::before,
.an-entry .an-content-section--love.an-reveal-ready:not(.is-visible)::before,
.an-entry .an-content-section--twinray.an-reveal-ready:not(.is-visible)::after {
	opacity: 0;
	transform: scale(0.72);
}

.an-entry .an-content-section--meaning::before,
.an-entry .an-content-section--love::before,
.an-entry .an-content-section--twinray::after {
	transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}

.an-entry .an-content-section--chain.an-reveal-ready:not(.is-visible) .an-sequence-card,
.an-entry .an-content-section--chain.an-reveal-ready:not(.is-visible) .an-sequence-arrow,
.an-entry .an-content-section--actions.an-reveal-ready:not(.is-visible) .an-actions li {
	opacity: 0;
	transform: translateY(18px) scale(0.96);
}

.an-entry .an-content-section--chain .an-sequence-card,
.an-entry .an-content-section--chain .an-sequence-arrow,
.an-entry .an-content-section--actions .an-actions li {
	transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.an-entry .an-content-section--chain .an-sequence-flow > :nth-child(2),
.an-entry .an-content-section--actions .an-actions li:nth-child(2) {
	transition-delay: 0.12s;
}

.an-entry .an-content-section--chain .an-sequence-flow > :nth-child(3),
.an-entry .an-content-section--actions .an-actions li:nth-child(3) {
	transition-delay: 0.24s;
}

.an-entry .an-content-section--chain .an-sequence-flow > :nth-child(4) {
	transition-delay: 0.36s;
}

.an-entry .an-content-section--chain .an-sequence-flow > :nth-child(5) {
	transition-delay: 0.48s;
}

/* ---------- 章の意味に合わせたスクロール演出 ---------- */

.an-entry .an-heading-text {
	position: relative;
	display: inline;
}

.an-entry .an-heading-glint {
	position: absolute;
	top: -0.8em;
	left: -0.6em;
	display: block;
	width: 0.72em;
	height: 0.72em;
	background: var(--an-gold);
	clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
	opacity: 0;
	filter: drop-shadow(0 0 7px color-mix(in srgb, var(--an-gold) 75%, transparent));
	pointer-events: none;
}

.an-entry .an-content-section.is-visible .an-heading-text {
	animation: an-heading-illuminate 1.15s ease-out both;
}

.an-entry .an-content-section.is-visible .an-heading-glint {
	animation: an-heading-glint 1.05s 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* 基本の意味：光の門が開き、メッセージを運ぶ天使が一度だけ降りる。 */
.an-entry .an-content-section--meaning > h2 {
	margin-bottom: 302px;
}

.an-entry .an-content-section--meaning::before {
	top: 64px;
	left: 50%;
	width: min(650px, 94%);
	height: 286px;
	background:
		radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--an-white) 98%, transparent) 0 7%, color-mix(in srgb, var(--an-gold) 24%, transparent) 25%, transparent 62%),
		radial-gradient(circle at 16% 34%, var(--an-gold) 0 2px, transparent 3px),
		radial-gradient(circle at 82% 28%, var(--an-gold) 0 1px, transparent 2px),
		radial-gradient(circle at 72% 77%, var(--an-gold-pale) 0 2px, transparent 3px),
		radial-gradient(circle at 24% 75%, var(--an-gold-pale) 0 1px, transparent 2px);
	opacity: 0;
	filter: blur(8px);
	transform: translateX(-50%) scale(0.46);
}

.an-entry .an-content-section--meaning::after {
	top: 52px;
	left: 50%;
	width: 198px;
	height: 286px;
	background: url("../img/angel-celestial-v1.webp") center / contain no-repeat;
	opacity: 0;
	filter: drop-shadow(0 18px 20px color-mix(in srgb, var(--an-gold-deep) 28%, transparent));
	transform: translate(-50%, -110px) scale(0.72);
}

.an-entry .an-content-section--meaning.is-visible::before {
	animation: an-celestial-gate 1.4s 0.08s ease-out both;
}

.an-entry .an-content-section--meaning.is-visible::after {
	animation: an-angel-descend 1.65s 0.18s cubic-bezier(0.12, 0.72, 0.18, 1) both;
}

/* 警告：四辺を光が走り、読み飛ばさず一度立ち止まる。 */
.an-entry .an-content-section--warning::after {
	inset: -1px;
	width: auto;
	height: auto;
	background:
		linear-gradient(90deg, var(--an-gold), var(--an-gold-deep)) left top / 0 2px no-repeat,
		linear-gradient(180deg, var(--an-gold), var(--an-gold-deep)) right top / 2px 0 no-repeat,
		linear-gradient(270deg, var(--an-gold), var(--an-gold-deep)) right bottom / 0 2px no-repeat,
		linear-gradient(0deg, var(--an-gold), var(--an-gold-deep)) left bottom / 2px 0 no-repeat;
	border-radius: var(--an-radius);
	opacity: 0;
	transform: none;
}

.an-entry .an-content-section--warning.is-visible::after {
	animation: an-border-awaken 1.55s 0.16s ease-out both;
}

/* 4問チェック：光が集まり、表示された問いの選択肢が四方から揃う。 */
.an-entry .an-content-section--reading::before {
	top: 56px;
	height: 510px;
	opacity: 0;
	transform: translateX(-50%) scale(0.68);
}

.an-entry .an-content-section--reading::after {
	top: 110px;
	left: 50%;
	width: min(630px, 88%);
	height: 240px;
	background:
		linear-gradient(115deg, transparent 24%, color-mix(in srgb, var(--an-gold) 20%, transparent) 49%, transparent 51%) 0 0 / 190% 100%,
		radial-gradient(circle at center, color-mix(in srgb, var(--an-gold) 18%, transparent), transparent 65%);
	opacity: 0;
	transform: translateX(-50%);
}

.an-entry .an-content-section--reading.is-visible::before {
	animation: an-diagnosis-focus 1.25s ease-out both;
}

.an-entry .an-content-section--reading.is-visible::after {
	animation: an-diagnosis-sweep 1.2s 0.25s ease-out both;
}

.an-entry .an-wizard-step.is-step-active .an-option {
	animation: an-option-arrive 0.52s cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.an-entry .an-wizard-step.is-step-active .an-option:nth-of-type(2) {
	animation-delay: 0.07s;
}

.an-entry .an-wizard-step.is-step-active .an-option:nth-of-type(3) {
	animation-delay: 0.14s;
}

.an-entry .an-wizard-step.is-step-active .an-option:nth-of-type(4) {
	animation-delay: 0.21s;
}

.an-entry .an-wizard-step.is-step-active .an-option:nth-of-type(5) {
	animation-delay: 0.28s;
}

/* 恋愛：二本の光の軌跡が近づき、中央で一度だけ輝く。 */
.an-entry .an-content-section--love::before,
.an-entry .an-content-section--love::after {
	top: 64px;
	width: 48%;
	height: 96px;
	background: none;
	border-top: 3px solid transparent;
	border-radius: 50%;
	opacity: 0;
	filter: drop-shadow(0 0 8px color-mix(in srgb, #c9858b 42%, transparent));
}

.an-entry .an-content-section--love::before {
	left: -20%;
	border-color: color-mix(in srgb, #c9858b 58%, transparent);
	transform: rotate(12deg);
}

.an-entry .an-content-section--love::after {
	right: -20%;
	border-color: color-mix(in srgb, var(--an-gold) 62%, transparent);
	transform: rotate(-12deg);
}

.an-entry .an-content-section--love.is-visible::before {
	animation: an-love-trail-left 1.35s 0.1s cubic-bezier(0.16, 0.78, 0.2, 1) both;
}

.an-entry .an-content-section--love.is-visible::after {
	animation: an-love-trail-right 1.35s 0.1s cubic-bezier(0.16, 0.78, 0.2, 1) both;
}

/* ツインレイ：二本の光は交差しても混ざり切らず、それぞれの軌道へ戻る。 */
.an-entry .an-content-section--twinray::before,
.an-entry .an-content-section--twinray::after {
	top: 54px;
	width: 46%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--an-gold), transparent);
	opacity: 0;
	filter: drop-shadow(0 0 7px color-mix(in srgb, var(--an-gold) 65%, transparent));
}

.an-entry .an-content-section--twinray::before {
	left: -16%;
	transform: rotate(12deg);
}

.an-entry .an-content-section--twinray::after {
	right: -16%;
	transform: rotate(-12deg);
}

.an-entry .an-content-section--twinray.is-visible::before {
	animation: an-twinray-left 1.45s 0.12s ease-in-out both;
}

.an-entry .an-content-section--twinray.is-visible::after {
	animation: an-twinray-right 1.45s 0.12s ease-in-out both;
}

/* 仕事：星の点がつながり、設計図が左から完成する。 */
.an-entry .an-content-section--work::before {
	inset: -14px 0 auto;
	height: 236px;
	background-image:
		radial-gradient(circle at 12% 32%, var(--an-gold) 0 2px, transparent 3px),
		radial-gradient(circle at 44% 16%, var(--an-gold-pale) 0 2px, transparent 3px),
		radial-gradient(circle at 72% 38%, var(--an-gold) 0 2px, transparent 3px),
		linear-gradient(28deg, transparent 20%, color-mix(in srgb, var(--an-ink-2) 13%, transparent) 20.2% 20.5%, transparent 20.7%),
		linear-gradient(color-mix(in srgb, var(--an-ink-2) 7%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--an-ink-2) 7%, transparent) 1px, transparent 1px);
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px;
	clip-path: inset(0 100% 0 0);
	mask-image: linear-gradient(to bottom, #000, transparent);
}

.an-entry .an-content-section--work.is-visible::before {
	animation: an-blueprint-draw 1.45s 0.12s ease-out both;
}

/* 金運：記事の対象番号を刻んだ硬貨が転がり込み、現実の金額へ視線を戻す。 */
.an-entry .an-content-section--money::before {
	top: 42px;
	right: 12px;
	width: 74px;
	height: 74px;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 34% 28%, #fff5c9, var(--an-gold) 42%, var(--an-gold-deep) 72%);
	border: 3px double color-mix(in srgb, var(--an-gold-deep) 80%, var(--an-night));
	border-radius: 50%;
	box-shadow: 0 12px 25px color-mix(in srgb, var(--an-gold-deep) 22%, transparent);
	font-family: var(--an-font-en);
	font-size: 19px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--an-night);
	content: attr(data-an-number);
	opacity: 0;
	transform: translateX(150px) rotate(240deg);
}

.an-entry .an-content-section--money::after {
	display: none;
}

.an-entry .an-content-section--money.is-visible::before {
	animation: an-coin-arrive 1.25s 0.18s cubic-bezier(0.15, 0.75, 0.2, 1) both;
}

/* 健康：青緑の光が一度だけゆっくり広がる。 */
.an-entry .an-content-section--health::before,
.an-entry .an-content-section--health::after {
	top: 20px;
	left: 50%;
	width: 70%;
	height: 150px;
	background: radial-gradient(ellipse at center, color-mix(in srgb, #8ec6ba 26%, transparent), transparent 66%);
	border-radius: 50%;
	opacity: 0;
	filter: blur(7px);
	transform: translateX(-50%) scaleX(0.38);
}

.an-entry .an-content-section--health::after {
	top: 54px;
	background: radial-gradient(ellipse at center, color-mix(in srgb, #9fbfd4 20%, transparent), transparent 68%);
}

.an-entry .an-content-section--health.is-visible::before {
	animation: an-aurora-breathe 1.8s 0.08s ease-in-out both;
}

.an-entry .an-content-section--health.is-visible::after {
	animation: an-aurora-breathe 1.8s 0.3s ease-in-out both reverse;
}

/* 行動：流星が3ステップを上から下へ案内する。 */
.an-entry .an-content-section--actions::after {
	top: 142px;
	left: 31px;
	width: 9px;
	height: 9px;
	background: var(--an-gold);
	border-radius: 50%;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--an-gold) 16%, transparent), 0 0 15px var(--an-gold);
	opacity: 0;
}

.an-entry .an-content-section--actions.is-visible::after {
	animation: an-action-comet 1.65s 0.38s cubic-bezier(0.25, 0.6, 0.2, 1) both;
}

/* 不安：夜の星が薄れ、暖かな夜明けへ変わる。 */
.an-entry .an-content-section--nothing {
	background:
		radial-gradient(circle at 82% 18%, color-mix(in srgb, #aaa8cc 34%, transparent) 0 2px, transparent 3px),
		radial-gradient(circle at 91% 31%, color-mix(in srgb, #aaa8cc 28%, transparent) 0 1px, transparent 2px),
		linear-gradient(180deg, color-mix(in srgb, #e9e8f5 75%, var(--an-white)), color-mix(in srgb, #fff2d6 28%, var(--an-white)));
	background-size: 100% 100%;
}

.an-entry .an-content-section--nothing::before {
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--an-night-2) 18%, transparent), transparent 58%);
	border-radius: var(--an-radius);
	opacity: 0.68;
}

.an-entry .an-content-section--nothing::after {
	right: -8%;
	bottom: -38px;
	left: -8%;
	height: 150px;
	background: radial-gradient(ellipse at center bottom, color-mix(in srgb, #ffd995 62%, transparent), transparent 68%);
	opacity: 0;
	transform: translateY(40px);
}

.an-entry .an-content-section--nothing.is-visible::before {
	animation: an-night-fade 1.8s 0.16s ease-out both;
}

.an-entry .an-content-section--nothing.is-visible::after {
	animation: an-dawn-rise 1.8s 0.16s ease-out both;
}

/* 比較：対象番号の行だけを光が横切り、視線の基準を作る。 */
.an-entry .an-content-section--comparison tbody tr[data-an-current-number] > td {
	position: relative;
	overflow: hidden;
}

.an-entry .an-content-section--comparison tbody tr[data-an-current-number] > td::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 22%, color-mix(in srgb, var(--an-gold) 24%, transparent) 47%, transparent 72%);
	content: "";
	opacity: 0;
	pointer-events: none;
}

.an-entry .an-content-section--comparison.is-visible tbody tr[data-an-current-number] > td::after {
	animation: an-table-scan 1.2s 0.38s ease-out both;
}

/* FAQと出典：終盤は静かな星の着地だけに抑える。 */
.an-entry .an-content-section--faq::before,
.an-entry .an-content-section--sources::before {
	top: 12px;
	right: 10px;
	width: 90px;
	height: 60px;
	background:
		radial-gradient(circle at 10% 65%, var(--an-gold) 0 1px, transparent 2px),
		radial-gradient(circle at 44% 18%, var(--an-gold-pale) 0 2px, transparent 3px),
		radial-gradient(circle at 82% 64%, var(--an-gold) 0 1px, transparent 2px),
		linear-gradient(28deg, transparent 49%, color-mix(in srgb, var(--an-gold) 28%, transparent) 50%, transparent 51%);
	opacity: 0;
	transform: translateY(-12px);
}

.an-entry .an-content-section--faq.is-visible::before,
.an-entry .an-content-section--sources.is-visible::before {
	animation: an-constellation-settle 1.2s 0.18s ease-out both;
}

/* チェーンナンバー：星明かり、案内役の天使、カード、光の矢印が連動する。 */
.an-entry .an-content-section--chain::before,
.an-entry .an-content-section--chain::after {
	width: 176px;
	height: 270px;
	background: url("../img/angel-celestial-v1.webp") center / contain no-repeat;
	opacity: 0;
	filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--an-gold-deep) 26%, transparent));
}

.an-entry .an-content-section--chain::before {
	top: 258px;
	left: -138px;
	transform: translateX(-90px) rotate(18deg) scale(0.84);
}

.an-entry .an-content-section--chain::after {
	top: 850px;
	right: -138px;
	transform: translateX(90px) rotate(-18deg) scale(0.84);
}

.an-entry .an-content-section--chain.is-visible::before {
	animation: an-angel-guide-left 1.55s 0.3s cubic-bezier(0.12, 0.76, 0.18, 1) both;
}

.an-entry .an-content-section--chain.is-visible::after {
	animation: an-angel-guide-right 1.55s 0.8s cubic-bezier(0.12, 0.76, 0.18, 1) both;
}

.an-entry .an-content-section--chain > h2 {
	position: relative;
	overflow: hidden;
}

.an-entry .an-content-section--chain > h2::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 34%, color-mix(in srgb, var(--an-white) 85%, transparent) 48%, transparent 62%);
	content: "";
	opacity: 0;
	transform: translateX(-120%);
	pointer-events: none;
}

.an-entry .an-content-section--chain.is-visible > h2::after {
	animation: an-chain-title-shine 1.25s 0.38s ease-out both;
}

.an-entry .an-content-section--chain.is-visible .an-sequence-card {
	animation: an-card-ceremony 0.8s cubic-bezier(0.15, 0.78, 0.18, 1) both;
}

.an-entry .an-content-section--chain.is-visible .an-sequence-arrow {
	animation: an-arrow-awaken 0.85s 0.36s ease-out both;
}

.an-entry .an-content-section--chain.is-visible .an-sequence-card--tier-2 {
	animation-delay: 0.24s;
}

.an-entry .an-content-section--chain.is-visible .an-sequence-card--tier-3 {
	animation: an-card-ceremony 0.8s 0.46s cubic-bezier(0.15, 0.78, 0.18, 1) both, an-tier-three-crown 1.45s 1.1s ease-out both;
}

@keyframes an-heading-illuminate {
	0% { color: var(--an-ink); text-shadow: none; }
	44% { color: color-mix(in srgb, var(--an-ink) 76%, var(--an-gold)); text-shadow: 0 0 14px color-mix(in srgb, var(--an-gold) 42%, transparent); }
	100% { color: var(--an-ink); text-shadow: none; }
}

@keyframes an-heading-glint {
	0% { left: -0.6em; opacity: 0; transform: scale(0.35) rotate(-45deg); }
	38% { opacity: 1; }
	100% { left: calc(100% + 0.1em); opacity: 0; transform: scale(1.15) rotate(38deg); }
}

@keyframes an-celestial-gate {
	0% { opacity: 0; filter: blur(18px); transform: translateX(-50%) scale(0.46); }
	52% { opacity: 1; filter: blur(3px); }
	100% { opacity: 0.78; filter: blur(6px); transform: translateX(-50%) scale(1); }
}

@keyframes an-angel-descend {
	0% { opacity: 0; transform: translate(-50%, -110px) scale(0.72); }
	62% { opacity: 1; transform: translate(-50%, 6px) scale(1.03); }
	100% { opacity: 0.96; transform: translate(-50%, 0) scale(1); }
}

@keyframes an-border-awaken {
	0% { opacity: 0; background-size: 0 2px, 2px 0, 0 2px, 2px 0; }
	20% { opacity: 1; }
	50% { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0; }
	100% { opacity: 0.56; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}

@keyframes an-diagnosis-focus {
	0% { opacity: 0; transform: translateX(-50%) scale(0.68); }
	100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes an-diagnosis-sweep {
	0% { background-position: 140% 0, center; opacity: 0; }
	35% { opacity: 1; }
	100% { background-position: -50% 0, center; opacity: 0.38; }
}

@keyframes an-option-arrive {
	0% { opacity: 0; transform: translateY(16px) scale(0.97); }
	100% { opacity: 1; transform: none; }
}

@keyframes an-love-trail-left {
	0% { left: -20%; opacity: 0; transform: rotate(12deg) scaleX(0.38); }
	70% { opacity: 0.9; }
	100% { left: 8%; opacity: 0.54; transform: rotate(6deg) scaleX(1); }
}

@keyframes an-love-trail-right {
	0% { right: -20%; opacity: 0; transform: rotate(-12deg) scaleX(0.38); }
	70% { opacity: 0.9; }
	100% { right: 8%; opacity: 0.54; transform: rotate(-6deg) scaleX(1); }
}

@keyframes an-twinray-left {
	0% { left: -16%; opacity: 0; }
	52% { left: 34%; opacity: 1; transform: rotate(-8deg); }
	100% { left: 5%; opacity: 0.42; transform: rotate(8deg); }
}

@keyframes an-twinray-right {
	0% { right: -16%; opacity: 0; }
	52% { right: 34%; opacity: 1; transform: rotate(8deg); }
	100% { right: 5%; opacity: 0.42; transform: rotate(-8deg); }
}

@keyframes an-blueprint-draw {
	0% { clip-path: inset(0 100% 0 0); opacity: 0; }
	100% { clip-path: inset(0); opacity: 1; }
}

@keyframes an-coin-arrive {
	0% { opacity: 0; transform: translateX(150px) rotate(240deg); }
	72% { opacity: 1; transform: translateX(-8px) rotate(-14deg); }
	100% { opacity: 0.78; transform: translateX(0) rotate(-7deg); }
}

@keyframes an-aurora-breathe {
	0% { opacity: 0; transform: translateX(-50%) scaleX(0.38); }
	55% { opacity: 0.84; transform: translateX(-50%) scaleX(1.08); }
	100% { opacity: 0.36; transform: translateX(-50%) scaleX(1); }
}

@keyframes an-action-comet {
	0% { top: 142px; opacity: 0; transform: scale(0.5); }
	12% { opacity: 1; }
	88% { opacity: 1; }
	100% { top: calc(100% - 88px); opacity: 0; transform: scale(1); }
}

@keyframes an-night-fade {
	0% { opacity: 0.68; }
	100% { opacity: 0; }
}

@keyframes an-dawn-rise {
	0% { opacity: 0; transform: translateY(40px); }
	100% { opacity: 0.72; transform: translateY(0); }
}

@keyframes an-table-scan {
	0% { opacity: 0; transform: translateX(-80%); }
	45% { opacity: 1; }
	100% { opacity: 0; transform: translateX(80%); }
}

@keyframes an-constellation-settle {
	0% { opacity: 0; transform: translateY(-12px) scale(0.7); }
	100% { opacity: 0.55; transform: none; }
}

@keyframes an-angel-guide-left {
	0% { opacity: 0; transform: translateX(-90px) rotate(18deg) scale(0.84); }
	70% { opacity: 0.82; transform: translateX(8px) rotate(8deg) scale(1.02); }
	100% { opacity: 0.56; transform: translateX(0) rotate(10deg) scale(1); }
}

@keyframes an-angel-guide-right {
	0% { opacity: 0; transform: translateX(90px) rotate(-18deg) scale(0.84); }
	70% { opacity: 0.82; transform: translateX(-8px) rotate(-8deg) scale(1.02); }
	100% { opacity: 0.56; transform: translateX(0) rotate(-10deg) scale(1); }
}

@keyframes an-chain-title-shine {
	0% { opacity: 0; transform: translateX(-120%); }
	28% { opacity: 0.8; }
	100% { opacity: 0; transform: translateX(120%); }
}

@keyframes an-card-ceremony {
	0% { opacity: 0; transform: translateY(32px) rotateY(-18deg) scale(0.84); }
	72% { opacity: 1; transform: translateY(-5px) rotateY(3deg) scale(1.03); }
	100% { opacity: 1; transform: none; }
}

@keyframes an-arrow-awaken {
	0% { opacity: 0; filter: brightness(0.7); transform: scaleX(0.2); }
	58% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 8px var(--an-gold)); }
	100% { opacity: 1; filter: brightness(1.08) drop-shadow(0 0 3px var(--an-gold)); transform: scaleX(1); }
}

@keyframes an-tier-three-crown {
	0% { box-shadow: 0 16px 34px color-mix(in srgb, var(--an-gold) 18%, transparent); }
	45% { box-shadow: 0 18px 48px color-mix(in srgb, var(--an-gold) 70%, transparent), 0 0 0 7px color-mix(in srgb, var(--an-gold) 15%, transparent); }
	100% { box-shadow: 0 16px 34px color-mix(in srgb, var(--an-gold) 34%, transparent), 0 0 0 1px color-mix(in srgb, var(--an-gold) 35%, transparent); }
}

.an-entry .an-short-answer {
	padding: 22px 24px;
	background: var(--an-white);
	border: 2px solid var(--an-gold);
}

.an-entry .an-short-answer p {
	margin: 0;
	color: var(--an-ink);
}

.an-entry .an-note {
	padding: 20px 24px;
	background: var(--an-paper-2);
	border: 1px solid var(--an-line);
	font-size: 14px;
	line-height: 1.9;
	color: var(--an-text-soft);
}

.an-entry .an-note--care {
	background: color-mix(in srgb, var(--an-paper-2) 78%, var(--an-white));
	border: 2px solid var(--an-ink-2);
}

.an-entry .an-note--calm {
	background: color-mix(in srgb, var(--an-paper-2) 70%, var(--an-white));
	border: 2px solid var(--an-gold);
}

.an-entry .an-note__title {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	color: var(--an-ink);
}

.an-entry .an-table-wrap {
	max-width: 100%;
	margin: 0 0 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.an-entry .an-table-wrap table {
	margin: 0;
}

.an-entry .an-table-wrap .an-table--compact {
	width: 100%;
	table-layout: fixed;
}

.an-entry .an-table--compact th:first-child {
	width: 30%;
}

.an-entry .an-table--compact tbody th {
	font-weight: 600;
	text-align: left;
}

.an-entry .an-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.an-entry .an-actions {
	padding-left: 0;
	counter-reset: an-action;
}

.an-entry .an-actions li {
	position: relative;
	padding: 20px 20px 20px 66px;
	background: var(--an-white);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	counter-increment: an-action;
}

.an-entry .an-actions li::before {
	content: counter(an-action);
	position: absolute;
	top: 20px;
	left: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--an-radius-pill);
	background: var(--an-night-2);
	font-family: var(--an-font-sans);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--an-gold);
}

.an-entry .an-actions strong {
	display: block;
	margin-bottom: 4px;
	color: var(--an-ink);
}

/* ---------- 4問チェック ---------- */

.an-entry .an-wizard {
	margin: 0 0 36px;
	padding: 26px 28px 28px;
	background: var(--an-white);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	color: var(--an-text);
}

.an-entry .an-wizard [hidden] {
	display: none !important;
}

.an-entry .an-wizard p {
	color: var(--an-text);
}

.an-entry .an-progress {
	display: none;
	margin-bottom: 20px;
}

.an-entry .an-wizard.is-ready .an-progress {
	display: block;
}

.an-entry .an-progress__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.an-entry .an-progress__row p {
	margin: 0;
}

.an-entry .an-progress__text,
.an-entry .an-progress__hint {
	font-size: 12px;
	font-weight: 600;
	color: var(--an-muted-2) !important;
}

.an-entry .an-progress__track {
	height: 5px;
	overflow: hidden;
	background: var(--an-line-2);
	border-radius: var(--an-radius-pill);
}

.an-entry .an-progress__bar {
	width: 25%;
	height: 100%;
	background: var(--an-gold-deep);
	border-radius: inherit;
	transition: width 0.2s ease;
}

.an-entry .an-wizard-step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.an-entry .an-wizard-step + .an-wizard-step {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--an-line);
}

.an-entry .an-wizard.is-ready .an-wizard-step + .an-wizard-step {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.an-entry .an-wizard-step legend {
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--an-font-mincho);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--an-ink);
}

.an-entry .an-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.an-entry .an-options > br {
	display: none;
}

.an-entry .an-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 10px 14px;
	background: var(--an-paper);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-sm);
	font-size: 14px;
	line-height: 1.55;
	color: var(--an-text);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.an-entry .an-option:hover,
.an-entry .an-option:focus-within,
.an-entry .an-option:has(input:checked) {
	background: var(--an-paper-2);
	border-color: var(--an-gold-deep);
}

.an-entry .an-option input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--an-gold-deep);
}

.an-entry .an-form-error {
	min-height: 26px;
	padding-top: 12px;
	font-size: 13px;
	color: var(--an-ink);
}

.an-entry .an-wizard__actions {
	display: none;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 8px;
}

.an-entry .an-wizard.is-ready .an-wizard__actions {
	display: flex;
}

.an-entry .an-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 24px;
	background: var(--an-gold);
	border: 1px solid var(--an-gold);
	border-radius: var(--an-radius-pill);
	font-size: 14px;
	font-weight: 700;
	color: var(--an-ink);
	cursor: pointer;
}

.an-entry .an-button:hover:not(:disabled) {
	background: var(--an-gold-pale);
	border-color: var(--an-gold-pale);
}

.an-entry .an-button--plain {
	background: var(--an-white);
	border-color: var(--an-line);
	color: var(--an-ink);
}

.an-entry .an-button--plain:hover:not(:disabled) {
	background: var(--an-paper-2);
	border-color: var(--an-gold-deep);
}

.an-entry .an-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.an-entry .an-reading-result {
	padding: 26px;
	background: var(--an-paper-2);
	border: 1px solid var(--an-gold-pale);
	border-radius: var(--an-radius);
	color: var(--an-text);
}

.an-entry .an-reading-result__eyebrow {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--an-gold-deep);
}

.an-entry .an-reading-result h3 {
	display: block;
	margin: 0 0 10px;
	font-size: 20px;
}

.an-entry .an-reading-result h3::before {
	display: none;
}

.an-entry .an-reading-result p {
	margin-bottom: 20px;
	color: var(--an-text);
}

.an-entry .an-reading-result__summary {
	padding: 18px 20px;
	background: var(--an-white);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-sm);
}

.an-entry .an-reading-result dl {
	display: grid;
	grid-template-columns: 145px minmax(0, 1fr);
	margin: 0;
	border-top: 1px solid var(--an-line);
}

.an-entry .an-reading-result dt,
.an-entry .an-reading-result dd {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--an-line);
	font-size: 14px;
	line-height: 1.8;
}

.an-entry .an-reading-result dt {
	padding-right: 18px;
	font-weight: 700;
	color: var(--an-ink);
}

.an-entry .an-reading-result .an-wizard__actions {
	margin-top: 22px;
}

.an-entry .an-reading-result .an-button--plain {
	border-color: var(--an-gold-pale);
	color: var(--an-gold-deep);
}

/* ---------- ダブルナンバー・チェーンナンバー ---------- */

.an-entry .an-chain-feature {
	position: relative;
	margin: 64px 0 56px;
	padding: 0 0 8px;
}

.an-entry .an-chain-feature > h2 {
	margin-top: 0;
	padding: 18px 20px;
	background:
		radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--an-gold) 22%, transparent) 0 2px, transparent 3px),
		radial-gradient(circle at 93% 42%, color-mix(in srgb, var(--an-gold) 16%, transparent) 0 1px, transparent 2px),
		linear-gradient(135deg, var(--an-white), color-mix(in srgb, var(--an-paper-2) 76%, var(--an-white)));
	border: 2px solid var(--an-gold);
	border-radius: var(--an-radius);
}

.an-entry .an-sequence-list {
	display: grid;
	gap: 24px;
	margin: 0 0 40px;
}

.an-entry .an-sequence-pattern {
	position: relative;
	padding: 28px;
	background: var(--an-white);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	overflow: hidden;
}

.an-entry .an-sequence-pattern--chain {
	padding: 32px 28px 28px;
	background:
		radial-gradient(circle at 50% 9%, color-mix(in srgb, var(--an-gold) 14%, transparent), transparent 34%),
		linear-gradient(180deg, var(--an-white), color-mix(in srgb, var(--an-paper-2) 68%, var(--an-white)));
	border: 2px solid var(--an-gold);
	box-shadow: 0 18px 42px color-mix(in srgb, var(--an-night) 10%, transparent);
}

.an-entry .an-sequence-pattern--chain::before,
.an-entry .an-sequence-pattern--chain::after {
	position: absolute;
	width: 110px;
	height: 110px;
	background: radial-gradient(circle, color-mix(in srgb, var(--an-gold) 30%, transparent) 0 2px, transparent 3px);
	background-size: 22px 22px;
	content: "";
	opacity: 0.7;
	pointer-events: none;
}

.an-entry .an-sequence-pattern--chain::before {
	top: -32px;
	left: -28px;
}

.an-entry .an-sequence-pattern--chain::after {
	right: -28px;
	bottom: -32px;
}

.an-entry .an-sequence-flow {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 190px) 48px minmax(0, 190px);
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 26px;
}

.an-entry .an-sequence-flow--chain {
	grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
	gap: 8px;
}

.an-entry .an-sequence-card {
	display: flex;
	width: 100%;
	max-width: 190px;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 7;
	background-color: var(--an-night-2);
	background-position: center;
	background-size: cover;
	border-radius: 4px;
	box-shadow: 0 12px 24px color-mix(in srgb, var(--an-night) 18%, transparent);
	font-family: var(--an-font-en);
	font-size: 52px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0.03em;
	color: #f4db9a;
	text-shadow: 0 2px 8px #000;
}

.an-entry .an-sequence-flow--chain .an-sequence-card {
	max-width: none;
	font-size: clamp(42px, 6vw, 58px);
}

.an-entry .an-sequence-card--tier-1 {
	background-image: url("../img/sequence-card-tier-1.webp");
}

.an-entry .an-sequence-card--tier-2 {
	background-image: url("../img/sequence-card-tier-2.webp");
}

.an-entry .an-sequence-card--tier-3 {
	background-image: url("../img/sequence-card-tier-3.webp");
	box-shadow:
		0 16px 34px color-mix(in srgb, var(--an-gold) 34%, transparent),
		0 0 0 1px color-mix(in srgb, var(--an-gold) 35%, transparent);
}

.an-entry .an-sequence-arrow {
	width: 100%;
	height: 24px;
	background: url("../img/sequence-arrow.svg") center / contain no-repeat;
}

.an-entry .an-sequence-pattern > p {
	position: relative;
	z-index: 1;
	margin-bottom: 10px;
}

.an-entry .an-sequence-pattern > p:first-of-type {
	font-size: 17px;
}

.an-entry .an-sequence-pattern > p:last-child {
	margin-bottom: 0;
}

/* ---------- Xの体験投稿 ---------- */

.an-entry .an-x-post-list {
	display: grid;
	gap: 20px;
	margin-bottom: 32px;
}

.an-entry .an-x-post {
	display: grid;
	grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 24px;
	padding: 22px;
	background: var(--an-white);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
}

.an-entry .an-x-post__embed {
	min-width: 0;
}

.an-entry .an-x-post__embed .twitter-tweet {
	margin: 0 auto !important;
}

.an-entry .an-x-post__embed > blockquote > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92px;
	padding: 18px;
	background: var(--an-paper-2);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-sm);
	font-weight: 700;
	text-align: center;
}

.an-entry .an-x-post__reading h4 {
	margin-top: 0;
	font-size: 18px;
	line-height: 1.7;
}

.an-entry .an-x-post__reading p:last-child {
	margin-bottom: 0;
}

/* ---------- FAQ・出典 ---------- */

.an-entry .an-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}

.an-entry .an-faq details {
	background: var(--an-white);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
}

.an-entry .an-faq summary {
	padding: 18px 46px 18px 20px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--an-ink);
	cursor: pointer;
}

.an-entry .an-faq details p {
	margin: 0;
	padding: 0 20px 20px;
}

.an-entry .an-sources {
	padding: 24px;
	background: var(--an-paper-2);
	border-radius: var(--an-radius);
}

.an-entry .an-sources__group {
	display: block;
	margin-top: 26px;
}

.an-entry .an-sources ul {
	margin: 14px 0 0;
	gap: 8px;
}

.an-entry .an-sources li {
	font-size: 13px;
}

/* ---------- 前後ナンバー ---------- */

.an-prevnext {
	display: flex;
	gap: 16px;
}

.an-prevnext__card {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--an-white);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	padding: 18px 22px;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.an-prevnext__card:hover {
	border-color: var(--an-gold-pale);
}

.an-prevnext__card--next {
	justify-content: flex-end;
	text-align: right;
}

.an-prevnext__arrow {
	flex-shrink: 0;
}

.an-prevnext__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.an-prevnext__label {
	font-size: 11px;
	color: var(--an-muted);
}

.an-prevnext__number {
	font-family: var(--an-font-en);
	font-size: 18px;
	color: var(--an-ink);
	line-height: 1.4;
}

.an-prevnext__suffix {
	font-family: var(--an-font-sans);
	font-size: 12px;
}

/* ---------- タグ + シェア ---------- */

.an-tags-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.an-share {
	display: flex;
	align-items: center;
	gap: 10px;
}

.an-share__label {
	font-size: 12px;
	color: var(--an-muted);
}

.an-share__btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-pill);
	background: var(--an-white);
	color: var(--an-ink);
	padding: 0;
	font-family: var(--an-font-sans);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.an-share__btn:hover {
	border-color: var(--an-gold-pale);
}

.an-share-copy--done {
	width: auto;
	padding: 0 14px;
	font-size: 12px;
	color: var(--an-gold-deep);
	border-color: var(--an-gold-pale);
}

/* 著者ボックスのスタイルは components.css（author.phpでも使うため） */

/* ---------- 関連記事 ---------- */

.an-related {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.an-related__title {
	margin: 0;
	font-family: var(--an-font-mincho);
	font-size: 20px;
	font-weight: 600;
	color: var(--an-ink);
}

.an-card-grid--related {
	gap: 18px;
}

.an-card-grid--related .an-card__media,
.an-card-grid--related .an-number-tile--card {
	height: 90px;
}

.an-card-grid--related .an-number-tile__num {
	font-size: 32px;
}

.an-card-grid--related .an-card__body {
	padding: 14px 16px 16px;
}

.an-card-grid--related .an-card__title {
	font-size: 13px;
}

.an-card-grid--related .an-chip-list,
.an-card-grid--related .an-card__date {
	display: none;
}

/* ---------- レスポンシブ ---------- */

@media (max-width: 1023px) {
	/* 長い記事タイトルがある画面では、タブレット幅もヘッダーをドロワーにする。 */
	.an-header__inner {
		min-height: 64px;
		padding: 0 var(--an-space-3);
	}

	.an-nav-toggle {
		display: block;
	}

	.an-header__drawer {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 50;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--an-space-5);
		width: min(320px, 85vw);
		height: 100dvh;
		padding: 88px var(--an-space-4) var(--an-space-5);
		background: var(--an-night-2);
		border-left: 1px solid var(--an-night-line);
		box-shadow: -12px 0 32px color-mix(in srgb, var(--an-night) 55%, transparent);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0.25s ease;
		overflow-y: auto;
	}

	.an-header__drawer.an-header__drawer--open {
		transform: translateX(0);
		visibility: visible;
	}

	.an-drawer-open {
		overflow: hidden;
	}

	.an-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.an-nav__list a {
		display: block;
		padding: var(--an-space-2) var(--an-space-1);
		font-size: 15px;
		border-bottom: 1px solid color-mix(in srgb, var(--an-gold) 18%, transparent);
	}

	.an-number-search--header {
		width: 100%;
	}
}

@media (max-width: 1024px) {
	.an-entry {
		overflow-x: clip;
	}

	.an-entry .an-content-section--chain::before {
		content: none;
	}

	/* 狭い画面では天使を見出しに追従させ、羽と本文の領域を分ける。 */
	.an-entry .an-content-section--chain > #double-chain {
		position: relative;
		padding-top: 174px;
	}

	.an-entry .an-content-section--chain > #double-chain::after {
		position: absolute;
		top: 0;
		left: 0;
		width: 116px;
		height: 154px;
		background: url("../img/angel-celestial-v1.webp") center / contain no-repeat;
		content: "";
		opacity: 0.7;
		pointer-events: none;
	}

	.an-entry .an-content-section--chain::after {
		right: 0;
	}
}

@media (max-width: 767px) {
	.an-entry {
		overflow-x: clip;
	}

	.an-article {
		width: calc(100% - 40px);
		gap: 28px;
		padding: 28px 0 56px;
	}

	.an-article-title {
		font-size: 24px;
	}

	.an-conclusion,
	.an-toc {
		padding: 22px 20px;
	}

	.an-entry .an-toc__list {
		columns: 1;
		column-gap: 0;
	}

	.an-entry .an-reading-teaser {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 6px;
		padding: 20px 18px;
	}

	.an-entry .an-reading-teaser strong,
	.an-entry .an-reading-teaser__copy,
	.an-entry .an-reading-teaser__link {
		grid-column: 1;
	}

	.an-entry .an-reading-teaser strong {
		margin-top: 0;
	}

	.an-entry .an-reading-teaser__link {
		grid-row: auto;
		justify-self: start;
		margin-top: 8px;
	}

	.an-entry .an-content-section {
		margin-top: 48px;
		scroll-margin-top: 16px;
	}

	.an-entry .an-content-section--warning,
	.an-entry .an-content-section--nothing,
	.an-entry .an-content-section--sources {
		padding: 22px 18px 4px;
	}

	.an-entry .an-content-section--meaning::before,
	.an-entry .an-content-section--love::before,
	.an-entry .an-content-section--twinray::after,
	.an-entry .an-content-section--money::after {
		opacity: 0.45;
	}

	.an-entry h2 {
		margin: 44px 0 20px;
		gap: 12px;
		font-size: 19px;
	}

	.an-entry h2::before {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.an-entry h3 {
		font-size: 18px;
	}

	.an-entry .an-content-section--meaning > h2 {
		margin: 44px 0 226px;
	}

	.an-entry .an-content-section--meaning::before {
		top: 60px;
		width: 100%;
		height: 210px;
	}

	.an-entry .an-content-section--meaning::after {
		top: 56px;
		width: 146px;
		height: 214px;
	}

	.an-entry .an-content-section--money::before {
		top: 62px;
		right: 2px;
		width: 56px;
		height: 56px;
		font-size: 15px;
	}

	.an-entry .an-content-section--chain::after {
		width: 116px;
		height: 178px;
		opacity: 0;
	}

	.an-entry .an-content-section--chain::after {
		top: 1000px;
		right: -20px;
	}

	.an-entry .an-content-section--love::before,
	.an-entry .an-content-section--love::after,
	.an-entry .an-content-section--twinray::before,
	.an-entry .an-content-section--twinray::after {
		top: 84px;
	}

	.an-entry .an-content-section--actions::after {
		left: 31px;
	}

	.an-entry .an-chain-feature {
		margin: 48px 0 44px;
	}

	.an-entry .an-chain-feature > h2 {
		padding: 14px;
	}

	.an-entry .an-article-lead {
		font-size: 16px;
	}

	.an-entry .an-beginner-note,
	.an-entry .an-short-answer,
	.an-entry .an-note {
		padding: 18px;
	}

	.an-entry .an-wizard {
		padding: 24px 18px;
	}

	.an-entry .an-options {
		gap: 8px;
	}

	.an-entry .an-option {
		padding: 10px;
	}

	.an-entry .an-table-wrap table {
		min-width: 620px;
	}

	.an-entry .an-table-wrap .an-table--compact {
		min-width: 0;
	}

	.an-entry .an-wizard-step legend {
		font-size: 18px;
	}

	.an-entry .an-wizard__actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.an-entry .an-button {
		width: 100%;
	}

	.an-entry .an-reading-result {
		padding: 22px 18px;
	}

	.an-entry .an-reading-result dl {
		display: block;
	}

	.an-entry .an-reading-result dt {
		padding-bottom: 2px;
		border-bottom: 0;
	}

	.an-entry .an-reading-result dd {
		padding-top: 0;
	}

	.an-entry .an-sequence-pattern {
		padding: 18px 14px;
	}

	.an-entry .an-sequence-pattern--chain {
		padding: 22px 14px 18px;
	}

	.an-entry .an-sequence-flow {
		grid-template-columns: minmax(0, 132px) 28px minmax(0, 132px);
		gap: 8px;
		margin-bottom: 20px;
	}

	.an-entry .an-sequence-card {
		max-width: 132px;
		font-size: 36px;
	}

	.an-entry .an-sequence-flow--chain {
		grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
		gap: 4px;
	}

	.an-entry .an-sequence-flow--chain .an-sequence-card {
		max-width: none;
		font-size: 27px;
	}

	.an-entry .an-sequence-arrow {
		width: 100%;
	}

	.an-entry .an-x-post {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 18px;
	}

	.an-prevnext {
		flex-direction: column;
	}

	.an-tags-share {
		flex-direction: column;
		align-items: flex-start;
	}

	.an-card-grid--related {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.an-entry .an-reading-teaser,
	.an-entry .an-content-section,
	.an-entry .an-content-section::before,
	.an-entry .an-content-section::after,
	.an-entry .an-heading-text,
	.an-entry .an-heading-glint,
	.an-entry .an-wizard-step .an-option,
	.an-entry .an-content-section--chain > h2::after,
	.an-entry .an-content-section--chain .an-sequence-card,
	.an-entry .an-content-section--chain .an-sequence-arrow,
	.an-entry .an-content-section--comparison tbody tr[data-an-current-number] > td::after,
	.an-entry .an-content-section--actions .an-actions li {
		transition: none !important;
		animation: none !important;
	}

	.an-entry .an-content-section.an-reveal-ready,
	.an-entry .an-content-section.an-reveal-ready:not(.is-visible),
	.an-entry .an-content-section--chain.an-reveal-ready:not(.is-visible) .an-sequence-card,
	.an-entry .an-content-section--chain.an-reveal-ready:not(.is-visible) .an-sequence-arrow,
	.an-entry .an-content-section--actions.an-reveal-ready:not(.is-visible) .an-actions li {
		opacity: 1;
		transform: none;
	}

	.an-entry .an-heading-glint,
	.an-entry .an-content-section--actions::after,
	.an-entry .an-content-section--comparison tbody tr[data-an-current-number] > td::after,
	.an-entry .an-content-section--chain > h2::after {
		opacity: 0;
	}

	.an-entry .an-content-section--meaning::before {
		opacity: 0.78;
		filter: blur(6px);
		transform: translateX(-50%) scale(1);
	}

	.an-entry .an-content-section--meaning::after {
		opacity: 0.96;
		transform: translate(-50%, 0) scale(1);
	}

	.an-entry .an-content-section--warning::after {
		background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
		opacity: 0.56;
	}

	.an-entry .an-content-section--reading::before {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}

	.an-entry .an-content-section--reading::after {
		opacity: 0.38;
		transform: translateX(-50%);
	}

	.an-entry .an-content-section--faq::before,
	.an-entry .an-content-section--sources::before {
		opacity: 0.54;
		transform: none;
	}

	.an-entry .an-content-section--love::before {
		left: 8%;
		opacity: 0.54;
		transform: rotate(6deg);
	}

	.an-entry .an-content-section--love::after {
		right: 8%;
		opacity: 0.54;
		transform: rotate(-6deg);
	}

	.an-entry .an-content-section--twinray::before {
		left: 5%;
		opacity: 0.42;
		transform: rotate(8deg);
	}

	.an-entry .an-content-section--twinray::after {
		right: 5%;
		opacity: 0.42;
		transform: rotate(-8deg);
	}

	.an-entry .an-content-section--work::before {
		clip-path: inset(0);
		opacity: 1;
	}

	.an-entry .an-content-section--money::before {
		opacity: 0.78;
		transform: rotate(-7deg);
	}

	.an-entry .an-content-section--health::before,
	.an-entry .an-content-section--health::after {
		opacity: 0.36;
		transform: translateX(-50%) scaleX(1);
	}

	.an-entry .an-content-section--nothing::before {
		opacity: 0;
	}

	.an-entry .an-content-section--nothing::after {
		opacity: 0.72;
		transform: none;
	}

	.an-entry .an-content-section--chain::before {
		opacity: 0.56;
		transform: rotate(10deg);
	}

	.an-entry .an-content-section--chain::after {
		opacity: 0.56;
		transform: rotate(-10deg);
	}
}

@media (max-width: 360px) {
	.an-entry .an-sequence-flow--chain .an-sequence-card--four-digits {
		font-size: 22px;
		white-space: nowrap;
	}
}

/* Keep five- and six-digit numbers together on both card layouts. */
.an-entry .an-sequence-card--five-digits,
.an-entry .an-sequence-card--six-digits {
	white-space: nowrap;
	letter-spacing: 0;
}

.an-entry .an-sequence-flow--chain .an-sequence-card--five-digits {
	font-size: clamp(32px, 4vw, 46px);
}

.an-entry .an-sequence-flow--chain .an-sequence-card--six-digits {
	font-size: clamp(28px, 3.5vw, 40px);
}

@media (max-width: 600px) {
	.an-entry .an-sequence-card--five-digits {
		font-size: 30px;
	}

	.an-entry .an-sequence-card--six-digits {
		font-size: 26px;
	}

	.an-entry .an-sequence-flow--chain .an-sequence-card--five-digits {
		font-size: clamp(22px, 6vw, 30px);
	}

	.an-entry .an-sequence-flow--chain .an-sequence-card--six-digits {
		font-size: clamp(18px, 5vw, 26px);
	}
}