@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
	--lo-paper: var(--lo-theme-background, #f5f0e8);
	--lo-paper-deep: var(--lo-theme-border, #e8e0d4);
	--lo-ink: var(--lo-theme-heading, #182019);
	--lo-muted: var(--lo-theme-text, #657066);
	--lo-line: var(--lo-theme-border, #c9c2b7);
	--lo-green: var(--lo-theme-panel, #164e3c);
	--lo-lime: var(--lo-theme-accent, #dfff52);
	--lo-orange: var(--lo-theme-accent-hover, #ef6a3a);
	--lo-white: var(--lo-theme-surface, #fffdf8);
	--lo-cell-off: #d8d2c8;
	--lo-cell-off: color-mix(in srgb, var(--lo-muted) 24%, var(--lo-white));
	--lo-panel-deep: #103d30;
	--lo-panel-deep: color-mix(in srgb, var(--lo-green) 88%, black);
	--lo-panel-cell: #2c594a;
	--lo-panel-cell: color-mix(in srgb, var(--lo-green) 78%, var(--lo-white));
	--lo-panel-line: #497163;
	--lo-panel-line: color-mix(in srgb, var(--lo-green) 68%, var(--lo-white));
	--lo-panel-muted: #a8c1b7;
	--lo-panel-muted: color-mix(in srgb, var(--lo-white) 68%, var(--lo-green));
	--lo-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
	--lo-sans: var(--lo-theme-body-font, system-ui, sans-serif);
	--lo-heading: var(--lo-theme-heading-font, var(--lo-sans));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.lights-out-page {
	margin: 0;
	background: var(--lo-paper);
	color: var(--lo-ink);
	font-family: var(--lo-sans);
	font-weight: var(--lo-theme-body-weight, 400);
	font-size: 16px;
	line-height: 1.75;
}

/* Author-level display rules (for example, the result grid) otherwise win
 * over the browser's default [hidden] rule and can reveal stale results. */
body.lights-out-page [hidden] { display: none !important; }

button, input { font: inherit; }
button { color: inherit; }
body.lights-out-page h1, body.lights-out-page h2, body.lights-out-page h3 {
	font-family: var(--lo-heading);
	font-weight: var(--lo-theme-heading-weight, 600);
}

.lo-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lo-header {
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 clamp(24px, 5vw, 80px);
	border-bottom: 1px solid var(--lo-line);
}

.lo-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--lo-ink);
	font: 500 12px/1 var(--lo-mono);
	letter-spacing: .14em;
	text-decoration: none;
}

.lo-brand svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lo-header__label { color: var(--lo-muted); font: 400 10px/1 var(--lo-mono); letter-spacing: .16em; }

.lo-app { overflow: hidden; }

.lo-intro {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(62px, 8vw, 116px) clamp(24px, 5vw, 72px) clamp(58px, 7vw, 94px);
}

.lo-intro::after {
	content: "0101";
	position: absolute;
	right: 4%;
	top: 44px;
	color: rgba(24, 32, 25, .045);
	font: 500 clamp(90px, 18vw, 250px)/1 var(--lo-mono);
	letter-spacing: -.12em;
	pointer-events: none;
}

.lo-kicker {
	margin: 0 0 22px;
	color: var(--lo-green);
	font: 500 11px/1 var(--lo-mono);
	letter-spacing: .19em;
}

.lo-kicker::before { content: ""; display: inline-block; width: 26px; margin-right: 12px; border-top: 2px solid var(--lo-orange); vertical-align: middle; }

.lo-intro h1 {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0;
	font-size: clamp(38px, 6.2vw, 82px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.055em;
}

.lo-intro h1 em { color: var(--lo-green); font-style: normal; }

.lo-lead {
	position: relative;
	z-index: 1;
	max-width: 660px;
	margin: 38px 0 0 auto;
	color: var(--lo-muted);
	font-size: 14px;
	line-height: 2;
}

.lo-workspace {
	display: grid;
	grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
	max-width: 1320px;
	margin: 0 auto;
	background: var(--lo-white);
	border: 1px solid var(--lo-line);
}

.lo-settings { padding: clamp(30px, 4vw, 54px); border-right: 1px solid var(--lo-line); }
.lo-board-column { min-width: 0; padding: clamp(30px, 4vw, 58px); }

.lo-step-heading { display: flex; align-items: flex-start; gap: 15px; }
.lo-step-heading > span {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border: 1px solid var(--lo-green);
	border-radius: 50%;
	font: 500 10px/1 var(--lo-mono);
}
.lo-step-heading small { display: block; margin: 0 0 4px; color: var(--lo-muted); font: 500 9px/1 var(--lo-mono); letter-spacing: .14em; }
.lo-step-heading h2 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }

.lo-size-form { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: end; gap: 8px; margin-top: 27px; }
.lo-size-form label { position: relative; display: block; }
.lo-size-form label > span { display: block; margin-bottom: 7px; color: var(--lo-muted); font-size: 11px; }
.lo-size-form input {
	width: 100%;
	height: 52px;
	padding: 0 32px 0 13px;
	background: var(--lo-paper);
	border: 1px solid var(--lo-line);
	border-radius: 0;
	outline: none;
	font: 500 18px/1 var(--lo-mono);
}
.lo-size-form input:focus { border-color: var(--lo-green); box-shadow: inset 0 0 0 1px var(--lo-green); }
.lo-size-form label small { position: absolute; right: 11px; bottom: 13px; color: var(--lo-muted); font: 10px/1 var(--lo-mono); }
.lo-size-cross { padding-bottom: 13px; color: var(--lo-muted); text-align: center; }
.lo-size-form .lo-button { grid-column: 1 / -1; margin-top: 6px; }

.lo-button {
	min-height: 50px;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
}
.lo-button--outline { border: 1px solid var(--lo-ink); }
.lo-button--outline:hover { background: var(--lo-ink); color: var(--lo-white); }

.lo-rule { margin-top: 48px; padding-top: 39px; border-top: 1px solid var(--lo-line); }
.lo-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 26px 0 0; padding: 0; border: 0; }
.lo-segments label { cursor: pointer; }
.lo-segments input { position: absolute; opacity: 0; pointer-events: none; }
.lo-segments label > span { display: flex; min-height: 82px; flex-direction: column; justify-content: center; padding: 12px; border: 1px solid var(--lo-line); }
.lo-segments b { display: inline; margin-right: 3px; font: 500 24px/1 var(--lo-mono); }
.lo-segments small { display: block; margin-top: 7px; color: var(--lo-muted); font-size: 9px; white-space: nowrap; }
.lo-segments input:checked + span { background: var(--lo-green); border-color: var(--lo-green); color: var(--lo-white); }
.lo-segments input:checked + span small { color: var(--lo-panel-muted); }
.lo-segments input:focus-visible + span { outline: 3px solid var(--lo-lime); outline-offset: 2px; }

.lo-note { margin-top: 43px; padding: 20px; background: var(--lo-paper); border-left: 3px solid var(--lo-orange); }
.lo-note span { color: var(--lo-green); font: 500 9px/1 var(--lo-mono); letter-spacing: .14em; }
.lo-note p { margin: 10px 0 0; color: var(--lo-muted); font-size: 11px; line-height: 1.8; }

.lo-step-heading--board { margin-bottom: 25px; }
.lo-board-meta { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--lo-muted); font: 400 10px/1 var(--lo-mono); letter-spacing: .05em; }
.lo-board-meta p { margin: 0; }
.lo-swatch { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 10px; background: var(--lo-cell-off); vertical-align: -1px; }
.lo-swatch:first-child { margin-left: 0; }
.lo-swatch--on { background: var(--lo-lime); border: 1px solid var(--lo-green); }

.lo-board-frame {
	display: grid;
	place-items: center;
	min-height: 360px;
	padding: clamp(14px, 3vw, 34px);
	background-color: var(--lo-paper);
	background-image: radial-gradient(color-mix(in srgb, var(--lo-ink) 15%, transparent) .7px, transparent .7px);
	background-size: 12px 12px;
	border: 1px solid var(--lo-line);
	overflow: auto;
}

.lo-board {
	display: grid;
	grid-template-columns: repeat(var(--lo-cols), var(--lo-cell-size));
	grid-auto-rows: var(--lo-cell-size);
	gap: var(--lo-gap, 4px);
	width: max-content;
	touch-action: none;
}

.lo-cell {
	position: relative;
	width: var(--lo-cell-size);
	height: var(--lo-cell-size);
	padding: 0;
	background: var(--lo-cell-off);
	border: 1px solid transparent;
	border-radius: 1px;
	cursor: pointer;
	transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.lo-cell:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(24, 32, 25, .16); }
.lo-cell:focus-visible { outline: 3px solid var(--lo-orange); outline-offset: 2px; z-index: 2; }
.lo-cell.is-on { background: var(--lo-lime); border-color: var(--lo-green); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lo-white) 35%, transparent); }
.lo-cell.is-on::after { content: ""; position: absolute; inset: 24%; border: 1px solid color-mix(in srgb, var(--lo-green) 30%, transparent); border-radius: 50%; }

.lo-tools { display: flex; gap: 8px; margin-top: 12px; }
.lo-tools button { padding: 5px 10px; background: none; border: 0; border-bottom: 1px solid var(--lo-line); color: var(--lo-muted); font-size: 10px; cursor: pointer; }
.lo-tools button:hover { color: var(--lo-green); border-color: var(--lo-green); }

.lo-button--solve {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 68px;
	margin-top: 28px;
	padding: 0 25px;
	background: var(--lo-green);
	color: var(--lo-white);
	font-size: 16px;
}
.lo-button--solve svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .15s ease; }
.lo-button--solve:hover { background: var(--lo-orange); }
.lo-button--solve:hover svg { transform: translateX(4px); }

.lo-result {
	max-width: 1320px;
	margin: 36px auto 0;
	padding: clamp(31px, 5vw, 64px);
	background: var(--lo-green);
	color: var(--lo-white);
}
.lo-result__heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.lo-result .lo-step-heading > span { border-color: var(--lo-lime); color: var(--lo-lime); }
.lo-result .lo-step-heading small { color: var(--lo-panel-muted); }
.lo-result__heading > p { margin: 0; color: var(--lo-lime); font: 500 12px/1.5 var(--lo-mono); letter-spacing: .08em; }
.lo-result__content { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(250px, .65fr); gap: clamp(30px, 6vw, 80px); align-items: center; margin-top: 36px; }
.lo-board-frame--result { min-height: 350px; background-color: var(--lo-panel-deep); background-image: radial-gradient(color-mix(in srgb, var(--lo-lime) 18%, transparent) .7px, transparent .7px); border-color: var(--lo-panel-line); }
.lo-board--solution { pointer-events: none; }
.lo-board--solution .lo-cell { background: var(--lo-panel-cell); border-color: var(--lo-panel-line); cursor: default; }
.lo-board--solution .lo-cell:hover { transform: none; box-shadow: none; }
.lo-board--solution .lo-cell.is-press { display: grid; place-items: center; background: var(--lo-lime); border-color: var(--lo-lime); color: var(--lo-green); font: 500 clamp(9px, 1.2vw, 14px)/1 var(--lo-mono); }
.lo-result__guide > div { display: flex; align-items: center; gap: 15px; padding: 20px 0; border-top: 1px solid var(--lo-panel-line); }
.lo-result__guide > div:last-child { border-bottom: 1px solid var(--lo-panel-line); }
.lo-press-mark, .lo-empty-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; font: 500 11px/1 var(--lo-mono); }
.lo-press-mark { background: var(--lo-lime); color: var(--lo-green); }
.lo-empty-mark { background: var(--lo-panel-cell); border: 1px solid var(--lo-panel-line); }
.lo-result__guide p { margin: 0; }
.lo-result__guide b { display: block; font-size: 12px; font-weight: 500; }
.lo-result__guide small { display: block; margin-top: 5px; color: var(--lo-panel-muted); font-size: 10px; }

.lo-impossible { margin-top: 38px; padding: clamp(30px, 5vw, 64px); background: var(--lo-panel-deep); border: 1px solid var(--lo-panel-line); text-align: center; }
.lo-impossible > span { color: var(--lo-orange); font: 500 10px/1 var(--lo-mono); letter-spacing: .16em; }
.lo-impossible h3 { margin: 20px 0 8px; font-size: clamp(20px, 3vw, 30px); font-weight: 500; }
.lo-impossible p { margin: 0; color: var(--lo-panel-muted); font-size: 12px; }

.lo-about { max-width: 960px; margin: 0 auto; padding: clamp(90px, 12vw, 160px) 24px; }
.lo-about h2 { margin: 0; font-size: clamp(28px, 4.3vw, 52px); line-height: 1.35; letter-spacing: -.04em; }
.lo-about__lead { max-width: 620px; margin: 38px 0 0 auto; color: var(--lo-muted); font-size: 13px; line-height: 2; }

.lo-algorithm { margin-top: clamp(45px, 7vw, 76px); border-top: 1px solid var(--lo-line); border-bottom: 1px solid var(--lo-line); }
.lo-algorithm summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; padding: 18px 4px; list-style: none; cursor: pointer; }
.lo-algorithm summary::-webkit-details-marker { display: none; }
.lo-algorithm summary span { font-size: 14px; font-weight: 600; }
.lo-algorithm summary small { display: block; margin-bottom: 7px; color: var(--lo-green); font: 500 9px/1 var(--lo-mono); letter-spacing: .14em; }
.lo-algorithm summary i { position: relative; width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--lo-line); border-radius: 50%; }
.lo-algorithm summary i::before, .lo-algorithm summary i::after { content: ""; position: absolute; left: 9px; right: 9px; top: 15px; border-top: 1px solid var(--lo-green); transition: transform .2s ease; }
.lo-algorithm summary i::after { transform: rotate(90deg); }
.lo-algorithm[open] summary i::after { transform: rotate(0); }
.lo-algorithm summary:hover i { background: var(--lo-green); border-color: var(--lo-green); }
.lo-algorithm summary:hover i::before, .lo-algorithm summary:hover i::after { border-color: var(--lo-white); }
.lo-algorithm summary:focus-visible { outline: 3px solid var(--lo-orange); outline-offset: 3px; }

