:root {
	--kh-accent: var(--kh-theme-accent, #dfff52);
	--kh-accent-hover: var(--kh-theme-accent-hover, #ef6a3a);
	--kh-ink: var(--kh-theme-heading, #182019);
	--kh-text: var(--kh-theme-text, #657066);
	--kh-paper: var(--kh-theme-background, #f5f0e8);
	--kh-surface: var(--kh-theme-surface, #fffdf8);
	--kh-border: var(--kh-theme-border, #c9c2b7);
	--kh-panel: var(--kh-theme-panel, #164e3c);
	--kh-body-font: var(--kh-theme-body-font, system-ui, sans-serif);
	--kh-heading-font: var(--kh-theme-heading-font, system-ui, sans-serif);
	--kh-body-weight: var(--kh-theme-body-weight, 400);
	--kh-heading-weight: var(--kh-theme-heading-weight, 600);
	--kh-max-width: 1180px;
}

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

html { background: var(--kh-paper); scroll-behavior: smooth; }

body.kanji-handwriting-page {
	margin: 0;
	min-width: 320px;
	background:
		radial-gradient(circle at 85% 8%, color-mix(in srgb, var(--kh-accent) 18%, transparent) 0, transparent 23rem),
		var(--kh-paper);
	color: var(--kh-text);
	font-family: var(--kh-body-font);
	font-size: 16px;
	font-weight: var(--kh-body-weight);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.kh-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(calc(100% - 48px), var(--kh-max-width));
	margin: 0 auto;
	padding: 26px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--kh-border) 75%, transparent);
}

.kh-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--kh-ink);
	font-family: var(--kh-heading-font);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	text-decoration: none;
}

.kh-brand svg {
	width: 31px;
	height: 31px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

.kh-header__label, .kh-kicker {
	color: var(--kh-ink);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
}

.kh-app {
	width: min(calc(100% - 48px), var(--kh-max-width));
	margin: 0 auto;
}

.kh-intro {
	position: relative;
	padding: clamp(68px, 10vw, 126px) 0 clamp(58px, 8vw, 92px);
}

.kh-intro::after {
	position: absolute;
	right: 3%;
	top: 16%;
	z-index: 0;
	color: color-mix(in srgb, var(--kh-border) 42%, transparent);
	content: "筆";
	font-family: serif;
	font-size: clamp(150px, 25vw, 320px);
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.kh-intro > * { position: relative; z-index: 1; }
.kh-kicker { margin: 0 0 19px; }

.kh-intro h1 {
	margin: 0;
	color: var(--kh-ink);
	font-family: var(--kh-heading-font);
	font-size: clamp(48px, 7.1vw, 86px);
	font-weight: var(--kh-heading-weight);
	letter-spacing: -.055em;
	line-height: 1.08;
}

.kh-intro h1 em {
	color: var(--kh-panel);
	font-style: normal;
	text-decoration: underline;
	text-decoration-color: var(--kh-accent);
	text-decoration-thickness: .18em;
	text-underline-offset: -.04em;
}

.kh-lead {
	max-width: 650px;
	margin: 30px 0 0;
	font-size: clamp(16px, 2vw, 19px);
}

.kh-privacy {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 24px;
	padding: 7px 13px;
	border: 1px solid var(--kh-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--kh-surface) 72%, transparent);
	color: var(--kh-ink);
	font-size: 12px;
	font-weight: 700;
}

.kh-privacy span { color: var(--kh-panel); font-size: 8px; }

.kh-workspace {
	display: grid;
	grid-template-columns: minmax(340px, .92fr) minmax(420px, 1.08fr);
	min-height: 630px;
	border: 1px solid var(--kh-border);
	border-radius: 2px;
	background: var(--kh-surface);
	box-shadow: 0 24px 70px color-mix(in srgb, var(--kh-ink) 9%, transparent);
	overflow: hidden;
	margin-bottom: clamp(72px, 10vw, 120px);
}

.kh-pad-column, .kh-result-column { padding: clamp(26px, 4vw, 48px); }
.kh-pad-column { background: var(--kh-panel); color: color-mix(in srgb, var(--kh-surface) 78%, transparent); }
.kh-result-column { min-width: 0; }

.kh-section-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 25px;
}

.kh-section-heading > span {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 800;
}

.kh-section-heading small {
	display: block;
	margin-bottom: 1px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .17em;
	opacity: .68;
}

.kh-section-heading h2 {
	margin: 0;
	color: inherit;
	font-family: var(--kh-heading-font);
	font-size: 21px;
	font-weight: var(--kh-heading-weight);
	line-height: 1.25;
}

.kh-section-heading b {
	margin-left: auto;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.kh-canvas-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--kh-surface) 58%, transparent);
	background: var(--kh-surface);
	box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--kh-panel) 5%, transparent);
	overflow: hidden;
}

