/* lacha.dev :: green phosphor edition
   a 2000s homepage with some 2026 stuck in it. */

@font-face {
	font-family: "TrollTerminal";
	src: url("../assets/fonts/troll-terminal.woff2") format("woff2");
	font-display: swap;
}

:root {
	/* the whole site is these seven greens */
	--g0: #020a03;
	--g1: #071a0b;
	--g2: #0e3316;
	--g3: #1b662b;
	--g4: #2eb84e;
	--g5: #5cff86;
	--g6: #c8ffd4;

	--bg: var(--g0);
	--panel: #041007;
	--panel2: var(--g1);
	--border: #123d1c;
	--border-hi: var(--g3);
	--text: #b4f5c2;
	--dim: #4f9a60;
	--accent: var(--g5);
	--on-accent: var(--g0);
	--chrome-hi: #164a22;
	--chrome-lo: #04120a;
	--gloss: rgba(200, 255, 212, 0.16);
	--glow: rgba(92, 255, 134, 0.35);

	--px: "TrollTerminal", "Courier New", monospace;
	--old: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif;
	--modern: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;

	/* 1-bit dither swatches */
	--d50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath fill='%231b662b' d='M0 0h1v1H0zm1 1h1v1H1z'/%3E%3C/svg%3E");
	--d50-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath fill='%235cff86' d='M0 0h1v1H0zm1 1h1v1H1z'/%3E%3C/svg%3E");
	--d25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath fill='%230e3316' d='M0 0h1v1H0z'/%3E%3C/svg%3E");
	--d50-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0h1v1H0zm1 1h1v1H1z'/%3E%3C/svg%3E");

	color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 56px; scrollbar-color: var(--g3) var(--g0); }

body {
	margin: 0;
	min-height: 100vh;
	font: 13px/1.7 var(--old);
	color: var(--text);
	background: var(--bg) url("../assets/img/bg.png") repeat;
	cursor: url("../assets/img/cursor.svg") 0 0, auto;
}

a, button, label, summary, [data-tilt] { cursor: url("../assets/img/cursor-hand.svg") 10 0, pointer; }

::selection { background: var(--g5); color: var(--g0); }

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--g0) var(--d25); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--chrome-hi), var(--chrome-lo)); border: 1px solid var(--g3); box-shadow: inset 1px 1px 0 var(--gloss); }

img { image-rendering: pixelated; }

a { color: var(--g5); text-decoration: none; }
a:hover { text-decoration: underline; }
.content p a:hover, .terminal a:hover { background: var(--g5); color: var(--g0); text-decoration: none; }

:focus-visible { outline: 2px dashed var(--g5); outline-offset: 2px; }

.px, h1, h2, h3, h4, .button, .tab, kbd, .terminal, .lcd, .odometer, .fact b, .topstrip .px, .ticker {
	font-family: var(--px);
	font-weight: normal;
	-webkit-font-smoothing: none;
	font-smooth: never;
}

.dim { color: var(--dim); }
.small { font-size: 11px; line-height: 1.5; }
.center { text-align: center; }
.grow { flex: 1; }

.i { width: 16px; height: 16px; flex: none; fill: currentColor; vertical-align: -3px; shape-rendering: crispEdges; }
.i.smooth { shape-rendering: auto; }
.flipx { transform: scaleX(-1); }

#scape {
	position: fixed;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	pointer-events: none;
}

.skip { position: absolute; left: -999px; top: 8px; z-index: 10000; background: var(--g5); color: var(--g0); padding: 4px 10px; font-family: var(--px); }
.skip:focus { left: 8px; }

/* ---------- page frame ---------- */

.site {
	position: relative;
	max-width: 1080px;
	margin: 28px auto 40px;
	background: rgba(4, 16, 7, 0.9);
	border: 2px solid var(--border-hi);
	box-shadow: 0 0 0 1px #000, 0 0 60px rgba(46, 184, 78, 0.12);
}
.site::after {
	content: "";
	position: absolute;
	inset: 8px -10px -10px 8px;
	background: var(--d50);
	z-index: -1;
}

.topstrip {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 10px;
	font-size: 11px;
	background: linear-gradient(var(--chrome-hi), var(--chrome-lo));
	border-bottom: 1px solid var(--border-hi);
	box-shadow: inset 0 1px 0 var(--gloss);
}
.topstrip .px { font-size: 16px; line-height: 22px; color: var(--g5); white-space: nowrap; }
.ts-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topstrip .dim { line-height: 22px; white-space: nowrap; }

/* ---------- hero ---------- */

.hero {
	position: relative;
	text-align: center;
	padding: 0 0 22px;
	background: var(--g0);
	border-bottom: 1px solid var(--border-hi);
}
#hero {
	display: block;
	width: 100%;
	height: 270px;
	image-rendering: pixelated;
}
.hero-title {
	margin: 0;
	padding: 60px 0 30px;
	font-size: 64px;
	line-height: 1;
	letter-spacing: 4px;
	color: var(--g5);
	text-shadow: 4px 4px 0 var(--g3), 0 0 24px var(--glow);
}
.js .hero-title {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	padding: 0;
}
html:not(.js) #hero { display: none; }

.cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 0 16px; }
.ver { margin: 12px 0 0; font-size: 11px; }

/* ---------- buttons ---------- */

.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	font-size: 16px;
	line-height: 24px;
	color: var(--text);
	text-decoration: none;
	background: linear-gradient(var(--chrome-hi), var(--chrome-lo));
	border: 1px solid var(--border-hi);
	border-radius: 4px;
	box-shadow: inset 0 1px 0 var(--gloss), 0 3px 0 #000;
	overflow: hidden;
	transition: transform 0.08s, filter 0.15s;
}
.button::before {
	content: "";
	position: absolute;
	inset: 1px 1px 50% 1px;
	border-radius: 3px 3px 10px 10px / 3px 3px 4px 4px;
	background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
	pointer-events: none;
}
.button:hover { text-decoration: none; filter: brightness(1.25); }
.button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--gloss), 0 1px 0 #000; }
.button .i { width: 1em; height: 1em; vertical-align: 0; }

.button.primary {
	color: var(--g0);
	background: linear-gradient(var(--g6), var(--g5) 46%, var(--g4) 54%, #1f9a3d);
	border-color: var(--g6);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.button.huge { font-size: 32px; line-height: 40px; padding: 12px 26px; border-radius: 6px; }
.button.big { font-size: 24px; line-height: 32px; padding: 10px 20px; }
.button.small { font-size: 16px; line-height: 20px; padding: 3px 12px; }
.button.glossy { border-radius: 999px; }

.pulse-ring { overflow: visible; }
.pulse-ring::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--g5);
	border-radius: 8px;
	animation: ring 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes ring {
	0% { opacity: 0.9; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.14, 1.4); }
}

