/*
 * コマンド辞典・用語辞典の個別のページ（single-linux_command.php・single-linux_glossary.php・inc/kb-entry.php）。
 * 色・字・札・印・アイコンは一覧（kb-dex.css）と同じ。--kd-c は分野の色。px で書く（root は 62.5%）。
 */

.kx {
	max-width: 1180px;
	margin: 0 auto;
	padding-bottom: 80px;
	font: 400 16px/1.8 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
	overflow-wrap: anywhere;
}
.kx *,
.kx *::before,
.kx *::after {
	box-sizing: border-box;
}
.kx :where(h1, h2, h3, p, ul, ol, dl, dd, figure, pre, blockquote) {
	margin: 0;
	padding: 0;
}
.kx :where(ul, ol) {
	list-style: none;
}
.kx :where(h1, h2, h3)::before,
.kx :where(h1, h2, h3)::after {
	content: none;
}
.kx :where(a) {
	color: inherit;
	text-underline-offset: 4px;
}
.kx :where(button) {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.kx :where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--kd-accent);
	outline-offset: 2px;
}
.kx [hidden] {
	display: none !important;
}
.kx .is-mono,
.kx code {
	font-family: var(--kd-mono);
}
/* 文の中の `コード`（KbEntry\txt・paras）。打つ文字だと一目で分かる小さな札 */
.kx code.kx-ic {
	padding: 0.05em 0.4em;
	border: 1px solid var(--kd-line, #e8e1d4);
	border-radius: 6px;
	background: var(--kd-sub, #f8eddc);
	color: var(--kd-ink, #1d1813);
	font-size: 0.92em;
	white-space: nowrap; /* sudo -l を「sudo -」「l」に折らない */
}
.kx code.kx-ic.is-long {
	white-space: normal;
	overflow-wrap: anywhere; /* 長い 1 行（export PATH=…）はスマホで横にはみ出さないよう折る */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.kx-term code.kx-ic,
.kx .is-dark code.kx-ic {
	border-color: rgba(241, 237, 230, 0.2);
	background: rgba(241, 237, 230, 0.1);
	color: inherit;
}

/* ---------- 冒頭の札 ---------- */

.kx-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* スマホ: 答え札の長い行で列が広がらないように */
	gap: 28px;
	margin-top: 18px;
	align-items: center;
}
.kx-hero > * {
	min-width: 0;
}
@media (min-width: 960px) {
	.kx-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
		gap: 44px;
	}
}
.kx-hero__main {
	display: grid;
	gap: 16px;
	min-width: 0;
}
.kx-hero__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	min-height: 36px;
}
.kx-no {
	padding: 2px 10px 0;
	border-radius: 6px;
	background: var(--kd-ink);
	color: var(--kd-accent);
	font: 400 17px/1.5 var(--kd-num);
	letter-spacing: 0.06em;
}
.kx .kx-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 2px solid var(--kd-ink);
	border-radius: 999px;
	background: var(--kd-surface);
	color: var(--kd-ink);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.18s var(--kd-spring), box-shadow 0.18s ease;
}
.kx-cat .kd-ico {
	width: 16px;
	height: 16px;
	color: var(--kd-c);
}
.kx-hero__stamp {
	margin-left: auto;
}
.kx-hero__stamp .kd-mark--open {
	width: 46px;
	height: 46px;
	font-size: 15px;
}
.kx-hero__name {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}
.kx-tile {
	flex: none;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border: 3px solid var(--kd-ink);
	border-radius: 22px;
	background: var(--kd-surface);
	box-shadow: 5px 5px 0 var(--kd-c, var(--kd-accent));
	color: var(--kd-ink);
	font: 700 30px/1 var(--kd-brandfont);
	animation: kd-hello 0.9s 0.3s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
.kx-tile.is-mono {
	font: 700 28px/1 var(--kd-mono);
}
.kx-hero__names {
	min-width: 0;
}
.kx .kx-title {
	color: var(--kd-ink);
	font: 700 clamp(36px, 5.6vw, 64px)/1.12 var(--kd-brandfont);
	letter-spacing: 0.005em;
	word-break: auto-phrase;
}
.kx .kx-title.is-mono {
	font-family: var(--kd-mono);
	letter-spacing: -0.02em;
}
.kx-reading {
	margin-top: 4px;
	color: var(--kd-muted);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.kx-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.kx-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--kd-sub);
	color: var(--kd-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}
.kx-badge.is-aka b {
	font-family: var(--kd-mono);
}
.kx-risk {
	padding: 4px 12px;
	font-size: 13px;
}
.kx-risk.is-0 {
	background: #e8f6ee;
	color: var(--kd-ok);
}
.kx-lead {
	max-width: 38em;
	color: var(--kd-text);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.85;
}
.kx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.kx .kx-act {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 6px 18px;
	border: 2px solid var(--kd-ink);
	border-radius: 12px;
	background: var(--kd-surface);
	color: var(--kd-ink);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.18s var(--kd-spring), box-shadow 0.18s ease, background 0.16s ease;
}
.kx-act__icon {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	font-size: 18px;
	line-height: 1;
}
.kx-act__icon .kd-ico {
	width: 18px;
	height: 18px;
}
.kx .kx-act--save[aria-pressed="true"] {
	background: var(--kd-ink);
	color: var(--kd-term-key);
}
.kx .kx-act--save.is-pop .kx-act__icon {
	animation: kd-pop 0.45s var(--kd-spring);
}
.kx .kx-act--lab {
	border-color: var(--kd-ink);
	background: var(--kd-accent);
	color: #fff;
	box-shadow: 3px 3px 0 var(--kd-ink);
}
.kx .kx-act:active {
	transform: translate(2px, 2px);
	box-shadow: none;
}

/* 動く端末（コマンド） */
.kx-live {
	border: 3px solid var(--kd-ink);
	border-radius: 18px;
	background: var(--kd-term);
	box-shadow: 7px 7px 0 var(--kd-c, var(--kd-accent));
	color: var(--kd-term-fg);
	overflow: hidden;
}
.kx-live__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(241, 237, 230, 0.1);
}
.kx-live__title {
	color: var(--kd-term-muted);
	font: 500 12px/1 var(--kd-mono);
}
.kx .kx-live__replay {
	margin-left: auto;
	padding: 3px 10px;
	border: 1.5px solid rgba(241, 237, 230, 0.3);
	border-radius: 999px;
	background: none;
	color: var(--kd-term-fg);
	font-size: 12px;
	font-weight: 700;
}
.kx-live__screen {
	display: grid;
	gap: 10px;
	min-height: 240px;
	max-height: 340px;
	padding: 16px 18px 20px;
	overflow: hidden;
	font: 500 14px/1.65 var(--kd-mono);
}
.kx-live__cmd {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.kx-live__ps {
	color: var(--kd-term-key);
}
.kx-live__cmd code {
	color: var(--kd-term-fg);
}
.kx-live__out {
	max-height: 120px;
	margin-top: 4px;
	overflow: hidden;
	color: var(--kd-term-muted);
	font: inherit;
	white-space: pre-wrap;
}
.kx-live__cursor i {
	display: inline-block;
	width: 9px;
	height: 17px;
	background: var(--kd-term-key);
	vertical-align: -3px;
	animation: kd-caret 1.1s steps(1) infinite;
}
.kx-live.is-typing .kx-live__cursor {
	display: none;
}
.kx-live__step.is-hidden {
	display: none;
}
.kx-live__out.is-hidden {
	visibility: hidden;
}
.kx-live__out.is-show {
	animation: kx-print 0.5s steps(6) both;
}
.kx-live__caret {
	display: inline-block;
	width: 9px;
	height: 17px;
	margin-left: 1px;
	background: var(--kd-term-key);
	vertical-align: -3px;
}

/* めくるカード（用語） */
.kx-flip {
	perspective: 1200px;
}
.kx .kx-flip__card {
	position: relative;
	display: block;
	width: 100%;
	min-height: 280px;
	padding: 0;
	border: 0;
	background: none;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.3, 1.25, 0.4, 1);
	text-align: center;
}
.kx .kx-flip__card[aria-pressed="true"] {
	transform: rotateY(180deg);
}
.kx-flip__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	border: 3px solid var(--kd-ink);
	border-radius: 20px;
	box-shadow: 7px 7px 0 var(--kd-c, var(--kd-accent));
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.kx-flip__face.is-front {
	background: var(--kd-term);
	color: var(--kd-term-fg);
}
.kx-flip__face.is-back {
	background: var(--kd-surface);
	color: var(--kd-ink);
	transform: rotateY(180deg);
}
.kx-flip__q {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--kd-accent);
	color: #fff;
	font: 700 38px/1 var(--kd-brandfont);
	animation: kx-wobble 2.8s 1s ease-in-out infinite;
}
.kx-flip__term {
	font: 700 clamp(24px, 3.4vw, 34px)/1.25 var(--kd-brandfont);
}
.kx-flip__ask {
	color: var(--kd-term-muted);
	font-weight: 700;
}
.kx-flip__label {
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--kd-accent-soft);
	color: var(--kd-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
}
.kx-flip__easy {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
}
.kx-flip__hint {
	margin-top: 6px;
	color: var(--kd-term-muted);
	font-size: 12px;
	font-weight: 700;
}
.kx-flip__face.is-back .kx-flip__hint {
	color: var(--kd-muted);
}

