@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");*{margin:0;padding:0;box-sizing:border-box}:root{--color-header: #1a1a1a;--color-text: #333;--color-text-light: #666;--color-bg: #f8f8f8;--header-height: 70px;--max-content-width: 1200px}body{font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;background:#fff;color:var(--color-text);line-height:1.6}.header{background:var(--color-header);height:var(--header-height);position:fixed;top:0;left:0;right:0;z-index:1000}.header-inner{max-width:var(--max-content-width);margin:0 auto;height:100%;padding:0 40px;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.logo{height:44px;width:150px;flex-shrink:0;display:block;object-fit:contain}.nav-desktop{flex:1;display:flex;gap:clamp(8px, 3vw, 40px);justify-content:center;align-items:center;min-width:0;overflow:hidden}.nav-link{color:rgba(255,255,255,0.8);text-decoration:none;font-size:clamp(10px, 1.4vw, 13px);font-weight:200;letter-spacing:0.5px;text-transform:lowercase;transition:color 0.2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.nav-link:hover,.nav-link.active{color:#fff}.nav-social{width:120px;min-width:120px;flex-shrink:0;display:flex;gap:12px;justify-content:flex-end;align-items:center;overflow:visible}.social-link{color:rgba(255,255,255,0.6);text-decoration:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:color 0.2s}.social-link:hover{color:#fff}.menu-btn{display:none;width:44px;height:44px;background:transparent;border:none;color:white;font-size:24px;cursor:pointer;margin-left:auto}.mobile-nav-overlay{display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:997}.mobile-nav-overlay.active{display:block}.mobile-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;background:var(--color-header);z-index:998;flex-direction:column;align-items:center;padding:0;border-top:1px solid rgba(255,255,255,0.1)}.mobile-nav.active{display:flex}.mobile-nav-main{display:flex;flex-direction:column;align-items:center;width:100%}.mobile-nav-link{color:rgba(255,255,255,0.9);text-decoration:none;font-size:18px;font-weight:200;padding:16px 0;width:100%;text-align:center;border-bottom:1px solid rgba(255,255,255,0.08);transition:color 0.2s}.mobile-nav-link:last-of-type{border-bottom:1px solid rgba(255,255,255,0.08)}.mobile-nav-link:hover,.mobile-nav-link.active{color:#fff}.mobile-nav-social{display:flex;justify-content:center;gap:40px;padding:20px 0;width:100%;background:rgba(0,0,0,0.2)}.mobile-nav-social-link{color:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:color 0.2s, transform 0.2s}.mobile-nav-social-link:hover{color:#fff;transform:scale(1.1)}.mobile-nav-social-link svg{width:24px;height:24px}.hero{padding-top:var(--header-height);background:#fff;position:relative;overflow:hidden}.avatar-section{position:relative;width:1200px;height:600px;margin:0 auto}.avatar-wrapper{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:813px;height:813px;z-index:5}.avatar-image{position:absolute;bottom:0;left:50%;transform:translateX(-50%);max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;transition:transform 0.3s ease-out, clip-path 0.3s ease-out}.avatar-player{z-index:2;clip-path:inset(0 50% 0 0)}.avatar-creator{z-index:1;clip-path:inset(0 0 0 50%)}.bg-text{position:absolute;top:150px;font-weight:700;color:#000;letter-spacing:-2px;pointer-events:none;z-index:1;transition:opacity 0.3s ease-out}.bg-text-title{font-size:90px;white-space:nowrap;display:block;line-height:1}.bg-text-title small{font-size:inherit;font-weight:400}.bg-text-left{left:40px}.bg-text-right{right:40px}.bg-text-desc{display:block;font-size:14px;font-weight:400;color:var(--color-text-light);line-height:1.5;letter-spacing:normal;margin-top:12px;max-width:220px;white-space:normal;pointer-events:none}.bg-text-left .bg-text-desc{text-align:left;margin-left:0}.bg-text-right .bg-text-desc{text-align:right;margin-left:auto;margin-right:0}.works{padding:40px;background:var(--color-bg)}.works-header{text-align:center;margin-bottom:30px}.works-header h3{font-size:13px;font-weight:500;color:var(--color-text-light);letter-spacing:2px;text-transform:uppercase}.works-grid{max-width:var(--max-content-width);margin:0 auto;display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}.page-header{padding-top:calc(var(--header-height) + 40px);padding-bottom:40px;background:#fff;border-bottom:1px solid #eee}.page-header-inner{max-width:var(--max-content-width);margin:0 auto;padding:0 40px;text-align:center}.page-header h1{font-size:clamp(48px, 10vw, 90px);font-weight:700;letter-spacing:-4px;color:#000;margin-bottom:16px}.page-description{font-size:16px;color:var(--color-text-light);max-width:400px;margin:0 auto}.games-list{padding:40px;background:var(--color-bg);min-height:calc(100vh - var(--header-height) - 300px)}.games-grid{max-width:var(--max-content-width);margin:0 auto;display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}.game-card-link{display:block;text-decoration:none;color:inherit}.status-badge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;padding:5px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;background:rgba(255,255,255,0.95);color:#333;box-shadow:0 2px 8px rgba(0,0,0,0.15)}.status-badge.beta{background:#fff;color:#000}.platform-tag{position:absolute;top:12px;right:12px;font-size:10px;color:#fff;background:rgba(0,0,0,0.5);padding:5px 10px;border-radius:20px;backdrop-filter:blur(4px)}.work-image{position:relative}@media (max-width: 1024px){.games-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 640px){.games-grid{grid-template-columns:1fr;gap:16px}.games-list,.page-header-inner{padding-left:20px;padding-right:20px}}.footer{background:#fff;padding:30px 40px;border-top:1px solid #eee}.footer-inner{max-width:var(--max-content-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center}.footer-nav{display:flex;gap:24px}.footer-nav a{color:var(--color-text-light);text-decoration:none;font-size:13px;transition:color 0.2s}.footer-nav a:hover{color:#000}.footer-social{display:flex;gap:16px}.footer-social-link{color:var(--color-text-light);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:color 0.2s}.footer-social-link:hover{color:#000}.footer-version{text-align:center;margin-top:10px;font-size:12px;color:#999}pre,code{font-family:'SF Mono', Monaco, Inconsolata, 'Fira Code', monospace;font-size:14px}code{background:#f4f4f4;padding:2px 6px;border-radius:4px;color:#333}pre{background:#f8f8f8;padding:16px;border-radius:8px;overflow-x:auto;border:1px solid #e8e8e8;margin:16px 0}pre code{background:transparent;padding:0;border-radius:0;color:inherit}.highlight{background:#f8f8f8;border-radius:8px;padding:16px;overflow-x:auto;border:1px solid #e8e8e8;margin:16px 0}.highlight .c,.highlight .cm,.highlight .c1,.highlight .cp{color:#6a9955}.highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt{color:#0000ff}.highlight .s,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .s1{color:#a31515}.highlight .m,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#098658}.highlight .n,.highlight .na,.highlight .nb,.highlight .nc,.highlight .nd,.highlight .ne,.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx{color:#267f99}.highlight .o,.highlight .ow{color:#000000}.highlight .p{color:#000000}.work-card{background:rgba(255,255,255,0.9);border-radius:16px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.05);transition:transform 0.3s, box-shadow 0.3s;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column}.work-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.08)}.card-image{width:100%;height:160px;display:flex;align-items:center;justify-content:center;font-size:48px;position:relative;background:linear-gradient(135deg, #2a2a3a 0%, #1a1a2e 100%);overflow:hidden}.card-image .card-img{width:100%;height:100%;object-fit:cover;display:block}.card-image .card-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.card-content{padding:20px;background:rgba(255,255,255,0.8);flex:1}.card-title{font-size:18px;font-weight:600;color:#111;margin-bottom:8px}.card-desc{font-size:13px;color:#666;line-height:1.5;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-date{font-size:12px;color:#999;margin:0}.type-badge{position:absolute;top:12px;left:12px;padding:4px 10px;background:rgba(255,255,255,0.95);border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#333}.year-badge{position:absolute;top:12px;right:12px;padding:4px 10px;background:rgba(0,0,0,0.7);border-radius:20px;font-size:11px;font-weight:500;color:#fff}.platform-badge{position:absolute;top:12px;right:12px;padding:4px 10px;background:rgba(0,0,0,0.7);border-radius:20px;font-size:11px;font-weight:500;color:#fff}.status-badge{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;color:#fff}.status-badge.released{background:#10b981}.status-badge.beta{background:#f59e0b}.status-badge.development{background:#6366f1}@media (max-width: 1200px){.avatar-section{width:100%;height:50vw}.bg-text{top:12.5vw}.bg-text-title{font-size:7.5vw}.bg-text-left{left:3.3vw}.bg-text-right{right:3.3vw}.bg-text-desc{font-size:12px;max-width:160px}.avatar-wrapper{width:67.8vw;height:67.8vw}}@media (max-width: 768px){.works-grid{grid-template-columns:repeat(2, 1fr);max-width:700px}}@media (max-width: 640px){.header-inner{padding:0 20px}.nav-desktop{display:none}.nav-social{display:none}.menu-btn{display:flex;align-items:center;justify-content:center}.works{padding:30px 20px}.works-grid{grid-template-columns:1fr;gap:16px}.footer{padding:20px}.footer .footer-inner{flex-direction:column;gap:16px;text-align:center}}