@charset "UTF-8";
:root{--bg:#fbfbfd;--surface:#fff;--ink:#1d1d1f;--secondary:#86868b;--line:#e8e8ed;--art:#f5f5f7;--blue:#0071e3;--pill:#e9e9ed;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #0071e3;outline-offset:4px}::selection{background:#cce4ff}.wrap{width:min(960px,calc(100% - 80px));margin:0 auto}.skip-link{position:fixed;left:20px;top:-100px;padding:12px;background:var(--ink);color:var(--bg);z-index:10}.skip-link:focus{top:20px}.toolbar{width:min(1120px,calc(100% - 64px));height:72px;margin:auto;display:flex;justify-content:flex-end;align-items:center}.theme-button{height:34px;width:34px;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--secondary);transition:background .2s}.theme-button:hover{background:var(--pill)}.theme-button svg{width:18px;height:18px}.hero{text-align:center;padding:98px 0 127px}.hero h1{font-size:clamp(38px,7.8vw,88px);font-weight:600;letter-spacing:-4.8px;line-height:1.12;margin:0}.projects{padding-bottom:84px;min-height:430px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;gap:15px}.section-heading h2{font-size:25px;font-weight:600;letter-spacing:-.8px;margin:0}.filters{display:flex;gap:2px;border:1px solid var(--line);background:var(--art);padding:3px;border-radius:10px}.filters button{font-size:11px;background:transparent;color:var(--secondary);padding:6px 15px;border-radius:7px;line-height:1.4;transition:background .2s,box-shadow .2s}.filters button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px #0000000a}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project-card{display:block;background:var(--surface);border-radius:22px;border:1px solid var(--line);overflow:hidden;transition:transform .25s,box-shadow .25s}.project-card:hover{transform:translateY(-3px);box-shadow:0 8px 26px #00000005}.project-card[hidden]{display:none}.project-art{display:grid;place-items:center;height:179px;background:var(--art)}.app-icon{width:72px;height:72px;border-radius:18px;background:linear-gradient(145deg,#65bdff,#087be5 70%);box-shadow:0 8px 17px #1874be19,inset 0 1px 1px #ffffff8c}.app-icon svg{display:block;width:100%;height:100%;padding:12px}.project-info{padding:22px 23px 21px}.category{color:var(--secondary);font-size:10px}.project-info h3{font-size:23px;font-weight:600;letter-spacing:-.6px;margin:9px 0 11px}.project-info>p{font-size:12px;line-height:1.6;color:var(--secondary);margin:0 0 25px}.project-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.stage{font-size:9px;color:var(--secondary)}.details-button{font-size:11px;color:var(--blue);background:none;padding:3px 0;display:flex;align-items:center;gap:7px}.details-button>span{font-size:14px}footer{border-top:1px solid var(--line);padding:24px 0 30px;color:var(--secondary);font-size:10px}[data-theme=dark]{--bg:#161617;--surface:#202022;--ink:#f5f5f7;--secondary:#99999e;--line:#333336;--art:#29292c;--blue:#5fa9fa;--pill:#333336;color-scheme:dark}
@media(max-width:1000px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:clamp(38px,8.8vw,78px);letter-spacing:-3.8px}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.toolbar{width:calc(100% - 32px);height:58px}.hero{padding:68px 0 88px}.hero h1{font-size:clamp(32px,9.6vw,52px);letter-spacing:-1.8px}.section-heading{margin-bottom:22px}.section-heading h2{font-size:23px}.filters button{font-size:11px;padding:5px 13px}.project-grid{grid-template-columns:1fr;gap:18px}.project-card{border-radius:21px}.project-art{height:185px}.app-icon{width:76px;height:76px;border-radius:19px}.project-info{padding:23px 25px}.project-info h3{font-size:24px}.project-info>p{font-size:13px;margin-bottom:25px}.stage{font-size:10px}.details-button{font-size:12px}.projects{padding-bottom:60px;min-height:0}footer{font-size:10px;padding:23px 0 27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}