/* ---------- 目次（上に貼り付く） ---------- */

.kx-tabs {
	position: sticky;
	top: var(--kd-top);
	z-index: 30;
	display: flex;
	gap: 4px;
	margin: 28px -16px 0;
	padding: 10px 16px 13px;
	overflow-x: auto;
	border-bottom: 3px solid var(--kd-ink);
	background: color-mix(in srgb, var(--kd-ground) 94%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.kx-tabs::-webkit-scrollbar {
	display: none;
}
.kx .kx-tabs a {
	position: relative;
	z-index: 1;
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 4px 14px;
	border-radius: 999px;
	color: var(--kd-ink);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: color 0.2s ease;
}
.kx .kx-tabs a[aria-current="true"] {
	color: #fff;
}
.kx-tabs a.is-read::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-radius: 50%;
	background: var(--kd-accent);
}
.kx-tabs__pill {
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 0;
	height: 38px;
	border-radius: 999px;
	background: var(--kd-ink);
	transition: transform 0.4s var(--kd-spring), width 0.4s var(--kd-spring);
}
.kx-tabs__line {
	position: absolute;
	right: 0;
	bottom: -3px;
	left: 0;
	height: 3px;
	pointer-events: none;
}
.kx-tabs__line i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--kd-accent);
	transform: scaleX(0);
	transform-origin: left;
}

/* ---------- 本文 ---------- */

