/* Lumen customiser: same palette and glass as the theme */
:root {
	--accent: 0 0% 96%;
	--accent-ink: #09090b;
	--bg: #060607;
	--surface: #0e0e10;
	--surface-2: #17171a;
	--surface-3: #202024;
	--line: rgb(255 255 255 / .08);
	--edge: rgb(255 255 255 / .12);
	--text: #f4f4f5;
	--muted: #a1a1aa;
	--faint: #6b6b74;
	--good: #34d399;
	--warn: #f2b544;
	--bad: #f2555a;
	--sheen: linear-gradient(rgb(255 255 255 / .07), rgb(255 255 255 / .015));
	--top-light: inset 0 1px 0 rgb(255 255 255 / .08);
	--font: "Geist", "Segoe UI", system-ui, sans-serif;
	--mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--panel-w: 408px;
	--top-h: 60px;
	color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
	background: var(--bg);
	color: var(--text);
	font: 400 14px/1.5 var(--font);
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}
::selection { background: hsl(var(--accent) / .35); color: #fff; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .3); }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }
b { font-weight: 600; }
[hidden] { display: none !important; }

/* top bar */
.top {
	display: flex;
	align-items: center;
	gap: 20px;
	height: var(--top-h);
	padding: 0 20px;
	border-bottom: 1px solid var(--line);
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font: 650 17px/1 var(--font);
	letter-spacing: -.02em;
	text-decoration: none;
}
.mark {
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background:
		linear-gradient(135deg, rgb(255 255 255 / .9), rgb(255 255 255 / .15) 55%, transparent 56%),
		hsl(var(--accent) / .5);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 0 18px -4px hsl(var(--accent) / .8);
}
.tag { flex: 1; margin: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-nav { display: flex; gap: 4px; }
.link-btn {
	height: 32px;
	padding: 0 12px;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--muted);
	font-size: 13px;
}
.link-btn:hover { background: rgb(255 255 255 / .06); color: var(--text); }

/* main: settings on the left, preview on the right */
.app {
	display: grid;
	grid-template-columns: var(--panel-w) minmax(0, 1fr);
	grid-template-areas: "panel stage";
	height: calc(100dvh - var(--top-h));
}
.panel {
	grid-area: panel;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-right: 1px solid var(--line);
	background: var(--surface);
}
.panel-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 16px 24px;
	scrollbar-color: #2b2b31 transparent;
	scrollbar-width: thin;
}
.stage { grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 16px 16px; }
.stage-bar { display: flex; align-items: center; gap: 12px; height: 36px; margin-bottom: 10px; }
.scale { color: var(--faint); font: 400 12px/1 var(--mono); }
.stage-tip { margin-left: auto; color: var(--faint); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-tip b { color: var(--muted); font-weight: 500; }
.frame-wrap {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: #060607;
	border: 1px solid var(--edge);
	border-radius: 14px;
	box-shadow: var(--top-light), 0 30px 60px -30px #000;
}
.frame-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border: 0;
	transform-origin: 0 0;
	background: #060607;
}
.frame-wrap[data-device="phone"] { background: radial-gradient(circle at 50% 30%, #121215, #060607 70%); }
.frame-wrap[data-device="phone"] iframe { border-left: 1px solid var(--edge); border-right: 1px solid var(--edge); }

/* settings groups */
.presets { margin: 0 0 14px; }
.presets-label, .sub { display: block; margin: 0 0 8px; color: var(--faint); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.group {
	margin: 0 0 10px;
	background: var(--sheen) var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--top-light);
}
.group > summary {
	display: flex;
	align-items: center;
	height: 46px;
	padding: 0 16px;
	list-style: none;
	font: 600 14px/1 var(--font);
	letter-spacing: -.01em;
	cursor: pointer;
	user-select: none;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin: -3px 2px 0 auto;
	border-right: 1.6px solid var(--muted);
	border-bottom: 1.6px solid var(--muted);
	transform: rotate(45deg);
	transition: transform .2s var(--ease), margin .2s var(--ease);
}
.group[open] > summary::after { margin-top: 4px; transform: rotate(225deg); }
.group-body { padding: 2px 16px 16px; }
.note { margin: 0 0 12px; padding: 10px 12px; background: rgb(255 255 255 / .03); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 12.5px; }

.row { padding: 10px 0; }
.row + .row, .swatches + .row, .row + .swatches { border-top: 1px solid var(--line); }
.row.off { opacity: .45; }
.row-head { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.row-label { flex: 1; color: var(--text); font: 500 13.5px/1.3 var(--font); }
.value { color: var(--muted); font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.hint { margin: 6px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.45; }
.hint.status:empty { display: none; }
.hint.good { color: var(--good); }
.hint.bad { color: var(--bad); }
.perf-note { color: var(--warn); opacity: .85; }
.badge {
	padding: 3px 7px;
	border-radius: 999px;
	font: 600 10px/1 var(--mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.badge.perf { background: rgb(242 181 68 / .12); color: var(--warn); box-shadow: inset 0 0 0 1px rgb(242 181 68 / .35); }

/* range */
input[type="range"] {
	width: 100%;
	height: 22px;
	margin: 6px 0 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--surface-3); border-radius: 999px; }
input[type="range"]::-moz-range-track { height: 4px; background: var(--surface-3); border-radius: 999px; }
input[type="range"]::-moz-range-progress { height: 4px; background: hsl(var(--accent) / .7); border-radius: 999px; }
input[type="range"]::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	margin-top: -6px;
	background: var(--text);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgb(255 255 255 / .06), 0 2px 6px rgb(0 0 0 / .6);
	-webkit-appearance: none;
	transition: box-shadow .15s;
}
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: var(--text); border: 0; border-radius: 50%; }
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px hsl(var(--accent) / .18), 0 2px 6px rgb(0 0 0 / .6); }
input[type="range"]:focus-visible { outline: 0; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px hsl(var(--accent)); }

/* switch */
.switch {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	margin: 0;
	background: var(--surface-3);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--line);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background .2s var(--ease);
}
.switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: var(--muted);
	border-radius: 50%;
	transition: transform .25s var(--ease), background .2s;
}
.switch:checked { background: hsl(var(--accent)); }
.switch:checked::after { background: var(--accent-ink); transform: translateX(16px); }

