:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.5}html,body{background-color:#f5f5f5;width:100%;height:100%;margin:0;padding:0}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*{box-sizing:border-box;margin:0;padding:0}.app{background-color:#f5f5f5;flex-direction:column;min-height:100vh;display:flex}.navbar{z-index:100;background-color:#fffffff2;position:sticky;top:0;box-shadow:0 2px 10px #0000001a}.nav-container{justify-content:space-between;align-items:center;max-width:1200px;height:70px;margin:0 auto;padding:0 20px;display:flex}.logo{color:#333;letter-spacing:2px;font-size:24px;font-weight:700}.nav-links{gap:20px;display:flex}.nav-btn{color:#666;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:8px 16px;font-size:16px;font-weight:500;transition:all .3s}.nav-btn:hover,.nav-btn.active{color:#333;border-bottom-color:#333}.home{background-position:50%;background-size:cover;flex:1;justify-content:center;align-items:center;padding:40px 20px;display:flex;position:relative}.home:before{content:"";background:#0006;position:absolute;inset:0}.home-content{z-index:1;width:100%;max-width:600px;position:relative}.intro-box{text-align:center;background:#fffffff2;border-radius:10px;padding:40px;box-shadow:0 10px 40px #0003}.intro-box h1{color:#333;letter-spacing:2px;margin-bottom:20px;font-size:36px}.intro-text{color:#666;margin-bottom:30px;font-size:16px;line-height:1.8}.social-links{flex-wrap:wrap;justify-content:center;gap:15px;display:flex}.social-btn{color:#fff;background-color:#333;border-radius:5px;padding:10px 20px;font-size:14px;font-weight:500;text-decoration:none;transition:all .3s}.social-btn:hover{background-color:#555;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.works{background-color:#f5f5f5;flex:1;padding:40px 20px}.works-container{max-width:1200px;margin:0 auto}.works-section{margin-bottom:50px}.works-section h2{color:#333;border-bottom:2px solid #ddd;margin-bottom:30px;padding-bottom:15px;font-size:28px}.works-grid{gap:20px;display:grid}.works-grid.interactive,.works-grid.graphics{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.work-item{background:#fff;border-radius:8px;flex-direction:column;height:100%;text-decoration:none;transition:all .3s;display:flex;overflow:hidden;box-shadow:0 4px 12px #0000001a}.work-item:hover{transform:translateY(-8px);box-shadow:0 8px 24px #00000026}.interactive-item{background:linear-gradient(135deg,#f5f5f5 0%,#fff 100%);justify-content:center;align-items:center;min-height:200px;padding:30px 20px;position:relative}.interactive-item .work-title{color:#333;text-align:center;margin-bottom:15px;font-size:18px;font-weight:600}.interactive-item .work-icon{color:#666;opacity:.7;font-size:48px;transition:all .3s}.interactive-item:hover .work-icon{opacity:1;transform:scale(1.2)}.graphics-item{background:#fff;padding:0}.graphics-item img{object-fit:cover;width:100%;height:250px;display:block}.graphics-item .work-label{text-align:center;color:#666;background-color:#fafafa;padding:15px;font-weight:500}.footer{color:#fff;text-align:center;background-color:#333;margin-top:auto;padding:30px 20px;font-size:14px}@media (width<=768px){.nav-container{flex-direction:column;gap:10px;height:60px}.logo{font-size:20px}.intro-box{padding:25px}.intro-box h1{font-size:28px}.intro-text{font-size:14px}.works-grid.interactive,.works-grid.graphics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.graphics-item img{height:150px}}