.lo-algorithm__body { padding: 8px 0 24px; border-top: 1px solid var(--lo-line); }
.lo-algorithm__body > section { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: clamp(17px, 4vw, 38px); padding: clamp(34px, 5vw, 54px) 4px; border-bottom: 1px solid var(--lo-line); }
.lo-algorithm__body > section:last-child { border-bottom: 0; }
.lo-algorithm__number { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--lo-green); border-radius: 50%; color: var(--lo-green); font: 500 9px/1 var(--lo-mono); }
.lo-algorithm__body h3 { margin: 3px 0 20px; color: var(--lo-green); font-size: clamp(17px, 2.5vw, 22px); font-weight: 600; line-height: 1.4; }
.lo-algorithm__body p { margin: 0 0 16px; color: var(--lo-muted); font-size: 12px; line-height: 1.95; }
.lo-algorithm__body p:last-child { margin-bottom: 0; }
.lo-algorithm var { color: var(--lo-ink); font: 500 1em/1.5 var(--lo-mono); font-style: normal; }
.lo-formula { padding: 20px; background: var(--lo-white); border-left: 3px solid var(--lo-orange); color: var(--lo-ink) !important; font-size: clamp(13px, 2vw, 17px) !important; text-align: center; }
.lo-formula span { color: var(--lo-muted); font: 400 9px/1 var(--lo-mono); }
.lo-complexity { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 7px 16px; margin-top: 24px !important; padding: 17px 20px; background: var(--lo-green); }
.lo-complexity span { align-self: center; color: var(--lo-panel-muted); font: 500 8px/1 var(--lo-mono); letter-spacing: .13em; }
.lo-complexity var { color: var(--lo-lime); overflow-wrap: anywhere; }
.lo-complexity small { align-self: center; color: var(--lo-panel-muted); font: 400 9px/1.5 var(--lo-mono); }
.lo-complexity span:nth-of-type(2) { grid-column: 1; }
.lo-algorithm__note { padding: 17px 20px; background: var(--lo-paper-deep); border-left: 3px solid var(--lo-green); font-size: 10px !important; }