/* segmented buttons and chips */
.seg {
	display: flex;
	gap: 2px;
	margin-top: 8px;
	padding: 3px;
	background: var(--sheen) rgb(255 255 255 / .02);
	border: 1px solid var(--edge);
	border-radius: 999px;
	box-shadow: var(--top-light);
}
.seg.small { margin: 0; }
.seg-btn {
	flex: 1;
	height: 30px;
	padding: 0 14px;
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.seg.small .seg-btn { height: 28px; padding: 0 12px; font-size: 12.5px; }
.seg-btn:hover { background: rgb(255 255 255 / .07); color: var(--text); }
.seg-btn.on { background: hsl(var(--accent)); color: var(--accent-ink); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 12px;
	background: var(--sheen) rgb(255 255 255 / .02);
	border: 1px solid var(--edge);
	border-radius: 999px;
	box-shadow: var(--top-light);
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 500;
	transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { background-color: rgb(255 255 255 / .07); color: var(--text); }
.chip.on { border-color: hsl(var(--accent) / .7); color: var(--text); background-color: hsl(var(--accent) / .12); }
.chip.dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }

/* text fields */
.text, .hex, .code {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--edge);
	border-radius: 10px;
	color: var(--text);
	font: 400 13.5px/1.4 var(--font);
	transition: border-color .2s;
}
.text { height: 38px; margin-top: 8px; padding: 0 12px; }
.text.mono, .hex, .code { font-family: var(--mono); font-size: 12.5px; }
.text:focus, .hex:focus, .code:focus { outline: 0; border-color: hsl(var(--accent) / .6); }
.text::placeholder { color: var(--faint); }

/* colours */
.swatches { padding: 10px 0 4px; }
.swatches .sub { margin-top: 4px; }
.swatch-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.swatch-row .row-label { font-size: 13px; }
.swatch {
	position: relative;
	flex: none;
	width: 28px;
	height: 28px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
	cursor: pointer;
}
.swatch input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); border: 0; padding: 0; cursor: pointer; }
.hex { flex: none; width: 104px; height: 30px; padding: 0 8px; }
.ink-preview { display: grid; place-items: center; width: 34px; height: 24px; border-radius: 999px; font: 600 12px/1 var(--font); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }

.raw { padding-top: 10px; border-top: 1px solid var(--line); }
.raw-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.raw-row code { flex: none; width: 128px; color: var(--muted); font: 400 12px/1 var(--mono); overflow: hidden; text-overflow: ellipsis; }
.raw-row .text { margin: 0; height: 32px; }

