/* Try changing these colors first. */
:root{--blue:#0057ff;--lime:#d7ff5b;--paper:#faf9f4;--ink:#0b0b0c;--muted:#555d71}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
a{color:inherit;text-underline-offset:5px}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.header,main,footer{width:min(1080px,calc(100% - 60px));margin-inline:auto}
.header{display:flex;align-items:center;justify-content:space-between;min-height:95px;border-bottom:1px solid #dedfdc;gap:20px}
.header>a:last-child{font-size:.88rem;color:var(--muted)}
.logo{font-size:2rem;letter-spacing:-.06em;font-weight:800;text-decoration:none}
.logo span,.intro h1 span{color:var(--blue)}
.intro{padding:65px 0 50px}
.eyebrow{font:12px/1.6 "SFMono-Regular",Consolas,monospace;letter-spacing:.15em;color:var(--muted);margin-bottom:25px}
h1,h2,p{margin-top:0}
h1{font-size:clamp(3.9rem,10vw,7.5rem);line-height:.98;letter-spacing:-.065em;margin-bottom:26px;font-weight:800}
.description{max-width:440px;color:var(--muted);font-size:1.12rem}
button{border:0;border-radius:8px;background:var(--blue);color:white;font-family:inherit;font-size:16px;font-weight:600;line-height:1.4;padding:15px 24px;cursor:pointer;min-height:50px}
button:hover{filter:brightness(.88)}
.result{color:var(--muted);font-size:.88rem;margin:17px 0 0;min-height:1.7em}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cards article{padding:27px;border:1px solid #dedfdc;border-radius:14px;background:#e6efff}
.cards article:nth-child(2){background:var(--lime)}
.cards article:nth-child(3){background:#edeef2}
.number{font:12px/1.6 "SFMono-Regular",Consolas,monospace}
h2{font-size:1.7rem;line-height:1.15;letter-spacing:-.035em;margin:20px 0 15px}
.cards p{font-size:.94rem;margin:0;color:#30394a}
code{font-size:.84rem;overflow-wrap:anywhere}
.challenge{padding:55px 0}
.challenge .eyebrow{margin-bottom:15px}
.challenge h2{font-size:2rem;margin:0 0 15px}
.challenge p:not(.eyebrow){color:var(--muted)}
.challenge a{color:var(--blue);font-weight:600}
footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #dedfdc;padding-block:25px 35px;color:var(--muted);font-size:.85rem}
.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-180%);background:var(--ink);color:white;padding:10px 20px;z-index:20}
.skip-link:focus{transform:translateY(0)}
@media(max-width:700px){.header,main,footer{width:calc(100% - 36px)}.header{min-height:79px}.intro{padding-block:43px}.cards{grid-template-columns:1fr}.cards article{padding:24px}.challenge{padding-block:40px}.challenge h2{font-size:1.8rem}.description{font-size:1.05rem}.eyebrow{letter-spacing:.11em}}