.kh-grid {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, transparent calc(50% - .5px), color-mix(in srgb, var(--kh-border) 48%, transparent) 50%, transparent calc(50% + .5px)),
		linear-gradient(to bottom, transparent calc(50% - .5px), color-mix(in srgb, var(--kh-border) 48%, transparent) 50%, transparent calc(50% + .5px)),
		linear-gradient(45deg, transparent calc(50% - .5px), color-mix(in srgb, var(--kh-border) 25%, transparent) 50%, transparent calc(50% + .5px)),
		linear-gradient(-45deg, transparent calc(50% - .5px), color-mix(in srgb, var(--kh-border) 25%, transparent) 50%, transparent calc(50% + .5px));
	pointer-events: none;
}

#kh-canvas {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	touch-action: none;
	user-select: none;
}

.kh-tools {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 14px;
}

.kh-tools button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 45px;
	border: 1px solid color-mix(in srgb, var(--kh-surface) 38%, transparent);
	border-radius: 2px;
	background: transparent;
	color: var(--kh-surface);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.kh-tools button:hover:not(:disabled) { border-color: var(--kh-accent); color: var(--kh-accent); }
.kh-tools button:disabled { cursor: default; opacity: .35; }
.kh-tools svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.kh-status {
	min-height: 28px;
	margin: -5px 0 18px;
	padding-left: 15px;
	border-left: 3px solid var(--kh-accent);
	font-size: 13px;
}

.kh-app--working .kh-status::after {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	border: 2px solid var(--kh-border);
	border-top-color: var(--kh-panel);
	border-radius: 50%;
	content: "";
	vertical-align: -2px;
	animation: kh-spin .7s linear infinite;
}

@keyframes kh-spin { to { transform: rotate(360deg); } }

.kh-results {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	min-height: 340px;
	border-top: 1px solid var(--kh-border);
	border-left: 1px solid var(--kh-border);
}

.kh-candidate {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 112px;
	border: 0;
	border-right: 1px solid var(--kh-border);
	border-bottom: 1px solid var(--kh-border);
	background: transparent;
	color: var(--kh-ink);
	cursor: pointer;
}

.kh-candidate:hover, .kh-candidate:focus-visible, .kh-candidate.is-selected {
	z-index: 1;
	background: var(--kh-accent);
	outline: 2px solid var(--kh-ink);
	outline-offset: -2px;
}

.kh-candidate span { font-family: serif; font-size: clamp(38px, 4.5vw, 57px); line-height: 1; }
.kh-candidate small { position: absolute; right: 7px; bottom: 4px; color: var(--kh-text); font-size: 9px; }

.kh-empty-result {
	display: flex;
	grid-column: 1 / -1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	border-right: 1px solid var(--kh-border);
	border-bottom: 1px solid var(--kh-border);
	color: var(--kh-text);
	font-size: 13px;
	text-align: center;
}

.kh-empty-result span { color: color-mix(in srgb, var(--kh-border) 70%, transparent); font-family: serif; font-size: 94px; line-height: 1.15; }

.kh-clipboard {
	margin-top: 24px;
	padding: 18px;
	border: 1px solid var(--kh-border);
	background: var(--kh-surface);
}

.kh-clipboard__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 13px;
}

.kh-clipboard__heading small {
	display: block;
	margin-bottom: 2px;
	color: var(--kh-text);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .17em;
}

