:root {
	--bg:rgb(16 16 16);
	--panel:rgb(24 24 23);
	--panel-2:rgb(32 32 30);
	--line:rgb(52 51 47);
	--text:rgb(214 210 198);
	--muted:rgb(130 127 118);
	--dim:rgb(84 82 76);
	--yellow:rgb(240 255 0);
	--yellow-bg:rgb(240 255 0 / 0.14);
	--red:rgb(255 90 80);
	--sel:rgb(110 200 255);
	--sel-bg:rgb(110 200 255 / 0.18);
	--green:rgb(120 220 140);
	--green-bg:rgb(120 220 140 / 0.14);
	--mono:'IBM Plex Mono', ui-monospace, monospace;
	--serif:'IM Fell English', Georgia, serif;
	--gap:16px;
	--radius:8px;
}

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

body, html {
	margin:0;
	padding:0;
	font-family:var(--mono);
	background-color:var(--bg);
	color:var(--text);
	font-size:15px;
	line-height:1.5;
}

button, input, select {
	font:inherit;
	color:inherit;
}

/* header */

.masthead {
	max-width:1240px;
	margin:0 auto;
	padding:40px var(--gap) 8px;
}

.masthead h1 {
	font-family:var(--serif);
	font-weight:400;
	font-size:clamp(34px, 6vw, 54px);
	line-height:1.05;
	margin:0 0 10px;
	letter-spacing:0.5px;
}

.lede {
	color:var(--muted);
	max-width:68ch;
	margin:0;
	font-size:14px;
}

.wrapper {
	max-width:1240px;
	margin:0 auto;
	padding:var(--gap);
	display:flex;
	flex-direction:column;
	gap:var(--gap);
}

.label {
	display:block;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:1.5px;
	color:var(--muted);
	margin-bottom:6px;
}

/* controls */

.controls {
	display:flex;
	flex-direction:column;
	gap:14px;
}

.group {
	display:grid;
	grid-template-columns:112px minmax(0, 1fr);
	gap:12px;
	align-items:end;
}

.group + .group {
	border-top:1px solid var(--line);
	padding-top:14px;
}

.group h3 {
	margin:0;
	font-family:var(--serif);
	font-weight:400;
	font-size:17px;
	color:var(--muted);
	align-self:center;
}

.reset { margin-left:auto; align-self:center; }

.tabs {
	display:flex;
	gap:6px;
}

.tab {
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:8px 14px;
	cursor:pointer;
	text-align:left;
	display:flex;
	flex-direction:column;
	min-width:112px;
}

.tab b { font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.1; }
.tab span { font-size:11px; color:var(--muted); }
.tab:hover { border-color:var(--dim); }
.tab.on { border-color:var(--yellow); background:var(--panel-2); }
.tab.on b { color:var(--yellow); }

.options {
	display:flex;
	flex-wrap:wrap;
	gap:14px 20px;
	align-items:flex-end;
}

select, .stepper input {
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:6px;
	height:36px;
	padding:0 10px;
}

select { min-width:150px; }
.field.wide select { min-width:300px; }
select:disabled, .seg button:disabled { opacity:0.4; }

input[type="text"] {
	background:var(--bg);
	border:1px solid var(--line);
	border-radius:6px;
	height:36px;
	padding:0 10px;
	width:220px;
}

input[type="text"]:focus, select:focus { outline:1px solid var(--yellow); outline-offset:0; }

.btn {
	background:var(--panel-2);
	border:1px solid var(--dim);
	border-radius:6px;
	height:36px;
	padding:0 14px;
	cursor:pointer;
	align-self:flex-end;
}

.btn:hover { border-color:var(--yellow); color:var(--yellow); }
.btn:disabled { opacity:0.5; cursor:wait; }

.seg, .stepper {
	display:flex;
}

.seg button, .stepper button {
	background:var(--panel);
	border:1px solid var(--line);
	height:36px;
	padding:0 14px;
	cursor:pointer;
}

.seg button:first-child, .stepper button:first-child { border-radius:6px 0 0 6px; }
.seg button:last-child, .stepper button:last-child { border-radius:0 6px 6px 0; }
.seg button + button { border-left:0; }
.seg button.on { background:var(--panel-2); color:var(--yellow); }

.stepper input {
	width:64px;
	text-align:center;
	border-radius:0;
	border-left:0;
	border-right:0;
	-moz-appearance:textfield;
	appearance:textfield;
}

.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; appearance:none; }

.check {
	display:flex;
	align-items:center;
	gap:8px;
	height:36px;
	cursor:pointer;
	color:var(--muted);
}

.check input { accent-color:var(--yellow); width:16px; height:16px; }

/* stats */

.stats {
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:var(--gap);
}

.stat {
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:14px 16px;
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
}

.stat b {
	font-size:26px;
	font-weight:600;
	line-height:1.2;
	font-variant-numeric:tabular-nums;
	overflow-wrap:anywhere;
}

.stat small { color:var(--muted); font-size:11px; }

.meter {
	height:4px;
	background:var(--panel-2);
	border-radius:2px;
	margin:6px 0 4px;
	overflow:hidden;
}

.meter i {
	display:block;
	height:100%;
	width:0;
	background:var(--yellow);
	transition:width 0.3s;
}

.link {
	background:none;
	border:0;
	padding:0;
	color:var(--sel);
	cursor:pointer;
	text-decoration:underline;
	text-underline-offset:2px;
	font-size:11px;
}

/* panels */

.panel {
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:16px;
	min-width:0;
}

.panel-head {
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:space-between;
	gap:4px 12px;
	margin-bottom:12px;
}

.panel-head h2 {
	font-family:var(--serif);
	font-weight:400;
	font-size:22px;
	margin:0;
}

