:root {
  --ink:#262332;
  --muted:#686470;
  --paper:#f7f4ed;
  --line:#dcd6cb;
  --purple:#503b60;
  --page:min(1180px,calc(100% - 64px));
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:
    radial-gradient(circle at 85% 8%, rgba(108, 214, 204, 0.18), transparent 24rem),
    var(--paper);
  color:var(--ink);
  font:15px/1.6 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body::before {
  position:fixed;
  z-index:-1;
  inset:0;
  background-image:linear-gradient(rgba(22, 27, 43, 0.035) 1px, transparent 1px);
  background-size:100% 32px;
  content:"";
  pointer-events:none;
}

a {
  color:inherit;
}

button {
  font:inherit;
  cursor:pointer;
}

img {
  display:block;
  max-width:100%;
}

a,button {
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #ad7938;
  outline-offset:5px;
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:20;
  padding:10px;
  background:white;
  transform:translateY(-200%);
}

.skip-link:focus {
  transform:none;
}

.site-header {
  width:var(--page);
  margin:auto;
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:800;
  font-size:18px;
  letter-spacing:-.6px;
}

.brand-mark {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border:1px solid var(--ink);
  background:#151eb5;
  color:white;
  font-size:10px;
  letter-spacing:0;
  box-shadow:3px 3px 0 #008b8b;
}

nav {
  display:flex;
  align-items:center;
  gap:28px;
  margin:0;
  font-size:13px;
  font-weight:600;
}

nav a {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:1;
}

nav a:hover {
  color:#151eb5;
}

.nav-github {
  padding:9px 14px;
  border:1px solid var(--line);
  background:rgba(255, 254, 249, 0.72);
}

.hero {
  display:grid;
  width:var(--page);
  min-height:640px;
  margin:0 auto;
  padding:64px 0 72px;
  align-items:center;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 0.72fr);
  gap:clamp(40px, 6vw, 88px);
  text-align:left;
}

.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  color:#151eb5;
  letter-spacing:0.15em;
}

.hero .eyebrow span {
  display:inline-block;
  width:24px;
  height:2px;
  background:#008b8b;
}

.hero h1 {
  max-width:700px;
  font-size:clamp(3.4rem, 6.4vw, 6.2rem);
  font-weight:500;
  letter-spacing:-0.068em;
  line-height:0.94;
}

.hero-lede {
  max-width:620px;
  margin:30px 0 0;
  color:var(--muted);
  font-size:clamp(1rem, 1.7vw, 1.22rem);
  line-height:1.7;
}

.hero-actions {
  display:flex;
  margin-top:34px;
  flex-wrap:wrap;
  gap:12px;
}