/* starburst "NEW!" sticker */
.burst {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: -10px -6px -10px 2px;
	font: 8px/1 var(--px);
	font-style: normal;
	color: var(--g0);
	background: var(--g5);
	clip-path: polygon(50% 0, 61% 18%, 82% 10%, 79% 31%, 100% 38%, 84% 53%, 97% 72%, 75% 74%, 72% 96%, 54% 84%, 36% 100%, 30% 79%, 8% 84%, 16% 63%, 0 50%, 18% 39%, 9% 18%, 31% 20%, 40% 0);
	animation: wobble 1.6s ease-in-out infinite;
	vertical-align: middle;
}
.burst.small { position: absolute; top: -12px; right: -10px; margin: 0; width: 38px; height: 38px; z-index: 2; }
@keyframes wobble {
	0%, 100% { transform: rotate(-10deg) scale(1); }
	50% { transform: rotate(10deg) scale(1.12); }
}

/* ---------- navbar ---------- */

.navbar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: flex-end;
	gap: 4px;
	padding: 8px 10px 0;
	background: linear-gradient(var(--chrome-lo), var(--g1));
	border-bottom: 1px solid var(--border-hi);
	overflow-x: auto;
	scrollbar-width: none;
}
.navbar::-webkit-scrollbar { display: none; }
.navbar { transition: background 0.25s, box-shadow 0.25s; }
.navbar.stuck {
	background: rgba(4, 16, 7, 0.72);
	backdrop-filter: blur(14px) saturate(1.5);
	-webkit-backdrop-filter: blur(14px) saturate(1.5);
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.95);
}
.tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px 3px;
	font-size: 16px;
	line-height: 24px;
	color: var(--dim);
	white-space: nowrap;
	background: linear-gradient(var(--g2), var(--g1));
	border: 1px solid var(--border);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	box-shadow: inset 0 1px 0 var(--gloss);
	margin-bottom: -1px;
}
.tab:hover { color: var(--g6); text-decoration: none; background: linear-gradient(var(--g3), var(--g2)); }
.tab.here { color: var(--g5); background: var(--panel); border-color: var(--border-hi); padding-bottom: 4px; z-index: 1; }
.tab.hot { padding-right: 16px; }
.tab .burst { width: 28px; height: 28px; margin: -14px -14px -6px -2px; font-size: 8px; }
.tab-new { padding: 4px 10px 3px; color: var(--g5); }

/* the one modern bit of chrome: a command bar pill */
.kbar {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px 8px;
	padding: 5px 6px 5px 12px;
	font: 500 12px/1 var(--modern);
	color: var(--dim);
	white-space: nowrap;
	background: rgba(92, 255, 134, 0.06);
	border: 1px solid rgba(92, 255, 134, 0.2);
	border-radius: 999px;
	backdrop-filter: blur(10px);
	transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.kbar:hover { color: var(--g6); border-color: rgba(92, 255, 134, 0.5); box-shadow: 0 0 0 4px rgba(92, 255, 134, 0.08); }
.kbar span { margin-right: 10px; }
kbd {
	display: inline-block;
	min-width: 20px;
	padding: 3px 5px;
	font: 500 11px/1 var(--modern);
	text-align: center;
	color: var(--g6);
	background: rgba(92, 255, 134, 0.08);
	border: 1px solid rgba(92, 255, 134, 0.22);
	border-bottom-width: 2px;
	border-radius: 6px;
}

/* ---------- ticker ---------- */

.ticker {
	overflow: hidden;
	white-space: nowrap;
	font-size: 16px;
	line-height: 24px;
	color: var(--g5);
	background: var(--g0);
	border-bottom: 1px solid var(--border-hi);
	text-shadow: 0 0 6px var(--glow);
}
.ticker-track { display: inline-flex; animation: tick 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-text { padding-right: 0; }
.ticker b { font-weight: normal; padding: 0 4px; background: var(--g5); color: var(--g0); text-shadow: none; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- columns ---------- */

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.content { padding: 20px 26px 30px; min-width: 0; }
.sidebar {
	padding: 4px 0 16px;
	background: rgba(2, 10, 3, 0.86) var(--d25);
	border-left: 1px solid var(--border-hi);
}

h2 {
	margin: 0 0 10px;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: 1px;
	color: var(--g5);
	text-shadow: 3px 3px 0 var(--g2), 0 0 14px var(--glow);
}
h3 { margin: 0 0 6px; font-size: 16px; line-height: 24px; color: var(--g5); }
h4 { margin: 0; }

section { scroll-margin-top: 16px; }
.content > section { margin-bottom: 8px; }

.divider {
	height: 4px;
	margin: 26px 0;
	border: 0;
	background: var(--d50-hi);
	-webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	opacity: 0.6;
}

/* ---------- intro ---------- */

.intro h2 { display: flex; align-items: center; gap: 10px; font-size: 40px; line-height: 48px; }
.verified { width: 26px; height: 26px; fill: var(--g5); shape-rendering: crispEdges; filter: drop-shadow(0 0 6px var(--glow)); }
.lead { font-size: 15px; color: var(--g6); }
.lead::after { content: ""; display: inline-block; width: 8px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--g5); animation: blink 1s steps(1) infinite; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.fact {
	padding: 10px 8px 8px;
	text-align: center;
	background: #010501;
	border: 1px solid var(--border);
	box-shadow: inset 2px 2px 0 #000, inset -1px -1px 0 var(--g2);
}
.fact b { display: block; font-size: 32px; line-height: 36px; color: var(--g5); text-shadow: 0 0 10px var(--glow); }
.fact span { font-size: 11px; color: var(--dim); }
.fact.hot b { color: var(--g6); }

/* ---------- project cards ---------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 16px 18px; margin-top: 14px; }

.bevel { position: relative; z-index: 0; }
.bevel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(220px circle at var(--mx) var(--my), rgba(92, 255, 134, 0.14), transparent 70%), linear-gradient(var(--panel2), var(--panel));
	border: 1px solid var(--border);
	box-shadow: inset 1px 1px 0 var(--chrome-hi), inset -1px -1px 0 #000;
}
.bevel::after {
	content: "";
	position: absolute;
	inset: 5px -5px -5px 5px;
	z-index: -2;
	background: var(--d50);
}

.card {
	display: flex;
	flex-direction: column;
	padding: 12px 14px;
	color: var(--text);
	text-decoration: none;
	transition: transform 0.15s ease-out;
	transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.card:hover { text-decoration: none; }
.card:hover::before { border-color: var(--g4); background: radial-gradient(220px circle at var(--mx) var(--my), rgba(92, 255, 134, 0.16), transparent 70%), linear-gradient(var(--g2), var(--panel)); }
.card h3 { display: flex; align-items: center; gap: 8px; }
.card h3 .out { margin-left: auto; width: 12px; height: 12px; opacity: 0.5; transition: transform 0.15s, opacity 0.15s; }
.card:hover h3 .out { opacity: 1; transform: translate(2px, -2px); }
.card p { margin: 0 0 10px; flex: 1; font-size: 12px; }
.card.hot::before { border-color: var(--g3); }

.card.noir {
	--g2: #1e1e1e;
	--g3: #4a4a4a;
	--g4: #bdbdbd;
	--g5: #ffffff;
	--g6: #ffffff;
	--panel: #000;
	--panel2: #121212;
	--border: #333;
	--chrome-hi: #2c2c2c;
	--text: #d6d6d6;
	--dim: #8c8c8c;
	--glow: rgba(255, 255, 255, 0.3);
	--d50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath fill='%23777' d='M0 0h1v1H0zm1 1h1v1H1z'/%3E%3C/svg%3E");
}
.card.noir::before { background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.12), transparent 70%), linear-gradient(var(--panel2), var(--panel)); }
.card.noir:hover::before { border-color: #e6e6e6; background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.16), transparent 70%), linear-gradient(#1c1c1c, #000); }
.card.noir h3 { text-shadow: 0 0 10px rgba(255, 255, 255, 0.25); }
.card.noir .chips i { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }
.card.noir ::selection { background: #fff; color: #000; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips i {
	padding: 3px 9px;
	font: 500 11px/1.2 var(--modern);
	font-style: normal;
	color: var(--g6);
	background: rgba(92, 255, 134, 0.08);
	border: 1px solid rgba(92, 255, 134, 0.22);
	border-radius: 999px;
}

/* ---------- the random slot machine ---------- */

.slot { margin: 18px 0 20px; padding: 16px; }
.lcd {
	position: relative;
	padding: 10px 14px;
	font-size: 32px;
	line-height: 40px;
	white-space: nowrap;
	overflow: hidden;
	background: #010501;
	border: 2px solid #000;
	box-shadow: inset 0 0 0 1px var(--g2), inset 0 0 24px rgba(46, 184, 78, 0.15);
}
.lcd-ghost { position: absolute; left: 14px; top: 10px; color: rgba(92, 255, 134, 0.06); }
.lcd-text { position: relative; color: var(--g5); text-shadow: 0 0 10px rgba(92, 255, 134, 0.7); }
.lcd.flash .lcd-text { animation: lcdflash 0.12s steps(1) 5; }
@keyframes lcdflash { 50% { color: var(--g0); text-shadow: none; } }
.slot-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 14px; }
.slot .small { margin: 10px 0 0; }

/* ios style switch, because why not */
.switch { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1.2 var(--modern); color: var(--text); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: rgba(92, 255, 134, 0.1);
	border: 1px solid rgba(92, 255, 134, 0.25);
	transition: background 0.25s, border-color 0.25s;
}
.switch .knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(#e9fff0, #a8f5bb);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.switch input:checked + .track { background: var(--g4); border-color: var(--g5); }
.switch input:checked + .track .knob { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px dashed var(--g5); outline-offset: 2px; }

/* ---------- terminals ---------- */

.terminal {
	position: relative;
	margin: 12px 0;
	padding: 12px 16px;
	font-size: 16px;
	line-height: 24px;
	color: var(--g5);
	white-space: pre-wrap;
	background: #000;
	border: 2px solid var(--g2);
	box-shadow: inset 0 0 30px rgba(46, 184, 78, 0.12);
	overflow-x: auto;
	text-shadow: 0 0 6px rgba(92, 255, 134, 0.4);
}
.terminal .prompt { color: var(--g6); }
.terminal .dim { color: var(--g3); text-shadow: none; }
.cursor { display: inline-block; width: 10px; height: 18px; vertical-align: -3px; background: var(--g5); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--g5); box-shadow: 0 0 6px var(--g5); animation: pulse 2s ease-in-out infinite; }
.led.off { background: var(--g3); box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

#changelog { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 0 2ch; white-space: normal; }
.changelog .line { display: contents; }
.changelog .d { color: var(--g3); text-shadow: none; }
.changelog .r { color: var(--g6); }

/* ---------- live repos ---------- */

.repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 14px 0 6px; }
.repo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 112px;
	padding: 12px 14px;
	color: var(--text);
	text-decoration: none;
	background: radial-gradient(220px circle at var(--mx) var(--my), rgba(92, 255, 134, 0.12), transparent 70%), linear-gradient(180deg, rgba(92, 255, 134, 0.06), rgba(92, 255, 134, 0.015));
	border: 1px solid rgba(92, 255, 134, 0.16);
	border-radius: 12px;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.repo:hover { text-decoration: none; border-color: rgba(92, 255, 134, 0.5); transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(92, 255, 134, 0.35); }
.repo-name { display: flex; align-items: center; gap: 8px; font: 16px/24px var(--px); color: var(--g5); -webkit-font-smoothing: none; }
.repo-desc { flex: 1; font-size: 12px; color: var(--text); }
.repo-meta { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--modern); color: var(--dim); }
.repo-meta .lang::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--g4); }