.kx-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	max-width: 900px;
	margin: 26px auto 0;
}
.kx-sec {
	min-width: 0;
	padding: 24px 26px 26px;
	border: 2px solid var(--kd-ink);
	border-radius: 18px;
	background: var(--kd-surface);
	scroll-margin-top: calc(var(--kd-top) + 76px);
}
.kx-sec.is-pre {
	opacity: 0;
	transform: translateY(22px);
}
.kx-sec.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.6s var(--kd-out);
}
.kx .kx-sec__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	color: var(--kd-ink);
	font: 700 22px/1.4 var(--kd-brandfont);
}
.kx-sec__title .kd-ico {
	flex: none;
	width: 40px;
	height: 40px;
	padding: 9px;
	border-radius: 12px;
	background: var(--kd-c, var(--kd-accent));
	color: #fff;
	-webkit-mask: none;
	mask: none;
	position: relative;
}
.kx-sec__title .kd-ico::after {
	content: "";
	position: absolute;
	inset: 9px;
	background: #fff;
	-webkit-mask: var(--kd-i) center / contain no-repeat;
	mask: var(--kd-i) center / contain no-repeat;
}
.kx .kx-sub {
	margin: 22px 0 10px;
	color: var(--kd-ink);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.kx .kx-sub::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 2px;
	background: var(--kd-c, var(--kd-accent));
	transform: rotate(45deg);
	vertical-align: 2px;
}
.kx-hint {
	margin-bottom: 10px;
	color: var(--kd-muted);
	font-size: 13px;
	font-weight: 600;
}
.kx-prose {
	color: var(--kd-text);
	font-size: 16px;
	line-height: 1.95;
}
.kx-prose p + p {
	margin-top: 1em;
}
.kx-when {
	margin-bottom: 16px;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--kd-accent-soft);
	color: var(--kd-ink);
	font-weight: 700;
	line-height: 1.85;
}
.kx-when__label {
	display: block;
	margin-bottom: 2px;
	color: var(--kd-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

/* 端末 */
.kx-term {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 34px 8px 8px;
	border-radius: 14px;
	background: var(--kd-term);
}
.kx-term + .kx-term {
	margin-top: 10px;
}
.kx-term__dots {
	position: absolute;
	top: 12px;
	left: 14px;
	display: flex;
	gap: 6px;
}
.kx-live__bar .kx-term__dots {
	position: static;
}
.kx-term__dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff5f57;
}
.kx-term__dots i:nth-child(2) {
	background: #febc2e;
}
.kx-term__dots i:nth-child(3) {
	background: #28c840;
}
.kx .kx-term__line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 40px;
	padding: 7px 8px 7px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--kd-term-fg);
	font: 500 14px/1.6 var(--kd-mono);
	text-align: left;
	transition: background 0.15s ease;
}
.kx-term__line code {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.kx-term__line code::before {
	content: "$ ";
	color: var(--kd-term-key);
}
.kx-term__line.is-plain code::before {
	content: none;
}
.kx-term__copy {
	flex: none;
	padding: 2px 8px;
	border-radius: 6px;
	background: rgba(241, 237, 230, 0.1);
	color: var(--kd-term-muted);
	font: 700 11px/1.5 system-ui, sans-serif;
	transition: background 0.15s ease, color 0.15s ease;
}
.kx-term__line.is-copied .kx-term__copy {
	background: var(--kd-accent);
	color: #fff;
}
.kx-term__out {
	margin: 0 12px 6px;
	padding: 8px 12px;
	border-left: 2px solid rgba(255, 176, 113, 0.4);
	color: var(--kd-term-muted);
	font: 500 13px/1.6 var(--kd-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* オプションを組み立てる */
.kx-build {
	margin-top: 18px;
}
.kx-build__lead {
	margin-bottom: 10px;
	color: var(--kd-muted);
	font-size: 14px;
}
.kx-build__lead b {
	display: block;
	color: var(--kd-ink);
	font-size: 15px;
}
.kx-build__line {
	position: sticky;
	top: calc(var(--kd-top) + 66px);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 12px 18px;
	border-radius: 14px;
	background: var(--kd-term);
	box-shadow: 0 10px 24px rgba(29, 24, 19, 0.16);
}
.kx-build__cmd {
	flex: 1;
	min-width: 0;
	color: var(--kd-term-fg);
	font: 600 16px/1.6 var(--kd-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.kx-build__ps {
	color: var(--kd-term-key);
}
.kx-build__cmd em {
	color: var(--kd-term-key);
	font-style: normal;
	animation: kx-slot 0.32s var(--kd-spring);
}
.kx-build__cmd i {
	color: var(--kd-term-muted);
	font-style: normal;
}
.kx .kx-build__copy {
	flex: none;
	min-height: 38px;
	padding: 4px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--kd-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}
.kx-build__opts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 10px;
	margin-top: 14px;
}
.kx .kx-opt {
	display: grid;
	gap: 4px;
	width: 100%;
	height: 100%;
	padding: 12px 14px;
	border: 2px solid var(--kd-line-strong);
	border-radius: 12px;
	background: var(--kd-surface);
	color: var(--kd-text);
	text-align: left;
	transition: transform 0.18s var(--kd-spring), border-color 0.16s ease, background 0.16s ease, box-shadow 0.18s ease;
}
.kx-opt__flag {
	color: var(--kd-ink);
	font: 700 16px/1.4 var(--kd-mono);
}
.kx-opt__flag i {
	color: var(--kd-muted);
	font-style: normal;
	font-weight: 500;
}
.kx-opt__desc {
	font-size: 14px;
	line-height: 1.6;
}
.kx-opt__risk {
	justify-self: start;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--kd-fair-soft);
	color: var(--kd-fair);
	font-size: 11px;
	font-weight: 800;
}
.kx-opt.is-danger .kx-opt__risk {
	background: var(--kd-hard-soft);
	color: var(--kd-hard);
}
.kx-opt__ex {
	color: var(--kd-muted);
	font-size: 12px;
}
.kx-opt__ex code {
	font-size: 12px;
}
.kx .kx-opt[aria-pressed="true"] {
	border-color: var(--kd-ink);
	background: var(--kd-accent-soft);
	box-shadow: 3px 3px 0 var(--kd-ink);
	transform: translate(-1px, -1px);
}
.kx .kx-opt[aria-pressed="true"] .kx-opt__flag::after {
	content: " ✓";
	color: var(--kd-accent);
}

/* 実行結果・手順 */
.kx-runs {
	display: grid;
	gap: 14px;
}
.kx-run figcaption {
	margin-top: 6px;
	padding-left: 4px;
	color: var(--kd-muted);
	font-size: 14px;
}
.kx-runs + .kx-term {
	margin-top: 14px;
}

/* 画面・ファイルの実物（出会う場所）: 打つものではないので、コピーの行にせず出力だけの窓に */
.kx-term.is-screen .kx-term__out {
	margin: 0 6px 4px;
	border-left: 0;
	color: var(--kd-term-fg);
}

/* 画面の中の「ここ」（説明の `コード` と、画面の同じ文字をつなぐ・kb-entry.js の heres） */
.kx-term__out mark.kx-here {
	margin: 0 -2px;
	padding: 0 2px;
	border-radius: 4px;
	background: linear-gradient(90deg, rgba(255, 176, 113, 0.34), rgba(255, 176, 113, 0.2)) no-repeat 0 0 / 0% 100%;
	color: inherit;
	transition: background-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.35s ease, box-shadow 0.25s ease;
	transition-delay: calc(var(--i, 0) * 80ms);
}
.has-here.is-lit .kx-term__out mark.kx-here {
	background-size: 100% 100%;
	color: #ffe3c9;
}
.kx-term__out mark.kx-here.is-on,
.kx-term__out mark.kx-here.is-pulse {
	background-color: rgba(255, 176, 113, 0.42);
	background-size: 100% 100%;
	color: #fff;
	box-shadow: 0 0 0 2px var(--kd-term-key), 0 0 18px rgba(255, 140, 60, 0.55);
	transition-delay: 0s;
}
.kx-term__out mark.kx-here.is-pulse {
	animation: kx-here-pulse 0.62s ease-in-out 3;
}
@keyframes kx-here-pulse {
	50% { box-shadow: 0 0 0 4px rgba(255, 176, 113, 0.55), 0 0 28px rgba(255, 120, 40, 0.8); }
}
.kx figcaption code.kx-ic.is-here {
	cursor: pointer;
	box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--kd-accent) 70%, transparent);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.kx figcaption code.kx-ic.is-here:hover,
.kx figcaption code.kx-ic.is-here.is-on,
.kx figcaption code.kx-ic.is-here.is-pulse {
	background: var(--kd-accent);
	color: #fff;
	box-shadow: none;
}
.kx figcaption code.kx-ic.is-here:focus-visible {
	outline: 2px solid var(--kd-accent);
	outline-offset: 2px;
}
.kx-hint--here {
	margin-top: -4px;
}
.kx-steps {
	display: grid;
	gap: 12px;
	counter-reset: kx-step;
}
.kx-step {
	position: relative;
	padding-left: 46px;
	counter-increment: kx-step;
}
.kx-step::before {
	content: counter(kx-step);
	position: absolute;
	top: 4px;
	left: 0;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--kd-ink);
	color: var(--kd-accent);
	font: 400 17px/1 var(--kd-num);
}
.kx-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 40px;
	bottom: -10px;
	left: 15px;
	width: 2px;
	background: repeating-linear-gradient(var(--kd-line-strong) 0 5px, transparent 5px 9px);
}
.kx-step > p {
	padding-top: 6px;
}
.kx-lab {
	margin-top: 14px;
}
.kx .kx-lab a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--kd-ink);
	font-weight: 800;
}
.kx-lab .kd-ico {
	width: 16px;
	height: 16px;
	color: var(--kd-accent);
}

/* ミッション・理解チェック */
.kx-quest {
	position: relative;
}
.kx-quest__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}
.kx-quest__count {
	flex: none;
	color: var(--kd-muted);
	font: 400 18px/1 var(--kd-num);
}
.kx-quest__count b {
	color: var(--kd-ink);
	font-size: 30px;
	font-weight: 400;
}
.kx .kx-quest__bar {
	flex: 1;
	height: 10px;
	margin: 0;
	border-radius: 5px;
	background: var(--kd-sub);
	overflow: hidden;
}
.kx .kx-quest__bar .progress-bar__fill {
	height: 100%;
	border-radius: 5px;
	background: var(--kd-accent);
	transition: width 0.6s var(--kd-spring);
}
.kx-quest__list {
	display: grid;
	gap: 10px;
}
.kx .kx-quest__item {
	margin: 0;
}
.kx-quest__label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 2px solid var(--kd-line);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.16s ease, background 0.16s ease, transform 0.18s var(--kd-spring);
}
.kx-quest__label input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.kx-quest__box {
	position: relative;
	flex: none;
	width: 28px;
	height: 28px;
	margin-top: 1px;
	border: 2.5px solid var(--kd-ink);
	border-radius: 8px;
	background: var(--kd-surface);
	transition: background 0.18s ease;
}
.kx-quest__box::after {
	content: "";
	position: absolute;
	inset: 4px;
	background: #fff;
	-webkit-mask: var(--kd-i-check) center / contain no-repeat;
	mask: var(--kd-i-check) center / contain no-repeat;
	transform: scale(0);
	transition: transform 0.3s var(--kd-spring);
}
.kx-quest__label input:checked + .kx-quest__box {
	background: var(--kd-accent);
}
.kx-quest__label input:checked + .kx-quest__box::after {
	transform: scale(1);
}
.kx-quest__label:has(input:checked) {
	border-color: var(--kd-ink);
	background: var(--kd-accent-soft);
}
.kx-quest__label:has(input:checked) .kx-quest__text b {
	text-decoration: line-through;
	text-decoration-color: var(--kd-accent);
	text-decoration-thickness: 2px;
}
.kx-quest__label input:focus-visible + .kx-quest__box {
	outline: 3px solid var(--kd-accent);
	outline-offset: 2px;
}
.kx-quest__label:active {
	transform: scale(0.98);
}
.kx-quest__text {
	display: grid;
	gap: 2px;
}
.kx-quest__text b {
	color: var(--kd-ink);
	font-size: 15px;
}
.kx-quest__text small {
	color: var(--kd-muted);
	font-size: 13px;
	line-height: 1.7;
}
.kx-quest__stamp {
	position: absolute;
	top: -6px;
	right: 0;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border: 4px double var(--kd-accent);
	border-radius: 50%;
	color: var(--kd-accent);
	font: 800 15px/1 var(--kd-brandfont);
	letter-spacing: 0.06em;
	opacity: 0;
	transform: rotate(-12deg) scale(0.5);
	pointer-events: none;
}
.kx-quest.is-done .kx-quest__stamp {
	opacity: 1;
	transform: rotate(-12deg);
	animation: kd-stamp 0.55s var(--kd-spring) both;
}

