/* The palette is the game's, not the application's: Fontin is embedded in the binary under a
deliberate maintainer decision about a licence that nominally forbids redistribution, and
serving it as a webfont would be a broader redistribution than the one that was decided on.
So the family resemblance is carried by colour and a system stack. */
:root {
--bg: #14120f;
--raised: #1c1a15;
--line: #302b22;
--text: #d4cdbe;
--muted: #918876;
--head: #e7dcbd;
--accent: #d68f42;
--accent-dim: #a2682c;
--rare: #ffe45c;
--font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
--mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 16px/1.65 var(--font);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--rare); text-decoration: underline; }
/* The header is sticky, so an unadjusted jump parks its target underneath it. */
:target { scroll-margin-top: 80px; }
h1, h2, h3, h4, h5, h6 { color: var(--head); line-height: 1.25; font-weight: 600; }
/* ---- chrome ---- */
.bar {
display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
padding: 12px 24px;
border-bottom: 1px solid var(--line);
background: var(--raised);
position: sticky; top: 0; z-index: 10;
}
.brand {
display: flex; align-items: center; gap: 10px;
color: var(--head); font-weight: 600; letter-spacing: .01em;
}
.brand img { display: block; }
.bar nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; font-size: 15px; }
.bar nav a { display: inline-flex; align-items: center; gap: 7px; }
/* The nav glyphs are Font Awesome Free 6.7.2 — solid, except GitHub's, which is the brands face
— inlined as data URIs because this site fetches nothing from anywhere else, and painted as a
mask rather than drawn so each one takes its link's own colour, hover included. Icons are
CC BY 4.0, © Fonticons, Inc.; see ATTRIBUTION.md.
The class comes from the page's filename, so a page added to the nav lands here by name — one
not listed simply goes without a glyph rather than drawing a square where the mask would be. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
.bar nav :is(.nav-about, .nav-roadmap, .nav-privacy, .nav-attribution, .nav-contact, .nav-github)::before {
content: ""; flex: none;
width: 1em; height: 1em;
background: currentColor;
-webkit-mask: var(--i) center / contain no-repeat;
mask: var(--i) center / contain no-repeat;
}
}
.bar nav a.nav-about { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E"); }
.bar nav a.nav-roadmap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 96c0 50.2-59.1 125.1-84.6 155c-3.8 4.4-9.4 6.1-14.5 5L320 256c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c53 0 96 43 96 96s-43 96-96 96l-276.4 0c8.7-9.9 19.3-22.6 30-36.8c6.3-8.4 12.8-17.6 19-27.2L416 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0c-53 0-96-43-96-96s43-96 96-96l39.8 0c-21-31.5-39.8-67.7-39.8-96c0-53 43-96 96-96s96 43 96 96zM117.1 489.1c-3.8 4.3-7.2 8.1-10.1 11.3l-1.8 2-.2-.2c-6 4.6-14.6 4-20-1.8C59.8 473 0 402.5 0 352c0-53 43-96 96-96s96 43 96 96c0 30-21.1 67-43.5 97.9c-10.7 14.7-21.7 28-30.8 38.5l-.6 .7zM128 352a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM416 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E"); }
.bar nav a.nav-privacy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8l0 378.1C394 378 431.1 230.1 432 141.4L256 66.8s0 0 0 0z'/%3E%3C/svg%3E"); }
.bar nav a.nav-attribution { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M384 32l128 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L398.4 96c-5.2 25.8-22.9 47.1-46.4 57.3L352 448l160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0-192 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l160 0 0-294.7c-23.5-10.3-41.2-31.6-46.4-57.3L128 96c-17.7 0-32-14.3-32-32s14.3-32 32-32l128 0c14.6-19.4 37.8-32 64-32s49.4 12.6 64 32zm55.6 288l144.9 0L512 195.8 439.6 320zM512 416c-62.9 0-115.2-34-126-78.9c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C627.2 382 574.9 416 512 416zM126.8 195.8L54.4 320l144.9 0L126.8 195.8zM.9 337.1c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C242 382 189.7 416 126.8 416S11.7 382 .9 337.1z'/%3E%3C/svg%3E"); }
.bar nav a.nav-contact { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E"); }
.bar nav a.nav-github { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z'/%3E%3C/svg%3E"); }
footer {
border-top: 1px solid var(--line);
margin-top: 64px; padding: 32px 24px 56px;
color: var(--muted); font-size: 14px;
text-align: center;
}
footer p { max-width: 70ch; margin: 10px auto; }
.fine { font-size: 13px; line-height: 1.55; }
/* ---- landing ---- */
.hero {
max-width: 780px; margin: 0 auto; padding: 56px 24px 8px;
text-align: center;
}
.hero .logo { image-rendering: auto; }
.hero h1 { font-size: 40px; margin: 16px 0 8px; letter-spacing: .01em; }
.tagline { font-size: 20px; color: var(--head); margin: 0 auto 14px; max-width: 34ch; }
.sub { color: var(--muted); margin: 0 auto; max-width: 60ch; }
/* Two by two, filled down each column rather than across each row: that puts Windows in the
first column and Linux in the second with one flavour under the other, while leaving the
markup in the order it should collapse to when there is only one column left. Both rows are
`1fr` so the four cards square up despite their blurbs being different lengths. */
.downloads {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-auto-flow: column;
gap: 12px; margin: 32px 0 12px; text-align: left;
}
/* The card is a div, not a link: it holds a second link (to Requirements) and an may not
nest inside an . `.primary::after` stretches over the whole card so it stays one click
target, and the inner link lifts itself above that overlay to stay reachable. */
.dl {
position: relative;
padding: 14px 16px;
background: var(--raised); border: 1px solid var(--line); border-radius: 6px;
color: var(--text);
}
.dl:hover { border-color: var(--accent-dim); }
/* Windows ships two ways and they are not equal: the installer is the one where the tool can
update itself, so it carries the weight and the portable .zip sits beside it. */
.dl.rec { border-color: var(--accent-dim); }
.dl .primary {
display: block; color: var(--accent); font-size: 17px; font-weight: 600;
}
.dl:hover .primary { color: var(--rare); }
.dl .primary::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.dl span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.dl .req { position: relative; z-index: 1; text-decoration: underline; }
.dl .size { margin-top: 4px; color: var(--text); font-variant-numeric: tabular-nums; }
/* Small enough to be fine print, large enough to actually be read. */
.fineprint {
margin: 14px auto 0; max-width: 60ch;
color: var(--muted); font-size: 11.5px; line-height: 1.7; opacity: .8;
}
.sub sup, .fineprint sup { font-size: .75em; }
.relnote { color: var(--muted); font-size: 14px; margin: 0; }
.warn {
margin: 28px auto 0; max-width: 62ch; padding: 12px 16px;
border: 1px solid var(--line); border-left: 3px solid var(--accent-dim); border-radius: 4px;
background: var(--raised); color: var(--muted); font-size: 14.5px; text-align: left;
}
.warn strong { color: var(--head); }
.feature { max-width: 820px; margin: 56px auto 0; padding: 0 24px; }
.feature h2 { font-size: 24px; margin: 0 0 16px; }
.feature ul { padding-left: 22px; }
.feature li { margin: 10px 0; }
.feature li strong { color: var(--head); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.cols p { color: var(--muted); }
dl { margin: 0; }
dt { color: var(--head); font-weight: 600; margin-top: 16px; }
dd { margin: 2px 0 0; color: var(--muted); }
dd ul { margin: 3px 0 0; padding-left: 18px; }
dd li { margin: 0; line-height: 1.45; }
dd .aside { margin: 7px 0 0; font-size: 13.5px; opacity: .8; }
/* Collapsed by default: nearly everyone takes the AppImage, and this is the answer for the
few who do not. */
.reqs { margin-top: 7px; }
.reqs summary { cursor: pointer; color: var(--accent); font-size: 14.5px; }
.reqs summary:hover { color: var(--rare); }
.reqs p, .reqs li { color: var(--muted); font-size: 14px; line-height: 1.5; }
.reqs p { margin: 10px 0; }
.reqs ul { padding-left: 18px; margin: 6px 0; }
.reqs li { margin: 0; }
.reqs code { font-size: 12.5px; }
.reqs strong { color: var(--head); }
ul.docs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
.feature ul.docs { justify-content: flex-start; }
.shots { max-width: 1100px; margin: 56px auto 0; padding: 0 24px; }
.shots h2 { font-size: 24px; margin: 0 0 20px; }
/* One slide at a time, snapped. Everything that drives it — swipe, wheel, arrow keys, the
scrollbar — is the browser's, and stays the whole of it when `gallery.js` does not run. Every
slide stays in the document, so what a search engine indexes is all seven and not just the
first. What the script adds is under `.js` below. */
.strip {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
scrollbar-color: var(--accent-dim) var(--raised);
padding-bottom: 12px;
}
.strip:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 4px; }
.strip::-webkit-scrollbar { height: 10px; }
.strip::-webkit-scrollbar-track { background: var(--raised); border-radius: 5px; }
.strip::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 5px; }
.slide {
flex: 0 0 100%;
scroll-snap-align: center;
scroll-margin-top: 80px;
display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start;
margin: 0; padding: 2px 2px 0;
}
/* Bounded by height, never by width: the captures are portraits and 100% width upscaled every
one of them — the 450px-wide currency shot by more than double. */
.slide img {
display: block; max-height: 520px; width: auto; max-width: 100%; height: auto;
border: 1px solid var(--line); border-radius: 6px;
}
.slide figcaption { color: var(--muted); }
.slide h3 { font-size: 20px; margin: 0 0 12px; color: var(--head); }
.slide ul { padding-left: 20px; margin: 0; }
.slide li { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.dots {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
margin-top: 14px;
}
.dots span { color: var(--muted); font-size: 13px; margin-right: 6px; }
.dots a {
width: 28px; height: 28px; display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 50%;
color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums;
}
.dots a:hover { border-color: var(--accent-dim); color: var(--rare); text-decoration: none; }
.dots a[aria-current="true"] { border-color: var(--accent); color: var(--rare); }
@media (max-width: 760px) {
.slide { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
.slide img { max-height: 420px; }
.slide figcaption { justify-self: stretch; }
}
/* The strip is smooth because it is driven by jumps — a wheel or a swipe is the reader's own
speed either way — but a reader who asked for no motion gets neither that nor the rotation. */
@media (prefers-reduced-motion: reduce) {
.strip { scroll-behavior: auto; }
}
/* ---- what the script adds ----
`js` is set on before first paint, so nothing here appears late or shifts the page.
Without it the scrollbar is the only thing on the strip saying it scrolls, so it stays. */
.js .strip { scrollbar-width: none; }
.js .strip::-webkit-scrollbar { height: 0; }
.stripwrap { position: relative; }
.arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 50%;
background: rgba(20, 18, 15, .82); color: var(--head);
font: 26px/1 var(--font); cursor: pointer;
padding: 0 0 3px; /* the chevrons sit high in the line box */
}
.arrow:hover { border-color: var(--accent-dim); color: var(--rare); }
.arrow:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 2px; }
.arrow.prev { left: 6px; }
.arrow.next { right: 6px; }
/* Backdrop and box are the element's own; what is set here is that the image decides the size,
up to the viewport it has to fit inside. */
.lightbox {
border: 1px solid var(--line); border-radius: 8px;
background: var(--raised); color: var(--text);
padding: 10px; max-width: 94vw; max-height: 94vh;
}
.lightbox::backdrop { background: rgba(10, 9, 7, .82); }
.lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 20px); width: auto; height: auto; }
.lightbox .close {
position: absolute; top: 14px; right: 14px;
width: 34px; height: 34px; display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 50%;
background: rgba(20, 18, 15, .9); color: var(--head);
font: 22px/1 var(--font); cursor: pointer; padding: 0 0 2px;
}
.lightbox .close:hover { border-color: var(--accent-dim); color: var(--rare); }
/* ---- rendered documents ---- */
.prose { max-width: 820px; margin: 0 auto; padding: 40px 24px 0; }
.prose h1 { font-size: 32px; margin: 0 0 20px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose h4 { font-size: 17px; margin: 22px 0 6px; }
.prose p, .prose li { overflow-wrap: break-word; }
.prose strong { color: var(--head); }
.prose blockquote {
margin: 20px 0; padding: 2px 18px;
border-left: 3px solid var(--accent-dim); color: var(--muted);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.prose img { max-width: 100%; height: auto; }
/* GitHub wraps every heading as `