:root{--color-black: #000000;--color-white: #FFFFFF;--color-accent-red: #E40000;--color-gray-dark: #343434;--color-gray-medium: #848383;--color-gray-light: #B2B2B2;--color-border: #444444;--font-primary: "Roboto Condensed", sans-serif;--font-size-xl: 6.25rem;--font-size-large: 3rem;--font-size-medium: 2rem;--font-size-base: 1.5rem;--font-size-small: 1rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-bold: 700;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--card-height-desktop: 5.5rem;--card-height-mobile: 4.375rem;--card-gap: 1rem;--border-radius: .25rem;--avatar-size: 4.5rem;--avatar-size-mobile: 3.75rem;--transition-fast: .15s ease;--transition-normal: .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-primary);background:var(--color-black);color:var(--color-white);overflow:hidden;font-size:clamp(14px,.9vw + 6px,18px)}button{background:none;border:none;cursor:pointer;font-family:inherit}#app{position:relative;width:100vw;height:100vh;overflow:hidden}#video-container{position:relative;width:100%;height:100%;background:var(--color-black)}#video{width:100%;height:100%;object-fit:contain}.hover-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-normal);pointer-events:none;z-index:5;cursor:pointer}#video-container.controls-active .hover-overlay{opacity:1;pointer-events:auto}#video-container.paused .hover-overlay{opacity:0;pointer-events:none}.pause-shop-icon{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.shop-hover-text{font-size:var(--font-size-xl);font-weight:400;color:var(--color-white);letter-spacing:.8px;text-transform:uppercase;font-family:"SF Movie Poster",var(--font-primary);line-height:1}.play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000006b;z-index:10;pointer-events:auto}.department-bar{position:absolute;top:1.5rem;left:50%;transform:translate(-50%);z-index:11;max-width:90%}.shop-departments-container{display:flex;align-items:center;gap:2rem;background:#0000006b;padding:1rem 2rem;border-radius:1.5rem;box-shadow:0 4px 4px #00000040}.shop-title-paused{font-size:var(--font-size-large);font-weight:var(--font-weight-bold);color:var(--color-white);letter-spacing:.8px;text-transform:uppercase;font-family:"SF Movie Poster",var(--font-primary);line-height:1;margin:0;background:transparent;border:none;cursor:pointer;transition:transform var(--transition-fast);padding:0}.shop-title-paused:hover{transform:scale(1.05);color:var(--color-accent-red)}.department-btn{display:flex;flex-direction:column;align-items:center;gap:.375rem;background:transparent;border:none;cursor:pointer;transition:transform var(--transition-fast);min-width:6.25rem}.department-btn:hover{transform:translateY(-4px)}.dept-circle{width:4.5rem;height:4.5rem;border-radius:50%;overflow:hidden;background:var(--color-white);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d}.dept-circle img{width:4.1rem;height:4.1rem;object-fit:cover}.dept-label{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-white);letter-spacing:.8px;font-family:"SF Movie Poster",var(--font-primary);line-height:1;white-space:nowrap}.dept-sublabel{font-size:var(--font-size-small);color:var(--color-white);font-family:var(--font-primary);letter-spacing:.8px;white-space:nowrap}.play-button-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:transparent;border:none;cursor:pointer;z-index:11;transition:transform var(--transition-normal)}.play-button-center:hover{transform:translate(-50%,-50%) scale(1.1)}.qr-code-component{position:absolute;bottom:5rem;left:2.5rem;z-index:11}.item-detail .qr-code-component{bottom:2.5rem;left:auto;right:2.5rem}.qr-code-container{background:var(--color-red);border-radius:1.5rem;padding:1.25rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;box-shadow:0 4px 4px #00000040}.qr-code-img{width:11.25rem;height:11.25rem;object-fit:contain}.qr-code-text{display:flex;flex-direction:column;align-items:center;gap:.25rem}.qr-scene-text{font-family:var(--font-primary);font-size:var(--font-size-small);font-weight:var(--font-weight-bold);color:var(--color-white);letter-spacing:.8px;margin:0;white-space:nowrap}.qr-subtitle{font-family:var(--font-primary);font-size:.875rem;font-weight:var(--font-weight-regular);color:var(--color-white);letter-spacing:.8px;margin:0;white-space:nowrap}.custom-controls{position:absolute;bottom:0;left:0;width:100%;padding:var(--spacing-md) var(--spacing-xl);background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 70%,transparent 100%);z-index:12;opacity:0;transition:opacity var(--transition-normal)}#video-container.paused .custom-controls,#video-container.controls-active .custom-controls{opacity:1}.controls-top{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:nowrap;margin-bottom:var(--spacing-xs)}.fullscreen-btn{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.25rem;opacity:.8;transition:opacity .2s}.fullscreen-btn:hover{opacity:1}.time-display{font-size:var(--font-size-base);color:var(--color-white);font-weight:var(--font-weight-normal);min-width:3.75rem;font-family:var(--font-primary)}.progress-bar-container{flex:1;height:4px;position:relative;cursor:pointer;display:flex;align-items:center}.progress-bar-bg{position:absolute;width:100%;height:4px;background:#444;border-radius:0}.progress-bar-played{position:absolute;height:4px;background:#fff;border-radius:0;z-index:1;transition:width .1s linear}.progress-handle{position:absolute;width:16px;height:16px;background:var(--color-accent-red);border-radius:50%;z-index:2;transform:translate(-50%);box-shadow:0 2px 4px #0000004d;transition:left .1s linear}.scene-info-bar{text-align:center;font-size:var(--font-size-base);color:var(--color-white);letter-spacing:.8px;font-family:var(--font-primary)}.shopping-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-black);padding:var(--spacing-lg) var(--spacing-xl);z-index:20;transition:opacity var(--transition-normal);display:flex;flex-direction:column}.shopping-overlay.hidden{opacity:0;pointer-events:none}.close-overlay-btn{position:absolute;top:var(--spacing-md);right:var(--spacing-md);z-index:21;padding:var(--spacing-xs);background:transparent;border:none;cursor:pointer;transition:transform var(--transition-fast)}.close-overlay-btn:hover{transform:scale(1.1)}.overlay-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.header-left{display:flex;align-items:center;gap:var(--spacing-sm)}.shop-title{font-size:var(--font-size-large);font-weight:var(--font-weight-bold);letter-spacing:.8px;line-height:1}.gatsby-logo{display:flex;align-items:center}.gatsby-logo-img{height:2.5rem;width:7.3rem;object-fit:contain}.logo-text{font-size:var(--font-size-large);font-weight:var(--font-weight-bold);letter-spacing:2.8px;color:var(--color-gray-light)}.scene-info{font-size:var(--font-size-small);color:var(--color-gray-medium);letter-spacing:.8px}.scene-number{color:var(--color-accent-red);font-weight:var(--font-weight-bold)}.tabs{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-sm)}.tab-button{font-size:var(--font-size-medium);font-weight:var(--font-weight-bold);letter-spacing:2.8px;color:var(--color-gray-light);padding:var(--spacing-xs) 0;transition:color var(--transition-fast)}.tab-button:hover{color:var(--color-white)}.tab-button.active{color:var(--color-accent-red)}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:var(--spacing-sm);max-height:22rem;overflow-y:auto;padding-right:var(--spacing-sm)}.cards-container::-webkit-scrollbar{width:.5rem}.cards-container::-webkit-scrollbar-track{background:var(--color-gray-dark)}.cards-container::-webkit-scrollbar-thumb{background:var(--color-gray-medium);border-radius:.25rem}.cards-container::-webkit-scrollbar-thumb:hover{background:var(--color-gray-light)}.card{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--color-gray-dark);border:2px solid var(--color-border);padding:var(--spacing-sm);height:var(--card-height-desktop);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-fast);position:relative}.card:hover{background:#343434e6;border-color:var(--color-white);transform:translateY(-2px)}.card.viewed{opacity:.6}.card.selected{border:3px solid var(--color-white)}.card-avatar{flex-shrink:0;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;overflow:hidden;border:2px solid var(--color-white);background:var(--color-gray-dark)}.card-avatar img{width:100%;height:100%;object-fit:cover}.card-info{flex:1;min-width:0}.card-character{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);color:var(--color-white);margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-look{font-size:var(--font-size-small);color:var(--color-gray-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-external-icon{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);width:1.25rem;height:1.25rem}.item-detail{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:2000;animation:fadeIn .3s ease-out;flex-direction:column}.item-detail.visible{display:flex}.item-detail.hidden{display:none}.detail-header-top{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl) var(--spacing-sm) var(--spacing-xl)}.detail-header-top .header-left{display:flex;align-items:center;gap:var(--spacing-sm)}.detail-header-top .shop-title{font-family:SF Movie Poster,sans-serif;font-size:var(--font-size-large);font-weight:700;letter-spacing:.8108px;margin:0;text-transform:uppercase}.detail-header-top .gatsby-logo{display:flex;align-items:center}.detail-header-top .gatsby-logo-img{height:2.5rem;width:7.3rem;object-fit:contain}.detail-header-top .scene-info{font-family:Eurostile Next Pro,sans-serif;font-size:var(--font-size-small);color:#848383;letter-spacing:.8108px;margin:0}.detail-header-top .scene-number{color:#e40000;font-weight:700}.detail-tabs{display:flex;gap:var(--spacing-sm);padding:0 var(--spacing-xl) var(--spacing-md) var(--spacing-xl);border-bottom:1px solid rgba(132,131,131,.3)}.detail-tab{font-family:SF Movie Poster,sans-serif;font-size:var(--font-size-medium);color:#b2b2b2;letter-spacing:2.81px;cursor:pointer;transition:color .2s}.detail-tab:hover{color:#fff}.detail-main-content{display:flex;gap:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-lg) var(--spacing-xl);flex:1;overflow:hidden;align-items:flex-start;max-height:calc(100vh - 10rem)}.detail-image-container{position:relative;flex-shrink:0;margin:0;padding:0}.detail-image-frame{width:22rem;height:auto;aspect-ratio:5 / 8;border:.25rem solid white;overflow:hidden;box-shadow:0 4px 4px #00000040;margin:0;padding:0}.detail-image-frame img{width:100%;height:100%;object-fit:cover;display:block;margin:0;padding:0}.detail-content-area{flex:1;display:flex;flex-direction:column;gap:var(--spacing-md);overflow-y:auto;padding-right:15rem;padding-bottom:var(--spacing-lg);max-width:none;max-height:100%}.detail-character-title{font-family:Eurostile Next Pro,sans-serif;font-size:var(--font-size-medium);font-weight:700;color:#848383;letter-spacing:.8108px;margin:0;line-height:1.24}.detail-look-line{font-family:Eurostile Next Pro,sans-serif;font-size:var(--font-size-base);letter-spacing:.8108px;margin:0;line-height:1.24}.detail-look-line .label-gray{color:#848383;font-weight:400}.detail-look-line span:last-child{font-weight:300;color:#fff}.detail-description-text{font-family:Eurostile Next Pro,sans-serif;font-size:var(--font-size-small);font-weight:300;color:#fff;letter-spacing:.8108px;line-height:1.6;flex:1}.detail-description-text p{margin-bottom:var(--spacing-sm)}.detail-designer-line{font-family:Eurostile Next Pro,sans-serif;font-size:var(--font-size-base);letter-spacing:.8108px;margin:auto 0 0;line-height:1.24}.detail-designer-line .label-gray{color:#848383;font-weight:400}.detail-designer-line span:last-child{font-weight:300;color:#fff}.detail-close-play{position:absolute;top:6vw;right:6vw;background:none;border:none;cursor:pointer;padding:0;transition:transform .2s,opacity .2s;opacity:.8}.detail-close-play:hover{transform:scale(1.1);opacity:1}.detail-close-play svg{width:6.46vw;height:6.46vw}.hidden{display:none!important}@media (max-width: 600px){.custom-controls{padding:var(--spacing-sm)}.time-display{font-size:.875rem;min-width:2.8rem}.scene-info-bar{font-size:.75rem}.shop-hover-text{font-size:3.75rem}.pause-shop-icon svg{width:7.5rem;height:7.5rem}.department-bar{top:1rem;max-width:95%}.shop-departments-container{flex-direction:column;gap:1.25rem;padding:.75rem 1.25rem;max-height:70vh;overflow-y:auto}.shop-title-paused{font-size:2.5rem}.shop-title-paused:hover{transform:scale(1.02)}.department-btn{flex-direction:row;gap:.75rem;width:100%;text-align:left;min-width:auto}.dept-circle{width:3.125rem;height:3.125rem;flex-shrink:0}.dept-circle img{width:2.875rem;height:2.875rem}.dept-label{font-size:1.25rem}.dept-sublabel{font-size:.75rem}.play-button-center svg{width:7.5rem;height:7.5rem}.qr-code-component{bottom:3.75rem;left:1.25rem}.item-detail .qr-code-component{bottom:1.875rem;left:1.25rem;right:auto}.qr-code-container{padding:.75rem .625rem;border-radius:1rem;gap:.5rem}.qr-code-img{width:7.5rem;height:7.5rem}.qr-scene-text{font-size:.75rem}.qr-subtitle{font-size:.6875rem}.hover-overlay,#video-container:hover .hover-overlay{display:none!important}.shopping-overlay{padding:var(--spacing-md) var(--spacing-sm)}.overlay-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}.shop-title{font-size:var(--font-size-medium)}.gatsby-logo-img{height:2.5rem;width:auto}.logo-text{font-size:var(--font-size-medium)}.scene-info{font-size:.875rem}.tabs{gap:var(--spacing-sm);overflow-x:auto;white-space:nowrap}.tab-button{font-size:var(--font-size-base)}.cards-container{grid-template-columns:1fr;max-height:18.75rem}.card{height:var(--card-height-mobile)}.card-avatar{width:var(--avatar-size-mobile);height:var(--avatar-size-mobile)}.card-character{font-size:var(--font-size-small)}.card-look{font-size:.875rem}.detail-header-top{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-sm) var(--spacing-lg);flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.detail-header-top .header-left{gap:var(--spacing-sm)}.detail-header-top .shop-title{font-size:var(--font-size-large)}.detail-header-top .gatsby-logo-img{height:2.5rem;width:7rem}.detail-header-top .scene-info{font-size:var(--font-size-small)}.detail-tabs{padding:0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);gap:var(--spacing-sm);overflow-x:auto;scrollbar-width:none}.detail-tabs::-webkit-scrollbar{display:none}.detail-tab{font-size:var(--font-size-base);white-space:nowrap}.detail-main-content{flex-direction:column;padding:var(--spacing-md) var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);gap:var(--spacing-lg);overflow-y:auto;max-height:calc(100vh - 15rem)}.detail-image-frame{width:100%;height:auto;aspect-ratio:5 / 8;border:2px solid white}.detail-content-area{padding-right:0;padding-bottom:var(--spacing-md);gap:var(--spacing-md);max-width:100%}.detail-character-title{font-size:var(--font-size-medium)}.detail-look-line{font-size:var(--font-size-base)}.detail-description-text{font-size:var(--font-size-small);line-height:1.5}.detail-description-text p{margin-bottom:var(--spacing-sm)}.detail-designer-line{font-size:var(--font-size-base)}.detail-close-play{top:var(--spacing-lg);right:var(--spacing-lg)}.detail-close-play svg{width:4rem;height:4rem}}