/* Native practice layout/styles ported from Global KanjiPractice. */
.hw-section {background:#f1ebdc;}
.hw-layout {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:36px;padding-block:38px;max-width:960px;}
.hw-intro h2 {font-size:clamp(30px,3.4vw,44px);line-height:1.2;margin:0 0 18px;}
.hw-intro > p {font-size:16px;line-height:1.7;max-width:27em;}
.hw-word {font-size:clamp(32px,4vw,46px);font-weight:700;margin:24px 0 8px;line-height:1.9;}
.hw-word rt {font-size:14px;font-weight:400;}
.hw-meaning {color:#526158;}
.hw-practice {width:100%;max-width:410px;justify-self:center;}
.hw-board[hidden],.hw-unavailable[hidden] {display:none;}
.hw-navigation {justify-content:center;}
@media(max-width:700px){.hw-layout{grid-template-columns:1fr;gap:22px;padding-block:30px}.hw-intro h2{margin-bottom:10px}.hw-word{margin-top:12px}.hw-intro > p{margin-block:8px}.hw-practice{max-width:360px}.hw-boardShell{max-width:320px}}
.hw-practice {
	display: flex;
	min-width: 0;
	min-height: 0;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	overflow-y: auto;
	padding: 4px 2px 12px;
	color: #243047;
}

.hw-navigation {
	min-width: 0;
	border: 0;
	margin: 0;
	display: flex;
	width: min(100%, 440px);
	gap: 8px;
	overflow-x: auto;
	padding: 4px;
	scrollbar-width: thin;
}

.hw-navigation button {
	display: grid;
	flex: 0 0 48px;
	height: 48px;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 11px;
	background: transparent;
	font-size: 24px;
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
}

.hw-navigation button[aria-pressed="true"] {
	border-color: #b8cceb;
	background: #e9f0ff;
	color: #244d93;
}

.hw-controls button:disabled {
	cursor: default;
	opacity: 0.42;
}

.hw-controls {
	display: flex;
	max-width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.hw-controls button {
	display: inline-flex;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid #d5dce7;
	border-radius: 12px;
	background: white;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.hw-controls button:hover:not(:disabled),
.hw-navigation button:hover:not(:disabled) {
	background: #f0f5ff;
}

.hw-controls button[aria-pressed="true"] {
	border-color: #3e62a8;
	background: #e9f0ff;
	color: #244d93;
}

.hw-controls button > span {
	font-size: 13px;
	white-space: nowrap;
}

.hw-practice button:focus-visible,
.hw-attribution:focus-visible {
	outline: 3px solid #3e62a8;
	outline-offset: 2px;
}

.hw-boardShell {
	width: min(100%, 390px);
	aspect-ratio: 1;
	border: 1px solid #cbd6e5;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 26px #27416b12;
	overflow: hidden;
}

.hw-board {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: auto;
}

.hw-board[data-tracing="true"] {
	touch-action: none;
	cursor: crosshair;
}

.hw-grid {
	fill: none;
	stroke: #dce3ed;
	stroke-dasharray: 2 3;
	stroke-width: 0.6;
}

.hw-guide path {
	fill: none;
	stroke: #d5dce6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3.4;
}

.hw-animatedStroke {
	fill: none;
	stroke: #2b3952;
	/* A longer gap prevents a zero-length round cap at the far endpoint. */
	stroke-dasharray: 1 2;
	opacity: 0;
	stroke-dashoffset: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3.5;
	animation: hw-draw-stroke 0.62s linear forwards;
}

.hw-strokeNumber {
	fill: #a0394b;
	stroke: white;
	stroke-width: 2px;
	paint-order: stroke;
	font-size: 7px;
	font-weight: 800;
	pointer-events: none;
}

.hw-userLines path {
	fill: none;
	stroke: #dd6847;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3.5;
	pointer-events: none;
}

.hw-unavailable {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	padding: 24px;
	color: #657286;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

.hw-attribution {
	color: #69788b;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@keyframes hw-draw-stroke {
	from {
		opacity: 1;
		stroke-dashoffset: 1;
	}
	to {
		opacity: 1;
		stroke-dashoffset: 0;
	}
}

@media (max-width: 480px) {
	.hw-practice {
		gap: 11px;
	}
	.hw-controls {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hw-controls button {
		padding: 7px 8px;
	}
	.hw-boardShell {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hw-animatedStroke {
		animation: none;
		opacity: 1;
		stroke-dashoffset: 0;
	}
}
.vocab-writing-dialog .hw-practice {margin-inline:auto;max-width:390px;}
.vocab-writing-dialog:has([data-handwriting]) {width:min(460px,calc(100% - 24px));height:fit-content;max-height:calc(100dvh - 24px);padding:16px;overflow:auto;}
.vocab-writing-dialog[open]:has([data-handwriting]) {display:block;}
.vocab-writing-dialog:has([data-handwriting]) .vocab-dialog-header {margin-bottom:12px;}
.vocab-writing-dialog:has([data-handwriting]) .hw-boardShell {width:min(100%,320px);}