*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}:root{--bg: #3d556e;--gap: 2px;--white: #f5f5f5;--c-label: #9ca3af;--c-name: #111827;--c-desc: #6b7280;--c-tag-bg: #f3f4f6;--c-tag-border: #e5e7eb;--c-tag-text: #374151;--c-btn-bg: #111827;--c-btn-text: #ffffff;--c-btn-hover: #1f2937;--c-btn-dis-bg: #e5e7eb;--c-btn-dis-tx: #9ca3af}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg);min-height:100vh}a{text-decoration:none;color:inherit}#root{width:100%;min-height:100vh}.site{width:92%;max-width:1800px;margin:0 auto;padding:72px 32px 80px}.site-header{text-align:center;margin-bottom:56px;display:flex;flex-direction:column;align-items:center;gap:14px}.site-name{font-size:72px;font-weight:800;letter-spacing:-3.5px;line-height:1;color:var(--white)}.linkedin-icon{color:#ffffff61;display:inline-flex;align-items:center;justify-content:center;transition:color .18s ease,transform .18s ease}.linkedin-icon:hover{color:#fffc;transform:translateY(-2px)}.grid-wrap{overflow:hidden}.projects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);background:var(--bg)}.card-wrap{aspect-ratio:592 / 320;perspective:1200px;cursor:pointer;outline:none}.card-wrap:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1)}.card-wrap.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.card-front{background:#1a1a1a}.front-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}.card-wrap:hover .front-img{transform:scale(1.04)}.front-duo{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;transition:transform .45s ease}.front-duo img{width:100%;height:100%;object-fit:cover;display:block}.card-wrap:hover .front-duo{transform:scale(1.04)}.front-placeholder{width:100%;height:100%;background:#e5e7eb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.ph-name{font-size:14px;font-weight:700;color:#374151}.ph-hint{font-size:11px;color:#9ca3af}.card-back{transform:rotateY(180deg);background:#fff}.back-inner{padding:20px 18px 16px;height:100%;display:flex;flex-direction:column;justify-content:space-between;transition:transform .35s ease}.card-wrap:hover .back-inner{transform:scale(1.02)}.card-label{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c-label);margin-bottom:5px;display:block}.card-name{font-size:17px;font-weight:700;color:var(--c-name);letter-spacing:-.35px;line-height:1.2;margin-bottom:8px}.card-desc{font-size:12px;line-height:1.65;color:var(--c-desc);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}.tag{padding:2px 6px;background:var(--c-tag-bg);border:1px solid var(--c-tag-border);border-radius:3px;font-size:9.5px;font-weight:500;color:var(--c-tag-text);white-space:nowrap}.card-cta{display:block;padding:9px 14px;background:var(--c-btn-bg);color:var(--c-btn-text);font-size:11px;font-weight:600;letter-spacing:.3px;text-align:center;border-radius:5px;border:none;transition:background .18s ease;cursor:pointer}a.card-cta:hover{background:var(--c-btn-hover)}.card-cta.disabled{background:var(--c-btn-dis-bg);color:var(--c-btn-dis-tx);cursor:default}@media (max-width: 900px){.site-name{font-size:56px;letter-spacing:-2.5px}.site{width:96%}}@media (max-width: 700px){.site{width:100%;padding:48px 12px 64px}.site-header{margin-bottom:40px}.site-name{font-size:42px;letter-spacing:-2px}.projects-grid{grid-template-columns:repeat(2,1fr)}.card-desc{-webkit-line-clamp:4}}@media (max-width: 440px){.site{padding:36px 8px 56px}.site-name{font-size:32px;letter-spacing:-1.5px}.projects-grid{grid-template-columns:repeat(2,1fr)}.back-inner{padding:14px 13px 12px}.card-name{font-size:14px}.card-desc{-webkit-line-clamp:3;font-size:11px}}