.hero-actions .button {
  min-height:50px;
  padding:12px 20px;
  border:1px solid #161b2b;
  border-radius:0;
  font-size:0.86rem;
  font-weight:800;
  box-shadow:4px 4px 0 #e7e3d8;
  transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.hero-actions .button:hover {
  transform:translate(-2px, -2px);
}

.hero-actions .button-primary {
  color:white;
  background:#151eb5;
  box-shadow:5px 5px 0 #008b8b;
}

.hero-actions .button-primary:hover {
  background:#151eb5;
  box-shadow:7px 7px 0 #008b8b;
}

.hero-actions .button-secondary {
  color:#161b2b;
  background:#fffef9;
  border-color:#161b2b;
}

.hero-actions .button-secondary:hover {
  background:#fffef9;
}

.hero-notes {
  display:flex;
  margin:30px 0 0;
  padding:0;
  color:var(--muted);
  font-size:0.76rem;
  font-weight:700;
  list-style:none;
  flex-wrap:wrap;
  gap:22px;
}

.hero-notes li::before {
  margin-right:7px;
  color:#008b8b;
  content:"◆";
  font-size:0.55rem;
}

.hero-preview {
  position:relative;
  width:min(100%, 470px);
  min-height:560px;
  justify-self:end;
}

.preview-window {
  position:absolute;
  width:82%;
  padding:5px;
  border:1px solid #3e4350;
  background:#d6d3cc;
  box-shadow:0 24px 70px rgba(20, 28, 55, 0.18), 10px 10px 0 #008b8b;
}

.preview-window-light {
  z-index:2;
  top:88px;
  right:0;
  transform:rotate(2.2deg);
}

.preview-window-dark {
  z-index:1;
  top:8px;
  left:0;
  border-color:#11191c;
  background:#3a4146;
  box-shadow:0 24px 70px rgba(20, 28, 55, 0.18), 10px 10px 0 #102628;
  transform:rotate(-3deg);
}

.preview-bar {
  display:flex;
  height:35px;
  padding:0 7px 0 11px;
  color:white;
  background:linear-gradient(90deg, #111a9f, #1684c1);
  font-family:Arial, sans-serif;
  font-size:0.75rem;
  font-weight:700;
  align-items:center;
  justify-content:space-between;
}

.preview-bar-dark {
  background:linear-gradient(90deg, #081848, #1c5690);
}

.window-buttons {
  display:flex;
  gap:4px;
}

.window-buttons i {
  display:block;
  width:19px;
  height:19px;
  border:2px outset #efefef;
  background:#d7d5ce;
}

.preview-window img {
  width:100%;
  max-height:430px;
  border-top:5px solid #d6d3cc;
  object-fit:cover;
  object-position:top;
}

.preview-sticker {
  position:absolute;
  z-index:3;
  right:-18px;
  bottom:10px;
  display:flex;
  width:100px;
  height:100px;
  border:1px solid #161b2b;
  border-radius:50%;
  color:white;
  background:#151eb5;
  box-shadow:5px 5px 0 #6cd6cc;
  text-align:center;
  transform:rotate(-8deg);
  align-items:center;
  flex-direction:column;
  justify-content:center;
}

.preview-sticker strong {
  font-family:Georgia, serif;
  font-size:1.7rem;
  line-height:1;
}

.preview-sticker span {
  max-width:70px;
  margin-top:4px;
  font-size:0.62rem;
  font-weight:800;
  letter-spacing:0.08em;
  line-height:1.2;
  text-transform:uppercase;
}

.eyebrow,.section-kicker {
  text-transform:uppercase;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  margin:0 0 17px;
  color:var(--muted);
}

h1,h2,h3,p {
  text-wrap:pretty;
}

h1 {
  font:normal clamp(38px,4.1vw,56px)/1.08 Georgia,serif;
  letter-spacing:-2.5px;
  margin:0;
}

h1 em {
  color:#735a7e;
  font-weight:normal;
}

.skin-actions {
  display:flex;
  gap:12px;
  margin-top:19px;
  flex-wrap:wrap;
}

.button {
  min-height:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:10px 18px;
  font-size:12px;
  font-weight:650;
  border:1px solid var(--purple);
  text-decoration:none;
  border-radius:3px;
  transition:background .15s;
}

.button-primary {
  background:var(--purple);
  color:white;
}

.button-primary:hover {
  background:#37273f;
}

.button-secondary {
  background:transparent;
  color:var(--purple);
  border-color:#c0b3bf;
}

.button-secondary:hover {
  background:#ffffff80;
}

.button:disabled {
  opacity:.6;
  cursor:wait;
}

.copy-status {
  font-size:11px;
  min-height:18px;
  color:#594165;
  margin:10px 0 0;
}

#collection .intro {
  width:var(--page);
  margin:0 auto 20px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
}

.intro .section-kicker {
  margin-bottom:10px;
}

.intro h2 {
  font:normal 29px/1.15 Georgia,serif;
  letter-spacing:-1px;
  margin:0;
}

.intro>p {
  color:var(--muted);
  font-size:12px;
  max-width:235px;
  margin:0;
}

.skin-grid {
  width:var(--page);
  margin:0 auto 65px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.skin-feature {
  display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  min-width:0;
  border:1px solid var(--line);
  background:#fffcf6;
  scroll-margin-top:25px;
}

.skin-feature[hidden] {
  display:none;
}

.skin-image-wrap {
  display:flex;
  align-items:center;
  min-width:0;
  border-right:1px solid var(--line);
  background:#ecece6;
}

.skin-image-wrap img {
  display:block;
  width:100%;
  height:auto;
}

.skin-feature-lampblack .skin-image-wrap {
  background:#202728;
}

.skin-feature-candy .skin-image-wrap {
  background:#f6d5e6;
}

.skin-feature-penguin .skin-image-wrap {
  background:#3a5f80;
}

.skin-feature .skin-details {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 22px;
  min-width:0;
}

.skin-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:13px;
}

.skin-feature h2 {
  font:normal 24px/1.4 Georgia,serif;
  letter-spacing:-.8px;
  margin:0;
}

.skin-tagline {
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  margin:12px 0;
}

.skin-feature .skin-actions {
  gap:8px;
  margin-top:12px;
  padding-top:0;
}

.skin-feature .button {
  font-size:11px;
  padding:9px 12px;
  min-height:40px;
}

.skin-feature .copy-status:empty {
  display:none;
}

.install {
  width:var(--page);
  margin:0 auto 50px;
  padding:35px 0 0;
  border-top:1px solid var(--line);
}

.install-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 35px;
}

.install-heading .section-kicker {
  grid-column:1/-1;
  margin:0 0 5px;
}

.install h2 {
  font:normal 30px/1.15 Georgia,serif;
  letter-spacing:-1px;
  margin:0;
}

.install-heading>p:last-child {
  color:var(--muted);
  font-size:12px;
  max-width:330px;
  margin:0;
  justify-self:end;
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  list-style:none;
  padding:0;
  margin:28px 0 0;
}

.steps li {
  border-top:1px solid var(--line);
  padding:17px 0;
}

.step-number {
  float:left;
  font:italic 17px Georgia,serif;
  color:#9b7952;
  margin-right:13px;
}

.steps h3 {
  font-size:13px;
  margin:0 0 9px;
}

.steps p {
  font-size:12px;
  margin:0;
  color:var(--muted);
}

.faq {
  width:var(--page);
  margin:0 auto 50px;
  padding:35px 0 0;
  border-top:1px solid var(--line);
  scroll-margin-top:25px;
}

.faq-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 35px;
  margin-bottom:8px;
}

