body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft JhengHei,sans-serif;background-color:#fafafa;color:#333;line-height:1.6}.app{display:flex;flex-direction:column;min-height:100vh}.header{background-color:#fff;border-bottom:1px solid #e5e5e5;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:600;color:#333;letter-spacing:.5px}.nav{display:flex;gap:2rem}.nav-link{background:none;border:none;font-size:1rem;color:#666;cursor:pointer;padding:.5rem 0;border-bottom:2px solid transparent;transition:all .3s ease;font-family:inherit}.nav-link:hover{color:#333}.nav-link.active{color:#333;border-bottom-color:#333}.hero{background-color:#fff;padding:6rem 2rem;text-align:center;border-bottom:1px solid #e5e5e5}.hero-content h2{font-size:2.5rem;font-weight:600;margin-bottom:1rem;color:#333;letter-spacing:-.02em}.hero-content p{font-size:1.1rem;color:#666;margin-bottom:2rem}.about{flex:1;padding:4rem 2rem;background-color:#fff}.about-container{max-width:900px;margin:0 auto}.about h2{font-size:2rem;margin-bottom:2rem;color:#333}.about-text p{font-size:1rem;color:#555;margin-bottom:1.5rem;line-height:1.8}.social-section{margin-top:3rem;padding-top:2rem;border-top:1px solid #e5e5e5}.social-section h3{font-size:1.2rem;margin-bottom:1.5rem;color:#333}.social-links{display:flex;flex-wrap:wrap;gap:1.5rem}.social-link{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:1px solid #e5e5e5;border-radius:4px;text-decoration:none;color:#333;transition:all .3s ease;background-color:#fafafa}.social-link:hover{background-color:#f0f0f0;border-color:#333}.social-icon{font-size:1.2rem}.social-icon-fa{font-size:1.5rem;width:1.5rem;text-align:center}.social-name{font-size:.95rem}.works{flex:1;padding:4rem 2rem;background-color:#fff}.works-container{max-width:1200px;margin:0 auto}.works h2{font-size:2rem;margin-bottom:2rem;color:#333}.category-filter{display:flex;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}.filter-btn{padding:.6rem 1.5rem;border:1px solid #e5e5e5;background-color:#fafafa;color:#333;font-size:.95rem;cursor:pointer;border-radius:4px;transition:all .3s ease;font-family:inherit}.filter-btn:hover{background-color:#f0f0f0}.filter-btn.active{background-color:#333;color:#fff;border-color:#333}.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}.work-card{border:1px solid #e5e5e5;border-radius:4px;overflow:hidden;background-color:#fafafa;transition:all .3s ease}.work-card:hover{border-color:#999;box-shadow:0 2px 8px #00000014}.work-image{background-color:#f0f0f0;height:250px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e5e5e5;overflow:hidden}.work-img{width:100%;height:100%;object-fit:cover}.image-placeholder{font-size:4rem;opacity:.6}.work-info{padding:1.5rem}.work-card:has(.work-image) .work-info{padding:1.5rem}.work-card:not(:has(.work-image)) .work-info{padding:2rem 1.5rem;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.work-info h3{font-size:1.1rem;margin-bottom:.5rem;color:#333}.work-category{font-size:.85rem;color:#999;margin-bottom:.75rem}.work-description{font-size:.95rem;color:#666}.footer{background-color:#f9f9f9;border-top:1px solid #e5e5e5;padding:2rem;text-align:center;margin-top:auto}.footer-content{max-width:1200px;margin:0 auto}.footer-content p{font-size:.9rem;color:#999}.footer-content p:first-child{margin-bottom:.5rem}@media (max-width: 768px){.header-content{flex-direction:column;gap:1.5rem}.nav{width:100%;justify-content:center;gap:1.5rem}.hero-content h2{font-size:2rem}.works-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.social-links{flex-direction:column}.social-link{justify-content:center}}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft JhengHei,sans-serif;line-height:1.6;font-weight:400;color:#333;background-color:#fafafa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}a{color:#333;text-decoration:none;transition:color .3s ease}a:hover{color:#666}body{margin:0;min-width:320px;min-height:100vh;background-color:#fafafa}#root{width:100%;min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}button{font-family:inherit;cursor:pointer;border:none;padding:0;background:none}button:focus,button:focus-visible{outline:none}@media (prefers-color-scheme: dark){:root{color:#333;background-color:#fafafa}}@media (prefers-color-scheme: light){:root{color:#333;background-color:#fafafa}}