/* leverage computer — v2 shared stylesheet
   one dialect for every page: tokens, themes, chrome, prose, forms. */

:root {
	--bg: #f4f4f5;
	--fg: #18181b;
	--dim: #52525b;
	--faint: #6f6f78;
	--rule: color-mix(in oklab, var(--fg) 24%, transparent);
	--ok: #0a7a33;
	--err: #a12b2b;
	--mono:
		'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
		monospace;
}

/* default is light — marketing site stays brand-light unless the visitor
   explicitly picks a theme (press / → theme dark | tokyo | …) */

[data-theme='light'] {
	--bg: #f4f4f5;
	--fg: #18181b;
	--dim: #52525b;
	--faint: #6f6f78;
	--ok: #0a7a33;
	--err: #a12b2b;
}

[data-theme='dark'] {
	--bg: #0b0c0e;
	--fg: #e7e7e3;
	--dim: #8f8f94;
	--faint: #5b5b60;
	--ok: #3fcf6f;
	--err: #e06a55;
}

/* editor-grade themes — bg/fg/dim/faint mapped from each palette's
   canonical editor colors; ok/err from its green/red. */

[data-theme='cursor'] {
	--bg: #141414;
	--fg: #d8d8d3;
	--dim: #85857f;
	--faint: #4d4d49;
	--ok: #7fbf8f;
	--err: #e0655c;
}

[data-theme='tokyo'] {
	--bg: #1a1b26;
	--fg: #c0caf5;
	--dim: #737aa2;
	--faint: #3b4261;
	--ok: #9ece6a;
	--err: #f7768e;
}

[data-theme='nord'] {
	--bg: #2e3440;
	--fg: #d8dee9;
	--dim: #8b93a5;
	--faint: #4c566a;
	--ok: #a3be8c;
	--err: #bf616a;
}

[data-theme='gruvbox'] {
	--bg: #282828;
	--fg: #ebdbb2;
	--dim: #a89984;
	--faint: #665c54;
	--ok: #b8bb26;
	--err: #fb4934;
}

[data-theme='catppuccin'] {
	--bg: #1e1e2e;
	--fg: #cdd6f4;
	--dim: #9399b2;
	--faint: #585b70;
	--ok: #a6e3a1;
	--err: #f38ba8;
}

[data-theme='dracula'] {
	--bg: #282a36;
	--fg: #f8f8f2;
	--dim: #8b96c5;
	--faint: #44475a;
	--ok: #50fa7b;
	--err: #ff5555;
}

[data-theme='one-dark'] {
	--bg: #282c34;
	--fg: #abb2bf;
	--dim: #7f848e;
	--faint: #3e4451;
	--ok: #98c379;
	--err: #e06c75;
}

[data-theme='solarized'] {
	--bg: #002b36;
	--fg: #93a1a1;
	--dim: #657b83;
	--faint: #586e75;
	--ok: #859900;
	--err: #dc322f;
}

[data-theme='rose-pine'] {
	--bg: #191724;
	--fg: #e0def4;
	--dim: #908caa;
	--faint: #6e6a86;
	--ok: #9ccfd8;
	--err: #eb6f92;
}

[data-theme='vesper'] {
	--bg: #101010;
	--fg: #e6e6e1;
	--dim: #8b8b85;
	--faint: #3c3c3a;
	--ok: #99ffe4;
	--err: #ff8080;
}

[data-theme='github'] {
	--bg: #0d1117;
	--fg: #c9d1d9;
	--dim: #8b949e;
	--faint: #30363d;
	--ok: #3fb950;
	--err: #f85149;
}

* {
	box-sizing: border-box;
}

html {
	background: var(--bg);
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.55;
	padding: 40px;
	margin: 0;
	font-variant-ligatures: none;
	transition: background 0.25s ease, color 0.25s ease;
}

@media (max-width: 600px) {
	body {
		padding: 24px 18px 96px;
	}
}

::selection {
	background: var(--fg);
	color: var(--bg);
}

a {
	color: var(--fg);
}

:focus-visible {
	outline: 1px dashed var(--fg);
	outline-offset: 3px;
}

pre {
	margin: 0;
	white-space: pre-wrap;
}

/* ── brand ─────────────────────────────────────────── */

