* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    background-color: #1E0F2D;
    background-image: url('./images/squiggle.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 26vh;
    color: #ffffff;
    line-height: 1.6;
    min-height: 100vh;
    scroll-snap-type: y proximity;
    transition: background-image 0.3s ease;
}

body.scrolled {
    background-image: none;
}

/* Text Selection */
::selection {
    background-color: #CEFC00;
    color: #1E102C;
}

::-moz-selection {
    background-color: #CEFC00;
    color: #1E102C;
}

/* Navigation */
.nav {
    position: sticky;
    top: 0;
    padding: 1rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1E0F2D;
    z-index: 1000;
}

.nav-left,
.nav-right {
    display: flex;
    gap: 120px;
    flex: 1;
}

.nav-left {
    justify-content: flex-start;
}

.nav-right {
    justify-content: flex-end;
}

.name-nav {
    font-family: 'Archivo Black', sans-serif;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.13em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.name-nav.visible {
    opacity: 1;
    pointer-events: auto;
}

.nav-link {
    color: #CFBDFF;
    text-decoration: none;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    transition: opacity 0.3s;
}

.nav-link:hover {
    opacity: 0.7;
}

/* Cursor Badge */
.cursor-badge {
    position: fixed;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.cursor-badge img {
    display: block;
    width: 198px;
    height: 59px;
}

.cursor-badge.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    pointer-events: none;
}

/* Main Content */
.main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem 4rem;
}