.faq-heading .section-kicker {
  grid-column:1/-1;
  margin:0 0 5px;
}

.faq h2 {
  font:normal 30px/1.15 Georgia,serif;
  letter-spacing:-1px;
  margin:0;
}

.faq-heading>p:last-child {
  color:var(--muted);
  font-size:12px;
  max-width:360px;
  margin:0;
  justify-self:end;
}

.faq-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px;
  margin-top:18px;
}

.faq-item {
  border-top:1px solid var(--line);
  padding:18px 0;
}

.faq-item h3 {
  font:normal 16px/1.35 Georgia,serif;
  letter-spacing:-.3px;
  margin:0 0 8px;
}

.faq-item p {
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
  max-width:46ch;
}

footer {
  width:var(--page);
  margin:auto;
  border-top:1px solid var(--line);
  padding:25px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  color:var(--muted);
  font-size:10px;
}

footer p {
  max-width:480px;
}

.footer-brand {
  font-size:14px;
  white-space:nowrap;
}

.footer-brand .brand-mark {
  height:28px;
  width:28px;
  font-size:8px;
}

footer>span {
  white-space:nowrap;
}

@media(max-width:1000px) {
  .hero {
    min-height:0;
    padding:48px 0 56px;
    grid-template-columns:1fr;
    gap:0;
  }

  .hero-preview {
    display:none;
  }

  .skin-grid {
    grid-template-columns:minmax(0,1fr);
    max-width:720px;
  }

  .skin-feature .skin-details {
    padding:20px 15px 12px;
  }

}

@media(max-width:760px) {
  .skin-grid {
    gap:18px;
    margin-bottom:45px;
  }

  .skin-feature {
    grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  }



  :root {
    --page:calc(100% - 32px);
  }

  .site-header {
    min-height:73px;
  }

  .brand {
    font-size:15px;
  }

  nav {
    gap:16px;
    font-size:11px;
  }

  .nav-github {
    display:none;
  }

  .hero {
    padding:48px 0 64px;
    gap:48px;
  }

  .hero h1 {
    font-size:clamp(3.2rem, 16vw, 4.4rem);
  }

  .hero-actions .button {
    width:100%;
  }

  .hero-notes {
    gap:12px 18px;
  }

  .eyebrow {
    font-size:9px;
  }

  .intro {
    margin-top:40px;
    align-items:start;
    flex-direction:column;
    gap:14px;
  }

  .intro h2 {
    font-size:27px;
  }

  .intro>p {
    max-width:none;
  }




  .skin-feature .skin-details {
    padding:18px 14px;
  }

  .skin-feature h2 {
    font-size:20px;
    letter-spacing:-.4px;
  }

  .skin-meta {
    flex-wrap:wrap;
    gap:4px 10px;
    font-size:9px;
  }

  .install-heading {
    grid-template-columns:1fr;
  }

  .install-heading>p:last-child {
    justify-self:start;
  }

  .install h2 {
    font-size:29px;
  }

  .faq-heading {
    grid-template-columns:1fr;
  }

  .faq-heading>p:last-child {
    justify-self:start;
  }

  .faq h2 {
    font-size:29px;
  }

  .faq-list {
    grid-template-columns:1fr;
    gap:0;
  }

  .steps {
    grid-template-columns:1fr;
    gap:0;
    margin-top:20px;
  }

  .steps li {
    padding:17px 0;
  }

  .install {
    margin-bottom:25px;
  }

  footer {
    flex-wrap:wrap;
    gap:10px 25px;
    padding:24px 0;
  }

  footer p {
    order:3;
    font-size:10px;
    margin:0;
  }

  footer>span {
    margin-left:auto;
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *,*::before,*::after {
    transition:none!important;
  }

}