@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg:#111113;
  --surface:#1b1b1f;
  --ink:#f7f5f0;
  --muted:#b5b4bb;
  --red:#f23941;
  --line:#343439;
  --heading:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --ease:cubic-bezier(.2,.75,.25,1)}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:105px}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 'DM Sans',Arial,sans-serif}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  color:inherit;
  cursor:pointer}
button,a {
  -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #fff;
  outline-offset:6px}
button {
  border:0}
img {
  max-width:100%;
  object-fit:contain}
p {
  margin:0 0 1.2rem;
  color:var(--muted)}
h1,h2,h3 {
  line-height:1.04;
  margin:0;
  font-family:var(--heading);
  font-weight:700}
h1 {
  font-size:clamp(4rem,6.9vw,7rem);
  letter-spacing:-.025em}
h2 {
  font-size:clamp(2.8rem,4.4vw,4.7rem);
  letter-spacing:-.02em}
h2>span {
  color:#929298}
h3 {
  font-size:1.8rem}
em {
  font-style:normal;
  color:var(--red)}
.wrap {
  width:min(1240px,calc(100% - 80px));
  margin:auto}
.skip {
  position:fixed;
  top:-100px;
  left:12px;
  background:white;
  color:black;
  padding:12px;
  z-index:100}
.skip:focus {
  top:12px}
.header {
  position:sticky;
  top:0;
  background:#111113ed;
  backdrop-filter:blur(16px);
  border-bottom:1px solid #ffffff0f;
  z-index:20}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:92px}
.brand {
  display:flex}
.brand img {
  height:76px}
.nav nav {
  display:flex;
  align-items:center;
  gap:27px;
  font-size:.875rem;
  font-weight:600}
.nav nav>a:not(.button) {
  transition:color .2s}