/* Hero Section */
.hero {
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 140px;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.profile-picture {
    width: 90px;
    height: 90px;
    border-radius: 0;
    object-fit: cover;
    display: block;
    will-change: transform, opacity;
    transition: opacity 0.3s ease;
    border: none;
    outline: none;
}

/* Dots animation container */
.dots-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

.dots-overlay.animation-complete {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.dot {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    will-change: transform, opacity;
    transform-origin: center center;
    margin-left: 0;
    margin-top: 0;
}

/* Profile picture initial state for animation */
.profile-picture.initial-load {
    opacity: 0;
    visibility: hidden;
}

.name {
    font-family: 'Archivo Black', sans-serif;
    font-size: 128px;
    font-weight: 900;
    letter-spacing: -0.13em;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    will-change: font-size, transform, position;
    transition: opacity 0.3s ease;
}

/* Triangle Section */
.triangle-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: max(6rem, calc(2rem + 2rem + env(safe-area-inset-top))) 3rem 4rem 3rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.triangle-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.triangle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


.triangle-label {
    position: absolute;
    color: #ffffff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.triangle-label-top {
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
}

.triangle-label-bottom-left {
    bottom: -2rem;
    left: 0;
}

.triangle-label-bottom-right {
    bottom: -2rem;
    right: 0;
}

.triangle-label-center {
    top: 65%;
    left: 50%;
    transform: translate(-50%, 2rem);
    font-size: .9rem;
}

/* Bio Section */
.bio-section {
    padding: 4rem 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    margin-bottom: 340px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-wrap: wrap;
    /* Break out of main container's max-width constraint */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Add horizontal padding to prevent edge-to-edge on small screens */
    padding-left: 3rem;
    padding-right: 3rem;
    box-sizing: border-box;
}

.bio-container {
    flex: 1;
    min-width: 0;
    max-width: 1104px;
    padding: 150px;
    background-color: #362743;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    /* Ensure containers don't shrink below a reasonable minimum */
    min-width: min(400px, 100%);
    /* Add minimum height to ensure space-between works */
    min-height: 600px;
}

.testimonial-text {
    width: 100%;
    max-width: 800px;
    margin-bottom: 0;
    /* Prevent testimonial-text from growing */
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.read-more {
    color: #CFBDFF;
    font-size: 18px;
}

.bio-text {
    width: 100%;
    margin: 0 auto;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.8;
    color: #E0E0E0;
    margin-bottom: 0;
    text-align: left;
}

.bio-text:not(:last-child) {
    margin-bottom: 1.5rem;
}

.testimonial-attribution {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    /* Remove margin-top: auto since justify-content: space-between handles it */
    margin-top: 7.25rem;
    /* Prevent attribution from growing */
    flex-shrink: 0;
}

.pk-image,
.jaimin-photo {
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 0;
    flex-shrink: 0;
}

.jaimin-photo {
    opacity: 0.5;
}

.pk-image {
    opacity: .7;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    width: 100%;
}

.testimonial-name-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    gap: 1rem;
}

.testimonial-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    flex-shrink: 0;
}

.testimonial-title,
.testimonial-credentials {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #E0E0E0;
}

.testimonial-companies {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #B2B2B2;
    text-align: right;
    flex-shrink: 0;
}

/* Project Sections */
.project {
    margin-bottom: 6rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 2rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.project-title {
    font-family: 'Jost', sans-serif;
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    color: #ffffff;
}

.project-description {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: #ffffff;
    max-width: 800px;
}

.project-tags {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.project-tags:has(.scroll-arrows) {
    justify-content: space-between;
    align-items: center;
}

.tags-wrapper {
    display: flex;
    gap: 0.75rem;
    flex: 1;
}

.scroll-arrows {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.scroll-arrow {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.33);
    border-radius: 4px;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    width: 40px;
    height: 40px;
}

.scroll-arrow:hover {
    opacity: 0.7;
    background-color: rgba(255, 255, 255, 0.05);
}

.scroll-arrow:active {
    opacity: 0.5;
}

.scroll-arrow img {
    display: block;
    width: 24px;
    height: 24px;
}

.scroll-arrow:disabled {
    opacity: 0.33;
    cursor: not-allowed;
}

.scroll-arrow:disabled:hover {
    opacity: 0.33;
    background-color: transparent;
}

.tag {
    background-color: #2d2d2d;
    color: #ffffff;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 400;
    display: inline-block;
}

/* Video Container */
.video-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    /* margin-top: 2rem; */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background-color: #000;
}

/* Nerdy project video-container specific styling */
/* .project:has(#nerdy-video) .video-container {
    margin-bottom: 18.1875rem;
} */

.video-placeholder-image {
    width: 100%;
    height: auto;
    display: block;
}

.video-player-element {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.video-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-play-button.hidden {
    opacity: 0;
    pointer-events: none;
}

.video-container.playing .video-play-button {
    opacity: 0;
    pointer-events: none;
}

/* Iframe Wrapper */
.iframe-wrapper {
    position: relative;
    display: inline-block;
}

/* Starburst Badge */
.starburst-badge {
    position: absolute;
    left: -100px;
    top: 200px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0;
    pointer-events: none;
}

.starburst-icon {
    width: 209px;
    height: 209px;
    display: block;
}

.starburst-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: 'Archivo Black', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: #1E102C;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
    width: 140px;
}

/* Hide mobile starburst on larger screens */
.mobile-starburst-badge {
    display: none;
}

/* Audio Player */
.audio-player {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(30, 15, 45, 0.95);
    border: 1px solid rgba(207, 189, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.audio-play-button,
.audio-reset-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: opacity 0.2s ease;
}

.audio-play-button:hover:not(:disabled),
.audio-reset-button:hover:not(:disabled) {
    opacity: 0.7;
}

.audio-reset-button:disabled {
    cursor: default;
}

.audio-reset-button:disabled img {
    filter: brightness(0) invert(0.5);
    opacity: 0.6;
}

.audio-reset-button:not(:disabled) img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.audio-play-button .play-icon,
.audio-play-button .pause-icon {
    width: 20px;
    height: 20px;
}

.audio-reset-button img {
    width: 20px;
    height: 20px;
    display: block;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.audio-play-button.playing .play-icon {
    display: none;
}

.audio-play-button.playing .pause-icon {
    display: block !important;
}

.audio-play-button:not(.playing) .pause-icon {
    display: none !important;
}

.audio-time {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #ffffff;
    font-weight: 400;
    white-space: nowrap;
}

.login-tooltip {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    pointer-events: none;
}

.login-tooltip.hidden {
    display: none;
}

.tooltip-content {
    background-color: rgba(30, 15, 45, 0.95);
    border: 1px solid rgba(207, 189, 255, 0.3);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    position: relative;
    pointer-events: auto;
}

.tooltip-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s ease;
    opacity: 0.7;
}

.tooltip-close:hover {
    opacity: 1;
}

.tooltip-close svg {
    width: 16px;
    height: 16px;
}

.tooltip-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.75rem;
    margin-right: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tooltip-credential {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
}

.tooltip-credential:last-child {
    margin-bottom: 0;
}

.credential-label {
    color: #CFBDFF;
    font-weight: 500;
    min-width: 70px;
}

.credential-value {
    color: #ffffff;
    font-weight: 400;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background-color: rgba(207, 189, 255, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

/* Screenshot Containers */
.screenshot-container {
    margin-top: 2rem;
}

.screenshot {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 100%;
    height: auto;
    display: block;
}

.horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 300px;
    padding-left: 3rem;
    padding-right: 3rem;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.screenshot-scroll-wrapper {
    display: flex;
    gap: 2rem;
    width: max-content;
    padding-left: max(3rem, calc((100vw - 1200px) / 2));
    padding-right: max(3rem, calc((100vw - 1200px) / 2));
}

.screenshot-scroll-wrapper .screenshot {
    width: auto;
    max-width: none;
    min-width: 0;
    flex-shrink: 0;
    height: auto;
    display: block;
}

/* Dropbox Replay Interface */
.dropbox-replay .app-interface {
    display: flex;
    background-color: #1a1a1a;
    min-height: 600px;
}


.screenshot-scroll-wrapper img[src="images/pull-request.png"] {
    width: auto;
    height: 804.17;
}


.screenshot-scroll-wrapper img[src="images/figma-link.png"],
.screenshot-scroll-wrapper a[href*="figma.com"] img[src="images/figma-link.png"] {
    width: auto;
    height: auto;
    max-height: 667px;
    max-width: 1061.2px; /* Maintains 1282:805 aspect ratio at max-height 667px */
    object-fit: contain;
}

/* Star dust animation for Figma links */
.figma-link,
.figma-link-large {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.figma-link::before,
.figma-link::after,
.figma-link-large::before,
.figma-link-large::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(207, 189, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.figma-link:hover::before,
.figma-link:hover::after,
.figma-link-large:hover::before,
.figma-link-large:hover::after {
    opacity: 1;
    animation: starDustSwirl 4s ease-in-out infinite;
}

/* Create multiple star particles spread across the entire element using box-shadow */
.figma-link::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        -80px -40px 0 0 rgba(207, 189, 255, 0.6),
        60px -50px 0 0 rgba(207, 189, 255, 0.7),
        -50px 70px 0 0 rgba(207, 189, 255, 0.5),
        90px 30px 0 0 rgba(207, 189, 255, 0.6),
        -30px -80px 0 0 rgba(207, 189, 255, 0.5),
        40px 80px 0 0 rgba(207, 189, 255, 0.6),
        -70px 20px 0 0 rgba(207, 189, 255, 0.5),
        20px -60px 0 0 rgba(207, 189, 255, 0.6);
    animation-delay: 0s;
}

.figma-link::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        70px -30px 0 0 rgba(207, 189, 255, 0.6),
        -60px -70px 0 0 rgba(207, 189, 255, 0.7),
        50px 60px 0 0 rgba(207, 189, 255, 0.5),
        -90px 40px 0 0 rgba(207, 189, 255, 0.6),
        30px 90px 0 0 rgba(207, 189, 255, 0.5),
        -40px -50px 0 0 rgba(207, 189, 255, 0.6),
        80px 10px 0 0 rgba(207, 189, 255, 0.5),
        -20px 70px 0 0 rgba(207, 189, 255, 0.6);
    animation-delay: 0.5s;
}

.figma-link-large::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        -120px -60px 0 0 rgba(207, 189, 255, 0.6),
        90px -70px 0 0 rgba(207, 189, 255, 0.7),
        -70px 100px 0 0 rgba(207, 189, 255, 0.5),
        130px 50px 0 0 rgba(207, 189, 255, 0.6),
        -50px -120px 0 0 rgba(207, 189, 255, 0.5),
        60px 120px 0 0 rgba(207, 189, 255, 0.6),
        -100px 30px 0 0 rgba(207, 189, 255, 0.5),
        40px -90px 0 0 rgba(207, 189, 255, 0.6),
        110px -20px 0 0 rgba(207, 189, 255, 0.5),
        -30px 110px 0 0 rgba(207, 189, 255, 0.6);
    animation-delay: 0s;
}

.figma-link-large::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        100px -50px 0 0 rgba(207, 189, 255, 0.6),
        -90px -100px 0 0 rgba(207, 189, 255, 0.7),
        80px 90px 0 0 rgba(207, 189, 255, 0.5),
        -130px 60px 0 0 rgba(207, 189, 255, 0.6),
        50px 130px 0 0 rgba(207, 189, 255, 0.5),
        -70px -80px 0 0 rgba(207, 189, 255, 0.6),
        120px 20px 0 0 rgba(207, 189, 255, 0.5),
        -40px 100px 0 0 rgba(207, 189, 255, 0.6),
        95px -40px 0 0 rgba(207, 189, 255, 0.5),
        -60px -110px 0 0 rgba(207, 189, 255, 0.6);
    animation-delay: 0.5s;
}

@keyframes starDustSwirl {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1) rotate(360deg);
    }
}

@keyframes starDustSwirlAlt {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2) rotate(-180deg);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1) rotate(-360deg);
    }
}