.lo-footer { display: flex; justify-content: space-between; padding: 27px clamp(24px, 5vw, 80px); border-top: 1px solid var(--lo-line); color: var(--lo-muted); font: 400 9px/1 var(--lo-mono); letter-spacing: .14em; }
.lo-footer a { color: inherit; text-decoration: none; }
.lo-noscript { position: fixed; inset: auto 20px 20px; padding: 15px; background: var(--lo-green); color: var(--lo-white); text-align: center; }

@media (max-width: 840px) {
	.lo-workspace { grid-template-columns: 1fr; margin-inline: 14px; }
	.lo-settings { border-right: 0; border-bottom: 1px solid var(--lo-line); }
	.lo-board-frame { min-height: 320px; }
	.lo-result { margin-inline: 14px; }
	.lo-result__content { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
	.lo-header { height: 62px; }
	.lo-header__label { display: none; }
	.lo-intro { padding-top: 55px; }
	.lo-intro h1 { font-size: 36px; }
	.lo-lead br { display: none; }
	.lo-settings, .lo-board-column { padding: 25px 20px; }
	.lo-board-frame { min-height: 270px; padding: 12px; }
	.lo-result__heading { align-items: flex-start; flex-direction: column; }
	.lo-result__content { grid-template-columns: 1fr; }
	.lo-result { padding: 30px 20px; }
	.lo-algorithm__body > section { grid-template-columns: 1fr; }
	.lo-algorithm__number { width: 30px; height: 30px; }
	.lo-complexity { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}