.group-end { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.perf-box { padding: 14px 16px; background: rgb(255 255 255 / .02); border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 12.5px; }
.perf-box h3 { margin: 0 0 8px; color: var(--text); font: 600 13px/1.3 var(--font); }
.perf-box ul { margin: 0; padding-left: 18px; }
.perf-box li + li { margin-top: 6px; }
.perf-box b { color: var(--text); font-weight: 500; }

/* output bar */
.out {
	padding: 12px 16px 14px;
	border-top: 1px solid var(--line);
	background: var(--sheen) var(--surface);
	box-shadow: 0 -16px 30px -20px #000;
}
.warn { margin: 0 0 10px; padding: 8px 12px; background: rgb(242 181 68 / .08); border: 1px solid rgb(242 181 68 / .3); border-radius: 10px; color: var(--warn); font-size: 12.5px; }
.meter-text { display: flex; justify-content: space-between; gap: 12px; color: var(--faint); font-size: 12px; }
.meter-text b { color: var(--text); font: 600 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.meter-text span:last-child { text-align: right; }
.meter-bar { height: 4px; margin: 8px 0 12px; overflow: hidden; background: var(--surface-3); border-radius: 999px; }
.meter-bar i { display: block; width: calc(var(--fill, 0) * 100%); height: 100%; background: var(--good); border-radius: inherit; transition: width .3s var(--ease), background .3s; }
.meter[data-level="warn"] .meter-bar i { background: var(--warn); }
.meter[data-level="over"] .meter-bar i { background: var(--bad); }
.meter[data-level="warn"] #count-note { color: var(--warn); }
.meter[data-level="over"] #count-note { color: var(--bad); }
.out-buttons { display: flex; gap: 8px; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	background: var(--sheen) rgb(255 255 255 / .03);
	border: 1px solid var(--edge);
	border-radius: 999px;
	box-shadow: var(--top-light);
	color: var(--text);
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .2s, border-color .2s, transform .15s var(--ease);
}
.btn:hover { background-color: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .2); }
.btn:active { transform: scale(.97); }
.btn.primary { flex: 1; background: hsl(var(--accent)); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: hsl(var(--accent) / .88); }
.btn.icon { width: 40px; padding: 0; font: 600 12px/1 var(--mono); }
.btn.ghost { height: 36px; font-size: 13px; }
.btn.danger:hover { border-color: rgb(242 85 90 / .5); color: var(--bad); }
.when-done { display: none; }
.btn.done .when-idle { display: none; }
.btn.done .when-done { display: inline; }

/* dialogs */
dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100dvh - 48px);
	padding: 0;
	background: var(--sheen) rgb(18 18 20 / .96);
	border: 1px solid var(--edge);
	border-radius: 18px;
	box-shadow: var(--top-light), 0 40px 80px -20px #000;
	color: var(--text);
}
dialog::backdrop { background: rgb(5 5 7 / .7); }
dialog[open] { animation: pop .25s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dlg { padding: 22px 24px; }
.dlg.wide { width: auto; }
dialog:has(.dlg.wide) { width: min(860px, calc(100vw - 32px)); }
.dlg h2 { margin: 0 0 12px; font: 650 18px/1.3 var(--font); letter-spacing: -.02em; }
.dlg h3 { margin: 20px 0 6px; font: 600 14px/1.3 var(--font); }
.dlg p, .dlg li { color: var(--muted); font-size: 13.5px; }
.dlg p { margin: 0 0 10px; }
.dlg ul, .dlg ol { margin: 0; padding-left: 20px; }
.dlg li + li { margin-top: 6px; }
.dlg li b { color: var(--text); }
.steps li::marker { color: var(--text); font-weight: 600; }
.code { display: block; min-height: 160px; padding: 12px; resize: vertical; line-height: 1.5; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dlg-actions .btn.primary { flex: none; }

.toast {
	position: fixed;
	z-index: 50;
	left: 50%;
	bottom: 24px;
	max-width: min(560px, calc(100vw - 32px));
	padding: 12px 18px;
	background: var(--sheen) rgb(24 24 27 / .96);
	border: 1px solid var(--edge);
	border-radius: 14px;
	box-shadow: var(--top-light), 0 20px 40px -12px #000;
	color: var(--text);
	font-size: 13.5px;
	opacity: 0;
	transform: translate(-50%, 12px);
	pointer-events: none;
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* tablets and phones: preview on top, settings under it, the copy bar stuck to the bottom */
@media (max-width: 899px) {
	body { overflow: auto; }
	.tag { display: none; }
	.top { position: sticky; top: 0; z-index: 20; background: rgb(6 6 7 / .92); padding: 0 12px 0 16px; gap: 8px; }
	.top-nav { margin-left: auto; }
	.link-btn { padding: 0 10px; }
	.app { display: block; height: auto; }
	.stage { height: 64svh; padding: 10px 12px 12px; }
	.stage-tip { display: none; }
	.panel { border-right: 0; border-top: 1px solid var(--line); background: var(--surface); }
	.panel-scroll { overflow: visible; padding: 14px 12px calc(150px + env(safe-area-inset-bottom)); }
	.out {
		position: fixed;
		z-index: 20;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: var(--surface);
	}
	.meter-bar { margin: 6px 0 10px; }
	#count-note { display: none; }
	.meter[data-level="warn"] #count-note, .meter[data-level="over"] #count-note { display: inline; }
	.toast { bottom: calc(130px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
	.link-btn[data-open="paste"] { display: none; }
	.hex { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}