.figma-link::after,
.figma-link-large::after {
    animation-name: starDustSwirlAlt;
}

.dropbox-replay .left-panel {
    flex: 1;
    background-color: #1a1a1a;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.dropbox-replay .right-panel {
    flex: 0 0 350px;
    background-color: #252525;
    padding: 1.5rem;
    border-left: 1px solid #333;
}

.panel-header {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

.dropdown-arrow {
    color: #999;
    font-size: 0.8rem;
}

.video-player {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.video-placeholder {
    background-color: #0a0a0a;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.video-frame {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 4px;
    margin-bottom: 1rem;
    position: relative;
}

.video-frame::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.video-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.control-btn {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1rem;
}

.scrub-bar {
    flex: 1;
    height: 4px;
    background-color: #333;
    border-radius: 2px;
    position: relative;
}

.scrub-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    background-color: #0066ff;
    border-radius: 2px;
}

.resolution-select {
    background-color: #333;
    color: #ffffff;
    border: 1px solid #444;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.feedback-section {
    margin-top: 1rem;
}

.feedback-input {
    width: 100%;
    min-height: 80px;
    background-color: #252525;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 0.75rem;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.feedback-input::placeholder {
    color: #666;
}

.feedback-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.btn-primary {
    background-color: #0066ff;
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #444;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.time-indicator {
    font-size: 0.85rem;
    color: #999;
    margin-left: auto;
}

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.tab {
    background: none;
    border: none;
    color: #999;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab.active {
    color: #ffffff;
    border-bottom-color: #0066ff;
}

.filter-section {
    margin-bottom: 1rem;
}

.filter-select {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid #333;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
    width: 100%;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment {
    padding: 0.75rem;
    background-color: #1a1a1a;
    border-radius: 4px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.comment-author {
    font-weight: 600;
    color: #ffffff;
}

.comment-time {
    color: #999;
}

.comment-text {
    font-size: 0.9rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.comment-text.highlighted {
    background-color: rgba(0, 102, 255, 0.2);
    padding: 0.5rem;
    border-radius: 4px;
    border-left: 3px solid #0066ff;
}

.reply-btn {
    background: none;
    border: none;
    color: #0066ff;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}

/* Pulley Interface */
.pulley-interface {
    background-color: #ffffff;
    color: #000000;
    min-height: 500px;
}

.pulley-header {
    background-color: #2d2d2d;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #ddd;
}

.tab-indicator {
    display: inline-block;
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 4px 4px 0 0;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.pulley-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}

.pulley-content {
    display: flex;
    min-height: 400px;
}

.sidebar {
    width: 200px;
    background-color: #f5f5f5;
    padding: 1rem;
    border-right: 1px solid #ddd;
}

.file-tree {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tree-item {
    padding: 0.5rem;
    color: #333;
    font-size: 0.9rem;
    cursor: pointer;
}

.tree-item:hover {
    background-color: #e5e5e5;
    border-radius: 4px;
}

.code-view {
    flex: 1;
    padding: 1rem;
    background-color: #ffffff;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    overflow-x: auto;
}

.code-line {
    display: flex;
    padding: 0.25rem 0;
    white-space: pre;
}

.line-number {
    color: #999;
    margin-right: 1rem;
    user-select: none;
    min-width: 3ch;
}

.code {
    color: #333;
}

.code.added {
    background-color: #d4edda;
    color: #155724;
    padding: 0 0.25rem;
}

.code.removed {
    background-color: #f8d7da;
    color: #721c24;
    padding: 0 0.25rem;
    text-decoration: line-through;
}

/* Tuttle Interface */
.tuttle-interface {
    background-color: #ffffff;
    color: #000000;
    min-height: 600px;
}

.tuttle-header {
    background-color: #2d2d2d;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tuttle-header.simple {
    justify-content: flex-start;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tuttle-firm-name {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
}

.firm-select {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid #333;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.new-request-btn {
    background-color: #0066ff;
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.tuttle-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #ddd;
    background-color: #ffffff;
}

.tuttle-tab {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tuttle-tab.active {
    color: #0066ff;
    border-bottom-color: #0066ff;
}

.tuttle-content {
    padding: 1.5rem;
}

.content-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #000000;
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-tab {
    background: none;
    border: 1px solid #ddd;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
}

.filter-tab.active {
    background-color: #0066ff;
    color: #ffffff;
    border-color: #0066ff;
}

.count {
    margin-left: 0.5rem;
    font-weight: 600;
}

.search-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.data-table thead {
    background-color: #f5f5f5;
}

.data-table th {
    text-align: left;
    padding: 0.75rem;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #ddd;
}

.data-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
    color: #333;
}

.data-table tbody tr:hover {
    background-color: #f9f9f9;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.pagination-info {
    font-size: 0.9rem;
    color: #666;
}

.pagination-btn {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.pagination-btn:hover {
    background-color: #e5e5e5;
}

.provider-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.form-input,
.form-select {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
}

.radio-group {
    display: flex;
    gap: 1.5rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
}

.radio-label input[type="radio"] {
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 1440px) {
    .bio-container {
        padding: 3rem; /* 40px equivalent */
    }
    
    .bio-section {
        padding: 15rem 2rem 4rem 2rem;
    }
}

@media (max-width: 768px) {
    .nav {
        padding: 1.5rem;
    }

    .main {
        padding: 0 1.5rem 3rem;
    }

    .name {
        font-size: 64px;
    }

    .project-title {
        font-size: 32px;
    }

    .dropbox-replay .app-interface {
        flex-direction: column;
    }

    .dropbox-replay .right-panel {
        flex: 1;
        border-left: none;
        border-top: 1px solid #333;
    }

    .screenshot-scroll-wrapper {
        gap: 1rem;
    }

    .pulley-content {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .bio-section {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .bio-container {
        width: 100%;
        max-width: 100%;
        padding: 2rem 1.5rem;
    }

    .bio-text {
        font-size: 18px;
    }
}

@media (max-width: 700px) {
    /* Layout */
    body {
        scroll-snap-type: none;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    html {
        overflow-x: hidden;
    }

    .main {
        max-width: none;
        margin: 0;
        padding: 0 1.5rem 2rem;
        overflow: visible;
    }

    /* Navigation - show only 3 links on one line */
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 1rem 1.5rem;
        justify-content: center;
        gap: 24px;
    }

    .name-nav {
        display: none !important;
    }

    .nav-left,
    .nav-right {
        flex: 0 0 auto;
        gap: 24px;
    }

    /* Hide "Onsite deck" so only Intro video, Résumé, LinkedIn are visible */
    .nav-left .nav-link:nth-child(2) {
        display: none;
    }

    .nav-link {
        white-space: nowrap;
        font-size: 14px;
    }

    /* Hide non-mobile chrome */
    .cursor-badge,
    #cursor-badge {
        display: none !important;
    }

    /* Hero - mobile typography - centers content vertically, allows scrolling */
    .hero {
        min-height: 100vh;
        padding-top: calc(50vh - 200px);
        padding-bottom: calc(50vh - 200px);
        justify-content: center;
        align-items: center;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 40px;
        position: relative;
    }

    .name {
        position: absolute !important;
        top: calc(50vh - 200px + 96px + 20px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1 !important;
        font-size: calc((100vw - 3rem) / 9.2) !important;
        line-height: 0.9;
        letter-spacing: -0.13em;
        text-align: center;
        margin: 0 !important;
        max-width: calc(100vw - 3rem);
        padding: 0 1.5rem;
        box-sizing: border-box;
    }

    /* Profile picture - centered in hero flow */
    .triangle-section {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        pointer-events: none;
    }

    .triangle-container {
        height: 0 !important;
        display: block !important;
        position: relative;
    }

    .triangle,
    .triangle-label {
        display: none !important;
    }

    /* Position profile picture in hero flow, above name - ensure it's visible */
    .profile-picture {
        position: absolute !important;
        top: calc(50vh - 200px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 96px !important;
        height: 96px !important;
        border-radius: 0 !important;
        z-index: 2 !important;
        margin: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide all content sections except the starburst source */
    .bio-section,
    .project:nth-of-type(n + 2) {
        display: none !important;
    }

    /* First project section only used as a container for the starburst */
    .project:first-of-type {
        min-height: 0;
        margin: 0;
        padding: 0;
        display: block !important;
    }

    .project:first-of-type .project-title,
    .project:first-of-type .project-description,
    .project:first-of-type .project-tags,
    .project:first-of-type .scroll-arrows,
    .project:first-of-type iframe,
    .project:first-of-type .audio-player,
    .project:first-of-type .login-tooltip,
    .project:first-of-type .screenshot-scroll-wrapper img {
        display: none !important;
    }

    .project:first-of-type .screenshot-container.horizontal-scroll {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: block !important;
        position: static !important;
        height: auto !important;
    }

    .project:first-of-type .screenshot-scroll-wrapper {
        padding: 0 !important;
        width: auto !important;
        display: block !important;
        overflow: visible !important;
        position: static !important;
        height: auto !important;
    }

    /* Hide regular starburst on mobile */
    .project:first-of-type .starburst-badge,
    .project:first-of-type .starburst-icon {
        display: none !important;
    }

    /* Mobile starburst below the name */
    .mobile-starburst-badge {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) rotate(-12deg) !important;
        top: calc(50vh - 200px + 96px + 20px + calc((100vw - 3rem) / 9.2) * 0.9 + 40px) !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
        z-index: 10 !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-starburst-icon {
        width: 230px !important;
        height: 230px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Under Construction Modal */
.construction-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.construction-modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    z-index: 10001;
    background-color: #1E0F2D;
    border: 3px solid #CFBDFF;
    border-radius: 8px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.construction-gif {
    width: 200px;
    height: auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    margin-bottom: 1.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.modal-text {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
    margin-bottom: 1.5rem;
}

.modal-dismiss-btn {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1E0F2D;
    background-color: #CEFC00;
    border: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin-top: 0.5rem;
}

.modal-dismiss-btn:hover {
    background-color: #B8E000;
    transform: translateY(-1px);
}

.modal-dismiss-btn:active {
    transform: translateY(0);
}

/* Slide Deck Styles */
.deck-body {
    overflow: hidden;
    height: 100vh;
}

/* Hide horizontal scrollbars in Safari */
/* Safari shows scrollbars by default, unlike Chrome which hides them until scrolling */
/* Use Safari-specific detection: @supports with -webkit-appearance targets Safari/WebKit */
@supports (-webkit-appearance: none) and (not (-webkit-appearance: button)) {
    /* Hide horizontal scrollbars on body/html */
    body::-webkit-scrollbar,
    html::-webkit-scrollbar {
        height: 0;
        width: auto; /* Keep vertical scrollbar width */
    }
    
    /* Hide horizontal scrollbar for deck container */
    .deck-body::-webkit-scrollbar,
    .deck-container::-webkit-scrollbar {
        height: 0;
        width: auto; /* Keep vertical scrollbar width */
    }
    
    /* Hide horizontal scrollbar but keep vertical for elements with horizontal overflow */
    [style*="overflow-x: auto"]::-webkit-scrollbar,
    [style*="overflow-x: scroll"]::-webkit-scrollbar {
        height: 0;
    }
}

/* Safari-specific: Hide horizontal scrollbar for .horizontal-scroll class */
/* This overrides the existing scrollbar styling to hide it in Safari */
@supports (-webkit-appearance: none) {
    .horizontal-scroll::-webkit-scrollbar {
        height: 0 !important;
        display: none !important;
    }
    
    .horizontal-scroll::-webkit-scrollbar-track {
        display: none !important;
    }
    
    .horizontal-scroll::-webkit-scrollbar-thumb {
        display: none !important;
    }
}

.deck-container {
    display: flex;
    height: 100vh;
    background-color: #000000;
    color: #ffffff;
    transition: all 0.3s ease;
}

/* Sidebar */
.deck-sidebar {
    width: 280px;
    background-color: #2A1F3D;
    border-right: 1px solid rgba(207, 189, 255, 0.2);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 100;
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(207, 189, 255, 0.2);
    display: flex;
    gap: 1rem;
    align-items: center
}

.sidebar-title {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    padding-bottom: 20px;
}



.cursor-built-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #A8FF00;
    color: #000000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.cursor-built-btn:hover {
    opacity: 0.9;
}

.sidebar-deck {
    margin-bottom: 0.5rem;
}

.deck-title-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    color: #CFBDFF;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.deck-title-btn:hover {
    background-color: rgba(207, 189, 255, 0.1);
    color: #ffffff;
}

.sidebar-deck.active .deck-title-btn {
    /* background-color: rgba(207, 189, 255, 0.15); */
    color: #ffffff;
    /* font-weight: 600; */
}

.slide-list-container {
    padding-left: 1rem;
    padding-right: 0.5rem;
    padding-top: 1rem;
}

.slide-item {
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.slide-item:hover {
    background-color: rgba(207, 189, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.slide-item.active {
    background-color: rgba(207, 189, 255, 0.2);
    color: #ffffff;
    font-weight: 500;
}

/* Main Slide Area */
.deck-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.deck-main:has(.replay-slide) {
    /* Keep overflow consistent to prevent layout shifts */
    overflow: hidden;
}

.slide-container {
    /* Use absolute positioning to ensure consistent placement within deck-main */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Reserve space for deck-controls at the bottom */
    /* deck-controls: padding 1.5rem top + 1.5rem bottom = 3rem = 48px, button height 48px = 96px total */
    bottom: 96px;
    padding: 3rem;
    overflow: hidden;
    background-color: #000000;
    box-sizing: border-box;
    width: 100%;
    /* Ensure consistent positioning - reserve space to prevent layout shifts */
    min-height: 0;
    /* Use flexbox to properly center and constrain slide-content */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure container properly constrains child elements */
    min-width: 0;
    min-height: 0;
}

.slide-container:has(.replay-slide) {
    overflow: hidden;
    /* Keep padding consistent to maintain slide positioning */
    padding-right: 3rem;
}

.slide-content {
    max-width: 1920px;
    max-height: 1080px;
    aspect-ratio: 16 / 9;
    min-height: 0;
    animation: slideIn 0.3s ease;
    background-color: #212121;
    border-radius: 8px;
    /* padding: 2rem; */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-shrink: 1;
    /* Use relative positioning within flex container */
    position: relative;
    /* Constrain to fit within available space while maintaining aspect ratio */
    /* Use width that respects container bounds, aspect-ratio will calculate height */
    width: min(1920px, 100%);
    height: auto;
    /* Ensure both max-width and max-height constrain properly */
    max-width: min(1920px, 100%);
    max-height: min(1080px, 100%);
    /* Ensure consistent sizing to prevent repositioning */
    min-width: 0;
    min-height: 0;
    /* For viewports where height is the limiting factor, constrain based on available height */
    /* Calculate max width based on available height: if container height is limiting, use height-based width */
    /* This ensures the slide scales down proportionally on smaller/taller viewports */
}

.slide-content.replay-slide {
    overflow: hidden;
}

/* Ensure slide scales properly on smaller viewports (e.g., 1440x900px) */
/* When height is the limiting factor, constrain width based on available height */
@media (max-height: 1000px) and (min-width: 1200px) {
    .slide-content {
        /* Calculate max width based on available container height */
        /* Container height = viewport height - controls (96px) - padding (96px) = viewport height - 192px */
        /* Available height for slide = container height - 0 (no extra padding in content) */
        /* Max width = (available height) * 16/9 */
        /* But we need to account for container padding, so use a calculation */
        max-width: min(1920px, calc((100vh - 192px) * 16 / 9));
        /* Ensure width respects this constraint */
        width: min(1920px, 100%, calc((100vh - 192px) * 16 / 9));
    }
}

/* Nerdy Slide Styles */
.slide-content.nerdy-slide {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.slide-content.nerdy-slide:has(.google-form-iframe),
.slide-content.nerdy-slide:has(.zapier-logic-iframe),
.slide-content.nerdy-slide:has(.new-request-iframe),
.slide-content.nerdy-slide:has(.new-provider-iframe) {
    align-items: center;
    justify-content: center;
}

.nerdy-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.google-form-iframe {
    max-width: 750px;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

.tan-vo-overlay {
    height: 90px;
    width: 90px;
    position: relative;
    top: 50px;
    left: -375px;
}

.zapier-logic-iframe, .new-provider-iframe, .new-request-iframe {
    max-width: 1366px;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

.new-provider-iframe, .new-request-iframe {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

.deck-container.fullscreen .zapier-logic-iframe {
    width: 80%;
    height: 80%;
    max-width: 80%;
    max-height: 80%;
    aspect-ratio: unset;
}

.providers-spreadsheet-image {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 12px;
}

.figjam-workflows-image {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.casey-slide {
    position: relative;
    cursor: pointer;
}

.tools-toast-image {
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    max-height: auto;
    opacity: 0;
    transition: bottom 0.5s ease-out, opacity 0.5s ease-out;
    pointer-events: none;
}

.casey-slide.animate-toast .tools-toast-image {
    bottom: 100px;
    opacity: 1;
}

.testimonials-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background-color: #1a1a1a;
}

.testimonial-cards {
    display: flex;
    gap: 2rem;
    width: 100%;
    max-width: 1600px;
    justify-content: center;
    align-items: stretch;
}

.deck-container.fullscreen .testimonial-cards {
    width: 130%;
    height: 49rem;
}

.testimonial-card {
    background-color: #2d2d2d;
    border-radius: 8px;
    padding: 2.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 40.625rem; /* 650px / 16px = 40.625rem */
    max-height: 100%;
}

.deck-container.fullscreen .testimonial-card {
    height: 100%;
    max-height: 100%;
}

.testimonial-quote {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 2rem 0;
}

.testimonial-attribution {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-photo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.testimonial-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.testimonial-firm {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* In fullscreen mode, fill viewport with 16:9 aspect ratio */
.deck-container.fullscreen .slide-container {
    background-color: #212121;
    padding: 0;
    flex: none;
    /* Fill viewport maintaining 16:9 aspect ratio */
    /* Fill width first, let aspect-ratio calculate height */
    width: 100vw;
    aspect-ratio: 16 / 9;
    /* Constrain height to not exceed viewport */
    max-height: 100vh;
    /* If height would be limiting, constrain width instead */
    max-width: calc(100vh * 16 / 9);
    margin: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.deck-container.fullscreen .slide-content {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: none;
    flex-shrink: 0;
    left: 0;
    right: 0;
}

/* Welcome Slide Styles */
.column-left.intro-slide {
    gap: 0;
}


.welcome-slide {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    overflow-y: auto;
}

.welcome-left {
    flex: 0 0 auto;
    width: 25%;
}

.welcome-name {
    font-family: 'Archivo Black', sans-serif;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.13em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.welcome-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #B7B7B7;
    line-height: 1.8em;
    margin: 0;
}

.welcome-title .ampersand {
    font-family: 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
    font-style: italic;
}

.welcome-right {
    flex: 1;
    overflow: hidden;
}

.welcome-profile-picture {
    width: 68px;
    height: 68px;
    border-radius: 0;
    object-fit: cover;
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 0.5rem;
    shape-outside: margin-box;
    position: relative;
    top: 8px;
}

.welcome-text {
    overflow: hidden;
    max-width: 40.125rem; /* 642px / 16px = 40.125rem */
    margin: 0 auto; /* Horizontally center within column-right */
}

.welcome-text p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.8em;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.welcome-text p:last-child {
    margin-bottom: 0;
}

/* Features Slide Styles */
.slide-content.two-columns {
    padding-left: 10rem; /* 160px padding-left */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.two-columns {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 10rem; /* 160px horizontal space between columns */
    align-items: center;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Replay Slide Styles */
.replay-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.replay-left {
    flex: 0 0 40%;
    max-width: 480px;
    padding-right: 3rem;
    z-index: 10;
    position: relative;
    background-color: transparent;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.replay-title {
    font-family: 'Jost', sans-serif;
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.replay-description {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-tag {
    background-color: #555555;
    color: #ffffff;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: inline-block;
}

.replay-image-container {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 40%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.replay-dashboard-image {
    border: 1px solid #727272;
    border-radius: 12px;
    height: 58.75rem; /* 940px / 16px = 58.75rem (equivalent to 940px when viewport is 1080px height) */
    width: auto;
    object-fit: contain;
    position: relative;
}

.deck-container.fullscreen .tuttle-image {
    position: relative;
    left: 13rem;
}

.pulley-pr-image {
    border: 1px solid #727272;
    border-radius: 12px;
    height: 58.75rem; /* 940px / 16px = 58.75rem (equivalent to 940px when viewport is 1080px height) */
    width: auto;
    object-fit: contain;
    position: relative;
}

/* In fullscreen mode, clip content at slide edges */
.deck-container.fullscreen .replay-slide {
    overflow: hidden;
}

.deck-container.fullscreen .replay-image-container {
    right: 0;
    width: 60%;
}

.deck-container.fullscreen .replay-dashboard-image {
    right: 0;
    height: 58.75rem; /* 940px / 16px = 58.75rem */
}

.deck-container.fullscreen .column-left {
    margin-left: 11.25rem; /* 180px / 16px = 11.25rem */
}

.column-left {
    flex: 0 0 31.25rem; /* 500px when slide is 1920px wide (500px / 16px = 31.25rem) */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 31.25rem;
}

.features-title {
    font-family: 'Jost', sans-serif;
    font-size: 54px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.features-description {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
}


.features-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.twine-mobile-mockup {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.column-right {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-right: 0;
    gap: 2rem;
}

/* Center welcome-text horizontally within column-right */
.column-right:has(.welcome-text) {
    justify-content: center;
}

.twine-flows {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-title {
    font-family: 'Jost', sans-serif;
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
    color: #ffffff;
}

.slide-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.8;
    color: #E0E0E0;
    margin-bottom: 1.5rem;
}

.slide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slide-list li {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 2;
    color: #E0E0E0;
    padding-left: 2rem;
    position: relative;
}

.slide-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #CFBDFF;
    font-size: 24px;
}

/* Navigation Controls */
.deck-controls {
    /* Position absolutely at bottom to ensure consistent layout */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem;
    background-color: #000000;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100;
}

.control-btn {
    background: rgba(207, 189, 255, 0.1);
    border: 1px solid rgba(207, 189, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    width: 48px;
    height: 48px;
}

.control-btn:hover:not(:disabled) {
    background-color: rgba(207, 189, 255, 0.2);
    border-color: rgba(207, 189, 255, 0.5);
}

.control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.control-btn svg {
    width: 24px;
    height: 24px;
}

.slide-counter {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #CFBDFF;
    min-width: 80px;
    text-align: center;
}

/* Fullscreen Button */
.fullscreen-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(42, 31, 61, 0.9);
    border: 1px solid rgba(207, 189, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 48px;
    height: 48px;
    z-index: 200;
}

.fullscreen-btn:hover {
    background-color: rgba(207, 189, 255, 0.2);
    border-color: rgba(207, 189, 255, 0.5);
}

.fullscreen-btn svg {
    width: 24px;
    height: 24px;
}

/* Zoom Buttons */
.zoom-btn {
    position: absolute;
    top: calc(1.5rem + 48px + 0.5rem);
    right: 1.5rem;
    background: rgba(42, 31, 61, 0.9);
    border: 1px solid rgba(207, 189, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 48px;
    height: 48px;
    z-index: 200;
}

.zoom-out-btn {
    top: calc(1.5rem + 48px + 0.5rem);
}

.zoom-in-btn {
    top: calc(1.5rem + 48px + 0.5rem + 48px + 0.5rem);
}

.zoom-btn:hover {
    background-color: rgba(207, 189, 255, 0.2);
    border-color: rgba(207, 189, 255, 0.5);
}

.zoom-btn svg {
    width: 24px;
    height: 24px;
}

/* Fullscreen Mode */
.deck-container.fullscreen {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.deck-container.fullscreen .deck-sidebar {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.deck-container.fullscreen .deck-controls {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

.deck-container.fullscreen .fullscreen-btn {
    opacity: 1;
}

.deck-container.fullscreen .zoom-btn {
    display: none;
}

.deck-container.fullscreen .deck-main {
    width: 100vw;
    height: 100vh;
    flex: none;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: static;
}

/* Responsive Design */
@media (max-width: 768px) {
    .deck-sidebar {
        width: 240px;
    }

    .slide-title {
        font-size: 48px;
    }

    .slide-text {
        font-size: 20px;
    }

    .slide-list li {
        font-size: 20px;
    }

    /* .slide-container {
        padding: 2rem 01.5rem;
    } */

    .welcome-slide {
        flex-direction: column;
        gap: 2rem;
    }

    .welcome-left {
        width: 100%;
    }

    .welcome-name {
        font-size: 32px;
    }

    .welcome-title {
        font-size: 20px;
    }

    .welcome-text p {
        font-size: 20px;
    }

    .two-columns {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* .column-left {
        flex: 0 0 auto;
        width: 100%;
    } */

    .features-title {
        font-size: 36px;
    }

    .features-center {
        flex: 0 0 auto;
        width: 100%;
    }

    .column-right {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .deck-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .deck-sidebar.open {
        transform: translateX(0);
    }

    .slide-title {
        font-size: 36px;
    }

    .slide-text {
        font-size: 18px;
    }

    .slide-list li {
        font-size: 18px;
    }

    .deck-controls {
        padding: 1rem;
        gap: 1rem;
    }

    .control-btn {
        width: 40px;
        height: 40px;
        padding: 0.5rem;
    }

    .control-btn svg {
        width: 20px;
        height: 20px;
    }

    .fullscreen-btn {
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        padding: 0.5rem;
    }

    .fullscreen-btn svg {
        width: 20px;
        height: 20px;
    }

    .zoom-btn {
        top: calc(1rem + 40px + 0.5rem);
        right: 1rem;
        width: 40px;
        height: 40px;
        padding: 0.5rem;
    }

    .zoom-in-btn {
        top: calc(1rem + 40px + 0.5rem + 40px + 0.5rem);
    }

    .zoom-btn svg {
        width: 20px;
        height: 20px;
    }

    .welcome-name {
        font-size: 28px;
    }

    .welcome-title {
        font-size: 18px;
    }

    .welcome-text p {
        font-size: 18px;
    }

    .features-title {
        font-size: 28px;
    }

    .features-description {
        font-size: 14px;
    }
}