.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--g1) 0%, var(--g2) 50%, var(--g1) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skel.t { height: 16px; width: 55%; }
.skel.l { height: 10px; width: 95%; }
.skel.l2 { height: 10px; width: 70%; }
.skel.m { height: 9px; width: 40%; margin-top: auto; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- bento ---------- */

#stack { margin-top: 26px; }
.bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(108px, auto);
	gap: 12px;
	margin-top: 14px;
	font-family: var(--modern);
}
.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 16px 18px;
	overflow: hidden;
	background: radial-gradient(260px circle at var(--mx) var(--my), rgba(92, 255, 134, 0.12), transparent 70%), radial-gradient(120% 120% at 100% 0%, rgba(92, 255, 134, 0.1), transparent 60%), rgba(4, 16, 7, 0.9);
	border: 1px solid rgba(92, 255, 134, 0.14);
	border-radius: 20px;
	box-shadow: inset 0 1px 0 rgba(200, 255, 212, 0.08);
}
.tile-big { grid-column: span 2; grid-row: span 2; }
.tile-wide { grid-column: span 2; }
.tile-k { position: relative; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: var(--g6); }
.tile-s { position: relative; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.tile-n {
	position: relative;
	font: 700 72px/0.9 var(--modern);
	letter-spacing: -0.05em;
	background: linear-gradient(180deg, var(--g6), var(--g4));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.tile:not(.tile-big) .tile-n { font-size: 40px; }
.tile-big .tile-n { font-size: 120px; margin-bottom: 4px; }
.tile-glow {
	position: absolute;
	right: -60px;
	top: -60px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--g5), transparent 65%);
	-webkit-mask: var(--d50-mask);
	mask: var(--d50-mask);
	opacity: 0.55;
	animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-40px, 30px) scale(1.15); } }
.tile-bar { position: relative; display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: rgba(92, 255, 134, 0.1); overflow: hidden; }
.tile-bar i { position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit; background: linear-gradient(90deg, var(--g3), var(--g5)); animation: load 3.2s ease-in-out infinite; }
@keyframes load { 0% { width: 8%; } 70% { width: 88%; } 100% { width: 8%; } }

/* ---------- friends ---------- */

