:root {
  --sky:#a9dcf7;
  --sky-deep:#5ab6e7;
  --ink:#244550;
  --ink-soft:#526b70;
  --grass:#75bc63;
  --cream:#fff9e9;
  --paper:#fffcf4;
  --sun:#ffd360;
  --pink:#f390a5;
  --line:rgba(38,76,79,.13);
  --shadow:0 16px 36px rgba(40,87,82,.13);
  --round:28px;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--cream);
  scroll-behavior:smooth
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:320px
}
a {
  color:inherit
}
.skip-link {
  position:absolute;
  top:-50px;
  left:20px;
  background:#fff;
  padding:12px;
  z-index:20
}
.skip-link:focus {
  top:8px
}
.site-header {
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(5vw,24px);
  background:rgba(255,252,244,.94);
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid rgba(31,80,89,.07);
  backdrop-filter:blur(12px)
}
.brand {
  text-decoration:none;
  font:900 26px 'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  letter-spacing:-1.3px;
  color:#247b63;
  display:inline-flex;
  gap:9px;
  align-items:center
}
.brand-cube {
  font-size:20px;
  color:#f0a83e;
  transform:rotate(45deg);
  display:inline-block
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:31px
}
.site-header nav a {
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  color:#456269;
  transition:color .2s
}
.site-header nav a:hover,.site-header nav a:focus-visible {
  color:#24815f
}
.site-header nav .nav-github {
  background:#2a7a60;
  color:white;
  padding:11px 17px;
  border-radius:999px
}
.nav-toggle {
  display:none;
  border:0;
  background:transparent;
  padding:9px
}
.nav-toggle span {
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  margin:5px
}
.hero {
  background:var(--sky);
  position:relative;
  overflow:hidden;
  padding:58px max(5vw,24px) 35px;
  text-align:center;
}
.hero-copy {
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto;
}
.hero .eyebrow {
  color:#337997;
}
.eyebrow-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f49b61;
  margin:0 8px 1px 0;
}
.hero h1,.section h2,.terminal-copy h2,.community-copy h2 {
  font:900 clamp(50px,6vw,76px)/.99 'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  letter-spacing:-3.5px;
  margin:0;
  color:#244f59;
}
.hero h1 span,.section-heading h2 span,.download-heading h2 span {
  color:#e77f83;
}
.hero-lede {
  font-size:17px;
  line-height:1.7;
  max-width:650px;
  color:#355e67;
  margin:22px auto;
}
.hero-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.hero-note {
  font-size:12px;
  color:#55767c;
  margin-top:23px;
}
.hero-note a {
  font-weight:700;
  text-underline-offset:3px;
}
.hero-art-frame {
  position:relative;
  max-width:1180px;
  margin:36px auto 0;
  border:8px solid rgba(255,255,255,.8);
  border-radius:28px;
  overflow:hidden;
  background:#79c3e9;
  box-shadow:0 20px 42px rgba(43,104,115,.2),0 7px 0 rgba(62,128,130,.1);
}
.hero-art-image {
  display:block;
  width:100%;
  height:auto;
}
.hero-art-frame figcaption {
  position:absolute;
  right:16px;
  bottom:14px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,250,233,.9);
  color:#376f5c;
  font-size:11px;
  font-weight:800;
  box-shadow:0 3px 0 rgba(49,99,75,.12);
}
.scroll-cue {
  display:inline-block;
  margin:21px auto 0;
  text-decoration:none;
  font-size:23px;
  color:#3d7d88;
  animation:float 1.7s ease-in-out infinite;
}
.section {
  padding:105px max(8vw,30px)
}
.about-section {
  background:var(--cream)
}
.section-heading h2,.terminal-copy h2,.download-heading h2,.community-copy h2 {
  font:900 clamp(40px,5vw,61px)/1.06 'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  letter-spacing:-2.5px;
  margin:0;
  color:#2a5058
}
.about-grid {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:70px;
  align-items:center;
  max-width:1000px;
  margin:56px auto 0
}
.about-stamp {
  width:210px;
  height:210px;
  background:#f8ce61;
  border-radius:43% 57% 53% 47% / 53% 41% 59% 47%;
  display:grid;
  place-items:center;
  position:relative;
  transform:rotate(-8deg);
  box-shadow:8px 12px 0 #e7b74c
}
.about-stamp span {
  font:900 34px/1 'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  color:#37835f;
  letter-spacing:-1px;
  transform:rotate(8deg);
  text-align:center
}
.about-stamp i {
  font-style:normal;
  position:absolute;
  right:-17px;
  top:8px;
  color:#ed7d8e;
  font-size:47px
}
.about-copy {
  font-size:16px;
  line-height:1.85;
  color:#53696a
}
.about-copy strong {
  color:#2d7560
}
.about-copy a {
  color:#257d68;
  text-underline-offset:3px
}
.text-link {
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:14px;
  font-weight:800;
  color:#278064;
  text-decoration:none;
  margin-top:11px
}
.feature-section {
  background:#e4f3df;
  padding:25px 0 72px;
  position:relative
}
.section-inner {
  padding-top:78px;
  padding-bottom:80px
}
.centered {
  text-align:center;
  max-width:630px;
  margin:0 auto 44px
}
.section-heading>p:last-child {
  line-height:1.7;
  color:#597276
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.feature-card {
  position:relative;
  min-height:253px;
  padding:27px 22px;
  border-radius:22px;
  box-shadow:0 8px 0 rgba(64,105,78,.09);
  overflow:hidden
}
.card-blue {
  background:#c7e9f7
}
.card-yellow {
  background:#ffe7a4
}
.card-pink {
  background:#f9d2d7
}
.card-green {
  background:#bfe0a9
}
.feature-icon {
  font-size:30px;
  color:#347d66;
  background:rgba(255,255,255,.55);
  border-radius:13px;
  width:50px;
  height:50px;
  display:grid;
  place-items:center
}
.feature-card h3 {
  font:900 20px 'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  margin:23px 0 9px;
  color:#2d555c
}
.feature-card p {
  font-size:13px;
  line-height:1.65;
  color:#536d70;
  margin:0
}
.card-number {
  position:absolute;
  right:17px;
  bottom:13px;
  font-size:11px;
  color:rgba(50,97,82,.5);
  font-weight:800
}
.fine-print {
  text-align:center;
  font-size:12px;
  color:#597276;
  margin:27px 0 0
}
.fine-print a {
  font-weight:800;
  color:#29775d;
  text-underline-offset:3px
}
.desktop-showcase {
  padding:84px max(8vw,30px);
  background:#fffaf0;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:65px;
  align-items:center
}
.desktop-photo {
  position:relative;
  background:#294e45;
  padding:12px;
  border:4px solid #fff;
  border-radius:20px;
  box-shadow:0 18px 36px rgba(47,78,65,.16);
  transform:rotate(-1.5deg)
}
.desktop-photo img {
  display:block;
  width:100%;
  height:auto;
  border-radius:9px
}
.photo-tab {
  position:absolute;
  left:22px;
  top:-17px;
  background:#f5cf69;
  border-radius:999px;
  padding:7px 13px;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  color:#5d6849
}
.desktop-caption h2 {
  font:900 clamp(39px,4.6vw,56px)/1.05 'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  letter-spacing:-2px;
  margin:0;
  color:#2a5058
}
.desktop-caption p:last-child {
  line-height:1.7;
  color:#637477;
  max-width:360px
}
.terminal-section {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:65px;
  align-items:center;
  background:#fffaf0;
  padding-top:120px;
  padding-bottom:100px
}
.terminal-copy h2 {
  font-size:clamp(42px,5vw,60px)
}
.terminal-copy>p:not(.eyebrow) {
  line-height:1.8;
  color:#637477;
  max-width:410px
}
.key-hints {
  display:flex;
  gap:12px;
  margin-top:35px
}
.key-hints span {
  background:#f3ead3;
  padding:8px 11px;
  border-radius:10px;
  font-weight:800;
  color:#36775f
}
.key-hints small {
  font-size:10px;
  color:#657678;
  font-weight:600
}
.terminal-window {
  background:#203b3b;
  color:#cfe4d0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 22px 45px rgba(47,78,65,.18);
  transform:rotate(1deg);
  border:5px solid #fff
}
.terminal-bar {
  height:43px;
  background:#2c4a48;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
  color:#9bbab2;
  font:600 11px system-ui,-apple-system,'Segoe UI',sans-serif
}
.terminal-lights {
  display:flex;
  gap:5px
}
.terminal-lights i {
  width:8px;
  height:8px;
  background:#f28b7c;
  border-radius:50%
}
.terminal-lights i:nth-child(2) {
  background:#f4ce69
}
.terminal-lights i:nth-child(3) {
  background:#81c67c
}
.terminal-dots {
  color:#74938b
}
.terminal-body {
  padding:23px 27px 20px;
  font:12px/1.7 'Courier New',monospace
}
.terminal-brand {
  color:#f5d36d;
  font-weight:bold;
  font-size:13px
}
.terminal-brand span {
  font-size:10px;
  color:#a6c0b5;
  font-weight:normal;
  margin-left:8px
}
.terminal-rule {
  border-top:1px solid #47625c;
  margin:10px 0 17px
}
.terminal-tagline {
  color:#a7dc9e;
  font-weight:bold;
  font-size:14px;
  margin:0
}
.terminal-menu {
  display:grid;
  gap:4px;
  margin:17px 0 15px;
  color:#b4cbc0
}
.terminal-menu span:first-child {
  color:#f6d878
}
.terminal-menu b {
  font-weight:normal
}
.terminal-help {
  font-size:10px;
  color:#8eaca1
}
.terminal-status {
  border-top:1px solid #47625c;
  padding-top:12px;
  margin-top:15px;
  color:#a4d49a;
  font-size:10px
}
.terminal-status i {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a6da82;
  margin-right:7px
}
.terminal-status span {
  float:right;
  color:#89a69b
}
.terminal-caption {
  grid-column:2;
  font-size:10px;
  color:#83918b;
  margin:-55px 0 0 10px
}
.downloads-section {
  background:#f7d7c1;
  padding:95px max(8vw,30px) 85px;
  position:relative
}
.download-inner {
  max-width:1100px;
  margin:auto;
  padding:0
}
.download-heading {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:35px
}
.download-heading h2 {
  font-size:clamp(40px,5vw,59px)
}
.download-heading>p {
  max-width:360px;
  line-height:1.7;
  color:#6c6863;
  font-size:14px
}
.release-list {
  display:grid;
  gap:12px
}
.release-card {
  background:#fffaf0;
  border-radius:18px;
  padding:19px 23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  box-shadow:0 5px 0 rgba(153,108,80,.08)
}
.release-meta h3 {
  font:900 18px 'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  margin:0 0 5px
}
.release-meta p {
  margin:0;
  font-size:12px;
  color:#74817c
}
.asset-links {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end
}
.asset-link {
  padding:9px 12px;
  border-radius:999px;
  background:#e2f1d7;
  color:#2e755a;
  text-decoration:none;
  font-size:11px;
  font-weight:800
}
.asset-link:hover {
  background:#cce7bb
}
.release-loading,.release-empty {
  padding:24px;
  border-radius:17px;
  background:rgba(255,250,240,.72);
  color:#687975;
  text-align:center
}
.loading-leaf {
  color:#ef9b6a;
  font-size:20px;
  margin-right:8px
}
.install-strip {
  margin-top:24px;
  padding:18px 21px;
  background:#f1c6a8;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.install-strip div {
  display:grid;
  gap:8px
}
.install-label {
  font-weight:800;
  font-size:10px;
  letter-spacing:1px;
  color:#845d48
}
.install-strip code {
  font-size:12px;
  overflow-wrap:anywhere;
  color:#385c59
}
.button-small {
  background:#fff8e6;
  color:#3b6e58;
  padding:11px 16px;
  font-size:12px;
  white-space:nowrap
}
.release-footnote {
  font-size:11px;
  color:#786d63;
  margin:18px 0 0
}
.guides-section {
  background:#fffaf0
}
.guide-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:42px
}
.guide-card {
  background:#f1ecd9;
  border-radius:17px;
  padding:20px;
  text-decoration:none;
  min-height:125px;
  position:relative;
  transition:transform .2s,background .2s
}
.guide-card:hover {
  transform:translateY(-4px);
  background:#e5f1d8
}
.guide-card span {
  display:block;
  font-size:9px;
  letter-spacing:1px;
  color:#72927d;
  font-weight:800
}
.guide-card strong {
  display:block;
  font:900 18px 'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  margin-top:15px
}
.guide-card i {
  position:absolute;
  right:18px;
  bottom:17px;
  color:#388265;
  font-style:normal
}
.community-section {
  background:#a8d8ec;
  padding:35px max(6vw,24px) 0;
  overflow:hidden
}
.community-scene {
  min-height:350px;
  max-width:1160px;
  margin:auto;
  position:relative;
  display:flex;
  align-items:center
}
.community-sun {
  position:absolute;
  width:145px;
  height:145px;
  border-radius:50%;
  background:#ffdc79;
  right:14%;
  top:36px;
  box-shadow:0 0 0 15px rgba(255,220,121,.25)
}
.community-hill {
  position:absolute;
  left:-15%;
  width:130%;
  height:160px;
  bottom:-1px;
  background:#72b962;
  border-radius:50% 50% 0 0;
  box-shadow:0 -11px 0 #90cd75
}
.community-copy {
  position:relative;
  z-index:2;
  max-width:580px;
  padding:32px 0 65px
}
.community-copy h2 {
  font-size:clamp(42px,5vw,60px)
}
.community-copy>p:not(.eyebrow) {
  max-width:430px;
  line-height:1.7;
  color:#456d6f
}
.community-copy .button-plain {
  background:#fff8de
}
.community-flower {
  position:absolute;
  z-index:2;
  right:17%;
  bottom:69px;
  font-size:100px;
  color:#f08d9d;
  filter:drop-shadow(5px 8px 0 rgba(84,133,69,.14))
}
.site-footer {
  background:#397e61;
  color:#e9f4df;
  min-height:190px;
  padding:33px max(7vw,25px);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px 25px
}
.site-footer .brand {
  color:#fff3bb
}
.site-footer .brand-cube {
  color:#ffd364
}
.site-footer p {
  font-size:12px;
  color:#d0e6d3
}
.site-footer p a {
  color:#fff3bb
}
.footer-links {
  display:flex;
  gap:18px;
  justify-content:flex-end
}
.footer-links a {
  font-size:12px;
  text-decoration:none;
  color:#fff3bb
}
.site-footer small {
  font-size:10px;
  color:#b9d5c2
}
.nav-toggle:focus-visible,.button:focus-visible,a:focus-visible {
  outline:3px solid #ee9a49;
  outline-offset:4px
}
@keyframes bob {
  0%,100% {
    transform:translateY(0) rotate(-2deg)
  }
  50% {
    transform:translateY(-10px) rotate(2deg)
  }

}
@keyframes float {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-6px)
  }

}
@media(max-width:900px) {



  .feature-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .terminal-section {
    gap:35px
  }
  .guide-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .site-header nav {
    gap:17px
  }
  .site-header nav a {
    font-size:12px
  }

}
@media(max-width:680px) {
  .site-header {
    height:67px;
    padding:0 20px
  }
  .brand {
    font-size:23px
  }
  .nav-toggle {
    display:block;
    z-index:2
  }
  .site-header nav {
    display:none;
    position:absolute;
    top:66px;
    left:0;
    right:0;
    background:#fffaf0;
    padding:20px;
    box-shadow:0 14px 20px rgba(31,67,58,.12);
    align-items:stretch;
    flex-direction:column;
    gap:0
  }
  .site-header nav.open {
    display:flex
  }
  .site-header nav a {
    padding:13px 10px;
    font-size:15px
  }
  .site-header nav .nav-github {
    text-align:center;
    margin-top:7px
  }

  .hero-copy {
    padding:0 0 30px
  }

  .hero-lede {
    font-size:15px
  }






  .scroll-cue {
    display:none
  }
  .section {
    padding:74px 25px
  }
  .section-heading h2,.terminal-copy h2,.download-heading h2 {
    font-size:43px;
    letter-spacing:-1.8px
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:35px;
    margin-top:40px
  }
  .about-stamp {
    width:150px;
    height:150px;
    margin:auto
  }
  .about-stamp span {
    font-size:27px
  }
  .about-copy {
    font-size:15px
  }
  .feature-section {
    padding:0
  }
  .section-inner {
    padding:70px 22px
  }
  .feature-grid {
    gap:12px
  }
  .feature-card {
    padding:20px 16px;
    min-height:230px
  }
  .feature-card h3 {
    font-size:17px;
    margin-top:17px
  }
  .feature-card p {
    font-size:12px
  }
  .feature-icon {
    height:43px;
    width:43px
  }
  .terminal-section {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:36px;
    padding-top:75px;
    padding-bottom:65px
  }
  .terminal-window {
    transform:none;
    border-width:4px
  }
  .terminal-body {
    padding:17px 14px;
    font-size:10px
  }
  .terminal-brand span {
    display:block;
    margin-left:0
  }
  .terminal-caption {
    margin:-25px 0 0;
    font-size:10px
  }
  .key-hints {
    gap:6px
  }
  .key-hints span {
    font-size:12px;
    padding:7px
  }
  .download-heading {
    display:block
  }
  .download-heading>p {
    margin-top:21px
  }
  .downloads-section {
    padding:72px 22px
  }
  .release-card {
    align-items:flex-start;
    flex-direction:column;
    padding:17px
  }
  .asset-links {
    justify-content:flex-start
  }
  .install-strip {
    align-items:flex-start;
    flex-direction:column
  }
  .install-strip code {
    font-size:10px
  }
  .guide-grid {
    gap:10px
  }
  .guide-card {
    padding:16px;
    min-height:115px
  }
  .guide-card strong {
    font-size:16px
  }
  .community-section {
    padding:15px 23px 0
  }
  .community-scene {
    min-height:390px
  }
  .community-copy {
    padding:40px 0 80px
  }
  .community-copy h2 {
    font-size:46px
  }
  .community-flower {
    right:7%;
    bottom:30px;
    font-size:67px
  }
  .community-sun {
    right:2%;
    top:35px;
    width:95px;
    height:95px
  }
  .site-footer {
    grid-template-columns:1fr;
    padding:29px 24px;
    gap:12px
  }
  .footer-links {
    justify-content:flex-start
  }
  .site-footer p {
    margin:0;
    line-height:1.6
  }

}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }

}
 .reveal {
  opacity:0;
  transform:translateY(13px);
  transition:opacity .45s ease,transform .45s ease
}
.reveal.is-visible {
  opacity:1;
  transform:translateY(0)
}
@media(max-width:900px) {
  .desktop-showcase {
    gap:35px
  }

}
@media(max-width:680px) {
  .desktop-showcase {
    grid-template-columns:1fr;
    padding:70px 25px;
    gap:35px
  }
  .desktop-photo {
    transform:none
  }
  .desktop-caption h2 {
    font-size:43px
  }

}
@media(prefers-reduced-motion:reduce) {
  .reveal {
    opacity:1;
    transform:none;
    transition:none
  }

}

@media(max-width:900px) {

  .hero-art-frame { margin-top:30px; }
}
@media(max-width:680px) {


  .hero-lede { font-size:15px; margin:18px auto; }
  .hero-art-frame { margin:27px -5px 0; border-width:5px; border-radius:18px; }
  .hero-art-frame figcaption { right:8px; bottom:8px; font-size:9px; padding:6px 9px; }
  .scroll-cue { display:none; }
}