@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{color-scheme:light;--paper:#f6f4ed;--ink:#252b27;--muted:#60675f;--green:#32694d}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.6}.wrap{width:min(1060px,calc(100% - 64px));margin-inline:auto}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--green);outline-offset:6px}.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:30px;border-bottom:1px solid #dcded3}.wordmark{font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:700;letter-spacing:-1.2px}.wordmark span{color:var(--green)}nav{display:flex;gap:30px;font-size:14px;font-weight:600}nav a:hover{text-decoration:underline}.hero{position:relative;padding:85px 0 75px}.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.dot{height:8px;width:8px;background:var(--green);border-radius:50%}h1,h2,h3{font-family:'Space Grotesk',sans-serif}h1{font-size:clamp(64px,9vw,108px);font-weight:500;letter-spacing:-6px;line-height:1.03;margin:28px 0}.playful{color:var(--green)}.intro{max-width:470px;color:var(--muted);font-size:18px;line-height:1.75}.explore{display:inline-flex;gap:30px;align-items:center;margin-top:16px;font-size:14px;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:8px}.explore span{font-size:22px}.doodle{position:absolute;right:45px;top:120px;font-size:220px;color:#d0da86;line-height:1;transform:rotate(12deg);user-select:none}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px}h2{font-size:24px;letter-spacing:-.7px;margin:0}.section-heading>span{font-size:13px;color:var(--muted)}.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}.card{border:1px solid #d8ddd0;border-radius:16px;padding:30px}.tools{background:#e9eee2}.games{background:#eee6d8;border-color:#e0d7c7}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}.icon{font-size:38px;line-height:1}.badge{font-size:11px;font-weight:600;border:1px solid #747b6b;border-radius:30px;padding:4px 11px;color:#515a4c}h3{font-size:26px;font-weight:500;letter-spacing:-.7px;margin:0 0 10px}.card p{max-width:360px;color:#535b50;margin:0}.card .card-note{font-size:12px;margin-top:32px;border-top:1px solid #cdd3c3;padding-top:16px}.games .card-note{border-color:#d7cdbc}.note{display:flex;align-items:center;gap:20px;margin:40px 0 65px;padding:22px 0}.note>span{font-size:32px;color:var(--green)}.note p{max-width:660px;margin:0;font-size:14px;color:var(--muted)}.note strong{color:var(--ink)}footer{border-top:1px solid #dcded3;display:flex;justify-content:space-between;padding-block:23px;font-size:12px;color:var(--muted)}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.hero{padding:55px 0}.doodle{right:0;top:85px;font-size:90px;opacity:.65}h1{font-size:70px;letter-spacing:-4px}.intro{font-size:16px;max-width:390px}.cards{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column;gap:4px}.card{padding:25px}.card-top{margin-bottom:25px}.note{margin-block:20px 35px}nav{gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.daily{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:30px;padding:22px 26px;border:1px solid #d8ddd0;border-radius:14px;background:#e9eee2}.daily[hidden]{display:none}.daily h2{color:var(--green);font-size:27px;font-weight:500;letter-spacing:-.7px;white-space:nowrap}.daily p{margin:0;font-size:14px;color:var(--muted)}.daily p:first-child{color:var(--ink)}
@media(max-width:700px){.daily{align-items:flex-start;flex-direction:column;gap:8px;padding:20px}.daily h2{font-size:25px}.daily p{font-size:13px}}
.yatzy{background:#e5eaf0;border-color:#d1dce3}.yatzy .card-note{border-color:#cad5dd}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.card{padding:25px}.card h3{font-size:24px}}