:root{--ink:#171817;--paper:#f5f3eb;--lime:#dfff4f;--purple:#bcb2ff;--coral:#ff7c64;--line:2px solid var(--ink);--muted:#5d6058}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
nav{min-height:72px;padding:12px 4vw;border-bottom:var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{display:block;width:142px}
nav>div{display:flex;align-items:center;gap:24px;font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
nav a{text-decoration:none}
.nav-cta{display:inline-block;border:var(--line);background:var(--ink);color:#fff;padding:13px 17px;box-shadow:4px 4px var(--coral)}
.hero{min-height:500px;padding:72px 4vw;border-bottom:var(--line);background:var(--lime)}
.hero>span{font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}
.hero h1{max-width:1120px;margin:28px 0 24px;font-size:clamp(56px,8vw,118px);line-height:.86;letter-spacing:-.073em}
.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero p{max-width:800px;margin:0;font:19px/1.65 Georgia,"Times New Roman",serif}
.tools{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr);gap:30px;padding:34px 4vw;border-bottom:var(--line);background:#fff}
.tools h2{margin:0 0 10px;font-size:28px}
.tools label{display:block;margin-bottom:9px;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.tools input{width:100%;border:var(--line);border-radius:0;background:var(--paper);padding:14px;font-size:15px}
.filters{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.filters button{border:1px solid var(--ink);background:#fff;padding:10px 12px;font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}.filters button:hover,.filters button:focus-visible,.filters button.is-active{background:var(--ink);color:#fff}
#projectCount{grid-column:2;margin:-10px 0 0;color:var(--muted);font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.project-list{padding:52px 4vw 90px}
.project-card{margin-bottom:26px;border:var(--line);background:#fff;scroll-margin-top:20px}
.project-card[hidden]{display:none}
.project-card>header{padding:28px;border-bottom:var(--line)}
.project-card:nth-child(3n+1)>header{background:var(--purple)}.project-card:nth-child(3n+2)>header{background:var(--coral)}.project-card:nth-child(3n)>header{background:var(--lime)}
.project-card>header>span{font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}
.project-card h2{margin:22px 0 12px;font-size:clamp(32px,4vw,56px);line-height:.95;letter-spacing:-.045em}
.project-card>header p{max-width:840px;margin:0;font:17px/1.65 Georgia,"Times New Roman",serif}
.prerequisites{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 28px;border-bottom:1px solid #aaa;font-size:11px}.prerequisites strong{margin-right:8px;font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.prerequisites a{padding:5px 8px;border:1px solid;border-radius:999px;text-decoration:none}
.project-body{display:grid;grid-template-columns:1fr 1fr}
.project-body section{padding:28px}.project-body section+section{border-left:var(--line)}
.project-body h3{margin:0 0 10px;font-size:18px}.project-body h3:not(:first-child){margin-top:28px;padding-top:22px;border-top:1px solid #aaa}
.project-body p,.project-body li{font:15px/1.67 Georgia,"Times New Roman",serif}.project-body ol,.project-body ul{margin:0;padding-left:22px}.project-body li+li{margin-top:8px}
.empty{padding:70px 4vw;font-size:22px}
footer{padding:36px 4vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;background:var(--ink);color:#fff;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
footer img{display:block;width:132px;filter:invert(1)}footer p{text-align:center}footer span{text-align:right}
@media(max-width:800px){nav>div>a:not(.nav-cta){display:none}.hero{padding:58px 20px}.hero h1{font-size:56px}.tools{grid-template-columns:1fr;padding:28px 20px}#projectCount{grid-column:1;margin:0}.project-list{padding:36px 20px 70px}.project-body{grid-template-columns:1fr}.project-body section+section{border-left:0;border-top:var(--line)}footer{grid-template-columns:1fr}footer p,footer span{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}