:root{--ink:#151712;--paper:#f7f5ed;--panel:#fffef9;--line:#d9d7cd;--muted:#6c7067;--green:#315f49;--lime:#d5ff66;--orange:#f06e45;--blue:#dce9ff;--shadow:0 20px 60px rgba(27,31,23,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}
.skip-link{position:fixed;top:-60px;left:18px;z-index:99;background:var(--lime);padding:12px 16px}.skip-link:focus{top:18px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{height:78px;max-width:1280px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:800;letter-spacing:.04em}.brand b{color:var(--green)}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;font-size:13px;letter-spacing:0;transform:rotate(-8deg)}nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:650}nav a:hover{opacity:.55}.github-link{padding-left:30px;border-left:1px solid var(--line)}
main{overflow:hidden}.hero{max-width:1280px;margin:auto;padding:100px 28px 90px;display:grid;grid-template-columns:1fr 260px;gap:80px;align-items:end;position:relative}.hero:before{content:"";position:absolute;width:500px;height:500px;right:-220px;top:-150px;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 34px var(--paper),0 0 0 35px var(--line),0 0 0 70px var(--paper),0 0 0 71px var(--line)}
.eyebrow,.section-kicker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 24px}.eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(49,95,73,.13)}h1{font-size:clamp(58px,8vw,112px);line-height:.91;letter-spacing:-.075em;margin:0;position:relative}h1 em,.closing em{font-family:Georgia,serif;font-weight:400;color:var(--green)}.intro{max-width:720px;font-size:18px;line-height:1.8;color:var(--muted);margin:40px 0 0}
.hero-stamp{width:210px;height:210px;border:1px solid var(--ink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:var(--lime);transform:rotate(5deg);box-shadow:8px 8px 0 var(--ink)}.hero-stamp span,.hero-stamp small{font:10px ui-monospace,monospace;letter-spacing:.13em}.hero-stamp strong{font-size:68px;line-height:1;margin:8px 0;letter-spacing:-.08em}
.tool-section{max-width:1280px;margin:0 auto;padding:30px 28px 130px}.section-head{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--ink);padding-top:30px}.section-kicker{color:var(--muted);margin:0 0 13px}.section-head h2,.principles h2{font-size:clamp(35px,5vw,58px);letter-spacing:-.055em;line-height:1.05;margin:0}
.search-box{width:min(360px,100%);height:50px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:10px}.search-box svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7}.search-box input{border:0;outline:0;background:transparent;min-width:0;flex:1;font-size:14px}.search-box kbd{font:10px ui-monospace,monospace;border:1px solid var(--line);padding:4px 7px;border-radius:3px;color:var(--muted)}
.filters{display:flex;gap:8px;margin:38px 0 22px;overflow:auto;padding-bottom:4px}.filter{border:1px solid var(--line);background:transparent;border-radius:50px;padding:10px 15px;white-space:nowrap;font-size:12px;cursor:pointer;color:var(--muted)}.filter span{font:9px ui-monospace,monospace;margin-left:5px}.filter:hover,.filter.active{background:var(--ink);color:white;border-color:var(--ink)}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.tool-card{min-height:390px;padding:25px 26px 27px;background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s,background .2s}.tool-card:hover{z-index:2;transform:translateY(-5px);box-shadow:var(--shadow)}.tool-card[hidden]{display:none}.tool-card.featured{background:#ffe7dc}.tool-card.dark{background:var(--ink);color:white}.tool-card.lime{background:var(--lime)}
.card-top{display:flex;align-items:center;font:10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}.number{color:var(--muted)}.tag{margin-left:16px;border:1px solid currentColor;border-radius:30px;padding:5px 8px;opacity:.7}.arrow{margin-left:auto;font-size:20px;transition:transform .2s}.tool-card:hover .arrow{transform:translate(3px,-3px)}
.card-icon{width:78px;height:78px;margin:53px 0 34px;display:grid;place-items:center;position:relative}.tool-card h3{font-size:28px;letter-spacing:-.04em;margin:0 0 12px}.tool-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:0;max-width:330px}.tool-card.dark p{color:#b8bcb3}.tool-card small{margin-top:auto;padding-top:25px;font:10px ui-monospace,monospace;letter-spacing:.04em;color:var(--muted)}
.print-icon{background:var(--orange);border-radius:50%}.print-icon:before{content:"";width:38px;height:48px;border:2px solid var(--ink);background:white}.print-icon span{position:absolute;width:25px;height:2px;background:var(--ink);box-shadow:0 8px 0 var(--ink),0 16px 0 var(--ink)}.config-icon{display:flex;justify-content:space-between;font:55px Georgia,serif;color:var(--green)}.config-icon:after{content:"•••";position:absolute;font:20px ui-monospace,monospace;letter-spacing:2px;top:26px;left:20px}.shield-icon{background:var(--lime);color:var(--ink);clip-path:polygon(50% 0,92% 16%,84% 70%,50% 100%,16% 70%,8% 16%);font-size:32px}.oauth-icon span{width:44px;height:44px;border:8px solid var(--green);border-radius:50%}.oauth-icon i{position:absolute;width:42px;height:8px;background:var(--green);right:0;bottom:13px;transform:rotate(-42deg)}.file-icon{border:2px solid var(--ink);background:var(--blue);transform:rotate(-4deg)}.file-icon:after{content:"";position:absolute;width:16px;height:16px;right:-2px;top:-2px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--paper)}.file-icon span{font:700 18px ui-monospace,monospace}.skill-icon{border:2px solid var(--ink);border-radius:50%;box-shadow:inset 0 0 0 8px var(--lime),inset 0 0 0 10px var(--ink)}.skill-icon span{font-size:28px}.empty-state{text-align:center;border:1px solid var(--line);padding:70px 20px;margin:0;color:var(--muted)}
.principles{max-width:1280px;margin:0 auto 130px;padding:80px 28px;background:var(--green);color:white;display:grid;grid-template-columns:1fr 1fr;gap:90px}.principles .section-kicker{color:#bbd0c4}.principles ol{list-style:none;padding:0;margin:0}.principles li{display:grid;grid-template-columns:45px 1fr;gap:15px;padding:25px 0;border-top:1px solid rgba(255,255,255,.25)}.principles li>span{font:11px ui-monospace,monospace;color:var(--lime)}.principles h3{font-size:19px;margin:0 0 9px}.principles p{color:#cbd9d1;line-height:1.65;font-size:14px;margin:0}
.closing{max-width:1280px;margin:auto;padding:0 28px 130px}.closing>p{font:10px ui-monospace,monospace;letter-spacing:.18em}.closing h2{font-size:clamp(50px,8vw,100px);line-height:.95;letter-spacing:-.065em;margin:30px 0 55px}.closing a{display:inline-flex;align-items:center;gap:50px;background:var(--lime);padding:16px 20px;font-weight:750;border:1px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}.closing a:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}
footer{max-width:1280px;margin:auto;padding:34px 28px 55px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}footer .brand{color:var(--ink)}footer>div{display:flex;gap:22px}
.legal{max-width:900px;margin:auto;padding:90px 28px 120px}.legal article{background:var(--panel);border:1px solid var(--line);padding:clamp(26px,7vw,70px)}.legal h1{font-size:clamp(48px,8vw,80px)}.legal h2{font-size:28px;margin:45px 0 12px}.legal p{line-height:1.8;color:var(--muted)}.not-found{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:900px;margin:auto;padding:40px}.not-found h1{font-size:clamp(58px,10vw,110px)}.not-found p{color:var(--muted);font-size:18px}.not-found a{margin-top:25px;background:var(--lime);border:1px solid var(--ink);padding:15px 20px;box-shadow:5px 5px 0 var(--ink)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-stamp{display:none}.tool-grid{grid-template-columns:1fr 1fr}.principles{grid-template-columns:1fr;gap:55px;margin-left:15px;margin-right:15px}.section-head{align-items:start;gap:35px}}
@media(max-width:620px){.site-header{padding:0 18px}nav a:not(.github-link){display:none}.github-link{border:0;padding:0}.hero{padding:70px 20px}.hero:before{display:none}h1{font-size:56px}.intro{font-size:16px}.tool-section{padding-left:20px;padding-right:20px}.section-head{flex-direction:column}.search-box{width:100%}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:350px}.principles{padding:60px 22px}.closing{padding-left:20px;padding-right:20px}footer{flex-direction:column;gap:24px;text-align:center}footer>div{flex-wrap:wrap;justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
