*,*:before,*:after{box-sizing:border-box}:root{--background-color: #ffffff;--text-color: #333333;--header-color: #1a1a1a;--accent-color: #000000;--border-color: #000000;--font-main: "Space Grotesk", sans-serif;--font-size-small: .8rem;--font-size-normal: 1rem;--font-size-medium: 1.2rem;--font-size-large: 1.8rem;--spacing-unit: 20px;--border-width-thin: 1px;--border-width-medium: 2px;--border-width-thick: 4px;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--color-shadow: rgba(0, 0, 0, .1)}body{font-family:var(--font-main);margin:0;padding:0;background-color:var(--background-color);color:var(--text-color);line-height:1.6;font-size:var(--font-size-normal);height:100vh;width:100vw;display:flex;justify-content:center;align-items:flex-start;padding-top:35vh}.container{width:80vw;max-width:2000px;display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 3);padding:var(--spacing-unit);border:1px solid black}.main-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-unit);border:none;background:transparent;width:100%;margin-bottom:0}.header-left .site-title{font-size:var(--font-size-large);margin:0;font-weight:500;color:var(--header-color);border:none;padding:0;text-align:left}.header-right{display:flex;gap:calc(var(--spacing-unit) * 1.5);align-items:center}.nav-item{position:relative}.nav-button{background:none;border:1px solid var(--border-color);padding:calc(var(--spacing-unit) * .5) var(--spacing-unit);font-family:var(--font-main);font-size:var(--font-size-normal);color:var(--text-color);cursor:pointer;transition:all .2s ease}.nav-button:hover{background-color:var(--accent-color);color:var(--background-color)}.popup{position:absolute;top:100%;right:0;background:var(--background-color);border:1px solid var(--border-color);padding:var(--spacing-unit);margin-top:10px;z-index:1000;min-width:300px;max-width:400px;box-shadow:0 4px 8px var(--color-shadow)}.popup p{margin:0;font-size:var(--font-size-small);line-height:1.5}.popup a{color:var(--accent-color);text-decoration:none}.popup a:hover{text-decoration:underline}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--spacing-unit) * 3);width:100%}.project-button{border:1px solid var(--border-color);background:var(--background-color);cursor:pointer;transition:all .3s ease;overflow:hidden;display:flex;flex-direction:column}.project-button:not(.expanded){height:60px}.project-button.expanded{height:auto}.project-button:hover{border-color:var(--accent-color)}.project-title{padding-top:calc(var(--spacing-unit) / 2);padding-left:calc(var(--spacing-unit) / 2);padding-right:calc(var(--spacing-unit) / 2);padding-bottom:calc(var(--spacing-unit) / 2);font-weight:500;font-size:var(--font-size-medium);color:var(--header-color);text-align:center;display:flex;align-items:center;justify-content:center;flex:none;height:60px;margin:0}.project-preview{padding-left:calc(var(--spacing-unit) / 2);padding-right:calc(var(--spacing-unit) / 2);padding-top:0;padding-bottom:var(--spacing-unit);background:var(--background-color);animation:expandDown .3s ease}@keyframes expandDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.project-thumbnail{width:100%;height:auto;object-fit:cover;margin-bottom:calc(var(--spacing-unit) * .5);border:1px solid var(--border-color)}.project-info h3{margin:0 0 calc(var(--spacing-unit) * .5) 0;font-size:var(--font-size-normal);color:var(--header-color)}.project-info{display:flex;justify-content:center;align-items:center}.project-info p{margin:0;font-size:var(--font-size-small);color:var(--text-color);line-height:1.4;text-align:center}.webllm-dropdown{padding:calc(var(--spacing-unit) / 2);background:var(--background-color);animation:expandDown .3s ease;display:flex;flex-direction:column;gap:calc(var(--spacing-unit) / 2)}.dropdown-button{background:none;border:1px solid var(--border-color);padding:calc(var(--spacing-unit) * .5) var(--spacing-unit);font-family:var(--font-main);font-size:var(--font-size-small);color:var(--text-color);cursor:pointer;transition:all .2s ease;text-align:center;border-radius:0}.dropdown-button:hover{background-color:var(--accent-color);color:var(--background-color);border-color:var(--accent-color)}.popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:2000;padding:var(--spacing-unit)}.aifigurative-popup{background:var(--background-color);border:1px solid var(--border-color);max-width:90vw;max-height:90vh;width:1200px;overflow-y:auto;box-shadow:0 8px 32px #0000004d}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-unit);border-bottom:1px solid var(--border-color);background:var(--background-color);position:sticky;top:0;z-index:10}.popup-header h2{margin:0;font-size:var(--font-size-large);color:var(--header-color);font-weight:500}.close-button{background:none;border:1px solid var(--border-color);width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;color:var(--text-color);transition:all .2s ease}.close-button:hover{background-color:var(--accent-color);color:var(--background-color)}.popup-content{padding:calc(var(--spacing-unit) * 2);display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 2)}.intro-text{text-align:center;padding:0 calc(var(--spacing-unit) * 2);border-bottom:1px solid var(--border-color);padding-bottom:calc(var(--spacing-unit) * 2)}.intro-text p{margin:0;font-size:var(--font-size-normal);line-height:1.6;color:var(--text-color)}.carousel-container{display:flex;justify-content:center;padding:0 calc(var(--spacing-unit) * 1)}.carousel-content{width:100%;display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1)}.media-display{display:flex;justify-content:center;align-items:center;width:100%;height:500px;background:#fff;padding:var(--spacing-unit);position:relative;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}.carousel-media{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:1px solid var(--border-color);opacity:0;transition:opacity .3s ease}.carousel-media.loaded{opacity:1}.media-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:2px solid var(--border-color);border-top:2px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;opacity:1;transition:opacity .3s ease}.media-placeholder.hidden{opacity:0}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.carousel-indicators{display:flex;justify-content:center;gap:calc(var(--spacing-unit) / 2);padding:calc(var(--spacing-unit) / 2) 0}.indicator{background:var(--background-color);border:1px solid var(--border-color);width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-small);cursor:pointer;color:var(--text-color);transition:all .2s ease;font-weight:500}.indicator:hover{background-color:#f0f0f0}.indicator.active{background-color:var(--accent-color);color:var(--background-color)}.collaborators-section{padding:var(--spacing-unit);border-top:1px solid var(--border-color);text-align:center;background:#fff}.collaborators-section p{margin:0;font-size:var(--font-size-small);color:var(--text-color);line-height:1.4}.p1-highlight{outline:7px solid #86d2e1;outline-offset:0px;background-color:#86d2e1}.p1-highlight .project-preview{background-color:#86d2e1}@media (max-width: 768px){.main-header{flex-direction:column;gap:var(--spacing-unit);align-items:flex-start}.header-right{align-self:stretch;justify-content:space-between}.popup{right:auto;left:0;min-width:280px}.project-grid{grid-template-columns:repeat(2,1fr)}.aifigurative-popup{width:95vw;max-width:none}.media-display{height:300px;padding:calc(var(--spacing-unit) / 2)}}@media (max-width: 480px){.project-grid{grid-template-columns:1fr}.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);min-width:90vw;max-width:90vw}.popup-overlay{padding:calc(var(--spacing-unit) / 2)}.popup-content{padding:var(--spacing-unit);gap:calc(var(--spacing-unit) * 2)}}