@media (max-width:420px),(max-height:640px){.hub-header{margin-bottom:1.25rem}.hub-header h1{font-size:1.6rem}.pfp{width:72px;height:72px;margin-bottom:.5rem}}
@media (max-width:640px){.hub-header{margin-bottom:1.5rem}html{height:auto;overflow:hidden auto}:is(body,body:has(.dev-info),body:has(.project-grid),body:has(.friend-grid)){flex-direction:column;justify-content:flex-start;align-items:center;gap:1rem;height:auto;min-height:100dvh;padding:1.25rem 1rem 2rem;overflow:hidden visible}.hub{order:2;width:100%;max-width:100%}body:has(.dev-info) .hub{order:2;width:100%;max-width:100%}body:has(.project-grid) .hub{order:2;width:100%;max-width:100%}body:has(.friend-grid) .hub{order:2;width:100%;max-width:100%}.nav:before{content:"";z-index:5;opacity:0;pointer-events:none;background:#0000008c;transition:opacity .3s;position:fixed;inset:0}.nav:has(.nav-toggle:checked):before{opacity:1;pointer-events:auto}.nav-burger{background:var(--surface);border:1px solid var(--surface-hi);cursor:pointer;z-index:6;border-radius:0;flex-direction:column;justify-content:center;gap:4px;width:2.5rem;height:2.5rem;padding:0 .6rem;transition:border-color .15s,background .15s;display:flex;position:relative}.nav-burger:hover{border-color:var(--accent);background:var(--surface-hi)}.nav-toggle:focus-visible~.nav-burger{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}.nav-burger span{background:var(--text-soft);border-radius:0;width:100%;height:2px;transition:transform .3s,opacity .2s;display:block}.nav-toggle:checked~.nav-burger span:first-child{transform:translateY(6px)rotate(45deg)}.nav-toggle:checked~.nav-burger span:nth-child(2){opacity:0}.nav-toggle:checked~.nav-burger span:nth-child(3){transform:translateY(-6px)rotate(-45deg)}.nav-links{z-index:6;opacity:0;pointer-events:none;flex-direction:column;align-items:center;gap:.4rem;max-height:80vh;padding:1rem 0;transition:opacity .3s,transform .3s;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)scale(.95)}.nav-toggle:checked~.nav-links{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}.nav-link.selected{margin-left:0}.nav-link.selected:before{display:none}.nav-links .nav-link{opacity:0;justify-content:center;width:2.5rem;height:2.5rem;padding:0;transition-property:opacity,transform,width,padding,background,border-color,color;transition-duration:.3s,.3s,.45s,.45s,.15s,.15s,.15s;transition-timing-function:ease;overflow:hidden;transform:scale(.4)}.nav-ico{opacity:1;pointer-events:none;justify-content:center;align-items:center;font-size:1.05rem;transition:opacity .3s;display:flex;position:absolute;inset:0}.nav-label{opacity:0;white-space:nowrap;transition:opacity .3s;overflow:hidden}.nav-toggle:checked~.nav-links .nav-link{opacity:1;width:11rem;padding:0 .8rem;transform:scale(1)}.nav-toggle:checked~.nav-links .nav-ico{opacity:0;transition-delay:.95s}.nav-toggle:checked~.nav-links .nav-label{opacity:1;transition-delay:1s}.nav-toggle:checked~.nav-links .nav-link:first-child{transition-delay:50ms,50ms,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(2){transition-delay:.1s,.1s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(3){transition-delay:.15s,.15s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(4){transition-delay:.2s,.2s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(5){transition-delay:.25s,.25s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(6){transition-delay:.3s,.3s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(7){transition-delay:.35s,.35s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(8){transition-delay:.4s,.4s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(9){transition-delay:.45s,.45s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(10){transition-delay:.5s,.5s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(11){transition-delay:.55s,.55s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(12){transition-delay:.6s,.6s,1s,1s,0s,0s,0s}.nav-toggle:checked~.nav-links .nav-link:nth-child(13){transition-delay:.65s,.65s,1s,1s,0s,0s,0s}.nav-links .nav-link:first-child{transition-delay:1s,1s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(2){transition-delay:.95s,.95s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(3){transition-delay:.9s,.9s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(4){transition-delay:.85s,.85s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(5){transition-delay:.8s,.8s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(6){transition-delay:.75s,.75s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(7){transition-delay:.7s,.7s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(8){transition-delay:.65s,.65s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(9){transition-delay:.6s,.6s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(10){transition-delay:.55s,.55s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(11){transition-delay:.5s,.5s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(12){transition-delay:.45s,.45s,0s,0s,0s,0s,0s}.nav-links .nav-link:nth-child(13){transition-delay:.4s,.4s,0s,0s,0s,0s,0s}#visitor-counter{margin-top:1rem;position:static;top:auto;right:auto}.dev-info,.project-grid,.friend-grid{padding-bottom:1rem}.section+.section{margin-top:1.5rem}}
@media (max-width:420px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.nav-links,.nav-links .nav-link,.nav-ico,.nav-label,.nav-burger span,body:before{transition:none}}
@media (max-width:380px){.project-grid{grid-template-columns:1fr}.project-card-img{width:48px;height:48px}}