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-error {1476	font-size: 0.75rem;1477	color: #c86a5a;1478}1479/* The honeypot: off-screen for people, still in the form for bots. */1480.issues-hp {1481	position: absolute;1482	left: -9999px;1483	height: 0;1484	overflow: hidden;1485	opacity: 0;1486}14871488/* ----- front page --------------------------------------------------------- */14891490/* Kepr 2's hero band, full width, reaching up behind the nav (32px mark + 48px padding). */1491body > nav {1492	position: relative;1493	z-index: 1;1494}1495.ticker {1496	position: relative;1497	height: 304px;1498	margin: -104px calc(50% - 50vw) 0;1499	padding: 96px 0 20px;1500	display: flex;1501	flex-direction: column;1502	justify-content: space-evenly;1503	overflow: hidden;1504	pointer-events: none;1505	user-select: none;1506	border-bottom: 1px solid var(--border);1507	font-family: var(--mono);1508	color: var(--text-secondary);1509	mask-image: linear-gradient(1510		to right,1511		transparent,1512		#000 48px,1513		#000 calc(100% - 48px),1514		transparent1515	);1516}1517.ticker-row {1518	white-space: nowrap;1519	line-height: 1.2;1520	opacity: var(--o);1521	animation: ticker-glow 83s var(--glow-at) ease-in-out infinite;1522}1523/* The drift's duration is set by kepr.js from the track's width, so every row keeps Kepr 2's1524   pace in px/s (--speed) however long its messages are; this is the no-JavaScript fallback. */1525.ticker-track {1526	display: inline-flex;1527	gap: 64px;1528	padding-right: 64px;1529	animation: ticker-drift 1500s linear infinite;1530}1531/* Kepr 2's depth bands: nearer rows are larger, brighter and faster. Each row takes its turn at1532   the glow, a few seconds out of every 83, spaced so one or two glow at a time. */1533.ticker-row:nth-child(1) {1534	font-size: 9px;1535	--o: 0.05;1536	--speed: 12;1537	--glow-at: -5s;1538}1539.ticker-row:nth-child(2) {1540	font-size: 18px;1541	--o: 0.1;1542	--speed: 23;1543	--glow-at: -41s;1544}1545.ticker-row:nth-child(3) {1546	font-size: 7px;1547	--o: 0.04;1548	--speed: 9;1549	--glow-at: -77s;1550}1551.ticker-row:nth-child(4) {1552	font-size: 13px;1553	--o: 0.07;1554	--speed: 17;1555	--glow-at: -29s;1556}1557.ticker-row:nth-child(5) {1558	font-size: 22px;1559	--o: 0.12;1560	--speed: 29;1561	--glow-at: -65s;1562}1563.ticker-row:nth-child(6) {1564	font-size: 8px;1565	--o: 0.045;1566	--speed: 10;1567	--glow-at: -17s;1568}1569.ticker-row:nth-child(7) {1570	font-size: 15px;1571	--o: 0.08;1572	--speed: 20;1573	--glow-at: -53s;1574}1575@keyframes ticker-drift {1576	to {1577		transform: translateX(-50%);1578	}1579}1580@keyframes ticker-glow {1581	0%,1582	10%,1583	100% {1584		color: var(--text-secondary);1585		opacity: var(--o);1586		text-shadow: none;1587	}1588	5% {1589		color: var(--accent);1590		opacity: calc(var(--o) * 3.5);1591		text-shadow: 0 0 3px var(--accent-tint-12);1592	}1593}15941595.headline {1596	display: grid;1597	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);1598	gap: 48px;1599	align-items: center;1600	padding: 56px 0 40px;1601}1602.headline h1 {1603	font-size: clamp(2rem, 5vw, 3.5rem);1604	font-weight: 400;1605	line-height: 1.15;1606	color: var(--text-heading);1607	margin: 0 0 20px;1608	animation: fadeUp 480ms ease both;1609}1610.headline-tagline {1611	margin: 0;1612	font-size: 0.9375rem;1613	line-height: 1.7;1614	color: var(--text-secondary);1615	animation: fadeUp 480ms 80ms ease both;1616}1617.headline-cloud {1618	display: flex;1619	flex-wrap: wrap;1620	justify-content: center;1621	align-items: center;1622	gap: 10px 22px;1623	padding: 20px;1624	animation: fadeIn 600ms 160ms ease both;1625}1626.tc-tag {1627	font-family: var(--mono);1628	letter-spacing: 0.03em;1629	white-space: nowrap;1630	color: var(--accent-dim);1631	transition:1632		color 0.2s,1633		opacity 0.2s,1634		text-shadow 0.2s;1635}1636.tc-tag:hover {1637	color: var(--accent);1638	opacity: 1;1639	text-shadow: 0 0 14px var(--accent-tint-12);1640}1641.tc-1 {1642	font-size: 10px;1643	opacity: 0.42;1644}1645.tc-2 {1646	font-size: 12px;1647	opacity: 0.56;1648}1649.tc-3 {1650	font-size: 15px;1651	opacity: 0.7;1652}1653.tc-4 {1654	font-size: 18px;1655	opacity: 0.85;1656	font-weight: 500;1657}1658.tc-5 {1659	font-size: 23px;1660	opacity: 1;1661	font-weight: 500;1662}16631664.featured-label {1665	font-size: 0.6875rem;1666	font-weight: 400;1667	letter-spacing: 0.08em;1668	text-transform: uppercase;1669	color: var(--text-secondary);1670	margin: 0 0 12px;1671}1672.landing-self-host {1673	margin: 32px 0 0;1674	font-size: 0.75rem;1675}1676.landing-self-host a {1677	color: var(--text-secondary);1678}16791680/* ----- repo cards (front page, browse, profile) --------------------------- */16811682.card-grid {1683	display: grid;1684	grid-template-columns: repeat(2, minmax(0, 1fr));1685	gap: 16px;1686}1687.repo-card {1688	display: flex;1689	flex-direction: column;1690	padding: 20px 22px 16px;1691	border: 1px solid var(--bg-elevated);1692	border-radius: 4px;1693	background: var(--bg);1694	transition:1695		border-color 120ms,1696		background 120ms;1697	animation: fadeUp 350ms ease both;1698}1699.repo-card:hover {1700	text-decoration: none;1701	border-color: var(--text-faint);1702	background: var(--accent-tint-04);1703}1704.repo-card-head {1705	display: flex;1706	align-items: baseline;1707	justify-content: space-between;1708	gap: 12px;1709}1710.repo-card-name {1711	font-size: 1.375rem;1712	line-height: 1.1;1713	color: var(--accent);1714	overflow: hidden;1715	text-overflow: ellipsis;1716	white-space: nowrap;1717}1718.repo-card-saves {1719	font-size: 0.6875rem;1720	white-space: nowrap;1721}1722.repo-card-desc {1723	margin: 8px 0 0;1724	font-size: 0.8125rem;1725	line-height: 1.5;1726	color: var(--text-secondary);1727	display: -webkit-box;1728	-webkit-line-clamp: 2;1729	-webkit-box-orient: vertical;1730	overflow: hidden;1731}1732.repo-card-cat {1733	margin: 10px 0 0;1734	font-size: 0.9375rem;1735	color: var(--text);1736}17371738/* ----- profile ------------------------------------------------------------ */17391740/* The cover runs the full width of the window while the page keeps its column. */1741.profile-cover {1742	position: relative;1743	height: 380px;1744	margin: -24px calc(50% - 50vw) 0;1745	overflow: hidden;1746	border-bottom: 1px solid var(--bg-surface);1747}1748.hex-backdrop {1749	position: absolute;1750	inset: 0;1751	display: flex;1752	flex-direction: row-reverse;1753	justify-content: center;1754	align-items: center;1755	gap: 13px;1756	pointer-events: none;1757	user-select: none;1758	font-family: var(--mono);1759	font-size: 13px;1760	line-height: 16px;1761	color: var(--accent-dim);1762}1763/* Characters top to bottom, columns right to left, each breathing on its own clock. */1764.hex-col {1765	writing-mode: vertical-rl;1766	text-orientation: upright;1767	letter-spacing: 3px;1768	opacity: 0.05;1769	animation: hex-breathe 17s ease-in-out infinite;1770	transition:1771		color 1.6s ease,1772		text-shadow 1.6s ease;1773}1774.hex-col:nth-child(3n) {1775	color: var(--accent);1776	animation-duration: 23s;1777	animation-delay: -7s;1778}1779.hex-col:nth-child(4n + 1) {1780	animation-duration: 29s;1781	animation-delay: -13s;1782}1783.hex-col:nth-child(5n + 2) {1784	animation-duration: 19s;1785	animation-delay: -3s;1786}1787.hex-col:nth-child(7n) {1788	animation-delay: -21s;1789}1790.hex-col.glow {1791	color: var(--accent-bright);1792	text-shadow: 0 0 6px var(--accent-tint-12);1793}1794@keyframes hex-breathe {1795	0%,1796	100% {1797		opacity: 0.05;1798	}1799	50% {1800		opacity: 0.22;1801	}1802}1803.profile-cover-fade {1804	position: absolute;1805	left: 0;1806	right: 0;1807	bottom: 0;1808	height: 55%;1809	background: linear-gradient(to bottom, transparent, var(--bg));1810	pointer-events: none;1811}1812.profile-identity {1813	position: absolute;1814	bottom: 40px;1815	left: 0;1816	right: 0;1817	max-width: 980px;1818	margin: 0 auto;1819	padding: 0 48px;1820}1821.profile-username {1822	margin: 0 0 8px;1823	font-family: "Sacramento", cursive;1824	font-weight: 400;1825	font-size: 3.625rem;1826	line-height: 1;1827	letter-spacing: -0.02em;1828	text-transform: lowercase;1829	color: var(--text-heading);1830	user-select: none;1831	animation: fadeUp 500ms ease both;1832}1833.profile-signature {1834	display: block;1835	max-height: 96px;1836	max-width: min(360px, 100%);1837}1838.profile-tagline {1839	margin: 0 0 6px;1840	font-family: var(--mono);1841	font-size: 0.75rem;1842	letter-spacing: 0.15em;1843	color: var(--text-faint);1844}1845.profile-op-badge {1846	display: block;1847	font-size: 0.6875rem;1848	letter-spacing: 0.18em;1849	color: var(--accent);1850}18511852.profile-portrait-section {1853	display: grid;1854	grid-template-columns: 320px minmax(0, 1fr);1855	gap: 40px;1856	align-items: start;1857	padding-top: 40px;1858}1859.profile-left {1860	display: flex;1861	flex-direction: column;1862	gap: 16px;1863}1864.profile-identity-card,1865.profile-languages-bar {1866	padding: 20px 24px;1867	border: 1px solid var(--bg-elevated);1868	border-radius: 4px;1869}1870.profile-identity-bio {1871	margin: 0;1872	font-size: 0.875rem;1873	line-height: 1.5;1874	color: var(--text-muted);1875}1876.profile-identity-location {1877	margin: 6px 0 0;1878	font-family: var(--mono);1879	font-size: 0.8125rem;1880	color: var(--text-muted);1881}1882.profile-website-pill {1883	display: inline-block;1884	max-width: 100%;1885	margin-top: 10px;1886	padding: 3px 8px;1887	overflow: hidden;1888	text-overflow: ellipsis;1889	white-space: nowrap;1890	border: 1px solid var(--text-faint);1891	border-radius: 3px;1892	background: var(--bg-surface);1893	font-family: var(--mono);1894	font-size: 0.6875rem;1895	color: var(--accent);1896}1897.profile-website-pill:hover {1898	border-color: var(--accent);1899	text-decoration: none;1900}1901.profile-stats-grid {1902	display: grid;1903	grid-template-columns: 1fr 1fr;1904	border: 1px solid var(--bg-elevated);1905	border-radius: 4px;1906	overflow: hidden;1907}1908.profile-stat-tile {1909	padding: 16px;1910	border-right: 1px solid var(--bg-elevated);1911	border-bottom: 1px solid var(--bg-elevated);1912}1913.profile-stat-tile:nth-child(2n) {1914	border-right: none;1915}1916.profile-stat-tile:nth-last-child(-n + 2) {1917	border-bottom: none;1918}1919.profile-stat-number {1920	margin-bottom: 4px;1921	font-weight: 600;1922	font-size: 1.75rem;1923	line-height: 1;1924	color: var(--accent);1925}1926.profile-stat-label,1927.profile-section-label {1928	font-family: var(--mono);1929	font-size: 0.625rem;1930	text-transform: uppercase;1931	letter-spacing: 0.08em;1932	color: var(--text-faint);1933}1934.profile-lang-bar {1935	display: block;1936	width: 100%;1937	height: 6px;1938	margin-bottom: 8px;1939	border-radius: 3px;1940	background: var(--bg-surface);1941}1942.profile-lang-bar rect {1943	fill: var(--accent);1944	opacity: 0.6;1945}1946.profile-lang-bar rect:nth-child(2) {1947	fill: var(--sage);1948}1949.profile-lang-bar rect:nth-child(3) {1950	fill: var(--accent-flash);1951	opacity: 0.45;1952}1953.profile-lang-bar rect:nth-child(4) {1954	fill: var(--accent-dim);1955}1956.profile-lang-labels {1957	display: flex;1958	flex-wrap: wrap;1959	gap: 10px;1960	font-family: var(--mono);1961	font-size: 0.625rem;1962	color: var(--text-muted);1963}1964.profile-section-label {1965	margin-bottom: 16px;1966	letter-spacing: 0.2em;1967}1968.profile-event {1969	display: grid;1970	grid-template-columns: 96px 12px minmax(0, 1fr) auto;1971	gap: 10px;1972	align-items: baseline;1973	padding: 7px 0;1974	border-bottom: 1px solid var(--bg-surface);1975	font-family: var(--mono);1976	font-size: 0.6875rem;1977	animation: fadeUp 300ms ease both;1978}1979.profile-event-repo,1980.profile-event-message {1981	overflow: hidden;1982	text-overflow: ellipsis;1983	white-space: nowrap;1984}1985.profile-event-repo,1986.profile-event-glyph {1987	color: var(--accent);1988}1989.profile-event-glyph {1990	font-size: 0.625rem;1991}1992.profile-event-message {1993	color: var(--text-muted);1994}1995.profile-event-message:hover {1996	color: var(--text-heading);1997}1998.profile-event-time {1999	font-size: 0.625rem;2000	white-space: nowrap;2001	color: var(--text-faint);2002}2003.profile-empty-state {2004	font-style: italic;2005	font-size: 0.8125rem;2006	color: var(--text-faint);2007}2008.profile-repos-section {2009	margin-top: 40px;2010	padding-top: 40px;2011	border-top: 1px solid var(--bg-surface);2012}20132014/* ----- docs and support --------------------------------------------------- */20152016.site-doc {2017	max-width: 72ch;2018	margin-top: 16px;2019}2020.site-doc h1 {2021	font-size: clamp(2rem, 5vw, 3rem);2022	font-weight: 400;2023	color: var(--text-heading);2024}2025.site-doc h2 {2026	margin-top: 2.4em;2027}20282029@media (max-width: 860px) {2030	.headline,2031	.profile-portrait-section {2032		grid-template-columns: minmax(0, 1fr);2033	}2034	.headline {2035		gap: 8px;2036		padding-top: 48px;2037	}2038	.card-grid {2039		grid-template-columns: minmax(0, 1fr);2040	}2041}2042@media (max-width: 768px) {2043	.editor-panes {2044		grid-template-columns: minmax(0, 1fr);2045	}2046	.fv-header {2047		flex-wrap: wrap;2048		height: auto;2049		padding: 8px 12px;2050		gap: 8px 12px;2051	}2052	.fv-body {2053		grid-template-columns: minmax(0, 1fr);2054	}2055	.fv-detail {2056		display: none;2057	}2058	.ticker {2059		height: 226px;2060		margin-top: -88px;2061		padding-top: 80px;2062	}2063	.profile-cover {2064		height: 280px;2065		margin-top: -16px;2066	}2067	.profile-identity {2068		bottom: 24px;2069		padding: 0 16px;2070	}2071	.profile-username {2072		font-size: 2.5rem;2073	}2074	.profile-event {2075		grid-template-columns: 72px 12px minmax(0, 1fr);2076	}2077	.profile-event-time {2078		display: none;2079	}2080}20812082/* ----- media in Markdown and the signed-in editor ------------------------- */20832084/* Sizes and places from an image's options (markdown.ts); classes, as the policy allows no inline2085   style. */2086.markdown .media {2087	display: block;2088	max-width: 100%;2089	height: auto;2090	margin: 12px auto;2091	border-radius: 3px;2092}2093.markdown .media-left {2094	margin-left: 0;2095}2096.markdown .media-right {2097	margin-right: 0;2098}2099.markdown .media-w25 {2100	width: 25%;2101}2102.markdown .media-w33 {2103	width: 33%;2104}2105.markdown .media-w50 {2106	width: 50%;2107}2108.markdown .media-w66 {2109	width: 66%;2110}2111.markdown .media-w75 {2112	width: 75%;2113}2114.markdown .media-w100 {2115	width: 100%;2116}2117.edit-btn {2118	margin-left: 12px;2119	padding: 1px 7px;2120	background: transparent;2121	border: 1px solid rgba(200, 154, 90, 0.2);2122	border-radius: 2px;2123	font-size: 0.625rem;2124	color: var(--text-faint);2125	cursor: pointer;2126	vertical-align: middle;2127}2128.edit-btn:hover {2129	color: var(--accent);2130	border-color: var(--accent-dim);2131}2132.editor {2133	display: grid;2134	gap: 8px;2135	margin: 8px 0 16px;2136}2137.editor-toolbar,2138.editor-media,2139.editor-actions {2140	display: flex;2141	flex-wrap: wrap;2142	align-items: center;2143	gap: 4px;2144}2145.editor-media[hidden] {2146	display: none;2147}2148.editor-label,2149.editor-status {2150	margin: 0 6px;2151	font-size: 0.625rem;2152	color: var(--text-faint);2153}2154.editor-panes {2155	display: grid;2156	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);2157	gap: 12px;2158}2159.editor-input {2160	width: 100%;2161	min-height: 4lh;2162	max-height: 70vh;2163	field-sizing: content;2164	resize: vertical;2165	padding: 10px 12px;2166	background: var(--bg-surface);2167	border: 1px solid var(--border);2168	border-radius: 3px;2169	color: var(--text);2170	font-size: 0.75rem;2171	line-height: 1.6;2172}2173.editor-input:focus {2174	outline: none;2175	border-color: var(--accent-dim);2176}2177.editor-preview {2178	min-width: 0;2179	max-height: 70vh;2180	overflow-y: auto;2181	padding: 0 4px;2182}2183.editor-preview:empty::before {2184	content: attr(data-empty);2185	font-family: var(--mono);2186	font-size: 0.625rem;2187	color: var(--text-faint);2188}21892190/* ----- file viewer (Kepr 2's Atlas modal) -------------------------------- */21912192body:has(> .fv-overlay) {2193	overflow: hidden;2194}2195.fv-overlay {2196	position: fixed;2197	inset: 0;2198	z-index: 2000;2199	display: flex;2200	flex-direction: column;2201	background: rgba(8, 7, 5, 0.97);2202	outline: none;2203	animation: fv-in 200ms ease both;2204}2205@keyframes fv-in {2206	from {2207		opacity: 0;2208		transform: translateY(6px) scale(0.97);2209	}2210}2211.fv-header {2212	display: flex;2213	align-items: center;2214	gap: 16px;2215	flex-shrink: 0;2216	height: 48px;2217	padding: 0 20px;2218	background: var(--bg);2219	border-bottom: 1px solid var(--bg-elevated);2220}2221.fv-close {2222	background: none;2223	border: 0;2224	padding: 0 4px;2225	font-size: 1.375rem;2226	line-height: 1;2227	color: var(--text-faint);2228	cursor: pointer;2229}2230.fv-close:hover {2231	color: var(--accent);2232}2233.fv-title {2234	display: flex;2235	align-items: baseline;2236	gap: 8px;2237	flex: 1;2238	min-width: 0;2239}2240.fv-name {2241	font-size: 1.25rem;2242	color: var(--text-heading);2243	white-space: nowrap;2244}2245.fv-path {2246	font-size: 0.625rem;2247	color: var(--text-faint);2248	white-space: nowrap;2249	overflow: hidden;2250	text-overflow: ellipsis;2251}2252.fv-controls,2253.fv-nav {2254	display: flex;2255	align-items: center;2256	gap: 4px;2257	flex-shrink: 0;2258}2259.fv-ctrl-btn {2260	background: transparent;2261	border: 1px solid rgba(200, 154, 90, 0.2);2262	border-radius: 2px;2263	padding: 3px 7px;2264	font: inherit;2265	font-size: 0.625rem;2266	color: var(--text-faint);2267	cursor: pointer;2268	transition:2269		color 100ms,2270		border-color 100ms;2271}2272.fv-ctrl-btn:hover:not(:disabled),2273.fv-ctrl-btn.active {2274	color: var(--accent);2275	border-color: rgba(200, 154, 90, 0.5);2276	text-decoration: none;2277}2278.fv-ctrl-btn:disabled {2279	opacity: 0.3;2280	cursor: default;2281}2282.fv-pos {2283	min-width: 48px;2284	text-align: center;2285	font-size: 0.625rem;2286	color: var(--text-faint);2287}2288.fv-body {2289	flex: 1;2290	min-height: 0;2291	display: grid;2292	grid-template-columns: minmax(0, 1fr) 280px;2293}2294.fv-source {2295	min-height: 0;2296	overflow: auto;2297	padding: 16px 28px 32px;2298	font-family: var(--mono);2299	font-size: 0.6875rem;2300	color: var(--text-faint);2301}2302.fv-source .file-view {2303	margin: -16px -28px 0;2304	border: 0;2305	background: none;2306	overflow: visible;2307}2308.fv-source .code {2309	font-size: var(--fv-size);2310	color: var(--text);2311}2312.fv-wrap .fv-source .lc {2313	white-space: pre-wrap;2314	overflow-wrap: anywhere;2315}2316.fv-source .file-markdown {2317	font-family: var(--sans);2318	font-size: calc(var(--fv-size) + 2px);2319	color: var(--text);2320}2321.fv-detail .atlas-info-desc {2322	font-size: 0.8125rem;2323}2324.fv-detail {2325	overflow-y: auto;2326	padding: 18px 20px 24px;2327	background: var(--bg);2328	border-left: 1px solid var(--bg-elevated);2329}23302331/* Last in the file, after every animation it stops, so it wins without !important. */2332@media (prefers-reduced-motion: reduce) {2333	.tri-outer,2334	.tri-inner,2335	.repo-name,2336	.repo-contributor,2337	.repo-desc,2338	.repo-homepage,2339	.repo-meta,2340	.repo-tabs,2341	.install-lines,2342	.repo-section,2343	.repo-details,2344	.save-message-head,2345	.ticker-row,2346	.ticker-track,2347	.hex-col,2348	.headline h1,2349	.headline-tagline,2350	.headline-cloud,2351	.repo-card,2352	.profile-username,2353	.profile-event,2354	.fv-overlay,2355	.repo-panel {2356		animation: none;2357	}2358	.hex-col {2359		opacity: 0.12;2360	}2361}