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}1204.issues-tab.active {1205	color: var(--accent);1206	border-color: var(--accent-tint-12);1207}1208.issues-new {1209	margin-left: auto;1210	color: var(--text-muted);1211}1212.issue-row {1213	display: flex;1214	flex-wrap: wrap;1215	align-items: baseline;1216	gap: 2px 10px;1217	padding: 10px 8px;1218	border-bottom: 1px solid var(--border);1219}1220.issue-row:hover {1221	text-decoration: none;1222	background: var(--accent-tint-04);1223}1224.issue-title {1225	flex: 1;1226	color: var(--text-heading);1227}1228.issues-new:hover,1229.issue-row:hover .issue-title {1230	color: var(--accent);1231}1232.issue-meta,1233.issue-post-head {1234	font-size: 0.6875rem;1235	color: var(--text-muted);1236}1237.issue-symbol--open {1238	color: var(--accent);1239}1240.issue-symbol--closed {1241	color: var(--text-faint);1242}1243.issue-post {1244	margin: 18px 0;1245	padding: 14px 18px;1246	border: 1px solid var(--border);1247	border-radius: 6px;1248	background: var(--bg-surface);1249}1250.issue-post--operator {1251	border-color: var(--accent-dim);1252}1253.issue-post-head {1254	display: flex;1255	flex-wrap: wrap;1256	gap: 4px 12px;1257	margin: 0 0 8px;1258}1259.issue-author {1260	color: var(--text);1261}1262.issue-badge {1263	color: var(--accent);1264	text-transform: uppercase;1265	letter-spacing: 0.08em;1266}1267.issue-text {1268	white-space: pre-wrap;1269	overflow-wrap: anywhere;1270}1271.issue-link {1272	font-size: 0.75rem;1273	overflow-wrap: anywhere;1274	color: var(--accent);1275}1276.issues-form {1277	display: flex;1278	flex-direction: column;1279	gap: 6px;1280	max-width: 640px;1281	margin-top: 18px;1282}1283.issues-label {1284	font-family: var(--mono);1285	font-size: 0.6875rem;1286	margin-top: 6px;1287	opacity: 0.8;1288}1289.issues-input,1290.issues-textarea {1291	font-family: var(--mono);1292	font-size: 0.75rem;1293	width: 100%;1294	padding: 6px 8px;1295	color: var(--text);1296	background: var(--bg);1297	border: 1px solid var(--border);1298	border-radius: 4px;1299	resize: vertical;1300}1301.issues-input:focus,1302.issues-textarea:focus {1303	outline: none;1304	border-color: var(--accent);1305}1306.issues-submit {1307	align-self: flex-start;1308	margin-top: 10px;1309	padding: 6px 14px;1310	font-family: var(--mono);1311	font-size: 0.75rem;1312	color: var(--bg);1313	background: var(--accent);1314	border: none;1315	border-radius: 4px;1316	cursor: pointer;1317}1318.issues-submit:hover {1319	opacity: 0.85;1320}1321.issues-error {1322	font-size: 0.75rem;1323	color: #c86a5a;1324}1325/* The honeypot: off-screen for people, still in the form for bots. */1326.issues-hp {1327	position: absolute;1328	left: -9999px;1329	height: 0;1330	overflow: hidden;1331	opacity: 0;1332}13331334/* ----- front page --------------------------------------------------------- */13351336/* Kepr 2's hero band, full width, reaching up behind the nav (32px mark + 48px padding). */1337body > nav {1338	position: relative;1339	z-index: 1;1340}1341.ticker {1342	position: relative;1343	height: 304px;1344	margin: -104px calc(50% - 50vw) 0;1345	padding: 96px 0 20px;1346	display: flex;1347	flex-direction: column;1348	justify-content: space-evenly;1349	overflow: hidden;1350	pointer-events: none;1351	user-select: none;1352	border-bottom: 1px solid var(--border);1353	font-family: var(--mono);1354	color: var(--text-secondary);1355	mask-image: linear-gradient(1356		to right,1357		transparent,1358		#000 48px,1359		#000 calc(100% - 48px),1360		transparent1361	);1362}1363.ticker-row {1364	white-space: nowrap;1365	line-height: 1.2;1366}1367.ticker-track {1368	display: inline-flex;1369	gap: 64px;1370	padding-right: 64px;1371	animation: ticker-drift var(--drift) linear infinite;1372}1373/* Kepr 2's depth bands: nearer rows are larger, brighter and faster. */1374.ticker-row:nth-child(1) {1375	font-size: 9px;1376	opacity: 0.05;1377	--drift: 260s;1378}1379.ticker-row:nth-child(2) {1380	font-size: 18px;1381	opacity: 0.1;1382	--drift: 150s;1383	animation: ticker-glow 29s 4s ease-in-out infinite;1384}1385.ticker-row:nth-child(3) {1386	font-size: 7px;1387	opacity: 0.04;1388	--drift: 320s;1389}1390.ticker-row:nth-child(4) {1391	font-size: 13px;1392	opacity: 0.07;1393	--drift: 200s;1394	animation: ticker-glow 37s 17s ease-in-out infinite;1395}1396.ticker-row:nth-child(5) {1397	font-size: 22px;1398	opacity: 0.12;1399	--drift: 120s;1400}1401.ticker-row:nth-child(6) {1402	font-size: 8px;1403	opacity: 0.045;1404	--drift: 290s;1405}1406.ticker-row:nth-child(7) {1407	font-size: 15px;1408	opacity: 0.08;1409	--drift: 170s;1410}1411@keyframes ticker-drift {1412	to {1413		transform: translateX(-50%);1414	}1415}1416@keyframes ticker-glow {1417	0%,1418	88%,1419	100% {1420		color: var(--text-secondary);1421	}1422	94% {1423		color: var(--accent);1424		opacity: 0.3;1425		text-shadow: 0 0 3px var(--accent-tint-12);1426	}1427}14281429.headline {1430	display: grid;1431	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);1432	gap: 48px;1433	align-items: center;1434	padding: 56px 0 40px;1435}1436.headline h1 {1437	font-size: clamp(2rem, 5vw, 3.5rem);1438	font-weight: 400;1439	line-height: 1.15;1440	color: var(--text-heading);1441	margin: 0 0 20px;1442	animation: fadeUp 480ms ease both;1443}1444.headline-tagline {1445	margin: 0;1446	font-size: 0.9375rem;1447	line-height: 1.7;1448	color: var(--text-secondary);1449	animation: fadeUp 480ms 80ms ease both;1450}1451.headline-cloud {1452	display: flex;1453	flex-wrap: wrap;1454	justify-content: center;1455	align-items: center;1456	gap: 10px 22px;1457	padding: 20px;1458	animation: fadeIn 600ms 160ms ease both;1459}1460.tc-tag {1461	font-family: var(--mono);1462	letter-spacing: 0.03em;1463	white-space: nowrap;1464	color: var(--accent-dim);1465	transition:1466		color 0.2s,1467		opacity 0.2s,1468		text-shadow 0.2s;1469}1470.tc-tag:hover {1471	color: var(--accent);1472	opacity: 1;1473	text-shadow: 0 0 14px var(--accent-tint-12);1474}1475.tc-1 {1476	font-size: 10px;1477	opacity: 0.42;1478}1479.tc-2 {1480	font-size: 12px;1481	opacity: 0.56;1482}1483.tc-3 {1484	font-size: 15px;1485	opacity: 0.7;1486}1487.tc-4 {1488	font-size: 18px;1489	opacity: 0.85;1490	font-weight: 500;1491}1492.tc-5 {1493	font-size: 23px;1494	opacity: 1;1495	font-weight: 500;1496}14971498.featured-label {1499	font-size: 0.6875rem;1500	font-weight: 400;1501	letter-spacing: 0.08em;1502	text-transform: uppercase;1503	color: var(--text-secondary);1504	margin: 0 0 12px;1505}1506.landing-self-host {1507	margin: 32px 0 0;1508	font-size: 0.75rem;1509}1510.landing-self-host a {1511	color: var(--text-secondary);1512}15131514/* ----- repo cards (front page, browse, profile) --------------------------- */15151516.card-grid {1517	display: grid;1518	grid-template-columns: repeat(2, minmax(0, 1fr));1519	gap: 16px;1520}1521.repo-card {1522	display: flex;1523	flex-direction: column;1524	padding: 20px 22px 16px;1525	border: 1px solid var(--bg-elevated);1526	border-radius: 4px;1527	background: var(--bg);1528	transition:1529		border-color 120ms,1530		background 120ms;1531	animation: fadeUp 350ms ease both;1532}1533.repo-card:hover {1534	text-decoration: none;1535	border-color: var(--text-faint);1536	background: var(--accent-tint-04);1537}1538.repo-card-head {1539	display: flex;1540	align-items: baseline;1541	justify-content: space-between;1542	gap: 12px;1543}1544.repo-card-name {1545	font-size: 1.375rem;1546	line-height: 1.1;1547	color: var(--accent);1548	overflow: hidden;1549	text-overflow: ellipsis;1550	white-space: nowrap;1551}1552.repo-card-saves {1553	font-size: 0.6875rem;1554	white-space: nowrap;1555}1556.repo-card-desc {1557	margin: 8px 0 0;1558	font-size: 0.8125rem;1559	line-height: 1.5;1560	color: var(--text-secondary);1561	display: -webkit-box;1562	-webkit-line-clamp: 2;1563	-webkit-box-orient: vertical;1564	overflow: hidden;1565}1566.repo-card-ticks {1567	display: block;1568	width: 100%;1569	height: 36px;1570	margin: auto 0 10px;1571	padding-top: 12px;1572	box-sizing: content-box;1573	border-bottom: 1px solid var(--bg-surface);1574}1575.repo-card-ticks line {1576	stroke: var(--accent);1577	stroke-width: 1;1578	opacity: 0.45;1579	vector-effect: non-scaling-stroke;1580}1581.repo-card:hover .repo-card-ticks line {1582	opacity: 0.8;1583}1584.repo-card-foot {1585	display: flex;1586	align-items: center;1587	flex-wrap: wrap;1588	gap: 6px;1589	font-family: var(--mono);1590	font-size: 0.625rem;1591	color: var(--text-muted);1592}1593.cat-chip,1594.repo-card-lang {1595	padding: 1px 6px;1596	border: 1px solid var(--border);1597	border-radius: 2px;1598	background: var(--bg-surface);1599}1600.cat-chip {1601	color: var(--accent-dim);1602}1603.repo-card-when {1604	margin-left: auto;1605	color: var(--text-faint);1606}16071608/* ----- profile ------------------------------------------------------------ */16091610/* The cover runs the full width of the window while the page keeps its column. */1611.profile-cover {1612	position: relative;1613	height: 380px;1614	margin: -24px calc(50% - 50vw) 0;1615	overflow: hidden;1616	border-bottom: 1px solid var(--bg-surface);1617}1618.hex-backdrop {1619	position: absolute;1620	inset: 0;1621	display: flex;1622	flex-direction: row-reverse;1623	justify-content: center;1624	align-items: center;1625	gap: 13px;1626	pointer-events: none;1627	user-select: none;1628	font-family: var(--mono);1629	font-size: 13px;1630	line-height: 16px;1631	color: var(--accent-dim);1632}1633/* Characters top to bottom, columns right to left, each breathing on its own clock. */1634.hex-col {1635	writing-mode: vertical-rl;1636	text-orientation: upright;1637	letter-spacing: 3px;1638	opacity: 0.05;1639	animation: hex-breathe 17s ease-in-out infinite;1640	transition:1641		color 1.6s ease,1642		text-shadow 1.6s ease;1643}1644.hex-col:nth-child(3n) {1645	color: var(--accent);1646	animation-duration: 23s;1647	animation-delay: -7s;1648}1649.hex-col:nth-child(4n + 1) {1650	animation-duration: 29s;1651	animation-delay: -13s;1652}1653.hex-col:nth-child(5n + 2) {1654	animation-duration: 19s;1655	animation-delay: -3s;1656}1657.hex-col:nth-child(7n) {1658	animation-delay: -21s;1659}1660.hex-col.glow {1661	color: var(--accent-bright);1662	text-shadow: 0 0 6px var(--accent-tint-12);1663}1664@keyframes hex-breathe {1665	0%,1666	100% {1667		opacity: 0.05;1668	}1669	50% {1670		opacity: 0.22;1671	}1672}1673.profile-cover-fade {1674	position: absolute;1675	left: 0;1676	right: 0;1677	bottom: 0;1678	height: 55%;1679	background: linear-gradient(to bottom, transparent, var(--bg));1680	pointer-events: none;1681}1682.profile-identity {1683	position: absolute;1684	bottom: 40px;1685	left: 0;1686	right: 0;1687	max-width: 980px;1688	margin: 0 auto;1689	padding: 0 48px;1690}1691.profile-username {1692	margin: 0 0 8px;1693	font-family: "Sacramento", cursive;1694	font-weight: 400;1695	font-size: 3.625rem;1696	line-height: 1;1697	letter-spacing: -0.02em;1698	text-transform: lowercase;1699	color: var(--text-heading);1700	user-select: none;1701	animation: fadeUp 500ms ease both;1702}1703.profile-signature {1704	display: block;1705	max-height: 96px;1706	max-width: min(360px, 100%);1707}1708.profile-tagline {1709	margin: 0 0 6px;1710	font-family: var(--mono);1711	font-size: 0.75rem;1712	letter-spacing: 0.15em;1713	color: var(--text-faint);1714}1715.profile-op-badge {1716	display: block;1717	font-size: 0.6875rem;1718	letter-spacing: 0.18em;1719	color: var(--accent);1720}17211722.profile-portrait-section {1723	display: grid;1724	grid-template-columns: 320px minmax(0, 1fr);1725	gap: 40px;1726	align-items: start;1727	padding-top: 40px;1728}1729.profile-left {1730	display: flex;1731	flex-direction: column;1732	gap: 16px;1733}1734.profile-identity-card,1735.profile-languages-bar {1736	padding: 20px 24px;1737	border: 1px solid var(--bg-elevated);1738	border-radius: 4px;1739}1740.profile-identity-bio {1741	margin: 0;1742	font-size: 0.875rem;1743	line-height: 1.5;1744	color: var(--text-muted);1745}1746.profile-identity-location {1747	margin: 6px 0 0;1748	font-family: var(--mono);1749	font-size: 0.8125rem;1750	color: var(--text-muted);1751}1752.profile-website-pill {1753	display: inline-block;1754	max-width: 100%;1755	margin-top: 10px;1756	padding: 3px 8px;1757	overflow: hidden;1758	text-overflow: ellipsis;1759	white-space: nowrap;1760	border: 1px solid var(--text-faint);1761	border-radius: 3px;1762	background: var(--bg-surface);1763	font-family: var(--mono);1764	font-size: 0.6875rem;1765	color: var(--accent);1766}1767.profile-website-pill:hover {1768	border-color: var(--accent);1769	text-decoration: none;1770}1771.profile-stats-grid {1772	display: grid;1773	grid-template-columns: 1fr 1fr;1774	border: 1px solid var(--bg-elevated);1775	border-radius: 4px;1776	overflow: hidden;1777}1778.profile-stat-tile {1779	padding: 16px;1780	border-right: 1px solid var(--bg-elevated);1781	border-bottom: 1px solid var(--bg-elevated);1782}1783.profile-stat-tile:nth-child(2n) {1784	border-right: none;1785}1786.profile-stat-tile:nth-last-child(-n + 2) {1787	border-bottom: none;1788}1789.profile-stat-number {1790	margin-bottom: 4px;1791	font-weight: 600;1792	font-size: 1.75rem;1793	line-height: 1;1794	color: var(--accent);1795}1796.profile-stat-label,1797.profile-section-label {1798	font-family: var(--mono);1799	font-size: 0.625rem;1800	text-transform: uppercase;1801	letter-spacing: 0.08em;1802	color: var(--text-faint);1803}1804.profile-lang-bar {1805	display: block;1806	width: 100%;1807	height: 6px;1808	margin-bottom: 8px;1809	border-radius: 3px;1810	background: var(--bg-surface);1811}1812.profile-lang-bar rect {1813	fill: var(--accent);1814	opacity: 0.6;1815}1816.profile-lang-bar rect:nth-child(2) {1817	fill: var(--sage);1818}1819.profile-lang-bar rect:nth-child(3) {1820	fill: var(--accent-flash);1821	opacity: 0.45;1822}1823.profile-lang-bar rect:nth-child(4) {1824	fill: var(--accent-dim);1825}1826.profile-lang-labels {1827	display: flex;1828	flex-wrap: wrap;1829	gap: 10px;1830	font-family: var(--mono);1831	font-size: 0.625rem;1832	color: var(--text-muted);1833}1834.profile-section-label {1835	margin-bottom: 16px;1836	letter-spacing: 0.2em;1837}1838.profile-event {1839	display: grid;1840	grid-template-columns: 96px 12px minmax(0, 1fr) auto;1841	gap: 10px;1842	align-items: baseline;1843	padding: 7px 0;1844	border-bottom: 1px solid var(--bg-surface);1845	font-family: var(--mono);1846	font-size: 0.6875rem;1847	animation: fadeUp 300ms ease both;1848}1849.profile-event-repo,1850.profile-event-message {1851	overflow: hidden;1852	text-overflow: ellipsis;1853	white-space: nowrap;1854}1855.profile-event-repo,1856.profile-event-glyph {1857	color: var(--accent);1858}1859.profile-event-glyph {1860	font-size: 0.625rem;1861}1862.profile-event-message {1863	color: var(--text-muted);1864}1865.profile-event-message:hover {1866	color: var(--text-heading);1867}1868.profile-event-time {1869	font-size: 0.625rem;1870	white-space: nowrap;1871	color: var(--text-faint);1872}1873.profile-empty-state {1874	font-style: italic;1875	font-size: 0.8125rem;1876	color: var(--text-faint);1877}1878.profile-repos-section {1879	margin-top: 40px;1880	padding-top: 40px;1881	border-top: 1px solid var(--bg-surface);1882}18831884@media (max-width: 860px) {1885	.headline,1886	.profile-portrait-section {1887		grid-template-columns: minmax(0, 1fr);1888	}1889	.headline {1890		gap: 8px;1891		padding-top: 48px;1892	}1893	.card-grid {1894		grid-template-columns: minmax(0, 1fr);1895	}1896}1897@media (max-width: 768px) {1898	.ticker {1899		height: 226px;1900		margin-top: -88px;1901		padding-top: 80px;1902	}1903	.profile-cover {1904		height: 280px;1905		margin-top: -16px;1906	}1907	.profile-identity {1908		bottom: 24px;1909		padding: 0 16px;1910	}1911	.profile-username {1912		font-size: 2.5rem;1913	}1914	.profile-event {1915		grid-template-columns: 72px 12px minmax(0, 1fr);1916	}1917	.profile-event-time {1918		display: none;1919	}1920}19211922/* Last in the file, after every animation it stops, so it wins without !important. */1923@media (prefers-reduced-motion: reduce) {1924	.tri-outer,1925	.tri-inner,1926	.repo-name,1927	.repo-contributor,1928	.repo-desc,1929	.repo-homepage,1930	.repo-meta,1931	.repo-tabs,1932	.install-lines,1933	.repo-section,1934	.repo-details,1935	.save-message-head,1936	.ticker-row,1937	.ticker-track,1938	.hex-col,1939	.headline h1,1940	.headline-tagline,1941	.headline-cloud,1942	.repo-card,1943	.profile-username,1944	.profile-event {1945		animation: none;1946	}1947	.hex-col {1948		opacity: 0.12;1949	}1950}