kepr.css

1/* Kepr 3: Kepr 2's look (kepr.uk, gold theme), ported only as far as the pages that exist use it. */23:root {4	--bg: #090706;5	--bg-surface: #0e0c09;6	--bg-elevated: #1b1710;7	--border: #2a2018;8	--text: #c8b898;9	--text-secondary: #7a6a50;10	--text-muted: #7a6a50;11	--text-faint: #4a3a28;12	--text-heading: #e8d8b8;13	--accent: #c89a5a;14	--accent-bright: #d9b88c;15	--accent-dim: #85663c;16	--accent-flash: #5a88c8;17	--red-flash: #c8483a;18	--accent-tint-04: rgba(200, 154, 90, 0.04);19	--accent-tint-12: rgba(200, 154, 90, 0.12);20	--sage: #7a9a68;21	--sans: "Quicksand", system-ui, sans-serif;22	--mono: "Martian Mono", ui-monospace, monospace;23}2425* {26	box-sizing: border-box;27	scrollbar-width: thin;28	scrollbar-color: var(--border) transparent;29}3031html,32body {33	margin: 0;34	padding: 0;35	background: var(--bg);36	color: var(--text);37	font-family: var(--sans);38	font-size: 16px;39	line-height: 1.6;40	overflow-x: hidden;41}4243a {44	color: inherit;45	text-decoration: none;46}47a:hover {48	text-decoration: underline;49	text-decoration-color: var(--accent);50	text-decoration-thickness: 1px;51	text-underline-offset: 4px;52}5354/* ----- top bar ------------------------------------------------------------ */5556body > nav {57	display: flex;58	align-items: center;59	padding: 24px 48px;60	font-size: 0.6875rem;61	letter-spacing: 0.04em;62}63.wordmark {64	display: flex;65	color: var(--accent);66}67.wordmark:hover {68	text-decoration: none;69}70.wordmark-icon {71	display: block;72	width: 32px;73	height: 32px;74	color: var(--accent);75}76.wordmark-icon polygon {77	fill: none;78	stroke: currentColor;79	stroke-linejoin: round;80}81.tri-outer polygon {82	stroke-width: 2;83}84.tri-inner polygon {85	stroke-width: 1.5;86}87.tri-outer,88.tri-inner {89	transform-origin: 16px 16px;90}91/* The outer triangle stays gold; the inner one flashes red now and then. */92.tri-outer {93	animation: tri-ccw 12s linear infinite;94}95.tri-inner {96	animation:97		tri-cw 8s linear infinite,98		red-flash 11s ease-in-out infinite;99}100@keyframes tri-ccw {101	to {102		transform: rotate(-360deg);103	}104}105@keyframes tri-cw {106	to {107		transform: rotate(360deg);108	}109}110@keyframes red-flash {111	0%,112	90%,113	100% {114		color: var(--accent);115	}116	95% {117		color: var(--red-flash);118	}119}120.wordmark-by {121	margin-left: 10px;122	font-size: 0.625rem;123	color: var(--text-faint);124	letter-spacing: 0.03em;125}126.nav-links {127	margin-left: auto;128	display: inline-flex;129	gap: 28px;130	font-family: var(--mono);131}132.nav-links a {133	color: var(--text-secondary);134}135.nav-logout {136	margin: 0;137}138.nav-toggle {139	display: none;140}141.nav-logout button {142	border: 0;143	padding: 0;144	background: none;145	color: var(--text-secondary);146	font: inherit;147	letter-spacing: inherit;148	cursor: pointer;149}150.nav-logout button:hover {151	text-decoration: underline;152	text-decoration-color: var(--accent);153}154155main {156	max-width: 980px;157	margin: 0 auto;158	padding: 24px 48px 120px;159}160161footer {162	text-align: center;163	padding: 80px 24px 48px;164}165footer .credit {166	font-family: var(--mono);167	font-size: 0.6875rem;168	color: var(--text-muted);169}170171.mono {172	font-family: var(--mono);173	font-size: 0.8125rem;174	color: var(--text-secondary);175}176.muted {177	color: var(--text-muted);178}179180@keyframes fadeUp {181	from {182		opacity: 0;183		transform: translateY(6px);184	}185	to {186		opacity: 1;187		transform: translateY(0);188	}189}190@keyframes fadeIn {191	from {192		opacity: 0;193	}194}195196/* ----- repo header -------------------------------------------------------- */197198.repo-head {199	margin: 20px 0 24px;200}201.repo-name {202	font-family: "Comfortaa", var(--sans);203	font-weight: 700;204	font-size: 4rem;205	line-height: 1.05;206	margin: -0.1em 0 10px;207	color: var(--text);208	overflow-wrap: anywhere;209	animation: fadeUp 280ms ease both;210}211.repo-contributor {212	margin: 4px 0 0;213	font-size: 0.8125rem;214	animation: fadeUp 280ms 40ms ease both;215}216.repo-contributor a:hover {217	color: var(--accent);218}219.repo-desc,220.repo-homepage {221	margin: 0 0 10px;222	font-size: 1.0625rem;223	color: var(--text-secondary);224	line-height: 1.75;225	animation: fadeUp 280ms 30ms ease both;226}227.repo-desc p {228	margin: 12px 0 0;229}230.repo-desc a,231.repo-homepage a {232	color: var(--accent);233}234.repo-desc code {235	font-family: var(--mono);236	font-size: 0.85em;237	color: var(--accent);238}239.lang-badges {240	display: flex;241	flex-wrap: wrap;242	gap: 6px;243	margin: 8px 0 6px;244}245.lang-badge {246	font-family: var(--mono);247	font-size: 0.6875rem;248	color: var(--accent-dim);249	background: var(--bg-surface);250	border: 1px solid var(--border);251	border-radius: 3px;252	padding: 1px 7px;253	letter-spacing: 0.02em;254}255.repo-meta {256	margin: 0;257	font-size: 0.875rem;258	color: var(--text-muted);259	line-height: 1.7;260	animation: fadeUp 280ms 60ms ease both;261}262.repo-tabbar {263	display: flex;264	align-items: center;265	justify-content: space-between;266	flex-wrap: wrap;267	gap: 14px 20px;268	margin-top: 22px;269}270.repo-tabs {271	display: flex;272	gap: 24px;273	flex-wrap: wrap;274	font-family: var(--mono);275	animation: fadeUp 280ms 90ms ease both;276}277.repo-tab {278	font-size: 0.6875rem;279	color: var(--text-muted);280	padding: 0 0 11px;281	border-bottom: 1px solid transparent;282	transition:283		color 140ms,284		border-color 140ms;285}286.repo-tab:hover {287	color: var(--accent);288	text-decoration: none;289}290.repo-tab.active {291	color: var(--accent);292	border-bottom-color: var(--accent);293}294.repo-panel {295	padding: 10px 0 16px;296	animation: fadeIn 220ms ease both;297}298.repo-panel[hidden] {299	display: none;300}301/* Inline, archives and builds show about five entries and scroll; their own pages show all. */302.repo-panel .repo-section:has(> .archive-row, > .release-latest) {303	max-height: 420px;304	overflow-y: auto;305	scrollbar-width: thin;306	scrollbar-color: var(--border) transparent;307}308.repo-steal-btn {309	display: block;310	width: fit-content;311	max-width: 100%;312	font-family: var(--mono);313	font-size: 0.75rem;314	color: var(--text-muted);315	background: var(--bg-surface);316	border: 1px solid var(--border);317	border-radius: 3px;318	padding: 5px 11px;319	cursor: pointer;320	letter-spacing: 0.03em;321	white-space: nowrap;322	overflow: hidden;323	text-overflow: ellipsis;324	transition:325		color 120ms,326		border-color 120ms;327}328.repo-steal-btn:hover,329.repo-steal-btn.copied {330	color: var(--accent);331	border-color: var(--accent-dim);332}333.install-lines {334	display: flex;335	flex-direction: column;336	align-items: flex-end;337	gap: 6px;338	max-width: 100%;339	margin-left: auto;340	animation: fadeUp 280ms 120ms ease both;341}342.install-line {343	display: flex;344	align-items: center;345	gap: 12px;346	max-width: 100%;347	font-family: var(--mono);348	font-size: 0.75rem;349	color: var(--text-muted);350	background: var(--bg-surface);351	border: 1px solid var(--border);352	border-radius: 3px;353	padding: 5px 11px;354}355.install-line code {356	white-space: pre;357	overflow-x: auto;358	font-family: inherit;359}360.copy-btn {361	background: none;362	border: 0;363	padding: 0;364	cursor: pointer;365	font: inherit;366	font-size: 0.625rem;367	color: var(--text-faint);368	letter-spacing: 0.04em;369}370.copy-btn:hover,371.copy-btn.copied {372	color: var(--accent);373}374375/* ----- sections ----------------------------------------------------------- */376377.repo-section {378	margin: 36px 0 0;379	animation: fadeIn 320ms 80ms ease both;380}381.repo-section-toggle > summary,382.repo-details-toggle > summary {383	list-style: none;384	cursor: pointer;385	user-select: none;386}387.repo-section-toggle > summary::-webkit-details-marker,388.repo-details-toggle > summary::-webkit-details-marker {389	display: none;390}391.section-head {392	display: flex;393	align-items: baseline;394	gap: 12px;395	padding-bottom: 8px;396	border-bottom: 1px solid var(--border);397	margin-bottom: 4px;398}399.section-head::after,400.repo-details-head::after {401	content: "▸";402	font-size: 0.5625rem;403	opacity: 0.4;404	transition: transform 120ms;405}406.section-head::after {407	margin-left: auto;408}409details[open] > .section-head::after,410details[open] > .repo-details-head::after {411	transform: rotate(90deg);412}413.section-label {414	font-size: 0.6875rem;415	letter-spacing: 0.12em;416	color: var(--text-secondary);417	text-transform: uppercase;418}419.section-count {420	font-family: var(--mono);421	font-size: 0.6875rem;422	color: var(--accent);423}424425/* ----- timeline ----------------------------------------------------------- */426427.timeline {428	display: block;429	margin: 18px 0 4px;430	overflow: visible;431}432.timeline-line {433	stroke: var(--text-faint);434	stroke-width: 1;435	stroke-dasharray: 4 4;436}437.timeline .dot circle {438	fill: var(--accent);439	transition:440		fill-opacity 120ms,441		r 120ms;442}443.timeline .d0 circle {444	fill: var(--accent-dim);445	fill-opacity: 0.45;446}447.timeline .d1 circle {448	fill-opacity: 0.55;449}450.timeline .d2 circle {451	fill-opacity: 0.8;452}453.timeline .d3 circle {454	fill: var(--accent-bright);455	fill-opacity: 1;456}457.timeline .dot:hover circle,458.timeline .dot:focus circle {459	fill: var(--accent-bright);460	fill-opacity: 1;461}462.timeline-canvas {463	display: block;464	margin: 18px 0 4px;465	cursor: grab;466	touch-action: pan-y;467}468.timeline-tip {469	position: fixed;470	z-index: 200;471	max-width: 340px;472	padding: 0.45rem 0.7rem;473	background: #0f0c08;474	border: 1px solid var(--border);475	border-radius: 4px;476	pointer-events: none;477	line-height: 1.5;478}479.timeline-tip .tip-id {480	font-family: var(--mono);481	font-size: 12px;482	color: var(--accent);483}484.timeline-tip .tip-msg {485	margin-top: 3px;486	font-style: italic;487	font-size: 15px;488	color: var(--text-heading);489}490.timeline-tip .tip-meta {491	margin-top: 4px;492	font-family: var(--mono);493	font-size: 10px;494	color: var(--text-muted);495}496497/* ----- history ------------------------------------------------------------ */498499.history-row {500	position: relative;501	display: grid;502	grid-template-columns: 110px 1fr auto;503	align-items: baseline;504	gap: 0 10px;505	padding: 9px 8px;506	border-bottom: 1px solid var(--border);507	transition: background 100ms;508}509.history-row::before {510	content: "";511	position: absolute;512	left: 0;513	top: 0;514	bottom: 0;515	width: 2px;516	background: var(--accent);517	transform: scaleY(0);518	transition: transform 120ms ease;519}520.history-row:hover {521	background: var(--accent-tint-04);522	text-decoration: none;523}524.history-row:hover::before {525	transform: scaleY(1);526}527.history-id {528	font-family: var(--mono);529	font-size: 0.75rem;530	color: var(--text-secondary);531}532.history-msg {533	min-width: 0;534	line-height: 1.7;535	overflow: hidden;536	text-overflow: ellipsis;537	white-space: nowrap;538	transition: color 100ms;539}540.history-row:hover .history-msg {541	color: var(--accent);542}543.history-when {544	font-family: var(--mono);545	font-size: 0.6875rem;546	color: var(--text-muted);547	white-space: nowrap;548}549/* Kepr 2's history: four rows at a time, the rest a scroll away. */550.save-list {551	max-height: 180px;552	overflow-y: auto;553	scrollbar-width: thin;554	scrollbar-color: var(--border) transparent;555}556.pager {557	display: flex;558	justify-content: space-between;559	margin: 14px 0 0;560	font-size: 0.6875rem;561}562.pager a:last-child {563	margin-left: auto;564}565.pager a:hover {566	color: var(--accent);567}568569/* ----- atlas -------------------------------------------------------------- */570571.atlas-bar {572	display: flex;573	align-items: center;574	flex-wrap: wrap;575	gap: 8px 14px;576	margin: 10px 0 8px;577	font-size: 0.625rem;578}579.atlas-picker {580	position: relative;581}582/* Each section's fade-in makes it a stacking context, so the picker's popover would sit under the583   sections after it; the Atlas's section is lifted above them. */584#atlas {585	position: relative;586	z-index: 2;587}588.atlas-picker [hidden] {589	display: none;590}591.atlas-ref-tab {592	list-style: none;593	cursor: pointer;594	padding: 4px 8px;595	background: var(--bg);596	border: 1px solid rgba(200, 154, 90, 0.45);597	border-radius: 2px;598	font-size: 0.625rem;599	color: var(--accent);600}601.atlas-ref-tab::-webkit-details-marker {602	display: none;603}604.atlas-ref-tab:hover {605	color: var(--accent-dim);606}607.atlas-picker-popover {608	position: absolute;609	top: calc(100% + 6px);610	left: 0;611	z-index: 50;612	display: flex;613	flex-direction: column;614	width: min(420px, 90vw);615	max-height: 480px;616	background: var(--bg);617	border: 1px solid var(--text-faint);618	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);619}620.atlas-picker-filter {621	padding: 8px 10px;622	background: var(--bg);623	border: 0;624	border-bottom: 1px solid var(--bg-elevated);625	outline: none;626	font-size: 0.6875rem;627	color: var(--text-heading);628}629.atlas-picker-filter::placeholder {630	color: var(--text-faint);631}632.atlas-picker-list {633	flex: 1 1 auto;634	min-height: 0;635	overflow: auto;636	scrollbar-width: thin;637	scrollbar-color: var(--border) transparent;638}639.atlas-picker-row {640	display: grid;641	grid-template-columns: 80px 1fr auto;642	align-items: center;643	gap: 8px;644	padding: 6px 10px;645	border-bottom: 1px solid rgba(42, 32, 24, 0.4);646	color: var(--text-muted);647}648.atlas-picker-row:hover {649	background: rgba(200, 154, 90, 0.06);650	text-decoration: none;651}652.atlas-picker-row.active {653	background: rgba(200, 154, 90, 0.1);654}655.atlas-picker-row:hover *,656.atlas-picker-row.active * {657	color: var(--accent);658}659.atlas-picker-id,660.atlas-picker-age {661	font-family: var(--mono);662	font-size: 0.5625rem;663	color: var(--text-faint);664	white-space: nowrap;665	overflow: hidden;666	text-overflow: ellipsis;667}668.atlas-picker-msg {669	font-size: 0.6875rem;670	white-space: nowrap;671	overflow: hidden;672	text-overflow: ellipsis;673}674.atlas-head-link {675	color: var(--accent);676}677.atlas-fold-btn {678	margin-left: auto;679}680.atlas-fold-btn,681.atlas-search-btn {682	padding: 4px 8px;683	background: transparent;684	border: 1px solid var(--border);685	border-radius: 2px;686	font: inherit;687	font-size: 0.625rem;688	color: var(--text-faint);689	cursor: pointer;690}691.atlas-fold-btn:hover,692.atlas-search-btn:hover {693	color: var(--accent);694	border-color: var(--accent-dim);695}696.atlas-fold-btn[hidden],697.atlas-search-btn[hidden],698.atlas-filter[hidden] {699	display: none;700}701.atlas-filter {702	width: 220px;703	max-width: 100%;704	padding: 5px 10px;705	background: transparent;706	border: 1px solid var(--border);707	border-radius: 3px;708	color: var(--text);709	font-size: 0.6875rem;710}711.atlas-filter:focus {712	outline: none;713	border-color: var(--accent-dim);714}715.atlas-filter::placeholder {716	color: var(--text-faint);717}718/* kepr.js fixes the height at the closed tree's, at most Kepr 2's 520px, and the tree and panel719   scroll inside it; without it, the whole box scrolls. */720.atlas {721	display: grid;722	grid-template-columns: minmax(0, 1fr);723	grid-template-rows: minmax(0, 1fr);724	gap: 0 20px;725	max-height: 520px;726	overflow-y: auto;727	border-top: 1px solid var(--bg-elevated);728	border-bottom: 1px solid var(--bg-elevated);729}730.atlas-tree,731.atlas-panel {732	min-height: 0;733	overflow-y: auto;734	scrollbar-width: thin;735	scrollbar-color: var(--border) transparent;736}737.atlas:has(> .atlas-panel:not([hidden])) {738	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);739}740.atlas [hidden] {741	display: none;742}743.atlas-folder > summary {744	list-style: none;745}746.atlas-folder > summary::-webkit-details-marker {747	display: none;748}749.atlas-children {750	padding-left: 14px;751	border-left: 1px solid var(--border);752	margin-left: 6px;753}754.atlas-row {755	position: relative;756	display: grid;757	grid-template-columns: minmax(90px, auto) 1fr auto;758	align-items: baseline;759	gap: 0 12px;760	padding: 6px 8px;761	border-bottom: 1px solid rgba(42, 32, 24, 0.62);762	cursor: pointer;763	transition: background 100ms;764}765.atlas-row:hover,766.atlas-row:focus-visible,767.atlas-row.selected {768	outline: none;769	background: var(--accent-tint-04);770	text-decoration: none;771}772.atlas-row.selected {773	box-shadow: inset 2px 0 0 var(--accent);774}775.atlas-name {776	color: var(--text-heading);777	font-size: 0.875rem;778	white-space: nowrap;779}780.atlas-folder > summary .atlas-name {781	color: var(--accent);782}783.atlas-desc {784	min-width: 0;785	color: var(--text-muted);786	font-size: 0.8125rem;787	overflow: hidden;788	text-overflow: ellipsis;789	white-space: nowrap;790}791.atlas-meta {792	font-size: 0.625rem;793	color: var(--text-faint);794	white-space: nowrap;795}796.atlas-panel {797	padding: 12px 0 12px 16px;798	border-left: 1px solid var(--border);799}800.atlas-hint {801	margin: 0;802	font-size: 0.625rem;803	color: var(--text-faint);804}805.atlas-info-name {806	margin: 0;807	font-weight: 400;808	font-size: 1.375rem;809	color: var(--text-heading);810	overflow-wrap: anywhere;811}812.atlas-info-path {813	margin: 0 0 12px;814	font-size: 0.625rem;815	color: var(--text-faint);816	overflow-wrap: anywhere;817}818.atlas-facts {819	display: grid;820	grid-template-columns: auto 1fr;821	gap: 3px 12px;822	margin: 0 0 12px;823	font-size: 0.625rem;824}825.atlas-facts dt {826	color: var(--text-faint);827}828.atlas-facts dd {829	margin: 0;830	color: var(--text);831}832.atlas-facts a {833	color: var(--accent);834}835.atlas-info-desc {836	font-size: 0.8125rem;837	color: var(--text-muted);838}839/* ----- README and rendered Markdown --------------------------------------- */840841.repo-details {842	margin: 36px 0 0;843	animation: fadeIn 320ms 80ms ease both;844}845.repo-details-toggle {846	border-bottom: 1px solid var(--border);847	padding-bottom: 24px;848}849.repo-details-head {850	display: flex;851	align-items: center;852	gap: 6px;853	padding: 8px 0;854	font-family: var(--mono);855	font-size: 0.6875rem;856	letter-spacing: 0.12em;857	color: var(--text-secondary);858	text-transform: uppercase;859}860.markdown {861	font-size: 1.05rem;862	line-height: 1.7;863	overflow-wrap: break-word;864}865.markdown h1,866.markdown h2,867.markdown h3,868.markdown h4 {869	font-weight: 400;870	margin: 1.4em 0 0.4em;871	color: var(--text-heading);872}873.markdown h1 {874	font-size: 1.5rem;875}876.markdown h2 {877	font-size: 1.3rem;878}879.markdown h3 {880	font-size: 1.15rem;881}882.markdown p {883	margin: 0.8em 0;884}885.markdown ul,886.markdown ol {887	margin: 0.8em 0 0.8em 1.5em;888	padding: 0;889}890.markdown a {891	color: var(--accent);892}893.markdown code {894	font-family: var(--mono);895	font-size: 0.82em;896	color: var(--accent);897	background: var(--bg-surface);898	padding: 0.15em 0.35em;899	border-radius: 3px;900}901.markdown pre {902	background: var(--bg-surface);903	border-radius: 4px;904	padding: 1em 1.2em;905	overflow-x: auto;906	margin: 1em 0;907}908.markdown pre code {909	background: none;910	padding: 0;911	color: var(--text);912	font-size: 0.85em;913}914.markdown blockquote {915	border-left: 3px solid var(--border);916	margin: 1em 0;917	padding: 0.1em 1em;918	color: var(--text-secondary);919}920.markdown hr {921	border: none;922	border-top: 1px solid var(--border);923	margin: 1.5em 0;924}925.markdown img {926	max-width: 100%;927}928.markdown table {929	border-collapse: collapse;930	display: block;931	overflow-x: auto;932}933.markdown th,934.markdown td {935	border: 1px solid var(--border);936	padding: 4px 10px;937}938939/* ----- file viewer -------------------------------------------------------- */940941.breadcrumb {942	margin: 0 0 4px;943	font-size: 0.75rem;944	overflow-wrap: anywhere;945}946.breadcrumb a:hover {947	color: var(--accent);948}949.file-page-title {950	font-size: 1.75rem;951	font-weight: 400;952	margin: 4px 0 12px;953	overflow-wrap: anywhere;954}955.file-meta,956.file-toggle {957	margin: 0 0 12px;958	font-size: 0.6875rem;959}960.file-meta a,961.file-toggle a.active {962	color: var(--accent);963}964.file-image img {965	max-width: 100%;966	background: var(--bg-surface);967	border: 1px solid var(--border);968}969.file-view {970	border: 1px solid var(--border);971	background: var(--bg-surface);972	overflow-x: auto;973}974.code {975	margin: 0;976	padding: 16px 0;977	font-family: var(--mono);978	font-size: 0.8125rem;979	line-height: 1.65;980	tab-size: 4;981}982/* A grid, so tab stops count from the start of the code rather than the line number. */983.code .line {984	display: grid;985	grid-template-columns: 6em 1fr;986	padding-right: 24px;987	scroll-margin-top: 40vh;988}989.code .line:target,990.code .line.hl {991	background: var(--accent-tint-12);992}993.code .lc {994	white-space: pre;995}996.code .ln {997	padding-right: 1.5em;998	text-align: right;999	color: var(--text-faint);1000	user-select: none;1001}1002.code .ln:hover {1003	color: var(--accent);1004	text-decoration: none;1005}10061007/* Shiki's CSS-variables theme roles, in Kepr 2's highlight.js colours. */1008.tk-comment {1009	color: var(--text-muted);1010	font-style: italic;1011}1012.tk-keyword {1013	color: var(--accent);1014}1015.tk-string,1016.tk-string-expression {1017	color: var(--sage);1018}1019.tk-constant {1020	color: var(--accent-bright);1021}1022.tk-function {1023	color: var(--accent);1024}1025.tk-parameter {1026	color: var(--text);1027}1028.tk-punctuation {1029	color: var(--text-secondary);1030}1031.tk-link {1032	color: var(--accent);1033	text-decoration: underline;1034}1035.tk-inserted {1036	color: var(--sage);1037}1038.tk-deleted {1039	color: #c45c5c;1040}1041.tk-i {1042	font-style: italic;1043}10441045/* ----- save page ---------------------------------------------------------- */10461047.save-id {1048	margin: 12px 0 0;1049	font-size: 0.75rem;1050	color: var(--text-secondary);1051}1052.save-flag {1053	margin: 12px 0 0;1054	padding: 8px 12px;1055	border: 1px solid #6a3a2a;1056	border-left: 2px solid #c45c5c;1057	background: rgba(196, 92, 92, 0.08);1058	color: var(--text-heading);1059}1060.save-flag-label {1061	margin-right: 8px;1062	font-size: 0.625rem;1063	letter-spacing: 0.12em;1064	text-transform: uppercase;1065	color: #c45c5c;1066}1067.save-message-head {1068	font-size: 2.25rem;1069	font-weight: 400;1070	line-height: 1.3;1071	margin: 12px 0 8px;1072	color: var(--text-heading);1073	overflow-wrap: anywhere;1074	animation: fadeUp 280ms ease both;1075}1076.save-message-body {1077	margin: 0 0 12px;1078	white-space: pre-wrap;1079	color: var(--text-secondary);1080}1081.save-facts {1082	display: grid;1083	grid-template-columns: max-content 1fr;1084	gap: 2px 16px;1085	margin: 16px 0;1086	font-size: 0.75rem;1087}1088.save-facts dt {1089	color: var(--text-faint);1090}1091.save-facts dd {1092	margin: 0;1093	overflow-wrap: anywhere;1094}1095.save-facts a,1096.save-links a,1097.diff-view a {1098	color: var(--accent);1099}1100.save-links {1101	display: flex;1102	flex-wrap: wrap;1103	gap: 8px 20px;1104	margin: 0;1105	font-size: 0.75rem;1106}1107.save-empty {1108	font-size: 0.75rem;1109}1110.change-row,1111.diff-head {1112	display: grid;1113	grid-template-columns: 1fr auto;1114	gap: 12px;1115	padding: 7px 8px;1116	border-bottom: 1px solid var(--border);1117	font-family: var(--mono);1118	font-size: 0.8125rem;1119}1120.change-row:hover {1121	background: var(--accent-tint-04);1122	text-decoration: none;1123}1124.change-path {1125	min-width: 0;1126	overflow-wrap: anywhere;1127}1128.change-added .change-path {1129	color: var(--sage);1130}1131.change-removed .change-path {1132	color: var(--text-muted);1133	text-decoration: line-through;1134}1135.change-modified .change-path {1136	color: var(--accent-bright);1137}1138.change-stat {1139	font-size: 0.75rem;1140	white-space: nowrap;1141}1142.diff-add {1143	color: var(--sage);1144}1145.diff-del {1146	color: #c45c5c;1147}1148.diff-note {1149	color: var(--text-faint);1150	font-size: 0.6875rem;1151}1152.diff-file {1153	margin: 0 0 20px;1154}1155.diff-head {1156	cursor: pointer;1157	list-style: none;1158	border: 1px solid var(--border);1159	background: var(--bg-surface);1160}1161.diff-head::-webkit-details-marker {1162	display: none;1163}1164.diff-file > .file-view {1165	border-top: 0;1166}1167.diff-file > .diff-note,1168.diff-view {1169	margin: 8px 0 0;1170	font-size: 0.6875rem;1171}1172.code.diff {1173	padding: 4px 0;1174}1175.diff .dl {1176	display: grid;1177	grid-template-columns: 3.5em 3.5em 1.5em 1fr;1178	padding-right: 24px;1179}1180.diff .dh {1181	display: block;1182	padding: 4px 1em;1183	color: var(--text-faint);1184	background: var(--bg-elevated);1185}1186.diff .ln {1187	padding-right: 0.75em;1188	text-align: right;1189	color: var(--text-faint);1190	user-select: none;1191}1192.diff .ds {1193	text-align: center;1194	color: var(--text-faint);1195	user-select: none;1196}1197.diff .dl-add {1198	background: rgba(122, 154, 104, 0.1);1199}1200.diff .dl-add .ds {1201	color: var(--sage);1202}1203.diff .dl-del {1204	background: rgba(196, 92, 92, 0.08);1205}1206.diff .dl-del .ds {1207	color: #c45c5c;1208}12091210/* ----- archives ----------------------------------------------------------- */12111212.archive-row {1213	padding: 12px 8px;1214	border-bottom: 1px solid var(--border);1215}1216.archive-save {1217	display: flex;1218	flex-wrap: wrap;1219	align-items: baseline;1220	gap: 0 10px;1221	margin: 0;1222}1223.archive-save .history-id {1224	flex: 0 0 110px;1225}1226.archive-msg {1227	flex: 1;1228}1229.archive-head {1230	font-size: 0.625rem;1231	letter-spacing: 0.08em;1232	color: var(--accent);1233	border: 1px solid var(--accent-dim);1234	border-radius: 2px;1235	padding: 0 6px;1236}1237.archive-save .history-id:hover {1238	color: var(--accent);1239}1240.archive-links {1241	display: flex;1242	flex-wrap: wrap;1243	align-items: center;1244	gap: 12px;1245	margin: 6px 0;1246	font-size: 0.75rem;1247}1248.archive-links a {1249	color: var(--accent);1250}1251.archive-row .install-line {1252	justify-content: space-between;1253}1254.archive-row--head {1255	background: var(--accent-tint-04);1256	border-top: 1px solid var(--accent-dim);1257}12581259/* ----- phone -------------------------------------------------------------- */12601261@media (max-width: 768px) {1262	body > nav {1263		padding: 20px 16px;1264	}1265	/* Without the menu script the links wrap in the bar instead of running off it. */1266	.nav-links {1267		flex-wrap: wrap;1268		justify-content: flex-end;1269		gap: 8px 18px;1270		min-width: 0;1271	}1272	.nav--menu {1273		position: relative;1274	}1275	.nav--menu .nav-toggle {1276		display: flex;1277		flex-direction: column;1278		justify-content: center;1279		gap: 4px;1280		width: 36px;1281		height: 36px;1282		margin: -8px -8px -8px auto;1283		padding: 8px;1284		border: 0;1285		background: none;1286		color: var(--text-secondary);1287		cursor: pointer;1288	}1289	.nav-toggle span {1290		height: 1.5px;1291		background: currentColor;1292		transition:1293			transform 0.2s ease,1294			opacity 0.2s ease;1295	}1296	.nav--open .nav-toggle {1297		color: var(--accent);1298	}1299	.nav--open .nav-toggle span:nth-child(1) {1300		transform: translateY(5.5px) rotate(45deg);1301	}1302	.nav--open .nav-toggle span:nth-child(2) {1303		opacity: 0;1304	}1305	.nav--open .nav-toggle span:nth-child(3) {1306		transform: translateY(-5.5px) rotate(-45deg);1307	}1308	.nav--menu .nav-links {1309		display: none;1310	}1311	.nav--menu.nav--open .nav-links {1312		position: absolute;1313		top: 100%;1314		left: 0;1315		right: 0;1316		z-index: 10;1317		display: flex;1318		flex-direction: column;1319		gap: 0;1320		padding: 0 16px 8px;1321		background: var(--bg);1322		border-bottom: 1px solid var(--border);1323		font-size: 0.8125rem;1324	}1325	.nav--open .nav-links > * {1326		padding: 14px 0;1327		border-top: 1px solid var(--border);1328	}1329	main {1330		padding: 16px 16px 80px;1331	}1332	.repo-name {1333		font-size: 2.75rem;1334	}1335	.install-lines {1336		align-items: stretch;1337		margin-left: 0;1338		width: 100%;1339	}1340	.history-row {1341		grid-template-columns: 1fr auto;1342	}1343	.history-id {1344		grid-column: 1 / -1;1345	}1346	.atlas-row {1347		grid-template-columns: 1fr auto;1348	}1349	.atlas-desc {1350		grid-column: 1 / -1;1351		grid-row: 2;1352	}1353	.atlas:has(> .atlas-panel:not([hidden])) {1354		grid-template-columns: minmax(0, 1fr);1355	}1356	.atlas-panel {1357		display: none;1358	}1359	.code .line {1360		grid-template-columns: 4.5em 1fr;1361	}1362	.save-message-head {1363		font-size: 1.625rem;1364	}1365	.archive-msg {1366		flex-basis: 100%;1367		order: 1;1368	}1369	.diff .dl {1370		grid-template-columns: 2.75em 2.75em 1.25em 1fr;1371	}1372	.code .ln {1373		padding-right: 1em;1374	}1375}13761377/* ----- builds ------------------------------------------------------------- */13781379.release {1380	padding: 20px 8px 24px;1381	border-bottom: 1px solid var(--border);1382}1383.release-head {1384	display: flex;1385	flex-wrap: wrap;1386	align-items: baseline;1387	gap: 0 14px;1388	margin: 0 0 8px;1389}1390.release-version {1391	font-family: "Martian Mono", monospace;1392	font-size: 1rem;1393	color: var(--accent);1394}1395.release-latest .release-version {1396	font-size: clamp(2rem, 5vw, 3.5rem);1397	letter-spacing: -0.06em;1398}1399.release-latest > p {1400	font-size: 0.6875rem;1401	margin: 16px 8px 0;1402}1403.release-older > summary {1404	padding: 16px 8px;1405	font-size: 0.75rem;1406	color: var(--text-muted);1407	cursor: pointer;1408	border-bottom: 1px solid var(--border);1409}1410.release-head .history-id:hover {1411	color: var(--accent);1412}1413.release-notes {1414	margin-bottom: 14px;1415}1416.release-file {1417	padding: 10px 0;1418	border-top: 1px solid var(--border);1419}1420.release-file-head {1421	display: flex;1422	flex-wrap: wrap;1423	align-items: baseline;1424	gap: 4px 14px;1425	margin: 0;1426}1427.release-platform {1428	flex: 0 0 180px;1429}1430.release-download {1431	flex: 1;1432	font-size: 0.75rem;1433	color: var(--accent);1434	overflow-wrap: anywhere;1435}1436.release-meta,1437.release-sha {1438	font-size: 0.6875rem;1439	color: var(--text-muted);1440}1441.release-sha {1442	margin: 4px 0 0;1443	overflow-wrap: anywhere;1444}1445.release-hint {1446	margin: 4px 0 0;1447	font-size: 0.8125rem;1448}14491450/* ----- issues ------------------------------------------------------------- */14511452.issues-bar {1453	display: flex;1454	flex-wrap: wrap;1455	align-items: center;1456	gap: 8px 12px;1457	font-size: 0.75rem;1458	padding-bottom: 14px;1459	border-bottom: 1px solid var(--bg-elevated);1460}1461.issues-tab {1462	color: var(--text-faint);1463	border: 1px solid transparent;1464	border-radius: 999px;1465	padding: 4px 10px;1466}1467button.issues-tab {1468	font: inherit;1469	background: none;1470	cursor: pointer;1471}1472.issues-tab.active {1473	color: var(--accent);1474	border-color: var(--accent-tint-12);1475}1476.issues-new {1477	margin-left: auto;1478	color: var(--text-muted);1479}1480.issue-row {1481	display: grid;1482	grid-template-columns: auto minmax(0, 1fr) auto;1483	align-items: baseline;1484	gap: 2px 10px;1485	padding: 16px 8px;1486	border-bottom: 1px solid var(--border);1487}1488.issue-row:hover {1489	text-decoration: none;1490	background: var(--accent-tint-04);1491}1492.issue-title {1493	grid-column: 2 / -1;1494	overflow-wrap: anywhere;1495	color: var(--text-heading);1496}1497.issues-new:hover,1498.issue-row:hover .issue-title {1499	color: var(--accent);1500}1501.issue-meta,1502.issue-post-head {1503	font-size: 0.6875rem;1504	color: var(--text-muted);1505}1506.issue-symbol--open {1507	color: var(--accent);1508}1509.issue-symbol--closed {1510	color: var(--text-faint);1511}1512.issue-row .issue-meta {1513	grid-column: 2;1514}1515.issue-reporter {1516	font-size: 0.6875rem;1517	color: var(--text-muted);1518	overflow-wrap: anywhere;1519}1520.issues-filter {1521	display: flex;1522	flex-wrap: wrap;1523	gap: 8px;1524	margin-bottom: 16px;1525}1526.issue-post {1527	margin: 18px 0;1528	padding: 14px 18px;1529	border: 1px solid var(--border);1530	border-radius: 6px;1531	background: var(--bg-surface);1532}1533.issue-post--operator {1534	border-color: var(--accent-dim);1535}1536.issue-post-head {1537	display: flex;1538	flex-wrap: wrap;1539	gap: 4px 12px;1540	margin: 0 0 8px;1541}1542.issue-author {1543	color: var(--text);1544}1545.issue-badge {1546	color: var(--accent);1547	text-transform: uppercase;1548	letter-spacing: 0.08em;1549}1550.issue-text {1551	white-space: pre-wrap;1552	overflow-wrap: anywhere;1553}1554.issue-link {1555	font-size: 0.75rem;1556	overflow-wrap: anywhere;1557	color: var(--accent);1558}1559.issues-form {1560	display: flex;1561	flex-direction: column;1562	gap: 6px;1563	max-width: 640px;1564	margin-top: 18px;1565}1566.issues-label {1567	font-family: var(--mono);1568	font-size: 0.6875rem;1569	margin-top: 6px;1570	opacity: 0.8;1571}1572.issues-input,1573.issues-textarea {1574	font-family: var(--mono);1575	font-size: 0.75rem;1576	width: 100%;1577	padding: 6px 8px;1578	color: var(--text);1579	background: var(--bg);1580	border: 1px solid var(--border);1581	border-radius: 4px;1582	resize: vertical;1583}1584.issues-input:focus,1585.issues-textarea:focus {1586	outline: none;1587	border-color: var(--accent);1588}1589.issues-filter .issues-input {1590	width: auto;1591	min-width: 0;1592	flex: 1 1 140px;1593}1594.issues-submit {1595	align-self: flex-start;1596	margin-top: 10px;1597	padding: 6px 14px;1598	font-family: var(--mono);1599	font-size: 0.75rem;1600	color: var(--bg);1601	background: var(--accent);1602	border: none;1603	border-radius: 4px;1604	cursor: pointer;1605}1606.issues-submit:hover {1607	opacity: 0.85;1608}1609.issues-submit:disabled {1610	opacity: 0.4;1611	cursor: not-allowed;1612}1613.issues-actions {1614	display: flex;1615	align-items: center;1616	gap: 16px;1617	margin: 10px 0 0;1618}1619.issues-actions .issues-submit {1620	align-self: auto;1621	margin-top: 0;1622}1623.issues-cancel {1624	font-size: 0.75rem;1625	color: var(--text-muted);1626}1627.issues-cancel:hover {1628	color: var(--accent);1629}1630button.issues-cancel {1631	padding: 0;1632	border: 0;1633	background: none;1634	cursor: pointer;1635}1636.issues-error {1637	font-size: 0.75rem;1638	color: #c86a5a;1639}1640/* The honeypot: off-screen for people, still in the form for bots. */1641.issues-hp {1642	position: absolute;1643	left: -9999px;1644	height: 0;1645	overflow: hidden;1646	opacity: 0;1647}16481649/* ----- front page --------------------------------------------------------- */16501651/* Kepr 2's hero band, full width, reaching up behind the nav (32px mark + 48px padding). */1652body > nav {1653	position: relative;1654	z-index: 1;1655}1656.ticker {1657	position: relative;1658	height: 304px;1659	margin: -104px calc(50% - 50vw) 0;1660	padding: 96px 0 20px;1661	display: flex;1662	flex-direction: column;1663	justify-content: space-evenly;1664	overflow: hidden;1665	pointer-events: none;1666	user-select: none;1667	border-bottom: 1px solid var(--border);1668	font-family: var(--mono);1669	color: var(--text-secondary);1670	mask-image: linear-gradient(1671		to right,1672		transparent,1673		#000 48px,1674		#000 calc(100% - 48px),1675		transparent1676	);1677}1678.ticker-row {1679	white-space: nowrap;1680	line-height: 1.2;1681	opacity: var(--o);1682	animation: ticker-glow 83s var(--glow-at) ease-in-out infinite;1683}1684/* The drift's duration is set by kepr.js from the track's width, so every row keeps Kepr 2's1685   pace in px/s (--speed) however long its messages are; this is the no-JavaScript fallback. */1686.ticker-track {1687	display: inline-flex;1688	gap: 64px;1689	padding-right: 64px;1690	animation: ticker-drift 1500s linear infinite;1691}1692/* Kepr 2's depth bands: nearer rows are larger, brighter and faster. Each row takes its turn at1693   the glow, a few seconds out of every 83, spaced so one or two glow at a time. */1694.ticker-row:nth-child(1) {1695	font-size: 9px;1696	--o: 0.05;1697	--speed: 12;1698	--glow-at: -5s;1699}1700.ticker-row:nth-child(2) {1701	font-size: 18px;1702	--o: 0.1;1703	--speed: 23;1704	--glow-at: -41s;1705}1706.ticker-row:nth-child(3) {1707	font-size: 7px;1708	--o: 0.04;1709	--speed: 9;1710	--glow-at: -77s;1711}1712.ticker-row:nth-child(4) {1713	font-size: 13px;1714	--o: 0.07;1715	--speed: 17;1716	--glow-at: -29s;1717}1718.ticker-row:nth-child(5) {1719	font-size: 22px;1720	--o: 0.12;1721	--speed: 29;1722	--glow-at: -65s;1723}1724.ticker-row:nth-child(6) {1725	font-size: 8px;1726	--o: 0.045;1727	--speed: 10;1728	--glow-at: -17s;1729}1730.ticker-row:nth-child(7) {1731	font-size: 15px;1732	--o: 0.08;1733	--speed: 20;1734	--glow-at: -53s;1735}1736@keyframes ticker-drift {1737	to {1738		transform: translateX(-50%);1739	}1740}1741@keyframes ticker-glow {1742	0%,1743	10%,1744	100% {1745		color: var(--text-secondary);1746		opacity: var(--o);1747		text-shadow: none;1748	}1749	5% {1750		color: var(--accent);1751		opacity: calc(var(--o) * 3.5);1752		text-shadow: 0 0 3px var(--accent-tint-12);1753	}1754}17551756.headline {1757	display: grid;1758	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);1759	gap: 48px;1760	align-items: center;1761	padding: 56px 0 40px;1762}1763.headline h1 {1764	font-size: clamp(2rem, 5vw, 3.5rem);1765	font-weight: 400;1766	line-height: 1.15;1767	color: var(--text-heading);1768	margin: 0 0 20px;1769	animation: fadeUp 480ms ease both;1770}1771.headline-tagline {1772	margin: 0;1773	font-size: 0.9375rem;1774	line-height: 1.7;1775	color: var(--text-secondary);1776	animation: fadeUp 480ms 80ms ease both;1777}1778.headline-cloud {1779	display: flex;1780	flex-wrap: wrap;1781	justify-content: center;1782	align-items: center;1783	gap: 10px 22px;1784	padding: 20px;1785	animation: fadeIn 600ms 160ms ease both;1786}1787.tc-tag {1788	font-family: var(--mono);1789	letter-spacing: 0.03em;1790	white-space: nowrap;1791	color: var(--accent-dim);1792	transition:1793		color 0.2s,1794		opacity 0.2s,1795		text-shadow 0.2s;1796}1797.tc-tag:hover {1798	color: var(--accent);1799	opacity: 1;1800	text-shadow: 0 0 14px var(--accent-tint-12);1801}1802.tc-1 {1803	font-size: 10px;1804	opacity: 0.42;1805}1806.tc-2 {1807	font-size: 12px;1808	opacity: 0.56;1809}1810.tc-3 {1811	font-size: 15px;1812	opacity: 0.7;1813}1814.tc-4 {1815	font-size: 18px;1816	opacity: 0.85;1817	font-weight: 500;1818}1819.tc-5 {1820	font-size: 23px;1821	opacity: 1;1822	font-weight: 500;1823}18241825.featured-label {1826	font-size: 0.6875rem;1827	font-weight: 400;1828	letter-spacing: 0.08em;1829	text-transform: uppercase;1830	color: var(--text-secondary);1831	margin: 0 0 12px;1832}1833.landing-self-host {1834	margin: 32px 0 0;1835	font-size: 0.75rem;1836}1837.landing-self-host a {1838	color: var(--text-secondary);1839}18401841/* ----- repo cards (front page, browse, profile) --------------------------- */18421843.card-grid {1844	display: grid;1845	grid-template-columns: repeat(2, minmax(0, 1fr));1846	gap: 16px;1847}1848.repo-card {1849	display: flex;1850	flex-direction: column;1851	padding: 20px 22px 16px;1852	border: 1px solid var(--bg-elevated);1853	border-radius: 4px;1854	background: var(--bg);1855	transition:1856		border-color 120ms,1857		background 120ms;1858	animation: fadeUp 350ms ease both;1859}1860.repo-card:hover {1861	text-decoration: none;1862	border-color: var(--text-faint);1863	background: var(--accent-tint-04);1864}1865.repo-card-head {1866	display: flex;1867	align-items: baseline;1868	justify-content: space-between;1869	gap: 12px;1870}1871.repo-card-name {1872	font-size: 1.375rem;1873	line-height: 1.1;1874	color: var(--accent);1875	overflow: hidden;1876	text-overflow: ellipsis;1877	white-space: nowrap;1878}1879.repo-card-saves {1880	font-size: 0.6875rem;1881	white-space: nowrap;1882}1883.repo-card-desc {1884	margin: 8px 0 0;1885	font-size: 0.8125rem;1886	line-height: 1.5;1887	color: var(--text-secondary);1888	display: -webkit-box;1889	-webkit-line-clamp: 2;1890	-webkit-box-orient: vertical;1891	overflow: hidden;1892}1893.repo-card-cat {1894	margin: 10px 0 0;1895	font-size: 0.9375rem;1896	color: var(--text);1897}18981899/* ----- profile ------------------------------------------------------------ */19001901/* The cover runs the full width of the window while the page keeps its column. */1902.profile-cover {1903	position: relative;1904	height: 380px;1905	margin: -24px calc(50% - 50vw) 0;1906	overflow: hidden;1907	border-bottom: 1px solid var(--bg-surface);1908}1909.hex-backdrop {1910	position: absolute;1911	inset: 0;1912	display: flex;1913	flex-direction: row-reverse;1914	justify-content: center;1915	align-items: center;1916	gap: 13px;1917	pointer-events: none;1918	user-select: none;1919	font-family: var(--mono);1920	font-size: 13px;1921	line-height: 16px;1922	color: var(--accent-dim);1923}1924/* Characters top to bottom, columns right to left, each breathing on its own clock. */1925.hex-col {1926	writing-mode: vertical-rl;1927	text-orientation: upright;1928	letter-spacing: 3px;1929	opacity: 0.05;1930	animation: hex-breathe 17s ease-in-out infinite;1931	transition:1932		color 1.6s ease,1933		text-shadow 1.6s ease;1934}1935.hex-col:nth-child(3n) {1936	color: var(--accent);1937	animation-duration: 23s;1938	animation-delay: -7s;1939}1940.hex-col:nth-child(4n + 1) {1941	animation-duration: 29s;1942	animation-delay: -13s;1943}1944.hex-col:nth-child(5n + 2) {1945	animation-duration: 19s;1946	animation-delay: -3s;1947}1948.hex-col:nth-child(7n) {1949	animation-delay: -21s;1950}1951.hex-col.glow {1952	color: var(--accent-bright);1953	text-shadow: 0 0 6px var(--accent-tint-12);1954}1955@keyframes hex-breathe {1956	0%,1957	100% {1958		opacity: 0.05;1959	}1960	50% {1961		opacity: 0.22;1962	}1963}1964.profile-cover-fade {1965	position: absolute;1966	left: 0;1967	right: 0;1968	bottom: 0;1969	height: 55%;1970	background: linear-gradient(to bottom, transparent, var(--bg));1971	pointer-events: none;1972}1973.profile-identity {1974	position: absolute;1975	bottom: 40px;1976	left: 0;1977	right: 0;1978	max-width: 980px;1979	margin: 0 auto;1980	padding: 0 48px;1981}1982.profile-username {1983	margin: 0 0 8px;1984	font-family: "Sacramento", cursive;1985	font-weight: 400;1986	font-size: 3.625rem;1987	line-height: 1;1988	letter-spacing: -0.02em;1989	text-transform: lowercase;1990	color: var(--text-heading);1991	user-select: none;1992	animation: fadeUp 500ms ease both;1993}1994.profile-signature {1995	display: block;1996	max-height: 96px;1997	max-width: min(360px, 100%);1998}1999.profile-tagline {2000	margin: 0 0 6px;2001	font-family: var(--mono);2002	font-size: 0.75rem;2003	letter-spacing: 0.15em;2004	color: var(--text-faint);2005}2006.profile-op-badge {2007	display: block;2008	font-size: 0.6875rem;2009	letter-spacing: 0.18em;2010	color: var(--accent);2011}20122013.profile-portrait-section {2014	display: grid;2015	grid-template-columns: 320px minmax(0, 1fr);2016	gap: 40px;2017	align-items: start;2018	padding-top: 40px;2019}2020.profile-left {2021	display: flex;2022	flex-direction: column;2023	gap: 16px;2024}2025.profile-identity-card,2026.profile-languages-bar {2027	padding: 20px 24px;2028	border: 1px solid var(--bg-elevated);2029	border-radius: 4px;2030}2031.profile-identity-bio {2032	margin: 0;2033	font-size: 0.875rem;2034	line-height: 1.5;2035	color: var(--text-muted);2036}2037.profile-identity-location {2038	margin: 6px 0 0;2039	font-family: var(--mono);2040	font-size: 0.8125rem;2041	color: var(--text-muted);2042}2043.profile-website-pill {2044	display: inline-block;2045	max-width: 100%;2046	margin-top: 10px;2047	padding: 3px 8px;2048	overflow: hidden;2049	text-overflow: ellipsis;2050	white-space: nowrap;2051	border: 1px solid var(--text-faint);2052	border-radius: 3px;2053	background: var(--bg-surface);2054	font-family: var(--mono);2055	font-size: 0.6875rem;2056	color: var(--accent);2057}2058.profile-website-pill:hover {2059	border-color: var(--accent);2060	text-decoration: none;2061}2062.profile-stats-grid {2063	display: grid;2064	grid-template-columns: 1fr 1fr;2065	border: 1px solid var(--bg-elevated);2066	border-radius: 4px;2067	overflow: hidden;2068}2069.profile-stat-tile {2070	padding: 16px;2071	border-right: 1px solid var(--bg-elevated);2072	border-bottom: 1px solid var(--bg-elevated);2073}2074.profile-stat-tile:nth-child(2n) {2075	border-right: none;2076}2077.profile-stat-tile:nth-last-child(-n + 2) {2078	border-bottom: none;2079}2080.profile-stat-number {2081	margin-bottom: 4px;2082	font-weight: 600;2083	font-size: 1.75rem;2084	line-height: 1;2085	color: var(--accent);2086}2087.profile-stat-label,2088.profile-section-label {2089	font-family: var(--mono);2090	font-size: 0.625rem;2091	text-transform: uppercase;2092	letter-spacing: 0.08em;2093	color: var(--text-faint);2094}2095.profile-lang-bar {2096	display: block;2097	width: 100%;2098	height: 6px;2099	margin-bottom: 8px;2100	border-radius: 3px;2101	background: var(--bg-surface);2102}2103.profile-lang-bar rect {2104	fill: var(--accent);2105	opacity: 0.6;2106}2107.profile-lang-bar rect:nth-child(2) {2108	fill: var(--sage);2109}2110.profile-lang-bar rect:nth-child(3) {2111	fill: var(--accent-flash);2112	opacity: 0.45;2113}2114.profile-lang-bar rect:nth-child(4) {2115	fill: var(--accent-dim);2116}2117.profile-lang-labels {2118	display: flex;2119	flex-wrap: wrap;2120	gap: 10px;2121	font-family: var(--mono);2122	font-size: 0.625rem;2123	color: var(--text-muted);2124}2125.profile-section-label {2126	margin-bottom: 16px;2127	letter-spacing: 0.2em;2128}2129.profile-timeline {2130	display: grid;2131	grid-auto-rows: 2.25rem;2132	max-height: 13.5rem;2133	overflow-y: auto;2134	scrollbar-width: thin;2135}2136.profile-event {2137	display: grid;2138	grid-template-columns: 96px 12px minmax(0, 1fr) auto;2139	gap: 10px;2140	align-items: baseline;2141	padding: 7px 0;2142	border-bottom: 1px solid var(--bg-surface);2143	font-family: var(--mono);2144	font-size: 0.6875rem;2145	animation: fadeUp 300ms ease both;2146}2147.profile-event-repo,2148.profile-event-message {2149	overflow: hidden;2150	text-overflow: ellipsis;2151	white-space: nowrap;2152}2153.profile-event-repo,2154.profile-event-glyph {2155	color: var(--accent);2156}2157.profile-event-glyph {2158	font-size: 0.625rem;2159}2160.profile-event-message {2161	color: var(--text-muted);2162}2163.profile-event-message:hover {2164	color: var(--text-heading);2165}2166.profile-event-time {2167	font-size: 0.625rem;2168	white-space: nowrap;2169	color: var(--text-faint);2170}2171.profile-empty-state {2172	font-style: italic;2173	font-size: 0.8125rem;2174	color: var(--text-faint);2175}2176.profile-repos-section {2177	margin-top: 40px;2178	padding-top: 40px;2179	border-top: 1px solid var(--bg-surface);2180}21812182/* ----- docs and support --------------------------------------------------- */21832184.admin-layout {2185	display: grid;2186	grid-template-columns: 160px minmax(0, 1fr);2187	gap: 48px;2188	min-height: 70vh;2189}2190.admin-sidebar {2191	position: sticky;2192	top: 24px;2193	align-self: start;2194	padding: 24px 0;2195	font-size: 0.75rem;2196}2197.admin-sidebar nav,2198.admin-sidebar-foot {2199	display: flex;2200	flex-direction: column;2201	gap: 16px;2202	margin-top: 20px;2203}2204.admin-sidebar a {2205	color: var(--text-secondary);2206}2207.admin-unread {2208	display: inline-block;2209	min-width: 1.5em;2210	padding: 0 5px;2211	border-radius: 999px;2212	background: var(--accent);2213	color: var(--bg);2214	font-size: 0.6875rem;2215	text-align: center;2216}2217.notification-unread {2218	box-shadow: inset 2px 0 0 var(--accent);2219	background: var(--accent-tint-04);2220}2221.admin-sidebar a[aria-current] {2222	color: var(--accent);2223	border-left: 2px solid var(--accent);2224	padding-left: 12px;2225}2226.admin-sidebar-foot {2227	border-top: 1px solid var(--border);2228	padding-top: 24px;2229	margin-top: 40px;2230}2231.admin-content {2232	min-width: 0;2233}2234.admin-heading {2235	border-bottom: 1px solid var(--border);2236	padding: 24px 0;2237	margin-bottom: 32px;2238}2239.admin-heading h1 {2240	font-size: 2rem;2241	font-weight: 400;2242	margin: 8px 0 0;2243	color: var(--text-heading);2244}2245.admin-intro {2246	color: var(--text-secondary);2247	margin-bottom: 24px;2248}2249.admin-notice {2250	color: var(--sage);2251	border-left: 2px solid var(--sage);2252	padding-left: 16px;2253}2254.admin-content .profile-signature {2255	max-width: 240px;2256	max-height: 120px;2257	object-fit: contain;2258}2259.admin-vitals {2260	display: flex;2261	flex-wrap: wrap;2262	gap: 24px 40px;2263	padding: 0 0 24px;2264	border-bottom: 1px solid var(--border);2265}2266.admin-vitals strong {2267	display: block;2268	font-size: 1.75rem;2269	font-weight: 400;2270	color: var(--accent);2271}2272.admin-days {2273	margin: 0;2274	padding: 0;2275	list-style: none;2276	font-size: 0.6875rem;2277}2278.admin-days li {2279	display: grid;2280	grid-template-columns: 11ch minmax(0, 1fr) 5ch;2281	gap: 12px;2282	align-items: center;2283	padding: 2px 0;2284}2285.admin-days meter {2286	appearance: none;2287	width: 100%;2288	height: 6px;2289	background: var(--border);2290	border: 0;2291}2292.admin-days meter::-webkit-meter-bar {2293	height: 6px;2294	background: var(--border);2295	border: 0;2296	border-radius: 0;2297}2298.admin-days meter::-webkit-meter-optimum-value {2299	background: var(--accent);2300}2301.admin-days meter::-moz-meter-bar {2302	background: var(--accent);2303}2304.admin-days li > span:last-child {2305	text-align: right;2306}2307.admin-select-row {2308	display: flex;2309	gap: 12px;2310	align-items: center;2311}2312.admin-select-row .issue-row {2313	flex: 1;2314	min-width: 0;2315}2316.admin-content form.issue-row {2317	align-items: center;2318}2319.admin-table {2320	width: 100%;2321	border-collapse: collapse;2322	font-size: 0.6875rem;2323}2324.admin-table th,2325.admin-table td {2326	padding: 6px 12px 6px 0;2327	border-bottom: 1px solid var(--border);2328	text-align: left;2329	font-weight: 400;2330	overflow-wrap: anywhere;2331}2332.admin-table th {2333	color: var(--text-muted);2334}2335.admin-releases {2336	margin: 12px 0 0;2337	padding: 0;2338	list-style: none;2339	font-size: 0.6875rem;2340}2341.admin-releases li {2342	padding: 4px 0;2343}2344.admin-repos {2345	display: grid;2346	grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);2347	gap: 24px;2348	margin-top: 24px;2349}2350.admin-repos .issue-row {2351	flex-wrap: wrap;2352}2353.admin-repos [aria-current] {2354	border-left: 2px solid var(--accent);2355	padding-left: 12px;2356}2357@media (max-width: 680px) {2358	.admin-repos {2359		grid-template-columns: minmax(0, 1fr);2360	}2361	.admin-layout {2362		grid-template-columns: minmax(0, 1fr);2363		gap: 0;2364	}2365	.admin-sidebar {2366		position: static;2367		padding: 8px 0;2368	}2369	.admin-sidebar nav,2370	.admin-sidebar-foot {2371		flex-flow: row wrap;2372		gap: 12px 20px;2373	}2374	.admin-sidebar-foot {2375		margin-top: 16px;2376		padding-top: 16px;2377	}2378}23792380.site-doc {2381	max-width: 72ch;2382	margin-top: 16px;2383}2384.site-doc h1 {2385	font-size: clamp(2rem, 5vw, 3rem);2386	font-weight: 400;2387	color: var(--text-heading);2388}2389.site-doc h2 {2390	margin-top: 2.4em;2391	scroll-margin-top: 24px;2392}2393.site-doc-layout {2394	display: grid;2395	grid-template-columns: 180px minmax(0, 72ch);2396	gap: 48px;2397}2398.site-doc-nav {2399	position: sticky;2400	top: 24px;2401	align-self: start;2402	display: flex;2403	flex-direction: column;2404	gap: 10px;2405	margin-top: 32px;2406	font-size: 0.8125rem;2407}2408.site-doc-nav a {2409	color: var(--text-secondary);2410	text-decoration: none;2411}2412.site-doc-nav a:hover {2413	color: var(--text-heading);2414}2415@media (max-width: 860px) {2416	.site-doc-layout {2417		grid-template-columns: minmax(0, 1fr);2418		gap: 0;2419	}2420	.site-doc-nav {2421		position: static;2422		flex-flow: row wrap;2423		gap: 8px 16px;2424		margin-top: 24px;2425	}2426}24272428@media (max-width: 860px) {2429	.headline,2430	.profile-portrait-section {2431		grid-template-columns: minmax(0, 1fr);2432	}2433	.headline {2434		gap: 8px;2435		padding-top: 48px;2436	}2437	.card-grid {2438		grid-template-columns: minmax(0, 1fr);2439	}2440}2441@media (max-width: 768px) {2442	.ticker {2443		height: 226px;2444		margin-top: -88px;2445		padding-top: 80px;2446	}2447	.profile-cover {2448		height: 280px;2449		margin-top: -16px;2450	}2451	.profile-identity {2452		bottom: 24px;2453		padding: 0 16px;2454	}2455	.profile-username {2456		font-size: 2.5rem;2457	}2458	.profile-event {2459		grid-template-columns: 72px 12px minmax(0, 1fr);2460	}2461	.profile-event-time {2462		display: none;2463	}2464}24652466/* ----- media in Markdown and the signed-in editor ------------------------- */24672468/* Sizes and places from an image's options (markdown.ts); classes, as the policy allows no inline2469   style. */2470.markdown .media {2471	display: block;2472	max-width: 100%;2473	height: auto;2474	margin: 12px auto;2475	border-radius: 3px;2476}2477.markdown .media-left {2478	margin-left: 0;2479}2480.markdown .media-right {2481	margin-right: 0;2482}2483.markdown .media-w25 {2484	width: 25%;2485}2486.markdown .media-w33 {2487	width: 33%;2488}2489.markdown .media-w50 {2490	width: 50%;2491}2492.markdown .media-w66 {2493	width: 66%;2494}2495.markdown .media-w75 {2496	width: 75%;2497}2498.markdown .media-w100 {2499	width: 100%;2500}2501.edit-btn {2502	margin-left: 12px;2503	padding: 1px 7px;2504	background: transparent;2505	border: 1px solid rgba(200, 154, 90, 0.2);2506	border-radius: 2px;2507	font-size: 0.625rem;2508	color: var(--text-faint);2509	cursor: pointer;2510	vertical-align: middle;2511}2512.repo-desc-editable:not(:has(.editor)) {2513	cursor: text;2514}2515.edit-btn:hover {2516	color: var(--accent);2517	border-color: var(--accent-dim);2518}2519.editor {2520	display: grid;2521	gap: 8px;2522	margin: 8px 0 16px;2523}2524.editor-toolbar,2525.editor-media,2526.editor-actions {2527	display: flex;2528	flex-wrap: wrap;2529	align-items: center;2530	gap: 4px;2531}2532.editor-media[hidden] {2533	display: none;2534}2535.editor-label,2536.editor-status {2537	margin: 0 6px;2538	font-size: 0.625rem;2539	color: var(--text-faint);2540}2541.editor-panes {2542	display: grid;2543	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);2544	gap: 12px;2545}2546@media (max-width: 768px) {2547	.editor-panes {2548		grid-template-columns: minmax(0, 1fr);2549	}2550}2551.editor-input {2552	width: 100%;2553	min-height: 4lh;2554	max-height: 70vh;2555	field-sizing: content;2556	resize: vertical;2557	padding: 10px 12px;2558	background: var(--bg-surface);2559	border: 1px solid var(--border);2560	border-radius: 3px;2561	color: var(--text);2562	font-size: 0.75rem;2563	line-height: 1.6;2564}2565.editor-input:focus {2566	outline: none;2567	border-color: var(--accent-dim);2568}2569.editor-preview {2570	min-width: 0;2571	max-height: 70vh;2572	overflow-y: auto;2573	padding: 0 4px;2574}2575.editor-preview:empty::before {2576	content: attr(data-empty);2577	font-family: var(--mono);2578	font-size: 0.625rem;2579	color: var(--text-faint);2580}25812582/* ----- file viewer (Kepr 2's Atlas modal) -------------------------------- */25832584body:has(> .fv-overlay) {2585	overflow: hidden;2586}2587.fv-overlay {2588	position: fixed;2589	inset: 0;2590	z-index: 2000;2591	display: flex;2592	flex-direction: column;2593	background: rgba(8, 7, 5, 0.97);2594	outline: none;2595	animation: fv-in 200ms ease both;2596}2597@keyframes fv-in {2598	from {2599		opacity: 0;2600		transform: translateY(6px) scale(0.97);2601	}2602}2603.fv-header {2604	display: flex;2605	align-items: center;2606	gap: 16px;2607	flex-shrink: 0;2608	height: 48px;2609	padding: 0 20px;2610	background: var(--bg);2611	border-bottom: 1px solid var(--bg-elevated);2612}2613.fv-close {2614	background: none;2615	border: 0;2616	padding: 0 4px;2617	font-size: 1.375rem;2618	line-height: 1;2619	color: var(--text-faint);2620	cursor: pointer;2621}2622.fv-close:hover {2623	color: var(--accent);2624}2625.fv-title {2626	display: flex;2627	align-items: baseline;2628	gap: 8px;2629	flex: 1;2630	min-width: 0;2631}2632.fv-name {2633	font-size: 1.25rem;2634	color: var(--text-heading);2635	white-space: nowrap;2636}2637.fv-path {2638	font-size: 0.625rem;2639	color: var(--text-faint);2640	white-space: nowrap;2641	overflow: hidden;2642	text-overflow: ellipsis;2643}2644.fv-controls,2645.fv-nav {2646	display: flex;2647	align-items: center;2648	gap: 4px;2649	flex-shrink: 0;2650}2651.fv-ctrl-btn {2652	background: transparent;2653	border: 1px solid rgba(200, 154, 90, 0.2);2654	border-radius: 2px;2655	padding: 3px 7px;2656	font: inherit;2657	font-size: 0.625rem;2658	color: var(--text-faint);2659	cursor: pointer;2660	transition:2661		color 100ms,2662		border-color 100ms;2663}2664.fv-ctrl-btn:hover:not(:disabled),2665.fv-ctrl-btn.active {2666	color: var(--accent);2667	border-color: rgba(200, 154, 90, 0.5);2668	text-decoration: none;2669}2670.fv-ctrl-btn:disabled {2671	opacity: 0.3;2672	cursor: default;2673}2674.fv-pos {2675	min-width: 48px;2676	text-align: center;2677	font-size: 0.625rem;2678	color: var(--text-faint);2679}2680.fv-body {2681	flex: 1;2682	min-height: 0;2683	display: grid;2684	grid-template-columns: minmax(0, 1fr) 280px;2685}2686.fv-source {2687	min-height: 0;2688	overflow: auto;2689	padding: 16px 28px 32px;2690	font-family: var(--mono);2691	font-size: 0.6875rem;2692	color: var(--text-faint);2693}2694.fv-source .file-view {2695	margin: -16px -28px 0;2696	border: 0;2697	background: none;2698	overflow: visible;2699}2700.fv-source .code {2701	font-size: var(--fv-size);2702	color: var(--text);2703}2704.fv-wrap .fv-source .lc {2705	white-space: pre-wrap;2706	overflow-wrap: anywhere;2707}2708.fv-source .file-markdown {2709	font-family: var(--sans);2710	font-size: calc(var(--fv-size) + 2px);2711	color: var(--text);2712}2713.fv-detail .atlas-info-desc {2714	font-size: 0.8125rem;2715}2716.fv-detail {2717	overflow-y: auto;2718	padding: 18px 20px 24px;2719	background: var(--bg);2720	border-left: 1px solid var(--bg-elevated);2721}2722/* After the viewer's own rules, which would otherwise win at equal specificity. */2723@media (max-width: 768px) {2724	.fv-overlay {2725		background: var(--bg);2726	}2727	.fv-header {2728		flex-wrap: wrap;2729		height: auto;2730		padding: 8px 12px;2731		gap: 8px 12px;2732	}2733	.fv-title {2734		flex-basis: calc(100% - 40px);2735	}2736	.fv-body {2737		grid-template-columns: minmax(0, 1fr);2738	}2739	.fv-detail {2740		display: none;2741	}2742	.fv-source {2743		padding: 12px 16px 24px;2744	}2745	.fv-source .file-view {2746		margin: -12px -16px 0;2747	}2748}27492750/* Last in the file, after every animation it stops, so it wins without !important. */2751@media (prefers-reduced-motion: reduce) {2752	.tri-outer,2753	.tri-inner,2754	.repo-name,2755	.repo-contributor,2756	.repo-desc,2757	.repo-homepage,2758	.repo-meta,2759	.repo-tabs,2760	.install-lines,2761	.repo-section,2762	.repo-details,2763	.save-message-head,2764	.ticker-row,2765	.ticker-track,2766	.hex-col,2767	.headline h1,2768	.headline-tagline,2769	.headline-cloud,2770	.repo-card,2771	.profile-username,2772	.profile-event,2773	.fv-overlay,2774	.repo-panel {2775		animation: none;2776	}2777	.nav-toggle span {2778		transition: none;2779	}2780	.hex-col {2781		opacity: 0.12;2782	}2783}