.kh-clipboard__heading h3 {
	margin: 0;
	color: var(--kh-ink);
	font-family: var(--kh-heading-font);
	font-size: 19px;
	line-height: 1.25;
}

#kh-copy-character {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--kh-border);
	background: var(--kh-paper);
	color: var(--kh-ink);
	font-family: serif;
	font-size: 34px;
	line-height: 1;
}

.kh-clipboard__single,
.kh-clipboard__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.kh-clipboard button {
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--kh-border);
	background: transparent;
	color: var(--kh-ink);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.kh-clipboard button:hover:not(:disabled),
.kh-clipboard button:focus-visible {
	border-color: var(--kh-accent-hover);
	color: var(--kh-accent-hover);
}

.kh-clipboard button:disabled { cursor: default; opacity: .32; }
#kh-copy-single, #kh-copy-all { border-color: var(--kh-ink); background: var(--kh-ink); color: var(--kh-surface); }
#kh-copy-single:hover:not(:disabled), #kh-copy-single:focus-visible,
#kh-copy-all:hover:not(:disabled), #kh-copy-all:focus-visible { border-color: var(--kh-panel); background: var(--kh-panel); color: #fff; }

.kh-clipboard > label {
	display: block;
	margin: 17px 0 7px;
	color: var(--kh-ink);
	font-size: 11px;
	font-weight: 800;
}

#kh-copy-text {
	display: block;
	width: 100%;
	min-height: 82px;
	padding: 10px 12px;
	border: 1px solid var(--kh-border);
	border-radius: 0;
	background: var(--kh-paper);
	color: var(--kh-ink);
	font-family: var(--kh-body-font);
	font-size: 18px;
	line-height: 1.55;
	resize: vertical;
}

#kh-copy-text:focus { border-color: var(--kh-panel); outline: 1px solid var(--kh-panel); }
.kh-clipboard__actions { margin-top: 8px; }
.kh-clipboard__status { min-height: 18px; margin: 8px 0 -5px; color: var(--kh-panel); font-size: 11px; }
.kh-clipboard__status.is-error { color: #9b2f28; }

.kh-stroke-order {
	display: grid;
	grid-template-columns: minmax(185px, 230px) 1fr;
	align-items: center;
	gap: 17px 22px;
	margin-top: 24px;
	padding: 18px;
	border: 1px solid var(--kh-border);
	background: color-mix(in srgb, var(--kh-paper) 54%, var(--kh-surface));
}

.kh-stroke-order[hidden] { display: none; }

.kh-stroke-order__heading {
	display: flex;
	grid-column: 1 / -1;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--kh-border);
}

.kh-stroke-order__heading small {
	display: block;
	margin-bottom: 2px;
	color: var(--kh-text);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .17em;
}

.kh-stroke-order__heading h3 {
	margin: 0;
	color: var(--kh-ink);
	font-family: var(--kh-heading-font);
	font-size: 19px;
	line-height: 1.25;
}

.kh-stroke-order__heading h3 span {
	font-family: serif;
	font-size: 28px;
	font-weight: 400;
}

.kh-stroke-order__heading b {
	color: var(--kh-panel);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.kh-stroke-order__image {
	border: 1px solid var(--kh-border);
	background: #fff;
}

#kh-stroke-order-svg { display: block; width: 100%; aspect-ratio: 1; }
.kh-stroke-order__grid { fill: none; stroke: #eadfe4; stroke-dasharray: 1.5 2; stroke-width: .45; }
#kh-stroke-order-paths path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity .18s ease, stroke .18s ease, stroke-width .18s ease;
}

#kh-stroke-order-paths .is-complete {
	stroke: var(--kh-ink);
	stroke-width: 2.5;
	opacity: .32;
}

#kh-stroke-order-paths .is-current {
	stroke: var(--kh-accent-hover);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	stroke-width: 3.6;
	animation: kh-draw-stroke .58s ease-out forwards;
}

#kh-stroke-order-paths .is-future {
	stroke: var(--kh-text);
	stroke-width: 2;
	opacity: .1;
}

