@import "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap";:root{color:#f2f2ec;font-synthesis:none;text-rendering:optimizelegibility;background:#0b0c0b;font-family:IBM Plex Sans,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#0b0c0b}body{background:#0b0c0b;min-width:320px;margin:0}button,a{font:inherit}button{cursor:pointer}a{color:inherit}.site-shell{--ink:#f2f2ec;--muted:#a0a29b;--line:#292b28;--panel:#151614;--amber:#ffb703;min-height:100svh;color:var(--ink);background-color:#0b0c0b;background-image:linear-gradient(#ffffff07 1px,#0000 1px),linear-gradient(90deg,#ffffff07 1px,#0000 1px);background-size:32px 32px;padding:64px 32px 32px 272px}.topbar{z-index:4;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0b0c0bf0;justify-content:space-between;align-items:center;height:64px;padding:0 32px;display:flex;position:fixed;top:0;left:0;right:0}.brand{appearance:none;color:var(--ink);letter-spacing:.04em;background:0 0;border:0;align-items:center;gap:11px;padding:0;font:600 13px/1 IBM Plex Mono,monospace;display:inline-flex}.mark{align-items:flex-end;gap:2px;width:25px;height:25px;display:inline-flex;position:relative;transform:skewY(-28deg)}.mark i{background:var(--amber);width:6px;display:block}.mark i:first-child{height:10px}.mark i:nth-child(2){height:18px}.mark i:nth-child(3){height:25px}.topbar nav{color:var(--muted);align-items:center;gap:20px;font-size:13px;display:flex}.topbar nav a,.topbar nav button{color:inherit;background:0 0;border:0;padding:7px 0;text-decoration:none}.topbar nav a:hover,.topbar nav button:hover{color:var(--ink)}.topbar nav span{color:var(--amber)}.sidebar{z-index:3;border-right:1px solid var(--line);background:#0b0c0be6;flex-direction:column;width:240px;padding:30px 17px;display:flex;position:fixed;top:64px;bottom:0;left:0}.mono{color:var(--muted);letter-spacing:.12em;margin:0;font:500 10px/1.4 IBM Plex Mono,monospace}.category-list{gap:2px;margin-top:28px;display:grid}.category-list button{text-align:left;color:var(--muted);background:0 0;border:0;justify-content:space-between;align-items:center;padding:10px;font-size:13px;transition:background .18s,color .18s;display:flex}.category-list button b{color:#686a64;font:400 10px/1 IBM Plex Mono,monospace}.category-list button:hover,.category-list button.active{color:var(--ink);background:#1a1b19}.category-list button.active{box-shadow:inset 2px 0 0 var(--amber)}.category-list button.active b{color:var(--amber)}.sidebar-note{border-top:1px solid var(--line);color:#777970;margin:auto 8px 0;padding-top:20px;font-size:11px;line-height:1.65}.canvas{max-width:1500px;margin:0 auto}.hero{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);align-items:center;gap:32px;min-height:640px;padding:64px 0 70px;display:grid}.hero-copy{padding:0 clamp(4px,4vw,64px)}.hero h1{letter-spacing:-.055em;margin:22px 0;font:400 clamp(54px,7vw,110px)/.93 DM Serif Display,Songti SC,serif}.hero h1 span{color:var(--amber);font-style:italic}.hero-copy>p:not(.mono){max-width:390px;color:var(--muted);font-size:15px;line-height:1.8}.hero-copy>a,.local-section button,.about-footer button{color:var(--ink);background:#121310;border:1px solid #46483f;align-items:center;gap:30px;margin-top:32px;padding:12px 16px;font-size:12px;text-decoration:none;transition:border .18s,background .18s;display:inline-flex}.hero-copy>a:hover,.local-section button:hover,.about-footer button:hover{border-color:var(--amber);background:#1a1a15}.hero-copy>a span,.local-section button span,.about-footer button span{color:var(--amber)}.project-card{border:1px solid var(--line);min-height:300px;animation:.42s both lift;animation-delay:var(--delay);background:#151614e8;flex-direction:column;transition:border .2s,transform .2s,background .2s;display:flex;position:relative;overflow:hidden}.project-card:hover{background:#191a17;border-color:#63655d;transform:translateY(-3px)}.project-card--featured{min-height:430px;margin-right:clamp(0px,4vw,56px)}.project-card__topline{z-index:1;justify-content:space-between;align-items:center;padding:13px 14px;display:flex;position:relative}.status,.archive-id{color:#a8aaa3;letter-spacing:.07em;font:500 10px/1 IBM Plex Mono,monospace}.status{align-items:center;gap:7px;display:flex}.status__dot{background:#787a75;border-radius:50%;width:7px;height:7px}.status__dot--chrome-store{background:var(--amber)}.status__dot--edge-add-ons{background:#6ee7ff}.status__dot--research{background:#c084fc}.archive-id{color:#62645e}.project-card__signal{background:linear-gradient(135deg,#ffb70326,#0000 55%),repeating-linear-gradient(90deg,#0000 0 17px,#ffffff0a 17px 18px);border:1px solid #2e302d;height:92px;margin:14px 14px 0;position:relative;overflow:hidden}.project-card__signal span{background:var(--amber);opacity:.8;width:15%;display:block;position:absolute;bottom:0}.project-card__signal span:first-child{height:27%;left:10%}.project-card__signal span:nth-child(2){height:60%;left:32%}.project-card__signal span:nth-child(3){height:36%;left:54%}.project-card__signal span:nth-child(4){height:78%;left:76%}.project-card:nth-child(3n) .project-card__signal{background:linear-gradient(135deg,#6ee7ff1f,#0000 55%),repeating-linear-gradient(90deg,#0000 0 17px,#ffffff0a 17px 18px)}.project-card:nth-child(3n) .project-card__signal span{background:#6ee7ff}.project-card__body{padding:18px 14px 17px}.project-card__category{color:var(--amber);letter-spacing:.1em;margin:0 0 8px;font:500 10px/1 IBM Plex Mono,monospace}.project-card h3{letter-spacing:-.035em;margin:0;font-size:21px;font-weight:600}.project-card__description{min-height:49px;color:var(--muted);margin:10px 0 0;font-size:12px;line-height:1.65}.tags{flex-wrap:wrap;gap:5px;margin:16px 0 0;padding:0;list-style:none;display:flex}.tags li{color:#898b84;border:1px solid #30322e;padding:4px 6px;font:400 9px/1 IBM Plex Mono,monospace}.project-card__footer{border-top:1px solid var(--line);align-items:center;gap:18px;min-height:46px;margin-top:auto;padding:0 14px;display:flex}.project-card__footer a{color:var(--ink);font-size:11px;text-decoration:none}.project-card__footer a:hover{color:var(--amber)}.local-label{color:#777970;font:10px/1 IBM Plex Mono,monospace}.catalog{padding:92px 0}.section-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-end;padding-bottom:30px;display:flex}.section-heading h2{letter-spacing:-.04em;margin:12px 0 0;font:400 clamp(32px,4vw,53px)/1 DM Serif Display,serif}.section-heading>p{color:var(--muted);font:11px/1 IBM Plex Mono,monospace}.catalog-grid{border-left:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.catalog-grid .project-card{border-top:0;border-left:0}.mobile-categories{display:none}.local-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#15161499;margin-bottom:70px;padding:100px clamp(0px,8vw,128px)}.local-section h2{letter-spacing:-.05em;margin:18px 0;font:400 clamp(35px,5vw,69px)/1 DM Serif Display,serif}.local-section>p:not(.mono){max-width:500px;color:var(--muted);font-size:14px;line-height:1.8}.local-section button,.about-footer button{color:var(--ink);cursor:pointer}.footer{color:#73756e;justify-content:space-between;align-items:center;padding:0 0 26px;font:10px/1 IBM Plex Mono,monospace;display:flex}.footer>button:last-child{appearance:none;color:inherit;font:inherit;background:0 0;border:0}.footer>button:last-child:hover{color:var(--amber)}.about-page{--amber:#ffb703;color:#f2f2ec;background:#0b0c0b radial-gradient(circle at 78% 17%,#ffb70321,#0000 23%);min-height:100svh;padding:40px clamp(24px,8vw,142px);position:relative;overflow:hidden}.about-page:before{content:"";opacity:.3;pointer-events:none;background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 85%);mask-image:linear-gradient(#000,#0000 85%)}.corner-home{z-index:1;color:#f2f2ec;background:0 0;border:0;align-items:center;gap:12px;padding:0;font:600 12px/1 IBM Plex Mono,monospace;display:inline-flex;position:relative}.corner-home b{color:var(--amber);margin-left:4px;font-size:17px}.about-hero{z-index:1;max-width:1000px;padding:clamp(100px,18vh,190px) 0 clamp(80px,15vh,160px);position:relative}.about-hero h1{letter-spacing:-.06em;margin:22px 0 28px;font:400 clamp(58px,9.4vw,150px)/.86 DM Serif Display,serif}.about-hero h1 em{color:var(--amber)}.about-intro{color:#afb0aa;max-width:540px;font-size:clamp(15px,1.5vw,20px);line-height:1.7}.about-grid{z-index:1;border-top:1px solid #393b35;grid-template-columns:repeat(3,1fr);display:grid;position:relative}.about-grid>div{border-right:1px solid #393b35;min-height:245px;padding:24px 30px 24px 0}.about-grid>div:not(:first-child){padding-left:30px}.about-grid>div:last-child{border-right:0}.about-grid span{color:var(--amber);font:500 10px/1 IBM Plex Mono,monospace}.about-grid h2{margin:60px 0 11px;font:400 28px/1 DM Serif Display,serif}.about-grid p{color:#a0a29b;max-width:240px;font-size:13px;line-height:1.7}.about-footer{z-index:1;color:#8b8d86;border-top:1px solid #393b35;justify-content:space-between;align-items:center;margin-top:85px;padding-top:20px;font:10px/1 IBM Plex Mono,monospace;display:flex;position:relative}.about-footer button{margin:0}@keyframes lift{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width<=1000px){.site-shell{padding-left:32px}.sidebar{display:none}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-categories{gap:7px;padding:22px 0;display:flex;overflow-x:auto}.mobile-categories button{white-space:nowrap;border:1px solid var(--line);color:var(--muted);background:#121310;padding:8px 10px;font-size:11px}.mobile-categories button.active{color:var(--ink);border-color:var(--amber)}.hero{grid-template-columns:1fr 380px}.hero h1{font-size:clamp(54px,7vw,80px)}.project-card--featured{margin-right:0}}@media (width<=720px){.site-shell{background-size:26px 26px;padding:60px 16px 16px}.topbar{height:60px;padding:0 16px}.topbar nav{gap:13px}.hero{grid-template-columns:1fr;gap:44px;min-height:auto;padding:76px 0 56px}.hero-copy{padding:0}.hero h1{font-size:clamp(50px,15vw,72px)}.hero-copy>p:not(.mono){font-size:14px}.catalog{padding:60px 0}.section-heading{display:block}.section-heading>p{margin-top:18px}.catalog-grid{grid-template-columns:1fr}.project-card{min-height:285px}.local-section{margin-left:-16px;margin-right:-16px;padding:70px 16px}.footer{flex-wrap:wrap;gap:18px}.about-page{padding:30px 22px}.about-hero{padding:100px 0 90px}.about-hero h1{font-size:clamp(54px,16vw,84px)}.about-grid{grid-template-columns:1fr}.about-grid>div,.about-grid>div:not(:first-child){border-bottom:1px solid #393b35;border-right:0;min-height:auto;padding:22px 0}.about-grid h2{margin-top:35px}.about-footer{flex-direction:column;align-items:flex-start;gap:24px;margin-top:40px}}.status__dot--cloudflare-pages{background:#f6821f}.status__dot--cloudflare-workers{background:#fbad41}.status__dot--github-pages{background:#f2f2ec}.project-card h3{min-height:25px}.project-card__title-link,.project-card__title-button{color:var(--ink);font:inherit;letter-spacing:inherit;align-items:center;gap:8px;font-weight:600;text-decoration:none;display:inline-flex}.project-card__title-link span,.project-card__title-button span{color:var(--amber);opacity:.75;font:500 15px/1 IBM Plex Mono,monospace;transition:transform .18s,opacity .18s}.project-card__title-link:hover{color:var(--amber)}.project-card__title-link:hover span{opacity:1;transform:translate(2px,-2px)}.project-card__title-button{appearance:none;cursor:pointer;text-align:left;background:0 0;border:0;padding:0}.project-card__title-button:hover{color:var(--amber)}.project-card__title-button:hover span{opacity:1}.toast{z-index:8;max-width:min(560px,100vw - 32px);color:var(--ink);background:#191a17;border:1px solid #55584e;padding:13px 17px;font-size:12px;line-height:1.5;animation:.2s both toast-in;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 12px 34px #00000059}.toast:before{content:"";background:var(--amber);border-radius:50%;width:7px;height:7px;margin:0 9px 1px 0;display:inline-block}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.status-list{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.status{white-space:nowrap}.platform-icon{flex:none;display:block}.platform-icon--globe{color:#6ee7ff}.platform-icon--broken{color:#a0a29b}.platform-icon--github{color:#f2f2ec}.project-card__title-link,.project-card__title-button{gap:8px}.project-card__title-link .platform-icon,.project-card__title-button .platform-icon{transition:transform .18s,filter .18s}.project-card__title-link:hover .platform-icon,.project-card__title-button:hover .platform-icon{filter:brightness(1.2);transform:translate(2px,-2px)}.project-card__footer a,.local-label{align-items:center;gap:6px;display:inline-flex}.project-card__footer a .platform-icon,.local-label .platform-icon{color:var(--amber)}.project-card__footer a span{color:inherit;margin-left:0}.filter-wrap{position:relative}.filter-trigger{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:7px;padding:7px 0;display:inline-flex}.filter-trigger:hover,.filter-trigger.active{color:var(--ink)}.filter-trigger .filter-icon{color:var(--amber)}.filter-trigger b{text-overflow:ellipsis;white-space:nowrap;max-width:105px;color:var(--amber);font:500 9px/1 IBM Plex Mono,monospace;overflow:hidden}.filter-menu{z-index:7;background:#151614;border:1px solid #41433d;width:190px;padding:7px;position:absolute;top:36px;right:-8px;box-shadow:0 15px 35px #00000059}.filter-menu button{width:100%;color:var(--muted);text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;padding:10px 9px;font-size:12px;display:flex}.filter-menu button:hover,.filter-menu button.active{color:var(--ink);background:#1e201c}.filter-menu button b{color:#696b64;font:400 10px/1 IBM Plex Mono,monospace}.filter-menu button.active b{color:var(--amber)}.hero--single{grid-template-columns:1fr}.hero--single .hero-copy{max-width:760px}.mobile-categories button{align-items:center;gap:7px;display:flex}.mobile-categories button b{color:#6b6d66;font:400 9px/1 IBM Plex Mono,monospace}.mobile-categories button.active b{color:var(--amber)}
