#p5-canvas-container {
    height: 100%;
    min-height: 100vh;
}

.app-page-header {
    position: relative;
    z-index: 1;
    min-height: 0;
    justify-content: flex-start;
    background: rgba(244, 244, 244, 0.78);
    padding: 2vw 2vw 0;
    border-bottom: 2px solid #111;
}

.app-page-header .header-top {
    margin-bottom: 3rem;
}

.app-page-header .logo {
    color: inherit;
    text-decoration: none;
}

.app-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.app-back {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #111;
    padding-bottom: 0.15rem;
}

.app-back:hover {
    background: #111;
    color: #fff;
}

.app-page-title {
    font-size: 8vw;
    line-height: 0.85;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

.app-page-lead {
    max-width: 36rem;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 3rem;
    opacity: 0.75;
}

.app-project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 3rem;
}

.app-project {
    position: relative;
    z-index: 1;
    background: rgba(244, 244, 244, 0.78);
    width: 76%;
    max-width: none;
    margin-right: 24%;
    padding: 5.5rem 2vw 6rem;
    border-bottom: 2px solid #111;
}

.app-project > * {
    max-width: 46rem;
}

.app-project h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 2.5rem 0 0.9rem;
}

.app-project h2:first-child {
    margin-top: 0;
}

.app-project h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.6rem;
}

.app-project a {
    color: inherit;
    border-bottom: 1px solid #111;
    text-decoration: none;
}

.app-project p,
.app-project li {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.app-project ul {
    margin: 0;
    padding-left: 1.2rem;
}

.app-project code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    border: 1px solid #111;
    padding: 0.05em 0.35em;
}

.app-cards-section {
    position: relative;
    z-index: 1;
    background: rgba(244, 244, 244, 0.78);
    padding: 4rem 2vw 6rem;
    border-bottom: 2px solid #111;
}

.app-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.works-card-spotlight {
    padding: 3rem 4rem;
    border-bottom: 1px solid #ccc;
}

.works-card-spotlight-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.works-card-spotlight-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #111;
    padding-bottom: 0.1rem;
}

.works-card-spotlight-link:hover {
    background: #111;
    color: #fff;
}

.works-card-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 280px));
    gap: 1.5rem;
}

.tcg-card {
    perspective: 1200px;
    aspect-ratio: 3 / 4;
    cursor: pointer;
    outline: none;
}

.tcg-card:hover {
    transform: translateY(-8px);
}

.tcg-card:focus-visible .tcg-card-inner {
    outline: 3px solid #15202b;
    outline-offset: 4px;
}

.tcg-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.tcg-card.is-flipped .tcg-card-inner {
    transform: rotateY(180deg);
}

.tcg-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #fff;
    border: 3px solid #111;
    padding: 0.7rem;
}

.tcg-face-back {
    transform: rotateY(180deg);
}

.tcg-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.tcg-set,
.tcg-type,
.tcg-year,
.tcg-hint {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65rem;
    font-weight: 600;
}

.tcg-type {
    border: 1px solid #111;
    padding: 0.25rem 0.55rem;
    border-radius: 100px;
    white-space: nowrap;
}

.tcg-art {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #111;
    background: #f4f4f4;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.tcg-art[data-id="2pfinder"] {
    background-color: #f4f4f4;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        #111 10px,
        #111 11px
    );
}

.tcg-art[data-id="memsentry"] {
    background-color: #f4f4f4;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 14px, #111 14px, #111 15px),
        repeating-linear-gradient(90deg, transparent, transparent 14px, #111 14px, #111 15px);
}

.tcg-art[data-id="aliveapps"] {
    background-color: #f4f4f4;
    background-image: radial-gradient(#111 1.5px, transparent 1.6px);
    background-size: 16px 16px;
}

.tcg-art[data-id="chrome-extentions"] {
    background-color: #f4f4f4;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 12px,
        #111 12px,
        #111 13px
    );
}

.tcg-art[data-id="devmin"] {
    background-color: #f4f4f4;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        #111 8px,
        #111 9px
    );
}

.tcg-art:has(.tcg-art-img:not(.is-contain)) {
    background: #111;
    background-image: none;
}

.tcg-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.tcg-art-img.is-contain {
    object-fit: contain;
    padding: 1.75rem;
}

.tcg-initials {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
    color: #111;
    mix-blend-mode: multiply;
}

.tcg-plate {
    margin-top: 0.7rem;
}

.tcg-name {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 0.4rem;
}

.tcg-tagline {
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0 0 0.7rem;
    opacity: 0.75;
}

.tcg-plate-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tcg-face-back .tcg-name {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.tcg-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
    flex: 1;
}

.tcg-stack {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    border-top: 2px solid #111;
    padding-top: 0.75rem;
    margin: 0 0 1rem;
}

.tcg-link {
    display: inline-block;
    align-self: flex-start;
    color: #fff;
    background: #111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.55rem 0.9rem;
}

.tcg-link:hover {
    background: #15202b;
}

.app-page-footer {
    position: relative;
    z-index: 1;
    background: #111;
    color: #fff;
    padding: 3rem 2vw;
}

.app-page-footer a {
    color: #fff;
}

@media (max-width: 1100px) {
    .app-project {
        width: 82%;
        margin-right: 18%;
    }

    .app-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-page-title {
        font-size: 12vw;
    }
}

@media (max-width: 640px) {
    .app-page-header {
        padding: 1.5rem 1.5rem 0;
    }

    .app-cards-section {
        padding: 2rem 1.5rem 3rem;
    }

    .app-cards-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
    }

    .app-page-title {
        font-size: 16vw;
    }

    .app-project {
        width: 100%;
        margin-right: 0;
        padding: 3.5rem 1.5rem 3rem;
    }

    .works-card-spotlight {
        padding: 2rem 1.5rem;
    }

    .works-card-spotlight-grid {
        grid-template-columns: minmax(0, 280px);
    }

    .tcg-card:hover {
        transform: none;
    }
}