:root{--paper:#f6f7f2;--ink:#20221e;--muted:#65695e;--line:#d8dbcf;--lime:#d6f85a;--font:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid var(--ink);outline-offset:6px}::selection{background:var(--lime);color:var(--ink)}[hidden]{display:none!important}.site-shell{max-width:1440px;margin:0 auto;padding:0 64px}.site-header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:25px;font-weight:800;letter-spacing:-1.2px}.wordmark-dot{margin-left:-9px;color:#6a7f23}.brand-mark{width:18px;height:18px;background:var(--ink);box-shadow:5px -5px 0 var(--lime);margin-right:5px}.domain,.eyebrow,.art-coordinate,.section-note,.site-footer,.demo-category,.demo-count{font-family:var(--mono)}.domain{font-size:12px;letter-spacing:.02em;color:var(--muted)}.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:center;min-height:620px;padding:78px 0 82px}.eyebrow{font-size:10px;line-height:1.6;letter-spacing:.15em;margin:0 0 27px;display:flex;gap:9px;align-items:center}.tiny-square{width:7px;height:7px;background:var(--ink)}h1{font-size:clamp(38px,4.6vw,66px);font-weight:700;letter-spacing:-.055em;line-height:1.55;margin:0 0 26px;white-space:nowrap}.hero-description{font-size:14px;line-height:2.2;color:var(--muted);margin:0 0 34px}.hero-link{display:inline-flex;gap:44px;align-items:center;background:var(--lime);border:1px solid var(--ink);padding:16px 22px;text-decoration:none;font-size:13px;font-weight:700;transition:box-shadow .18s,transform .18s}.hero-link span{font-size:22px;line-height:1}.hero-link:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.hero-art{position:relative;aspect-ratio:1/1;max-width:440px;width:100%;justify-self:end;border:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;background-position:center;color:var(--ink)}.hero-art::before,.hero-art::after{content:"+";position:absolute;font-family:var(--mono);font-size:17px;color:var(--muted);background:var(--paper);line-height:15px}.hero-art::before{top:-8px;left:-5px}.hero-art::after{bottom:-7px;right:-5px}.directory-art{position:absolute;inset:7% 0 0;width:100%;height:86%;transform:rotate(-7deg)}.art-coordinate{position:absolute;font-size:9px;letter-spacing:.1em;background:var(--paper);padding:5px 8px;z-index:1}.art-coordinate-top{top:16px;left:15px}.art-coordinate-bottom{right:15px;bottom:14px}.demos-section{border-top:1px solid var(--ink);padding:38px 0 76px;outline:none}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.section-heading .eyebrow{margin-bottom:10px;font-size:9px}h2{margin:0;display:flex;gap:16px;align-items:center;font-size:26px;letter-spacing:-.03em}.demo-count{font-size:11px;font-weight:400;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);height:25px;min-width:35px;padding:0 7px;letter-spacing:.05em}.section-note{font-size:11px;color:var(--muted);padding-bottom:5px}.directory-state{min-height:230px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 20px}.empty-symbol{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);font-size:25px;color:#7a806d;margin-bottom:19px}.directory-state h3{font-size:15px;font-weight:600;letter-spacing:.04em;margin:0 0 12px}.directory-state p{font-size:12px;line-height:1.9;color:var(--muted);margin:0}.noscript-note{font-size:12px;color:var(--muted)}.site-footer{border-top:1px solid var(--line);padding:27px 0 32px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.04em;color:var(--muted)}.footer-divider{padding:0 8px;color:#a3a89a}.footer-motto{font-size:9px;letter-spacing:.1em}.skip-link{position:absolute;top:10px;left:16px;z-index:2;background:var(--lime);padding:12px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.demo-card{min-height:210px;display:flex;flex-direction:column;position:relative;padding:26px;border:1px solid var(--line);text-decoration:none;transition:border-color .18s,background .18s}.demo-card:hover{border-color:var(--ink);background:#eef2df}.demo-category{font-size:10px;letter-spacing:.1em;color:var(--muted);margin-bottom:22px;overflow-wrap:anywhere}.demo-card h3{font-size:19px;line-height:1.6;margin:0 0 12px;padding-right:20px;overflow-wrap:anywhere}.demo-card p{font-size:12px;line-height:1.9;color:var(--muted);margin:0;overflow-wrap:anywhere}.demo-arrow{position:absolute;top:25px;right:25px;font-size:22px}
@media(min-width:1440px){.hero{min-height:680px}}
@media(max-width:1000px){.site-shell{padding:0 36px}.hero{gap:20px;min-height:570px}.hero-description{font-size:13px}.hero-art{max-width:330px}.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){html{scroll-padding-top:20px}.site-shell{padding:0 23px}.site-header{height:82px}.wordmark{font-size:22px}.domain{font-size:9px}.hero{grid-template-columns:1fr;gap:38px;padding:49px 0 49px;min-height:0}.eyebrow{font-size:9px;margin-bottom:23px}h1{font-size:clamp(32px,8.6vw,52px);line-height:1.55;margin-bottom:22px}.hero-description{font-size:12px;line-height:2;margin-bottom:27px}.desktop-break{display:none}.hero-link{padding:14px 19px;font-size:12px;gap:42px}.hero-art{width:76%;max-width:330px;justify-self:end;margin-right:3px}.art-coordinate{font-size:8px}.art-coordinate-top{top:10px;left:9px}.art-coordinate-bottom{bottom:9px;right:9px}.demos-section{padding:29px 0 45px}.section-heading{margin-bottom:23px}.section-note{display:none}h2{font-size:23px}.directory-state{min-height:228px;padding:27px 16px}.directory-state h3{font-size:14px}.directory-state p{font-size:11px}.site-footer{padding:23px 0 25px;font-size:9px}.footer-motto{font-size:8px;letter-spacing:0}.footer-divider{padding:0 4px}.demo-grid{grid-template-columns:1fr}.demo-card{min-height:190px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}