:root{--blue:#4b7bff;--blue-600:#3565ff;--ink:#0f172a;--text:#334155;--muted:#6b7280;--border:#e5e7eb;--bg:#f6f7fb;--bg-soft:#eef2ff;--bg-ghost:#f8fafc;--shadow:0 10px 24px rgba(15,23,42,0.08);--shadow-lg:0 20px 50px rgba(15,23,42,0.18);--radius:12px;--radius-lg:16px}*{box-sizing:border-box}html,body{padding:0;margin:0;height:100%;scroll-behavior:smooth}body{font-family:"Noto Sans SC","IBM Plex Sans",system-ui,-apple-system,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg-soft),var(--bg-ghost) 25%,var(--bg) 60%)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1200px,92vw);margin:0 auto}.section{padding:72px 0;position:relative}.section-title{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:36px}.section-title h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-0.02em;margin:0;color:var(--ink)}.section-title .sub{color:var(--muted);font-size:14px;margin-top:8px}.section-title .sub-inline{color:var(--muted);font-size:14px;font-weight:400;margin-left:10px}.grid{display:grid;gap:24px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ai-grid{display:flex;gap:24px;align-items:stretch}.ai-grid>*{flex:1 1 0;min-width:0}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;cursor:pointer}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 20px rgba(75,123,255,0.25)}.btn-primary:hover{transform:translateY(-2px);background:var(--blue-600)}.btn-ghost{background:transparent;border:1px solid #d9e2ff;color:var(--blue)}.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(75,123,255,0.12)}.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);background:rgba(255,255,255,0.6);border-bottom:1px solid rgba(229,231,235,0.7)}.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}.nav-links{display:flex;gap:18px;font-size:14px;color:var(--muted)}.nav-links a.active{color:var(--ink);font-weight:600}.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}.hero-layer{position:absolute;inset:0;background-position:center;background-size:cover;transform:translate3d(0,0,0);transition:transform 0.2s ease-out}.hero-layer.layer-back{background-image:radial-gradient(circle at 20% 20%,rgba(75,123,255,0.16),transparent 40%),radial-gradient(circle at 80% 30%,rgba(75,123,255,0.12),transparent 35%),linear-gradient(135deg,#f8fafc,#eef2ff)}.hero-layer.layer-mid{background-image:radial-gradient(circle at 70% 70%,rgba(15,23,42,0.08),transparent 45%);mix-blend-mode:multiply}.hero-layer.layer-front{background-image:linear-gradient(120deg,rgba(255,255,255,0.6),rgba(255,255,255,0))}.hero-grain{position:absolute;inset:0;opacity:0.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.hero-content{position:relative;z-index:2;display:grid;gap:24px;max-width:640px}.hero-content h1{font-size:clamp(36px,6vw,64px);margin:0;letter-spacing:-0.03em;color:var(--ink)}.hero-content p{font-size:18px;color:var(--muted);margin:0;line-height:1.6}.hero-tags{display:flex;gap:12px;flex-wrap:wrap}.tag{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px solid #d9e2ff;font-size:13px;color:var(--muted);background:rgba(255,255,255,0.7)}.hero-cta{display:flex;gap:16px;flex-wrap:wrap}.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--muted);letter-spacing:0.2em;display:flex;align-items:center;gap:12px}.scroll-hint .dot{width:4px;height:16px;border-radius:999px;background:var(--blue);animation:scrollPulse 1.4s ease-in-out infinite}@keyframes scrollPulse{0%{transform:translateY(0);opacity:0.4}50%{transform:translateY(6px);opacity:1}100%{transform:translateY(0);opacity:0.4}}.work-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:320px;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease}.ai-card{height:100%}.ai-card .ai-title{min-height:56px}.ai-card .ai-desc{min-height:110px}.ai-card .ai-title{min-height:56px}.ai-grid .group{transform:scale(0.8);transform-origin:top center}.work-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(15,23,42,0.12)}.work-cover{flex:1;background:linear-gradient(120deg,rgba(75,123,255,0.2),rgba(15,23,42,0.05));display:flex;align-items:flex-end;padding:16px;position:relative;overflow:hidden}.work-cover.media-frame{background:#eef2ff;align-items:center}.cover-shift{position:absolute;inset:-20% -10%;background:radial-gradient(circle at 20% 20%,rgba(75,123,255,0.22),transparent 40%),radial-gradient(circle at 80% 80%,rgba(15,23,42,0.08),transparent 45%);transform:translateY(0);transition:transform 0.2s ease-out;z-index:0}.media-frame{display:flex;align-items:center;justify-content:center}.work-cover .badge{position:absolute;top:16px;left:16px;background:rgba(255,255,255,0.9);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}.detail-cover-img{width:100%;max-height:260px;object-fit:contain;margin-top:16px;display:none;border-radius:10px;background:#0f172a}.cover-content{position:relative;z-index:1}.work-info{padding:16px;display:grid;gap:6px}.work-info h3{margin:0;font-size:18px;color:var(--ink)}.work-info p{margin:0;font-size:13px;color:var(--muted)}.platform-row{display:flex;gap:8px;margin-top:8px}.platform-pill{border:1px solid #e2e8f0;padding:4px 8px;border-radius:999px;font-size:11px;color:var(--muted)}.filters{display:flex;gap:12px;flex-wrap:wrap;position:sticky;top:68px;z-index:6;padding:12px 0;background:linear-gradient(180deg,rgba(246,247,251,0.98),rgba(246,247,251,0.85));backdrop-filter:blur(8px)}.filter-sentinel{height:1px}.filter-btn{height:32px;padding:0 14px;border-radius:999px;border:1px solid #d9e2ff;background:#fff;font-size:13px;color:var(--muted);cursor:pointer;transition:all 0.2s ease}.filter-btn.active,.filter-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}.filters.is-stuck{padding:12px 12px;border-radius:999px;box-shadow:0 10px 20px rgba(15,23,42,0.08);background:rgba(255,255,255,0.9)}.filter-label{font-size:12px;color:var(--muted);letter-spacing:0.08em;margin-bottom:8px}.year-group{margin-top:28px}.year-title{display:flex;align-items:center;gap:12px;font-size:18px;color:var(--ink);font-weight:600;margin-bottom:16px}.year-title span{font-size:12px;color:var(--muted);font-weight:500}.year-empty{background:#fff;border:1px dashed #e2e8f0;border-radius:12px;padding:20px;color:var(--muted);font-size:14px}.timeline{display:grid;gap:18px;justify-items:center}.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;padding:20px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 10px 24px rgba(15,23,42,0.06);width:min(820px,100%)}.timeline-item>div{padding-right:6px}.timeline-item ul.info-list{margin-top:10px}.timeline-item ul.info-list li{line-height:1.7}.timeline-item span{font-size:13px;color:var(--muted)}.timeline-item h4{margin:0 0 6px;color:var(--ink)}.timeline-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}.skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.skill-card{background:#fff;border-radius:10px;padding:12px;border:1px solid #eef2ff;transition:transform 0.2s ease,box-shadow 0.2s ease}.skill-card strong{font-size:13px}.skill-card p{font-size:12px;line-height:1.5}.skill-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.contact-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:28px;align-items:center}.contact-card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.contact-lines{margin:0 0 20px;display:grid;gap:6px;color:var(--muted);font-size:14px}.info-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--muted);font-size:14px}.chip-list{display:flex;flex-wrap:wrap;gap:10px}.chip{padding:6px 12px;border-radius:999px;border:1px solid #d9e2ff;background:#fff;font-size:12px;color:var(--muted)}.stills-grid{margin-top:24px;display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}.stills-grid-single{grid-template-columns:1fr}.still-card{background:linear-gradient(120deg,rgba(75,123,255,0.18),rgba(15,23,42,0.04));border-radius:12px;min-height:140px;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(15,23,42,0.5)}.still-card img{width:55%;height:auto;object-fit:contain;margin:0 auto}.stills-grid-single .still-card img{width:55%}.stills-large .still-card img{width:100%!important}.social-list{display:flex;flex-wrap:wrap;gap:12px}.social-pill{height:40px;padding:0 16px;border-radius:999px;border:1px solid #d9e2ff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);background:#fff}.service-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #eef2ff;min-height:160px;display:grid;gap:10px;box-shadow:var(--shadow)}.service-card span{font-size:12px;color:var(--muted);letter-spacing:0.12em}.service-card h3{margin:0;color:var(--ink)}.service-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}.float-contact{position:fixed;right:24px;bottom:24px;z-index:40;height:44px;padding:0 18px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;box-shadow:0 16px 32px rgba(75,123,255,0.25);display:inline-flex;align-items:center;justify-content:center;transition:transform 0.2s ease,background 0.2s ease}.float-contact:hover{transform:translateY(-2px);background:var(--blue-600)}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,0.5);z-index:50;backdrop-filter:blur(6px)}.modal.active{display:flex}.modal-card{width:min(1000px,92vw);height:min(70vh,720px);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1.2fr 0.8fr;overflow:hidden}.modal-media{background:#0f172a;display:flex;align-items:center;justify-content:center;position:relative;padding:16px}.media-placeholder{color:rgba(255,255,255,0.8);font-size:14px;text-align:center;padding:0 20px}.detail-media-img{width:auto;height:50%;max-height:100%;max-width:50%;object-fit:contain;display:none;margin:0 auto;align-self:center;background:#0f172a}.detail-media-picture{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px;transform:translateY(-12px)}.modal-cover-img{max-width:90%;max-height:90%;width:auto;height:auto;object-fit:contain;display:none;background:#0f172a}.modal-media iframe{width:100%;height:100%;border:none}.modal-info{padding:28px;display:grid;gap:12px;align-content:start;overflow:auto}.modal-info h3{margin:0;font-size:22px;color:var(--ink)}.modal-info p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}.modal-actions{display:flex;gap:12px;flex-wrap:wrap}.modal-tabs{display:flex;gap:8px;flex-wrap:wrap}.tab-btn{height:30px;padding:0 12px;border-radius:999px;border:1px solid #d9e2ff;background:#fff;font-size:12px;color:var(--muted);cursor:pointer;transition:all 0.2s ease}.tab-btn.active,.tab-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}.modal-panel{display:none;gap:12px}.modal-panel.active{display:grid}.modal-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,0.9);cursor:pointer;font-size:18px}.reveal{opacity:1;transform:none;transition:opacity 0.6s ease,transform 0.6s ease}.js .reveal{opacity:0;transform:translateY(20px)}.js .reveal.visible{opacity:1;transform:translateY(0)}.footer{padding:40px 0;text-align:center;color:var(--muted);font-size:13px}@media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-grid{grid-template-columns:1fr}.modal-card{grid-template-columns:1fr;height:80vh}.stills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:720px){.nav-inner{flex-direction:column;gap:12px}.nav-links{flex-wrap:wrap;justify-content:center}.hero-content{text-align:center;margin:0 auto}.hero-cta{justify-content:center}.timeline-item{grid-template-columns:1fr}.skill-grid{grid-template-columns:1fr}.modal-card{height:auto;max-height:90vh;overflow:auto}.modal-media{min-height:0;max-height:none;aspect-ratio:16 / 9;padding:0;overflow:hidden}.modal-cover-img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}.modal-info{max-height:58vh;overflow:auto}.detail-page .work-cover.media-frame{padding:0;min-height:0 !important;height:auto !important;aspect-ratio:16 / 9;width:100%;max-width:560px;margin:0 auto;align-items:center;justify-content:center}.detail-page .detail-media-picture{padding:0}.detail-page .detail-media-img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:12px}.detail-page .stills-grid{grid-template-columns:1fr;justify-items:center}.detail-page .stills-grid .still-card{min-height:0;aspect-ratio:16 / 9;overflow:hidden;width:100%;max-width:560px;margin:0 auto}.detail-page .stills-grid .still-card img{width:100%;height:100%;object-fit:cover;object-position:center;margin:0}}