.brand {
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.brand .mark {
	vertical-align: baseline;
	transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
	transform-origin: center;
}

.brand:hover .mark {
	transform: scaleX(-1);
}

.mark rect {
	fill: currentColor;
}

.mark path {
	fill: var(--bg);
}

.crumb {
	color: var(--dim);
}

.crumb a {
	color: var(--dim);
}

.crumb a:hover {
	color: var(--fg);
}

/* ── rules & structure ─────────────────────────────── */

.rule {
	margin: 28px 0;
	color: var(--fg);
	user-select: none;
}

main {
	max-width: 720px;
}

.sect {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0 0 20px;
}

.sect::before {
	content: '┌─';
	font-weight: 400;
	color: var(--dim);
}

.sect::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--rule);
	transform: translateY(1px);
}

/* ── prose (reading pages get 13px) ────────────────── */

.prose {
	font-size: 13px;
	line-height: 1.75;
}

.prose p {
	margin: 0 0 12px;
	max-width: 62ch;
}

.prose p strong {
	font-weight: 700;
}

.quote {
	margin: 28px 0;
	padding-left: 16px;
	border-left: 2px solid var(--fg);
	font-weight: 700;
	max-width: 62ch;
}

/* ── links & buttons ───────────────────────────────── */

.arr {
	display: inline-block;
	transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.alink {
	display: inline-block;
	margin-top: 4px;
}

.alink:hover .arr,
.btn:hover .arr,
.role-link:hover .arr {
	transform: translateX(4px);
}

.btn {
	display: inline-block;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	background: transparent;
	border: 1px solid var(--fg);
	padding: 5px 14px;
	color: var(--fg);
	text-decoration: none;
	margin-top: 4px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover {
	background: var(--fg);
	color: var(--bg);
}

.btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.back-link {
	margin: 40px 0 8px;
}

.back-link a {
	color: var(--dim);
	text-decoration: none;
}

.back-link a:hover {
	color: var(--fg);
	text-decoration: underline;
}

/* ── blinking cursor ───────────────────────────────── */

.cursor {
	display: inline-block;
	width: 0.55em;
	height: 1em;
	background: var(--fg);
	vertical-align: -2px;
	margin-left: 3px;
	animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
	50% {
		background: transparent;
	}
}

/* ── status line ───────────────────────────────────── */

.status {
	margin: 4px 0 0;
}

.status .led {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ok);
	margin-right: 6px;
	animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
	50% {
		opacity: 0.35;
	}
}

.status .meta {
	color: var(--dim);
}

.status a {
	color: var(--dim);
}

.status a:hover {
	color: var(--fg);
}

/* ── site footer ───────────────────────────────────── */

.site-footer {
	margin-top: 72px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: baseline;
	color: var(--dim);
	max-width: 720px;
}

.site-footer a {
	color: var(--dim);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--fg);
	text-decoration: underline;
}

.site-footer .sep {
	user-select: none;
	color: var(--faint);
}

.site-footer .hint {
	margin-left: auto;
	color: var(--faint);
}

.site-footer .hint kbd {
	font-family: var(--mono);
	border: 1px solid var(--rule);
	padding: 0 5px;
	color: var(--dim);
}

@media (max-width: 600px) {
	.site-footer .hint {
		display: none;
	}
}

/* ── command palette ───────────────────────────────── */

.palette {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--bg);
	border-top: 1px solid var(--fg);
	padding: 10px 40px 12px;
	font-size: 12px;
	transform: translateY(101%);
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 50;
}

@media (max-width: 600px) {
	.palette {
		padding: 10px 18px 12px;
	}
}

.palette.open {
	transform: translateY(0);
}

.palette-out {
	color: var(--dim);
	white-space: pre-wrap;
	margin-bottom: 6px;
	max-height: 40vh;
	overflow-y: auto;
}

.palette-out:empty {
	display: none;
}

.palette-out .ok {
	color: var(--ok);
}

.palette-out .err {
	color: var(--err);
}

.palette-line {
	display: flex;
	gap: 8px;
	align-items: baseline;
}

.palette-line .ps1 {
	font-weight: 700;
	white-space: nowrap;
}

.palette .input-wrap {
	position: relative;
	flex: 1;
	display: flex;
}

.palette input {
	width: 100%;
	font-family: var(--mono);
	font-size: 12px;
	background: transparent;
	border: none;
	outline: none;
	color: var(--fg);
	padding: 0;
	caret-color: var(--fg);
	position: relative;
	z-index: 1;
}

.palette .ghost {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--mono);
	font-size: 12px;
	color: var(--faint);
	pointer-events: none;
	white-space: pre;
	overflow: hidden;
	max-width: 100%;
}

.palette .dismiss {
	color: var(--faint);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.cursor,
	.status .led {
		animation: none;
	}

	.palette {
		transition: none;
	}
}

/* ── forms (access) ────────────────────────────────── */

