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.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.atlas-picker [hidden] {557	display: none;558}559.atlas-ref-tab {560	list-style: none;561	cursor: pointer;562	padding: 4px 8px;563	background: var(--bg);564	border: 1px solid rgba(200, 154, 90, 0.45);565	border-radius: 2px;566	font-size: 0.625rem;567	color: var(--accent);568}569.atlas-ref-tab::-webkit-details-marker {570	display: none;571}572.atlas-ref-tab:hover {573	color: var(--accent-dim);574}575.atlas-picker-popover {576	position: absolute;577	top: calc(100% + 6px);578	left: 0;579	z-index: 50;580	display: flex;581	flex-direction: column;582	width: min(420px, 90vw);583	max-height: 480px;584	background: var(--bg);585	border: 1px solid var(--text-faint);586	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);587}588.atlas-picker-filter {589	padding: 8px 10px;590	background: var(--bg);591	border: 0;592	border-bottom: 1px solid var(--bg-elevated);593	outline: none;594	font-size: 0.6875rem;595	color: var(--text-heading);596}597.atlas-picker-filter::placeholder {598	color: var(--text-faint);599}600.atlas-picker-list {601	flex: 1 1 auto;602	min-height: 0;603	overflow: auto;604	scrollbar-width: thin;605	scrollbar-color: var(--border) transparent;606}607.atlas-picker-row {608	display: grid;609	grid-template-columns: 80px 1fr auto;610	align-items: center;611	gap: 8px;612	padding: 6px 10px;613	border-bottom: 1px solid rgba(42, 32, 24, 0.4);614	color: var(--text-muted);615}616.atlas-picker-row:hover {617	background: rgba(200, 154, 90, 0.06);618	text-decoration: none;619}620.atlas-picker-row.active {621	background: rgba(200, 154, 90, 0.1);622}623.atlas-picker-row:hover *,624.atlas-picker-row.active * {625	color: var(--accent);626}627.atlas-picker-id,628.atlas-picker-age {629	font-family: var(--mono);630	font-size: 0.5625rem;631	color: var(--text-faint);632	white-space: nowrap;633	overflow: hidden;634	text-overflow: ellipsis;635}636.atlas-picker-msg {637	font-size: 0.6875rem;638	white-space: nowrap;639	overflow: hidden;640	text-overflow: ellipsis;641}642.atlas-head-link {643	color: var(--accent);644}645.atlas-search-btn {646	margin-left: auto;647	padding: 4px 8px;648	background: transparent;649	border: 1px solid var(--border);650	border-radius: 2px;651	font: inherit;652	font-size: 0.625rem;653	color: var(--text-faint);654	cursor: pointer;655}656.atlas-search-btn:hover {657	color: var(--accent);658	border-color: var(--accent-dim);659}660.atlas-search-btn[hidden],661.atlas-filter[hidden] {662	display: none;663}664.atlas-filter {665	width: 220px;666	max-width: 100%;667	margin-left: auto;668	padding: 5px 10px;669	background: transparent;670	border: 1px solid var(--border);671	border-radius: 3px;672	color: var(--text);673	font-size: 0.6875rem;674}675.atlas-filter:focus {676	outline: none;677	border-color: var(--accent-dim);678}679.atlas-filter::placeholder {680	color: var(--text-faint);681}682/* kepr.js fixes the height at the closed tree's, at most Kepr 2's 520px, and the tree and panel683   scroll inside it; without it, the whole box scrolls. */684.atlas {685	display: grid;686	grid-template-columns: minmax(0, 1fr);687	grid-template-rows: minmax(0, 1fr);688	gap: 0 20px;689	max-height: 520px;690	overflow-y: auto;691	border-top: 1px solid var(--bg-elevated);692	border-bottom: 1px solid var(--bg-elevated);693}694.atlas-tree,695.atlas-panel {696	min-height: 0;697	overflow-y: auto;698	scrollbar-width: thin;699	scrollbar-color: var(--border) transparent;700}701.atlas:has(> .atlas-panel:not([hidden])) {702	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);703}704.atlas [hidden] {705	display: none;706}707.atlas-folder > summary {708	list-style: none;709}710.atlas-folder > summary::-webkit-details-marker {711	display: none;712}713.atlas-children {714	padding-left: 14px;715	border-left: 1px solid var(--border);716	margin-left: 6px;717}718.atlas-row {719	position: relative;720	display: grid;721	grid-template-columns: minmax(90px, auto) 1fr auto;722	align-items: baseline;723	gap: 0 12px;724	padding: 6px 8px;725	border-bottom: 1px solid rgba(42, 32, 24, 0.62);726	cursor: pointer;727	transition: background 100ms;728}729.atlas-row:hover,730.atlas-row:focus-visible,731.atlas-row.selected {732	outline: none;733	background: var(--accent-tint-04);734	text-decoration: none;735}736.atlas-row.selected {737	box-shadow: inset 2px 0 0 var(--accent);738}739.atlas-name {740	color: var(--text-heading);741	font-size: 0.875rem;742	white-space: nowrap;743}744.atlas-folder > summary .atlas-name {745	color: var(--accent);746}747.atlas-desc {748	min-width: 0;749	color: var(--text-muted);750	font-size: 0.8125rem;751	overflow: hidden;752	text-overflow: ellipsis;753	white-space: nowrap;754}755.atlas-meta {756	font-size: 0.625rem;757	color: var(--text-faint);758	white-space: nowrap;759}760.atlas-panel {761	padding: 12px 0 12px 16px;762	border-left: 1px solid var(--border);763}764.atlas-hint {765	margin: 0;766	font-size: 0.625rem;767	color: var(--text-faint);768}769.atlas-info-name {770	margin: 0;771	font-weight: 400;772	font-size: 1.375rem;773	color: var(--text-heading);774	overflow-wrap: anywhere;775}776.atlas-info-path {777	margin: 0 0 12px;778	font-size: 0.625rem;779	color: var(--text-faint);780	overflow-wrap: anywhere;781}782.atlas-facts {783	display: grid;784	grid-template-columns: auto 1fr;785	gap: 3px 12px;786	margin: 0 0 12px;787	font-size: 0.625rem;788}789.atlas-facts dt {790	color: var(--text-faint);791}792.atlas-facts dd {793	margin: 0;794	color: var(--text);795}796.atlas-facts a {797	color: var(--accent);798}799.atlas-info-desc {800	font-size: 0.8125rem;801	color: var(--text-muted);802}803/* ----- README and rendered Markdown --------------------------------------- */804805.repo-details {806	margin: 36px 0 0;807	animation: fadeIn 320ms 80ms ease both;808}809.repo-details-toggle {810	border-bottom: 1px solid var(--border);811	padding-bottom: 24px;812}813.repo-details-head {814	display: flex;815	align-items: center;816	gap: 6px;817	padding: 8px 0;818	font-family: var(--mono);819	font-size: 0.6875rem;820	letter-spacing: 0.12em;821	color: var(--text-secondary);822	text-transform: uppercase;823}824.markdown {825	font-size: 1.05rem;826	line-height: 1.7;827	overflow-wrap: break-word;828}829.markdown h1,830.markdown h2,831.markdown h3,832.markdown h4 {833	font-weight: 400;834	margin: 1.4em 0 0.4em;835	color: var(--text-heading);836}837.markdown h1 {838	font-size: 1.5rem;839}840.markdown h2 {841	font-size: 1.3rem;842}843.markdown h3 {844	font-size: 1.15rem;845}846.markdown p {847	margin: 0.8em 0;848}849.markdown ul,850.markdown ol {851	margin: 0.8em 0 0.8em 1.5em;852	padding: 0;853}854.markdown a {855	color: var(--accent);856}857.markdown code {858	font-family: var(--mono);859	font-size: 0.82em;860	color: var(--accent);861	background: var(--bg-surface);862	padding: 0.15em 0.35em;863	border-radius: 3px;864}865.markdown pre {866	background: var(--bg-surface);867	border-radius: 4px;868	padding: 1em 1.2em;869	overflow-x: auto;870	margin: 1em 0;871}872.markdown pre code {873	background: none;874	padding: 0;875	color: var(--text);876	font-size: 0.85em;877}878.markdown blockquote {879	border-left: 3px solid var(--border);880	margin: 1em 0;881	padding: 0.1em 1em;882	color: var(--text-secondary);883}884.markdown hr {885	border: none;886	border-top: 1px solid var(--border);887	margin: 1.5em 0;888}889.markdown img {890	max-width: 100%;891}892.markdown table {893	border-collapse: collapse;894	display: block;895	overflow-x: auto;896}897.markdown th,898.markdown td {899	border: 1px solid var(--border);900	padding: 4px 10px;901}902903/* ----- file viewer -------------------------------------------------------- */904905.breadcrumb {906	margin: 0 0 4px;907	font-size: 0.75rem;908	overflow-wrap: anywhere;909}910.breadcrumb a:hover {911	color: var(--accent);912}913.file-page-title {914	font-size: 1.75rem;915	font-weight: 400;916	margin: 4px 0 12px;917	overflow-wrap: anywhere;918}919.file-meta,920.file-toggle {921	margin: 0 0 12px;922	font-size: 0.6875rem;923}924.file-meta a,925.file-toggle a.active {926	color: var(--accent);927}928.file-image img {929	max-width: 100%;930	background: var(--bg-surface);931	border: 1px solid var(--border);932}933.file-view {934	border: 1px solid var(--border);935	background: var(--bg-surface);936	overflow-x: auto;937}938.code {939	margin: 0;940	padding: 16px 0;941	font-family: var(--mono);942	font-size: 0.8125rem;943	line-height: 1.65;944	tab-size: 4;945}946/* A grid, so tab stops count from the start of the code rather than the line number. */947.code .line {948	display: grid;949	grid-template-columns: 6em 1fr;950	padding-right: 24px;951	scroll-margin-top: 40vh;952}953.code .line:target,954.code .line.hl {955	background: var(--accent-tint-12);956}957.code .lc {958	white-space: pre;959}960.code .ln {961	padding-right: 1.5em;962	text-align: right;963	color: var(--text-faint);964	user-select: none;965}966.code .ln:hover {967	color: var(--accent);968	text-decoration: none;969}970971/* Shiki's CSS-variables theme roles, in Kepr 2's highlight.js colours. */972.tk-comment {973	color: var(--text-muted);974	font-style: italic;975}976.tk-keyword {977	color: var(--accent);978}979.tk-string,980.tk-string-expression {981	color: var(--sage);982}983.tk-constant {984	color: var(--accent-bright);985}986.tk-function {987	color: var(--accent);988}989.tk-parameter {990	color: var(--text);991}992.tk-punctuation {993	color: var(--text-secondary);994}995.tk-link {996	color: var(--accent);997	text-decoration: underline;998}999.tk-inserted {1000	color: var(--sage);1001}1002.tk-deleted {1003	color: #c45c5c;1004}1005.tk-i {1006	font-style: italic;1007}10081009/* ----- save page ---------------------------------------------------------- */10101011.save-id {1012	margin: 12px 0 0;1013	font-size: 0.75rem;1014	color: var(--text-secondary);1015}1016.save-flag {1017	margin: 12px 0 0;1018	padding: 8px 12px;1019	border: 1px solid #6a3a2a;1020	border-left: 2px solid #c45c5c;1021	background: rgba(196, 92, 92, 0.08);1022	color: var(--text-heading);1023}1024.save-flag-label {1025	margin-right: 8px;1026	font-size: 0.625rem;1027	letter-spacing: 0.12em;1028	text-transform: uppercase;1029	color: #c45c5c;1030}1031.save-message-head {1032	font-size: 2.25rem;1033	font-weight: 400;1034	line-height: 1.3;1035	margin: 12px 0 8px;1036	color: var(--text-heading);1037	overflow-wrap: anywhere;1038	animation: fadeUp 280ms ease both;1039}1040.save-message-body {1041	margin: 0 0 12px;1042	white-space: pre-wrap;1043	color: var(--text-secondary);1044}1045.save-facts {1046	display: grid;1047	grid-template-columns: max-content 1fr;1048	gap: 2px 16px;1049	margin: 16px 0;1050	font-size: 0.75rem;1051}1052.save-facts dt {1053	color: var(--text-faint);1054}1055.save-facts dd {1056	margin: 0;1057	overflow-wrap: anywhere;1058}1059.save-facts a,1060.save-links a,1061.diff-view a {1062	color: var(--accent);1063}1064.save-links {1065	display: flex;1066	flex-wrap: wrap;1067	gap: 8px 20px;1068	margin: 0;1069	font-size: 0.75rem;1070}1071.save-empty {1072	font-size: 0.75rem;1073}1074.change-row,1075.diff-head {1076	display: grid;1077	grid-template-columns: 1fr auto;1078	gap: 12px;1079	padding: 7px 8px;1080	border-bottom: 1px solid var(--border);1081	font-family: var(--mono);1082	font-size: 0.8125rem;1083}1084.change-row:hover {1085	background: var(--accent-tint-04);1086	text-decoration: none;1087}1088.change-path {1089	min-width: 0;1090	overflow-wrap: anywhere;1091}1092.change-added .change-path {1093	color: var(--sage);1094}1095.change-removed .change-path {1096	color: var(--text-muted);1097	text-decoration: line-through;1098}1099.change-modified .change-path {1100	color: var(--accent-bright);1101}1102.change-stat {1103	font-size: 0.75rem;1104	white-space: nowrap;1105}1106.diff-add {1107	color: var(--sage);1108}1109.diff-del {1110	color: #c45c5c;1111}1112.diff-note {1113	color: var(--text-faint);1114	font-size: 0.6875rem;1115}1116.diff-file {1117	margin: 0 0 20px;1118}1119.diff-head {1120	cursor: pointer;1121	list-style: none;1122	border: 1px solid var(--border);1123	background: var(--bg-surface);1124}1125.diff-head::-webkit-details-marker {1126	display: none;1127}1128.diff-file > .file-view {1129	border-top: 0;1130}1131.diff-file > .diff-note,1132.diff-view {1133	margin: 8px 0 0;1134	font-size: 0.6875rem;1135}1136.code.diff {1137	padding: 4px 0;1138}1139.diff .dl {1140	display: grid;1141	grid-template-columns: 3.5em 3.5em 1.5em 1fr;1142	padding-right: 24px;1143}1144.diff .dh {1145	display: block;1146	padding: 4px 1em;1147	color: var(--text-faint);1148	background: var(--bg-elevated);1149}1150.diff .ln {1151	padding-right: 0.75em;1152	text-align: right;1153	color: var(--text-faint);1154	user-select: none;1155}1156.diff .ds {1157	text-align: center;1158	color: var(--text-faint);1159	user-select: none;1160}1161.diff .dl-add {1162	background: rgba(122, 154, 104, 0.1);1163}1164.diff .dl-add .ds {1165	color: var(--sage);1166}1167.diff .dl-del {1168	background: rgba(196, 92, 92, 0.08);1169}1170.diff .dl-del .ds {1171	color: #c45c5c;1172}11731174/* ----- archives ----------------------------------------------------------- */11751176.archive-row {1177	padding: 12px 8px;1178	border-bottom: 1px solid var(--border);1179}1180.archive-save {1181	display: flex;1182	flex-wrap: wrap;1183	align-items: baseline;1184	gap: 0 10px;1185	margin: 0;1186}1187.archive-save .history-id {1188	flex: 0 0 110px;1189}1190.archive-msg {1191	flex: 1;1192}1193.archive-head {1194	font-size: 0.625rem;1195	letter-spacing: 0.08em;1196	color: var(--accent);1197	border: 1px solid var(--accent-dim);1198	border-radius: 2px;1199	padding: 0 6px;1200}1201.archive-save .history-id:hover {1202	color: var(--accent);1203}1204.archive-links {1205	margin: 6px 0;1206	font-size: 0.75rem;1207}1208.archive-links a {1209	color: var(--accent);1210}1211.archive-row .install-line {1212	justify-content: space-between;1213}12141215/* ----- phone -------------------------------------------------------------- */12161217@media (max-width: 768px) {1218	body > nav {1219		padding: 20px 16px;1220	}1221	.nav-links {1222		gap: 18px;1223	}1224	main {1225		padding: 16px 16px 80px;1226	}1227	.repo-name {1228		font-size: 2.75rem;1229	}1230	.install-lines {1231		align-items: stretch;1232		margin-left: 0;1233		width: 100%;1234	}1235	.history-row {1236		grid-template-columns: 1fr auto;1237	}1238	.history-id {1239		grid-column: 1 / -1;1240	}1241	.atlas-row {1242		grid-template-columns: 1fr auto;1243	}1244	.atlas-desc {1245		grid-column: 1 / -1;1246		grid-row: 2;1247	}1248	.atlas:has(> .atlas-panel:not([hidden])) {1249		grid-template-columns: minmax(0, 1fr);1250	}1251	.atlas-panel {1252		display: none;1253	}1254	.code .line {1255		grid-template-columns: 4.5em 1fr;1256	}1257	.save-message-head {1258		font-size: 1.625rem;1259	}1260	.archive-msg {1261		flex-basis: 100%;1262		order: 1;1263	}1264	.diff .dl {1265		grid-template-columns: 2.75em 2.75em 1.25em 1fr;1266	}1267	.code .ln {1268		padding-right: 1em;1269	}1270}12711272/* ----- builds ------------------------------------------------------------- */12731274.release {1275	padding: 20px 8px 24px;1276	border-bottom: 1px solid var(--border);1277}1278.release-head {1279	display: flex;1280	flex-wrap: wrap;1281	align-items: baseline;1282	gap: 0 14px;1283	margin: 0 0 8px;1284}1285.release-version {1286	font-family: "Martian Mono", monospace;1287	font-size: 1rem;1288	color: var(--accent);1289}1290.release-head .history-id:hover {1291	color: var(--accent);1292}1293.release-notes {1294	margin-bottom: 14px;1295}1296.release-file {1297	padding: 10px 0;1298	border-top: 1px dashed var(--border);1299}1300.release-file-head {1301	display: flex;1302	flex-wrap: wrap;1303	align-items: baseline;1304	gap: 4px 14px;1305	margin: 0;1306}1307.release-platform {1308	flex: 0 0 180px;1309}1310.release-download {1311	flex: 1;1312	font-size: 0.75rem;1313	color: var(--accent);1314	overflow-wrap: anywhere;1315}1316.release-meta,1317.release-sha {1318	font-size: 0.6875rem;1319	color: var(--text-muted);1320}1321.release-sha {1322	margin: 4px 0 0;1323	overflow-wrap: anywhere;1324}1325.release-hint {1326	margin: 4px 0 0;1327	font-size: 0.8125rem;1328}13291330/* ----- issues ------------------------------------------------------------- */13311332.issues-bar {1333	display: flex;1334	flex-wrap: wrap;1335	align-items: center;1336	gap: 8px 12px;1337	font-size: 0.75rem;1338	padding-bottom: 14px;1339	border-bottom: 1px solid var(--bg-elevated);1340}1341.issues-tab {1342	color: var(--text-faint);1343	border: 1px solid transparent;1344	border-radius: 999px;1345	padding: 4px 10px;1346}1347button.issues-tab {1348	font: inherit;1349	background: none;1350	cursor: pointer;1351}1352.issues-tab.active {1353	color: var(--accent);1354	border-color: var(--accent-tint-12);1355}1356.issues-new {1357	margin-left: auto;1358	color: var(--text-muted);1359}1360.issue-row {1361	display: flex;1362	flex-wrap: wrap;1363	align-items: baseline;1364	gap: 2px 10px;1365	padding: 10px 8px;1366	border-bottom: 1px solid var(--border);1367}1368.issue-row:hover {1369	text-decoration: none;1370	background: var(--accent-tint-04);1371}1372.issue-title {1373	flex: 1;1374	color: var(--text-heading);1375}1376.issues-new:hover,1377.issue-row:hover .issue-title {1378	color: var(--accent);1379}1380.issue-meta,1381.issue-post-head {1382	font-size: 0.6875rem;1383	color: var(--text-muted);1384}1385.issue-symbol--open {1386	color: var(--accent);1387}1388.issue-symbol--closed {1389	color: var(--text-faint);1390}1391.issue-post {1392	margin: 18px 0;1393	padding: 14px 18px;1394	border: 1px solid var(--border);1395	border-radius: 6px;1396	background: var(--bg-surface);1397}1398.issue-post--operator {1399	border-color: var(--accent-dim);1400}1401.issue-post-head {1402	display: flex;1403	flex-wrap: wrap;1404	gap: 4px 12px;1405	margin: 0 0 8px;1406}1407.issue-author {1408	color: var(--text);1409}1410.issue-badge {1411	color: var(--accent);1412	text-transform: uppercase;1413	letter-spacing: 0.08em;1414}1415.issue-text {1416	white-space: pre-wrap;1417	overflow-wrap: anywhere;1418}1419.issue-link {1420	font-size: 0.75rem;1421	overflow-wrap: anywhere;1422	color: var(--accent);1423}1424.issues-form {1425	display: flex;1426	flex-direction: column;1427	gap: 6px;1428	max-width: 640px;1429	margin-top: 18px;1430}1431.issues-label {1432	font-family: var(--mono);1433	font-size: 0.6875rem;1434	margin-top: 6px;1435	opacity: 0.8;1436}1437.issues-input,1438.issues-textarea {1439	font-family: var(--mono);1440	font-size: 0.75rem;1441	width: 100%;1442	padding: 6px 8px;1443	color: var(--text);1444	background: var(--bg);1445	border: 1px solid var(--border);1446	border-radius: 4px;1447	resize: vertical;1448}1449.issues-input:focus,1450.issues-textarea:focus {1451	outline: none;1452	border-color: var(--accent);1453}1454.issues-submit {1455	align-self: flex-start;1456	margin-top: 10px;1457	padding: 6px 14px;1458	font-family: var(--mono);1459	font-size: 0.75rem;1460	color: var(--bg);1461	background: var(--accent);1462	border: none;1463	border-radius: 4px;1464	cursor: pointer;1465}1466.issues-submit:hover {1467	opacity: 0.85;1468}1469.issues-error {1470	font-size: 0.75rem;1471	color: #c86a5a;1472}1473/* The honeypot: off-screen for people, still in the form for bots. */1474.issues-hp {1475	position: absolute;1476	left: -9999px;1477	height: 0;1478	overflow: hidden;1479	opacity: 0;1480}14811482/* ----- front page --------------------------------------------------------- */14831484/* Kepr 2's hero band, full width, reaching up behind the nav (32px mark + 48px padding). */1485body > nav {1486	position: relative;1487	z-index: 1;1488}1489.ticker {1490	position: relative;1491	height: 304px;1492	margin: -104px calc(50% - 50vw) 0;1493	padding: 96px 0 20px;1494	display: flex;1495	flex-direction: column;1496	justify-content: space-evenly;1497	overflow: hidden;1498	pointer-events: none;1499	user-select: none;1500	border-bottom: 1px solid var(--border);1501	font-family: var(--mono);1502	color: var(--text-secondary);1503	mask-image: linear-gradient(1504		to right,1505		transparent,1506		#000 48px,1507		#000 calc(100% - 48px),1508		transparent1509	);1510}1511.ticker-row {1512	white-space: nowrap;1513	line-height: 1.2;1514	opacity: var(--o);1515	animation: ticker-glow 83s var(--glow-at) ease-in-out infinite;1516}1517/* The drift's duration is set by kepr.js from the track's width, so every row keeps Kepr 2's1518   pace in px/s (--speed) however long its messages are; this is the no-JavaScript fallback. */1519.ticker-track {1520	display: inline-flex;1521	gap: 64px;1522	padding-right: 64px;1523	animation: ticker-drift 1500s linear infinite;1524}1525/* Kepr 2's depth bands: nearer rows are larger, brighter and faster. Each row takes its turn at1526   the glow, a few seconds out of every 83, spaced so one or two glow at a time. */1527.ticker-row:nth-child(1) {1528	font-size: 9px;1529	--o: 0.05;1530	--speed: 12;1531	--glow-at: -5s;1532}1533.ticker-row:nth-child(2) {1534	font-size: 18px;1535	--o: 0.1;1536	--speed: 23;1537	--glow-at: -41s;1538}1539.ticker-row:nth-child(3) {1540	font-size: 7px;1541	--o: 0.04;1542	--speed: 9;1543	--glow-at: -77s;1544}1545.ticker-row:nth-child(4) {1546	font-size: 13px;1547	--o: 0.07;1548	--speed: 17;1549	--glow-at: -29s;1550}1551.ticker-row:nth-child(5) {1552	font-size: 22px;1553	--o: 0.12;1554	--speed: 29;1555	--glow-at: -65s;1556}1557.ticker-row:nth-child(6) {1558	font-size: 8px;1559	--o: 0.045;1560	--speed: 10;1561	--glow-at: -17s;1562}1563.ticker-row:nth-child(7) {1564	font-size: 15px;1565	--o: 0.08;1566	--speed: 20;1567	--glow-at: -53s;1568}1569@keyframes ticker-drift {1570	to {1571		transform: translateX(-50%);1572	}1573}1574@keyframes ticker-glow {1575	0%,1576	10%,1577	100% {1578		color: var(--text-secondary);1579		opacity: var(--o);1580		text-shadow: none;1581	}1582	5% {1583		color: var(--accent);1584		opacity: calc(var(--o) * 3.5);1585		text-shadow: 0 0 3px var(--accent-tint-12);1586	}1587}15881589.headline {1590	display: grid;1591	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);1592	gap: 48px;1593	align-items: center;1594	padding: 56px 0 40px;1595}1596.headline h1 {1597	font-size: clamp(2rem, 5vw, 3.5rem);1598	font-weight: 400;1599	line-height: 1.15;1600	color: var(--text-heading);1601	margin: 0 0 20px;1602	animation: fadeUp 480ms ease both;1603}1604.headline-tagline {1605	margin: 0;1606	font-size: 0.9375rem;1607	line-height: 1.7;1608	color: var(--text-secondary);1609	animation: fadeUp 480ms 80ms ease both;1610}1611.headline-cloud {1612	display: flex;1613	flex-wrap: wrap;1614	justify-content: center;1615	align-items: center;1616	gap: 10px 22px;1617	padding: 20px;1618	animation: fadeIn 600ms 160ms ease both;1619}1620.tc-tag {1621	font-family: var(--mono);1622	letter-spacing: 0.03em;1623	white-space: nowrap;1624	color: var(--accent-dim);1625	transition:1626		color 0.2s,1627		opacity 0.2s,1628		text-shadow 0.2s;1629}1630.tc-tag:hover {1631	color: var(--accent);1632	opacity: 1;1633	text-shadow: 0 0 14px var(--accent-tint-12);1634}1635.tc-1 {1636	font-size: 10px;1637	opacity: 0.42;1638}1639.tc-2 {1640	font-size: 12px;1641	opacity: 0.56;1642}1643.tc-3 {1644	font-size: 15px;1645	opacity: 0.7;1646}1647.tc-4 {1648	font-size: 18px;1649	opacity: 0.85;1650	font-weight: 500;1651}1652.tc-5 {1653	font-size: 23px;1654	opacity: 1;1655	font-weight: 500;1656}16571658.featured-label {1659	font-size: 0.6875rem;1660	font-weight: 400;1661	letter-spacing: 0.08em;1662	text-transform: uppercase;1663	color: var(--text-secondary);1664	margin: 0 0 12px;1665}1666.landing-self-host {1667	margin: 32px 0 0;1668	font-size: 0.75rem;1669}1670.landing-self-host a {1671	color: var(--text-secondary);1672}16731674/* ----- repo cards (front page, browse, profile) --------------------------- */16751676.card-grid {1677	display: grid;1678	grid-template-columns: repeat(2, minmax(0, 1fr));1679	gap: 16px;1680}1681.repo-card {1682	display: flex;1683	flex-direction: column;1684	padding: 20px 22px 16px;1685	border: 1px solid var(--bg-elevated);1686	border-radius: 4px;1687	background: var(--bg);1688	transition:1689		border-color 120ms,1690		background 120ms;1691	animation: fadeUp 350ms ease both;1692}1693.repo-card:hover {1694	text-decoration: none;1695	border-color: var(--text-faint);1696	background: var(--accent-tint-04);1697}1698.repo-card-head {1699	display: flex;1700	align-items: baseline;1701	justify-content: space-between;1702	gap: 12px;1703}1704.repo-card-name {1705	font-size: 1.375rem;1706	line-height: 1.1;1707	color: var(--accent);1708	overflow: hidden;1709	text-overflow: ellipsis;1710	white-space: nowrap;1711}1712.repo-card-saves {1713	font-size: 0.6875rem;1714	white-space: nowrap;1715}1716.repo-card-desc {1717	margin: 8px 0 0;1718	font-size: 0.8125rem;1719	line-height: 1.5;1720	color: var(--text-secondary);1721	display: -webkit-box;1722	-webkit-line-clamp: 2;1723	-webkit-box-orient: vertical;1724	overflow: hidden;1725}1726.repo-card-cat {1727	margin: 10px 0 0;1728	font-size: 0.9375rem;1729	color: var(--text);1730}17311732/* ----- profile ------------------------------------------------------------ */17331734/* The cover runs the full width of the window while the page keeps its column. */1735.profile-cover {1736	position: relative;1737	height: 380px;1738	margin: -24px calc(50% - 50vw) 0;1739	overflow: hidden;1740	border-bottom: 1px solid var(--bg-surface);1741}1742.hex-backdrop {1743	position: absolute;1744	inset: 0;1745	display: flex;1746	flex-direction: row-reverse;1747	justify-content: center;1748	align-items: center;1749	gap: 13px;1750	pointer-events: none;1751	user-select: none;1752	font-family: var(--mono);1753	font-size: 13px;1754	line-height: 16px;1755	color: var(--accent-dim);1756}1757/* Characters top to bottom, columns right to left, each breathing on its own clock. */1758.hex-col {1759	writing-mode: vertical-rl;1760	text-orientation: upright;1761	letter-spacing: 3px;1762	opacity: 0.05;1763	animation: hex-breathe 17s ease-in-out infinite;1764	transition:1765		color 1.6s ease,1766		text-shadow 1.6s ease;1767}1768.hex-col:nth-child(3n) {1769	color: var(--accent);1770	animation-duration: 23s;1771	animation-delay: -7s;1772}1773.hex-col:nth-child(4n + 1) {1774	animation-duration: 29s;1775	animation-delay: -13s;1776}1777.hex-col:nth-child(5n + 2) {1778	animation-duration: 19s;1779	animation-delay: -3s;1780}1781.hex-col:nth-child(7n) {1782	animation-delay: -21s;1783}1784.hex-col.glow {1785	color: var(--accent-bright);1786	text-shadow: 0 0 6px var(--accent-tint-12);1787}1788@keyframes hex-breathe {1789	0%,1790	100% {1791		opacity: 0.05;1792	}1793	50% {1794		opacity: 0.22;1795	}1796}1797.profile-cover-fade {1798	position: absolute;1799	left: 0;1800	right: 0;1801	bottom: 0;1802	height: 55%;1803	background: linear-gradient(to bottom, transparent, var(--bg));1804	pointer-events: none;1805}1806.profile-identity {1807	position: absolute;1808	bottom: 40px;1809	left: 0;1810	right: 0;1811	max-width: 980px;1812	margin: 0 auto;1813	padding: 0 48px;1814}1815.profile-username {1816	margin: 0 0 8px;1817	font-family: "Sacramento", cursive;1818	font-weight: 400;1819	font-size: 3.625rem;1820	line-height: 1;1821	letter-spacing: -0.02em;1822	text-transform: lowercase;1823	color: var(--text-heading);1824	user-select: none;1825	animation: fadeUp 500ms ease both;1826}1827.profile-signature {1828	display: block;1829	max-height: 96px;1830	max-width: min(360px, 100%);1831}1832.profile-tagline {1833	margin: 0 0 6px;1834	font-family: var(--mono);1835	font-size: 0.75rem;1836	letter-spacing: 0.15em;1837	color: var(--text-faint);1838}1839.profile-op-badge {1840	display: block;1841	font-size: 0.6875rem;1842	letter-spacing: 0.18em;1843	color: var(--accent);1844}18451846.profile-portrait-section {1847	display: grid;1848	grid-template-columns: 320px minmax(0, 1fr);1849	gap: 40px;1850	align-items: start;1851	padding-top: 40px;1852}1853.profile-left {1854	display: flex;1855	flex-direction: column;1856	gap: 16px;1857}1858.profile-identity-card,1859.profile-languages-bar {1860	padding: 20px 24px;1861	border: 1px solid var(--bg-elevated);1862	border-radius: 4px;1863}1864.profile-identity-bio {1865	margin: 0;1866	font-size: 0.875rem;1867	line-height: 1.5;1868	color: var(--text-muted);1869}1870.profile-identity-location {1871	margin: 6px 0 0;1872	font-family: var(--mono);1873	font-size: 0.8125rem;1874	color: var(--text-muted);1875}1876.profile-website-pill {1877	display: inline-block;1878	max-width: 100%;1879	margin-top: 10px;1880	padding: 3px 8px;1881	overflow: hidden;1882	text-overflow: ellipsis;1883	white-space: nowrap;1884	border: 1px solid var(--text-faint);1885	border-radius: 3px;1886	background: var(--bg-surface);1887	font-family: var(--mono);1888	font-size: 0.6875rem;1889	color: var(--accent);1890}1891.profile-website-pill:hover {1892	border-color: var(--accent);1893	text-decoration: none;1894}1895.profile-stats-grid {1896	display: grid;1897	grid-template-columns: 1fr 1fr;1898	border: 1px solid var(--bg-elevated);1899	border-radius: 4px;1900	overflow: hidden;1901}1902.profile-stat-tile {1903	padding: 16px;1904	border-right: 1px solid var(--bg-elevated);1905	border-bottom: 1px solid var(--bg-elevated);1906}1907.profile-stat-tile:nth-child(2n) {1908	border-right: none;1909}1910.profile-stat-tile:nth-last-child(-n + 2) {1911	border-bottom: none;1912}1913.profile-stat-number {1914	margin-bottom: 4px;1915	font-weight: 600;1916	font-size: 1.75rem;1917	line-height: 1;1918	color: var(--accent);1919}1920.profile-stat-label,1921.profile-section-label {1922	font-family: var(--mono);1923	font-size: 0.625rem;1924	text-transform: uppercase;1925	letter-spacing: 0.08em;1926	color: var(--text-faint);1927}1928.profile-lang-bar {1929	display: block;1930	width: 100%;1931	height: 6px;1932	margin-bottom: 8px;1933	border-radius: 3px;1934	background: var(--bg-surface);1935}1936.profile-lang-bar rect {1937	fill: var(--accent);1938	opacity: 0.6;1939}1940.profile-lang-bar rect:nth-child(2) {1941	fill: var(--sage);1942}1943.profile-lang-bar rect:nth-child(3) {1944	fill: var(--accent-flash);1945	opacity: 0.45;1946}1947.profile-lang-bar rect:nth-child(4) {1948	fill: var(--accent-dim);1949}1950.profile-lang-labels {1951	display: flex;1952	flex-wrap: wrap;1953	gap: 10px;1954	font-family: var(--mono);1955	font-size: 0.625rem;1956	color: var(--text-muted);1957}1958.profile-section-label {1959	margin-bottom: 16px;1960	letter-spacing: 0.2em;1961}1962.profile-event {1963	display: grid;1964	grid-template-columns: 96px 12px minmax(0, 1fr) auto;1965	gap: 10px;1966	align-items: baseline;1967	padding: 7px 0;1968	border-bottom: 1px solid var(--bg-surface);1969	font-family: var(--mono);1970	font-size: 0.6875rem;1971	animation: fadeUp 300ms ease both;1972}1973.profile-event-repo,1974.profile-event-message {1975	overflow: hidden;1976	text-overflow: ellipsis;1977	white-space: nowrap;1978}1979.profile-event-repo,1980.profile-event-glyph {1981	color: var(--accent);1982}1983.profile-event-glyph {1984	font-size: 0.625rem;1985}1986.profile-event-message {1987	color: var(--text-muted);1988}1989.profile-event-message:hover {1990	color: var(--text-heading);1991}1992.profile-event-time {1993	font-size: 0.625rem;1994	white-space: nowrap;1995	color: var(--text-faint);1996}1997.profile-empty-state {1998	font-style: italic;1999	font-size: 0.8125rem;2000	color: var(--text-faint);2001}2002.profile-repos-section {2003	margin-top: 40px;2004	padding-top: 40px;2005	border-top: 1px solid var(--bg-surface);2006}20072008/* ----- docs and support --------------------------------------------------- */20092010.site-doc {2011	max-width: 72ch;2012	margin-top: 16px;2013}2014.site-doc h1 {2015	font-size: clamp(2rem, 5vw, 3rem);2016	font-weight: 400;2017	color: var(--text-heading);2018}2019.site-doc h2 {2020	margin-top: 2.4em;2021}20222023@media (max-width: 860px) {2024	.headline,2025	.profile-portrait-section {2026		grid-template-columns: minmax(0, 1fr);2027	}2028	.headline {2029		gap: 8px;2030		padding-top: 48px;2031	}2032	.card-grid {2033		grid-template-columns: minmax(0, 1fr);2034	}2035}2036@media (max-width: 768px) {2037	.fv-header {2038		flex-wrap: wrap;2039		height: auto;2040		padding: 8px 12px;2041		gap: 8px 12px;2042	}2043	.fv-body {2044		grid-template-columns: minmax(0, 1fr);2045	}2046	.fv-detail {2047		display: none;2048	}2049	.ticker {2050		height: 226px;2051		margin-top: -88px;2052		padding-top: 80px;2053	}2054	.profile-cover {2055		height: 280px;2056		margin-top: -16px;2057	}2058	.profile-identity {2059		bottom: 24px;2060		padding: 0 16px;2061	}2062	.profile-username {2063		font-size: 2.5rem;2064	}2065	.profile-event {2066		grid-template-columns: 72px 12px minmax(0, 1fr);2067	}2068	.profile-event-time {2069		display: none;2070	}2071}20722073/* ----- file viewer (Kepr 2's Atlas modal) -------------------------------- */20742075body:has(> .fv-overlay) {2076	overflow: hidden;2077}2078.fv-overlay {2079	position: fixed;2080	inset: 0;2081	z-index: 2000;2082	display: flex;2083	flex-direction: column;2084	background: rgba(8, 7, 5, 0.97);2085	outline: none;2086	animation: fv-in 200ms ease both;2087}2088@keyframes fv-in {2089	from {2090		opacity: 0;2091		transform: translateY(6px) scale(0.97);2092	}2093}2094.fv-header {2095	display: flex;2096	align-items: center;2097	gap: 16px;2098	flex-shrink: 0;2099	height: 48px;2100	padding: 0 20px;2101	background: var(--bg);2102	border-bottom: 1px solid var(--bg-elevated);2103}2104.fv-close {2105	background: none;2106	border: 0;2107	padding: 0 4px;2108	font-size: 1.375rem;2109	line-height: 1;2110	color: var(--text-faint);2111	cursor: pointer;2112}2113.fv-close:hover {2114	color: var(--accent);2115}2116.fv-title {2117	display: flex;2118	align-items: baseline;2119	gap: 8px;2120	flex: 1;2121	min-width: 0;2122}2123.fv-name {2124	font-size: 1.25rem;2125	color: var(--text-heading);2126	white-space: nowrap;2127}2128.fv-path {2129	font-size: 0.625rem;2130	color: var(--text-faint);2131	white-space: nowrap;2132	overflow: hidden;2133	text-overflow: ellipsis;2134}2135.fv-controls,2136.fv-nav {2137	display: flex;2138	align-items: center;2139	gap: 4px;2140	flex-shrink: 0;2141}2142.fv-ctrl-btn {2143	background: transparent;2144	border: 1px solid rgba(200, 154, 90, 0.2);2145	border-radius: 2px;2146	padding: 3px 7px;2147	font: inherit;2148	font-size: 0.625rem;2149	color: var(--text-faint);2150	cursor: pointer;2151	transition:2152		color 100ms,2153		border-color 100ms;2154}2155.fv-ctrl-btn:hover:not(:disabled),2156.fv-ctrl-btn.active {2157	color: var(--accent);2158	border-color: rgba(200, 154, 90, 0.5);2159	text-decoration: none;2160}2161.fv-ctrl-btn:disabled {2162	opacity: 0.3;2163	cursor: default;2164}2165.fv-pos {2166	min-width: 48px;2167	text-align: center;2168	font-size: 0.625rem;2169	color: var(--text-faint);2170}2171.fv-body {2172	flex: 1;2173	min-height: 0;2174	display: grid;2175	grid-template-columns: minmax(0, 1fr) 280px;2176}2177.fv-source {2178	min-height: 0;2179	overflow: auto;2180	padding: 16px 28px 32px;2181	font-family: var(--mono);2182	font-size: 0.6875rem;2183	color: var(--text-faint);2184}2185.fv-source .file-view {2186	margin: -16px -28px 0;2187	border: 0;2188	background: none;2189	overflow: visible;2190}2191.fv-source .code {2192	font-size: var(--fv-size);2193	color: var(--text);2194}2195.fv-wrap .fv-source .lc {2196	white-space: pre-wrap;2197	overflow-wrap: anywhere;2198}2199.fv-source .file-markdown {2200	font-family: var(--sans);2201	font-size: calc(var(--fv-size) + 2px);2202	color: var(--text);2203}2204.fv-detail .atlas-info-desc {2205	font-size: 0.8125rem;2206}2207.fv-detail {2208	overflow-y: auto;2209	padding: 18px 20px 24px;2210	background: var(--bg);2211	border-left: 1px solid var(--bg-elevated);2212}22132214/* Last in the file, after every animation it stops, so it wins without !important. */2215@media (prefers-reduced-motion: reduce) {2216	.tri-outer,2217	.tri-inner,2218	.repo-name,2219	.repo-contributor,2220	.repo-desc,2221	.repo-homepage,2222	.repo-meta,2223	.repo-tabs,2224	.install-lines,2225	.repo-section,2226	.repo-details,2227	.save-message-head,2228	.ticker-row,2229	.ticker-track,2230	.hex-col,2231	.headline h1,2232	.headline-tagline,2233	.headline-cloud,2234	.repo-card,2235	.profile-username,2236	.profile-event,2237	.fv-overlay,2238	.repo-panel {2239		animation: none;2240	}2241	.hex-col {2242		opacity: 0.12;2243	}2244}