.badge-list { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.badge-list a { display: block; line-height: 0; border: 1px solid var(--g2); box-shadow: 3px 3px 0 #000; transition: transform 0.1s; }
.badge-list a:hover { border-color: var(--g5); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000, 0 0 12px var(--glow); }
.badge-list img { width: 88px; height: 44px; }

/* ---------- sidebar widgets ---------- */

.widget {
	margin: 12px 12px 0;
	background: var(--panel);
	border: 1px solid var(--border);
	box-shadow: 3px 3px 0 #000;
}
.w-head {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 3px 8px;
	font-size: 16px;
	line-height: 22px;
	color: var(--g5);
	background: linear-gradient(var(--chrome-hi), var(--chrome-lo));
	border-bottom: 1px solid var(--border-hi);
	box-shadow: inset 0 1px 0 var(--gloss);
}
.live-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--g5); box-shadow: 0 0 6px var(--g5); animation: pulse 1.4s ease-in-out infinite; }
.w-body { padding: 10px; }
.stack { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.odometer { display: flex; justify-content: center; gap: 3px; margin: 6px 0; font-size: 24px; line-height: 30px; }
.odometer span {
	display: inline-block;
	width: 22px;
	color: var(--g5);
	text-align: center;
	background: linear-gradient(#000, var(--g1) 50%, #000);
	border: 1px solid var(--g2);
	text-shadow: 0 0 8px var(--glow);
}
.odometer span.roll { animation: roll 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes roll { from { transform: translateY(-60%); opacity: 0; } }

.ring { display: flex; justify-content: center; gap: 4px; margin: 2px 0 6px; font: 24px/1 var(--px); color: var(--g5); }
.ring span { animation: hop 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
.ring span:nth-child(1) { --i: 0; } .ring span:nth-child(2) { --i: 1; } .ring span:nth-child(3) { --i: 2; } .ring span:nth-child(4) { --i: 3; } .ring span:nth-child(5) { --i: 4; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); color: var(--g6); } }
.webring .w-body { font-family: var(--px); font-size: 16px; line-height: 24px; }
.webring .dim.small { font-family: var(--old); margin-bottom: 4px; }

/* the glassy chart card */
.glass-card {
	padding: 12px 12px 10px;
	font-family: var(--modern);
	background: linear-gradient(160deg, rgba(92, 255, 134, 0.14), rgba(92, 255, 134, 0.02));
	border: 1px solid rgba(92, 255, 134, 0.2);
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(200, 255, 212, 0.12), 0 8px 24px -10px rgba(0, 0, 0, 0.8);
}
.gc-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; color: var(--dim); }
.gc-chip { padding: 2px 7px; border-radius: 999px; font-size: 10.5px; color: var(--g0); background: var(--g5); }
.gc-num { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px; font-size: 28px; font-weight: 650; letter-spacing: -0.03em; color: var(--g6); font-variant-numeric: tabular-nums; }
.gc-num small { font-size: 11px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.spark { display: block; width: 100%; height: 40px; overflow: visible; }
.spark-line { fill: none; stroke: var(--g5); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(92, 255, 134, 0.6)); }
.spark-fill { fill: rgba(92, 255, 134, 0.12); }
.gc-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

.settings { display: grid; gap: 10px; }

.construction { margin: 16px 12px 0; text-align: center; }
.hazard {
	padding: 5px;
	background: repeating-linear-gradient(-45deg, var(--g5) 0 8px, var(--g0) 8px 16px);
	background-size: 200% 100%;
	animation: hazard 1.2s linear infinite;
	border: 1px solid var(--g3);
}
.hazard span { display: block; padding: 3px 0; font: 16px/20px var(--px); color: var(--g5); background: #000; -webkit-font-smoothing: none; }
@keyframes hazard { to { background-position: 22.6px 0; } }
.construction .small { margin-top: 6px; }

/* ---------- footer ---------- */

.site-foot {
	padding: 18px 16px 14px;
	text-align: center;
	background: var(--g0);
	border-top: 1px solid var(--border-hi);
}
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.b88 {
	display: inline-flex;
	align-items: center;
	width: 88px;
	height: 31px;
	font: 8px/1 var(--px);
	color: var(--g5);
	background: #000;
	border: 1px solid var(--g3);
	box-shadow: inset 1px 1px 0 var(--g2);
	-webkit-font-smoothing: none;
	overflow: hidden;
}
.b88 i { display: flex; align-items: center; align-self: stretch; padding: 0 4px; font-style: normal; color: var(--g0); background: var(--g5); }
.b88 b { flex: 1; font-weight: normal; text-align: center; }
.b88.inv { color: var(--g0); background: var(--g5); }
.b88.inv i { color: var(--g5); background: var(--g0); }
.site-foot p { margin: 12px 0 0; }

/* ---------- floating modern stuff ---------- */

.to-top {
	position: fixed;
	right: 28px;
	bottom: 86px;
	z-index: 50;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--g5);
	background: linear-gradient(var(--chrome-hi), var(--chrome-lo));
	border: 1px solid var(--g3);
	border-radius: 4px;
	box-shadow: 3px 3px 0 #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top .i { transform: rotate(-45deg); }

/* dynamic island */
.island {
	position: fixed;
	top: 12px;
	left: 50%;
	z-index: 9500;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 32px);
	padding: 9px 18px 9px 10px;
	font: 600 13px/1.2 var(--modern);
	color: var(--g6);
	background: #000;
	border-radius: 999px;
	box-shadow: 0 10px 40px -6px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(92, 255, 134, 0.18);
	transform: translate(-50%, -160%) scale(0.5, 0.7);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.2, 1.3, 0.35, 1), opacity 0.25s;
	pointer-events: none;
}
.island.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.island-ico { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--g5); color: var(--g0); }
.island-ico .i { width: 14px; height: 14px; }
.island.spin .island-ico .i { animation: spin 0.5s linear infinite; }
.island-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.island-txt code { font: 16px/1 var(--px); color: var(--g5); -webkit-font-smoothing: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* command palette */
.kbar-scrim {
	position: fixed;
	inset: 0;
	z-index: 9600;
	padding: 12vh 16px 16px;
	background: rgba(0, 4, 1, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: fade 0.15s ease-out;
}
.kbar-scrim[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.kbar-panel {
	width: min(580px, 100%);
	margin: 0 auto;
	overflow: hidden;
	font-family: var(--modern);
	background: rgba(5, 18, 9, 0.88);
	border: 1px solid rgba(92, 255, 134, 0.2);
	border-radius: 16px;
	box-shadow: 0 30px 90px -10px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(200, 255, 212, 0.08);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	animation: pop 0.22s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes pop { from { transform: scale(0.96) translateY(-6px); opacity: 0; } }
.kbar-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(92, 255, 134, 0.12); color: var(--dim); }
.kbar-input input { flex: 1; min-width: 0; font: 400 16px/1.4 var(--modern); color: var(--g6); background: none; border: 0; outline: none; }
.kbar-input input::placeholder { color: var(--dim); }
.kbar-list { list-style: none; margin: 0; padding: 6px; max-height: min(50vh, 380px); overflow-y: auto; }
.kbar-list .grp { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.kbar-list [role="option"] { display: flex; align-items: center; gap: 12px; padding: 9px 10px; font-size: 14px; color: var(--text); border-radius: 10px; }
.kbar-list [role="option"] .i { color: var(--dim); }
.kbar-list [role="option"] .hint { margin-left: auto; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.kbar-list [role="option"][aria-selected="true"] { color: var(--g6); background: rgba(92, 255, 134, 0.12); }
.kbar-list [role="option"][aria-selected="true"] .i { color: var(--g5); }
.kbar-list .empty { padding: 18px 10px; text-align: center; color: var(--dim); font-size: 13px; }
.kbar-foot { display: flex; align-items: center; gap: 14px; padding: 8px 14px; font-size: 11.5px; color: var(--dim); border-top: 1px solid rgba(92, 255, 134, 0.12); }
.kbar-foot kbd { margin-right: 2px; padding: 2px 4px; }

/* cursor sparkles */
.spark-px { position: fixed; z-index: 9400; width: 4px; height: 4px; background: var(--g5); box-shadow: 0 0 6px var(--g5); pointer-events: none; animation: sparkfall 0.8s ease-in forwards; }
@keyframes sparkfall { to { transform: translate(var(--dx), 26px); opacity: 0; } }

/* ---------- crt ---------- */

body.crt::before, body.crt::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
body.crt::before {
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
	animation: flicker 6s steps(1) infinite;
}
body.crt::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55)); }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: 0.85; } 48% { opacity: 1; } 91% { opacity: 0.9; } }