.field {
	margin-bottom: 22px;
}

.field-label {
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.field-label .ps {
	color: var(--dim);
	font-weight: 400;
	margin-right: 6px;
}

.field-hint {
	display: block;
	margin-bottom: 6px;
	color: var(--dim);
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='number'] {
	font-family: var(--mono);
	font-size: 13px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--rule);
	outline: none;
	padding: 4px 0;
	color: var(--fg);
	width: 100%;
	max-width: 420px;
	border-radius: 0;
	caret-color: var(--fg);
	transition: border-color 0.15s ease;
}

textarea {
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.6;
	background: transparent;
	border: 1px solid var(--rule);
	outline: none;
	padding: 10px;
	color: var(--fg);
	width: 100%;
	max-width: 460px;
	min-height: 110px;
	resize: vertical;
	border-radius: 0;
	caret-color: var(--fg);
	transition: border-color 0.15s ease;
}

input:focus,
textarea:focus {
	border-color: var(--fg);
}

input:focus-visible,
textarea:focus-visible {
	outline: none;
}

input::placeholder,
textarea::placeholder {
	color: var(--faint);
}

.req {
	color: var(--faint);
	font-weight: 400;
	margin-left: 4px;
}

.success {
	color: var(--ok);
}

.error {
	color: var(--err);
}

/* ── careers ───────────────────────────────────────── */

.role-link {
	display: block;
	margin: 28px 0;
	max-width: 62ch;
	text-decoration: none;
	color: var(--fg);
}

.role-link h2 {
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: 0.04em;
}

.role-link h2 .arr {
	margin-left: 6px;
	color: var(--dim);
}

.role-link:hover h2 {
	text-decoration: underline;
}

.role-link:hover h2 .arr {
	color: var(--fg);
}

.role-link p {
	margin: 0;
	color: var(--dim);
}

/* ── ascii session demo ────────────────────────────── */

.demo-wrap {
	margin: 36px 0 8px;
	overflow-x: auto;
	max-width: 100%;
}

.demo {
	font-family: var(--mono);
	font-size: 11.5px;
	line-height: 1.5;
	white-space: pre;
	min-height: calc(18em * 1.5);
}

.demo .bx {
	color: var(--faint);
}

.demo .dim {
	color: var(--dim);
}

.demo .hn {
	font-weight: 700;
}

.demo .ag {
	font-weight: 700;
}

.demo .ok {
	color: var(--ok);
}

.demo-caption {
	color: var(--faint);
	margin: 6px 0 0;
}

/* ── thesis extras ─────────────────────────────────── */

.toc {
	color: var(--dim);
	margin: 6px 0 0;
}

.toc a {
	color: var(--dim);
	text-decoration: none;
}

.toc a:hover {
	color: var(--fg);
	text-decoration: underline;
}

.progress {
	position: fixed;
	right: 40px;
	bottom: 16px;
	font-size: 11px;
	color: var(--faint);
	background: var(--bg);
	padding: 2px 4px;
	user-select: none;
	z-index: 10;
}

@media (max-width: 720px) {
	.progress {
		display: none;
	}
}

.prop-grid {
	margin-top: 28px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px 40px;
}

@media (min-width: 640px) {
	.prop-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.prop-name {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.prop-name::before {
	content: '▣ ';
	color: var(--dim);
}

.prop-body {
	margin-top: 6px;
	max-width: 42ch;
	color: var(--dim);
}

.deliver {
	margin: 12px 0;
	max-width: 62ch;
}

.deliver-num {
	display: inline-block;
	width: 3em;
	color: var(--dim);
}

.deliver-name {
	font-weight: 700;
}

.diagram {
	color: var(--fg);
	white-space: pre;
	overflow-x: auto;
	margin: 28px 0 20px;
	font-size: 12px;
	line-height: 1.5;
}

.diagram .bx {
	color: var(--faint);
}

.diagram .hd {
	font-weight: 700;
}

/* ── changelog ─────────────────────────────────────── */

.entry {
	margin-top: 56px;
}

.entry-date {
	color: var(--dim);
	margin: 0 0 4px;
}

.entry-date a {
	color: var(--dim);
	text-decoration: none;
}

.entry-date a:hover {
	color: var(--fg);
	text-decoration: underline;
}

.entry h2 {
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 20px;
	letter-spacing: 0.04em;
}

ul.changes {
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
	max-width: 62ch;
}

ul.changes li {
	margin: 0 0 8px;
	padding-left: 1.5em;
	position: relative;
}

ul.changes li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--dim);
}