/* ゲーム */
.kx-games {
	display: grid;
	gap: 10px;
}
.kx .kx-game {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 2px solid var(--kd-ink);
	border-radius: 14px;
	background: var(--kd-surface);
	text-decoration: none;
	transition: transform 0.18s var(--kd-spring), box-shadow 0.18s ease;
}
.kx-game__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--kd-ink);
	color: var(--kd-term-key);
}
.kx-game__body {
	display: grid;
	flex: 1;
	min-width: 0;
}
.kx-game__body b {
	color: var(--kd-ink);
}
.kx-game__body small {
	color: var(--kd-muted);
	font-size: 13px;
}
.kx-game__go {
	font: 700 22px/1 var(--kd-num);
	transition: transform 0.2s var(--kd-spring);
}

/* 開く質問・エラー */
.kx-qas {
	display: grid;
	gap: 10px;
}
.kx-qa {
	border: 2px solid var(--kd-line-strong);
	border-radius: 14px;
	background: var(--kd-surface);
	overflow: hidden;
	transition: border-color 0.16s ease;
}
.kx-qa[open] {
	border-color: var(--kd-ink);
}
.kx-qa summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 12px 16px;
	color: var(--kd-ink);
	font-weight: 800;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
}
.kx-qa summary::-webkit-details-marker {
	display: none;
}
.kx-qa summary::before {
	content: "Q";
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--kd-ink);
	color: var(--kd-accent);
	font: 400 16px/1 var(--kd-num);
}
.kx-qa.is-error summary::before {
	content: "!";
	background: var(--kd-hard);
	color: #fff;
}
.kx-qa.is-error .kx-qa__q {
	font-family: var(--kd-mono);
	font-size: 14px;
}
.kx-qa__q {
	flex: 1;
}
.kx-qa__chev {
	flex: none;
	width: 12px;
	height: 12px;
	border-right: 3px solid var(--kd-ink);
	border-bottom: 3px solid var(--kd-ink);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.3s var(--kd-spring);
}
.kx-qa[open] .kx-qa__chev {
	transform: rotate(225deg) translate(-2px, -2px);
}
.kx-qa__a {
	display: grid;
	gap: 8px;
	padding: 0 18px 16px 56px;
	color: var(--kd-text);
	font-size: 15px;
	line-height: 1.85;
}
.kx-qa__row b {
	display: inline-block;
	margin-right: 8px;
	padding: 0 8px;
	border-radius: 6px;
	background: var(--kd-sub);
	color: var(--kd-ink);
	font-size: 12px;
}
.kx-qa__row.is-fix b {
	background: #e8f6ee;
	color: var(--kd-ok);
}

/* 戻り値 */
.kx-codes {
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--kd-term);
	color: var(--kd-term-fg);
	font: 500 14px/1.6 var(--kd-mono);
}
.kx-codes__cmd span {
	color: var(--kd-term-key);
}
.kx-codes ul {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}
.kx-codes li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-family: system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
	font-size: 14px;
}
.kx-code {
	flex: none;
	min-width: 34px;
	padding: 1px 8px;
	border-radius: 6px;
	font: 700 15px/1.5 var(--kd-mono);
	text-align: center;
}
.kx-code.is-ok {
	background: rgba(40, 200, 64, 0.18);
	color: #7be08c;
}
.kx-code.is-ng {
	background: rgba(255, 95, 87, 0.18);
	color: #ff9b95;
}

/* 注意・入れ方 */
.kx-callout {
	padding: 14px 18px;
	border: 2px solid var(--kd-line-strong);
	border-radius: 14px;
	background: var(--kd-sub);
	color: var(--kd-text);
	line-height: 1.85;
}
.kx-callout > b {
	display: block;
	margin-bottom: 4px;
	color: var(--kd-ink);
}
.kx-callout.is-warn {
	border-color: #e0a100;
	background: var(--kd-fair-soft);
}
.kx-callout.is-warn > b {
	color: var(--kd-fair);
}
.kx-callout.is-danger {
	border-color: var(--kd-hard);
	background: var(--kd-hard-soft);
}
.kx-callout.is-danger > b {
	color: var(--kd-hard);
}
.kx-callout.is-danger > b::before,
.kx-callout.is-warn > b::before {
	content: "⚠ ";
}
.kx-pkgs__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}
.kx .kx-pkgs__tab {
	min-height: 36px;
	padding: 3px 14px;
	border: 2px solid var(--kd-ink);
	border-radius: 999px;
	background: var(--kd-surface);
	color: var(--kd-ink);
	font-size: 13px;
	font-weight: 800;
}
.kx .kx-pkgs__tab[aria-selected="true"] {
	background: var(--kd-ink);
	color: #fff;
}
.kx-pkgs__panel.is-in {
	animation: kd-from-right 0.3s var(--kd-out);
}
.kx-verified {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 16px;
	color: var(--kd-muted);
	font-size: 13px;
}
.kx-verified b {
	color: var(--kd-ink);
}

/* 資格試験 */
.kx-exams {
	display: grid;
	gap: 8px;
}
.kx-exam {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--kd-sub);
	font-size: 14px;
}
.kx-exam__name {
	color: var(--kd-ink);
	font-weight: 800;
}
.kx-exam__rel {
	padding: 0 8px;
	border-radius: 999px;
	background: var(--kd-ink);
	color: var(--kd-term-key);
	font-size: 11px;
	font-weight: 800;
}
.kx-exam__obj {
	color: var(--kd-text);
}
.kx-exam small {
	flex-basis: 100%;
	color: var(--kd-muted);
}

/* 関係する項目（図鑑の小さなカード） */
.kx-minis {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(250px, 1fr);
	gap: 12px;
	margin: 0 -26px;
	padding: 4px 26px 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}
