:root{--color-background: #0D0D0D;--color-text-primary: #EAEAEA;--color-text-secondary: #888888;--color-border: #222222;--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-size-xl: clamp(2rem, 8vw, 5rem);--font-size-lg: 1.5rem;--font-size-md: 1rem;--font-size-sm: .875rem;--font-weight-bold: 700;--font-weight-normal: 400;--spacing-unit: 8px;--spacing-sm: var(--spacing-unit);--spacing-md: calc(var(--spacing-unit) * 2);--spacing-lg: calc(var(--spacing-unit) * 4);--spacing-xl: calc(var(--spacing-unit) * 8);--transition-speed: .3s;--easing-function: ease-in-out}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family-primary);background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-md);line-height:1.6;-webkit-font-smoothing:antialiased}#app{padding:var(--spacing-lg);margin-top:100px}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-md)}.project-card{aspect-ratio:4 / 3;position:relative;cursor:pointer;overflow:hidden;border:1px solid var(--color-border);transition:transform var(--transition-speed) var(--easing-function)}.project-card:hover{transform:scale(1.02)}.project-card-media-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.project-card-video,.project-card-image{width:100%;height:100%;object-fit:cover;transition:opacity var(--transition-speed) var(--easing-function)}.project-card:hover .project-card-video,.project-card:hover .project-card-image{opacity:.2}.project-card-overlay{position:absolute;bottom:0;left:0;width:100%;padding:var(--spacing-md);background:linear-gradient(to top,rgba(0,0,0,.9),transparent)}.project-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.project-client{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.view-container{width:100%}.view-container.hidden{display:none}.main-header{position:absolute;top:0;left:0;width:100%;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);background-color:var(--color-background);border-bottom:1px solid var(--color-border)}.logo-link{position:relative;display:inline-block;color:inherit;text-decoration:none;cursor:pointer;height:24px}.logo-default-state,.logo-hover-state{position:absolute;top:0;left:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);white-space:nowrap}.logo-default-state{opacity:1}.logo-hover-state{display:flex;align-items:center;opacity:0}.logo-link:hover .logo-default-state{opacity:0}.logo-link:hover .logo-hover-state{opacity:1}.logo-hover-underline{position:relative;display:inline-block;padding-bottom:4px}.logo-hover-underline:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--color-text-primary)}.logo-hover-fullname{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);color:var(--color-text-secondary);margin-left:var(--spacing-sm);opacity:0;transition:opacity var(--transition-speed) var(--easing-function);transition-delay:50ms}.logo-link:hover .logo-hover-fullname{opacity:1}.main-nav{display:flex;gap:var(--spacing-lg)}.main-nav a{position:relative;font-size:var(--font-size-md);font-weight:var(--font-weight-normal);color:var(--color-text-secondary);text-decoration:none;padding-bottom:4px;transition:color var(--transition-speed) var(--easing-function)}.main-nav a:hover{color:var(--color-text-primary)}.main-nav a:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--color-text-primary);transform:scaleX(0);transform-origin:center}.main-nav a:hover:after{transform:scaleX(1)}.webgl-canvas{position:fixed;top:0;left:0;outline:none;z-index:-1}.project-detail{width:100%;max-width:1400px;margin:0 auto}.project-detail-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--spacing-lg);margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.project-detail-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold)}.back-button{background:none;border:1px solid var(--color-text-secondary);color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-md);font-family:inherit;font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-speed) var(--easing-function)}.back-button:hover{background-color:var(--color-text-primary);color:var(--color-background);border-color:var(--color-text-primary)}.project-detail-content{display:grid;grid-template-columns:250px 1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.project-meta .meta-item{margin-bottom:var(--spacing-lg)}.project-meta strong{display:block;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.project-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tag{background-color:var(--color-border);font-size:var(--font-size-sm);padding:4px 8px;border-radius:4px}.project-story p{line-height:1.8;max-width:80ch}.project-detail-gallery{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}.gallery-item img,.gallery-item video{width:100%;height:auto;display:block}.gallery-item figcaption{font-size:var(--font-size-sm);color:var(--color-text-secondary);padding-top:var(--spacing-sm)}@media (max-width: 768px){.project-detail-content{grid-template-columns:1fr;gap:var(--spacing-lg)}.project-detail-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}}