/* Site styles (consolidated from duplicated inline <style> blocks in index.html; order preserved) */
        :root {
            --black: #000;
            --dark-gray: #333;
            --white: #ffffff;
            --background-color: #0d0d0d;
            --text-color: #f0f0f0;
            --highlight-color: #0074d9;
            --focus-color: #0099ff;
            --animation-speed: 1s;
            --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
            --smooth-ease: cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: 'Gotham', sans-serif;
            line-height: 1.6;
            font-size: 16px;
            scroll-behavior: smooth;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow-x: hidden;
            transition: background-color 0.5s var(--smooth-ease);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --background-color: #1a1a1a;
                --text-color: #e6e6e6;
                --highlight-color: #0096ff;
            }
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px;
        }

        .intro {
            text-align: center;
            padding: 30px 0 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .profile {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--highlight-color);
            box-shadow: 0 0 10px rgba(0, 116, 217, 0.3);
            transition: all var(--animation-speed) var(--smooth-ease), box-shadow 0.3s var(--smooth-ease);
            cursor: pointer;
            animation: pulse 1.729s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            will-change: transform, box-shadow;
        }

        @keyframes pulse {
            0% { 
                transform: scale(1); 
                box-shadow: 0 0 10px rgba(0, 116, 217, 0.3); 
            }
            50% { 
                transform: scale(1.03); 
                box-shadow: 0 0 15px rgba(0, 116, 217, 0.5); 
            }
            100% { 
                transform: scale(1); 
                box-shadow: 0 0 10px rgba(0, 116, 217, 0.3); 
            }
        }

        .profile.pulse-stopped {
            animation: none;
            transform: scale(1);
            box-shadow: 0 0 10px rgba(0, 116, 217, 0.3);
        }

        .profile:hover {
            box-shadow: 0 0 20px rgba(0, 116, 217, 0.6);
            transform: scale(1.05);
        }

        .intro-text, .contact-info, .theme-switcher {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity 1.2s var(--smooth-ease), max-height 1.7s var(--smooth-ease);
        }

        .visible {
            opacity: 1;
            max-height: 1000px;
        }

        .timeline {
            position: relative;
            padding-left: 30px;
            border-left: 2px solid var(--highlight-color);
            transition: border-color 0.3s var(--smooth-ease);
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 2.5s var(--smooth-ease), opacity 1.5s var(--smooth-ease);
        }

        .timeline.active {
            max-height: 5000vh;
            opacity: 1;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: -2px;
            top: 0;
            height: 100%;
            width: 2px;
            background: var(--highlight-color);
            box-shadow: 0 0 15px var(--highlight-color);
            opacity: 0.5;
        }

        .timeline-item {
            position: relative;
            padding: 30px 0 30px 30px;
            border-left: none;
            transition: all 0.5s var(--smooth-ease);
            margin-bottom: 20px;
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), 
                        opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .timeline-item.expanded {
            transform: translateX(5px);
        }

        .timeline-item .expandable {
            overflow: hidden;
            max-height: 5000px;
            opacity: 1;
            transition: all 0.5s var(--smooth-ease);
            margin: 0;
            padding: 0 20px;
            margin-top: 20px;
        }

        .timeline-item .expandable.expanded {
            max-height: 5000px;
            opacity: 1;
            margin-top: 20px;
        }

        .timeline-item:hover {
            transform: none;
        }

        .timeline-item h4 {
            margin: 0;
            font-size: 1.1em;
            font-weight: 500;
            line-height: 1.4;
            color: var(--text-color);
            display: flex;
            align-items: baseline;
            gap: 15px;
            opacity: 0.66;
            transition: all 0.3s var(--smooth-ease);
        }

        .timeline-item:hover h4,
        .timeline-item.expanded h4 {
            opacity: 1;
            color: var(--white);
        }

        .timeline-item h4 .date {
            color: var(--text-color);
            font-weight: 400;
            font-size: 0.85em;
            opacity: 0.6;
            transition: all 0.3s var(--smooth-ease);
            flex-shrink: 0;
        }

        .timeline-item:hover h4 .date,
        .timeline-item.expanded h4 .date {
            opacity: 0.8;
        }

        .timeline-item p {
            margin: 8px 0;
            line-height: 1.6;
            font-size: 0.95em;
            max-width: 680px;  /* Limit line length for better readability */
        }

        .expandable {
            max-height: 5000px;
            overflow: hidden;
            transition: max-height 0.5s var(--smooth-ease);
            opacity: 1;
            transform: translateY(0);
            margin-top: 10px;
        }

        .timeline-item.expanded .expandable {
            max-height: 5000px;  /* Increased to accommodate gallery */
            opacity: 1;
            transform: translateY(0);
        }

        .contact-links {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 25px 0;
            font-size: 0.9em;
            opacity: 0.9;
            font-weight: 400;
            letter-spacing: 0.3px;
            transition: all 0.8s var(--smooth-ease);
            text-align: center;
            align-items: center;
            position: relative;
            width: 100%;
            padding-bottom: 40px;
        }

        .contact-links a {
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.3s var(--smooth-ease);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
            opacity: 0.8;
            outline: none;
        }

        .contact-links a:hover {
            opacity: 1;
            color: var(--highlight-color);
            transform: translateY(-1px);
        }

        .apple-id-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .apple-id-services {
            display: flex;
            gap: 12px;
            opacity: 0;
            transform: translateY(5px);
            transition: all 0.3s var(--smooth-ease);
            padding: 8px 16px;
            border-radius: 20px;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
        }

        .apple-id-container:hover .apple-id-services {
            opacity: 1;
            transform: translateY(0);
        }

        .apple-id-services a {
            padding: 0;
            font-size: 0.85em;
            opacity: 0.7;
        }

        .apple-id-services a:hover {
            opacity: 1;
            transform: none;
        }

        .watermark {
            margin-top: 20px;
            font-size: 0.8em;
            opacity: 0.6;
            letter-spacing: 0.5px;
        }

        .timeline-wrapper {
            position: relative;
        }

        .expand-all-button {
            position: absolute;
            left: -20px;
            top: 0;
            bottom: 0;
            width: 5px;
            background: rgba(0, 116, 217, 0.1);
            border: none;
            cursor: pointer;
            transition: all 0.3s var(--smooth-ease);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px 0 0 2px;
        }

        .expand-all-button:hover {
            width: 10px;
            background: rgba(0, 116, 217, 0.3);
        }

        .expand-all-button.active {
            width: 10px;
            background: rgba(0, 116, 217, 0.3);
        }
        .expand-all-button i {
            display: none;
        }

        .gallery-expand-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 20px;
            background: var(--highlight-color);
            border: none;
            color: var(--white);
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s var(--smooth-ease);
            margin-top: 15px;
            opacity: 0.8;
        }

        .gallery-expand-button:hover {
            opacity: 1;
            transform: translateY(-1px);
        }

        .gallery-expanded .gallery-expand-button {
            background: var(--dark-gray);
        }

        /* Add smooth scroll behavior */
        html {
            scroll-behavior: smooth;
        }

        .timeline-age {
            color: var(--text-color);
            opacity: 0.6;
            font-size: 0.85em;
            margin: 4px 0;
            font-weight: 400;
            transition: all 0.3s var(--smooth-ease);
        }

        .timeline-item:hover .timeline-age,
        .timeline-item.expanded .timeline-age {
            opacity: 0.8;
        }

        .duplicate-highlight {
            border: 2px solid #ff6b6b;
        }

        .duplicate-count {
            position: absolute;
            top: 4px;
            right: 4px;
            background: #ff6b6b;
            color: white;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.7em;
            z-index: 1;
        }

        .cybermask-gallery {
            display: grid;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 0;
            margin: 0;
            max-width: 100%;
            position: relative;
            background: var(--background-color);
            padding: 0;
        }

        .cybermask-gallery-wrapper {
            position: relative;
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 4px;
            background-color: var(--background-color);
            display: grid;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 0;
            margin: 20px 0;
            width: 62.5%;
            margin-left: 0;
            margin-right: auto;
            position: relative;
            background: var(--background-color);
            padding: 0;
        }

        .cybermask-gallery img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background: var(--background-color);
            transition: object-position 0.3s ease;
        }

        .cybermask-gallery img:hover {
            transform: none;
            z-index: 0;
            box-shadow: none;
        }

        .gallery-controls {
            display: none; /* Hide controls since we're showing all images */
        }

        .image-number {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 2;
            transition: opacity 0.3s ease;
        }

        /* PDF Modal Styles */
        .pdf-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            overflow: hidden;
        }

        .pdf-modal.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pdf-container {
            width: 90%;
            height: 90%;
            background: white;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        #pdf-canvas {
            background: white;
            margin: auto;
            display: block;
            max-width: 100%;
            max-height: calc(100% - 50px);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .pdf-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            background: #f5f5f5;
            border-top: 1px solid #ddd;
            margin-top: auto;
            height: 40px;
        }

        .pdf-controls button {
            background: rgba(0, 58, 108, 0.1);
            border: 1px solid rgba(var(--highlight-color-rgb), 0.1);
            padding: 5px 15px;
            margin: 0 10px;
            cursor: pointer;
            border-radius: 0;
            transition: all 0.3s var(--smooth-ease);
        }

        .pdf-controls button:hover {
            background: rgba(0, 58, 108, 0.2);
        }

        .pdf-controls span {
            margin: 0 15px;
            font-size: 14px;
        }

        .pdf-viewer {
            width: 100%;
            height: 100%;
            border: none;
        }

        .close-pdf {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            z-index: 1001;
        }

        .close-pdf:hover {
            background: rgba(0, 0, 0, 0.9);
        }

        /* Event content styles */
        .event-content {
            display: none;
            padding: 20px;
            background: rgba(var(--highlight-color-rgb), 0.03);
            border-radius: 8px;
            margin: 10px 0;
        }

        .event-content p {
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .event-content .photo-gallery {
            margin-top: 20px;
        }

        /* Ensure event content is visible when shown */
        .event-content[style*="display: block"] {
            display: block !important;
            opacity: 1;
            visibility: visible;
        }

        /* Content display container */
        .content-display {
            margin-top: 20px;
            padding: 20px;
            border-radius: 8px;
            background: rgba(var(--highlight-color-rgb), 0.03);
        }

        /* Clickable event hover styles - simplified */
        .clickable-event {
            transition: text-shadow 0.3s var(--smooth-ease);
            cursor: pointer;
            position: relative;
            padding: 8px 0;
            display: block;
        }

        .clickable-event:hover {
            text-shadow: 0 0 8px currentColor;
        }

        /* General project gallery styles */
        .project-gallery-item {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            background: var(--background-color);
        }

        .project-gallery-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background: var(--background-color);
            transition: object-position 0.3s ease;
        }

        .project-gallery-image:hover {
            transform: none;
            z-index: 0;
            box-shadow: none;
        }

        /* Project Tabs */
        .project-tabs {
            display: flex;
            gap: 10px;
            margin: 20px 0;
            border-bottom: 1px solid rgba(var(--highlight-color-rgb), 0.2);
            padding-bottom: 10px;
        }

        .tab-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }

        .tab-button {
            background: none;
            border: none;
            color: var(--text-color);
            padding: 8px 16px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s var(--smooth-ease);
            opacity: 0.7;
        }

        .tab-button:hover {
            background: rgba(var(--highlight-color-rgb), 0.1);
            opacity: 1;
        }

        .tab-button.active {
            background: rgba(var(--highlight-color-rgb), 0.15);
            color: var(--highlight-color);
            opacity: 1;
        }

        .tab-content {
            display: none;
            margin-top: 20px;
        }

        .tab-content.active {
            display: block;
        }

        .tab-content iframe {
            border: none;
            border-radius: 8px;
            background: rgba(var(--highlight-color-rgb), 0.05);
        }

        .download-link {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 16px;
            border-radius: 4px;
            background: rgba(var(--highlight-color-rgb), 0.1);
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.3s var(--smooth-ease);
        }

        .download-link:hover {
            background: rgba(var(--highlight-color-rgb), 0.2);
            color: var(--highlight-color);
        }

        /* Link styling */
        .event-content a {
            color: var(--text-color);
            text-decoration: none;
            position: relative;
            transition: color 0.3s var(--smooth-ease);
        }

        .event-content a::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: var(--highlight-color);
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.3s var(--smooth-ease);
            opacity: 0.7;
        }

        .event-content a:hover {
            color: var(--highlight-color);
        }

        .event-content a:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        /* Profile image interaction */
        .profile-image {
            cursor: pointer;
            transition: transform 0.3s var(--smooth-ease);
        }

        .profile-image:hover {
            transform: scale(1.05);
        }

        /* Nested tabs for portfolio versions */
        .portfolio-version-tabs {
            display: flex;
            gap: 8px;
            margin: 15px 0;
            padding: 8px;
            background: rgba(var(--highlight-color-rgb), 0.05);
            border-radius: 4px;
        }

        .portfolio-version-tabs .tab-button {
            font-size: 0.9em;
            padding: 6px 12px;
        }

        #thesis-portfolio .tab-content {
            margin-top: 0;
        }

        /* Thesis Project Styles */
        .development-timeline {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .timeline-phase {
            background: rgba(var(--highlight-color-rgb), 0.03);
            border-radius: 8px;
            padding: 20px;
            transition: background-color 0.3s var(--smooth-ease);
        }

        .timeline-phase:hover {
            background: rgba(var(--highlight-color-rgb), 0.05);
        }

        .timeline-phase h3 {
            color: var(--highlight-color);
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        .timeline-phase p {
            opacity: 0.8;
            margin-bottom: 15px;
            font-size: 0.95em;
            line-height: 1.5;
        }

        .portfolio-versions {
            display: grid;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 20px;
            margin-bottom: 20px;
        }

        .version-card {
            background: rgba(var(--highlight-color-rgb), 0.05);
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s var(--smooth-ease);
            border: 1px solid transparent;
        }

        .version-card:hover {
            background: rgba(var(--highlight-color-rgb), 0.08);
            transform: translateY(-2px);
        }

        .version-card.active {
            border-color: var(--highlight-color);
            background: rgba(var(--highlight-color-rgb), 0.1);
        }

        .version-card h4 {
            color: var(--highlight-color);
            margin: 0 0 5px 0;
            font-size: 1.1em;
        }

        .version-card p {
            font-size: 0.9em;
            opacity: 0.7;
            margin: 0 0 10px 0;
        }

        .card-preview {
            border-radius: 4px;
            overflow: hidden;
            background: rgba(var(--highlight-color-rgb), 0.03);
        }

        .card-preview iframe {
            pointer-events: none;
            border: none;
        }

        .portfolio-full-view {
            display: none;
            margin-top: 20px;
            background: rgba(var(--highlight-color-rgb), 0.03);
            padding: 20px;
            border-radius: 8px;
            border: 1px solid rgba(var(--highlight-color-rgb), 0.1);
        }

        .portfolio-full-view iframe {
            border: none;
            border-radius: 4px;
            background: rgba(var(--highlight-color-rgb), 0.05);
            margin-bottom: 10px;
        }

        .final-deliverables {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .deliverable-section {
            background: rgba(var(--highlight-color-rgb), 0.03);
            border-radius: 8px;
            padding: 20px;
            transition: background-color 0.3s var(--smooth-ease);
        }

        .deliverable-section:hover {
            background: rgba(var(--highlight-color-rgb), 0.05);
        }

        .deliverable-section h3 {
            color: var(--highlight-color);
            margin-bottom: 5px;
            font-size: 1.2em;
        }

        .deliverable-section p {
            margin-bottom: 15px;
            opacity: 0.8;
            font-size: 0.95em;
            line-height: 1.5;
        }

        .download-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            padding: 8px 16px;
            border-radius: 4px;
            background: rgba(var(--highlight-color-rgb), 0.1);
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.3s var(--smooth-ease);
            font-size: 0.9em;
        }

        .download-link::before {
            content: '↗';
            font-size: 1.1em;
            opacity: 0.7;
        }

        .download-link:hover {
            background: rgba(var(--highlight-color-rgb), 0.15);
            color: var(--highlight-color);
            transform: translateY(-1px);
        }

        .cybermask-slideshow-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .cybermask-slideshow-container .cybermask-gallery-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Remove transition for instant image change */
        }
        .gallery-section-header {
            font-size: 1.2em;
            margin: 20px 0 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid rgba(var(--highlight-color-rgb), 0.3);
            color: var(--highlight-color);
            grid-column: 1 / -1;
        }
        .gallery-section {
            display: contents;
        }
        .cybermask-gallery-wrapper {
            position: relative;
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 4px;
            background-color: var(--background-color);
            display: grid;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 0;
            margin: 20px 0;
            width: 62.5%;
            margin-left: 0;
            margin-right: auto;
            position: relative;
            background: var(--background-color);
            padding: 0;
        }
        .cybermask-gallery img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background: var(--background-color);
            transition: transform 0.3s ease, filter 0.3s ease;
        }
        .image-number {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 2;
            transition: opacity 0.3s ease;
        }
        .cybermask-gallery-wrapper:hover .image-number {
            opacity: 0;
        }
        /* Loading indicator */
        .loading-indicator {
            text-align: center;
            padding: 20px;
            color: var(--text-color);
            font-style: italic;
        }
        /* Error message */
        .error-message {
            text-align: center;
            padding: 20px;
            color: #ff5555;
            font-style: italic;
        }
        /* Image Modal */
        .image-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.9);
            transition: all 0.3s ease;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .modal-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .modal-content img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
            filter: saturate(1) !important;
        }
        .image-title {
            color: white;
            margin-top: 10px;
            text-align: center;
            max-width: 100%;
            word-break: break-word;
        }
        .close-button {
            position: absolute;
            top: -30px;
            right: -30px;
            color: white;
            font-size: 30px;
            cursor: pointer;
            z-index: 1001;
        }

    

        /* Password input styling */
        .password-container {
            display: block;
            margin: 10px auto;
            max-width: 300px;
            text-align: center;
        }
        .timeline-password {
            padding: 8px 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-family: 'Roboto Mono', monospace;
            width: 100%;
            max-width: 300px;
            text-align: center;
            transition: all 0.3s var(--smooth-ease);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .timeline-password:focus {
            border-color: rgba(0, 116, 217, 0.5);
            box-shadow: 0 0 0 2px rgba(0, 116, 217, 0.2);
            outline: none;
        }
        .password-container.visible {
            display: block;
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        /* Add subtle indicator for password field */
        .timeline-password::placeholder {
            color: rgba(255, 255, 255, 0.4);
            transition: all 0.3s ease;
        }
        .timeline-password:focus::placeholder {
            opacity: 0.7;
        }
        /* Improve timeline header appearance */
        .timeline-header {
            position: relative;
            transition: color 0.3s var(--smooth-ease);
        }
        .timeline-item.expanded .timeline-header {
            color: var(--highlight-color);
        }
        /* Ensure all galleries maintain 5-column layout */
        #teslaNorthHollywoodGallery,
        #gigaAustinGallery,
        #cybermaskGallery,
        #uscGallery,
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 10px;
            width: 62.5%;
        }
    

        /* Gallery Container Styles */
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 10px;
            margin: 20px 0;
            width: 62.5%;
            margin-left: 0;
            margin-right: auto;
            justify-content: left;
        }

        .gallery-item {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            background: var(--background-color);
            overflow: hidden;
            margin: 0;
        }

        .gallery-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: none;
            transition: filter 0.3s ease;
        }

        .gallery-item:hover img {
            filter: saturate(1);
        }

        .gallery-item .image-number {
            position: absolute;
            bottom: 5px;
            right: 10px;
            color: black;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            opacity: 1;
            transition: opacity 0.3s ease;
            background-color: transparent;
        }

        .gallery-item:hover .image-number {
            opacity: 0;
        }
    

        /* USC Architecture Folder Styles */
        .usc-folders {
            display: flex;
            flex-wrap: wrap;
            gap: 0px;
            margin: 20px 0 0 0;
        }
        .usc-folder {
            background-color: rgba(0, 58, 108, 0.1);
            border: 1px solid rgba(var(--highlight-color-rgb), 0.1);
            border-radius: 0px;
            padding: 10px 15px;
            cursor: pointer;
            transition: all 0.3s var(--smooth-ease);
            font-weight: 500;
            color: var(--text-color);
            position: relative;
            margin: 0;
            height: 38px;
            line-height: 18px;
            box-sizing: border-box;
        }
        .usc-folder:hover {
            background-color: rgba(0, 58, 108, 0.2);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .usc-folder.active {
            background-color: rgba(0, 58, 108, 0.3);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            color: #fff;
        }
        .usc-folder-content {
            margin-top: 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s var(--smooth-ease);
        }
        .usc-folder-content.active {
            max-height: 10000px; /* Increased from 2000px to accommodate all 253 images */
            overflow: visible !important; /* Ensure content isn't cut off */
        }
        .usc-gallery-container {
            display: grid;
            /* Grid template columns will be set by JavaScript */
            gap: 0 !important;
            margin: 20px 0;
            width: 62.5%;
            margin-left: 0;
            margin-right: auto;
            justify-content: left;
            max-height: none !important;
            overflow: visible !important;
        }
        .usc-gallery-item {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            overflow: hidden;
            margin: 0 !important;
            border: none !important;
            cursor: pointer;
        }
        .usc-gallery-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: none;
            transition: filter 0.3s ease;
            border: none !important;
            transform: none !important;
        }
        .usc-gallery-item:hover img {
            filter: saturate(1);
        }
        .usc-gallery-item .image-number {
            position: absolute;
            bottom: 5px;
            left: 10px;
            color: white;
            font-weight: 500;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            background: none;
            padding: 0;
            border-radius: 0;
            border: none;
            outline: none !important;
            box-shadow: none !important;
        }
        .usc-gallery-item:hover .image-number {
            opacity: 0;
        }
    

        /* USC Gallery Styles */
        .usc-gallery-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr) !important;
            width: 62.5%;
            gap: 0 !important;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 0;
            margin-right: auto;
            justify-content: left;
            max-height: none !important;
            overflow: visible !important;
        }
        .usc-gallery-item {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            cursor: pointer;
        }
        .usc-image-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .usc-gallery-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: none;
            transition: filter 0.3s ease;
        }
        .usc-gallery-item:hover .usc-gallery-image {
            filter: saturate(1);
        }
        .usc-gallery-item .image-number {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: transparent;
            color: white;
            padding: 2px 6px;
            font-size: 12px;
            border-radius: 2px;
            z-index: 2;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        }
    

        .scroll-sentinel {
            grid-column: 1 / -1;
            height: 10px;
            width: 100%;
            background: transparent;
        }
    

        .media-type-buttons {
            display: flex;
            gap: 0px;
            margin: 0;
            width: 64.32%; /* 64.64% * 0.995 = 64.32% */
        }
        .media-type-button {
            flex: 1;
            padding: 10px 0;
            cursor: pointer;
            background-color: rgba(0, 58, 108, 0.1); /* Reduced brightness by 50% from rgba(0, 116, 217, 0.1) */
            border: 1px solid rgba(var(--highlight-color-rgb), 0.1);
            border-radius: 0px;
            transition: all 0.3s var(--smooth-ease);
            font-weight: 500;
            color: var(--text-color);
            position: relative;
            margin: 0;
            height: 38px;
            line-height: 18px;
            box-sizing: border-box;
        }
        .media-type-button.jpeg {
            flex: 6; /* Spans 6 columns (5.5 - 3.0) */
        }
        .media-type-button.pdf {
            flex: 7.023; /* Scaled up by 1/3% from 7 (7 * 1.0033 = 7.023) */
        }
        .media-type-button:hover {
            background-color: rgba(0, 58, 108, 0.2);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .media-type-button.active {
            background-color: rgba(0, 58, 108, 0.3);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            color: #fff;
        }
        .pdf-view-button.button-302 {
            width: 34.16%; /* Increased from 32.16% by adding 1% on each side */
            position: relative;
            left: -3%; /* Adjusted to -3% as specified */
            margin-left: 0; /* Reset any margin that might affect positioning */
            margin-top: 0; /* Remove top margin to touch the PDF button */
            background-color: rgba(0, 58, 108, 0.1);
            border: 1px solid rgba(var(--highlight-color-rgb), 0.1);
            border-radius: 0px;
            transition: all 0.3s var(--smooth-ease);
            font-weight: 500;
            color: var(--text-color);
            padding: 10px 0;
            height: 38px; /* Match the exact height of media type buttons */
            line-height: 18px; /* Center text vertically */
            box-sizing: border-box; /* Ensure padding doesn't affect height */
        }
        .pdf-view-button.button-302:hover {
            background-color: rgba(0, 58, 108, 0.2);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    

        /* PDF buttons container styles */
        .pdf-buttons-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
            margin-top: 10px; /* Ensure no gap between media type toggle and PDF buttons */
            width: 100%;
        }
        .pdf-view-button {
            width: 34.16%;
            position: relative;
            left: -3%;
            padding: 10px 0;
            margin: 0; /* Remove top margin */
            background-color: rgba(0, 58, 108, 0.1);
            border: 1px solid rgba(var(--highlight-color-rgb), 0.1);
            border-radius: 0px;
            cursor: pointer;
            transition: all 0.3s var(--smooth-ease);
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-color);
            height: 38px; /* Match the exact height of media type buttons */
            line-height: 18px; /* Center text vertically */
            box-sizing: border-box; /* Ensure padding doesn't affect height */
        }
        .pdf-view-button:hover {
            background-color: rgba(0, 58, 108, 0.2);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    

        /* 800 Broadway PDF buttons styling */
        .broadway-pdf-buttons-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
            margin-top: 10px;
            width: 100%;
        }

        .broadway-pdf-view-button {
            width: 100%;
            padding: 10px 0;
            margin: 0;
            background-color: rgba(0, 58, 108, 0.1);
            border: 1px solid rgba(var(--highlight-color-rgb), 0.1);
            border-radius: 0px;
            cursor: pointer;
            transition: all 0.3s var(--smooth-ease);
            text-align: center;
            color: var(--text-color);
            text-decoration: none;
            display: block;
            box-sizing: border-box;
        }

        .broadway-pdf-view-button:hover {
            background-color: rgba(0, 58, 108, 0.2);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    

        /* 5959 Yonge Street PDF buttons styling */
        .yonge5959-pdf-buttons-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
            margin-top: 10px;
            width: 100%;
        }

        .yonge5959-pdf-view-button {
            width: 100%;
            padding: 10px 0;
            margin: 0;
            background-color: rgba(0, 58, 108, 0.1);
            border: 1px solid rgba(var(--highlight-color-rgb), 0.1);
            border-radius: 0px;
            cursor: pointer;
            transition: all 0.3s var(--smooth-ease);
            text-align: center;
            color: var(--text-color);
            text-decoration: none;
            display: block;
            box-sizing: border-box;
        }

        .yonge5959-pdf-view-button:hover {
            background-color: rgba(0, 58, 108, 0.2);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    

        /* Password input styling */
        .password-container {
            display: block;
            margin: 10px auto;
            max-width: 300px;
            text-align: center;
        }
        .timeline-password {
            padding: 8px 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-family: 'Roboto Mono', monospace;
            width: 100%;
            max-width: 300px;
            text-align: center;
            transition: all 0.3s var(--smooth-ease);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .timeline-password:focus {
            border-color: rgba(0, 116, 217, 0.5);
            box-shadow: 0 0 0 2px rgba(0, 116, 217, 0.2);
            outline: none;
        }
        .password-container.visible {
            display: block;
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        /* Add subtle indicator for password field */
        .timeline-password::placeholder {
            color: rgba(255, 255, 255, 0.4);
            transition: all 0.3s ease;
        }
        .timeline-password:focus::placeholder {
            opacity: 0.7;
        }
        /* Improve timeline header appearance */
        .timeline-header {
            position: relative;
            transition: color 0.3s var(--smooth-ease);
        }
        .timeline-item.expanded .timeline-header {
            color: var(--highlight-color);
        }
        /* Ensure all galleries maintain 5-column layout */
        #teslaNorthHollywoodGallery,
        #gigaAustinGallery,
        #cybermaskGallery,
        #uscGallery,
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 10px;
            width: 62.5%;
        }

        /* Hide resume button on the main site */
        .resume-button {
            display: none !important;
        }
    

/* Accessibility: semantic headings keep the original h3/h4 look */
#profileTitle { font-size: 1.17em; margin-block: 1em; }
.intro-subtitle { font-size: 1em; margin-block: 1.33em; }
/* Visually hidden site nav; appears only when focused with the keyboard */
.sr-nav a { position: absolute; left: -10000px; top: 8px; width: 1px; height: 1px; overflow: hidden; z-index: 10000; }
.sr-nav a:focus { left: 8px; width: auto; height: auto; padding: 8px 12px; background: #0d0d0d; color: #f0f0f0; border: 2px solid #0099ff; border-radius: 4px; }

/* Phones: let timeline photo grids use the full width instead of 62.5% */
@media (max-width: 600px) {
    .timeline .gallery-container,
    .timeline .simple-gallery,
    .timeline [id$="Gallery"] {
        width: 100% !important;
    }
}

/* ---------- Landing refinements (Phase 2) ---------- */
.timeline-password:hover { border-color: rgba(255, 255, 255, 0.22); }
.timeline-password:focus-visible { border-color: rgba(61, 155, 255, 0.7); box-shadow: 0 0 0 3px rgba(61, 155, 255, 0.22); }
.profile:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 4px; }
.password-container.checking .timeline-password { opacity: 0.6; }
.password-status {
  min-height: 1.4em; margin: 8px 0 0; font: 12px/1.4 'Roboto Mono', monospace; color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
}
.password-status:empty { min-height: 0; margin: 0; }
.password-status[data-kind="error"] { color: #ff8a80; }
.password-status[data-kind="ok"] { color: #7fd1a0; }
.password-container.shake { animation: sg-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes sg-shake {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); }
}
body.unlocking .container { opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
body.is-unlocked .password-container { display: none; }
body.is-unlocked .container { animation: sg-fade-in 0.5s ease both; }
@keyframes sg-fade-in { from { opacity: 0; } to { opacity: 1; } }
body.is-unlocked .intro { padding-top: 22px; }