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	--accent-tint-04: rgba(200, 154, 90, 0.04);18	--accent-tint-12: rgba(200, 154, 90, 0.12);19	--sage: #7a9a68;20	--sans: "Quicksand", system-ui, sans-serif;21	--mono: "Martian Mono", ui-monospace, monospace;22}2324* {25	box-sizing: border-box;26	scrollbar-width: thin;27	scrollbar-color: var(--border) transparent;28}2930html,31body {32	margin: 0;33	padding: 0;34	background: var(--bg);35	color: var(--text);36	font-family: var(--sans);37	font-size: 16px;38	line-height: 1.6;39	overflow-x: hidden;40}4142a {43	color: inherit;44	text-decoration: none;45}46a:hover {47	text-decoration: underline;48	text-decoration-color: var(--accent);49	text-decoration-thickness: 1px;50	text-underline-offset: 4px;51}5253/* ----- top bar ------------------------------------------------------------ */5455body > nav {56	display: flex;57	align-items: center;58	padding: 24px 48px;59	font-size: 0.6875rem;60	letter-spacing: 0.04em;61}62.wordmark {63	display: flex;64	color: var(--accent);65}66.wordmark:hover {67	text-decoration: none;68}69.wordmark-icon {70	display: block;71	width: 32px;72	height: 32px;73	color: var(--accent);74}75.wordmark-icon polygon {76	fill: none;77	stroke: currentColor;78	stroke-linejoin: round;79}80.tri-outer polygon {81	stroke-width: 2;82}83.tri-inner polygon {84	stroke-width: 1.5;85}86.tri-outer,87.tri-inner {88	transform-origin: 16px 16px;89}90.tri-outer {91	animation:92		tri-ccw 12s linear infinite,93		accent-flash 9s ease-in-out infinite;94}95.tri-inner {96	animation:97		tri-cw 8s linear infinite,98		accent-flash 6.7s 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 accent-flash {111	0%,112	84%,113	100% {114		color: var(--accent);115	}116	92% {117		color: var(--accent-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.install-lines {272	display: flex;273	flex-direction: column;274	align-items: flex-end;275	gap: 6px;276	max-width: 100%;277	margin-left: auto;278	animation: fadeUp 280ms 120ms ease both;279}280.install-line {281	display: flex;282	align-items: center;283	gap: 12px;284	max-width: 100%;285	font-family: var(--mono);286	font-size: 0.75rem;287	color: var(--text-muted);288	background: var(--bg-surface);289	border: 1px solid var(--border);290	border-radius: 3px;291	padding: 5px 11px;292}293.install-line code {294	white-space: pre;295	overflow-x: auto;296	font-family: inherit;297}298.copy-btn {299	background: none;300	border: 0;301	padding: 0;302	cursor: pointer;303	font: inherit;304	font-size: 0.625rem;305	color: var(--text-faint);306	letter-spacing: 0.04em;307}308.copy-btn:hover,309.copy-btn.copied {310	color: var(--accent);311}312313/* ----- sections ----------------------------------------------------------- */314315.repo-section {316	margin: 36px 0 0;317	animation: fadeIn 320ms 80ms ease both;318}319.repo-section-toggle > summary,320.repo-details-toggle > summary {321	list-style: none;322	cursor: pointer;323	user-select: none;324}325.repo-section-toggle > summary::-webkit-details-marker,326.repo-details-toggle > summary::-webkit-details-marker {327	display: none;328}329.section-head {330	display: flex;331	align-items: baseline;332	gap: 12px;333	padding-bottom: 8px;334	border-bottom: 1px solid var(--border);335	margin-bottom: 4px;336}337.section-head::after,338.repo-details-head::after {339	content: "▸";340	font-size: 0.5625rem;341	opacity: 0.4;342	transition: transform 120ms;343}344.section-head::after {345	margin-left: auto;346}347details[open] > .section-head::after,348details[open] > .repo-details-head::after {349	transform: rotate(90deg);350}351.section-label {352	font-size: 0.6875rem;353	letter-spacing: 0.12em;354	color: var(--text-secondary);355	text-transform: uppercase;356}357.section-count {358	font-family: var(--mono);359	font-size: 0.6875rem;360	color: var(--accent);361}362363/* ----- timeline ----------------------------------------------------------- */364365.timeline {366	display: block;367	margin: 18px 0 4px;368	overflow: visible;369}370.timeline-line {371	stroke: var(--text-faint);372	stroke-width: 1;373	stroke-dasharray: 4 4;374}375.timeline .dot circle {376	fill: var(--accent);377	transition:378		fill-opacity 120ms,379		r 120ms;380}381.timeline .d0 circle {382	fill: var(--accent-dim);383	fill-opacity: 0.45;384}385.timeline .d1 circle {386	fill-opacity: 0.55;387}388.timeline .d2 circle {389	fill-opacity: 0.8;390}391.timeline .d3 circle {392	fill: var(--accent-bright);393	fill-opacity: 1;394}395.timeline .dot:hover circle,396.timeline .dot:focus circle {397	fill: var(--accent-bright);398	fill-opacity: 1;399}400.timeline-legend {401	margin: 0 0 14px;402	font-size: 0.625rem;403	color: var(--text-faint);404}405.timeline-tip {406	position: fixed;407	z-index: 200;408	max-width: 340px;409	padding: 0.45rem 0.7rem;410	background: #0f0c08;411	border: 1px solid var(--border);412	border-radius: 4px;413	pointer-events: none;414	line-height: 1.5;415}416.timeline-tip .tip-id {417	font-family: var(--mono);418	font-size: 12px;419	color: var(--accent);420}421.timeline-tip .tip-msg {422	margin-top: 3px;423	font-style: italic;424	font-size: 15px;425	color: var(--text-heading);426}427.timeline-tip .tip-meta {428	margin-top: 4px;429	font-family: var(--mono);430	font-size: 10px;431	color: var(--text-muted);432}433434/* ----- history ------------------------------------------------------------ */435436.history-row {437	position: relative;438	display: grid;439	grid-template-columns: 110px 1fr auto;440	align-items: baseline;441	gap: 0 10px;442	padding: 9px 8px;443	border-bottom: 1px solid var(--border);444	transition: background 100ms;445}446.history-row::before {447	content: "";448	position: absolute;449	left: 0;450	top: 0;451	bottom: 0;452	width: 2px;453	background: var(--accent);454	transform: scaleY(0);455	transition: transform 120ms ease;456}457.history-row:hover {458	background: var(--accent-tint-04);459	text-decoration: none;460}461.history-row:hover::before {462	transform: scaleY(1);463}464.history-id {465	font-family: var(--mono);466	font-size: 0.75rem;467	color: var(--text-secondary);468}469.history-msg {470	min-width: 0;471	line-height: 1.7;472	overflow: hidden;473	text-overflow: ellipsis;474	white-space: nowrap;475	transition: color 100ms;476}477.history-row:hover .history-msg {478	color: var(--accent);479}480.history-when {481	font-family: var(--mono);482	font-size: 0.6875rem;483	color: var(--text-muted);484	white-space: nowrap;485}486.pager {487	display: flex;488	justify-content: space-between;489	margin: 14px 0 0;490	font-size: 0.6875rem;491}492.pager a:last-child {493	margin-left: auto;494}495.pager a:hover {496	color: var(--accent);497}498499/* ----- atlas -------------------------------------------------------------- */500501.atlas-where {502	margin: 10px 0 8px;503	font-size: 0.625rem;504	color: var(--text-faint);505	letter-spacing: 0.04em;506}507.atlas-where a {508	color: var(--accent);509}510.atlas-filter {511	width: 100%;512	margin: 0 0 8px;513	padding: 7px 10px;514	background: transparent;515	border: 1px solid var(--border);516	border-radius: 3px;517	color: var(--text);518	font-size: 0.6875rem;519}520.atlas-filter:focus {521	outline: none;522	border-color: var(--accent-dim);523}524.atlas-filter::placeholder {525	color: var(--text-faint);526}527.atlas {528	display: grid;529	grid-template-columns: minmax(0, 1fr);530	gap: 0 20px;531}532.atlas:has(> .atlas-panel:not([hidden])) {533	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);534}535.atlas [hidden] {536	display: none;537}538.atlas-folder > summary {539	list-style: none;540}541.atlas-folder > summary::-webkit-details-marker {542	display: none;543}544.atlas-children {545	padding-left: 14px;546	border-left: 1px solid var(--border);547	margin-left: 6px;548}549.atlas-row {550	position: relative;551	display: grid;552	grid-template-columns: minmax(90px, auto) 1fr auto;553	align-items: baseline;554	gap: 0 12px;555	padding: 6px 8px;556	border-bottom: 1px solid rgba(42, 32, 24, 0.62);557	cursor: pointer;558	transition: background 100ms;559}560.atlas-row:hover,561.atlas-row:focus-visible,562.atlas-row.selected {563	outline: none;564	background: var(--accent-tint-04);565	text-decoration: none;566}567.atlas-row.selected {568	box-shadow: inset 2px 0 0 var(--accent);569}570.atlas-name {571	color: var(--text-heading);572	font-size: 0.875rem;573	white-space: nowrap;574}575.atlas-folder > summary .atlas-name {576	color: var(--accent);577}578.atlas-desc {579	min-width: 0;580	color: var(--text-muted);581	font-size: 0.8125rem;582	overflow: hidden;583	text-overflow: ellipsis;584	white-space: nowrap;585}586.atlas-meta {587	font-size: 0.625rem;588	color: var(--text-faint);589	white-space: nowrap;590}591.atlas-panel {592	position: sticky;593	top: 16px;594	align-self: start;595	max-height: calc(100vh - 32px);596	overflow-y: auto;597	padding: 4px 0 12px 16px;598	border-left: 1px solid var(--border);599}600.atlas-hint {601	margin: 0;602	font-size: 0.625rem;603	color: var(--text-faint);604}605.atlas-info-name {606	margin: 0;607	font-weight: 400;608	font-size: 1.375rem;609	color: var(--text-heading);610	overflow-wrap: anywhere;611}612.atlas-info-path {613	margin: 0 0 12px;614	font-size: 0.625rem;615	color: var(--text-faint);616	overflow-wrap: anywhere;617}618.atlas-facts {619	display: grid;620	grid-template-columns: auto 1fr;621	gap: 3px 12px;622	margin: 0 0 12px;623	font-size: 0.625rem;624}625.atlas-facts dt {626	color: var(--text-faint);627}628.atlas-facts dd {629	margin: 0;630	color: var(--text);631}632.atlas-facts a,633.atlas-recent a {634	color: var(--accent);635}636.atlas-info-desc {637	font-size: 0.8125rem;638	color: var(--text-muted);639}640.atlas-recent {641	list-style: none;642	margin: 12px 0 0;643	padding: 10px 0 0;644	border-top: 1px solid var(--border);645	font-size: 0.75rem;646}647.atlas-recent li {648	margin-bottom: 6px;649	line-height: 1.5;650}651.atlas-recent .mono,652.atlas-when {653	font-size: 0.625rem;654}655.atlas-when {656	color: var(--text-faint);657	white-space: nowrap;658}659660/* ----- README and rendered Markdown --------------------------------------- */661662.repo-details {663	margin: 36px 0 0;664	animation: fadeIn 320ms 80ms ease both;665}666.repo-details-toggle {667	border-bottom: 1px solid var(--border);668	padding-bottom: 24px;669}670.repo-details-head {671	display: flex;672	align-items: center;673	gap: 6px;674	padding: 8px 0;675	font-family: var(--mono);676	font-size: 0.6875rem;677	letter-spacing: 0.12em;678	color: var(--text-secondary);679	text-transform: uppercase;680}681.markdown {682	font-size: 1.05rem;683	line-height: 1.7;684	overflow-wrap: break-word;685}686.markdown h1,687.markdown h2,688.markdown h3,689.markdown h4 {690	font-weight: 400;691	margin: 1.4em 0 0.4em;692	color: var(--text-heading);693}694.markdown h1 {695	font-size: 1.5rem;696}697.markdown h2 {698	font-size: 1.3rem;699}700.markdown h3 {701	font-size: 1.15rem;702}703.markdown p {704	margin: 0.8em 0;705}706.markdown ul,707.markdown ol {708	margin: 0.8em 0 0.8em 1.5em;709	padding: 0;710}711.markdown a {712	color: var(--accent);713}714.markdown code {715	font-family: var(--mono);716	font-size: 0.82em;717	color: var(--accent);718	background: var(--bg-surface);719	padding: 0.15em 0.35em;720	border-radius: 3px;721}722.markdown pre {723	background: var(--bg-surface);724	border-radius: 4px;725	padding: 1em 1.2em;726	overflow-x: auto;727	margin: 1em 0;728}729.markdown pre code {730	background: none;731	padding: 0;732	color: var(--text);733	font-size: 0.85em;734}735.markdown blockquote {736	border-left: 3px solid var(--border);737	margin: 1em 0;738	padding: 0.1em 1em;739	color: var(--text-secondary);740}741.markdown hr {742	border: none;743	border-top: 1px solid var(--border);744	margin: 1.5em 0;745}746.markdown img {747	max-width: 100%;748}749.markdown table {750	border-collapse: collapse;751	display: block;752	overflow-x: auto;753}754.markdown th,755.markdown td {756	border: 1px solid var(--border);757	padding: 4px 10px;758}759760/* ----- file viewer -------------------------------------------------------- */761762.breadcrumb {763	margin: 0 0 4px;764	font-size: 0.75rem;765	overflow-wrap: anywhere;766}767.breadcrumb a:hover {768	color: var(--accent);769}770.file-page-title {771	font-size: 1.75rem;772	font-weight: 400;773	margin: 4px 0 12px;774	overflow-wrap: anywhere;775}776.file-meta,777.file-toggle {778	margin: 0 0 12px;779	font-size: 0.6875rem;780}781.file-meta a,782.file-toggle a.active {783	color: var(--accent);784}785.file-image img {786	max-width: 100%;787	background: var(--bg-surface);788	border: 1px solid var(--border);789}790.file-view {791	border: 1px solid var(--border);792	background: var(--bg-surface);793	overflow-x: auto;794}795.code {796	margin: 0;797	padding: 16px 0;798	font-family: var(--mono);799	font-size: 0.8125rem;800	line-height: 1.65;801	tab-size: 4;802}803/* A grid, so tab stops count from the start of the code rather than the line number. */804.code .line {805	display: grid;806	grid-template-columns: 6em 1fr;807	padding-right: 24px;808	scroll-margin-top: 40vh;809}810.code .line:target,811.code .line.hl {812	background: var(--accent-tint-12);813}814.code .lc {815	white-space: pre;816}817.code .ln {818	padding-right: 1.5em;819	text-align: right;820	color: var(--text-faint);821	user-select: none;822}823.code .ln:hover {824	color: var(--accent);825	text-decoration: none;826}827828/* Shiki's CSS-variables theme roles, in Kepr 2's highlight.js colours. */829.tk-comment {830	color: var(--text-muted);831	font-style: italic;832}833.tk-keyword {834	color: var(--accent);835}836.tk-string,837.tk-string-expression {838	color: var(--sage);839}840.tk-constant {841	color: var(--accent-bright);842}843.tk-function {844	color: var(--accent);845}846.tk-parameter {847	color: var(--text);848}849.tk-punctuation {850	color: var(--text-secondary);851}852.tk-link {853	color: var(--accent);854	text-decoration: underline;855}856.tk-inserted {857	color: var(--sage);858}859.tk-deleted {860	color: #c45c5c;861}862.tk-i {863	font-style: italic;864}865866/* ----- save page ---------------------------------------------------------- */867868.save-id {869	margin: 12px 0 0;870	font-size: 0.75rem;871	color: var(--text-secondary);872}873.save-flag {874	margin: 12px 0 0;875	padding: 8px 12px;876	border: 1px solid #6a3a2a;877	border-left: 2px solid #c45c5c;878	background: rgba(196, 92, 92, 0.08);879	color: var(--text-heading);880}881.save-flag-label {882	margin-right: 8px;883	font-size: 0.625rem;884	letter-spacing: 0.12em;885	text-transform: uppercase;886	color: #c45c5c;887}888.save-message-head {889	font-size: 2.25rem;890	font-weight: 400;891	line-height: 1.3;892	margin: 12px 0 8px;893	color: var(--text-heading);894	overflow-wrap: anywhere;895	animation: fadeUp 280ms ease both;896}897.save-message-body {898	margin: 0 0 12px;899	white-space: pre-wrap;900	color: var(--text-secondary);901}902.save-facts {903	display: grid;904	grid-template-columns: max-content 1fr;905	gap: 2px 16px;906	margin: 16px 0;907	font-size: 0.75rem;908}909.save-facts dt {910	color: var(--text-faint);911}912.save-facts dd {913	margin: 0;914	overflow-wrap: anywhere;915}916.save-facts a,917.save-links a,918.diff-view a {919	color: var(--accent);920}921.save-links {922	display: flex;923	flex-wrap: wrap;924	gap: 8px 20px;925	margin: 0;926	font-size: 0.75rem;927}928.save-empty {929	font-size: 0.75rem;930}931.change-row,932.diff-head {933	display: grid;934	grid-template-columns: 1fr auto;935	gap: 12px;936	padding: 7px 8px;937	border-bottom: 1px solid var(--border);938	font-family: var(--mono);939	font-size: 0.8125rem;940}941.change-row:hover {942	background: var(--accent-tint-04);943	text-decoration: none;944}945.change-path {946	min-width: 0;947	overflow-wrap: anywhere;948}949.change-added .change-path {950	color: var(--sage);951}952.change-removed .change-path {953	color: var(--text-muted);954	text-decoration: line-through;955}956.change-modified .change-path {957	color: var(--accent-bright);958}959.change-stat {960	font-size: 0.75rem;961	white-space: nowrap;962}963.diff-add {964	color: var(--sage);965}966.diff-del {967	color: #c45c5c;968}969.diff-note {970	color: var(--text-faint);971	font-size: 0.6875rem;972}973.diff-file {974	margin: 0 0 20px;975}976.diff-head {977	cursor: pointer;978	list-style: none;979	border: 1px solid var(--border);980	background: var(--bg-surface);981}982.diff-head::-webkit-details-marker {983	display: none;984}985.diff-file > .file-view {986	border-top: 0;987}988.diff-file > .diff-note,989.diff-view {990	margin: 8px 0 0;991	font-size: 0.6875rem;992}993.code.diff {994	padding: 4px 0;995}996.diff .dl {997	display: grid;998	grid-template-columns: 3.5em 3.5em 1.5em 1fr;999	padding-right: 24px;1000}1001.diff .dh {1002	display: block;1003	padding: 4px 1em;1004	color: var(--text-faint);1005	background: var(--bg-elevated);1006}1007.diff .ln {1008	padding-right: 0.75em;1009	text-align: right;1010	color: var(--text-faint);1011	user-select: none;1012}1013.diff .ds {1014	text-align: center;1015	color: var(--text-faint);1016	user-select: none;1017}1018.diff .dl-add {1019	background: rgba(122, 154, 104, 0.1);1020}1021.diff .dl-add .ds {1022	color: var(--sage);1023}1024.diff .dl-del {1025	background: rgba(196, 92, 92, 0.08);1026}1027.diff .dl-del .ds {1028	color: #c45c5c;1029}10301031/* ----- archives ----------------------------------------------------------- */10321033.archive-row {1034	padding: 12px 8px;1035	border-bottom: 1px solid var(--border);1036}1037.archive-save {1038	display: flex;1039	flex-wrap: wrap;1040	align-items: baseline;1041	gap: 0 10px;1042	margin: 0;1043}1044.archive-save .history-id {1045	flex: 0 0 110px;1046}1047.archive-msg {1048	flex: 1;1049}1050.archive-head {1051	font-size: 0.625rem;1052	letter-spacing: 0.08em;1053	color: var(--accent);1054	border: 1px solid var(--accent-dim);1055	border-radius: 2px;1056	padding: 0 6px;1057}1058.archive-save .history-id:hover {1059	color: var(--accent);1060}1061.archive-links {1062	margin: 6px 0;1063	font-size: 0.75rem;1064}1065.archive-links a {1066	color: var(--accent);1067}1068.archive-row .install-line {1069	justify-content: space-between;1070}10711072/* ----- phone -------------------------------------------------------------- */10731074@media (max-width: 768px) {1075	body > nav {1076		padding: 20px 16px;1077	}1078	.nav-links {1079		gap: 18px;1080	}1081	main {1082		padding: 16px 16px 80px;1083	}1084	.repo-name {1085		font-size: 2.75rem;1086	}1087	.install-lines {1088		align-items: stretch;1089		margin-left: 0;1090		width: 100%;1091	}1092	.history-row {1093		grid-template-columns: 1fr auto;1094	}1095	.history-id {1096		grid-column: 1 / -1;1097	}1098	.atlas-row {1099		grid-template-columns: 1fr auto;1100	}1101	.atlas-desc {1102		grid-column: 1 / -1;1103		grid-row: 2;1104	}1105	.atlas:has(> .atlas-panel:not([hidden])) {1106		grid-template-columns: minmax(0, 1fr);1107	}1108	.atlas-panel {1109		display: none;1110	}1111	.code .line {1112		grid-template-columns: 4.5em 1fr;1113	}1114	.save-message-head {1115		font-size: 1.625rem;1116	}1117	.archive-msg {1118		flex-basis: 100%;1119		order: 1;1120	}1121	.diff .dl {1122		grid-template-columns: 2.75em 2.75em 1.25em 1fr;1123	}1124	.code .ln {1125		padding-right: 1em;1126	}1127}11281129/* ----- builds ------------------------------------------------------------- */11301131.release {1132	padding: 20px 8px 24px;1133	border-bottom: 1px solid var(--border);1134}1135.release-head {1136	display: flex;1137	flex-wrap: wrap;1138	align-items: baseline;1139	gap: 0 14px;1140	margin: 0 0 8px;1141}1142.release-version {1143	font-family: "Martian Mono", monospace;1144	font-size: 1rem;1145	color: var(--accent);1146}1147.release-head .history-id:hover {1148	color: var(--accent);1149}1150.release-notes {1151	margin-bottom: 14px;1152}1153.release-file {1154	padding: 10px 0;1155	border-top: 1px dashed var(--border);1156}1157.release-file-head {1158	display: flex;1159	flex-wrap: wrap;1160	align-items: baseline;1161	gap: 4px 14px;1162	margin: 0;1163}1164.release-platform {1165	flex: 0 0 180px;1166}1167.release-download {1168	flex: 1;1169	font-size: 0.75rem;1170	color: var(--accent);1171	overflow-wrap: anywhere;1172}1173.release-meta,1174.release-sha {1175	font-size: 0.6875rem;1176	color: var(--text-muted);1177}1178.release-sha {1179	margin: 4px 0 0;1180	overflow-wrap: anywhere;1181}1182.release-hint {1183	margin: 4px 0 0;1184	font-size: 0.8125rem;1185}11861187/* ----- issues ------------------------------------------------------------- */11881189.issues-bar {1190	display: flex;1191	flex-wrap: wrap;1192	align-items: center;1193	gap: 8px 12px;1194	font-size: 0.75rem;1195	padding-bottom: 14px;1196	border-bottom: 1px solid var(--bg-elevated);1197}1198.issues-tab {1199	color: var(--text-faint);1200	border: 1px solid transparent;1201	border-radius: 999px;1202	padding: 4px 10px;1203}1204button.issues-tab {1205	font: inherit;1206	background: none;1207	cursor: pointer;1208}1209.issues-tab.active {1210	color: var(--accent);1211	border-color: var(--accent-tint-12);1212}1213.issues-new {1214	margin-left: auto;1215	color: var(--text-muted);1216}1217.issue-row {1218	display: flex;1219	flex-wrap: wrap;1220	align-items: baseline;1221	gap: 2px 10px;1222	padding: 10px 8px;1223	border-bottom: 1px solid var(--border);1224}1225.issue-row:hover {1226	text-decoration: none;1227	background: var(--accent-tint-04);1228}1229.issue-title {1230	flex: 1;1231	color: var(--text-heading);1232}1233.issues-new:hover,1234.issue-row:hover .issue-title {1235	color: var(--accent);1236}1237.issue-meta,1238.issue-post-head {1239	font-size: 0.6875rem;1240	color: var(--text-muted);1241}1242.issue-symbol--open {1243	color: var(--accent);1244}1245.issue-symbol--closed {1246	color: var(--text-faint);1247}1248.issue-post {1249	margin: 18px 0;1250	padding: 14px 18px;1251	border: 1px solid var(--border);1252	border-radius: 6px;1253	background: var(--bg-surface);1254}1255.issue-post--operator {1256	border-color: var(--accent-dim);1257}1258.issue-post-head {1259	display: flex;1260	flex-wrap: wrap;1261	gap: 4px 12px;1262	margin: 0 0 8px;1263}1264.issue-author {1265	color: var(--text);1266}1267.issue-badge {1268	color: var(--accent);1269	text-transform: uppercase;1270	letter-spacing: 0.08em;1271}1272.issue-text {1273	white-space: pre-wrap;1274	overflow-wrap: anywhere;1275}1276.issue-link {1277	font-size: 0.75rem;1278	overflow-wrap: anywhere;1279	color: var(--accent);1280}1281.issues-form {1282	display: flex;1283	flex-direction: column;1284	gap: 6px;1285	max-width: 640px;1286	margin-top: 18px;1287}1288.issues-label {1289	font-family: var(--mono);1290	font-size: 0.6875rem;1291	margin-top: 6px;1292	opacity: 0.8;1293}1294.issues-input,1295.issues-textarea {1296	font-family: var(--mono);1297	font-size: 0.75rem;1298	width: 100%;1299	padding: 6px 8px;1300	color: var(--text);1301	background: var(--bg);1302	border: 1px solid var(--border);1303	border-radius: 4px;1304	resize: vertical;1305}1306.issues-input:focus,1307.issues-textarea:focus {1308	outline: none;1309	border-color: var(--accent);1310}1311.issues-submit {1312	align-self: flex-start;1313	margin-top: 10px;1314	padding: 6px 14px;1315	font-family: var(--mono);1316	font-size: 0.75rem;1317	color: var(--bg);1318	background: var(--accent);1319	border: none;1320	border-radius: 4px;1321	cursor: pointer;1322}1323.issues-submit:hover {1324	opacity: 0.85;1325}1326.issues-error {1327	font-size: 0.75rem;1328	color: #c86a5a;1329}1330/* The honeypot: off-screen for people, still in the form for bots. */1331.issues-hp {1332	position: absolute;1333	left: -9999px;1334	height: 0;1335	overflow: hidden;1336	opacity: 0;1337}13381339/* ----- front page --------------------------------------------------------- */13401341/* Kepr 2's hero band, full width, reaching up behind the nav (32px mark + 48px padding). */1342body > nav {1343	position: relative;1344	z-index: 1;1345}1346.ticker {1347	position: relative;1348	height: 304px;1349	margin: -104px calc(50% - 50vw) 0;1350	padding: 96px 0 20px;1351	display: flex;1352	flex-direction: column;1353	justify-content: space-evenly;1354	overflow: hidden;1355	pointer-events: none;1356	user-select: none;1357	border-bottom: 1px solid var(--border);1358	font-family: var(--mono);1359	color: var(--text-secondary);1360	mask-image: linear-gradient(1361		to right,1362		transparent,1363		#000 48px,1364		#000 calc(100% - 48px),1365		transparent1366	);1367}1368.ticker-row {1369	white-space: nowrap;1370	line-height: 1.2;1371}1372.ticker-track {1373	display: inline-flex;1374	gap: 64px;1375	padding-right: 64px;1376	animation: ticker-drift var(--drift) linear infinite;1377}1378/* Kepr 2's depth bands: nearer rows are larger, brighter and faster. */1379.ticker-row:nth-child(1) {1380	font-size: 9px;1381	opacity: 0.05;1382	--drift: 260s;1383}1384.ticker-row:nth-child(2) {1385	font-size: 18px;1386	opacity: 0.1;1387	--drift: 150s;1388	animation: ticker-glow 29s 4s ease-in-out infinite;1389}1390.ticker-row:nth-child(3) {1391	font-size: 7px;1392	opacity: 0.04;1393	--drift: 320s;1394}1395.ticker-row:nth-child(4) {1396	font-size: 13px;1397	opacity: 0.07;1398	--drift: 200s;1399	animation: ticker-glow 37s 17s ease-in-out infinite;1400}1401.ticker-row:nth-child(5) {1402	font-size: 22px;1403	opacity: 0.12;1404	--drift: 120s;1405}1406.ticker-row:nth-child(6) {1407	font-size: 8px;1408	opacity: 0.045;1409	--drift: 290s;1410}1411.ticker-row:nth-child(7) {1412	font-size: 15px;1413	opacity: 0.08;1414	--drift: 170s;1415}1416@keyframes ticker-drift {1417	to {1418		transform: translateX(-50%);1419	}1420}1421@keyframes ticker-glow {1422	0%,1423	88%,1424	100% {1425		color: var(--text-secondary);1426	}1427	94% {1428		color: var(--accent);1429		opacity: 0.3;1430		text-shadow: 0 0 3px var(--accent-tint-12);1431	}1432}14331434.headline {1435	display: grid;1436	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);1437	gap: 48px;1438	align-items: center;1439	padding: 56px 0 40px;1440}1441.headline h1 {1442	font-size: clamp(2rem, 5vw, 3.5rem);1443	font-weight: 400;1444	line-height: 1.15;1445	color: var(--text-heading);1446	margin: 0 0 20px;1447	animation: fadeUp 480ms ease both;1448}1449.headline-tagline {1450	margin: 0;1451	font-size: 0.9375rem;1452	line-height: 1.7;1453	color: var(--text-secondary);1454	animation: fadeUp 480ms 80ms ease both;1455}1456.headline-cloud {1457	display: flex;1458	flex-wrap: wrap;1459	justify-content: center;1460	align-items: center;1461	gap: 10px 22px;1462	padding: 20px;1463	animation: fadeIn 600ms 160ms ease both;1464}1465.tc-tag {1466	font-family: var(--mono);1467	letter-spacing: 0.03em;1468	white-space: nowrap;1469	color: var(--accent-dim);1470	transition:1471		color 0.2s,1472		opacity 0.2s,1473		text-shadow 0.2s;1474}1475.tc-tag:hover {1476	color: var(--accent);1477	opacity: 1;1478	text-shadow: 0 0 14px var(--accent-tint-12);1479}1480.tc-1 {1481	font-size: 10px;1482	opacity: 0.42;1483}1484.tc-2 {1485	font-size: 12px;1486	opacity: 0.56;1487}1488.tc-3 {1489	font-size: 15px;1490	opacity: 0.7;1491}1492.tc-4 {1493	font-size: 18px;1494	opacity: 0.85;1495	font-weight: 500;1496}1497.tc-5 {1498	font-size: 23px;1499	opacity: 1;1500	font-weight: 500;1501}15021503.featured-label {1504	font-size: 0.6875rem;1505	font-weight: 400;1506	letter-spacing: 0.08em;1507	text-transform: uppercase;1508	color: var(--text-secondary);1509	margin: 0 0 12px;1510}1511.landing-self-host {1512	margin: 32px 0 0;1513	font-size: 0.75rem;1514}1515.landing-self-host a {1516	color: var(--text-secondary);1517}15181519/* ----- repo cards (front page, browse, profile) --------------------------- */15201521.card-grid {1522	display: grid;1523	grid-template-columns: repeat(2, minmax(0, 1fr));1524	gap: 16px;1525}1526.repo-card {1527	display: flex;1528	flex-direction: column;1529	padding: 20px 22px 16px;1530	border: 1px solid var(--bg-elevated);1531	border-radius: 4px;1532	background: var(--bg);1533	transition:1534		border-color 120ms,1535		background 120ms;1536	animation: fadeUp 350ms ease both;1537}1538.repo-card:hover {1539	text-decoration: none;1540	border-color: var(--text-faint);1541	background: var(--accent-tint-04);1542}1543.repo-card-head {1544	display: flex;1545	align-items: baseline;1546	justify-content: space-between;1547	gap: 12px;1548}1549.repo-card-name {1550	font-size: 1.375rem;1551	line-height: 1.1;1552	color: var(--accent);1553	overflow: hidden;1554	text-overflow: ellipsis;1555	white-space: nowrap;1556}1557.repo-card-saves {1558	font-size: 0.6875rem;1559	white-space: nowrap;1560}1561.repo-card-desc {1562	margin: 8px 0 0;1563	font-size: 0.8125rem;1564	line-height: 1.5;1565	color: var(--text-secondary);1566	display: -webkit-box;1567	-webkit-line-clamp: 2;1568	-webkit-box-orient: vertical;1569	overflow: hidden;1570}1571.repo-card-ticks {1572	display: block;1573	width: 100%;1574	height: 36px;1575	margin: auto 0 10px;1576	padding-top: 12px;1577	box-sizing: content-box;1578	border-bottom: 1px solid var(--bg-surface);1579}1580.repo-card-ticks line {1581	stroke: var(--accent);1582	stroke-width: 1;1583	opacity: 0.45;1584	vector-effect: non-scaling-stroke;1585}1586.repo-card:hover .repo-card-ticks line {1587	opacity: 0.8;1588}1589.repo-card-foot {1590	display: flex;1591	align-items: center;1592	flex-wrap: wrap;1593	gap: 6px;1594	font-family: var(--mono);1595	font-size: 0.625rem;1596	color: var(--text-muted);1597}1598.cat-chip,1599.repo-card-lang {1600	padding: 1px 6px;1601	border: 1px solid var(--border);1602	border-radius: 2px;1603	background: var(--bg-surface);1604}1605.cat-chip {1606	color: var(--accent-dim);1607}1608.repo-card-when {1609	margin-left: auto;1610	color: var(--text-faint);1611}16121613/* ----- profile ------------------------------------------------------------ */16141615/* The cover runs the full width of the window while the page keeps its column. */1616.profile-cover {1617	position: relative;1618	height: 380px;1619	margin: -24px calc(50% - 50vw) 0;1620	overflow: hidden;1621	border-bottom: 1px solid var(--bg-surface);1622}1623.hex-backdrop {1624	position: absolute;1625	inset: 0;1626	display: flex;1627	flex-direction: row-reverse;1628	justify-content: center;1629	align-items: center;1630	gap: 13px;1631	pointer-events: none;1632	user-select: none;1633	font-family: var(--mono);1634	font-size: 13px;1635	line-height: 16px;1636	color: var(--accent-dim);1637}1638/* Characters top to bottom, columns right to left, each breathing on its own clock. */1639.hex-col {1640	writing-mode: vertical-rl;1641	text-orientation: upright;1642	letter-spacing: 3px;1643	opacity: 0.05;1644	animation: hex-breathe 17s ease-in-out infinite;1645	transition:1646		color 1.6s ease,1647		text-shadow 1.6s ease;1648}1649.hex-col:nth-child(3n) {1650	color: var(--accent);1651	animation-duration: 23s;1652	animation-delay: -7s;1653}1654.hex-col:nth-child(4n + 1) {1655	animation-duration: 29s;1656	animation-delay: -13s;1657}1658.hex-col:nth-child(5n + 2) {1659	animation-duration: 19s;1660	animation-delay: -3s;1661}1662.hex-col:nth-child(7n) {1663	animation-delay: -21s;1664}1665.hex-col.glow {1666	color: var(--accent-bright);1667	text-shadow: 0 0 6px var(--accent-tint-12);1668}1669@keyframes hex-breathe {1670	0%,1671	100% {1672		opacity: 0.05;1673	}1674	50% {1675		opacity: 0.22;1676	}1677}1678.profile-cover-fade {1679	position: absolute;1680	left: 0;1681	right: 0;1682	bottom: 0;1683	height: 55%;1684	background: linear-gradient(to bottom, transparent, var(--bg));1685	pointer-events: none;1686}1687.profile-identity {1688	position: absolute;1689	bottom: 40px;1690	left: 0;1691	right: 0;1692	max-width: 980px;1693	margin: 0 auto;1694	padding: 0 48px;1695}1696.profile-username {1697	margin: 0 0 8px;1698	font-family: "Sacramento", cursive;1699	font-weight: 400;1700	font-size: 3.625rem;1701	line-height: 1;1702	letter-spacing: -0.02em;1703	text-transform: lowercase;1704	color: var(--text-heading);1705	user-select: none;1706	animation: fadeUp 500ms ease both;1707}1708.profile-signature {1709	display: block;1710	max-height: 96px;1711	max-width: min(360px, 100%);1712}1713.profile-tagline {1714	margin: 0 0 6px;1715	font-family: var(--mono);1716	font-size: 0.75rem;1717	letter-spacing: 0.15em;1718	color: var(--text-faint);1719}1720.profile-op-badge {1721	display: block;1722	font-size: 0.6875rem;1723	letter-spacing: 0.18em;1724	color: var(--accent);1725}17261727.profile-portrait-section {1728	display: grid;1729	grid-template-columns: 320px minmax(0, 1fr);1730	gap: 40px;1731	align-items: start;1732	padding-top: 40px;1733}1734.profile-left {1735	display: flex;1736	flex-direction: column;1737	gap: 16px;1738}1739.profile-identity-card,1740.profile-languages-bar {1741	padding: 20px 24px;1742	border: 1px solid var(--bg-elevated);1743	border-radius: 4px;1744}1745.profile-identity-bio {1746	margin: 0;1747	font-size: 0.875rem;1748	line-height: 1.5;1749	color: var(--text-muted);1750}1751.profile-identity-location {1752	margin: 6px 0 0;1753	font-family: var(--mono);1754	font-size: 0.8125rem;1755	color: var(--text-muted);1756}1757.profile-website-pill {1758	display: inline-block;1759	max-width: 100%;1760	margin-top: 10px;1761	padding: 3px 8px;1762	overflow: hidden;1763	text-overflow: ellipsis;1764	white-space: nowrap;1765	border: 1px solid var(--text-faint);1766	border-radius: 3px;1767	background: var(--bg-surface);1768	font-family: var(--mono);1769	font-size: 0.6875rem;1770	color: var(--accent);1771}1772.profile-website-pill:hover {1773	border-color: var(--accent);1774	text-decoration: none;1775}1776.profile-stats-grid {1777	display: grid;1778	grid-template-columns: 1fr 1fr;1779	border: 1px solid var(--bg-elevated);1780	border-radius: 4px;1781	overflow: hidden;1782}1783.profile-stat-tile {1784	padding: 16px;1785	border-right: 1px solid var(--bg-elevated);1786	border-bottom: 1px solid var(--bg-elevated);1787}1788.profile-stat-tile:nth-child(2n) {1789	border-right: none;1790}1791.profile-stat-tile:nth-last-child(-n + 2) {1792	border-bottom: none;1793}1794.profile-stat-number {1795	margin-bottom: 4px;1796	font-weight: 600;1797	font-size: 1.75rem;1798	line-height: 1;1799	color: var(--accent);1800}1801.profile-stat-label,1802.profile-section-label {1803	font-family: var(--mono);1804	font-size: 0.625rem;1805	text-transform: uppercase;1806	letter-spacing: 0.08em;1807	color: var(--text-faint);1808}1809.profile-lang-bar {1810	display: block;1811	width: 100%;1812	height: 6px;1813	margin-bottom: 8px;1814	border-radius: 3px;1815	background: var(--bg-surface);1816}1817.profile-lang-bar rect {1818	fill: var(--accent);1819	opacity: 0.6;1820}1821.profile-lang-bar rect:nth-child(2) {1822	fill: var(--sage);1823}1824.profile-lang-bar rect:nth-child(3) {1825	fill: var(--accent-flash);1826	opacity: 0.45;1827}1828.profile-lang-bar rect:nth-child(4) {1829	fill: var(--accent-dim);1830}1831.profile-lang-labels {1832	display: flex;1833	flex-wrap: wrap;1834	gap: 10px;1835	font-family: var(--mono);1836	font-size: 0.625rem;1837	color: var(--text-muted);1838}1839.profile-section-label {1840	margin-bottom: 16px;1841	letter-spacing: 0.2em;1842}1843.profile-event {1844	display: grid;1845	grid-template-columns: 96px 12px minmax(0, 1fr) auto;1846	gap: 10px;1847	align-items: baseline;1848	padding: 7px 0;1849	border-bottom: 1px solid var(--bg-surface);1850	font-family: var(--mono);1851	font-size: 0.6875rem;1852	animation: fadeUp 300ms ease both;1853}1854.profile-event-repo,1855.profile-event-message {1856	overflow: hidden;1857	text-overflow: ellipsis;1858	white-space: nowrap;1859}1860.profile-event-repo,1861.profile-event-glyph {1862	color: var(--accent);1863}1864.profile-event-glyph {1865	font-size: 0.625rem;1866}1867.profile-event-message {1868	color: var(--text-muted);1869}1870.profile-event-message:hover {1871	color: var(--text-heading);1872}1873.profile-event-time {1874	font-size: 0.625rem;1875	white-space: nowrap;1876	color: var(--text-faint);1877}1878.profile-empty-state {1879	font-style: italic;1880	font-size: 0.8125rem;1881	color: var(--text-faint);1882}1883.profile-repos-section {1884	margin-top: 40px;1885	padding-top: 40px;1886	border-top: 1px solid var(--bg-surface);1887}18881889/* ----- docs and support --------------------------------------------------- */18901891.site-doc {1892	max-width: 72ch;1893	margin-top: 16px;1894}1895.site-doc h1 {1896	font-size: clamp(2rem, 5vw, 3rem);1897	font-weight: 400;1898	color: var(--text-heading);1899}1900.site-doc h2 {1901	margin-top: 2.4em;1902}19031904@media (max-width: 860px) {1905	.headline,1906	.profile-portrait-section {1907		grid-template-columns: minmax(0, 1fr);1908	}1909	.headline {1910		gap: 8px;1911		padding-top: 48px;1912	}1913	.card-grid {1914		grid-template-columns: minmax(0, 1fr);1915	}1916}1917@media (max-width: 768px) {1918	.ticker {1919		height: 226px;1920		margin-top: -88px;1921		padding-top: 80px;1922	}1923	.profile-cover {1924		height: 280px;1925		margin-top: -16px;1926	}1927	.profile-identity {1928		bottom: 24px;1929		padding: 0 16px;1930	}1931	.profile-username {1932		font-size: 2.5rem;1933	}1934	.profile-event {1935		grid-template-columns: 72px 12px minmax(0, 1fr);1936	}1937	.profile-event-time {1938		display: none;1939	}1940}19411942/* Last in the file, after every animation it stops, so it wins without !important. */1943@media (prefers-reduced-motion: reduce) {1944	.tri-outer,1945	.tri-inner,1946	.repo-name,1947	.repo-contributor,1948	.repo-desc,1949	.repo-homepage,1950	.repo-meta,1951	.repo-tabs,1952	.install-lines,1953	.repo-section,1954	.repo-details,1955	.save-message-head,1956	.ticker-row,1957	.ticker-track,1958	.hex-col,1959	.headline h1,1960	.headline-tagline,1961	.headline-cloud,1962	.repo-card,1963	.profile-username,1964	.profile-event {1965		animation: none;1966	}1967	.hex-col {1968		opacity: 0.12;1969	}1970}