/* =========================================================
   2026 stuff, embedded
   ========================================================= */

[data-spot] { --mx: -999px; --my: -999px; }
body.modal-open { overflow: hidden; }

/* reading progress */
.progress { position: fixed; inset: 0 0 auto; z-index: 8995; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--g3), var(--g5), var(--g6)); box-shadow: 0 0 10px var(--g5); }

/* availability pill + share */
.avail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 1px 9px 1px 7px;
	font: 500 11px/1.5 var(--modern);
	color: var(--g6);
	white-space: nowrap;
	background: rgba(92, 255, 134, 0.1);
	border: 1px solid rgba(92, 255, 134, 0.3);
	border-radius: 999px;
}
.avail i { width: 7px; height: 7px; border-radius: 50%; background: var(--g5); animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(92, 255, 134, 0.7); } 80%, 100% { box-shadow: 0 0 0 6px rgba(92, 255, 134, 0); } }
.share {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 1px 8px;
	font: 500 11px/1.5 var(--modern);
	color: var(--g6);
	background: rgba(92, 255, 134, 0.04);
	border: 1px solid rgba(92, 255, 134, 0.25);
	border-radius: 6px;
}
.share:hover { background: rgba(92, 255, 134, 0.12); }
.share .i { width: 11px; height: 11px; vertical-align: 0; }

/* tooltips */
.tip {
	position: fixed;
	z-index: 8990;
	padding: 5px 9px;
	font: 500 11.5px/1.3 var(--modern);
	color: var(--g6);
	white-space: nowrap;
	background: rgba(2, 10, 3, 0.94);
	border: 1px solid rgba(92, 255, 134, 0.25);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
	transform: translate(-50%, calc(-100% - 8px));
	opacity: 0;
	transition: opacity 0.12s;
	pointer-events: none;
}
.tip.show { opacity: 1; }

/* the "summarize with ai" button */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tldr { margin: 4px 0 8px; }
.ai-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 12px;
	font: 600 13px/1 var(--modern);
	color: var(--g6);
	background:
		linear-gradient(#051308, #051308) padding-box,
		conic-gradient(from var(--ang), var(--g2), var(--g6), var(--g4), var(--g2), var(--g5), var(--g2)) border-box;
	border: 1.5px solid transparent;
	border-radius: 999px;
	box-shadow: 0 0 24px -8px rgba(92, 255, 134, 0.6);
	animation: spinborder 3s linear infinite;
	transition: box-shadow 0.2s, transform 0.1s;
}
.ai-btn:hover { box-shadow: 0 0 30px -4px rgba(92, 255, 134, 0.7); }
.ai-btn:active { transform: scale(0.97); }
.ai-btn .i { color: var(--g5); }
.ai-btn.busy span { color: transparent; background: linear-gradient(90deg, var(--dim), var(--g6), var(--dim)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 1.2s linear infinite; }
@keyframes spinborder { to { --ang: 360deg; } }

.ai-card {
	margin: 12px 0 4px;
	padding: 14px 16px 8px;
	font-family: var(--modern);
	background: linear-gradient(160deg, rgba(92, 255, 134, 0.1), rgba(92, 255, 134, 0.015));
	border: 1px solid rgba(92, 255, 134, 0.2);
	border-radius: 16px;
	animation: pop 0.3s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.ai-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--g6); }
.ai-head .i { color: var(--g5); }
.ai-model { margin-left: auto; padding: 2px 8px; font-size: 10.5px; color: var(--dim); border: 1px solid rgba(92, 255, 134, 0.2); border-radius: 999px; }
.ai-body { min-height: 3.2em; margin: 10px 0 8px; font-size: 14px; line-height: 1.6; color: var(--text); }
.ai-body .skel { margin: 7px 0; }
.ai-body .caret { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: var(--g5); box-shadow: 0 0 8px var(--g5); vertical-align: middle; animation: pulse 0.8s infinite; }
.ai-foot { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--dim); }
.ai-fb { display: grid; place-items: center; width: 28px; height: 28px; color: var(--dim); background: none; border: 0; border-radius: 8px; }
.ai-fb .i { width: 15px; height: 15px; }
.ai-fb:hover { color: var(--g6); background: rgba(92, 255, 134, 0.1); }
.ai-fb[aria-pressed="true"] { color: var(--g5); background: rgba(92, 255, 134, 0.14); }
.ai-fb.flip .i { transform: rotate(180deg); }

/* github heatmap */
.heat {
	margin: 14px 0;
	padding: 14px 16px 12px;
	font-family: var(--modern);
	background: radial-gradient(260px circle at var(--mx) var(--my), rgba(92, 255, 134, 0.1), transparent 70%), linear-gradient(180deg, rgba(92, 255, 134, 0.06), rgba(92, 255, 134, 0.015));
	border: 1px solid rgba(92, 255, 134, 0.16);
	border-radius: 14px;
}
.heat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.heat-title { font-size: 14px; font-weight: 650; color: var(--g6); }
.heat-sub { font-size: 12px; color: var(--dim); }
.heat-body { margin: 12px 0 10px; }
.heat-scroll { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.heat-months, .heat-grid { display: grid; grid-auto-columns: 10px; grid-auto-flow: column; column-gap: 3px; width: max-content; }
.heat-months { height: 16px; font-size: 10px; color: var(--dim); }
.heat-months span { white-space: nowrap; }
.heat-grid { grid-template-rows: repeat(7, 10px); row-gap: 3px; min-height: 88px; }
.heat-grid i, .heat-legend i { display: block; width: 10px; height: 10px; border-radius: 2px; }
.heat-grid i.fut { visibility: hidden; }
.l0 { background: rgba(92, 255, 134, 0.05); box-shadow: inset 0 0 0 1px rgba(92, 255, 134, 0.06); }
.l1 { background: var(--g1) var(--d25); box-shadow: inset 0 0 0 1px rgba(92, 255, 134, 0.12); }
.l2 { background: var(--g1) var(--d50); }
.l3 { background: var(--g3) var(--d50-hi); }
.l4 { background: var(--g5); box-shadow: 0 0 8px rgba(92, 255, 134, 0.5); }
.heat-grid i:hover { outline: 1px solid var(--g6); outline-offset: 1px; }
.heat-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 10px 32px; margin: 14px 0 0; }
.heat-stats dt { font-size: 11px; color: var(--dim); }
.heat-stats dd { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; color: var(--g6); font-variant-numeric: tabular-nums; }
.heat-legend { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); }
.heat-legend i { width: 11px; height: 11px; border-radius: 2px; }
.heat-legend span { margin: 0 4px; }

