:root {
  --home-title-size:48px;
  --home-title-mobile:30px;
  --home-art-label:11px;
  --home-art-code:19px;
  --home-art-note:12px;
  --home-step-size:26px;
  --home-art-radius:var(--r-card);
  --home-art-shadow:6px 7px 0 var(--bg-panel2),7px 8px 0 var(--border),0 30px 55px -25px var(--shadow-deep);
}
.home-hero {
  height:auto;
  min-height:690px;
}
.home-opening {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
  gap:var(--space-8);
  padding-top:var(--space-16);
  padding-bottom:var(--space-16);
}
.home-intro {
  position:relative;
  z-index:2;
}
.home-intro h1 {
  font-size:clamp(30px,3.3vw,var(--home-title-size));
  margin-top:var(--space-6);
  margin-bottom:0;
}
.home-intro .lede {
  max-width:540px;
}
.home-guide-link {
  margin-top:var(--space-4);
  margin-bottom:0;
  font-size:var(--text-sm);
}
.home-intro .badges {
  margin-top:var(--space-5);
  margin-bottom:0;
  justify-content:flex-start;
}
.home-composition {
  position:relative;
  width:100%;
  aspect-ratio:720 / 640;
  isolation:isolate;
}
.home-app-shot {
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  height:100%;
  max-width:80%;
  max-height:520px;
  margin-inline:auto;
  object-fit:contain;
}
.home-thread-field {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  overflow:visible;
}
.home-pastel-disc {
  fill:var(--lavender);
  opacity:.62;
  filter:url(#home-grain);
}
.home-thread {
  fill:none;
  stroke-linecap:round;
  stroke-width:19px;
  filter:url(#home-grain);
}
.home-thread-pink {
  stroke:var(--ribbon-pink);
}
.home-thread-teal {
  stroke:var(--ribbon-teal);
}
.home-thread-blue {
  stroke:var(--ribbon-blue);
}
.home-pencil {
  stroke:var(--accent-dark);
  stroke-width:2px;
  stroke-linecap:round;
  opacity:.5;
  filter:url(#smallCrayon);
}
.home-material {
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-6);
  border:1px solid var(--border);
  border-radius:var(--home-art-radius);
  background:linear-gradient(150deg,var(--bg),var(--paper));
  color:var(--text);
  box-shadow:var(--home-art-shadow);
}
.home-material::before {
  content:"";
  position:absolute;
  width:68px;
  height:22px;
  top:-12px;
  left:34%;
  transform:rotate(-5deg);
  background:var(--home-tape);
  color:var(--text);
  opacity:.68;
  clip-path:polygon(0 8%,96% 0,100% 88%,5% 100%,0 80%,4% 65%,0 48%,4% 30%);
}
.home-material-rule {
  --home-tape:var(--warn);
  width:64%;
  left:25%;
  top:12%;
  transform:rotate(5deg);
  z-index:2;
}
.home-material-sub {
  --home-tape:var(--success);
  width:72%;
  left:0;
  top:46%;
  transform:rotate(-7deg);
  z-index:3;
}
.home-material-final {
  --home-tape:var(--error);
  width:61%;
  left:33%;
  top:72%;
  transform:rotate(4deg);
  z-index:4;
}
.home-material-label {
  font-size:var(--home-art-label);
  color:var(--text-muted);
  letter-spacing:.04em;
  border-bottom:1px dashed var(--border);
  padding-bottom:var(--space-2);
}
.home-material code {
  font-size:clamp(12px,1.35vw,var(--home-art-code));
  line-height:1.7;
}
.home-material code b {
  color:var(--accent-dark);
  font-weight:var(--weight-medium);
}
.home-material-foot {
  color:var(--text-muted);
  font-size:var(--home-art-note);
}
.home-composition-caption {
  position:absolute;
  bottom:-9%;
  left:5%;
  color:var(--text-muted);
  font-size:var(--text-xs);
  letter-spacing:.08em;
}
.home-art-circle {
  fill:var(--accent);
  filter:url(#smallCrayon);
}
.home-section-link {
  margin-top:var(--space-8);
  margin-bottom:0;
  font-size:var(--text-sm);
}
.home-steps {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--border);
}
.home-steps li {
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:var(--space-8);
  padding-top:var(--space-8);
  padding-bottom:var(--space-8);
  border-bottom:1px solid var(--border);
}
.home-step-index {
  display:flex;
  justify-content:center;
  align-items:center;
  width:64px;
  height:64px;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:var(--bg-panel);
  color:var(--accent-dark);
  font-family:var(--font-display);
  font-size:var(--home-step-size);
}
.home-steps h3 {
  margin-top:0;
}
.home-steps p:last-child {
  margin-bottom:0;
}
.home-fact-layout {
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.6fr);
  gap:var(--space-12);
  align-items:start;
}
.home-identity img {
  display:block;
  border-radius:var(--r-circle);
  margin-bottom:var(--space-6);
}
.home-identity-list {
  margin-top:0;
  margin-bottom:var(--space-6);
}
.home-identity-list dt {
  color:var(--text-muted);
  font-size:var(--text-xs);
  margin-top:var(--space-4);
}
.home-identity-list dd {
  margin:var(--space-1) 0 0;
  overflow-wrap:anywhere;
}
.home-identity>a {
  font-size:var(--text-sm);
}
.home-fact-copy article+article {
  border-top:1px solid var(--border);
  margin-top:var(--space-6);
  padding-top:var(--space-6);
}
.home-fact-copy h3 {
  margin-top:0;
  margin-bottom:var(--space-3);
}
.home-fact-copy p {
  margin-bottom:0;
}
.home-article-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-6);
}
.home-article-grid>* {
  min-width:0;
}
.home-article-grid h3 {
  margin-bottom:var(--space-4);
}
@media (min-width:1440px) {
  .home-opening {
    min-height:730px;
  }
}
@media (max-width:1100px) {
  .home-opening {
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:var(--space-6);
  }
  .home-material {
    padding:var(--space-4);
    gap:var(--space-3);
  }
  .home-material-foot {
    font-size:var(--home-art-label);
  }
  .home-composition-caption {
    bottom:-14%;
    letter-spacing:0;
  }
  .home-article-grid {
    grid-template-columns:minmax(0,1fr);
  }
}
@media (max-width:860px) {
  .home-opening {
    grid-template-columns:minmax(0,1fr);
    padding-top:var(--space-10);
    padding-bottom:var(--space-12);
  }
  .home-intro {
    max-width:650px;
  }
  .home-composition {
    width:min(100%,580px);
    margin-inline:auto;
    margin-top:var(--space-5);
    margin-bottom:var(--space-12);
  }
  .home-material code {
    font-size:var(--text-base);
  }
  .home-composition-caption {
    bottom:-9%;
  }
  .home-fact-layout {
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-8);
  }
}
@media (max-width:768px) {
  .home-intro h1 {
    font-size:clamp(24px,4.4vw,var(--home-title-mobile));
  }
}
@media (max-width:640px) {
  .home-hero {
    min-height:0;
  }
  .home-opening {
    padding-top:var(--space-8);
    padding-bottom:var(--space-10);
  }
  .home-intro h1 {
    margin-top:var(--space-4);
  }
  .home-intro .lede {
    font-size:var(--text-base);
    line-height:1.7;
  }
  .home-intro .get-actions {
    margin-top:var(--space-5);
  }
  .home-intro .platform-bar {
    margin-top:var(--space-4);
    padding-top:var(--space-4);
  }
  .home-intro .platforms {
    gap:var(--space-3);
  }
  .home-intro .platforms svg {
    width:14px;
    height:14px;
  }
  .home-intro .platforms a {
    gap:var(--space-1);
  }
  .home-composition {
    margin-top:var(--space-6);
  }
  .home-material {
    gap:var(--space-2);
    padding:var(--space-3);
    transform:none;
  }
  .home-material code {
    font-size:clamp(11px,3.4vw,16px);
  }
  .home-material-label {
    font-size:var(--home-art-label);
    letter-spacing:0;
  }
  .home-material-foot {
    font-size:var(--home-art-label);
  }
  .home-material-rule {
    top:5%;
    left:30%;
  }
  .home-material-sub {
    top:42%;
  }
  .home-material-final {
    top:76%;
  }
  .home-steps li {
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-4);
  }
  .home-step-index {
    width:48px;
    height:48px;
  }
}
@media (max-width:360px) {
  .home-intro .platforms {
    gap:var(--space-2);
  }
  .home-intro .platforms a {
    font-size:11px;
  }
  .home-material-foot {
    display:none;
  }
}