main>h1{margin:1.4em 0 .3em;font-size:clamp(1.8rem,4vw + .6rem,2.5rem);font-weight:800;letter-spacing:-.03em}main>.projects-intro{margin:0 0 1.5em;color:var(--muted)}main .projects-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%,22rem), 1fr));gap:16px;margin:0;padding:0;list-style:none}main .project-card{position:relative;display:flex;gap:16px;padding:20px 44px 20px 20px;background-color:var(--surface);border:1px solid var(--border);border-radius:10px}@media only screen and (max-width: 500px){main .project-card{gap:12px;padding:16px 40px 16px 16px}}@media (prefers-reduced-motion: no-preference){main .project-card{transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out;animation:card-in .4s ease-out backwards}}main .project-card:nth-child(1){animation-delay:0ms}main .project-card:nth-child(2){animation-delay:50ms}main .project-card:nth-child(3){animation-delay:100ms}main .project-card:nth-child(4){animation-delay:150ms}main .project-card:nth-child(5){animation-delay:200ms}main .project-card:nth-child(6){animation-delay:250ms}main .project-card:hover,main .project-card:focus-within{border-color:color-mix(in srgb, var(--accent) 50%, var(--border));box-shadow:var(--shadow)}@media (prefers-reduced-motion: no-preference){main .project-card:hover,main .project-card:focus-within{transform:translateY(-3px)}}main .project-card:hover .project-name a,main .project-card:focus-within .project-name a{color:var(--accent)}main .project-card:hover .project-goto,main .project-card:focus-within .project-goto{color:var(--accent)}@media (prefers-reduced-motion: no-preference){main .project-card:hover .project-goto,main .project-card:focus-within .project-goto{transform:translate(3px, -3px)}}main .project-card:has(.project-name a:focus-visible){outline:2px solid var(--accent);outline-offset:2px}main .project-card .project-logo{flex-shrink:0;display:grid;place-items:center;width:56px;height:56px;border-radius:12px;overflow:hidden;background-color:#fff;border:1px solid var(--border)}main .project-card .project-logo img{width:100%;height:100%;object-fit:cover}main .project-card .project-logo span{font-size:1.6rem;font-weight:800;color:#fff}main .project-card .project-logo:has(span){background-color:var(--accent);border-color:rgba(0,0,0,0)}@media only screen and (max-width: 500px){main .project-card .project-logo{width:40px;height:40px;border-radius:9px}main .project-card .project-logo span{font-size:1.2rem}}@media (prefers-color-scheme: dark){main .project-card .project-logo:has(span) span{color:#000}}main .project-card .project-body{display:flex;flex-direction:column;gap:6px;min-width:0}main .project-card .project-name{margin:0;font-size:1.1em;font-family:ui-monospace,"JetBrains Mono","Cascadia Code","Fira Code",Menlo,Consolas,monospace;font-weight:700;letter-spacing:0}main .project-card .project-name a{color:var(--fg);text-decoration:none}@media (prefers-reduced-motion: no-preference){main .project-card .project-name a{transition:color .2s ease-out}}main .project-card .project-name a::after{content:"";position:absolute;inset:0;border-radius:inherit}main .project-card .project-name a:focus-visible{outline:none}main .project-card .project-description{margin:0;font-size:.92em;color:var(--muted)}main .project-card .project-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}main .project-card .project-tags li{padding:1px 9px;border-radius:999px;font-size:.72em;font-weight:600;color:var(--accent-strong);background-color:var(--accent-soft)}main .project-card .project-goto{pointer-events:none;position:absolute;top:18px;right:16px;font-size:20px;color:var(--muted)}@media (prefers-reduced-motion: no-preference){main .project-card .project-goto{transition:transform .2s ease-out,color .2s ease-out}}@keyframes card-in{from{opacity:0;transform:translateY(8px)}}