/* now playing */
.np {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	grid-template-areas: "art meta eq" "bar bar bar" "times times times" "ctl ctl ctl";
	align-items: center;
	gap: 8px 10px;
	padding: 12px;
	font-family: var(--modern);
	background: radial-gradient(200px circle at var(--mx) var(--my), rgba(92, 255, 134, 0.12), transparent 70%), linear-gradient(160deg, rgba(92, 255, 134, 0.12), rgba(92, 255, 134, 0.02));
	border: 1px solid rgba(92, 255, 134, 0.2);
	border-radius: 14px;
}
.np-art { grid-area: art; width: 56px; height: 56px; border-radius: 10px; image-rendering: pixelated; background: var(--g1); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.9); }
.np-meta { grid-area: meta; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-meta b { overflow: hidden; font-size: 13px; font-weight: 650; color: var(--g6); text-overflow: ellipsis; white-space: nowrap; }
.np-meta span { font-size: 11px; color: var(--dim); }
.np-eq { grid-area: eq; display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.np-eq i { width: 3px; height: 3px; background: var(--g5); border-radius: 1px; }
.np-bar { grid-area: bar; height: 4px; overflow: hidden; background: rgba(92, 255, 134, 0.14); border-radius: 999px; }
.np-bar i { display: block; width: 0; height: 100%; background: var(--g5); border-radius: inherit; }
.np-times { grid-area: times; display: flex; justify-content: space-between; margin-top: -4px; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.np-ctl { grid-area: ctl; display: flex; justify-content: center; align-items: center; gap: 14px; }
.np-btn { display: grid; place-items: center; width: 32px; height: 32px; color: var(--g6); background: none; border: 0; border-radius: 50%; }
.np-btn:hover { background: rgba(92, 255, 134, 0.1); }
.np-btn.np-play { width: 40px; height: 40px; color: var(--g0); background: var(--g6); box-shadow: 0 4px 14px -4px rgba(92, 255, 134, 0.7); }
.np-btn.np-play:hover { background: #fff; }
.np-note { margin: 8px 0 0; }

/* lach-gpt */
.chat-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	color: var(--g0);
	background: radial-gradient(circle at 30% 25%, var(--g6), var(--g5) 45%, var(--g4));
	border: 0;
	border-radius: 50%;
	box-shadow: 0 10px 30px -6px rgba(92, 255, 134, 0.55), inset 0 0 0 1px rgba(200, 255, 212, 0.4);
	transition: transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.chat-fab:hover { transform: scale(1.07); }
.chat-fab .ico-open { width: 26px; height: 26px; }
.chat-fab .ico-close { display: none; width: 18px; height: 18px; }
.chat-fab[aria-expanded="true"] .ico-open { display: none; }
.chat-fab[aria-expanded="true"] .ico-close { display: block; }
.chat-dot { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; background: var(--g6); border: 2px solid var(--g0); border-radius: 50%; animation: ping 1.6s ease-out infinite; }
.chat-fab.seen .chat-dot { display: none; }
.chat {
	position: fixed;
	right: 18px;
	bottom: 86px;
	z-index: 61;
	display: flex;
	flex-direction: column;
	width: min(360px, calc(100vw - 24px));
	height: min(500px, calc(100vh - 120px));
	overflow: hidden;
	font-family: var(--modern);
	background: rgba(4, 14, 7, 0.9);
	border: 1px solid rgba(92, 255, 134, 0.2);
	border-radius: 20px;
	box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	transform-origin: 100% 100%;
	animation: chatin 0.28s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.chat[hidden] { display: none; }
@keyframes chatin { from { opacity: 0; transform: scale(0.9) translateY(10px); } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid rgba(92, 255, 134, 0.12); }
.chat-av { display: grid; place-items: center; width: 34px; height: 34px; flex: none; font: 16px/1 var(--px); color: var(--g0); background: conic-gradient(var(--g6), var(--g4), var(--g6)); border-radius: 50%; -webkit-font-smoothing: none; }
.chat-who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.chat-who b { font-size: 14px; color: var(--g6); }
.chat-who small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.chat-who small i { width: 7px; height: 7px; background: var(--g5); border-radius: 50%; box-shadow: 0 0 6px var(--g5); }
.chat-x { display: grid; place-items: center; width: 32px; height: 32px; color: var(--dim); background: none; border: 0; border-radius: 50%; }
.chat-x:hover { color: var(--g6); background: rgba(92, 255, 134, 0.1); }
.chat-log { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px; overflow-y: auto; scrollbar-width: thin; }
.msg { max-width: 86%; padding: 9px 13px; font-size: 13.5px; line-height: 1.45; border-radius: 18px; overflow-wrap: anywhere; animation: msgin 0.25s ease-out; }
@keyframes msgin { from { opacity: 0; transform: translateY(6px); } }
.msg.bot { align-self: flex-start; color: var(--text); background: rgba(92, 255, 134, 0.08); border: 1px solid rgba(92, 255, 134, 0.12); border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; font-weight: 500; color: var(--g0); background: var(--g5); border-bottom-right-radius: 6px; }
.msg.typing { display: flex; gap: 4px; padding: 13px 14px; }
.msg.typing i { width: 7px; height: 7px; background: var(--dim); border-radius: 50%; animation: typing 1s ease-in-out infinite; }
.msg.typing i:nth-child(2) { animation-delay: 0.15s; }
.msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-acts button { padding: 5px 10px; font: 600 12px/1.2 var(--modern); color: var(--g6); background: rgba(92, 255, 134, 0.1); border: 1px solid rgba(92, 255, 134, 0.25); border-radius: 999px; }
.msg-acts button:hover { background: rgba(92, 255, 134, 0.2); }
.chat-chips { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chips button { flex: none; padding: 6px 11px; font: 500 12px/1 var(--modern); color: var(--text); white-space: nowrap; background: none; border: 1px solid rgba(92, 255, 134, 0.22); border-radius: 999px; }
.chat-chips button:hover { color: var(--g6); border-color: var(--g5); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid rgba(92, 255, 134, 0.12); }
.chat-form input { flex: 1; min-width: 0; padding: 10px 14px; font: 14px/1.2 var(--modern); color: var(--g6); background: rgba(92, 255, 134, 0.06); border: 1px solid rgba(92, 255, 134, 0.18); border-radius: 999px; outline: none; }
.chat-form input::placeholder { color: var(--dim); }
.chat-form input:focus { border-color: var(--g4); box-shadow: 0 0 0 3px rgba(92, 255, 134, 0.12); }
.chat-form button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--g0); background: var(--g5); border: 0; border-radius: 50%; }
.chat-form button:hover { background: var(--g6); }

/* the privacy notice nobody asked for */
.cookie {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 55;
	width: min(340px, calc(100vw - 110px));
	padding: 14px 16px;
	font-family: var(--modern);
	background: rgba(4, 14, 7, 0.93);
	border: 1px solid rgba(92, 255, 134, 0.2);
	border-radius: 16px;
	box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	opacity: 0;
	transform: translateY(20px);
	transition: transform 0.45s cubic-bezier(0.2, 1.2, 0.4, 1), opacity 0.3s;
}
.cookie.show { opacity: 1; transform: none; }
.cookie[hidden] { display: none; }
.cookie-top { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--g6); }
.cookie-top .i { color: var(--g5); }
.cookie p { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.cookie-btns { display: flex; gap: 8px; }
.cookie-btns button { flex: 1; padding: 8px 10px; font: 600 12.5px/1.1 var(--modern); color: var(--g0); background: var(--g6); border: 0; border-radius: 10px; }
.cookie-btns button:hover { background: #fff; }
.cookie-btns .alt { color: var(--g6); background: rgba(92, 255, 134, 0.1); border: 1px solid rgba(92, 255, 134, 0.3); }
.cookie-btns .alt:hover { background: rgba(92, 255, 134, 0.2); }

/* lachdle */
.dle {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 22px 30px;
	margin-top: 14px;
	padding: 18px;
	font-family: var(--modern);
	background: linear-gradient(180deg, rgba(92, 255, 134, 0.06), rgba(92, 255, 134, 0.015));
	border: 1px solid rgba(92, 255, 134, 0.16);
	border-radius: 16px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.dle:focus-within { border-color: rgba(92, 255, 134, 0.45); box-shadow: 0 0 0 4px rgba(92, 255, 134, 0.08); }
.dle-board { display: grid; gap: 6px; }
.dle-row { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; }
.dle-row.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.dle-tile {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font: 24px/1 var(--px);
	color: var(--g6);
	text-transform: uppercase;
	background: #010501;
	border: 2px solid var(--g2);
	border-radius: 6px;
	-webkit-font-smoothing: none;
}
.dle-tile.filled { border-color: var(--g4); animation: tilepop 0.12s ease-out; }
@keyframes tilepop { 50% { transform: scale(1.1); } }
.dle-tile.flip { animation: tileflip 0.5s ease-in-out both; animation-delay: calc(var(--i) * 0.12s); }
@keyframes tileflip { 50% { transform: rotateX(90deg); } }
.dle-tile.absent { color: var(--dim); background: var(--g1); border-color: var(--g1); }
.dle-tile.present { color: var(--g6); background: var(--g3) var(--d25); border-color: var(--g3); }
.dle-tile.correct { color: var(--g0); background: var(--g5); border-color: var(--g5); box-shadow: 0 0 12px rgba(92, 255, 134, 0.45); }
.dle-row.win .dle-tile { animation: tilehop 0.5s ease both; animation-delay: calc(var(--i) * 0.08s); }
@keyframes tilehop { 40% { transform: translateY(-12px); } }
.dle-side { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: min(300px, 100%); }
.dle-head { display: flex; align-items: center; gap: 10px; }
.dle-head b { font-size: 14px; font-weight: 650; color: var(--g6); }
.dle-streak { padding: 2px 8px; font-size: 11px; color: var(--g6); background: rgba(92, 255, 134, 0.1); border-radius: 999px; }
.dle-streak:empty { display: none; }
.dle-status { min-height: 1.5em; margin: 0; font-size: 13px; color: var(--text); }
.dle-keys { display: flex; flex-direction: column; gap: 6px; }
.dle-krow { display: flex; justify-content: center; gap: 5px; }
.dle-key {
	flex: 1;
	min-width: 0;
	max-width: 34px;
	height: 42px;
	padding: 0;
	font: 600 13px/1 var(--modern);
	color: var(--g6);
	background: rgba(92, 255, 134, 0.08);
	border: 1px solid rgba(92, 255, 134, 0.18);
	border-radius: 8px;
	transition: background 0.15s, transform 0.08s;
}
.dle-key:hover { background: rgba(92, 255, 134, 0.16); }
.dle-key:active { transform: scale(0.94); }
.dle-key.wide { max-width: 58px; flex: 1.6; font-size: 11px; }
.dle-key.absent { color: var(--dim); background: transparent; border-color: rgba(92, 255, 134, 0.08); }
.dle-key.present { background: var(--g3) var(--d25); border-color: var(--g3); }
.dle-key.correct { color: var(--g0); background: var(--g5); border-color: var(--g5); }
.dle-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 32px; }
.dle-share { padding: 8px 14px; font: 600 12.5px/1 var(--modern); color: var(--g0); background: var(--g6); border: 0; border-radius: 999px; }
.dle-share:hover { background: #fff; }
.dle-next { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* visitor pass */
.pass {
	position: relative;
	aspect-ratio: 1.586;
	display: flex;
	flex-direction: column;
	padding: 12px 14px 10px;
	overflow: hidden;
	font-family: var(--modern);
	background: radial-gradient(120% 90% at 100% 0%, rgba(92, 255, 134, 0.22), transparent 60%), linear-gradient(135deg, var(--g2), var(--g0) 70%);
	border: 1px solid rgba(200, 255, 212, 0.28);
	border-radius: 14px;
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(200, 255, 212, 0.18);
	transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.15s ease-out;
}
.pass::before { content: ""; position: absolute; inset: 0; background: var(--d25); opacity: 0.8; pointer-events: none; }
.pass > * { position: relative; }
.pass-top { display: flex; justify-content: space-between; align-items: center; }
.pass-brand { font: 16px/1 var(--px); color: var(--g5); text-shadow: 0 0 8px var(--glow); -webkit-font-smoothing: none; }
.pass-chip { padding: 2px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--g0); background: var(--g6); border-radius: 999px; }
.pass-mid { display: flex; flex: 1; align-items: center; gap: 12px; }
.pass-av { flex: none; width: 52px; height: 52px; padding: 2px; background: #000; border: 1px solid var(--g3); border-radius: 10px; }
.pass-av canvas { display: block; width: 100%; height: 100%; border-radius: 7px; image-rendering: pixelated; }
.pass-av:hover { border-color: var(--g5); }
.pass-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pass-info b { font: 16px/1.3 var(--px); color: var(--g6); -webkit-font-smoothing: none; white-space: nowrap; }
.pass-info span { font-size: 11px; color: var(--dim); white-space: nowrap; }
.pass-code { display: flex; align-items: stretch; gap: 1px; height: 18px; opacity: 0.85; }
.pass-code i { background: var(--g5); }
.pass-holo {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(200, 255, 212, 0.38), transparent 45%),
		repeating-linear-gradient(115deg, transparent 0 10px, rgba(92, 255, 134, 0.07) 10px 20px);
	mix-blend-mode: screen;
	pointer-events: none;
}
.pass-btns { margin-top: 12px; }
.pass-btns + .small { margin: 8px 0 0; }

/* speed insights */
.tile-full { grid-column: 1 / -1; }
.speed { justify-content: flex-start; gap: 10px; }
.gauges { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.gauge { position: relative; display: grid; justify-items: center; gap: 4px; width: 76px; }
.gauge svg { width: 68px; height: 68px; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 3; }
.g-track { stroke: rgba(92, 255, 134, 0.12); }
.g-val { stroke: var(--g5); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); filter: drop-shadow(0 0 3px rgba(92, 255, 134, 0.6)); }
.gauge.meh .g-val { stroke: var(--g4); }
.gauge.bad .g-val { stroke: var(--g3); }
.gauge b { position: absolute; top: 22px; left: 0; right: 0; font-size: 14px; font-weight: 650; text-align: center; color: var(--g6); font-variant-numeric: tabular-nums; }
.gauge span { font-size: 11px; font-weight: 600; color: var(--dim); }
.g-meta { display: grid; gap: 8px; margin: 0 0 0 auto; }
.g-meta dt { font-size: 11px; color: var(--dim); }
.g-meta dd { margin: 0; font-size: 18px; font-weight: 650; color: var(--g6); font-variant-numeric: tabular-nums; }

/* end card + kudos */
.endcard {
	margin: 34px 0 6px;
	padding: 18px 20px;
	font-family: var(--modern);
	text-align: center;
	background: radial-gradient(80% 120% at 50% 0%, rgba(92, 255, 134, 0.1), transparent 70%);
	border: 1px dashed rgba(92, 255, 134, 0.25);
	border-radius: 16px;
}
.end-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.end-chips span { padding: 3px 10px; font-size: 11.5px; color: var(--dim); border: 1px solid rgba(92, 255, 134, 0.2); border-radius: 999px; }
.end-chips b { font-weight: 600; color: var(--g6); }
.endcard p { margin: 12px 0 14px; font-size: 14px; color: var(--text); }
.kudos-row { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kudos {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 16px;
	font: 650 16px/1 var(--modern);
	color: var(--g6);
	font-variant-numeric: tabular-nums;
	background: rgba(92, 255, 134, 0.08);
	border: 1px solid rgba(92, 255, 134, 0.3);
	border-radius: 999px;
	transition: transform 0.12s cubic-bezier(0.3, 1.8, 0.5, 1), background 0.2s;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
.kudos .i { width: 20px; height: 20px; color: var(--g5); }
.kudos:hover { background: rgba(92, 255, 134, 0.14); }
.kudos.bump { transform: scale(1.1); }
.kudos.maxed { color: var(--g0); background: var(--g5); }
.kudos.maxed .i { color: var(--g0); }
.kudos-plus { position: absolute; left: 50%; top: -6px; padding: 3px 8px; font: 650 12px/1 var(--modern); color: var(--g0); background: var(--g6); border-radius: 999px; pointer-events: none; animation: plusup 0.7s ease-out forwards; }
@keyframes plusup { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -30px); } }
.kudos-bit { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; background: var(--g5); pointer-events: none; animation: burstout 0.55s ease-out forwards; }
@keyframes burstout { to { transform: translate(var(--bx), var(--by)) scale(0.4); opacity: 0; } }

/* shortcuts sheet */
.keys-panel { width: min(440px, 100%); padding-bottom: 8px; }
.keys-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 16px; font-size: 14px; color: var(--g6); border-bottom: 1px solid rgba(92, 255, 134, 0.12); }
.keys-head .i { color: var(--g5); }
.keys-list { margin: 0; padding: 6px 16px; }
.keys-list div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(92, 255, 134, 0.07); }
.keys-list div:last-child { border-bottom: 0; }
.keys-list dt { display: flex; gap: 4px; }
.keys-list dd { margin: 0; font-size: 13px; color: var(--text); text-align: right; }
.site-foot kbd { padding: 1px 5px; }

/* the crt switch wipes in from where you clicked */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: crtwipe 0.55s ease-out; }
@keyframes crtwipe { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); } }

/* scroll-driven reveals, where the browser supports them */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.content h2, .repo, .tile, .heat, .fact, .badge-list a, .dle, .endcard {
			animation: rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
		.card { animation: fadein linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
	}
}
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(0.98); } }
@keyframes fadein { from { opacity: 0; } }