.hint, .legend { font-size:11px; color:var(--muted); }

.sw {
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:2px;
	margin:0 4px 0 10px;
	vertical-align:-1px;
}

.sw.run { background:var(--yellow-bg); outline:1px solid var(--yellow); }
.sw.miss { background:var(--red); }
.sw.word { background:var(--green-bg); outline:1px solid var(--green); }
.sw.hit { background:var(--sel-bg); outline:1px solid var(--sel); }

/* decoded text */

.plain {
	font-size:17px;
	letter-spacing:2px;
	line-height:1.9;
	overflow-wrap:anywhere;
	color:var(--text);
}

.plain span { cursor:pointer; border-radius:2px; }
.plain span:hover { background:var(--panel-2); }
.plain .run { background:var(--yellow-bg); color:var(--yellow); }
.plain .miss { color:var(--red); }
.plain .word { background:var(--green-bg); color:var(--green); }
.plain .hit { background:var(--sel-bg); color:var(--sel); text-decoration:underline; text-underline-offset:4px; }
.plain .sel { background:var(--sel); color:var(--bg); }

.runs {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:12px;
}

.runs:empty { display:none; }

.runs button {
	background:var(--panel-2);
	border:1px solid var(--line);
	border-radius:14px;
	padding:3px 10px;
	font-size:12px;
	cursor:pointer;
	color:var(--yellow);
}

.runs button small, .chip small { color:var(--muted); margin-left:6px; }

/* search */

.search {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
	gap:10px 12px;
	margin-top:16px;
	padding-top:16px;
	border-top:1px solid var(--line);
}

.find-result {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px 8px;
	font-size:12px;
	align-self:center;
}

.chip {
	background:var(--panel-2);
	border:1px solid var(--line);
	border-radius:14px;
	padding:2px 9px;
	font-size:12px;
	cursor:pointer;
	color:var(--sel);
}

.scan-result:not(:empty) { margin-top:12px; font-size:13px; }
.scan-result p { margin:0 0 10px; }
.scan-result p b { color:var(--yellow); font-weight:600; }

.scan-list {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	gap:6px;
	max-height:320px;
	overflow-y:auto;
}

.scan-list button {
	background:var(--panel-2);
	border:1px solid var(--line);
	border-radius:6px;
	padding:6px 10px;
	text-align:left;
	cursor:pointer;
	letter-spacing:1px;
}

.scan-list button:hover { border-color:var(--sel); }
.scan-list mark { background:var(--sel-bg); color:var(--sel); }
.scan-list small { display:block; color:var(--muted); font-size:11px; letter-spacing:0; }

/* numbers + key */

.split {
	display:grid;
	grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
	gap:var(--gap);
	align-items:start;
}

.tiles {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
	gap:4px;
	max-height:640px;
	overflow-y:auto;
	padding-right:4px;
}

.tile {
	background:var(--panel-2);
	border:1px solid transparent;
	border-radius:4px;
	padding:4px 2px 3px;
	text-align:center;
	cursor:pointer;
	line-height:1.15;
}

.tile b { display:block; font-size:18px; color:var(--yellow); }
.tile .n { display:block; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.tile .w { display:block; font-size:10px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile:hover { border-color:var(--dim); }
.tile.run { background:var(--yellow-bg); }
.tile.miss b { color:var(--red); }
.tile.word { background:var(--green-bg); }
.tile.word b { color:var(--green); }
.tile.hit { background:var(--sel-bg); }
.tile.hit b { color:var(--sel); }
.tile.out { opacity:0.3; }
.tile.same { border-color:var(--sel); }
.tile.sel { border-color:var(--sel); background:var(--sel-bg); }

.keypanel {
	position:sticky;
	top:var(--gap);
}

.detail {
	background:var(--panel-2);
	border-radius:6px;
	padding:10px 12px;
	font-size:13px;
	color:var(--muted);
	margin-bottom:12px;
	min-height:44px;
}

.detail b { color:var(--sel); }
.detail em { font-style:normal; color:var(--yellow); }

.keytext {
	max-height:560px;
	overflow-y:auto;
	font-size:13px;
	line-height:1.8;
	color:var(--dim);
	padding-right:4px;
}

.keytext span { border-radius:2px; padding:0 1px; }
.keytext span[data-i] { cursor:pointer; }
.keytext .used { color:var(--text); }
.keytext .used::first-letter { color:var(--yellow); }
.keytext .sel { background:var(--sel-bg); color:var(--sel); outline:1px solid var(--sel); }
.keytext sup { font-size:9px; color:var(--dim); margin-right:2px; }

.keysplit {
	margin:12px 0;
	padding:4px 0;
	border-top:1px dashed var(--dim);
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:1.5px;
	color:var(--muted);
}

/* notes */

.notes summary {
	cursor:pointer;
	font-family:var(--serif);
	font-size:20px;
}

.notes p {
	color:var(--muted);
	max-width:80ch;
	font-size:13px;
}

.notes b { color:var(--text); font-weight:600; }

.loading { color:var(--muted); }

@media (max-width:900px) {
	.stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.split { grid-template-columns:minmax(0, 1fr); }
	.keypanel { position:static; }
	.tiles { max-height:420px; }
	.keytext { max-height:360px; }
}

@media (max-width:700px) {
	.group { grid-template-columns:minmax(0, 1fr); }
	.group h3 { align-self:start; }
}

@media (max-width:520px) {
	.masthead { padding-top:24px; }
	.tabs { width:100%; }
	.tab { flex:1; min-width:0; padding:8px 10px; }
	.field.wide, .field.wide select, .search .field, input[type="text"] { min-width:0; width:100%; }
	.reset { margin-left:0; }
	.stat b { font-size:22px; }
	.plain { font-size:15px; letter-spacing:1px; }
}