#kh-stroke-order-arrow path { fill: var(--kh-accent-hover); }
#kh-stroke-order-numbers circle { fill: var(--kh-accent-hover); stroke: #fff; stroke-width: .85; }
#kh-stroke-order-numbers text {
	fill: #fff;
	font-family: var(--kh-body-font);
	font-size: 4.6px;
	font-weight: 800;
	text-anchor: middle;
	dominant-baseline: central;
}

.kh-stroke-order__guide { min-width: 0; }

.kh-stroke-order__guide > strong {
	display: block;
	margin-bottom: 8px;
	color: var(--kh-ink);
	font-family: var(--kh-heading-font);
	font-size: clamp(20px, 2.1vw, 27px);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.kh-stroke-order__guide > p {
	margin: 0;
	color: var(--kh-text);
	font-size: 12px;
	line-height: 1.65;
}

.kh-stroke-order__guide > p i {
	display: inline-block;
	width: 20px;
	height: 4px;
	margin: 0 7px 2px 0;
	border-radius: 99px;
	background: var(--kh-accent-hover);
}

.kh-stroke-order__controls {
	display: grid;
	grid-template-columns: 42px minmax(92px, 1fr) 42px;
	gap: 7px;
	margin-top: 17px;
}

.kh-stroke-order__controls button {
	min-height: 38px;
	padding: 7px 10px;
	border: 1px solid var(--kh-border);
	background: var(--kh-surface);
	color: var(--kh-ink);
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.kh-stroke-order__controls button:hover:not(:disabled),
.kh-stroke-order__controls button:focus-visible {
	border-color: var(--kh-accent-hover);
	color: var(--kh-accent-hover);
}

.kh-stroke-order__controls button:disabled { cursor: default; opacity: .3; }

@keyframes kh-draw-stroke {
	to { stroke-dashoffset: 0; }
}

.kh-footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 25px max(24px, calc((100vw - var(--kh-max-width)) / 2));
	border-top: 1px solid var(--kh-border);
	color: var(--kh-text);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
}

.kh-footer p { margin: 0; letter-spacing: 0; text-align: center; }
.kh-footer > a { justify-self: end; }
.kh-footer a:hover { color: var(--kh-panel); }
.kh-noscript { margin: 0; padding: 16px; background: #8c241d; color: #fff; text-align: center; }

@media (max-width: 900px) {
	.kh-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.kh-pad-column, .kh-result-column { padding: 28px; }
	.kh-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kh-candidate { min-height: 104px; }
}

@media (max-width: 700px) {
	.kh-header, .kh-app { width: min(calc(100% - 28px), var(--kh-max-width)); }
	.kh-header { padding: 19px 0; }
	.kh-header__label { display: none; }
	.kh-intro { padding: 60px 0 53px; }
	.kh-intro::after { right: -4%; top: 19%; font-size: 155px; }
	.kh-lead { max-width: 92%; }
	.kh-privacy { align-items: flex-start; border-radius: 4px; }
	.kh-workspace { display: block; }
	.kh-pad-column, .kh-result-column { padding: 25px 20px 29px; }
	.kh-canvas-frame { max-width: 430px; margin: 0 auto; }
	.kh-tools { max-width: 430px; margin-right: auto; margin-left: auto; }
	.kh-result-column { min-height: 585px; }
	.kh-results { min-height: 314px; }
	.kh-candidate { min-height: 103px; }
	.kh-candidate span { font-size: 47px; }
	.kh-stroke-order { grid-template-columns: minmax(170px, 210px) 1fr; }
	.kh-footer { grid-template-columns: 1fr auto; }
	.kh-footer p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	#kh-stroke-order-paths .is-current { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 460px) {
	.kh-stroke-order { display: block; }
	.kh-stroke-order[hidden] { display: none; }
	.kh-stroke-order__heading { margin-bottom: 15px; }
	.kh-stroke-order__image { width: min(100%, 210px); margin: 0 auto 14px; }
	.kh-stroke-order__guide { text-align: center; }
	.kh-stroke-order__controls { max-width: 260px; margin-right: auto; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.kh-app--working .kh-status::after { animation-duration: 1.8s; }
}