.kx .kx-mini {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 2px solid var(--kd-ink);
	border-radius: 14px;
	background: var(--kd-surface);
	text-decoration: none;
	scroll-snap-align: start;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kx-mini__tile {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 2.5px solid var(--kd-ink);
	border-radius: 12px;
	box-shadow: 2px 2px 0 var(--kd-c, var(--kd-accent));
	color: var(--kd-ink);
	font: 700 17px/1 var(--kd-brandfont);
}
.kx-mini__tile.is-mono {
	font-family: var(--kd-mono);
	font-size: 16px;
}
.kx-mini__body {
	display: grid;
	min-width: 0;
}
.kx-mini__no {
	color: var(--kd-muted);
	font: 400 12px/1.4 var(--kd-num);
	letter-spacing: 0.06em;
}
.kx-mini__name {
	color: var(--kd-ink);
	font: 700 17px/1.35 var(--kd-brandfont);
}
.kx-mini__name.is-mono {
	font-family: var(--kd-mono);
}
.kx-mini__desc {
	display: -webkit-box;
	overflow: hidden;
	color: var(--kd-muted);
	font-size: 12px;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.kx-mini__mark {
	position: absolute;
	top: 8px;
	right: 8px;
}
.kx-mini__mark .kd-mark--open {
	width: 26px;
	height: 26px;
	font-size: 11px;
}

/* 資料・曲 */
.kx-refs,
.kx-songs {
	display: grid;
	gap: 8px;
}
.kx .kx-ref {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--kd-sub);
	color: var(--kd-ink);
	text-decoration: none;
}
.kx-ref b::after {
	content: " ↗";
	color: var(--kd-accent);
}
.kx-ref small {
	color: var(--kd-muted);
	font: 400 13px/1.4 var(--kd-num);
}
.kx-songs li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}
.kx-songs .kd-ico {
	width: 14px;
	height: 14px;
	color: var(--kd-accent);
}

