:root {
  color-scheme: light;
  --banana: #ffdc45;
  --paper: #fffcef;
  --ink: #263e2e;
  --green: #215c40;
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
header { height: 108px; padding: 0 6%; display: flex; align-items: center; justify-content: space-between; background: var(--banana); }
.wordmark { font-size: 27px; font-weight: 900; letter-spacing: -1px; display: flex; align-items: center; text-decoration: none; }
.wordmark > span:first-child { display: inline-flex; width: 42px; height: 42px; margin-right: 8px; transform: rotate(-16deg); }
.wordmark-dot { color: var(--green); }
[data-banana] svg { display: block; width: 100%; height: 100%; }
.install-link { font-size: 14px; font-weight: 700; text-underline-offset: 5px; }
.install-link span { margin-left: 8px; }
.download-link { display: inline-block; font-weight: 700; text-underline-offset: 4px; padding: 8px 0; }
.download-link:hover { color: var(--green); }
.hero { background: var(--banana); min-height: 550px; padding: 40px 6% 85px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 36px; }
h1 { font-size: clamp(55px, 7.2vw, 100px); font-weight: 900; line-height: 1.01; letter-spacing: -.04em; margin: 0 0 27px; }
h1 span { color: var(--green); }
.hero-copy > p { font-family: system-ui, sans-serif; font-size: 17px; line-height: 1.65; margin: 0 0 30px; max-width: 48ch; }
.launch { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 22px; min-height: 62px; border: 2px solid var(--green); border-radius: 16px; color: var(--paper); background: var(--green); font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 4px 0 #143c29; transition: transform .18s ease, background .18s ease; }
.launch:hover { background: #17482f; transform: translateY(-2px); }
.launch:active { transform: translateY(3px); box-shadow: none; }
.launch > span:first-child { width: 29px; height: 29px; }
.launch > span:last-child { font-family: system-ui, sans-serif; margin-left: 10px; font-size: 22px; }
.fine-print { display: block; font: 12px/1.5 system-ui, sans-serif; margin-top: 18px; }
.hero-art { position: relative; height: 390px; max-width: 500px; width: 100%; justify-self: center; }
.monkey-portrait { width: 87%; position: absolute; top: -5%; left: 6%; transform: rotate(6deg); }
.monkey-portrait svg { width: 100%; overflow: visible; }
.orbit { position: absolute; width: 70px; }
.orbit-one { top: 0; right: 0; transform: rotate(28deg); }
.orbit-two { bottom: 45px; left: -8px; transform: rotate(-30deg); width: 90px; }
.orbit-three { bottom: 76px; right: -5px; transform: rotate(100deg); width: 60px; }
.art-caption { position: absolute; bottom: -31px; left: 22%; font-size: 14px; font-weight: 700; transform: rotate(-5deg); }
.caption-arrow { width: 76px; position: absolute; bottom: 5px; right: 6%; transform: rotate(-13deg); }
.ticker { display: flex; align-items: center; justify-content: space-around; gap: 26px; overflow: hidden; background: var(--green); color: var(--banana); white-space: nowrap; padding: 18px 20px; font: 800 12px/1.5 system-ui, sans-serif; letter-spacing: .07em; }
.ticker span:nth-child(even) { font-size: 23px; line-height: 1; }
.below { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 68px 6% 76px; }
h2 { font-size: clamp(23px, 2.4vw, 30px); letter-spacing: -.025em; margin: 0 0 18px; line-height: 1.15; }
.below p, ol { font: 15px/1.8 system-ui, sans-serif; max-width: 60ch; }
.below p { margin: 0 0 22px; }
label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.note-row { display: flex; gap: 8px; }
input { min-width: 0; width: 100%; background: #fff; color: var(--ink); padding: 13px 15px; border: 1.5px solid #8b987c; border-radius: 8px; font: 14px system-ui, sans-serif; }
input::placeholder { color: #636e5d; }
.note-row button { background: var(--banana); border: 1.5px solid var(--ink); border-radius: 8px; padding: 12px 19px; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.note-row button:hover { background: #ffe777; }
.below .note-status, .below .install-note { font-size: 12px; line-height: 1.7; margin-top: 12px; }
ol { padding-left: 21px; margin-top: 0; }
li { padding-left: 4px; margin-bottom: 8px; }
code { font-size: 12px; overflow-wrap: anywhere; }
footer { border-top: 1px solid #d2d7c2; margin: 0 6%; padding: 25px 0; display: flex; justify-content: space-between; gap: 20px; font: 12px/1.5 system-ui, sans-serif; }
@media (min-width: 1550px) { header, .hero, .below { padding-left: max(6%, calc((100vw - 1400px) / 2)); padding-right: max(6%, calc((100vw - 1400px) / 2)); } }
@media (max-width: 750px) {
  header { height: 82px; }
  .wordmark { font-size: 22px; }
  .wordmark > span:first-child { width: 32px; margin-right: 3px; }
  .install-link { font-size: 12px; }
  .hero { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 30px; gap: 20px; }
  h1 { font-size: clamp(56px, 12vw, 88px); }
  .hero-copy > p { font-size: 16px; }
  .hero-art { height: 310px; width: 340px; max-width: 100%; }
  .monkey-portrait { width: 83%; left: 8%; top: 0; }
  .art-caption { bottom: 0; font-size: 12px; left: 18%; }
  .orbit-one { width: 55px; top: 10px; }
  .orbit-two { width: 60px; left: 0; }
  .orbit-three { width: 45px; right: 0; }
  .ticker { justify-content: flex-start; }
  .below { grid-template-columns: 1fr; gap: 42px; padding-top: 42px; padding-bottom: 40px; }
  footer { flex-direction: column; gap: 7px; }
}
@media (max-width: 360px) {
  .install-link { max-width: 86px; }
  .desktop-break { display: none; }
  .launch { font-size: 15px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }