@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root { --ink:#17201d; --muted:#68746e; --line:#d8dfd9; --paper:#f5f6f0; --surface:#fffefa; --mint:#c9f36a; --mint-dark:#9ac930; --orange:#ff5c35; --shadow:0 18px 45px rgba(23,32,29,.09); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font:15px/1.65 "Noto Sans SC",Arial,sans-serif; } a { color:inherit; text-decoration:none; } img,video { max-width:100%; display:block; } button,input { font:inherit; }
.container { width:min(1180px,calc(100% - 48px)); margin:auto; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(245,246,240,.9); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }.bar { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.04em; }.logo-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--mint); font:500 16px "DM Mono",monospace; }.nav { display:flex; gap:4px; }.nav a { padding:8px 12px; color:var(--muted); font-size:14px; transition:.2s; }.nav a:hover,.nav a.active { color:var(--ink); }.nav a.active { text-decoration:underline 2px var(--orange); text-underline-offset:6px; font-weight:700; }
.hero-shell { overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(128deg,#e8efdb 0%,#f5f6f0 55%,#e6f5ae 100%); }.hero { padding:100px 0 88px; position:relative; }.hero:after { content:""; position:absolute; width:380px; height:380px; right:5%; top:-140px; border:1px solid rgba(23,32,29,.18); border-radius:50%; box-shadow:0 0 0 50px rgba(255,255,255,.16),0 0 0 100px rgba(201,243,106,.22); }.kicker,.eyebrow { font:500 11px/1.2 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }.hero h1 { max-width:800px; position:relative; z-index:1; margin:18px 0; font-size:clamp(43px,7vw,78px); line-height:1.13; letter-spacing:-.075em; }.hero h1 em { font-style:normal; background:var(--mint); padding:0 .08em; }.hero-copy { position:relative; z-index:1; max-width:470px; color:var(--muted); font-size:17px; }.hero-actions { position:relative; z-index:1; display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:45px; padding:10px 17px; border:1px solid var(--ink); border-radius:3px; background:transparent; color:var(--ink); font-weight:700; cursor:pointer; transition:.2s; }.btn:hover { transform:translateY(-2px); box-shadow:4px 4px 0 var(--ink); }.btn.primary { background:var(--ink); color:#fff; }.btn.primary:hover { background:var(--orange); border-color:var(--orange); }.btn.ghost:hover { background:#fff; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 80px; border:1px solid var(--line); border-top:0; background:var(--surface); }.feature-grid div { padding:25px 30px; border-right:1px solid var(--line); }.feature-grid div:last-child { border:0; }.feature-grid span { display:block; font:11px "DM Mono",monospace; color:var(--orange); }.feature-grid strong { display:block; margin:8px 0 2px; font-size:16px; }.feature-grid p { margin:0; color:var(--muted); font-size:13px; }
.section { padding:0 0 78px; }.section-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:22px; }.section-head h2 { margin:5px 0 0; font-size:30px; letter-spacing:-.05em; }.text-link { display:inline-flex; gap:7px; align-items:center; color:var(--ink); font-weight:700; white-space:nowrap; }.text-link span { color:var(--orange); font-size:20px; transition:.2s; }.text-link:hover span { transform:translateX(4px); }
.grid { display:grid; gap:16px; }.cards { grid-template-columns:repeat(3,1fr); }.card { background:var(--surface); border:1px solid var(--line); min-width:0; transition:.2s; }.card:hover { transform:translateY(-4px); border-color:var(--ink); box-shadow:var(--shadow); }.thumb { height:185px; overflow:hidden; background:#e4e8dd; display:grid; place-items:center; }.thumb img { width:100%; height:100%; object-fit:cover; transition:.35s; }.card:hover .thumb img { transform:scale(1.04); }.file-icon { font:50px "DM Mono",monospace; color:var(--ink); }.body { display:flex; flex-direction:column; min-height:196px; padding:18px; }.card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }.card h3 { margin:7px 0 8px; font-size:18px; line-height:1.4; letter-spacing:-.035em; }.desc { color:var(--muted); margin:0 0 14px; font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.software-card .text-link { margin-top:auto; }.version { padding:2px 7px; border:1px solid var(--line); border-radius:2px; color:var(--muted); font:10px "DM Mono",monospace; }.tags { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 15px; }.tag { color:#52611d; background:#edf8c9; padding:2px 7px; border-radius:2px; font-size:11px; }.card-foot { display:flex; justify-content:space-between; gap:8px; color:var(--muted); margin-top:auto; font:11px "DM Mono",monospace; }
.masonry { columns:4 220px; column-gap:16px; }.media-card { width:100%; display:block; position:relative; padding:0; margin:0 0 16px; break-inside:avoid; overflow:hidden; border:1px solid var(--line); background:var(--surface); cursor:zoom-in; text-align:left; }.media-card img,.media-card video { width:100%; transition:.35s; }.media-card:hover img,.media-card:hover video { transform:scale(1.035); }.media-caption { display:block; padding:9px 10px; font-size:12px; font-weight:600; }.play { display:grid; place-items:center; position:absolute; top:50%; left:50%; width:48px; height:48px; transform:translate(-50%,-50%); border-radius:50%; background:var(--mint); color:var(--ink); padding-left:2px; }
.page-main { min-height:70vh; padding-top:64px; }.page-heading { max-width:630px; margin-bottom:35px; }.page-heading h1 { margin:10px 0 5px; font-size:46px; letter-spacing:-.065em; }.page-heading p:last-child { margin:0; color:var(--muted); }.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0 26px; border-top:1px solid var(--line); }.search-field { display:flex; align-items:center; gap:8px; flex:0 1 360px; color:var(--muted); }.search-field input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }.search-field input::placeholder { color:#929c97; }.chips { display:flex; flex-wrap:wrap; gap:6px; }.chip { border:1px solid var(--line); border-radius:20px; padding:5px 10px; background:var(--surface); color:var(--muted); font-size:12px; cursor:pointer; }.chip:hover,.chip.active { border-color:var(--ink); color:var(--ink); background:var(--mint); }.hidden { display:none!important; }.empty { width:100%; padding:45px 10px; text-align:center; color:var(--muted); }
.modal,.lightbox { position:fixed; inset:0; z-index:50; display:none; padding:25px; background:rgba(18,25,22,.72); align-items:center; justify-content:center; }.modal.open,.lightbox.open { display:flex; }.panel { position:relative; width:min(670px,100%); max-height:90vh; overflow:auto; padding:34px; background:var(--surface); box-shadow:var(--shadow); }.modal-close,.lb-close { position:absolute; z-index:2; top:12px; right:14px; border:0; background:transparent; color:var(--ink); font-size:28px; cursor:pointer; }.detail-cover { width:100%; max-height:265px; object-fit:cover; margin:-34px -34px 28px; width:calc(100% + 68px); }.panel h2 { margin:9px 0; font-size:31px; letter-spacing:-.055em; }.detail-summary { color:var(--muted); margin:0 0 16px; }.detail-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:25px; }.lightbox { z-index:80; }.lb-stage img,.lb-stage video { max-width:90vw; max-height:82vh; box-shadow:var(--shadow); }.lb-close { color:#fff; font-size:35px; }.lb-caption { position:absolute; bottom:13px; color:#fff; }.article-shell { min-height:70vh; }.article { width:min(800px,calc(100% - 48px)); padding-top:76px; }.article h1 { margin:11px 0 8px; font-size:48px; line-height:1.2; letter-spacing:-.065em; }.article-meta { margin:0 0 27px; color:var(--muted); font:12px "DM Mono",monospace; }.article-cover { width:100%; margin:0 0 30px; max-height:470px; object-fit:cover; }.prose { color:#3b4741; font-size:16px; line-height:2; }.prose h1,.prose h2,.prose h3 { color:var(--ink); line-height:1.3; }.prose h2 { margin:42px 0 14px; font-size:28px; letter-spacing:-.04em; }.prose h3 { margin:30px 0 10px; font-size:20px; }.prose p { margin:0 0 16px; }.prose ul { padding-left:1.4em; margin:0 0 16px; }.article-return { width:min(800px,calc(100% - 48px)); padding:38px 0; }.site-footer { margin-top:72px; padding:28px 0 35px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }.site-footer a:hover { color:var(--orange); }.site-footer p { margin:5px 0 0; }.footer-sep { padding:0 8px; }
@media (max-width:760px) { .container { width:min(100% - 32px,1180px); }.bar { height:65px; }.nav a { padding:7px 7px; font-size:12px; }.hero { padding:70px 0; }.hero:after { opacity:.5; right:-100px; }.feature-grid,.cards { grid-template-columns:1fr; }.feature-grid { margin-bottom:55px; }.feature-grid div { border-right:0; border-bottom:1px solid var(--line); }.feature-grid div:last-child { border-bottom:0; }.section { padding-bottom:55px; }.filter-bar { align-items:flex-start; flex-direction:column; }.search-field { flex-basis:auto; width:100%; }.page-main { padding-top:45px; }.page-heading h1,.article h1 { font-size:38px; }.panel { padding:25px 20px; }.detail-cover { margin:-25px -20px 24px; width:calc(100% + 40px); }.article { padding-top:52px; } }