/* Reset & base */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1a1a2e;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #003399;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
}

.container {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* Nav */
.nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 3.5rem;
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1.125rem;
	color: #1a1a2e;
	text-decoration: none;
}

.nav-logo img {
	border-radius: 6px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.nav-links a {
	color: #5a6178;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s;
}

.nav-links a:hover {
	color: #003399;
	text-decoration: none;
}

.nav-links .btn--nav {
	color: #fff;
}

.nav-links .btn--nav:hover {
	color: #fff;
}

.nav-github {
	display: flex;
	align-items: center;
}


.btn {
	display: inline-block;
	background: #003399;
	color: #fff;
	padding: 0.75rem 2rem;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s;
}

.btn:hover {
	background: #002266;
	text-decoration: none;
}

.btn--nav {
	padding: 0.4rem 1rem;
	font-size: 0.85rem;
	border-radius: 6px;
	color: #fff;
}

.btn--secondary {
	background: #fff;
	color: #003399;
	border: 1px solid #003399;
}

.btn--secondary:hover {
	background: #f0f4ff;
	color: #002266;
}

/* Features */
.features {
	padding: 4rem 0;
}

.features h2 {
	text-align: center;
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 2.5rem;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.feature-card {
	background: #f5f7fa;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
}

.feature-icon {
	font-size: 2rem;
	margin-bottom: 0.75rem;
}

.feature-card h3 {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	min-height: 3.2em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-card p {
	font-size: 0.875rem;
	color: #5a6178;
	line-height: 1.5;
}

/* Layout preview */
.layout-preview {
	padding: 4rem 0;
	background: #f5f7fa;
}

.layout-preview h2 {
	text-align: center;
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.section-sub {
	text-align: center;
	color: #5a6178;
	margin-bottom: 2rem;
}

/* Version tabs */
.layout-controls {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.version-tabs {
	display: flex;
	gap: 0.25rem;
	background: #e0e4ed;
	border-radius: 8px;
	padding: 3px;
}

.version-tab {
	border: none;
	background: transparent;
	padding: 0.4rem 1rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #5a6178;
	cursor: pointer;
	transition: all 0.15s;
}

.version-tab:hover {
	color: #1a1a2e;
}

.version-tab.active {
	background: #fff;
	color: #1a1a2e;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Keyboard */
.keyboard {
	--key-unit: 44px;
	--key-gap: 6px;
	--row-gap: 6px;
	width: fit-content;
	margin: 0 auto;
	padding: 12px;
	background: linear-gradient(to bottom, #dcdcdc, #d8d8d8 95%, #e2e2e2);
	border: 1px solid #a0a0a0;
	border-radius: 7px;
	box-shadow:
		0 1px 0 #8c8c8c,
		0 2px 0 #969696,
		0 4px 12px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	gap: var(--row-gap);
}

.keyboard-row {
	display: flex;
	gap: var(--key-gap);
}

.key {
	width: calc(var(--w) * var(--key-unit) + (var(--w) - 1) * var(--key-gap));
	height: var(--key-unit);
	flex-shrink: 0;
	background: linear-gradient(to bottom, #f9f9f9, #efefef 95%, #e2e2e2);
	border-radius: 4px;
	box-shadow:
		0 1px 0 #fafafa,
		0 2px 0 1px #828282,
		0 2px 0 2px #464646;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	padding: 3px 5px;
	font-size: 12px;
	font-family: "SF Mono", "Menlo", "Consolas", monospace;
	cursor: default;
	transition: transform 0.08s, box-shadow 0.08s;
}

.key:active {
	transform: translateY(1px);
	box-shadow:
		0 0.5px 0 1px #828282,
		0 0.5px 0 2px #464646;
}

/* Character positions */
.key-char {
	display: flex;
	align-items: center;
	line-height: 1;
	overflow: hidden;
	white-space: nowrap;
}

.key-char--shift {
	justify-content: flex-start;
	color: #0028aa;
}

.key-char--option-shift {
	justify-content: flex-end;
	color: #780078;
}

.key-char--base {
	justify-content: flex-start;
	color: #000;
}

.key-char--option {
	justify-content: flex-end;
	color: #aa0000;
}

.key-char--is-dead {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-style: dotted;
}

/* Dead key highlight */
.key--dead {
	background: linear-gradient(to bottom, #fef9e7, #fef3cd 95%, #f5e6a8);
	cursor: pointer;
}

.key--dead:hover {
	background: linear-gradient(to bottom, #fef3cd, #fce9a0 95%, #f0da88);
}

/* Modifier keys */
.key--mod {
	background: linear-gradient(to bottom, #eeeeee, #e4e4e4 95%, #d8d8d8);
	display: flex;
	align-items: center;
	justify-content: center;
}

.key-mod-label {
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #555;
	font-weight: 500;
}

/* Invisible spacer (reserves space next to spanning enter key) */
.key--spacer {
	background: none;
	box-shadow: none;
	pointer-events: none;
}

/* ISO Enter — single tall block in row 3, extending upward into row 2 */
.key--enter {
	height: calc(2 * var(--key-unit) + var(--row-gap));
	margin-top: calc(-1 * var(--key-unit) - var(--row-gap));
	z-index: 1;
}

/* Arrow cluster — inverted T, all half-height */
.key--arrow-cluster {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.key--arrow-cluster:active {
	transform: none;
	box-shadow: none;
}

.arrow-row {
	display: flex;
	gap: var(--key-gap);
	flex: 1;
}

.arrow-key {
	flex: 1;
	border-radius: 3px;
	background: linear-gradient(to bottom, #eeeeee, #e4e4e4 95%, #d8d8d8);
	box-shadow:
		0 0.5px 0 #fafafa,
		0 1px 0 1px #828282,
		0 1px 0 2px #464646;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arrow-key:active {
	transform: translateY(1px);
	box-shadow:
		0 0.5px 0 1px #828282,
		0 0.5px 0 2px #464646;
}

.arrow-key .key-mod-label {
	font-size: 9px;
}

.arrow-key--spacer {
	visibility: hidden;
	background: none;
	box-shadow: none;
}

/* Active modifier layer — dim inactive characters, emphasize active */
.keyboard[data-active-layer] .key-char {
	opacity: 0.15;
	transition: opacity 0.1s;
}

.keyboard[data-active-layer="shift"] .key-char--shift,
.keyboard[data-active-layer="option"] .key-char--option,
.keyboard[data-active-layer="option-shift"] .key-char--option-shift {
	opacity: 1;
	font-weight: 700;
	font-size: 15px;
}

/* Pressed modifier key visual */
.keyboard[data-active-layer="shift"] .key--mod[data-mod="shift"],
.keyboard[data-active-layer="option"] .key--mod[data-mod="option"],
.keyboard[data-active-layer="option-shift"] .key--mod[data-mod="shift"],
.keyboard[data-active-layer="option-shift"] .key--mod[data-mod="option"] {
	transform: translateY(1px);
	background: linear-gradient(to bottom, #d4d4d4, #ccc);
	box-shadow:
		0 0.5px 0 1px #828282,
		0 0.5px 0 2px #464646;
}

/* Dead key mode — compositions shown on keyboard */
.keyboard--dead-mode .key--no-composition {
	opacity: 0.25;
}

.keyboard--dead-mode .key--has-composition {
	background: linear-gradient(to bottom, #fef9e7, #fef3cd 95%, #f5e6a8);
}

.keyboard--dead-mode .key--has-composition .key-char--option-shift,
.keyboard--dead-mode .key--has-composition .key-char--option {
	visibility: hidden;
}

.keyboard--dead-mode .key--has-composition .key-char--base {
	font-size: 15px;
	font-weight: 700;
}

.keyboard--dead-mode .key--has-composition .key-char--shift {
	font-size: 12px;
	font-weight: 700;
}

.keyboard--dead-mode .key--spacebar-label .key-mod-label {
	font-size: 15px;
	font-weight: 700;
	color: #1a1a2e;
	letter-spacing: 0.02em;
}

.keyboard--dead-mode .key--dead-active {
	background: linear-gradient(to bottom, #d4e8ff, #b8d4f0 95%, #a0c0e0);
	cursor: pointer;
	opacity: 1;
}


/* Keyboard hint */
.keyboard-hint {
	text-align: center;
	font-size: 0.8rem;
	color: #5a6178;
	margin-top: 0.75rem;
}

.keyboard-hint kbd {
	background: #e0e4ed;
	border-radius: 3px;
	padding: 0.1rem 0.35rem;
	font-family: "SF Mono", "Menlo", "Consolas", monospace;
	font-size: 0.75rem;
}

/* PDF links */
.layout-pdf-links {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

.layout-pdf-links a {
	font-size: 0.8rem;
	color: #5a6178;
}

.layout-pdf-links a:hover {
	color: #003399;
}

/* Error */
.keyboard-error {
	text-align: center;
	padding: 2rem;
	color: #aa0000;
}

/* Installation */
.install {
	padding: 4rem 0;
}

.install h2 {
	text-align: center;
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 2.5rem;
}

.install-steps {
	max-width: 640px;
	margin: 0 auto;
}

.step {
	display: flex;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
	position: relative;
}

.step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 3rem;
	bottom: -1.25rem;
	width: 2px;
	background: #e0e4ed;
}

.step-number {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	background: #003399;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1rem;
}

.step-content h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.375rem;
}

.step-content p {
	color: #5a6178;
	font-size: 0.95rem;
}

.step-content code {
	background: #f0f4ff;
	padding: 0.125rem 0.375rem;
	border-radius: 4px;
	font-size: 0.85rem;
}

.install-screenshots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.install-screenshots img {
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Footer */
.footer {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding: 2rem 0;
	text-align: center;
}

.footer p {
	font-size: 0.85rem;
	color: #5a6178;
	margin-bottom: 0.25rem;
}

.footer a {
	color: #5a6178;
	text-decoration: underline;
}

.footer a:hover {
	color: #003399;
}

/* Responsive */
@media (max-width: 830px) {
	.keyboard {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 768px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 480px) {
	.nav-links a:not(.nav-github) {
		display: none;
	}

	.feature-grid {
		grid-template-columns: 1fr;
	}

	.install-screenshots {
		grid-template-columns: 1fr;
	}
}