/* 用語: 大事な理由・誤解・出会う場所・くらべる・地図 */
.kx-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 12px;
}
.kx-pair__card {
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--kd-sub);
	color: var(--kd-text);
	line-height: 1.85;
}
.kx-pair__label {
	display: block;
	margin-bottom: 4px;
	color: var(--kd-ink);
	font-size: 14px;
}
.kx-myth {
	position: relative;
	margin-top: 14px;
	padding: 16px 18px 16px 82px;
	border: 2px dashed var(--kd-hard);
	border-radius: 14px;
	background: var(--kd-hard-soft);
	color: var(--kd-text);
	line-height: 1.85;
}
.kx-myth__stamp {
	position: absolute;
	top: 14px;
	left: 16px;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border: 3px double var(--kd-hard);
	border-radius: 50%;
	color: var(--kd-hard);
	font-size: 24px;
	font-weight: 800;
	transform: rotate(-12deg);
}
.kx-sec.is-in .kx-myth__stamp {
	animation: kd-stamp 0.5s 0.4s var(--kd-spring) both;
}
.kx-myth__label {
	display: block;
	color: var(--kd-hard);
}
.kx-seens {
	display: grid;
	gap: 14px;
}
.kx-seen {
	padding: 14px;
	border: 2px solid var(--kd-line);
	border-radius: 14px;
}
.kx-seen__place {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--kd-ink);
	font-weight: 800;
}
.kx-seen__place .kd-ico {
	width: 18px;
	height: 18px;
	color: var(--kd-c, var(--kd-accent));
}
.kx-seen__ex {
	padding: 10px 14px;
	border-left: 4px solid var(--kd-c, var(--kd-accent));
	background: var(--kd-sub);
	font-size: 15px;
}
.kx-seen figcaption {
	margin-top: 8px;
	color: var(--kd-muted);
	font-size: 14px;
}
.kx-usages {
	display: grid;
	gap: 8px;
}
.kx-usages li {
	position: relative;
	padding: 8px 14px 8px 32px;
	border-radius: 10px;
	background: var(--kd-sub);
	font-size: 15px;
}
.kx-usages li::before {
	content: "“";
	position: absolute;
	top: 2px;
	left: 10px;
	color: var(--kd-accent);
	font: 700 28px/1 Georgia, serif;
}
.kx-vs-list {
	display: grid;
	gap: 12px;
}
.kx-vs {
	padding: 14px 18px;
	border: 2px solid var(--kd-ink);
	border-radius: 14px;
}
.kx-vs__pair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	color: var(--kd-ink);
	font: 700 18px/1.4 var(--kd-brandfont);
}
.kx-vs__mark {
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--kd-accent);
	color: #fff;
	font: 400 14px/1.3 var(--kd-num);
	letter-spacing: 0.08em;
}
.kx-vs__diff {
	margin-top: 6px;
	color: var(--kd-text);
	line-height: 1.85;
}
.kx-map {
	display: grid;
	gap: 26px;
	padding: 20px 10px;
	border-radius: 16px;
	background:
		radial-gradient(circle at 1px 1px, var(--kd-line-strong) 1px, transparent 0) 0 0 / 18px 18px,
		var(--kd-ground);
}
.kx-map__row {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 8px;
}
.kx-map__row.is-up::after,
.kx-map__row.is-down::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 3px;
	height: 26px;
	background: var(--kd-ink);
}
.kx-map__row.is-up::after {
	bottom: -26px;
}
.kx-map__row.is-down::before {
	top: -26px;
}
.kx-map__label {
	color: var(--kd-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
}
.kx-map__nodes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.kx-map__side {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.kx .kx-map__node {
	padding: 6px 14px;
	border: 2px solid var(--kd-ink);
	border-radius: 999px;
	background: var(--kd-surface);
	color: var(--kd-ink);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.18s var(--kd-spring), box-shadow 0.18s ease;
}
.kx-map__me {
	padding: 12px 22px;
	border: 3px solid var(--kd-ink);
	border-radius: 16px;
	background: var(--kd-ink);
	color: var(--kd-accent);
	font: 700 20px/1.3 var(--kd-brandfont);
	box-shadow: 4px 4px 0 var(--kd-c, var(--kd-accent));
	animation: kx-glow 2.6s ease-in-out infinite;
}

/* 読了 */
.kx-finish {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 28px 18px;
	border: 2px dashed var(--kd-line-strong);
	border-radius: 18px;
	color: var(--kd-muted);
	text-align: center;
}
.kx-finish__stamp {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border: 4px double var(--kd-line-strong);
	border-radius: 50%;
	color: var(--kd-line-strong);
	font: 800 22px/1 var(--kd-brandfont);
	letter-spacing: 0.1em;
	transform: rotate(-12deg);
}
.kx-finish p b {
	color: var(--kd-ink);
}
.kx-finish.is-done {
	border-color: var(--kd-accent);
	background: var(--kd-accent-soft);
	color: var(--kd-ink);
}
.kx-finish.is-done .kx-finish__stamp {
	border-color: var(--kd-accent);
	color: var(--kd-accent);
	animation: kd-stamp 0.55s var(--kd-spring) both;
}
.kx-finish [data-kx-finish-count] {
	display: block;
	margin-top: 2px;
	font-size: 14px;
}

/* 前と次 */
.kx-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 900px;
	margin: 30px auto 0;
}
.kx .kx-pager__item {
	display: grid;
	gap: 4px;
	padding: 16px 20px;
	border: 3px solid var(--kd-ink);
	border-radius: 16px;
	background: var(--kd-surface);
	box-shadow: 5px 5px 0 var(--kd-ink);
	text-decoration: none;
	transition: transform 0.2s var(--kd-spring), box-shadow 0.2s ease;
}
.kx-pager__item.is-next {
	text-align: right;
}
.kx-pager__item.is-empty {
	border: 0;
	box-shadow: none;
	background: none;
}
.kx-pager__item small {
	color: var(--kd-accent);
	font-weight: 800;
}
.kx-pager__item b {
	color: var(--kd-ink);
	font: 700 22px/1.3 var(--kd-brandfont);
}
.kx-pager__item b.is-mono {
	font-family: var(--kd-mono);
}
.kx-pager__item span {
	display: -webkit-box;
	overflow: hidden;
	color: var(--kd-muted);
	font-size: 13px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.kx .kx-pager__item:active {
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 var(--kd-ink);
}
.kx-back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
	color: var(--kd-muted);
	font: 400 15px/1 var(--kd-num);
}
.kx .kx-back a {
	color: var(--kd-ink);
	font: 800 14px/1.4 system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

@media (hover: hover) {
	.kx .kx-cat:hover,
	.kx .kx-act:not(.kx-act--lab):hover,
	.kx .kx-map__node:hover {
		transform: translate(-2px, -2px);
		box-shadow: 3px 3px 0 var(--kd-c, var(--kd-accent));
	}
	.kx .kx-act--lab:hover {
		transform: translate(-2px, -2px);
		box-shadow: 5px 5px 0 var(--kd-ink);
	}
	.kx .kx-term__line:hover {
		background: rgba(241, 237, 230, 0.08);
	}
	.kx .kx-term__line:hover .kx-term__copy {
		color: var(--kd-term-fg);
	}
	.kx .kx-opt:hover {
		border-color: var(--kd-ink);
	}
	.kx .kx-mini:hover,
	.kx .kx-game:hover {
		transform: translate(-3px, -3px);
		box-shadow: 5px 5px 0 var(--kd-c, var(--kd-accent));
	}
	.kx .kx-game:hover .kx-game__go {
		transform: translateX(4px);
	}
	.kx .kx-pager__item:not(.is-empty):hover {
		transform: translate(-3px, -3px);
		box-shadow: 8px 8px 0 var(--kd-accent);
	}
	.kx .kx-qa summary:hover {
		background: var(--kd-sub);
	}
	.kx .kx-quest__label:hover {
		border-color: var(--kd-ink);
	}
	.kx .kx-flip__card:hover .kx-flip__face.is-front {
		box-shadow: 9px 9px 0 var(--kd-c, var(--kd-accent));
	}
}

@media (max-width: 760px) {
	.kx-hero {
		gap: 20px;
	}
	.kx-hero__name {
		gap: 14px;
	}
	.kx-tile {
		width: 64px;
		height: 64px;
		border-radius: 16px;
		font-size: 22px;
	}
	.kx-tile.is-mono {
		font-size: 20px;
	}
	.kx-lead {
		font-size: 16px;
	}
	.kx-sec {
		padding: 18px 16px 20px;
		border-radius: 16px;
	}
	.kx .kx-sec__title {
		font-size: 19px;
	}
	.kx-minis {
		margin: 0 -16px;
		padding: 4px 16px 10px;
		grid-auto-columns: minmax(230px, 82%);
	}
	.kx-live__screen {
		min-height: 200px;
		font-size: 13px;
	}
	.kx-qa__a {
		padding-left: 18px;
	}
	.kx-pager {
		grid-template-columns: minmax(0, 1fr);
	}
	.kx-pager__item.is-empty {
		display: none;
	}
	.kx-pager__item.is-next {
		text-align: left;
	}
	.kx-myth {
		padding-left: 18px;
		padding-top: 64px;
	}
	.kx-map__side {
		justify-content: center;
	}
	.kx-build__line {
		top: calc(var(--kd-top) + 62px);
	}
}

/* 足りない絵（一覧の kb-dex.css に無いもの） */
.kd-ico--share { --kd-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M7.5 7.5L12 3l4.5 4.5M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3C/svg%3E"); }
.kx-page {
	--kd-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

@keyframes kx-print {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}
@keyframes kx-slot {
	0% { opacity: 0; transform: translateY(-8px); display: inline-block; }
	100% { opacity: 1; transform: none; }
}
@keyframes kx-wobble {
	0%, 100% { transform: rotate(0); }
	10% { transform: rotate(-12deg) scale(1.08); }
	20% { transform: rotate(10deg); }
	30% { transform: rotate(0); }
}
@keyframes kx-glow {
	0%, 100% { box-shadow: 4px 4px 0 var(--kd-c, var(--kd-accent)); }
	50% { box-shadow: 4px 4px 0 var(--kd-c, var(--kd-accent)), 0 0 0 8px color-mix(in srgb, var(--kd-c, #ff5b00) 18%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.kx *,
	.kx *::before,
	.kx *::after {
		animation: none !important;
		transition: none !important;
	}
	.kx-sec.is-pre {
		opacity: 1;
		transform: none;
	}
}
html.gp-reduce .kx *,
html.gp-reduce .kx *::before,
html.gp-reduce .kx *::after {
	animation: none !important;
	transition: none !important;
}
.kd-ico--spark { --kd-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3zM18.5 16.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7.7-1.8z'/%3E%3C/svg%3E"); }

/* 入れ方の代わりの1行（シェルに組み込み・最初から入っている） */
.kx-installed {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 10px 14px;
	border: 2px solid var(--kd-line, #e8e1d4);
	border-radius: 12px;
	background: var(--kd-surface, #fff);
	color: var(--kd-ink);
	font-size: 14px;
	font-weight: 700;
}
.kx-installed .kd-ico {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--kd-ok, #1e7a45);
}

/* =========================================================================
 * 第1波・第2波（1.55.0）: 答え札・探す・次の一歩・広告の置き場所・あなたの番・探す窓
 * ========================================================================= */

/* ---------- 答え札（冒頭・3 秒で答える） ---------- */
.kx-ans {
	display: grid;
	gap: 10px;
	max-width: 40em;
	padding: 14px 16px 16px;
	border: 2px solid var(--kd-ink);
	border-radius: 16px;
	background: var(--kd-surface);
	box-shadow: 5px 5px 0 var(--kd-c, var(--kd-accent));
	animation: kx-ans-in 0.5s var(--kd-spring) both;
}
.kx-ans__kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--kd-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
}
.kx-ans__kicker span {
	padding: 3px 9px 2px;
	border-radius: 999px;
	background: var(--kd-ink);
	color: var(--kd-term-key);
	font: 700 11px/1.3 var(--kd-num);
	letter-spacing: 0.12em;
}
.kx-ans__label {
	color: var(--kd-muted);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}
.kx .kx-ans__syntax,
.kx .kx-ans__cmd {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background: var(--kd-term);
	color: var(--kd-term-fg);
	text-align: left;
	transition: transform 0.18s var(--kd-spring), background 0.16s ease;
}
.kx .kx-ans__syntax .kx-ans__label {
	color: var(--kd-term-muted);
}
.kx-ans__syntax code,
.kx-ans__cmd code {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 14px;
	line-height: 1.5;
}
.kx-ans__cmd code span {
	color: var(--kd-term-key);
}
.kx-ans .kx-term__copy {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(241, 237, 230, 0.12);
	color: var(--kd-term-muted);
	font-size: 11px;
	font-weight: 700;
	transition: background 0.16s ease, color 0.16s ease;
}
.kx .kx-ans__syntax.is-copied .kx-term__copy,
.kx .kx-ans__cmd.is-copied .kx-term__copy {
	background: var(--kd-term-key);
	color: var(--kd-ink);
}
.kx .kx-ans__syntax:active,
.kx .kx-ans__cmd:active {
	transform: scale(0.98);
}
.kx-ans__list {
	display: grid;
	gap: 8px;
}
.kx-ans__row {
	display: grid;
	gap: 4px;
	animation: kx-ans-in 0.45s var(--kd-out) both;
	animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.kx .kx-ans__what {
	color: var(--kd-ink);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}
.kx .kx-ans__what::after {
	content: " ↓";
	color: var(--kd-muted);
	font-weight: 700;
}
.kx-ans__warn {
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--kd-fair-soft);
	color: var(--kd-text);
	font-size: 13px;
	line-height: 1.7;
}
.kx-ans__warn b {
	margin-right: 8px;
	color: var(--kd-fair);
}
.kx-ans__warn.is-danger {
	background: var(--kd-hard-soft);
}
.kx-ans__warn.is-danger b {
	color: var(--kd-hard);
}
/* 用語: ひとことで・違い・使うコマンド */
.kx-ans__easy {
	color: var(--kd-ink);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.65;
}
.kx .kx-ans__vs {
	display: grid;
	gap: 2px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--kd-sub);
	color: var(--kd-text);
	font-size: 14px;
	line-height: 1.7;
	text-decoration: none;
}
.kx-ans__cmds {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.kx .kx-ans__cmds a {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--kd-term);
	color: var(--kd-term-fg);
	font-size: 13px;
	text-decoration: none;
	transition: transform 0.18s var(--kd-spring);
}

/* ---------- パンくずの右の「探す」 ---------- */
.kx .kd-crumbs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.kx .kx-find {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 4px 8px 4px 12px;
	border: 2px solid var(--kd-ink);
	border-radius: 999px;
	background: var(--kd-surface);
	color: var(--kd-ink);
	font-size: 13px;
	font-weight: 800;
	transition: transform 0.18s var(--kd-spring), box-shadow 0.18s ease;
}
.kx .kx-find kbd {
	padding: 1px 7px;
	border: 1.5px solid var(--kd-line-strong);
	border-bottom-width: 3px;
	border-radius: 6px;
	color: var(--kd-muted);
	font: 700 12px/1.4 var(--kd-num);
}
.kx .kx-find:active {
	transform: scale(0.95);
}
@media (pointer: coarse) {
	.kx .kx-find kbd {
		display: none;
	}
}

/* ---------- 印で着いたところ（#ex-1・#opt-l・#err-1） ---------- */
.kx .is-target {
	animation: kx-target 1.6s var(--kd-out);
}
.kx [id^="ex-"],
.kx [id^="opt-"],
.kx [id^="err-"],
.kx [id^="faq-"],
.kx [id^="vs-"] {
	scroll-margin-top: calc(var(--kd-top, 0px) + 90px);
}

/* ---------- 次の一歩 ---------- */
.kx-next {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 18px;
	margin: 22px 0 6px;
	padding: 16px 18px;
	border: 2px solid var(--kd-ink);
	border-radius: 16px;
	background: linear-gradient(110deg, var(--kd-accent-soft), var(--kd-surface) 60%);
	box-shadow: 4px 4px 0 var(--kd-ink);
	transition: transform 0.4s var(--kd-spring), box-shadow 0.4s var(--kd-out);
}
.kx-next.is-seen {
	animation: kx-next-hello 0.6s var(--kd-spring);
}
.kx-next__kicker {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--kd-muted);
	font-size: 12px;
	font-weight: 800;
}
.kx-next__kicker span {
	padding: 3px 9px 2px;
	border-radius: 999px;
	background: var(--kd-accent);
	color: #fff;
	font-size: 11px;
}
.kx-next__pr {
	margin-left: auto;
	padding: 1px 7px;
	border: 1.5px solid var(--kd-muted);
	border-radius: 6px;
	color: var(--kd-muted);
	font: 700 11px/1.4 var(--kd-num);
	font-style: normal;
}
.kx-next__title {
	display: block;
	color: var(--kd-ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
}
.kx-next__desc {
	margin-top: 4px;
	color: var(--kd-text);
	font-size: 14px;
	line-height: 1.7;
}
.kx .kx-next__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 46px;
	padding: 6px 18px;
	border: 2px solid var(--kd-ink);
	border-radius: 12px;
	background: var(--kd-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.18s var(--kd-spring), box-shadow 0.18s ease;
}
.kx .kx-next__go span {
	color: var(--kd-term-key);
	transition: transform 0.2s var(--kd-spring);
}
.kx .kx-next__go:active {
	transform: translate(2px, 2px);
}
.kx-next__basis {
	grid-column: 1 / -1;
	color: var(--kd-muted);
	font-size: 12px;
}
.kx-next__pixel {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
@media (max-width: 640px) {
	.kx-next {
		grid-template-columns: minmax(0, 1fr);
	}
	.kx .kx-next__go {
		justify-content: center;
	}
}

/* ---------- 広告の置き場所 ---------- */
.kx-spot.is-on {
	margin: 24px 0 6px;
	min-height: 120px;
}
.kx-ad__label {
	margin-bottom: 6px;
	color: var(--kd-muted);
	font: 700 11px/1 var(--kd-num);
	letter-spacing: 0.14em;
}
.kx-ad__body {
	display: grid;
	place-items: center;
	min-height: 100px;
	padding: 8px;
	border: 1px dashed var(--kd-line-strong);
	border-radius: 12px;
	background: var(--kd-surface);
	overflow: hidden;
}

/* ---------- あなたの番（冒頭の端末の中・第2波） ---------- */
.kx-live {
	--gsh-fg: var(--kd-term-fg);
	--gsh-dim: var(--kd-term-muted);
	--gsh-accent: var(--kd-term-key);
	--gsh-ok: #8ad48f;
	--gsh-edge: rgba(241, 237, 230, 0.1);
	--gsh-dir: #7fb4ff;
	--gsh-lnk: #6fd6d6;
	--gsh-hit: #ff6b6b;
	transition: box-shadow 0.4s var(--kd-out);
}
.kx-you {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 12px;
	border-top: 1px solid rgba(241, 237, 230, 0.12);
	background: rgba(255, 255, 255, 0.03);
	font: 500 14px/1.6 var(--kd-mono);
	animation: kx-ans-in 0.45s var(--kd-spring) both;
}
.kx-you__ps {
	flex: none;
	color: var(--kd-term-key);
	font: inherit;
}
.kx .kx-you__in {
	flex: 1;
	min-width: 0;
	height: 34px;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--kd-term-fg);
	font: inherit;
	font-size: 16px; /* スマホで拡大されない */
	caret-color: var(--kd-term-key);
}
.kx .kx-you__in::placeholder {
	color: rgba(241, 237, 230, 0.42);
}
.kx-you.is-glow {
	animation: kx-ans-in 0.45s var(--kd-spring) both, kx-your-turn 1.2s ease-in-out 0.4s 2;
}
.kx-you__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 0 16px 12px;
	color: var(--kd-term-muted);
	font-size: 12px;
}
.kx .kx-you__lab {
	color: var(--kd-term-key);
	font-weight: 800;
	text-decoration: none;
}
.kx-live.is-live .kx-live__screen {
	display: block;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.kx-live.is-live .kx-live__screen > * + * {
	margin-top: 8px;
}
.kx-live .gsh__echo {
	color: var(--kd-term-fg);
}
.kx-live .gsh__out {
	margin: 0;
	color: var(--kd-term-muted);
	font: inherit;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.kx-live .gsh__out--table {
	white-space: pre;
	overflow-x: auto;
}
.kx-live .gsh__err {
	color: #ff9f8f;
}
.kx-live .gsh__dim,
.kx-you__hint {
	color: var(--kd-term-muted);
}
.kx-live .gsh__accent {
	color: var(--kd-term-key);
}
.kx-live .kx-live__screen a {
	color: var(--kd-term-key);
}
.kx-live.is-danger {
	animation: kx-danger 1.1s ease;
}
.kx-live.is-clear {
	animation: kx-clear 1.3s var(--kd-out);
}

/* ---------- 探す窓（/・Ctrl+K） ---------- */
html.kp-open {
	overflow: hidden;
}
.kp {
	--kp-ink: #1d1813;
	--kp-text: #2b2620;
	--kp-muted: #6f6052;
	--kp-line: #e8e1d4;
	--kp-paper: #fff;
	--kp-soft: var(--kabocy-color-pop-bg, #ffedca);
	--kp-accent: var(--kabocy-color-site-brand, #ff5b00);
	--kp-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
	width: min(680px, calc(100vw - 24px));
	max-height: min(76vh, 640px);
	margin: max(8vh, 24px) auto auto;
	padding: 0;
	border: 3px solid var(--kp-ink);
	border-radius: 18px;
	background: var(--kp-paper);
	box-shadow: 8px 8px 0 var(--kp-accent), 0 30px 60px rgba(29, 24, 19, 0.3);
	color: var(--kp-text);
	font: 400 15px/1.6 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
	overflow: hidden;
}
.kp::backdrop {
	background: rgba(29, 24, 19, 0.42);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.kp.is-in {
	animation: kp-in 0.32s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.kp *,
.kp *::before,
.kp *::after {
	box-sizing: border-box;
}
.kp__box {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	height: 100%;
}
.kp__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 10px 16px;
	border-bottom: 2px solid var(--kp-line);
}
.kp__ps {
	color: var(--kp-accent);
	font: 800 18px/1 var(--kp-mono);
}
.kp .kp__input {
	flex: 1;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--kp-ink);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	-webkit-appearance: none;
	appearance: none;
}
.kp .kp__esc {
	padding: 4px 9px;
	border: 1.5px solid var(--kp-line);
	border-bottom-width: 3px;
	border-radius: 8px;
	background: var(--kp-paper);
	color: var(--kp-muted);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.kp__list {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}
.kp__row {
	margin: 0;
	animation: kp-row 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--k, 0) * 22ms);
}
.kp .kp__a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 8px 12px;
	border-radius: 12px;
	color: var(--kp-ink);
	text-decoration: none;
	transition: background 0.12s ease;
}
.kp__row[aria-selected="true"] .kp__a {
	background: var(--kp-soft);
	box-shadow: inset 4px 0 0 var(--kp-accent);
}
.kp__kind {
	min-width: 5.2em;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--kp-ink);
	color: #ffb071;
	font-size: 11px;
	font-weight: 800;
	text-align: center;
	white-space: nowrap;
}
.kp__row.is-glossary .kp__kind {
	background: #7a5cd6;
	color: #fff;
}
.kp__row.is-task .kp__kind {
	background: var(--kp-accent);
	color: #fff;
}
.kp__row.is-error .kp__kind {
	background: #c0341d;
	color: #fff;
}
.kp__row.is-recent .kp__kind,
.kp__row.is-link .kp__kind {
	background: var(--kp-line);
	color: var(--kp-muted);
}
.kp__main {
	display: grid;
	min-width: 0;
}
.kp__main b {
	overflow: hidden;
	font-size: 15px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kp__main b.is-mono {
	font-family: var(--kp-mono);
}
.kp__main small {
	overflow: hidden;
	color: var(--kp-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kp__code {
	max-width: 14em;
	overflow: hidden;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--kp-ink);
	color: #f1ede6;
	font: 500 12px/1.5 var(--kp-mono);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kp__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 0;
	padding: 10px 16px;
	border-top: 2px solid var(--kp-line);
	color: var(--kp-muted);
	font-size: 12px;
}
.kp__foot a {
	color: var(--kp-accent);
	font-weight: 800;
	text-decoration: none;
}
@media (max-width: 640px) {
	.kp {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.kp.is-in {
		animation: kp-up 0.34s cubic-bezier(0.2, 1.2, 0.4, 1);
	}
	.kp__code {
		display: none;
	}
}

@media (hover: hover) {
	.kx .kx-ans__syntax:hover,
	.kx .kx-ans__cmd:hover {
		background: #2b241d;
	}
	.kx .kx-ans__what:hover {
		color: var(--kd-accent);
	}
	.kx .kx-ans__cmds a:hover {
		transform: translateY(-2px);
	}
	.kx .kx-find:hover {
		transform: translate(-2px, -2px);
		box-shadow: 3px 3px 0 var(--kd-accent);
	}
	.kx-next:hover {
		transform: translate(-2px, -2px);
		box-shadow: 7px 7px 0 var(--kd-ink);
	}
	.kx .kx-next__go:hover span {
		transform: translateX(4px);
	}
}

@keyframes kx-ans-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}
@keyframes kx-target {
	0%,
	40% {
		box-shadow: 0 0 0 4px var(--kd-accent);
		background-color: var(--kd-accent-soft);
	}
}
@keyframes kx-next-hello {
	40% {
		transform: translate(-3px, -3px) rotate(-0.4deg);
	}
}
@keyframes kx-your-turn {
	50% {
		background: rgba(255, 176, 113, 0.16);
		box-shadow: inset 0 0 0 2px var(--kd-term-key);
	}
}
@keyframes kx-danger {
	0%,
	30%,
	60% {
		box-shadow: 0 0 0 4px #ff6b6b, 7px 7px 0 #c0341d;
	}
	15%,
	45% {
		transform: translateX(-3px);
	}
	22%,
	52% {
		transform: translateX(3px);
	}
}
@keyframes kx-clear {
	0%,
	50% {
		box-shadow: 0 0 0 5px #8ad48f, 7px 7px 0 #1e7a45;
	}
}
@keyframes kp-in {
	from {
		opacity: 0;
		transform: translateY(-14px) scale(0.97);
	}
}
@keyframes kp-up {
	from {
		transform: translateY(40px);
		opacity: 0;
	}
}
@keyframes kp-row {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.kx-ans,
	.kx-ans__row,
	.kx-you,
	.kx-next,
	.kx .is-target,
	.kx-live.is-danger,
	.kx-live.is-clear,
	.kp,
	.kp__row {
		animation: none !important;
		transition: none !important;
	}
}
html.gp-reduce .kx-ans,
html.gp-reduce .kx-ans__row,
html.gp-reduce .kx-you,
html.gp-reduce .kx-next,
html.gp-reduce .kx-live,
html.gp-reduce .kp,
html.gp-reduce .kp__row {
	animation: none !important;
	transition: none !important;
}
.kx-ans,
.kx-ans__list,
.kx-ans__row {
	min-width: 0;
}
.kp .kp__input::-webkit-search-cancel-button,
.kp .kp__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
/* 複数行の例は、行の切れ目を見せる（1 行に詰めると別のコマンドに見える） */
.kx-ans__syntax code,
.kx-ans__cmd code {
	white-space: pre-wrap;
}

/* 覚える順番（Linux の道）の中の何駅めか。inc/kb-path.php の chip() */
.kpath-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	max-width: 1240px;
	margin: 14px auto 0;
	padding: 0 16px;
	font-size: 13px;
}
.kpath-chips__label {
	color: var(--kd-muted, #6f6052);
	font-weight: 700;
}
.kpath-chip {
	--c: #2f7fd1;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 4px 12px 4px 8px;
	border: 2px solid #1d1813;
	border-radius: 999px;
	background: #fff;
	color: #1d1813;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.25s;
}
.kpath-chip:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--c);
}
.kpath-chip:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}
/* 路線の色の線と、その上の駅 */
.kpath-chip__line {
	position: relative;
	width: 26px;
	height: 6px;
	border-radius: 3px;
	background: var(--c);
}
.kpath-chip__line::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: 2px solid #1d1813;
	border-radius: 50%;
	background: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.kpath-chip {
		transition: none;
	}
}