:root { --ink:#18201b; --paper:#f7f7f2; --lime:#d8ff42; --line:#d7d8d0; --muted:#687069; } * { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Space Grotesk",sans-serif; } main,footer { max-width:1240px; margin:auto; padding:0 34px } nav { height:82px; display:flex; align-items:center; justify-content:space-between } .wordmark { color:var(--ink); text-decoration:none; font-size:22px; font-weight:700; letter-spacing:-1.3px } .wordmark span { color:#70a100 } .nav-links { display:flex; gap:27px; align-items:center; font-size:14px; font-weight:600 }.nav-links a, footer a { color:var(--ink); text-decoration:none } button { font:inherit; cursor:pointer } .compact { background:var(--ink); color:#fff; border:0; border-radius:3px; padding:10px 14px; font-size:13px; font-weight:700 }.session-controls { display:flex; align-items:center; gap:7px; padding:4px; border:1px solid var(--line); background:#fff }.session-controls[hidden] { display:none }.session-controls #sessionProfile { padding:7px 9px; font:11px "DM Mono",monospace; color:#657068; border-right:1px solid var(--line) }.account-action,.logout { border:0; padding:8px 10px; background:transparent; color:var(--ink); font:600 11px "DM Mono",monospace; transition:background .16s ease,color .16s ease }.account-action:hover,.account-action:focus-visible { background:var(--lime); outline:0 }.logout { color:#697269 }.logout:hover,.logout:focus-visible { background:var(--ink); color:#fff; outline:0 }.account-action span,.logout span { margin-left:5px }.hero { padding:90px 0 115px; max-width:790px }.eyebrow { color:#5c675e; font:500 11px "DM Mono",monospace; letter-spacing:.08em; margin:0 0 19px }.eyebrow i { display:inline-block; width:8px; height:8px; background:#84c800; margin-right:7px }.hero h1, h2 { letter-spacing:-.065em; margin:0; line-height:.94 }.hero h1 { font-size:clamp(64px,9.1vw,132px); font-weight:600 }.hero em { font-style:normal; color:#78a900 }.lede { color:#586159; font-size:20px; line-height:1.45; max-width:540px; margin:31px 0 }.hero-actions { display:flex; gap:24px; align-items:center }.primary { color:var(--ink); background:var(--lime); border:1px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:15px 19px; font-size:15px; font-weight:700 }.primary b { margin-left:16px }.text-link { color:var(--ink); font-size:14px; font-weight:700; text-decoration:none }.text-link b { margin-left:8px }.hero-proof { display:flex; align-items:center; margin-top:61px; gap:12px; color:#5c665f; font-size:13px }.hero-proof p { margin:0 }.hero-proof strong { color:var(--ink) }.avatars { display:flex }.avatars span { width:27px; height:27px; margin-left:-5px; border:2px solid var(--paper); border-radius:50%; display:grid; place-items:center; font:10px "DM Mono"; background:#e95e50; color:white }.avatars span:nth-child(2){background:#394b9e}.avatars span:nth-child(3){background:#dcad3f}.avatars span:nth-child(4){background:#559c7e}.ticker { overflow:hidden; margin:0 calc((1240px - 100vw)/2); background:var(--ink); color:#fff; padding:14px 0; white-space:nowrap; font:12px "DM Mono",monospace }.ticker div { animation:marquee 35s linear infinite }.ticker b { background:var(--lime); color:var(--ink); padding:3px 6px; margin:0 12px 0 24px; font-size:10px }.ticker span { color:#9bab9b; margin:0 15px } @keyframes marquee {to {transform:translateX(-40%)}} .board-section { padding:115px 0 }.section-top { display:flex; align-items:end; justify-content:space-between; margin-bottom:37px }.section-top h2,.how h2,.cta h2 { font-size:clamp(42px,5vw,68px); font-weight:600 }.periods { display:flex; border:1px solid var(--line); border-radius:3px; padding:3px }.periods button { border:0; background:transparent; padding:8px 11px; color:#6d756e; font:10px "DM Mono"; letter-spacing:.02em }.periods .selected { background:var(--ink); color:#fff }.board-head,.row { display:grid; grid-template-columns:minmax(270px,1.45fr) 145px 100px 160px; align-items:center; gap:18px }.board-head { border-bottom:1px solid var(--line); color:#7c837d; padding:0 10px 11px; font:10px "DM Mono" }.row { padding:18px 10px; min-height:88px; border-bottom:1px solid var(--line) }.person { display:flex; align-items:center; gap:13px }.rank { width:24px; font:12px "DM Mono"; color:#849087 }.rank.top { color:#748b00 }.avatar { width:42px; height:42px; border-radius:50%; background:var(--avatar); color:#fff; display:grid; place-items:center; font:12px "DM Mono"; font-weight:500 }.person a { color:var(--ink); text-decoration:none; font-size:15px; font-weight:700 }.person small,.score small,.streak small { display:block; color:#788078; font-size:11px; font-weight:400; margin-top:3px }.score,.streak { font:600 16px "DM Mono"; letter-spacing:-.06em }.graph { display:grid; grid-template-columns:repeat(10,9px); gap:3px }.graph i { width:9px; height:9px; border-radius:1px; background:#e5e7df }.graph .g1{background:#c6e783}.graph .g2{background:#9dd64f}.graph .g3{background:#77b731}.graph .g4{background:#528d1a}.load-more { width:100%; border:0; padding:23px; background:transparent; color:#59645c; font:11px "DM Mono"; letter-spacing:.05em }.load-more:hover { color:var(--ink); background:#eff0ea }.how { padding:102px 0 120px; border-top:1px solid var(--line) }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:62px }.steps article { padding-top:20px; border-top:2px solid var(--ink) }.steps b { color:#6d9d00; font:13px "DM Mono" }.steps h3 { font-size:23px; margin:43px 0 11px; letter-spacing:-.04em }.steps p { font-size:15px; line-height:1.5; max-width:270px; color:#596259 }.cta { background:var(--lime); margin:0 calc((1240px - 100vw)/2); padding:101px max(34px, calc((100vw - 1172px)/2)); text-align:center }.cta .eyebrow { color:#4a5b13 }.cta h2 { margin-bottom:35px }.cta .primary { background:var(--paper) }.fineprint { font:11px "DM Mono"; color:#586331; margin:35px 0 0 } footer { height:112px; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#6b746c } footer p { margin:0 } dialog { border:1px solid var(--ink); max-width:480px; padding:43px; color:var(--ink); background:var(--paper); box-shadow:9px 9px 0 var(--ink); overflow:visible } dialog::backdrop { background:#18201bae; backdrop-filter:blur(3px) } dialog h2 { font-size:48px; margin-bottom:19px } dialog > p:not(.eyebrow) { color:#5d665f; line-height:1.5; margin-bottom:28px } dialog small { display:block; color:#7b837d; margin-top:23px; font:11px "DM Mono" }.close { position:absolute; top:10px; right:14px; background:none; border:0; font-size:27px; color:#687069 }.close:hover,.close:focus-visible { color:var(--ink); outline:0 } #profileDialog { width:min(560px,calc(100vw - 40px)); padding:0; border:0; box-shadow:10px 10px 0 var(--ink); background:var(--paper) } #profileDialog::backdrop { background:#18201bd1; backdrop-filter:blur(5px) } .profile-dialog-heading { padding:42px 46px 34px; background:var(--lime); border:1px solid var(--ink); border-bottom:0 } .profile-dialog-heading .eyebrow { color:#44550d; margin-bottom:18px } .profile-dialog-heading h2 { font-size:clamp(48px,7vw,66px); line-height:.86; margin:0 0 22px } .profile-dialog-heading p:not(.eyebrow) { max-width:370px; margin:0; color:#415011; font-size:15px; line-height:1.45 } #profileDialog .close { z-index:1; top:11px; right:15px; color:#40500d } .profile-form { padding:26px 46px 38px; border:1px solid var(--ink); border-top:0 } .profile-form label { display:grid; grid-template-columns:132px 1fr; align-items:center; gap:15px; padding:15px 0; border-bottom:1px solid var(--line); color:#526057; font:11px "DM Mono",monospace } .profile-form label > span { display:flex; align-items:center; gap:8px } .profile-form label b { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; color:var(--ink); border:1px solid var(--ink); background:#fff; font:600 10px "DM Mono",monospace } .profile-form input { min-width:0; width:100%; border:0; background:transparent; color:var(--ink); font:500 14px "DM Mono",monospace; outline:none } .profile-form input::placeholder { color:#a1a79e } .profile-form label:focus-within { border-color:var(--ink); background:#f0f4e7 } .profile-form-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:29px } .profile-form-footer small { margin:0; color:#b0443c; line-height:1.4 } @media (max-width:700px) { main,footer { padding:0 20px } .nav-links > a { display:none }.nav-links { gap:10px }.session-controls { gap:2px; padding:3px }.session-controls #sessionProfile { display:none }.account-action,.logout { padding:8px 7px; font-size:10px }.hero { padding:69px 0 79px }.hero h1 { font-size:66px }.lede { font-size:17px }.section-top { align-items:start; gap:20px; flex-direction:column }.board-head { display:none }.row { grid-template-columns:1fr auto; gap:9px; padding:16px 0 }.streak,.graph { display:none }.score { grid-column:2; grid-row:1; text-align:right }.periods { width:100%; overflow:auto }.periods button { flex:1; white-space:nowrap }.steps { grid-template-columns:1fr; gap:35px; margin-top:45px }.steps h3 { margin-top:18px }.cta { padding:75px 20px; margin:0 -20px } footer { height:150px; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px }.ticker { margin:0 -20px }.hero-actions { gap:19px }.hero-proof { margin-top:46px } #profileDialog { width:calc(100vw - 28px); box-shadow:6px 6px 0 var(--ink) } .profile-dialog-heading { padding:35px 28px 27px } .profile-form { padding:19px 28px 29px } .profile-form label { grid-template-columns:1fr; gap:9px; padding:13px 0 } .profile-form input { padding-left:30px; font-size:13px } .profile-form-footer { align-items:flex-start; flex-direction:column-reverse; gap:20px } .profile-form-footer .primary { width:100% } }