/* ---------- small screens ---------- */

@media (max-width: 900px) {
	.cols { grid-template-columns: 1fr; }
	.sidebar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; border-left: 0; border-top: 1px solid var(--border-hi); padding: 0 0 16px; }
	.construction { margin-top: 12px; }
	.lcd { font-size: 24px; line-height: 32px; }
}

@media (max-width: 640px) {
	.site { margin: 0; border-left: 0; border-right: 0; }
	.site::after { display: none; }
	.topstrip .dim { display: none; }
	#hero { height: 160px; }
	.button.huge { font-size: 24px; line-height: 30px; padding: 10px 14px; white-space: nowrap; }
	.button.big { font-size: 16px; line-height: 24px; }
	.content { padding: 16px 16px 24px; }
	h2 { font-size: 24px; line-height: 32px; }
	.intro h2 { font-size: 32px; line-height: 40px; }
	.facts { grid-template-columns: repeat(2, 1fr); }
	.lcd { font-size: 16px; line-height: 24px; padding: 8px 10px; }
	.lcd-ghost { left: 10px; top: 8px; }
	.terminal { padding: 10px 12px; }
	#changelog { grid-template-columns: max-content minmax(0, 1fr); gap: 0 1ch; }
	#changelog .t { grid-column: 1 / -1; padding-left: 2ch; margin-bottom: 6px; }
	.bento { grid-template-columns: 1fr 1fr; }
	.tile-big { grid-column: span 2; grid-row: span 1; }
	.tile-big .tile-n { font-size: 80px; }
	.kbar span { display: none; }
	.kbar { padding-left: 6px; }
	.sidebar { grid-template-columns: 1fr; }
	.chat { left: 8px; right: 8px; bottom: 76px; width: auto; height: min(72vh, 520px); }
	.chat-fab { right: 12px; bottom: 12px; }
	.to-top { right: 22px; bottom: 78px; }
	.cookie { left: 10px; right: 80px; bottom: 10px; width: auto; }
	.heat { padding: 12px; }
	.heat-stats { grid-template-columns: repeat(2, auto); }
	.dle { padding: 14px; justify-content: center; }
	.g-meta { margin-left: 0; grid-template-columns: repeat(2, auto); gap: 8px 26px; }
}

@media (max-width: 480px) {
	.avail { display: none; }
}

@media (max-width: 400px) {
	.button.huge .i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	html { scroll-behavior: auto; }
	.ticker-track { animation: none; }
}