.playground{min-height:calc(100svh - 183px);padding-bottom:110px}
.playground-intro{padding-block:80px 65px}
.playground-intro h1{margin-bottom:22px}
.playground-intro p{margin:0;font-size:18px}
.project-collection{border-top:1px solid var(--line);padding-top:50px}
.playground-project{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center;gap:48px}
.playground-project-copy h2{font:500 27px/1.25 var(--sans);letter-spacing:-.5px;margin-bottom:20px}
.playground-project-copy>p:not(.caption){margin-bottom:25px}
.playground-project-copy .caption{margin-top:24px;max-width:280px}
.playground-project .app-preview{transition:border-color .15s ease}
.playground-project .app-preview:hover{border-color:var(--accent)}
.header nav [aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:7px;text-decoration-color:var(--accent)}
.fun{margin-top:100px;padding-top:50px;border-top:1px solid var(--line)}
.fun-intro{margin-bottom:32px}
.fun-intro h2{margin-bottom:16px}
.fun-intro p{margin-bottom:0}
.fun-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fun-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;transition:border-color .15s ease}
.fun-card:hover{color:var(--ink);border-color:var(--accent)}
.fun-preview{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;overflow:hidden;font:500 76px/1 'Courier New',monospace;letter-spacing:-6px}
.fun-preview-rain{color:#8df4aa;background:repeating-linear-gradient(90deg,transparent 0 19px,#3eae6320 20px 21px,transparent 22px 40px),repeating-linear-gradient(0deg,#020805 0 7px,#0b2416 8px 9px);text-shadow:0 0 26px #43ce73}
.fun-preview-scan{color:#ff91bf;background:radial-gradient(ellipse at 50% 80%,#b0195266,transparent 70%),radial-gradient(#f03c7c88 1px,transparent 1.5px) 0 0/7px 7px,#10060d;text-shadow:0 0 26px #ed3b7f}
.fun-preview-building{color:#e6b568;background:#111c27}
.fun-preview-building svg{width:76%;height:80%}
.fun-card-copy{display:flex;flex:1;flex-direction:column;padding:24px}
.fun-card h3{font-size:20px;letter-spacing:-.3px}
.fun-card p{font-size:14px;margin-bottom:24px}
.fun-card .text-link{margin-top:auto;align-self:flex-start;font-size:13px;gap:12px}
@media(max-width:800px){.fun{margin-top:75px;padding-top:35px}.fun-grid{gap:16px}.fun-card-copy{padding:18px}.fun-card h3{font-size:18px}}
@media(max-width:600px){.fun-grid{grid-template-columns:1fr}.fun-preview{aspect-ratio:2/1}.fun-card-copy{padding:24px}}
@media(max-width:800px){.playground{padding-bottom:75px}.playground-intro{padding-block:60px 45px}.playground-project{grid-template-columns:1fr;gap:30px}.playground-project-copy{max-width:590px}.playground-project-copy .caption{max-width:none}.project-collection{padding-top:35px}}
@media(max-width:600px){.playground-intro{padding-block:50px 40px}.playground-intro p{font-size:16px}.playground-project-copy h2{font-size:24px}.playground-project-copy>p:not(.caption){font-size:15px}}
@media(prefers-reduced-motion:reduce){.playground-project .app-preview,.fun-card{transition:none}}