.works-hero{padding:calc(var(--header-height) + var(--space-16)) var(--container-padding) var(--space-16);text-align:center}.works-hero__title{font-size:clamp(var(--fs-4xl),6vw,var(--fs-6xl));font-weight:600;margin-bottom:var(--space-4)}.works-hero__description{font-size:var(--fs-lg);color:var(--text-secondary);max-width:600px;margin:0 auto}.works-filter{padding:var(--space-8) 0;border-bottom:1px solid var(--border-color)}.works-filter__list{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;list-style:none}.works-filter__item{padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base)}.works-filter__item:hover,.works-filter__item.active{color:var(--bg-primary);background:var(--accent);border-color:var(--accent)}.works-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-16) 0}@media (min-width: 640px){.works-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.works-grid{grid-template-columns:repeat(3,1fr)}}.works-card{display:flex;flex-direction:column;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-base)}.works-card:hover{border-color:rgba(var(--accent-rgb),.3);transform:translateY(-4px)}.works-card__thumbnail{aspect-ratio:16 / 9;background:var(--bg-secondary);overflow:hidden}.works-card__thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.works-card:hover .works-card__thumbnail img{transform:scale(1.05)}.works-card__thumbnail--placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary))}.works-card__thumbnail--placeholder svg{width:48px;height:48px;color:var(--text-tertiary)}.works-card__content{padding:var(--space-6);flex:1;display:flex;flex-direction:column}.works-card__meta{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.works-card__category{font-size:var(--fs-xs);color:var(--accent);text-transform:uppercase;letter-spacing:.05em}.works-card__date{font-size:var(--fs-xs);color:var(--text-tertiary)}.works-card__title{font-size:var(--fs-xl);font-weight:600;margin-bottom:var(--space-3);line-height:1.4}.works-card__title a{transition:color var(--transition-fast)}.works-card__title a:hover{color:var(--accent)}.works-card__excerpt{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.7;flex:1}.works-card__technologies{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}.works-card__tech-tag{font-size:var(--fs-xs);color:var(--text-tertiary);background:var(--bg-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.works-card__link{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--fs-sm);color:var(--accent);font-weight:500}.works-card__link svg{width:16px;height:16px;transition:transform var(--transition-base)}.works-card__link:hover svg{transform:translate(4px)}.works-empty{text-align:center;padding:var(--space-20) var(--space-6)}.works-empty__icon{width:80px;height:80px;margin:0 auto var(--space-6);color:var(--text-tertiary)}.works-empty__title{font-size:var(--fs-2xl);margin-bottom:var(--space-3)}.works-empty__text{color:var(--text-secondary)}.works-detail{padding:calc(var(--header-height) + var(--space-12)) 0 var(--space-20)}.works-detail__header{max-width:800px;margin:0 auto var(--space-12);text-align:center}.works-detail__category{display:inline-block;padding:var(--space-2) var(--space-4);font-size:var(--fs-xs);color:var(--accent);background:rgba(var(--accent-rgb),.1);border-radius:var(--radius-full);margin-bottom:var(--space-4)}.works-detail__title{font-size:clamp(var(--fs-3xl),5vw,var(--fs-5xl));font-weight:600;margin-bottom:var(--space-6);line-height:1.3}.works-detail__meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-4);font-size:var(--fs-sm);color:var(--text-secondary)}.works-detail__meta-divider{width:4px;height:4px;background:var(--text-tertiary);border-radius:50%}.works-media{max-width:1000px;margin:0 auto var(--space-12)}.works-media__main{margin-bottom:var(--space-4);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-secondary)}.works-media__main--placeholder{aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center}.works-media__main--placeholder svg{width:80px;height:80px;color:var(--text-tertiary)}.works-media__youtube{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.works-media__youtube iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.works-media__thumbs{display:flex;gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-2)}.works-media__thumb{flex-shrink:0;width:120px;height:68px;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color var(--transition-base)}.works-media__thumb.active{border-color:var(--accent)}.works-media__thumb img{width:100%;height:100%;object-fit:cover}.works-media__thumb--youtube{position:relative;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center}.works-media__thumb--youtube svg{width:32px;height:32px;color:red}.works-detail__content{max-width:800px;margin:0 auto}.works-detail__body{font-size:var(--fs-lg);line-height:1.9;color:var(--text-secondary)}.works-detail__body p{margin-bottom:var(--space-6)}.works-detail__body h2{font-size:var(--fs-2xl);color:var(--text-primary);margin:var(--space-12) 0 var(--space-6)}.works-detail__body h3{font-size:var(--fs-xl);color:var(--text-primary);margin:var(--space-8) 0 var(--space-4)}.works-detail__body ul,.works-detail__body ol{margin-bottom:var(--space-6);padding-left:var(--space-6)}.works-detail__body li{margin-bottom:var(--space-2)}.works-detail__info{max-width:800px;margin:var(--space-12) auto 0;padding:var(--space-8);background:var(--bg-tertiary);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.works-detail__info-title{font-size:var(--fs-lg);font-weight:600;margin-bottom:var(--space-6)}.works-detail__info-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media (min-width: 640px){.works-detail__info-grid{grid-template-columns:repeat(2,1fr)}}.works-detail__info-item{display:flex;flex-direction:column;gap:var(--space-2)}.works-detail__info-label{font-size:var(--fs-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.works-detail__info-value{font-size:var(--fs-base);color:var(--text-primary)}.works-detail__technologies{display:flex;flex-wrap:wrap;gap:var(--space-2)}.works-detail__tech-tag{font-size:var(--fs-sm);color:var(--accent);background:rgba(var(--accent-rgb),.1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm)}.works-detail__url{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--accent);font-size:var(--fs-sm);transition:opacity var(--transition-fast)}.works-detail__url:hover{opacity:.8}.works-detail__url svg{width:16px;height:16px}.related-works{max-width:1200px;margin:var(--space-20) auto 0;padding-top:var(--space-12);border-top:1px solid var(--border-color)}.related-works__title{font-size:var(--fs-2xl);margin-bottom:var(--space-8);text-align:center}.related-works__grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media (min-width: 640px){.related-works__grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.related-works__grid{grid-template-columns:repeat(3,1fr)}}.works-back{display:inline-flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-8);font-size:var(--fs-sm);color:var(--text-secondary);transition:color var(--transition-fast)}.works-back:hover{color:var(--accent)}.works-back svg{width:16px;height:16px}