.nav nav>a:hover {
  color:#ff747a}
.nav .github {
  margin-left:20px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:16px 25px;
  background:var(--red);
  color:#fff;
  font-weight:700;
  border:1px solid transparent;
  transition:background .25s,transform .25s,box-shadow .25s;
  border-radius:3px;
  font-size:.9375rem}
.button:hover {
  background:#ce202a;
  box-shadow:0 8px 30px #f2394120;
  transform:translateY(-2px)}
.button:active {
  transform:scale(.97)}
.button span,.text-link span {
  display:inline-block;
  transition:transform .25s}
.button:hover span {
  transform:translateY(3px)}
.text-link:hover span {
  transform:translate(3px,-3px)}
.small {
  padding:9px 19px}
.light {
  background:var(--ink);
  color:#161618}
.light:hover {
  background:#dedbd6}
.text-link {
  font-size:.9375rem;
  font-weight:700;
  border-bottom:1px solid #ffffff40;
  padding:10px 0}
.actions {
  display:flex;
  align-items:center;
  gap:27px;
  flex-wrap:wrap}
.eyebrow {
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--red);
  margin-bottom:24px}
.hero {
  min-height:720px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:45px;
  padding-top:65px;
  padding-bottom:85px}
.hero .lead {
  max-width:520px;
  margin:28px 0 32px}
.lead {
  font-size:1.125rem;
  line-height:1.8}
.platform {
  font-size:.8125rem;
  margin:24px 0 0;
  display:flex;
  align-items:center;
  gap:12px}
.platform>span {
  font-size:1.4rem;
  color:#fff}
.platform b {
  font-weight:400;
  color:#666}
.hero-art {
  position:relative;
  perspective:1000px;
  padding:25px 15px}
.halftone {
  position:absolute;
  inset:-30px;
  background-image:radial-gradient(#ee394166 1px,transparent 1px);
  background-size:9px 9px;
  mask-image:radial-gradient(ellipse,#000 20%,transparent 70%);
  animation:drift 15s ease-in-out infinite alternate}
.tilt {
  transform:rotate(-5deg);
  transition:transform .35s var(--ease);
  position:relative}
.floating {
  background:#e3333d;
  border:1px solid #ff9ca1;
  padding:23px 27px;
  box-shadow:14px 16px 0 #29292c,0 40px 70px #0007;
  animation:float 7s ease-in-out infinite;
  overflow:hidden;
  position:relative}
.floating:after {
  content:'';
  position:absolute;
  width:180%;
  height:1px;
  background:#ffffff30;
  transform:rotate(-32deg);
  top:45%;
  left:-30%;
  pointer-events:none}
.art-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.65rem;
  letter-spacing:.1em;
  font-weight:700;
  border-bottom:1px solid #ffffff70;
  padding-bottom:12px}
.hero-logo {
  display:block;
  width:82%;
  height:280px;
  margin:0 auto;
  filter:drop-shadow(8px 12px 0 #20101440)}
.art-bottom {
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-top:1px solid #ffffff70;
  padding-top:15px}
.art-bottom strong {
  font:800 3.8rem/.86 var(--heading)}
.art-bottom span {
  font-size:.8rem;
  line-height:1.5}
.art-caption {
  text-align:right;
  font-size:.625rem;
  letter-spacing:.09em;
  margin:42px 0 0}
.ticker {
  border-block:1px solid var(--line);
  overflow:hidden;
  padding:18px 0;
  background:#171719}
.ticker div {
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:40px;
  white-space:nowrap;
  font:600 1.15rem var(--heading);
  letter-spacing:.1em;
  min-width:850px}
.ticker i {
  color:var(--red);
  font-style:normal}
.section {
  padding-top:110px;
  padding-bottom:110px}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:48px}
.section-heading>p {
  max-width:335px;
  margin:0}
.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px}
.feature {
  background:var(--surface);
  padding:30px;
  border:1px solid var(--line);
  min-height:245px;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.feature:hover {
  transform:translateY(-6px);
  border-color:var(--red);
  box-shadow:0 12px 45px #ed273012}
.feature p {
  font-size:.9375rem;
  margin-top:15px}
.feature-icon {
  display:block;
  color:var(--red);
  font-size:2rem;
  margin-bottom:24px;
  line-height:1}
.featured {
  grid-row:span 2;
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg,#2b1b20,#1b1b1f 65%)}
.featured h3 {
  font-size:3.2rem}
.featured .card-kicker {
  font-size:.6875rem;
  letter-spacing:.12em}
.feature-footer {
  margin-top:auto;
  padding-top:45px;
  font-size:.7rem;
  letter-spacing:.05em;
  display:flex;
  justify-content:space-between}
.feature-footer span {
  color:var(--red)}
.interface {
  background:#171719;
  border-block:1px solid var(--line)}
.gallery-controls {
  display:flex;
  gap:8px;
  margin-bottom:22px;
  flex-wrap:wrap}
.gallery-controls button {
  padding:10px 23px;
  background:transparent;
  color:var(--muted);
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s}
.gallery-controls button.selected {
  color:var(--ink);
  border-color:var(--red)}
.gallery {
  border:1px solid #45454a;
  border-radius:8px;
  overflow:hidden;
  background:var(--bg);
  box-shadow:0 25px 65px #0003}
.gallery-bar {
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:22px;
  border-bottom:1px solid var(--line);
  font-size:.8rem;
  color:var(--muted)}
.window-dots {
  letter-spacing:4px;
  color:#67676d;
  font-size:.6rem}
.gallery-bar button {
  margin-left:auto;
  background:transparent;
  color:var(--ink);
  font-size:.8125rem}
.gallery-body {
  min-height:420px}
.placeholder {
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:35px;
  background:radial-gradient(ellipse at 80% 20%,#ed354213,transparent 60%),repeating-linear-gradient(135deg,transparent 0 40px,#ffffff03 40px 41px)}
.placeholder-tag {
  border:1px solid #704047;
  color:#efb2b5;
  padding:6px 12px;
  font-size:.7rem;
  letter-spacing:.13em}
.placeholder strong {
  font:700 clamp(3rem,7vw,6rem) var(--heading);
  margin-top:18px}
.placeholder p {
  max-width:450px;
  margin-top:8px}
.placeholder-foot {
  font-size:.8rem;
  color:#96969e;
  margin-top:18px}
.gallery-note {
  font-size:.8rem;
  margin:18px 0 0}
.gallery-body img,#modal-content img {
  width:100%;
  height:auto;
  display:block}
.community {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px}
.community .lead {
  margin-top:25px}
.community-panel ul {
  list-style:none;
  padding:0;
  margin:0}
.community-panel li {
  display:flex;
  gap:24px;
  margin-bottom:28px}
.community-panel li>span {
  color:var(--red);
  font:600 1.3rem var(--heading);
  padding-top:6px}
.community-panel h3 {
  font-size:1.75rem;
  margin-bottom:8px}
.community-panel p {
  font-size:.9375rem}
.notice {
  background:#251a1e;
  border-left:3px solid var(--red);
  padding:20px 23px}
.notice strong {
  font-size:.75rem;
  letter-spacing:.07em;
  color:#ff868c}
.notice p {
  margin:9px 0 0;
  font-size:.875rem}
.formats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line)}
.formats article {
  padding:30px 24px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:start}
.formats article:last-child {
  border:0}
.formats strong {
  font:700 2.2rem var(--heading);
  line-height:1.2;
  min-height:85px}
.formats strong span {
  color:#8b8b91}
.formats p {
  font-size:.9375rem;
  flex:1}
.badge {
  font-size:.625rem;
  letter-spacing:.08em;
  padding:5px 8px;
  background:#2c2c31;
  color:#e2e2e5}
.external {
  background:#361c22;
  color:#ffb0b4}
.open-source {
  padding:60px;
  background:var(--surface);
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:50px;
  border:1px solid var(--line);
  position:relative;
  overflow:hidden}
.code-symbol {
  font:700 clamp(6rem,12vw,11rem) var(--heading);
  align-self:center;
  color:var(--red);
  transform:rotate(-10deg);
  text-shadow:7px 7px #000}
.open-source p:not(.eyebrow) {
  margin-top:22px;
  max-width:650px}
.open-source h2 {
  font-size:3.3rem}
.faq {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:90px}
.questions details {
  border-bottom:1px solid var(--line);
  padding:0}
.questions summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-weight:600;
  padding:23px 0}
.questions summary::-webkit-details-marker {
  display:none}
.questions summary > .faq-icon {
  font-size:1.5rem;
  font-weight:400;
  color:var(--red);
  transition:transform .3s}
.questions details[open] summary > .faq-icon {
  transform:rotate(45deg)}
.questions details p {
  padding-right:25px;
  font-size:.9375rem}
.questions a {
  text-decoration:underline;
  color:#ff9499}
.closing {
  background:var(--red);
  padding:85px 0;
  position:relative;
  overflow:hidden}
.closing:after {
  content:'';
  position:absolute;
  inset:0 0 0 65%;
  background-image:radial-gradient(#61051050 1px,transparent 1px);
  background-size:8px 8px;
  transform:skew(-15deg);
  pointer-events:none}
.closing .wrap {
  position:relative;
  z-index:1}
.closing .eyebrow {
  color:#fff}
.closing h2 {
  font-size:clamp(3.5rem,7vw,6.5rem);
  margin-bottom:32px}
.closing em {
  color:#201719}
.footer {
  padding-top:40px;
  padding-bottom:40px;
  display:flex;
  align-items:center;
  gap:32px}
.footer p {
  font-size:.8125rem;
  margin:0}
.footer>div {
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-size:.8125rem}
.footer>div span {
  color:#aaa}
.menu-toggle {
  display:none}
dialog {
  padding:20px;
  width:min(1200px,94vw);
  max-height:92vh;
  background:#18181c;
  color:var(--ink);
  border:1px solid #555;
  border-radius:8px}
dialog::backdrop {
  background:#000d;
  backdrop-filter:blur(6px)}
.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:15px}
.modal-head h2 {
  font-size:1.6rem}
.modal-head button {
  background:#303035;
  padding:8px 15px}
.intro {
  animation:enter .8s var(--ease) both}
.intro:nth-child(2) {
  animation-delay:.12s}
.intro:nth-child(3) {
  animation-delay:.24s}
.intro:nth-child(4) {
  animation-delay:.36s}
.intro:nth-child(5) {
  animation-delay:.48s}
@keyframes enter {
  from {
  opacity:0;
  transform:translateY(20px)}
to {
  opacity:1;
  transform:translateY(0)}
}
@keyframes float {
  50% {
  transform:translateY(-10px);
  box-shadow:14px 24px 0 #29292c,0 50px 80px #0005}
}
@keyframes drift {
  to {
  transform:translate(10px,-10px)}
}

@media(min-width:1700px) {
  .hero {
  min-height:800px}
}
@media(max-width:1000px) {
  .wrap {
  width:calc(100% - 48px)}
.nav nav {
  gap:16px}
.nav .github {
  margin-left:0}
.hero {
  gap:25px}
.hero-logo {
  height:230px}
.art-bottom strong {
  font-size:3rem}
.community,.faq {
  gap:40px}
.formats {
  grid-template-columns:1fr 1fr}
.formats article:nth-child(2) {
  border-right:0}
.formats article:nth-child(-n+2) {
  border-bottom:1px solid var(--line)}
}

@media(max-width:760px) {
  .wrap {
  width:calc(100% - 36px)}
.nav {
  height:76px}
.brand img {
  height:66px;
  width:76px}
.nav nav {
  display:flex;
  flex-wrap:wrap;
  padding:15px 0}
.header {
  position:relative}
.nav {
  height:auto;
  min-height:76px;
  flex-wrap:wrap}
.nav nav>a {
  padding:9px}
.js .header {
  position:sticky}
.js .nav {
  height:76px}
.js .menu-toggle {
  display:flex;
  width:44px;
  height:44px;
  background:transparent;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:9px}
.menu-toggle span {
  width:26px;
  height:2px;
  background:#fff;
  transition:transform .3s}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(4.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-4.5px) rotate(-45deg)}
.js .nav nav {
  position:absolute;
  left:0;
  top:76px;
  right:0;
  background:#19191d;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:20px 25px;
  gap:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .25s,transform .25s,visibility .25s;
  border-bottom:1px solid var(--line)}
.js .nav nav.open {
  opacity:1;
  visibility:visible;
  transform:none}
.hero {
  grid-template-columns:1fr;
  padding-top:50px;
  padding-bottom:45px;
  gap:30px}
.hero h1 {
  font-size:clamp(3.8rem,12vw,5.4rem)}
.hero .lead {
  font-size:1rem}
.hero-art {
  width:min(460px,95%);
  margin:auto}
.hero-logo {
  height:235px}
.hero .eyebrow {
  font-size:.6875rem}
.floating {
  animation:none}
.tilt {
  transform:rotate(-3deg)}
.art-caption {
  margin-top:28px}
.section {
  padding-block:65px}
.section-heading {
  display:block;
  margin-bottom:32px}
.section-heading>p {
  margin-top:24px;
  max-width:100%}
.features {
  grid-template-columns:1fr 1fr;
  gap:12px}
.featured {
  grid-column:span 2;
  grid-row:auto}
.feature {
  padding:23px;
  min-height:230px}
.featured h3 {
  font-size:2.6rem}
.feature h3 {
  font-size:1.65rem}
.feature-footer {
  padding-top:15px}
.community,.faq {
  grid-template-columns:1fr;
  gap:30px}
.open-source {
  padding:30px;
  grid-template-columns:1fr;
  gap:0}
.code-symbol {
  font-size:5rem;
  justify-self:start;
  margin-bottom:20px}
.open-source h2 {
  font-size:2.8rem}
.formats article {
  padding:23px 17px}
.formats strong {
  font-size:1.9rem}
.formats p {
  font-size:.875rem}
.gallery-controls button {
  padding:9px 13px;
  font-size:.875rem}
.gallery-bar {
  gap:10px;
  padding:12px}
.gallery-bar .window-dots {
  display:none}
.gallery-body,.placeholder {
  min-height:320px}
.placeholder {
  padding:25px 18px}
.placeholder strong {
  font-size:3.2rem}
.footer {
  flex-wrap:wrap;
  gap:15px}
.footer>div {
  margin-left:0;
  width:100%;
  gap:18px}
.closing {
  padding-block:60px}
.actions {
  gap:20px}
.closing .text-link {
  color:#fff}
.halftone {
  animation:none}
}


.linux-tested-label {
  margin:0 0 12px;
  color:var(--ink);
  font-weight:700}

.linux-distros {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 24px}

.linux-distro {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  font-size:.9375rem;
  font-weight:700}

.distro-icon {
  display:inline-block;
  width:22px;
  height:22px;
  flex:none;
  mask:center/contain no-repeat;
  -webkit-mask:center/contain no-repeat}

.ubuntu-icon {
  background:#e95420;
  mask-image:url("assets/ubuntu.svg");
  -webkit-mask-image:url("assets/ubuntu.svg")}

.mint-icon {
  background:#86be43;
  mask-image:url("assets/linuxmint.svg");
  -webkit-mask-image:url("assets/linuxmint.svg")}

.debian-icon {
  background:#d70a53;
  mask-image:url("assets/debian.svg");
  -webkit-mask-image:url("assets/debian.svg")}

@media(max-width:420px) {
  .features {
  grid-template-columns:1fr}
.featured {
  grid-column:auto}
.formats {
  grid-template-columns:1fr}
.formats article {
  border-right:0;
  border-bottom:1px solid var(--line)}
.formats strong {
  min-height:0;
  margin-bottom:18px}
.button {
  padding:14px 20px}
.hero h1 {
  font-size:3.8rem}
.gallery-controls {
  gap:0}
.gallery-controls button {
  padding:10px}
}

html:not(.js) .gallery-controls,html:not(.js) #expand {
  display:none}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
.tilt {
  transform:none!important}
}

.brand img {
  width:140px;
  height:72px;
  object-fit:contain}
.footer img {
  width:130px;
  height:auto}
.hero-logo {
  width:100%;
  object-fit:contain}

@media(max-width:760px) {
  .brand img {
  width:112px;
  height:64px}
.footer img {
  width:120px}
}