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}135136main {137	max-width: 980px;138	margin: 0 auto;139	padding: 24px 48px 120px;140}141142footer {143	text-align: center;144	padding: 80px 24px 48px;145}146footer .credit {147	font-family: var(--mono);148	font-size: 0.6875rem;149	color: var(--text-muted);150}151152.mono {153	font-family: var(--mono);154	font-size: 0.8125rem;155	color: var(--text-secondary);156}157.muted {158	color: var(--text-muted);159}160161@keyframes fadeUp {162	from {163		opacity: 0;164		transform: translateY(6px);165	}166	to {167		opacity: 1;168		transform: translateY(0);169	}170}171@keyframes fadeIn {172	from {173		opacity: 0;174	}175}176177/* ----- repo header -------------------------------------------------------- */178179.repo-head {180	margin: 20px 0 24px;181}182.repo-name {183	font-family: "Comfortaa", var(--sans);184	font-weight: 700;185	font-size: 4rem;186	line-height: 1.05;187	margin: -0.1em 0 10px;188	color: var(--text);189	overflow-wrap: anywhere;190	animation: fadeUp 280ms ease both;191}192.repo-contributor {193	margin: 4px 0 0;194	font-size: 0.8125rem;195	animation: fadeUp 280ms 40ms ease both;196}197.repo-contributor a:hover {198	color: var(--accent);199}200.repo-desc,201.repo-homepage {202	margin: 0 0 10px;203	font-size: 1.0625rem;204	color: var(--text-secondary);205	line-height: 1.75;206	animation: fadeUp 280ms 30ms ease both;207}208.repo-desc p {209	margin: 12px 0 0;210}211.repo-desc a,212.repo-homepage a {213	color: var(--accent);214}215.repo-desc code {216	font-family: var(--mono);217	font-size: 0.85em;218	color: var(--accent);219}220.lang-badges {221	display: flex;222	flex-wrap: wrap;223	gap: 6px;224	margin: 8px 0 6px;225}226.lang-badge {227	font-family: var(--mono);228	font-size: 0.6875rem;229	color: var(--accent-dim);230	background: var(--bg-surface);231	border: 1px solid var(--border);232	border-radius: 3px;233	padding: 1px 7px;234	letter-spacing: 0.02em;235}236.repo-meta {237	margin: 0;238	font-size: 0.875rem;239	color: var(--text-muted);240	line-height: 1.7;241	animation: fadeUp 280ms 60ms ease both;242}243.repo-tabbar {244	display: flex;245	align-items: center;246	justify-content: space-between;247	flex-wrap: wrap;248	gap: 14px 20px;249	margin-top: 22px;250}251.repo-tabs {252	display: flex;253	gap: 24px;254	flex-wrap: wrap;255	font-family: var(--mono);256	animation: fadeUp 280ms 90ms ease both;257}258.repo-tab {259	font-size: 0.6875rem;260	color: var(--text-muted);261	padding: 0 0 11px;262	border-bottom: 1px solid transparent;263	transition:264		color 140ms,265		border-color 140ms;266}267.repo-tab:hover {268	color: var(--accent);269	text-decoration: none;270}271.repo-tab.active {272	color: var(--accent);273	border-bottom-color: var(--accent);274}275.repo-panel {276	padding: 10px 0 16px;277	animation: fadeIn 220ms ease both;278}279.repo-panel[hidden] {280	display: none;281}282.repo-steal-btn {283	display: block;284	width: fit-content;285	max-width: 100%;286	font-family: var(--mono);287	font-size: 0.75rem;288	color: var(--text-muted);289	background: var(--bg-surface);290	border: 1px solid var(--border);291	border-radius: 3px;292	padding: 5px 11px;293	cursor: pointer;294	letter-spacing: 0.03em;295	white-space: nowrap;296	overflow: hidden;297	text-overflow: ellipsis;298	transition:299		color 120ms,300		border-color 120ms;301}302.repo-steal-btn:hover,303.repo-steal-btn.copied {304	color: var(--accent);305	border-color: var(--accent-dim);306}307.install-lines {308	display: flex;309	flex-direction: column;310	align-items: flex-end;311	gap: 6px;312	max-width: 100%;313	margin-left: auto;314	animation: fadeUp 280ms 120ms ease both;315}316.install-line {317	display: flex;318	align-items: center;319	gap: 12px;320	max-width: 100%;321	font-family: var(--mono);322	font-size: 0.75rem;323	color: var(--text-muted);324	background: var(--bg-surface);325	border: 1px solid var(--border);326	border-radius: 3px;327	padding: 5px 11px;328}329.install-line code {330	white-space: pre;331	overflow-x: auto;332	font-family: inherit;333}334.copy-btn {335	background: none;336	border: 0;337	padding: 0;338	cursor: pointer;339	font: inherit;340	font-size: 0.625rem;341	color: var(--text-faint);342	letter-spacing: 0.04em;343}344.copy-btn:hover,345.copy-btn.copied {346	color: var(--accent);347}348349/* ----- sections ----------------------------------------------------------- */350351.repo-section {352	margin: 36px 0 0;353	animation: fadeIn 320ms 80ms ease both;354}355.repo-section-toggle > summary,356.repo-details-toggle > summary {357	list-style: none;358	cursor: pointer;359	user-select: none;360}361.repo-section-toggle > summary::-webkit-details-marker,362.repo-details-toggle > summary::-webkit-details-marker {363	display: none;364}365.section-head {366	display: flex;367	align-items: baseline;368	gap: 12px;369	padding-bottom: 8px;370	border-bottom: 1px solid var(--border);371	margin-bottom: 4px;372}373.section-head::after,374.repo-details-head::after {375	content: "▸";376	font-size: 0.5625rem;377	opacity: 0.4;378	transition: transform 120ms;379}380.section-head::after {381	margin-left: auto;382}383details[open] > .section-head::after,384details[open] > .repo-details-head::after {385	transform: rotate(90deg);386}387.section-label {388	font-size: 0.6875rem;389	letter-spacing: 0.12em;390	color: var(--text-secondary);391	text-transform: uppercase;392}393.section-count {394	font-family: var(--mono);395	font-size: 0.6875rem;396	color: var(--accent);397}398399/* ----- timeline ----------------------------------------------------------- */400401.timeline {402	display: block;403	margin: 18px 0 4px;404	overflow: visible;405}406.timeline-line {407	stroke: var(--text-faint);408	stroke-width: 1;409	stroke-dasharray: 4 4;410}411.timeline .dot circle {412	fill: var(--accent);413	transition:414		fill-opacity 120ms,415		r 120ms;416}417.timeline .d0 circle {418	fill: var(--accent-dim);419	fill-opacity: 0.45;420}421.timeline .d1 circle {422	fill-opacity: 0.55;423}424.timeline .d2 circle {425	fill-opacity: 0.8;426}427.timeline .d3 circle {428	fill: var(--accent-bright);429	fill-opacity: 1;430}431.timeline .dot:hover circle,432.timeline .dot:focus circle {433	fill: var(--accent-bright);434	fill-opacity: 1;435}436.timeline-canvas {437	display: block;438	margin: 18px 0 4px;439	cursor: grab;440	touch-action: pan-y;441}442.timeline-tip {443	position: fixed;444	z-index: 200;445	max-width: 340px;446	padding: 0.45rem 0.7rem;447	background: #0f0c08;448	border: 1px solid var(--border);449	border-radius: 4px;450	pointer-events: none;451	line-height: 1.5;452}453.timeline-tip .tip-id {454	font-family: var(--mono);455	font-size: 12px;456	color: var(--accent);457}458.timeline-tip .tip-msg {459	margin-top: 3px;460	font-style: italic;461	font-size: 15px;462	color: var(--text-heading);463}464.timeline-tip .tip-meta {465	margin-top: 4px;466	font-family: var(--mono);467	font-size: 10px;468	color: var(--text-muted);469}470471/* ----- history ------------------------------------------------------------ */472473.history-row {474	position: relative;475	display: grid;476	grid-template-columns: 110px 1fr auto;477	align-items: baseline;478	gap: 0 10px;479	padding: 9px 8px;480	border-bottom: 1px solid var(--border);481	transition: background 100ms;482}483.history-row::before {484	content: "";485	position: absolute;486	left: 0;487	top: 0;488	bottom: 0;489	width: 2px;490	background: var(--accent);491	transform: scaleY(0);492	transition: transform 120ms ease;493}494.history-row:hover {495	background: var(--accent-tint-04);496	text-decoration: none;497}498.history-row:hover::before {499	transform: scaleY(1);500}501.history-id {502	font-family: var(--mono);503	font-size: 0.75rem;504	color: var(--text-secondary);505}506.history-msg {507	min-width: 0;508	line-height: 1.7;509	overflow: hidden;510	text-overflow: ellipsis;511	white-space: nowrap;512	transition: color 100ms;513}514.history-row:hover .history-msg {515	color: var(--accent);516}517.history-when {518	font-family: var(--mono);519	font-size: 0.6875rem;520	color: var(--text-muted);521	white-space: nowrap;522}523/* Kepr 2's history: four rows at a time, the rest a scroll away. */524.save-list {525	max-height: 180px;526	overflow-y: auto;527	scrollbar-width: thin;528	scrollbar-color: var(--border) transparent;529}530.pager {531	display: flex;532	justify-content: space-between;533	margin: 14px 0 0;534	font-size: 0.6875rem;535}536.pager a:last-child {537	margin-left: auto;538}539.pager a:hover {540	color: var(--accent);541}542543/* ----- atlas -------------------------------------------------------------- */544545.atlas-bar {546	display: flex;547	align-items: center;548	flex-wrap: wrap;549	gap: 8px 14px;550	margin: 10px 0 8px;551	font-size: 0.625rem;552}553.atlas-picker {554	position: relative;555}556/* Each section's fade-in makes it a stacking context, so the picker's popover would sit under the557   sections after it; the Atlas's section is lifted above them. */558#atlas {559	position: relative;560	z-index: 2;561}562.atlas-picker [hidden] {563	display: none;564}565.atlas-ref-tab {566	list-style: none;567	cursor: pointer;568	padding: 4px 8px;569	background: var(--bg);570	border: 1px solid rgba(200, 154, 90, 0.45);571	border-radius: 2px;572	font-size: 0.625rem;573	color: var(--accent);574}575.atlas-ref-tab::-webkit-details-marker {576	display: none;577}578.atlas-ref-tab:hover {579	color: var(--accent-dim);580}581.atlas-picker-popover {582	position: absolute;583	top: calc(100% + 6px);584	left: 0;585	z-index: 50;586	display: flex;587	flex-direction: column;588	width: min(420px, 90vw);589	max-height: 480px;590	background: var(--bg);591	border: 1px solid var(--text-faint);592	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);593}594.atlas-picker-filter {595	padding: 8px 10px;596	background: var(--bg);597	border: 0;598	border-bottom: 1px solid var(--bg-elevated);599	outline: none;600	font-size: 0.6875rem;601	color: var(--text-heading);602}603.atlas-picker-filter::placeholder {604	color: var(--text-faint);605}606.atlas-picker-list {607	flex: 1 1 auto;608	min-height: 0;609	overflow: auto;610	scrollbar-width: thin;611	scrollbar-color: var(--border) transparent;612}613.atlas-picker-row {614	display: grid;615	grid-template-columns: 80px 1fr auto;616	align-items: center;617	gap: 8px;618	padding: 6px 10px;619	border-bottom: 1px solid rgba(42, 32, 24, 0.4);620	color: var(--text-muted);621}622.atlas-picker-row:hover {623	background: rgba(200, 154, 90, 0.06);624	text-decoration: none;625}626.atlas-picker-row.active {627	background: rgba(200, 154, 90, 0.1);628}629.atlas-picker-row:hover *,630.atlas-picker-row.active * {631	color: var(--accent);632}633.atlas-picker-id,634.atlas-picker-age {635	font-family: var(--mono);636	font-size: 0.5625rem;637	color: var(--text-faint);638	white-space: nowrap;639	overflow: hidden;640	text-overflow: ellipsis;641}642.atlas-picker-msg {643	font-size: 0.6875rem;644	white-space: nowrap;645	overflow: hidden;646	text-overflow: ellipsis;647}648.atlas-head-link {649	color: var(--accent);650}651.atlas-search-btn {652	margin-left: auto;653	padding: 4px 8px;654	background: transparent;655	border: 1px solid var(--border);656	border-radius: 2px;657	font: inherit;658	font-size: 0.625rem;659	color: var(--text-faint);660	cursor: pointer;661}662.atlas-search-btn:hover {663	color: var(--accent);664	border-color: var(--accent-dim);665}666.atlas-search-btn[hidden],667.atlas-filter[hidden] {668	display: none;669}670.atlas-filter {671	width: 220px;672	max-width: 100%;673	margin-left: auto;674	padding: 5px 10px;675	background: transparent;676	border: 1px solid var(--border);677	border-radius: 3px;678	color: var(--text);679	font-size: 0.6875rem;680}681.atlas-filter:focus {682	outline: none;683	border-color: var(--accent-dim);684}685.atlas-filter::placeholder {686	color: var(--text-faint);687}688/* kepr.js fixes the height at the closed tree's, at most Kepr 2's 520px, and the tree and panel689   scroll inside it; without it, the whole box scrolls. */690.atlas {691	display: grid;692	grid-template-columns: minmax(0, 1fr);693	grid-template-rows: minmax(0, 1fr);694	gap: 0 20px;695	max-height: 520px;696	overflow-y: auto;697	border-top: 1px solid var(--bg-elevated);698	border-bottom: 1px solid var(--bg-elevated);699}700.atlas-tree,701.atlas-panel {702	min-height: 0;703	overflow-y: auto;704	scrollbar-width: thin;705	scrollbar-color: var(--border) transparent;706}707.atlas:has(> .atlas-panel:not([hidden])) {708	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);709}710.atlas [hidden] {711	display: none;712}713.atlas-folder > summary {714	list-style: none;715}716.atlas-folder > summary::-webkit-details-marker {717	display: none;718}719.atlas-children {720	padding-left: 14px;721	border-left: 1px solid var(--border);722	margin-left: 6px;723}724.atlas-row {725	position: relative;726	display: grid;727	grid-template-columns: minmax(90px, auto) 1fr auto;728	align-items: baseline;729	gap: 0 12px;730	padding: 6px 8px;731	border-bottom: 1px solid rgba(42, 32, 24, 0.62);732	cursor: pointer;733	transition: background 100ms;734}735.atlas-row:hover,736.atlas-row:focus-visible,737.atlas-row.selected {738	outline: none;739	background: var(--accent-tint-04);740	text-decoration: none;741}742.atlas-row.selected {743	box-shadow: inset 2px 0 0 var(--accent);744}745.atlas-name {746	color: var(--text-heading);747	font-size: 0.875rem;748	white-space: nowrap;749}750.atlas-folder > summary .atlas-name {751	color: var(--accent);752}753.atlas-desc {754	min-width: 0;755	color: var(--text-muted);756	font-size: 0.8125rem;757	overflow: hidden;758	text-overflow: ellipsis;759	white-space: nowrap;760}761.atlas-meta {762	font-size: 0.625rem;763	color: var(--text-faint);764	white-space: nowrap;765}766.atlas-panel {767	padding: 12px 0 12px 16px;768	border-left: 1px solid var(--border);769}770.atlas-hint {771	margin: 0;772	font-size: 0.625rem;773	color: var(--text-faint);774}775.atlas-info-name {776	margin: 0;777	font-weight: 400;778	font-size: 1.375rem;779	color: var(--text-heading);780	overflow-wrap: anywhere;781}782.atlas-info-path {783	margin: 0 0 12px;784	font-size: 0.625rem;785	color: var(--text-faint);786	overflow-wrap: anywhere;787}788.atlas-facts {789	display: grid;790	grid-template-columns: auto 1fr;791	gap: 3px 12px;792	margin: 0 0 12px;793	font-size: 0.625rem;794}795.atlas-facts dt {796	color: var(--text-faint);797}798.atlas-facts dd {799	margin: 0;800	color: var(--text);801}802.atlas-facts a {803	color: var(--accent);804}805.atlas-info-desc {806	font-size: 0.8125rem;807	color: var(--text-muted);808}809/* ----- README and rendered Markdown --------------------------------------- */810811.repo-details {812	margin: 36px 0 0;813	animation: fadeIn 320ms 80ms ease both;814}815.repo-details-toggle {816	border-bottom: 1px solid var(--border);817	padding-bottom: 24px;818}819.repo-details-head {820	display: flex;821	align-items: center;822	gap: 6px;823	padding: 8px 0;824	font-family: var(--mono);825	font-size: 0.6875rem;826	letter-spacing: 0.12em;827	color: var(--text-secondary);828	text-transform: uppercase;829}830.markdown {831	font-size: 1.05rem;832	line-height: 1.7;833	overflow-wrap: break-word;834}835.markdown h1,836.markdown h2,837.markdown h3,838.markdown h4 {839	font-weight: 400;840	margin: 1.4em 0 0.4em;841	color: var(--text-heading);842}843.markdown h1 {844	font-size: 1.5rem;845}846.markdown h2 {847	font-size: 1.3rem;848}849.markdown h3 {850	font-size: 1.15rem;851}852.markdown p {853	margin: 0.8em 0;854}855.markdown ul,856.markdown ol {857	margin: 0.8em 0 0.8em 1.5em;858	padding: 0;859}860.markdown a {861	color: var(--accent);862}863.markdown code {864	font-family: var(--mono);865	font-size: 0.82em;866	color: var(--accent);867	background: var(--bg-surface);868	padding: 0.15em 0.35em;869	border-radius: 3px;870}871.markdown pre {872	background: var(--bg-surface);873	border-radius: 4px;874	padding: 1em 1.2em;875	overflow-x: auto;876	margin: 1em 0;877}878.markdown pre code {879	background: none;880	padding: 0;881	color: var(--text);882	font-size: 0.85em;883}884.markdown blockquote {885	border-left: 3px solid var(--border);886	margin: 1em 0;887	padding: 0.1em 1em;888	color: var(--text-secondary);889}890.markdown hr {891	border: none;892	border-top: 1px solid var(--border);893	margin: 1.5em 0;894}895.markdown img {896	max-width: 100%;897}898.markdown table {899	border-collapse: collapse;900	display: block;901	overflow-x: auto;902}903.markdown th,904.markdown td {905	border: 1px solid var(--border);906	padding: 4px 10px;907}908909/* ----- file viewer -------------------------------------------------------- */910911.breadcrumb {912	margin: 0 0 4px;913	font-size: 0.75rem;914	overflow-wrap: anywhere;915}916.breadcrumb a:hover {917	color: var(--accent);918}919.file-page-title {920	font-size: 1.75rem;921	font-weight: 400;922	margin: 4px 0 12px;923	overflow-wrap: anywhere;924}925.file-meta,926.file-toggle {927	margin: 0 0 12px;928	font-size: 0.6875rem;929}930.file-meta a,931.file-toggle a.active {932	color: var(--accent);933}934.file-image img {935	max-width: 100%;936	background: var(--bg-surface);937	border: 1px solid var(--border);938}939.file-view {940	border: 1px solid var(--border);941	background: var(--bg-surface);942	overflow-x: auto;943}944.code {945	margin: 0;946	padding: 16px 0;947	font-family: var(--mono);948	font-size: 0.8125rem;949	line-height: 1.65;950	tab-size: 4;951}952/* A grid, so tab stops count from the start of the code rather than the line number. */953.code .line {954	display: grid;955	grid-template-columns: 6em 1fr;956	padding-right: 24px;957	scroll-margin-top: 40vh;958}959.code .line:target,960.code .line.hl {961	background: var(--accent-tint-12);962}963.code .lc {964	white-space: pre;965}966.code .ln {967	padding-right: 1.5em;968	text-align: right;969	color: var(--text-faint);970	user-select: none;971}972.code .ln:hover {973	color: var(--accent);974	text-decoration: none;975}976977/* Shiki's CSS-variables theme roles, in Kepr 2's highlight.js colours. */978.tk-comment {979	color: var(--text-muted);980	font-style: italic;981}982.tk-keyword {983	color: var(--accent);984}985.tk-string,986.tk-string-expression {987	color: var(--sage);988}989.tk-constant {990	color: var(--accent-bright);991}992.tk-function {993	color: var(--accent);994}995.tk-parameter {996	color: var(--text);997}998.tk-punctuation {999	color: var(--text-secondary);1000}1001.tk-link {1002	color: var(--accent);1003	text-decoration: underline;1004}1005.tk-inserted {1006	color: var(--sage);1007}1008.tk-deleted {1009	color: #c45c5c;1010}1011.tk-i {1012	font-style: italic;1013}10141015/* ----- save page ---------------------------------------------------------- */10161017.save-id {1018	margin: 12px 0 0;1019	font-size: 0.75rem;1020	color: var(--text-secondary);1021}1022.save-flag {1023	margin: 12px 0 0;1024	padding: 8px 12px;1025	border: 1px solid #6a3a2a;1026	border-left: 2px solid #c45c5c;1027	background: rgba(196, 92, 92, 0.08);1028	color: var(--text-heading);1029}1030.save-flag-label {1031	margin-right: 8px;1032	font-size: 0.625rem;1033	letter-spacing: 0.12em;1034	text-transform: uppercase;1035	color: #c45c5c;1036}1037.save-message-head {1038	font-size: 2.25rem;1039	font-weight: 400;1040	line-height: 1.3;1041	margin: 12px 0 8px;1042	color: var(--text-heading);1043	overflow-wrap: anywhere;1044	animation: fadeUp 280ms ease both;1045}1046.save-message-body {1047	margin: 0 0 12px;1048	white-space: pre-wrap;1049	color: var(--text-secondary);1050}1051.save-facts {1052	display: grid;1053	grid-template-columns: max-content 1fr;1054	gap: 2px 16px;1055	margin: 16px 0;1056	font-size: 0.75rem;1057}1058.save-facts dt {1059	color: var(--text-faint);1060}1061.save-facts dd {1062	margin: 0;1063	overflow-wrap: anywhere;1064}1065.save-facts a,1066.save-links a,1067.diff-view a {1068	color: var(--accent);1069}1070.save-links {1071	display: flex;1072	flex-wrap: wrap;1073	gap: 8px 20px;1074	margin: 0;1075	font-size: 0.75rem;1076}1077.save-empty {1078	font-size: 0.75rem;1079}1080.change-row,1081.diff-head {1082	display: grid;1083	grid-template-columns: 1fr auto;1084	gap: 12px;1085	padding: 7px 8px;1086	border-bottom: 1px solid var(--border);1087	font-family: var(--mono);1088	font-size: 0.8125rem;1089}1090.change-row:hover {1091	background: var(--accent-tint-04);1092	text-decoration: none;1093}1094.change-path {1095	min-width: 0;1096	overflow-wrap: anywhere;1097}1098.change-added .change-path {1099	color: var(--sage);1100}1101.change-removed .change-path {1102	color: var(--text-muted);1103	text-decoration: line-through;1104}1105.change-modified .change-path {1106	color: var(--accent-bright);1107}1108.change-stat {1109	font-size: 0.75rem;1110	white-space: nowrap;1111}1112.diff-add {1113	color: var(--sage);1114}1115.diff-del {1116	color: #c45c5c;1117}1118.diff-note {1119	color: var(--text-faint);1120	font-size: 0.6875rem;1121}1122.diff-file {1123	margin: 0 0 20px;1124}1125.diff-head {1126	cursor: pointer;1127	list-style: none;1128	border: 1px solid var(--border);1129	background: var(--bg-surface);1130}1131.diff-head::-webkit-details-marker {1132	display: none;1133}1134.diff-file > .file-view {1135	border-top: 0;1136}1137.diff-file > .diff-note,1138.diff-view {1139	margin: 8px 0 0;1140	font-size: 0.6875rem;1141}1142.code.diff {1143	padding: 4px 0;1144}1145.diff .dl {1146	display: grid;1147	grid-template-columns: 3.5em 3.5em 1.5em 1fr;1148	padding-right: 24px;1149}1150.diff .dh {1151	display: block;1152	padding: 4px 1em;1153	color: var(--text-faint);1154	background: var(--bg-elevated);1155}1156.diff .ln {1157	padding-right: 0.75em;1158	text-align: right;1159	color: var(--text-faint);1160	user-select: none;1161}1162.diff .ds {1163	text-align: center;1164	color: var(--text-faint);1165	user-select: none;1166}1167.diff .dl-add {1168	background: rgba(122, 154, 104, 0.1);1169}1170.diff .dl-add .ds {1171	color: var(--sage);1172}1173.diff .dl-del {1174	background: rgba(196, 92, 92, 0.08);1175}1176.diff .dl-del .ds {1177	color: #c45c5c;1178}11791180/* ----- archives ----------------------------------------------------------- */11811182.archive-row {1183	padding: 12px 8px;1184	border-bottom: 1px solid var(--border);1185}1186.archive-save {1187	display: flex;1188	flex-wrap: wrap;1189	align-items: baseline;1190	gap: 0 10px;1191	margin: 0;1192}1193.archive-save .history-id {1194	flex: 0 0 110px;1195}1196.archive-msg {1197	flex: 1;1198}1199.archive-head {1200	font-size: 0.625rem;1201	letter-spacing: 0.08em;1202	color: var(--accent);1203	border: 1px solid var(--accent-dim);1204	border-radius: 2px;1205	padding: 0 6px;1206}1207.archive-save .history-id:hover {1208	color: var(--accent);1209}1210.archive-links {1211	margin: 6px 0;1212	font-size: 0.75rem;1213}1214.archive-links a {1215	color: var(--accent);1216}1217.archive-row .install-line {1218	justify-content: space-between;1219}12201221/* ----- phone -------------------------------------------------------------- */12221223@media (max-width: 768px) {1224	body > nav {1225		padding: 20px 16px;1226	}1227	.nav-links {1228		gap: 18px;1229	}1230	main {1231		padding: 16px 16px 80px;1232	}1233	.repo-name {1234		font-size: 2.75rem;1235	}1236	.install-lines {1237		align-items: stretch;1238		margin-left: 0;1239		width: 100%;1240	}1241	.history-row {1242		grid-template-columns: 1fr auto;1243	}1244	.history-id {1245		grid-column: 1 / -1;1246	}1247	.atlas-row {1248		grid-template-columns: 1fr auto;1249	}1250	.atlas-desc {1251		grid-column: 1 / -1;1252		grid-row: 2;1253	}1254	.atlas:has(> .atlas-panel:not([hidden])) {1255		grid-template-columns: minmax(0, 1fr);1256	}1257	.atlas-panel {1258		display: none;1259	}1260	.code .line {1261		grid-template-columns: 4.5em 1fr;1262	}1263	.save-message-head {1264		font-size: 1.625rem;1265	}1266	.archive-msg {1267		flex-basis: 100%;1268		order: 1;1269	}1270	.diff .dl {1271		grid-template-columns: 2.75em 2.75em 1.25em 1fr;1272	}1273	.code .ln {1274		padding-right: 1em;1275	}1276}12771278/* ----- builds ------------------------------------------------------------- */12791280.release {1281	padding: 20px 8px 24px;1282	border-bottom: 1px solid var(--border);1283}1284.release-head {1285	display: flex;1286	flex-wrap: wrap;1287	align-items: baseline;1288	gap: 0 14px;1289	margin: 0 0 8px;1290}1291.release-version {1292	font-family: "Martian Mono", monospace;1293	font-size: 1rem;1294	color: var(--accent);1295}1296.release-head .history-id:hover {1297	color: var(--accent);1298}1299.release-notes {1300	margin-bottom: 14px;1301}1302.release-file {1303	padding: 10px 0;1304	border-top: 1px dashed var(--border);1305}1306.release-file-head {1307	display: flex;1308	flex-wrap: wrap;1309	align-items: baseline;1310	gap: 4px 14px;1311	margin: 0;1312}1313.release-platform {1314	flex: 0 0 180px;1315}1316.release-download {1317	flex: 1;1318	font-size: 0.75rem;1319	color: var(--accent);1320	overflow-wrap: anywhere;1321}1322.release-meta,1323.release-sha {1324	font-size: 0.6875rem;1325	color: var(--text-muted);1326}1327.release-sha {1328	margin: 4px 0 0;1329	overflow-wrap: anywhere;1330}1331.release-hint {1332	margin: 4px 0 0;1333	font-size: 0.8125rem;1334}13351336/* ----- issues ------------------------------------------------------------- */13371338.issues-bar {1339	display: flex;1340	flex-wrap: wrap;1341	align-items: center;1342	gap: 8px 12px;1343	font-size: 0.75rem;1344	padding-bottom: 14px;1345	border-bottom: 1px solid var(--bg-elevated);1346}1347.issues-tab {1348	color: var(--text-faint);1349	border: 1px solid transparent;1350	border-radius: 999px;1351	padding: 4px 10px;1352}1353button.issues-tab {1354	font: inherit;1355	background: none;1356	cursor: pointer;1357}1358.issues-tab.active {1359	color: var(--accent);1360	border-color: var(--accent-tint-12);1361}1362.issues-new {1363	margin-left: auto;1364	color: var(--text-muted);1365}1366.issue-row {1367	display: flex;1368	flex-wrap: wrap;1369	align-items: baseline;1370	gap: 2px 10px;1371	padding: 10px 8px;1372	border-bottom: 1px solid var(--border);1373}1374.issue-row:hover {1375	text-decoration: none;1376	background: var(--accent-tint-04);1377}1378.issue-title {1379	flex: 1;1380	color: var(--text-heading);1381}1382.issues-new:hover,1383.issue-row:hover .issue-title {1384	color: var(--accent);1385}1386.issue-meta,1387.issue-post-head {1388	font-size: 0.6875rem;1389	color: var(--text-muted);1390}1391.issue-symbol--open {1392	color: var(--accent);1393}1394.issue-symbol--closed {1395	color: var(--text-faint);1396}1397.issue-post {1398	margin: 18px 0;1399	padding: 14px 18px;1400	border: 1px solid var(--border);1401	border-radius: 6px;1402	background: var(--bg-surface);1403}1404.issue-post--operator {1405	border-color: var(--accent-dim);1406}1407.issue-post-head {1408	display: flex;1409	flex-wrap: wrap;1410	gap: 4px 12px;1411	margin: 0 0 8px;1412}1413.issue-author {1414	color: var(--text);1415}1416.issue-badge {1417	color: var(--accent);1418	text-transform: uppercase;1419	letter-spacing: 0.08em;1420}1421.issue-text {1422	white-space: pre-wrap;1423	overflow-wrap: anywhere;1424}1425.issue-link {1426	font-size: 0.75rem;1427	overflow-wrap: anywhere;1428	color: var(--accent);1429}1430.issues-form {1431	display: flex;1432	flex-direction: column;1433	gap: 6px;1434	max-width: 640px;1435	margin-top: 18px;1436}1437.issues-label {1438	font-family: var(--mono);1439	font-size: 0.6875rem;1440	margin-top: 6px;1441	opacity: 0.8;1442}1443.issues-input,1444.issues-textarea {1445	font-family: var(--mono);1446	font-size: 0.75rem;1447	width: 100%;1448	padding: 6px 8px;1449	color: var(--text);1450	background: var(--bg);1451	border: 1px solid var(--border);1452	border-radius: 4px;1453	resize: vertical;1454}1455.issues-input:focus,1456.issues-textarea:focus {1457	outline: none;1458	border-color: var(--accent);1459}1460.issues-submit {1461	align-self: flex-start;1462	margin-top: 10px;1463	padding: 6px 14px;1464	font-family: var(--mono);1465	font-size: 0.75rem;1466	color: var(--bg);1467	background: var(--accent);1468	border: none;1469	border-radius: 4px;1470	cursor: pointer;1471}1472.issues-submit:hover {1473	opacity: 0.85;1474}1475.issues-actions {1476	display: flex;1477	align-items: baseline;1478	gap: 16px;1479	margin: 0;1480}1481.issues-cancel {1482	font-size: 0.75rem;1483	color: var(--text-muted);1484}1485.issues-cancel:hover {1486	color: var(--accent);1487}1488.issues-error {1489	font-size: 0.75rem;1490	color: #c86a5a;1491}1492/* The honeypot: off-screen for people, still in the form for bots. */1493.issues-hp {1494	position: absolute;1495	left: -9999px;1496	height: 0;1497	overflow: hidden;1498	opacity: 0;1499}15001501/* ----- front page --------------------------------------------------------- */15021503/* Kepr 2's hero band, full width, reaching up behind the nav (32px mark + 48px padding). */1504body > nav {1505	position: relative;1506	z-index: 1;1507}1508.ticker {1509	position: relative;1510	height: 304px;1511	margin: -104px calc(50% - 50vw) 0;1512	padding: 96px 0 20px;1513	display: flex;1514	flex-direction: column;1515	justify-content: space-evenly;1516	overflow: hidden;1517	pointer-events: none;1518	user-select: none;1519	border-bottom: 1px solid var(--border);1520	font-family: var(--mono);1521	color: var(--text-secondary);1522	mask-image: linear-gradient(1523		to right,1524		transparent,1525		#000 48px,1526		#000 calc(100% - 48px),1527		transparent1528	);1529}1530.ticker-row {1531	white-space: nowrap;1532	line-height: 1.2;1533	opacity: var(--o);1534	animation: ticker-glow 83s var(--glow-at) ease-in-out infinite;1535}1536/* The drift's duration is set by kepr.js from the track's width, so every row keeps Kepr 2's1537   pace in px/s (--speed) however long its messages are; this is the no-JavaScript fallback. */1538.ticker-track {1539	display: inline-flex;1540	gap: 64px;1541	padding-right: 64px;1542	animation: ticker-drift 1500s linear infinite;1543}1544/* Kepr 2's depth bands: nearer rows are larger, brighter and faster. Each row takes its turn at1545   the glow, a few seconds out of every 83, spaced so one or two glow at a time. */1546.ticker-row:nth-child(1) {1547	font-size: 9px;1548	--o: 0.05;1549	--speed: 12;1550	--glow-at: -5s;1551}1552.ticker-row:nth-child(2) {1553	font-size: 18px;1554	--o: 0.1;1555	--speed: 23;1556	--glow-at: -41s;1557}1558.ticker-row:nth-child(3) {1559	font-size: 7px;1560	--o: 0.04;1561	--speed: 9;1562	--glow-at: -77s;1563}1564.ticker-row:nth-child(4) {1565	font-size: 13px;1566	--o: 0.07;1567	--speed: 17;1568	--glow-at: -29s;1569}1570.ticker-row:nth-child(5) {1571	font-size: 22px;1572	--o: 0.12;1573	--speed: 29;1574	--glow-at: -65s;1575}1576.ticker-row:nth-child(6) {1577	font-size: 8px;1578	--o: 0.045;1579	--speed: 10;1580	--glow-at: -17s;1581}1582.ticker-row:nth-child(7) {1583	font-size: 15px;1584	--o: 0.08;1585	--speed: 20;1586	--glow-at: -53s;1587}1588@keyframes ticker-drift {1589	to {1590		transform: translateX(-50%);1591	}1592}1593@keyframes ticker-glow {1594	0%,1595	10%,1596	100% {1597		color: var(--text-secondary);1598		opacity: var(--o);1599		text-shadow: none;1600	}1601	5% {1602		color: var(--accent);1603		opacity: calc(var(--o) * 3.5);1604		text-shadow: 0 0 3px var(--accent-tint-12);1605	}1606}16071608.headline {1609	display: grid;1610	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);1611	gap: 48px;1612	align-items: center;1613	padding: 56px 0 40px;1614}1615.headline h1 {1616	font-size: clamp(2rem, 5vw, 3.5rem);1617	font-weight: 400;1618	line-height: 1.15;1619	color: var(--text-heading);1620	margin: 0 0 20px;1621	animation: fadeUp 480ms ease both;1622}1623.headline-tagline {1624	margin: 0;1625	font-size: 0.9375rem;1626	line-height: 1.7;1627	color: var(--text-secondary);1628	animation: fadeUp 480ms 80ms ease both;1629}1630.headline-cloud {1631	display: flex;1632	flex-wrap: wrap;1633	justify-content: center;1634	align-items: center;1635	gap: 10px 22px;1636	padding: 20px;1637	animation: fadeIn 600ms 160ms ease both;1638}1639.tc-tag {1640	font-family: var(--mono);1641	letter-spacing: 0.03em;1642	white-space: nowrap;1643	color: var(--accent-dim);1644	transition:1645		color 0.2s,1646		opacity 0.2s,1647		text-shadow 0.2s;1648}1649.tc-tag:hover {1650	color: var(--accent);1651	opacity: 1;1652	text-shadow: 0 0 14px var(--accent-tint-12);1653}1654.tc-1 {1655	font-size: 10px;1656	opacity: 0.42;1657}1658.tc-2 {1659	font-size: 12px;1660	opacity: 0.56;1661}1662.tc-3 {1663	font-size: 15px;1664	opacity: 0.7;1665}1666.tc-4 {1667	font-size: 18px;1668	opacity: 0.85;1669	font-weight: 500;1670}1671.tc-5 {1672	font-size: 23px;1673	opacity: 1;1674	font-weight: 500;1675}16761677.featured-label {1678	font-size: 0.6875rem;1679	font-weight: 400;1680	letter-spacing: 0.08em;1681	text-transform: uppercase;1682	color: var(--text-secondary);1683	margin: 0 0 12px;1684}1685.landing-self-host {1686	margin: 32px 0 0;1687	font-size: 0.75rem;1688}1689.landing-self-host a {1690	color: var(--text-secondary);1691}16921693/* ----- repo cards (front page, browse, profile) --------------------------- */16941695.card-grid {1696	display: grid;1697	grid-template-columns: repeat(2, minmax(0, 1fr));1698	gap: 16px;1699}1700.repo-card {1701	display: flex;1702	flex-direction: column;1703	padding: 20px 22px 16px;1704	border: 1px solid var(--bg-elevated);1705	border-radius: 4px;1706	background: var(--bg);1707	transition:1708		border-color 120ms,1709		background 120ms;1710	animation: fadeUp 350ms ease both;1711}1712.repo-card:hover {1713	text-decoration: none;1714	border-color: var(--text-faint);1715	background: var(--accent-tint-04);1716}1717.repo-card-head {1718	display: flex;1719	align-items: baseline;1720	justify-content: space-between;1721	gap: 12px;1722}1723.repo-card-name {1724	font-size: 1.375rem;1725	line-height: 1.1;1726	color: var(--accent);1727	overflow: hidden;1728	text-overflow: ellipsis;1729	white-space: nowrap;1730}1731.repo-card-saves {1732	font-size: 0.6875rem;1733	white-space: nowrap;1734}1735.repo-card-desc {1736	margin: 8px 0 0;1737	font-size: 0.8125rem;1738	line-height: 1.5;1739	color: var(--text-secondary);1740	display: -webkit-box;1741	-webkit-line-clamp: 2;1742	-webkit-box-orient: vertical;1743	overflow: hidden;1744}1745.repo-card-cat {1746	margin: 10px 0 0;1747	font-size: 0.9375rem;1748	color: var(--text);1749}17501751/* ----- profile ------------------------------------------------------------ */17521753/* The cover runs the full width of the window while the page keeps its column. */1754.profile-cover {1755	position: relative;1756	height: 380px;1757	margin: -24px calc(50% - 50vw) 0;1758	overflow: hidden;1759	border-bottom: 1px solid var(--bg-surface);1760}1761.hex-backdrop {1762	position: absolute;1763	inset: 0;1764	display: flex;1765	flex-direction: row-reverse;1766	justify-content: center;1767	align-items: center;1768	gap: 13px;1769	pointer-events: none;1770	user-select: none;1771	font-family: var(--mono);1772	font-size: 13px;1773	line-height: 16px;1774	color: var(--accent-dim);1775}1776/* Characters top to bottom, columns right to left, each breathing on its own clock. */1777.hex-col {1778	writing-mode: vertical-rl;1779	text-orientation: upright;1780	letter-spacing: 3px;1781	opacity: 0.05;1782	animation: hex-breathe 17s ease-in-out infinite;1783	transition:1784		color 1.6s ease,1785		text-shadow 1.6s ease;1786}1787.hex-col:nth-child(3n) {1788	color: var(--accent);1789	animation-duration: 23s;1790	animation-delay: -7s;1791}1792.hex-col:nth-child(4n + 1) {1793	animation-duration: 29s;1794	animation-delay: -13s;1795}1796.hex-col:nth-child(5n + 2) {1797	animation-duration: 19s;1798	animation-delay: -3s;1799}1800.hex-col:nth-child(7n) {1801	animation-delay: -21s;1802}1803.hex-col.glow {1804	color: var(--accent-bright);1805	text-shadow: 0 0 6px var(--accent-tint-12);1806}1807@keyframes hex-breathe {1808	0%,1809	100% {1810		opacity: 0.05;1811	}1812	50% {1813		opacity: 0.22;1814	}1815}1816.profile-cover-fade {1817	position: absolute;1818	left: 0;1819	right: 0;1820	bottom: 0;1821	height: 55%;1822	background: linear-gradient(to bottom, transparent, var(--bg));1823	pointer-events: none;1824}1825.profile-identity {1826	position: absolute;1827	bottom: 40px;1828	left: 0;1829	right: 0;1830	max-width: 980px;1831	margin: 0 auto;1832	padding: 0 48px;1833}1834.profile-username {1835	margin: 0 0 8px;1836	font-family: "Sacramento", cursive;1837	font-weight: 400;1838	font-size: 3.625rem;1839	line-height: 1;1840	letter-spacing: -0.02em;1841	text-transform: lowercase;1842	color: var(--text-heading);1843	user-select: none;1844	animation: fadeUp 500ms ease both;1845}1846.profile-signature {1847	display: block;1848	max-height: 96px;1849	max-width: min(360px, 100%);1850}1851.profile-tagline {1852	margin: 0 0 6px;1853	font-family: var(--mono);1854	font-size: 0.75rem;1855	letter-spacing: 0.15em;1856	color: var(--text-faint);1857}1858.profile-op-badge {1859	display: block;1860	font-size: 0.6875rem;1861	letter-spacing: 0.18em;1862	color: var(--accent);1863}18641865.profile-portrait-section {1866	display: grid;1867	grid-template-columns: 320px minmax(0, 1fr);1868	gap: 40px;1869	align-items: start;1870	padding-top: 40px;1871}1872.profile-left {1873	display: flex;1874	flex-direction: column;1875	gap: 16px;1876}1877.profile-identity-card,1878.profile-languages-bar {1879	padding: 20px 24px;1880	border: 1px solid var(--bg-elevated);1881	border-radius: 4px;1882}1883.profile-identity-bio {1884	margin: 0;1885	font-size: 0.875rem;1886	line-height: 1.5;1887	color: var(--text-muted);1888}1889.profile-identity-location {1890	margin: 6px 0 0;1891	font-family: var(--mono);1892	font-size: 0.8125rem;1893	color: var(--text-muted);1894}1895.profile-website-pill {1896	display: inline-block;1897	max-width: 100%;1898	margin-top: 10px;1899	padding: 3px 8px;1900	overflow: hidden;1901	text-overflow: ellipsis;1902	white-space: nowrap;1903	border: 1px solid var(--text-faint);1904	border-radius: 3px;1905	background: var(--bg-surface);1906	font-family: var(--mono);1907	font-size: 0.6875rem;1908	color: var(--accent);1909}1910.profile-website-pill:hover {1911	border-color: var(--accent);1912	text-decoration: none;1913}1914.profile-stats-grid {1915	display: grid;1916	grid-template-columns: 1fr 1fr;1917	border: 1px solid var(--bg-elevated);1918	border-radius: 4px;1919	overflow: hidden;1920}1921.profile-stat-tile {1922	padding: 16px;1923	border-right: 1px solid var(--bg-elevated);1924	border-bottom: 1px solid var(--bg-elevated);1925}1926.profile-stat-tile:nth-child(2n) {1927	border-right: none;1928}1929.profile-stat-tile:nth-last-child(-n + 2) {1930	border-bottom: none;1931}1932.profile-stat-number {1933	margin-bottom: 4px;1934	font-weight: 600;1935	font-size: 1.75rem;1936	line-height: 1;1937	color: var(--accent);1938}1939.profile-stat-label,1940.profile-section-label {1941	font-family: var(--mono);1942	font-size: 0.625rem;1943	text-transform: uppercase;1944	letter-spacing: 0.08em;1945	color: var(--text-faint);1946}1947.profile-lang-bar {1948	display: block;1949	width: 100%;1950	height: 6px;1951	margin-bottom: 8px;1952	border-radius: 3px;1953	background: var(--bg-surface);1954}1955.profile-lang-bar rect {1956	fill: var(--accent);1957	opacity: 0.6;1958}1959.profile-lang-bar rect:nth-child(2) {1960	fill: var(--sage);1961}1962.profile-lang-bar rect:nth-child(3) {1963	fill: var(--accent-flash);1964	opacity: 0.45;1965}1966.profile-lang-bar rect:nth-child(4) {1967	fill: var(--accent-dim);1968}1969.profile-lang-labels {1970	display: flex;1971	flex-wrap: wrap;1972	gap: 10px;1973	font-family: var(--mono);1974	font-size: 0.625rem;1975	color: var(--text-muted);1976}1977.profile-section-label {1978	margin-bottom: 16px;1979	letter-spacing: 0.2em;1980}1981.profile-event {1982	display: grid;1983	grid-template-columns: 96px 12px minmax(0, 1fr) auto;1984	gap: 10px;1985	align-items: baseline;1986	padding: 7px 0;1987	border-bottom: 1px solid var(--bg-surface);1988	font-family: var(--mono);1989	font-size: 0.6875rem;1990	animation: fadeUp 300ms ease both;1991}1992.profile-event-repo,1993.profile-event-message {1994	overflow: hidden;1995	text-overflow: ellipsis;1996	white-space: nowrap;1997}1998.profile-event-repo,1999.profile-event-glyph {2000	color: var(--accent);2001}2002.profile-event-glyph {2003	font-size: 0.625rem;2004}2005.profile-event-message {2006	color: var(--text-muted);2007}2008.profile-event-message:hover {2009	color: var(--text-heading);2010}2011.profile-event-time {2012	font-size: 0.625rem;2013	white-space: nowrap;2014	color: var(--text-faint);2015}2016.profile-empty-state {2017	font-style: italic;2018	font-size: 0.8125rem;2019	color: var(--text-faint);2020}2021.profile-repos-section {2022	margin-top: 40px;2023	padding-top: 40px;2024	border-top: 1px solid var(--bg-surface);2025}20262027/* ----- docs and support --------------------------------------------------- */20282029.site-doc {2030	max-width: 72ch;2031	margin-top: 16px;2032}2033.site-doc h1 {2034	font-size: clamp(2rem, 5vw, 3rem);2035	font-weight: 400;2036	color: var(--text-heading);2037}2038.site-doc h2 {2039	margin-top: 2.4em;2040}20412042@media (max-width: 860px) {2043	.headline,2044	.profile-portrait-section {2045		grid-template-columns: minmax(0, 1fr);2046	}2047	.headline {2048		gap: 8px;2049		padding-top: 48px;2050	}2051	.card-grid {2052		grid-template-columns: minmax(0, 1fr);2053	}2054}2055@media (max-width: 768px) {2056	.editor-panes {2057		grid-template-columns: minmax(0, 1fr);2058	}2059	.fv-header {2060		flex-wrap: wrap;2061		height: auto;2062		padding: 8px 12px;2063		gap: 8px 12px;2064	}2065	.fv-body {2066		grid-template-columns: minmax(0, 1fr);2067	}2068	.fv-detail {2069		display: none;2070	}2071	.ticker {2072		height: 226px;2073		margin-top: -88px;2074		padding-top: 80px;2075	}2076	.profile-cover {2077		height: 280px;2078		margin-top: -16px;2079	}2080	.profile-identity {2081		bottom: 24px;2082		padding: 0 16px;2083	}2084	.profile-username {2085		font-size: 2.5rem;2086	}2087	.profile-event {2088		grid-template-columns: 72px 12px minmax(0, 1fr);2089	}2090	.profile-event-time {2091		display: none;2092	}2093}20942095/* ----- media in Markdown and the signed-in editor ------------------------- */20962097/* Sizes and places from an image's options (markdown.ts); classes, as the policy allows no inline2098   style. */2099.markdown .media {2100	display: block;2101	max-width: 100%;2102	height: auto;2103	margin: 12px auto;2104	border-radius: 3px;2105}2106.markdown .media-left {2107	margin-left: 0;2108}2109.markdown .media-right {2110	margin-right: 0;2111}2112.markdown .media-w25 {2113	width: 25%;2114}2115.markdown .media-w33 {2116	width: 33%;2117}2118.markdown .media-w50 {2119	width: 50%;2120}2121.markdown .media-w66 {2122	width: 66%;2123}2124.markdown .media-w75 {2125	width: 75%;2126}2127.markdown .media-w100 {2128	width: 100%;2129}2130.edit-btn {2131	margin-left: 12px;2132	padding: 1px 7px;2133	background: transparent;2134	border: 1px solid rgba(200, 154, 90, 0.2);2135	border-radius: 2px;2136	font-size: 0.625rem;2137	color: var(--text-faint);2138	cursor: pointer;2139	vertical-align: middle;2140}2141.edit-btn:hover {2142	color: var(--accent);2143	border-color: var(--accent-dim);2144}2145.editor {2146	display: grid;2147	gap: 8px;2148	margin: 8px 0 16px;2149}2150.editor-toolbar,2151.editor-media,2152.editor-actions {2153	display: flex;2154	flex-wrap: wrap;2155	align-items: center;2156	gap: 4px;2157}2158.editor-media[hidden] {2159	display: none;2160}2161.editor-label,2162.editor-status {2163	margin: 0 6px;2164	font-size: 0.625rem;2165	color: var(--text-faint);2166}2167.editor-panes {2168	display: grid;2169	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);2170	gap: 12px;2171}2172.editor-input {2173	width: 100%;2174	min-height: 4lh;2175	max-height: 70vh;2176	field-sizing: content;2177	resize: vertical;2178	padding: 10px 12px;2179	background: var(--bg-surface);2180	border: 1px solid var(--border);2181	border-radius: 3px;2182	color: var(--text);2183	font-size: 0.75rem;2184	line-height: 1.6;2185}2186.editor-input:focus {2187	outline: none;2188	border-color: var(--accent-dim);2189}2190.editor-preview {2191	min-width: 0;2192	max-height: 70vh;2193	overflow-y: auto;2194	padding: 0 4px;2195}2196.editor-preview:empty::before {2197	content: attr(data-empty);2198	font-family: var(--mono);2199	font-size: 0.625rem;2200	color: var(--text-faint);2201}22022203/* ----- file viewer (Kepr 2's Atlas modal) -------------------------------- */22042205body:has(> .fv-overlay) {2206	overflow: hidden;2207}2208.fv-overlay {2209	position: fixed;2210	inset: 0;2211	z-index: 2000;2212	display: flex;2213	flex-direction: column;2214	background: rgba(8, 7, 5, 0.97);2215	outline: none;2216	animation: fv-in 200ms ease both;2217}2218@keyframes fv-in {2219	from {2220		opacity: 0;2221		transform: translateY(6px) scale(0.97);2222	}2223}2224.fv-header {2225	display: flex;2226	align-items: center;2227	gap: 16px;2228	flex-shrink: 0;2229	height: 48px;2230	padding: 0 20px;2231	background: var(--bg);2232	border-bottom: 1px solid var(--bg-elevated);2233}2234.fv-close {2235	background: none;2236	border: 0;2237	padding: 0 4px;2238	font-size: 1.375rem;2239	line-height: 1;2240	color: var(--text-faint);2241	cursor: pointer;2242}2243.fv-close:hover {2244	color: var(--accent);2245}2246.fv-title {2247	display: flex;2248	align-items: baseline;2249	gap: 8px;2250	flex: 1;2251	min-width: 0;2252}2253.fv-name {2254	font-size: 1.25rem;2255	color: var(--text-heading);2256	white-space: nowrap;2257}2258.fv-path {2259	font-size: 0.625rem;2260	color: var(--text-faint);2261	white-space: nowrap;2262	overflow: hidden;2263	text-overflow: ellipsis;2264}2265.fv-controls,2266.fv-nav {2267	display: flex;2268	align-items: center;2269	gap: 4px;2270	flex-shrink: 0;2271}2272.fv-ctrl-btn {2273	background: transparent;2274	border: 1px solid rgba(200, 154, 90, 0.2);2275	border-radius: 2px;2276	padding: 3px 7px;2277	font: inherit;2278	font-size: 0.625rem;2279	color: var(--text-faint);2280	cursor: pointer;2281	transition:2282		color 100ms,2283		border-color 100ms;2284}2285.fv-ctrl-btn:hover:not(:disabled),2286.fv-ctrl-btn.active {2287	color: var(--accent);2288	border-color: rgba(200, 154, 90, 0.5);2289	text-decoration: none;2290}2291.fv-ctrl-btn:disabled {2292	opacity: 0.3;2293	cursor: default;2294}2295.fv-pos {2296	min-width: 48px;2297	text-align: center;2298	font-size: 0.625rem;2299	color: var(--text-faint);2300}2301.fv-body {2302	flex: 1;2303	min-height: 0;2304	display: grid;2305	grid-template-columns: minmax(0, 1fr) 280px;2306}2307.fv-source {2308	min-height: 0;2309	overflow: auto;2310	padding: 16px 28px 32px;2311	font-family: var(--mono);2312	font-size: 0.6875rem;2313	color: var(--text-faint);2314}2315.fv-source .file-view {2316	margin: -16px -28px 0;2317	border: 0;2318	background: none;2319	overflow: visible;2320}2321.fv-source .code {2322	font-size: var(--fv-size);2323	color: var(--text);2324}2325.fv-wrap .fv-source .lc {2326	white-space: pre-wrap;2327	overflow-wrap: anywhere;2328}2329.fv-source .file-markdown {2330	font-family: var(--sans);2331	font-size: calc(var(--fv-size) + 2px);2332	color: var(--text);2333}2334.fv-detail .atlas-info-desc {2335	font-size: 0.8125rem;2336}2337.fv-detail {2338	overflow-y: auto;2339	padding: 18px 20px 24px;2340	background: var(--bg);2341	border-left: 1px solid var(--bg-elevated);2342}23432344/* Last in the file, after every animation it stops, so it wins without !important. */2345@media (prefers-reduced-motion: reduce) {2346	.tri-outer,2347	.tri-inner,2348	.repo-name,2349	.repo-contributor,2350	.repo-desc,2351	.repo-homepage,2352	.repo-meta,2353	.repo-tabs,2354	.install-lines,2355	.repo-section,2356	.repo-details,2357	.save-message-head,2358	.ticker-row,2359	.ticker-track,2360	.hex-col,2361	.headline h1,2362	.headline-tagline,2363	.headline-cloud,2364	.repo-card,2365	.profile-username,2366	.profile-event,2367	.fv-overlay,2368	.repo-panel {2369		animation: none;2370	}2371	.hex-col {2372		opacity: 0.12;2373	}2374}