:root {
    --glass: rgba(245, 247, 252, 0.72);
    --glass-strong: rgba(255, 255, 255, 0.84);
    --line: rgba(255, 255, 255, 0.36);
    --ink: #10131a;
    --muted: rgba(16, 19, 26, 0.64);
    --soft: rgba(16, 19, 26, 0.08);
    --blue: #111318;
    --violet: #7b61ff;
    --green: #30d158;
    --amber: #ffd166;
    --rose: #ff5f57;
    --yellow: #ffbd2e;
    --window-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
    --radius: 14px;
    --ease-macos: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-macos-close: cubic-bezier(0.36, 0, 0.66, -0.56);
    --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    font-family: var(--font-text);
}

* {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    min-width: 0;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body.portfolio-os {
    min-height: 100vh;
    overflow: hidden;
    color: var(--ink);
    background: #0b1020;
    font-family: var(--font-text);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.boot-screen {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: clamp(18px, 4vh, 34px);
    min-height: 100dvh;
    padding: clamp(24px, 5vw, 62px);
    overflow: hidden;
    color: white;
    background-color: #2f64ff;
    background-image:
        linear-gradient(180deg, rgba(4, 8, 28, 0.02), rgba(4, 8, 28, 0.16)),
        url("assets/wallpapers/apple-blue-violet-petal-wallpaper.png");
    background-position: center, 50% 50%;
    background-repeat: no-repeat;
    background-size: auto, 108% 108%;
    animation: boot-wallpaper-drift 14s ease-in-out infinite alternate;
    transition:
        opacity 520ms ease,
        transform 520ms ease,
        visibility 520ms ease;
}

.boot-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.18), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(164, 126, 255, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(8, 18, 60, 0.14)),
        linear-gradient(0deg, rgba(4, 6, 20, 0.3), rgba(4, 6, 20, 0) 62%);
    opacity: 0.88;
    pointer-events: none;
}

.boot-screen.is-leaving {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
}

.boot-screen.is-hidden {
    display: none;
}

.boot-stage {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: min(690px, calc(100vw - 32px));
    height: clamp(330px, 54vh, 500px);
    transition: transform 900ms cubic-bezier(0.18, 0.88, 0.2, 1);
}

.boot-screen.is-ready .boot-stage {
    transform: translateY(-54px) scale(0.94);
}

.boot-card {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        inset 0 -28px 60px rgba(18, 36, 82, 0.1),
        0 34px 90px rgba(20, 34, 86, 0.28);
    backdrop-filter: blur(42px) saturate(1.36) brightness(1.08);
    -webkit-backdrop-filter: blur(42px) saturate(1.36) brightness(1.08);
    transform: var(--boot-card-rest, none);
    will-change: transform, opacity;
}

.boot-card-back-one {
    --boot-card-rest: translate(28px, 32px) rotate(4deg);
    --boot-card-float: translate(17px, 22px) rotate(2.5deg);
    --boot-card-opacity: 0.46;
    --boot-card-opacity-strong: 0.56;
    width: 91%;
    height: 76%;
    opacity: var(--boot-card-opacity);
    animation: boot-back-card-float 7.4s ease-in-out 420ms infinite;
}

.boot-card-back-two {
    --boot-card-rest: translate(-30px, 54px) rotate(-5deg);
    --boot-card-float: translate(-18px, 42px) rotate(-3deg);
    --boot-card-opacity: 0.32;
    --boot-card-opacity-strong: 0.44;
    width: 82%;
    height: 66%;
    opacity: var(--boot-card-opacity);
    animation: boot-back-card-float 8.6s ease-in-out 760ms infinite reverse;
}

.boot-card-main {
    --boot-main-rest: translate3d(0, 0, 0) scale(1);
    --boot-main-float: translate3d(0, -8px, 0) scale(1.006);
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(16px, 3vh, 26px);
    width: min(620px, 100%);
    min-height: clamp(300px, 45vh, 420px);
    padding: clamp(18px, 3vw, 30px);
    overflow: hidden;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.13) 48%, rgba(85, 125, 214, 0.18)),
        rgba(255, 255, 255, 0.1);
    animation:
        boot-main-card-enter 820ms cubic-bezier(0.17, 0.84, 0.34, 1) both,
        boot-main-card-float 6.8s ease-in-out 920ms infinite;
}

.boot-card-main::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background:
        radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.42), transparent 28%),
        radial-gradient(circle at 78% 88%, rgba(255, 255, 255, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(85, 125, 214, 0.04));
    pointer-events: none;
}

.boot-card-main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        linear-gradient(112deg, transparent 0 36%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0.1) 53%, transparent 64%),
        linear-gradient(0deg, rgba(10, 12, 24, 0.12), rgba(10, 12, 24, 0));
    background-size: 260% 100%, auto;
    background-position: 142% 0, center;
    animation: boot-card-sheen 5.8s ease-in-out 900ms infinite;
    pointer-events: none;
}

.boot-card-top,
.boot-card-footer,
.boot-hello-frame {
    position: relative;
    z-index: 1;
}

.boot-card-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-shadow: 0 2px 14px rgba(9, 18, 48, 0.4);
}

.boot-card-top span {
    color: rgba(255, 255, 255, 0.68);
    font-weight: 560;
}

.boot-hello-frame {
    display: grid;
    place-items: center;
    min-height: 150px;
}

.boot-hello-svg {
    display: block;
    width: min(100%, 560px);
    overflow: visible;
    filter: drop-shadow(0 16px 28px rgba(35, 38, 60, 0.2));
}

.boot-hello-path {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 35px;
    stroke-dasharray: 5800px;
    stroke-dashoffset: 5800px;
    animation: boot-hello-draw 5s linear forwards;
}

.boot-card-footer {
    display: grid;
    gap: 3px;
}

.boot-card-footer span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 2px 14px rgba(9, 18, 48, 0.42);
}

.boot-card-footer strong {
    color: white;
    font-size: clamp(28px, 5vw, 50px);
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 14px 32px rgba(30, 33, 52, 0.24);
}

.boot-continue {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    padding: 6px 7px 6px 22px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 22px 58px rgba(28, 31, 52, 0.24);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition:
        opacity 520ms ease,
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background 180ms ease,
        border-color 180ms ease;
}

.boot-screen.is-ready .boot-continue {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-16px);
}

.boot-continue span:first-child {
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
}

.boot-continue-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #141720;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 12px 24px rgba(26, 30, 46, 0.18);
    transition: transform 180ms ease;
}

.boot-continue:hover,
.boot-continue:focus-visible {
    border-color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.28);
    outline: none;
}

.boot-continue:hover .boot-continue-arrow,
.boot-continue:focus-visible .boot-continue-arrow {
    transform: translateX(2px);
}

@keyframes boot-hello-draw {
    0%,
    25% {
        stroke-dashoffset: 5800px;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes boot-wallpaper-drift {
    0% {
        background-position: center, 48% 50%;
    }

    100% {
        background-position: center, 54% 48%;
    }
}

@keyframes boot-main-card-enter {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(0.965);
    }

    62% {
        opacity: 1;
        transform: translate3d(0, -4px, 0) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: var(--boot-main-rest);
    }
}

@keyframes boot-main-card-float {
    0%,
    100% {
        transform: var(--boot-main-rest);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.68),
            inset 0 -28px 60px rgba(18, 36, 82, 0.1),
            0 34px 90px rgba(20, 34, 86, 0.28);
    }

    50% {
        transform: var(--boot-main-float);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.78),
            inset 0 -30px 68px rgba(18, 36, 82, 0.09),
            0 42px 104px rgba(20, 34, 86, 0.32);
    }
}

@keyframes boot-back-card-float {
    0%,
    100% {
        opacity: var(--boot-card-opacity);
        transform: var(--boot-card-rest);
    }

    50% {
        opacity: var(--boot-card-opacity-strong);
        transform: var(--boot-card-float);
    }
}

@keyframes boot-card-sheen {
    0%,
    100% {
        background-position: 142% 0, center;
        opacity: 0.78;
    }

    50% {
        background-position: -78% 0, center;
        opacity: 0.94;
    }
}

button,
input,
a {
    font: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
}

p,
h1,
h2,
h3,
strong,
span,
small,
li,
figcaption,
button,
a,
input {
    overflow-wrap: anywhere;
}

h1,
h2,
h3,
.project-card strong,
.case-hero-content h1,
.proof-hero h2,
.resume-hero h2,
.about-panel h1,
.contact-card h2 {
    font-family: var(--font-display);
    font-weight: 650;
    letter-spacing: 0;
}

.desktop-wallpaper,
.desktop-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.desktop-wallpaper {
    background:
        linear-gradient(180deg, rgba(4, 8, 28, 0.02), rgba(4, 8, 28, 0.16)),
        url("assets/wallpapers/apple-blue-violet-petal-wallpaper.png") center / cover no-repeat,
        #2f64ff;
    transform: scale(1.01);
    filter: saturate(1.04) contrast(1.02);
}

.desktop-wallpaper::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.18), transparent 28%),
        radial-gradient(circle at 82% 8%, rgba(164, 126, 255, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(8, 18, 60, 0.12));
    mix-blend-mode: normal;
    opacity: 0.58;
}

.desktop-noise {
    opacity: 0.28;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(0deg, rgba(5, 10, 36, 0.14), transparent 58%);
}

.menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    padding: 0 14px;
    color: rgba(255, 255, 255, 0.94);
    background: rgba(16, 18, 28, 0.54);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.menu-left,
.menu-right {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.menu-left strong {
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.menu-bar button,
.menu-bar time,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: transparent;
    font-size: 12px;
    font-weight: 520;
    white-space: nowrap;
}

.menu-bar button:hover,
.menu-bar button:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}

.menu-brand {
    width: 24px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18) !important;
}

.menu-brand span {
    font-size: 10px;
    font-weight: 650;
}

.desktop {
    position: relative;
    min-height: 100vh;
    padding-top: 34px;
}

.desktop-icons {
    position: fixed;
    top: 58px;
    right: 20px;
    z-index: 20;
    display: grid;
    gap: 18px;
    width: 108px;
}

.desktop-icon {
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 8px 6px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.94);
    text-decoration: none;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
    background: transparent;
    cursor: pointer;
    transition:
        transform 240ms var(--ease-macos),
        background 180ms ease,
        filter 180ms ease;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-3px) scale(1.015);
    outline: none;
}

.desktop-icon strong {
    max-width: 96px;
    color: inherit;
    font-size: 12px;
    font-weight: 560;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.app-icon-img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;
    overflow: hidden;
    border-radius: 22%;
    background: transparent;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.35);
    transition:
        transform 260ms var(--ease-macos),
        box-shadow 260ms var(--ease-macos),
        filter 180ms ease;
}

.desktop-icon:hover .app-icon-img,
.desktop-icon:focus-visible .app-icon-img {
    box-shadow:
        0 15px 28px rgba(0, 0, 0, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.38);
    transform: translateY(-2px) scale(1.035);
}

.os-icon {
    position: relative;
    display: block;
    width: 68px;
    height: 64px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 18px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(8, 13, 28, 0.24));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -16px 26px rgba(0, 0, 0, 0.18),
        0 18px 34px rgba(0, 0, 0, 0.28);
    isolation: isolate;
}

.os-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent 36%),
        radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.32), transparent 22%);
    pointer-events: none;
}

.os-icon-projects {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.os-icon-projects::after {
    display: none;
}

.folder-tab {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 33px;
    height: 16px;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #c8efff, #62c4ff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 8px 18px rgba(0, 0, 0, 0.18);
}

.folder-body {
    position: absolute;
    inset: 16px 2px 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 42%),
        linear-gradient(180deg, #f5f5f5, #111318 64%, #15171c);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -16px 24px rgba(0, 0, 0, 0.14),
        0 18px 34px rgba(0, 0, 0, 0.26);
}

.folder-body span {
    position: absolute;
    left: 13px;
    right: 13px;
    top: 15px;
    height: 17px;
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 31%, transparent 31% 40%, rgba(255, 255, 255, 0.42) 40% 68%, transparent 68% 77%, rgba(255, 255, 255, 0.42) 77% 100%);
    opacity: 0.7;
}

.os-icon-ai {
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.42), transparent 22%),
        linear-gradient(155deg, #cbbcff, #7b61ff 58%, #2f249e);
}

.ai-orbit {
    position: absolute;
    left: 12px;
    top: 14px;
    width: 43px;
    height: 31px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    transform: rotate(-28deg);
}

.ai-wand {
    position: absolute;
    left: 30px;
    top: 17px;
    width: 6px;
    height: 36px;
    border-radius: 99px;
    background: linear-gradient(180deg, #ffffff, #b8e7ff);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.58);
    transform: rotate(39deg);
}

.ai-spark {
    position: absolute;
    width: 9px;
    height: 9px;
    background: white;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.ai-spark.one {
    right: 13px;
    top: 12px;
}

.ai-spark.two {
    left: 13px;
    bottom: 13px;
    width: 7px;
    height: 7px;
    opacity: 0.78;
}

.os-icon-about {
    background:
        radial-gradient(circle at 48% 22%, rgba(255, 255, 255, 0.4), transparent 24%),
        linear-gradient(155deg, #ffe0a3, #ff9f0a 58%, #c96300);
}

.os-icon-about img {
    position: absolute;
    left: 50%;
    bottom: -5px;
    z-index: 2;
    width: 52px;
    max-width: none;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.28));
    transform: translateX(-50%);
}

.os-icon-stack {
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.42), transparent 24%),
        linear-gradient(155deg, #9cf6aa, #30d158 58%, #148c36);
}

.stack-layer {
    position: absolute;
    left: 14px;
    width: 40px;
    height: 19px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 7px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 44%),
        linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.62));
    box-shadow: 0 9px 12px rgba(0, 0, 0, 0.16);
    transform: skewY(-15deg) rotate(-7deg);
}

.stack-layer.top {
    top: 15px;
    z-index: 3;
}

.stack-layer.middle {
    top: 26px;
    z-index: 2;
    opacity: 0.78;
}

.stack-layer.bottom {
    top: 37px;
    z-index: 1;
    opacity: 0.56;
}

.os-icon-resume {
    color: #253143;
    background: linear-gradient(155deg, #ffffff, #dce6f5 62%, #aebbd0);
}

.doc-corner {
    position: absolute;
    right: 0;
    top: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent rgba(151, 169, 194, 0.95) transparent transparent;
    filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.12));
}

.doc-line {
    position: absolute;
    left: 16px;
    width: 35px;
    height: 5px;
    border-radius: 99px;
    background: rgba(37, 49, 67, 0.58);
}

.doc-line.wide {
    top: 25px;
}

.doc-line:not(.wide):not(.short) {
    top: 36px;
    width: 30px;
}

.doc-line.short {
    top: 47px;
    width: 22px;
}

.os-icon-search {
    background:
        radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.4), transparent 24%),
        linear-gradient(155deg, #88d7ff, #496dff 58%, #2634a4);
}

.search-ring {
    position: absolute;
    left: 16px;
    top: 15px;
    width: 27px;
    height: 27px;
    border: 5px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
}

.search-handle {
    position: absolute;
    right: 14px;
    bottom: 15px;
    width: 18px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.9);
    transform: rotate(45deg);
    transform-origin: left center;
}

.os-icon-contact {
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.4), transparent 24%),
        linear-gradient(155deg, #ffe0a3, #ff9f0a 58%, #ca6400);
}

.plane-body {
    position: absolute;
    left: 13px;
    top: 17px;
    width: 42px;
    height: 30px;
    background: white;
    clip-path: polygon(0 43%, 100% 0, 64% 100%, 45% 64%, 21% 81%);
    filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.22));
}

.plane-cut {
    position: absolute;
    left: 32px;
    top: 27px;
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: rgba(202, 100, 0, 0.38);
    transform: rotate(-24deg);
}

.folder-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 58px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 16px;
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -14px 24px rgba(0, 0, 0, 0.14),
        0 18px 34px rgba(0, 0, 0, 0.28);
}

.folder-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 36%),
        radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.3), transparent 24%);
    pointer-events: none;
}

.folder-icon.folder {
    align-items: end;
    padding-bottom: 9px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.folder-icon.folder::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 31px;
    height: 15px;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #9edaff, #4faeff);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.folder-icon.folder::after {
    inset: 13px 1px 2px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 42%),
        linear-gradient(180deg, #5ec5ff, #087dff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -14px 24px rgba(0, 0, 0, 0.14),
        0 18px 34px rgba(0, 0, 0, 0.26);
}

.folder-icon.app::before,
.folder-icon.stack::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.folder-icon.document {
    color: #253143;
    background: linear-gradient(145deg, #ffffff, #d9e2f1);
}

.folder-icon.document::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-style: solid;
    border-width: 0 18px 18px 0;
    border-color: transparent rgba(172, 187, 209, 0.9) transparent transparent;
    filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.12));
}

.folder-icon i {
    position: relative;
    z-index: 2;
    font-size: 26px;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.26));
}

.folder-icon.blue {
    background: linear-gradient(160deg, #f5f5f5, #111318 58%, #15171c);
}

.folder-icon.violet {
    background: linear-gradient(160deg, #c9b8ff, #7b61ff 54%, #3c2dc9);
}

.folder-icon.amber {
    background: linear-gradient(160deg, #ffe29a, #ff9f0a 54%, #c55d00);
}

.folder-icon.green {
    background: linear-gradient(160deg, #8cf29c, #30d158 56%, #149536);
}

.folder-icon.paper {
    color: #253143;
}

.window {
    position: fixed;
    left: var(--x);
    top: var(--y);
    z-index: 100;
    display: none;
    width: var(--w);
    height: var(--h);
    min-width: 320px;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--glass);
    box-shadow: var(--window-shadow);
    backdrop-filter: blur(30px) saturate(1.28);
    -webkit-backdrop-filter: blur(30px) saturate(1.28);
    transition:
        left 260ms var(--ease-macos),
        top 260ms var(--ease-macos),
        width 260ms var(--ease-macos),
        height 260ms var(--ease-macos),
        border-radius 240ms var(--ease-macos),
        box-shadow 240ms var(--ease-macos),
        opacity 180ms ease;
}

.window.dragging {
    transition: none;
    user-select: none;
}

body.window-dragging {
    cursor: grabbing;
    user-select: none;
}

.window.open {
    display: flex;
    flex-direction: column;
}

@media (min-width: 761px) {
    .window.open {
        animation: mac-window-in 320ms var(--ease-macos) both;
        transform-origin: center calc(100% + 80px);
        will-change: transform, opacity, filter;
    }

    .window.closing {
        display: flex;
        flex-direction: column;
        pointer-events: none;
        animation: mac-window-out 180ms ease both;
        will-change: transform, opacity, filter;
    }
}

@keyframes mac-window-in {
    from {
        opacity: 0;
        filter: blur(8px) saturate(0.92);
        transform: translate3d(0, 14px, 0) scale(0.982);
    }

    to {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes mac-window-out {
    from {
        opacity: 1;
        filter: blur(0) saturate(1);
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        filter: blur(6px) saturate(0.95);
        transform: translate3d(0, 12px, 0) scale(0.982);
    }
}

.window.active {
    z-index: 1400 !important;
    border-color: rgba(255, 255, 255, 0.62);
}

.window.zoomed {
    left: 10px !important;
    top: 40px !important;
    z-index: 1200 !important;
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 50px) !important;
    min-width: 0;
    min-height: 0;
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

.assistant-window.contextual {
    left: auto !important;
    right: 10px !important;
    top: 40px !important;
    z-index: 1500 !important;
    width: min(420px, calc(100vw - 34px)) !important;
    height: calc(100vh - 50px) !important;
    min-width: 0;
    min-height: 0;
    border-radius: 0 18px 18px 0;
    box-shadow: none;
}

body:has(.case-window.open.zoomed) .assistant-window.contextual,
body:has(.proof-window.open.zoomed) .assistant-window.contextual {
    border-left: 1px solid rgba(16, 19, 26, 0.1);
}

body:has(.assistant-window.contextual.open) .case-window.open.zoomed,
body:has(.assistant-window.contextual.open) .proof-window.open.zoomed {
    width: calc(100vw - min(430px, 36vw)) !important;
    border-radius: 18px 0 0 18px;
}

body:has(.assistant-window.contextual.open) .dock {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(18px);
}

.assistant-window.contextual .window-titlebar {
    background: rgba(255, 255, 255, 0.68);
}

.window-titlebar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(16, 19, 26, 0.1);
    background: rgba(255, 255, 255, 0.34);
    cursor: grab;
}

.window.active .window-titlebar {
    background: rgba(255, 255, 255, 0.5);
}

.window-titlebar:active {
    cursor: grabbing;
}

.window-titlebar strong {
    min-width: 0;
    color: rgba(16, 19, 26, 0.86);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.traffic-lights {
    display: flex;
    align-items: center;
    gap: 8px;
}

.traffic-lights button {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
}

.traffic-lights .close {
    background: var(--rose);
}

.traffic-lights .minimize {
    background: var(--yellow);
}

.traffic-lights .zoom {
    background: var(--green);
}

.toolbar-button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.72);
    background: rgba(16, 19, 26, 0.06);
    cursor: pointer;
}

.toolbar-button:hover,
.toolbar-button:focus-visible {
    color: var(--blue);
    background: rgba(16, 19, 26, 0.12);
    outline: none;
}

.toolbar-link {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.72);
    text-decoration: none;
    background: rgba(16, 19, 26, 0.06);
}

.toolbar-link:hover,
.toolbar-link:focus-visible {
    color: var(--blue);
    background: rgba(16, 19, 26, 0.12);
    outline: none;
}

.finder-search {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(280px, 34vw);
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
}

.finder-search i {
    color: rgba(16, 19, 26, 0.44);
}

.finder-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
}

.finder-body {
    display: grid;
    grid-template-columns: 190px 1fr;
    min-height: 0;
    flex: 1;
}

.finder-sidebar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 10px;
    border-right: 1px solid rgba(16, 19, 26, 0.1);
    background: rgba(255, 255, 255, 0.24);
    overflow: auto;
}

.finder-sidebar span {
    margin: 10px 10px 4px;
    color: rgba(16, 19, 26, 0.48);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
}

.finder-sidebar button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.74);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 520;
}

.finder-sidebar button.active,
.finder-sidebar button:hover,
.finder-sidebar button:focus-visible {
    color: var(--ink);
    background: rgba(16, 19, 26, 0.13);
    outline: none;
}

.finder-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 16px;
    overflow: hidden;
}

.finder-path {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    color: rgba(16, 19, 26, 0.58);
    font-size: 12px;
    font-weight: 520;
}

.finder-path strong {
    color: var(--ink);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    min-height: 0;
    padding: 8px 2px 22px;
    overflow: auto;
}

.empty-state {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 220px;
    padding: 20px;
    border: 1px dashed rgba(16, 19, 26, 0.18);
    border-radius: 16px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.34);
}

.empty-state strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 620;
}

.empty-state p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.project-card {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 246px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(16, 19, 26, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 14px 34px rgba(21, 27, 42, 0.08);
    animation: mac-card-in 360ms var(--ease-macos) backwards;
    animation-delay: var(--card-delay, 0ms);
    transition:
        transform 260ms var(--ease-macos),
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 260ms var(--ease-macos);
}

.project-card:hover,
.project-card:focus-visible {
    border-color: rgba(16, 19, 26, 0.46);
    background: rgba(255, 255, 255, 0.72);
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(21, 27, 42, 0.13);
    outline: none;
}

.project-card:active {
    transform: translateY(-1px) scale(0.995);
}

@keyframes mac-card-in {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.986);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.project-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(16, 19, 26, 0.08);
}

.project-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.project-thumb small {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 7px;
    border-radius: 6px;
    color: white;
    background: rgba(0, 0, 0, 0.62);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.project-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.project-glyph {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    color: #111318;
    background: linear-gradient(180deg, rgba(16, 19, 26, 0.16), rgba(16, 19, 26, 0.06));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 8px 18px rgba(16, 19, 26, 0.08);
}

.project-glyph svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.project-glyph.ai {
    color: #111318;
    background: linear-gradient(180deg, rgba(16, 19, 26, 0.16), rgba(16, 19, 26, 0.06));
}

.project-glyph.app {
    color: #111318;
    background: linear-gradient(180deg, rgba(16, 19, 26, 0.18), rgba(16, 19, 26, 0.07));
}

.project-glyph.data {
    color: #111318;
    background: linear-gradient(180deg, rgba(16, 19, 26, 0.14), rgba(16, 19, 26, 0.055));
}

.project-glyph.web {
    color: #111318;
    background: linear-gradient(180deg, rgba(16, 19, 26, 0.12), rgba(16, 19, 26, 0.05));
}

.project-glyph.design {
    color: #af52de;
    background: linear-gradient(180deg, rgba(175, 82, 222, 0.18), rgba(175, 82, 222, 0.07));
}

.project-title-stack {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.project-title-stack span,
.case-meta span,
.about-panel span,
.contact-card span,
.proof-hero span,
.proof-summary span,
.proof-section span,
.resume-hero span,
.resume-grid span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
}

.project-card strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.16;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.48;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.project-card ul,
.case-tags,
.case-features,
.stack-items,
.about-stats,
.contact-actions {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.project-card ul,
.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.project-card li,
.case-tags li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 5px 7px;
    border-radius: 6px;
    color: rgba(16, 19, 26, 0.72);
    background: rgba(16, 19, 26, 0.07);
    font-size: 10px;
    font-weight: 560;
}

.project-card li::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(16, 19, 26, 0.72);
}

.case-file {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: auto 1fr;
    min-height: 0;
    overflow: auto;
}

.case-hero {
    position: relative;
    min-height: 230px;
    padding: 18px;
    display: flex;
    align-items: end;
    overflow: hidden;
}

.case-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.02);
}

.case-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.82) 100%);
}

.case-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    color: white;
}

.case-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    padding: 5px 9px 5px 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.case-hero-kicker .project-glyph {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    box-shadow: none;
}

.case-hero-kicker > span:last-child {
    color: inherit;
    font-size: 12px;
    font-weight: 650;
}

.case-hero-content h1 {
    margin: 0;
    font-size: 44px;
    line-height: 0.96;
}

.case-detail {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.case-detail p {
    margin: 0;
    color: rgba(16, 19, 26, 0.76);
    font-size: 14px;
    line-height: 1.58;
}

.case-copy {
    display: grid;
    gap: 10px;
}

.case-media-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: hidden;
    padding: 2px;
}

.case-media-tile {
    display: grid;
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.case-media-tile img,
.case-media-tile video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    overflow: hidden;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 8px;
    background: rgba(16, 19, 26, 0.08);
}

.case-media-tile figcaption,
.media-card figcaption {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: rgba(16, 19, 26, 0.64);
    font-size: 11px;
    font-weight: 520;
    line-height: 1.2;
}

.case-media-tile figcaption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-features {
    display: grid;
    gap: 8px;
}

.case-features li {
    display: flex;
    gap: 9px;
    color: rgba(16, 19, 26, 0.76);
    font-size: 13px;
    font-weight: 430;
}

.case-features li::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-radius: 999px;
    background: var(--blue);
}

.case-notes {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-note {
    display: grid;
    gap: 6px;
    padding: 13px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.54);
}

.case-note-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.case-note-icon {
    display: grid;
    flex: 0 0 28px;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: var(--blue);
    background: rgba(16, 19, 26, 0.1);
}

.case-note-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.case-note-head > span:last-child {
    color: var(--blue);
    font-size: 12px;
    font-weight: 620;
}

.section-head > span:last-child {
    color: var(--blue);
    font-size: 12px;
    font-weight: 620;
}

.case-note p {
    margin: 0;
    color: rgba(16, 19, 26, 0.7);
    font-size: 13px;
    line-height: 1.5;
}

.case-notes {
    grid-template-columns: 1fr;
}

.case-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.case-actions a,
.case-actions button,
.about-actions a,
.about-actions button,
.contact-actions a,
.contact-actions button,
.resume-actions a,
.resume-actions button,
.proof-actions button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    text-decoration: none;
    color: white;
    background: var(--blue);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 8px 18px rgba(16, 19, 26, 0.16);
}

.case-actions button,
.about-actions button,
.contact-actions button {
    color: var(--ink);
    background: rgba(16, 19, 26, 0.08);
    box-shadow: none;
}

.case-actions .primary-action {
    color: white;
    background: var(--blue);
}

.case-actions .secondary-action:hover,
.case-actions .secondary-action:focus-visible,
.about-actions button:hover,
.about-actions button:focus-visible,
.contact-actions button:hover,
.contact-actions button:focus-visible {
    background: rgba(16, 19, 26, 0.13);
    outline: none;
}

.case-window.zoomed .case-file {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 18px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(248, 250, 255, 0.82), rgba(232, 237, 245, 0.6)),
        radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.92), transparent 30%);
}

.case-window.zoomed .case-hero {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    align-items: start;
    gap: 18px;
    min-height: 0;
    height: 100%;
    padding: 18px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 249, 253, 0.68));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 24px 55px rgba(21, 27, 42, 0.1);
}

.case-window.zoomed .case-hero::after {
    display: none;
}

.case-window.zoomed .case-hero img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 190px;
    object-fit: contain;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 22px;
    background: rgba(16, 19, 26, 0.055);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 14px 28px rgba(21, 27, 42, 0.08);
}

.case-window.zoomed .case-hero-content {
    display: grid;
    align-content: start;
    gap: 8px;
    color: var(--ink);
}

.case-window.zoomed .case-hero-kicker {
    border-color: rgba(16, 19, 26, 0.08);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.case-window.zoomed .case-hero-content .case-hero-kicker > span:last-child {
    color: rgba(16, 19, 26, 0.9);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: uppercase;
}

.case-window.zoomed .case-hero-content h1 {
    max-width: none;
    margin: 0;
    color: var(--ink);
    font-size: clamp(34px, 3.2vw, 52px);
    line-height: 0.98;
}

.case-window.zoomed .case-detail {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
    grid-template-areas:
        "tags tags"
        "media media"
        "summary notes"
        "features notes"
        "actions actions";
    grid-template-rows: auto auto auto 1fr auto;
    align-content: start;
    align-items: start;
    gap: 14px;
    min-height: 0;
    height: 100%;
    padding: 0;
    padding: 2px 4px 6px 2px;
    overflow: auto;
}

.case-window.zoomed .case-tags {
    grid-area: tags;
    align-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 2px 0;
}

.case-window.zoomed .case-tags li {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(16, 19, 26, 0.055);
}

.case-window.zoomed .case-copy {
    grid-area: summary;
    grid-template-columns: 1fr;
    overflow: visible;
}

.case-window.zoomed .case-note {
    padding: 16px;
    border-color: rgba(16, 19, 26, 0.07);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        0 12px 28px rgba(21, 27, 42, 0.06);
}

.case-window.zoomed .case-notes {
    grid-area: notes;
    overflow: visible;
}

.case-window.zoomed .case-media-strip {
    grid-area: media;
    display: flex;
    align-items: stretch;
    gap: 14px;
    min-height: 0;
    height: 354px;
    padding: 2px 2px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
}

.case-window.zoomed .case-media-tile {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    flex: 0 0 clamp(300px, 33vw, 430px);
    min-width: 0;
    height: 332px;
    padding: 12px;
    border: 1px solid rgba(16, 19, 26, 0.07);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    scroll-snap-align: start;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 16px 32px rgba(21, 27, 42, 0.07);
}

.case-window.zoomed .case-media-tile img,
.case-window.zoomed .case-media-tile video {
    height: 100%;
    min-height: 0;
    object-fit: contain;
    border-radius: 16px;
    background: rgba(16, 19, 26, 0.055);
}

@media (min-width: 1500px) {
    .case-window.zoomed .case-media-strip {
        height: 374px;
    }

    .case-window.zoomed .case-media-tile {
        height: 352px;
    }
}

.case-window.zoomed .case-features {
    grid-area: features;
    align-content: start;
    padding: 16px;
    border: 1px solid rgba(16, 19, 26, 0.07);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.66),
        0 12px 28px rgba(21, 27, 42, 0.06);
    overflow: visible;
}

.case-window.zoomed .case-actions {
    grid-area: actions;
    align-content: start;
    justify-content: end;
    padding-top: 2px;
}

.case-window.zoomed .case-actions button {
    flex: 0 1 auto;
    min-height: 36px;
    padding: 0 14px;
}

.proof-window.zoomed .proof-dossier,
.about-window.zoomed .about-panel,
.resume-window.zoomed .resume-preview-shell,
.assistant-window.zoomed .assistant-body {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.stack-window.zoomed .stack-library {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(18px, 2vw, 26px);
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.stack-window.zoomed .stack-hero {
    position: sticky;
    top: 0;
    grid-template-columns: 1fr;
    align-content: space-between;
    min-height: min(650px, calc(100vh - 116px));
}

.stack-window.zoomed .stack-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stack-window.zoomed .stack-group {
    min-height: 252px;
}

.proof-dossier {
    display: grid;
    flex: 1 1 auto;
    gap: 16px;
    min-height: 0;
    padding: 18px;
    overflow: auto;
}

.proof-hero {
    display: grid;
    grid-template-columns: minmax(190px, 280px) 1fr;
    gap: 18px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid rgba(16, 19, 26, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
}

.proof-hero img {
    width: 100%;
    min-height: 210px;
    object-fit: cover;
    border-radius: 8px;
    background: rgba(16, 19, 26, 0.08);
}

.proof-hero > div {
    display: grid;
    align-content: center;
    gap: 10px;
}

.proof-hero .case-hero-kicker {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 5px 10px 5px 5px;
    border-color: rgba(16, 19, 26, 0.08);
    color: rgba(16, 19, 26, 0.72);
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.proof-hero .case-hero-kicker > span:last-child {
    color: rgba(16, 19, 26, 0.64);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
}

.proof-hero .case-hero-kicker .project-glyph {
    width: 30px;
    height: 30px;
}

.proof-hero h2,
.resume-hero h2 {
    margin: 0;
    color: var(--ink);
    font-size: 46px;
    line-height: 0.98;
}

.proof-hero p,
.proof-summary p,
.proof-section p,
.resume-hero p {
    margin: 0;
    color: rgba(16, 19, 26, 0.72);
    font-size: 14px;
    line-height: 1.58;
}

.proof-media {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(16, 19, 26, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
}

.proof-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.proof-section-heading .section-head {
    flex: 1 1 auto;
}

.proof-section-heading strong {
    color: rgba(16, 19, 26, 0.62);
    font-size: 12px;
    font-weight: 520;
    text-align: right;
}

.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    overflow: hidden;
}

.media-card {
    display: grid;
    grid-template-rows: auto minmax(24px, auto);
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.56);
}

.media-card img,
.media-card video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(16, 19, 26, 0.1);
}

.media-card video {
    object-fit: contain;
    background: #0f1420;
}

.video-card {
    background: rgba(16, 19, 26, 0.06);
}

.proof-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.proof-summary section,
.proof-section {
    display: grid;
    gap: 10px;
    padding: 15px;
    border: 1px solid rgba(16, 19, 26, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
}

.proof-deep-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.proof-deep-grid .proof-section {
    align-content: start;
}

.proof-list,
.resume-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.proof-list li {
    display: grid;
    grid-template-columns: 8px 1fr;
    gap: 9px;
    color: rgba(16, 19, 26, 0.76);
    font-size: 13px;
    line-height: 1.45;
}

.proof-list li::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 0.45em;
    border-radius: 999px;
    background: var(--green);
}

.proof-tags,
.resume-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.proof-tags strong,
.resume-tags strong {
    padding: 7px 9px;
    border-radius: 7px;
    color: rgba(16, 19, 26, 0.78);
    background: rgba(16, 19, 26, 0.08);
    font-size: 11px;
    font-weight: 560;
}

.proof-tags.muted strong {
    color: rgba(16, 19, 26, 0.62);
    background: rgba(16, 19, 26, 0.055);
}

.proof-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.proof-actions button:first-child {
    color: white;
    background: var(--blue);
}

.proof-actions button:last-child {
    color: var(--ink);
    background: rgba(16, 19, 26, 0.08);
}

.assistant-body {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: auto 1fr auto auto;
    gap: 12px;
    min-height: 0;
    padding: 16px;
    background:
        linear-gradient(180deg, rgba(247, 248, 251, 0.96), rgba(255, 255, 255, 0.78));
}

.assistant-hero {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid rgba(16, 19, 26, 0.07);
    border-radius: 16px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 12px 28px rgba(21, 27, 42, 0.06);
}

.assistant-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 999px;
    color: white;
    background: #101114;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 12px 24px rgba(16, 17, 20, 0.18);
}

.assistant-orb::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 13px;
    background: radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.18), transparent 46%);
    mix-blend-mode: screen;
}

.assistant-orb i {
    position: relative;
    z-index: 1;
    font-size: 18px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.24));
}

.assistant-hero strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 680;
}

.assistant-hero p,
.message-content p,
.about-panel p {
    margin: 0;
    line-height: 1.55;
}

.assistant-hero p {
    color: rgba(16, 19, 26, 0.58);
    font-size: 13px;
    font-weight: 430;
}

.assistant-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 170px;
    overflow: auto;
    padding: 4px 4px 4px 0;
}

.message {
    width: min(100%, 620px);
    max-width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(16, 19, 26, 0.06);
    border-radius: 16px;
    color: rgba(16, 19, 26, 0.78);
    background: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.64),
        0 10px 22px rgba(21, 27, 42, 0.06);
}

.message.user {
    align-self: end;
    width: fit-content;
    max-width: min(86%, 460px);
    color: white;
    border-color: rgba(16, 19, 26, 0.16);
    background: #101114;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 10px 22px rgba(16, 19, 26, 0.16);
}

.message > strong {
    display: block;
    margin-bottom: 4px;
    color: rgba(16, 19, 26, 0.52);
    font-size: 11px;
    font-weight: 650;
    text-transform: none;
}

.message.user > strong {
    color: rgba(255, 255, 255, 0.74);
}

.message-content {
    display: grid;
    gap: 10px;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.message-content p {
    color: inherit;
    font-size: 13px;
    line-height: 1.55;
}

.message-content h4 {
    margin: 2px 0 0;
    color: inherit;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.25;
}

.message-content strong {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 720;
    line-height: inherit;
}

.message-content code {
    padding: 2px 5px;
    border-radius: 7px;
    color: inherit;
    background: rgba(16, 19, 26, 0.08);
    font-family: "SF Mono", "Cascadia Code", monospace;
    font-size: 0.92em;
}

.message.user .message-content code {
    background: rgba(255, 255, 255, 0.16);
}

.message-content ul,
.message-content ol {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.message-content ol {
    counter-reset: assistant-step;
}

.message-content li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    color: inherit;
    font-size: 13px;
    line-height: 1.45;
}

.message-content li > span {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: break-word;
}

.message-content li::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    margin-top: 0.62em;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.46;
}

.message-content ol li::before {
    content: counter(assistant-step) ".";
    counter-increment: assistant-step;
    flex: 0 0 18px;
    width: 18px;
    height: auto;
    margin-top: 0;
    color: currentColor;
    background: transparent;
    font-size: 11px;
    font-weight: 760;
    opacity: 0.58;
}

.assistant-bullet {
    display: block;
    margin: 5px 0 0;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 18px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(16, 19, 26, 0.36);
    animation: typingPulse 1.1s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes typingPulse {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.assistant-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.assistant-prompts button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(16, 19, 26, 0.06);
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.68);
    background: rgba(255, 255, 255, 0.66);
    cursor: pointer;
    font-size: 12px;
    font-weight: 560;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.assistant-prompts button:hover,
.assistant-prompts button:focus-visible {
    color: var(--blue);
    background: rgba(255, 255, 255, 0.84);
    outline: none;
}

.assistant-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
}

.assistant-input input,
.spotlight input {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
}

.assistant-input {
    min-height: 50px;
    padding: 6px;
    border: 1px solid rgba(16, 19, 26, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 10px 26px rgba(21, 27, 42, 0.07);
}

.assistant-input input {
    padding: 0 12px;
    font-size: 13px;
    font-weight: 480;
}

.assistant-input input::placeholder {
    color: rgba(16, 19, 26, 0.38);
}

.assistant-input button {
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: white;
    background: #101114;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 8px 18px rgba(16, 19, 26, 0.22);
}

.about-panel {
    display: grid;
    flex: 1 1 auto;
    gap: 14px;
    min-height: 0;
    padding: 16px;
    overflow: auto;
}

.about-hero-card {
    display: grid;
    grid-template-columns: 136px 1fr;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.46)),
        radial-gradient(circle at 0 0, rgba(16, 19, 26, 0.18), transparent 34%);
}

.about-hero-card img {
    width: 132px;
    align-self: end;
    filter: drop-shadow(0 18px 24px rgba(16, 19, 26, 0.25));
}

.about-panel h1,
.contact-card h2 {
    margin: 4px 0 10px;
    color: var(--ink);
    font-size: 38px;
    line-height: 1;
}

.about-intro p,
.about-section p,
.about-list small {
    color: rgba(16, 19, 26, 0.68);
    font-size: 13px;
    font-weight: 430;
    line-height: 1.56;
}

.about-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.about-stats strong {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(16, 19, 26, 0.08);
    font-size: 12px;
    font-weight: 560;
}

.about-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.about-section {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.54);
}

.about-section.wide {
    grid-column: 1 / -1;
}

.about-section h2 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.14;
}

.about-list {
    display: grid;
    gap: 10px;
}

.about-list li {
    display: grid;
    gap: 2px;
}

.about-list strong {
    color: rgba(16, 19, 26, 0.86);
    font-size: 13px;
    font-weight: 620;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 2px 0 4px;
}

.about-actions a:first-child,
.about-actions button:first-child {
    color: white;
    background: var(--blue);
}

.stack-library {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 14px;
    min-height: 0;
    padding: 16px;
    overflow: auto;
}

.stack-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(241, 246, 255, 0.64)),
        radial-gradient(circle at 8% 0%, rgba(16, 19, 26, 0.14), transparent 38%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 16px 36px rgba(21, 27, 42, 0.08);
}

.stack-hero span,
.stack-group-head span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 650;
}

.stack-hero h2 {
    margin: 4px 0 6px;
    color: var(--ink);
    font-size: clamp(30px, 5vw, 46px);
    line-height: 0.98;
}

.stack-hero p,
.stack-group p,
.stack-group small {
    margin: 0;
    color: rgba(16, 19, 26, 0.66);
    font-size: 13px;
    line-height: 1.5;
}

.stack-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 2px 12px;
    align-items: end;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
}

.stack-hero-stats strong {
    color: var(--ink);
    font-size: 28px;
    line-height: 0.95;
}

.stack-hero-stats span {
    align-self: center;
    color: rgba(16, 19, 26, 0.54);
    font-size: 11px;
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 12px;
}

.stack-group {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 238px;
    padding: 15px;
    border: 1px solid rgba(16, 19, 26, 0.1);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(247, 249, 253, 0.58));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 12px 28px rgba(21, 27, 42, 0.06);
}

.stack-group-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
}

.stack-group-head .project-glyph {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.stack-group-head strong {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 670;
    line-height: 1.12;
}

.stack-group small {
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(16, 19, 26, 0.045);
}

.stack-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-self: end;
}

.stack-items li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.72);
    background: rgba(16, 19, 26, 0.065);
    font-size: 11px;
    font-weight: 540;
}

.stack-items li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(16, 19, 26, 0.68);
}

.internship-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 16px;
    min-height: 0;
    padding: 16px;
    overflow: auto;
    background:
        linear-gradient(145deg, rgba(244, 247, 252, 0.88), rgba(255, 255, 255, 0.66)),
        radial-gradient(circle at 12% 4%, rgba(16, 19, 26, 0.12), transparent 30%),
        radial-gradient(circle at 100% 0, rgba(48, 209, 88, 0.1), transparent 32%);
}

.internship-panel > section {
    flex: 0 0 auto;
}

.internship-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.36fr);
    gap: 14px;
    align-items: stretch;
}

.internship-hero-copy,
.internship-hero-card,
.internship-highlight-card,
.internship-summary-panel,
.internship-summary-item,
.internship-docs,
.internship-viewer,
.internship-presentation,
.internship-route,
.internship-project-card {
    border: 1px solid rgba(16, 19, 26, 0.08);
    background: rgba(255, 255, 255, 0.68);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 16px 36px rgba(21, 27, 42, 0.07);
}

.internship-hero-copy,
.internship-hero-card {
    border-radius: 24px;
    padding: 20px;
}

.internship-hero-copy span,
.internship-section-title small,
.internship-viewer-head span,
.internship-doc-card > span,
.internship-doc-card small {
    color: rgba(16, 19, 26, 0.54);
    font-size: 12px;
    font-weight: 620;
}

.internship-hero-copy > span {
    color: var(--blue);
}

.internship-hero-copy h2 {
    max-width: 780px;
    margin: 6px 0 8px;
    color: var(--ink);
    font-size: clamp(32px, 5vw, 54px);
    line-height: 0.98;
}

.internship-hero-copy p,
.internship-doc-card p,
.internship-empty-preview p,
.internship-project-card p {
    margin: 0;
    color: rgba(16, 19, 26, 0.66);
    font-size: 13px;
    line-height: 1.5;
}

.internship-hero-card {
    display: grid;
    align-content: center;
    gap: 8px;
}

.internship-hero-card .case-note-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
}

.internship-hero-card strong {
    color: var(--ink);
    font-size: 22px;
    line-height: 1.06;
}

.internship-hero-card small {
    color: rgba(16, 19, 26, 0.55);
    font-weight: 560;
}

.internship-snapshot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.internship-highlight-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 148px;
    padding: 15px;
    border-radius: 22px;
}

.internship-highlight-card span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 680;
}

.internship-highlight-card strong {
    color: var(--ink);
    font-size: 21px;
    line-height: 1.08;
}

.internship-highlight-card p,
.internship-summary-item p,
.internship-project-list,
.internship-project-proof,
.internship-route p {
    margin: 0;
    color: rgba(16, 19, 26, 0.66);
    font-size: 13px;
    line-height: 1.5;
}

.internship-summary-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border-radius: 24px;
}

.internship-summary-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.internship-summary-item {
    display: grid;
    gap: 10px;
    min-height: 172px;
    padding: 14px;
    border-radius: 18px;
}

.internship-summary-item > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: white;
    background: #111318;
    font-size: 13px;
    font-weight: 720;
    letter-spacing: 0;
    box-shadow: 0 12px 24px rgba(16, 19, 26, 0.16);
}

.internship-summary-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.16;
}

.internship-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
    gap: 14px;
    align-items: stretch;
}

.internship-docs,
.internship-viewer,
.internship-presentation,
.internship-route {
    min-height: 0;
    border-radius: 24px;
    overflow: hidden;
}

.internship-presentation,
.internship-route {
    overflow: visible;
}

.internship-docs,
.internship-presentation,
.internship-route {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.internship-section-title,
.internship-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.internship-section-title .section-head {
    margin: 0;
}

.internship-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.internship-doc-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 178px;
    padding: 13px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 18px;
    background: rgba(246, 248, 252, 0.76);
    text-align: left;
}

button.internship-doc-card {
    cursor: pointer;
}

button.internship-doc-card:hover,
button.internship-doc-card:focus-visible,
.internship-doc-card.active {
    border-color: rgba(16, 19, 26, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(235, 244, 255, 0.72));
    outline: none;
}

.internship-doc-card.empty {
    color: rgba(16, 19, 26, 0.72);
}

.internship-doc-card .case-note-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
}

.internship-doc-card strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.1;
}

.internship-doc-card small {
    align-self: end;
    color: var(--blue);
}

.internship-viewer {
    display: grid;
    grid-template-rows: auto minmax(280px, 1fr);
    background: rgba(238, 241, 247, 0.78);
}

.internship-viewer-head {
    min-height: 58px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(16, 19, 26, 0.08);
    background: rgba(255, 255, 255, 0.58);
}

.internship-viewer-head div {
    display: grid;
    gap: 2px;
}

.internship-viewer-head strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.1;
}

.internship-document-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.internship-viewer-head a,
.internship-open-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: white;
    text-decoration: none;
    background: var(--blue);
    font-size: 12px;
    font-weight: 650;
}

.internship-viewer-head a.muted {
    color: rgba(16, 19, 26, 0.78);
    background: rgba(16, 19, 26, 0.08);
}

.internship-pdf-frame {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
    background: white;
}

.internship-html-frame {
    width: 100%;
    height: 100%;
    min-height: 620px;
    border: 0;
    background: #eef1f6;
}

.internship-empty-preview {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    min-height: 360px;
    padding: 34px;
    text-align: center;
}

.internship-empty-preview .case-note-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
}

.internship-empty-preview strong {
    color: var(--ink);
    font-size: 22px;
    line-height: 1.08;
}

.internship-empty-preview small {
    padding: 6px 10px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.58);
    background: rgba(16, 19, 26, 0.06);
    font-size: 11px;
    font-weight: 650;
}

.internship-project-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.internship-project-card {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 14px;
    flex: 1 1 min(520px, 100%);
    min-height: 246px;
    padding: 14px;
    border-radius: 22px;
}

.internship-project-icon {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 150px;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(226, 232, 241, 0.64)),
        radial-gradient(circle at 30% 18%, rgba(16, 19, 26, 0.22), transparent 38%);
}

.internship-project-icon.ai {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(235, 236, 239, 0.68)),
        radial-gradient(circle at 20% 18%, rgba(16, 19, 26, 0.26), transparent 42%);
}

.internship-project-icon.data {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(238, 239, 241, 0.72)),
        radial-gradient(circle at 24% 22%, rgba(16, 19, 26, 0.18), transparent 42%);
}

.internship-project-icon.app {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(232, 234, 238, 0.72)),
        radial-gradient(circle at 24% 22%, rgba(16, 19, 26, 0.2), transparent 42%);
}

.internship-project-icon .project-glyph {
    width: 54px;
    height: 54px;
    border-radius: 18px;
}

.internship-project-icon > span:last-child {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.58);
    background: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 750;
}

.internship-project-media {
    position: relative;
    overflow: hidden;
    min-height: 166px;
    border-radius: 16px;
    background: rgba(16, 19, 26, 0.08);
}

.internship-project-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 166px;
    object-fit: cover;
}

.internship-project-media span {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    color: white;
    background: rgba(0, 0, 0, 0.58);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.internship-project-copy {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}

.internship-project-card .case-hero-kicker {
    color: rgba(16, 19, 26, 0.66);
}

.internship-project-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.05;
}

.internship-project-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.internship-project-stack strong {
    padding: 5px 8px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.68);
    background: rgba(16, 19, 26, 0.065);
    font-size: 11px;
    line-height: 1;
}

.internship-project-list {
    display: grid;
    gap: 6px;
    padding: 0;
    list-style: none;
}

.internship-project-list li {
    position: relative;
    padding-left: 16px;
}

.internship-project-list li::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--blue);
}

.internship-project-proof {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(16, 19, 26, 0.08);
}

.internship-project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.internship-project-actions button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.8);
    background: rgba(16, 19, 26, 0.07);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.internship-project-actions button:first-child {
    color: white;
    background: var(--blue);
}

.internship-project-actions button:hover,
.internship-project-actions button:focus-visible {
    filter: brightness(0.98);
    outline: none;
}

.internship-route ol {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.internship-route li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    flex: 1 1 260px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(246, 248, 252, 0.78);
}

.internship-route li > span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: white;
    background: var(--blue);
    font-size: 12px;
    font-weight: 760;
}

.internship-route strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 15px;
}

.resume-sheet {
    display: grid;
    flex: 1 1 auto;
    gap: 16px;
    min-height: 0;
    padding: 18px;
    overflow: auto;
}

.resume-hero {
    display: grid;
    grid-template-columns: 1fr 132px;
    gap: 18px;
    align-items: end;
    padding: 20px;
    border-radius: 12px;
    color: white;
    background:
        linear-gradient(135deg, rgba(16, 19, 26, 0.92), rgba(23, 48, 78, 0.82)),
        url("assets/story/prologue-lab.png") center / cover;
}

.resume-hero span,
.resume-hero h2,
.resume-hero p {
    color: white;
}

.resume-hero p {
    color: rgba(255, 255, 255, 0.78);
}

.resume-hero img {
    width: 132px;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.28));
}

.resume-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 12px;
}

.resume-grid section {
    display: grid;
    gap: 11px;
    padding: 15px;
    border: 1px solid rgba(16, 19, 26, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.52);
}

.resume-list li {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(16, 19, 26, 0.055);
}

.resume-list strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.resume-list small {
    color: rgba(16, 19, 26, 0.64);
    font-size: 12px;
    line-height: 1.4;
}

.resume-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.resume-actions button:first-child {
    color: white;
    background: var(--blue);
}

.resume-actions button:nth-child(2) {
    color: var(--ink);
    background: rgba(16, 19, 26, 0.08);
}

.resume-actions a {
    color: white;
    background: var(--violet);
}

.resume-preview-shell {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 0;
    background:
        linear-gradient(135deg, rgba(240, 243, 249, 0.86), rgba(255, 255, 255, 0.62)),
        radial-gradient(circle at 0 0, rgba(16, 19, 26, 0.12), transparent 28%);
    overflow: hidden;
}

.resume-preview-sidebar {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 18px;
    border-right: 1px solid rgba(16, 19, 26, 0.09);
    background: rgba(255, 255, 255, 0.46);
    overflow: auto;
}

.resume-file-icon {
    width: 70px;
    height: 70px;
}

.resume-file-icon img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 22%;
    object-fit: cover;
    box-shadow: 0 14px 24px rgba(16, 19, 26, 0.18);
}

.resume-preview-sidebar h2 {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.08;
}

.resume-preview-sidebar p {
    margin: 0;
    color: rgba(16, 19, 26, 0.66);
    font-size: 13px;
    line-height: 1.5;
}

.resume-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.resume-file-meta strong {
    padding: 7px 9px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.76);
    background: rgba(16, 19, 26, 0.07);
    font-size: 11px;
    font-weight: 560;
}

.resume-preview-sidebar .resume-actions {
    display: grid;
    gap: 9px;
}

.resume-preview-sidebar .resume-actions a,
.resume-preview-sidebar .resume-actions button {
    justify-content: center;
    min-height: 38px;
}

.resume-preview-sidebar .resume-actions button {
    color: var(--ink);
    background: rgba(16, 19, 26, 0.08);
    box-shadow: none;
}

.resume-pdf-stage {
    display: grid;
    place-items: start center;
    min-width: 0;
    min-height: 0;
    padding: 22px;
    overflow: auto;
}

.resume-page-render {
    width: min(100%, 900px);
    min-width: min(720px, 100%);
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(16, 19, 26, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 20px 60px rgba(16, 19, 26, 0.14);
}

.resume-page-render img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 2px rgba(16, 19, 26, 0.1);
}

.mail-app {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 214px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(244, 247, 252, 0.96), rgba(255, 255, 255, 0.7)),
        radial-gradient(circle at 0 0, rgba(16, 19, 26, 0.1), transparent 32%);
}

.mail-sidebar {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 16px 12px;
    border-right: 1px solid rgba(16, 19, 26, 0.09);
    background: rgba(255, 255, 255, 0.5);
    overflow: auto;
}

.mail-sidebar > span {
    margin: 4px 4px 8px;
    color: rgba(16, 19, 26, 0.5);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
}

.mail-sidebar button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 11px;
    color: rgba(16, 19, 26, 0.76);
    background: transparent;
    font-size: 13px;
    font-weight: 560;
    cursor: pointer;
}

.mail-sidebar button.active,
.mail-sidebar button:hover,
.mail-sidebar button:focus-visible {
    color: var(--ink);
    background: rgba(16, 19, 26, 0.13);
    outline: none;
}

.mail-sidebar button i {
    width: 17px;
    color: rgba(16, 19, 26, 0.92);
    text-align: center;
}

.mail-contact-card {
    display: grid;
    gap: 3px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
}

.mail-contact-card strong {
    color: var(--ink);
    font-size: 13px;
}

.mail-contact-card small {
    min-width: 0;
    color: rgba(16, 19, 26, 0.58);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mail-compose {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.mail-compose input[name="_honey"] {
    display: none;
}

.mail-compose-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(16, 19, 26, 0.08);
    background: rgba(255, 255, 255, 0.62);
}

.mail-compose-title {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.mail-compose-title strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
}

.mail-compose-title span {
    color: rgba(16, 19, 26, 0.48);
    font-size: 12px;
    font-weight: 520;
}

.mail-compose-controls {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
}

.mail-compose-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: rgba(16, 19, 26, 0.74);
    background: rgba(16, 19, 26, 0.06);
    font-size: 12px;
    font-weight: 620;
    text-decoration: none;
    cursor: pointer;
}

.mail-compose-controls .mail-send {
    color: white;
    background: linear-gradient(180deg, #2f9aff, #0879ee);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 10px 20px rgba(16, 19, 26, 0.22);
}

.mail-fields {
    display: grid;
    background: rgba(255, 255, 255, 0.58);
}

.mail-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    min-height: 46px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(16, 19, 26, 0.08);
}

.mail-row span,
.mail-row label {
    color: rgba(16, 19, 26, 0.48);
    font-size: 12px;
    font-weight: 650;
}

.mail-row p,
.mail-row a,
.mail-row input {
    min-width: 0;
    margin: 0;
    border: 0;
    outline: 0;
    color: rgba(16, 19, 26, 0.82);
    background: transparent;
    font-size: 14px;
    font-weight: 520;
    font-family: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.mail-row input::placeholder {
    color: rgba(16, 19, 26, 0.36);
}

.mail-row input:focus {
    color: var(--ink);
}

.mail-message {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
    margin: 18px;
    padding: 28px;
    overflow: auto;
    border: 1px solid rgba(16, 19, 26, 0.08);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 22px 54px rgba(21, 27, 42, 0.1);
}

.mail-message label {
    color: rgba(16, 19, 26, 0.48);
    font-size: 12px;
    font-weight: 650;
}

.mail-message textarea {
    width: 100%;
    min-height: 250px;
    resize: vertical;
    border: 0;
    outline: 0;
    color: rgba(16, 19, 26, 0.82);
    background: transparent;
    font: inherit;
    font-size: 15px;
    line-height: 1.6;
}

.mail-message p {
    max-width: 62ch;
    margin: 0;
    color: rgba(16, 19, 26, 0.75);
    font-size: 15px;
    line-height: 1.6;
}

.mail-message footer {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(16, 19, 26, 0.08);
}

.mail-message footer strong {
    color: var(--ink);
    font-size: 14px;
}

.mail-message footer span {
    color: rgba(16, 19, 26, 0.56);
    font-size: 12px;
    line-height: 1.4;
}

.spotlight {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(70px, 14vh, 140px);
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.spotlight.open {
    display: flex;
}

.spotlight-panel {
    width: min(720px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 16px;
    background: rgba(245, 247, 252, 0.86);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32);
}

.spotlight label {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(16, 19, 26, 0.1);
}

.spotlight input {
    font-size: 20px;
    font-weight: 500;
}

.spotlight-results {
    display: grid;
    max-height: min(470px, 54vh);
    overflow: auto;
    padding: 8px;
}

.spotlight-result {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 9px 10px;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.spotlight-result:hover,
.spotlight-result:focus-visible {
    background: rgba(16, 19, 26, 0.12);
    outline: none;
}

.spotlight-result img,
.spotlight-result .result-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    object-fit: cover;
    background: rgba(16, 19, 26, 0.08);
}

.spotlight-result strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.spotlight-result span {
    color: var(--muted);
    font-size: 12px;
}

.dock {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 1100;
    display: flex;
    gap: 8px;
    min-height: 76px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 22px;
    background: rgba(245, 247, 252, 0.46);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(30px) saturate(1.35);
    -webkit-backdrop-filter: blur(30px) saturate(1.35);
    transform: translateX(-50%);
    transition:
        opacity 260ms ease,
        transform 320ms var(--ease-macos),
        background 260ms ease,
        box-shadow 260ms var(--ease-macos);
    pointer-events: none;
}

body.has-zoomed-window .dock {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(100% + 34px));
}

.dock button {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 15px;
    color: white;
    background: linear-gradient(160deg, rgba(57, 64, 80, 0.95), rgba(16, 19, 26, 0.78));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -12px 22px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    pointer-events: auto;
    transform-origin: 50% 100%;
    transition:
        transform 260ms var(--ease-macos),
        filter 180ms ease;
}

.dock button::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.dock button:nth-child(1) {
    background: linear-gradient(160deg, #f5f5f5, #111318 58%, #0757c8);
}

.dock button:nth-child(2) {
    background: linear-gradient(160deg, #f4f4f5, #2d3036 58%, #101217);
}

.dock button:nth-child(3) {
    background: linear-gradient(160deg, #c8b5ff, #7b61ff 58%, #3b2aa8);
}

.dock button:nth-child(4) {
    background: linear-gradient(160deg, #8ef7a5, #30d158 58%, #138d35);
}

.dock button:nth-child(5) {
    background: linear-gradient(160deg, #ffffff, #dbe5f4 58%, #9eaec5);
    color: #253143;
}

.dock button:nth-child(6) {
    background: linear-gradient(160deg, #ffdca0, #ff9f0a 58%, #c96500);
}

.dock button:hover,
.dock button:focus-visible {
    transform: translateY(-7px) scale(1.08);
    outline: none;
}

.dock button:active {
    transform: translateY(-2px) scale(0.98);
}

.dock button,
.dock button:nth-child(1),
.dock button:nth-child(2),
.dock button:nth-child(3),
.dock button:nth-child(4),
.dock button:nth-child(5),
.dock button:nth-child(6) {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dock button::before {
    display: none;
}

.dock i {
    display: none;
}

.dock .dock-glyph {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    transform: scale(0.92);
}

.dock .dock-glyph.os-icon-projects {
    transform: scale(0.88);
}

.dock .dock-glyph.os-icon-projects .folder-tab {
    left: 8px;
    top: 7px;
}

.dock .dock-glyph.os-icon-projects .folder-body {
    inset: 16px 3px 4px;
}

.dock .dock-glyph.os-icon-about img {
    width: 41px;
}

.dock-glyph-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    overflow: hidden;
    border-radius: 22%;
    background: transparent;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.35);
    transition:
        transform 260ms var(--ease-macos),
        box-shadow 260ms var(--ease-macos),
        filter 180ms ease;
}

.dock .dock-label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    width: max-content;
    max-width: min(130px, 42vw);
    padding: 4px 7px;
    border-radius: 6px;
    color: white;
    background: rgba(0, 0, 0, 0.72);
    font-size: 10px;
    font-weight: 520;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px) scale(0.96);
    transition:
        opacity 150ms ease,
        transform 200ms var(--ease-macos);
}

.dock button:hover .dock-label,
.dock button:focus-visible .dock-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.dock button:hover .dock-glyph-img,
.dock button:focus-visible .dock-glyph-img {
    box-shadow:
        0 13px 22px rgba(0, 0, 0, 0.24),
        0 1px 0 rgba(255, 255, 255, 0.38);
    transform: translateY(-3px) scale(1.055);
}

@media (prefers-reduced-motion: reduce) {
    .boot-screen,
    .boot-stage,
    .boot-continue,
    .boot-continue-arrow,
    .window,
    .desktop-icon,
    .app-icon-img,
    .project-card,
    .dock,
    .dock button,
    .dock-glyph-img,
    .dock .dock-label {
        transition: none;
    }

    .boot-screen,
    .boot-card,
    .boot-card-main,
    .boot-card-main::after,
    .window.open,
    .window.closing,
    .project-card {
        animation: none;
    }

    .boot-hello-path {
        animation-duration: 1ms;
    }
}

@media (max-width: 760px) {
    .boot-screen {
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 10px;
        padding: max(18px, env(safe-area-inset-top)) 16px max(26px, env(safe-area-inset-bottom));
    }

    .boot-stage {
        width: min(100%, 430px);
        height: min(66vh, 430px);
    }

    .boot-screen.is-ready .boot-stage {
        transform: translateY(-34px) scale(0.94);
    }

    .boot-card {
        border-radius: 22px;
    }

    .boot-card-main {
        min-height: 320px;
        padding: 18px;
    }

    .boot-card-back-one {
        --boot-card-rest: translate(18px, 24px) rotate(4deg);
        --boot-card-float: translate(10px, 16px) rotate(2.3deg);
    }

    .boot-card-back-two {
        --boot-card-rest: translate(-18px, 38px) rotate(-5deg);
        --boot-card-float: translate(-9px, 29px) rotate(-3deg);
    }

    .boot-hello-frame {
        min-height: 124px;
    }

    .boot-card-footer strong {
        font-size: 34px;
    }

    .boot-continue {
        min-height: 52px;
        padding-left: 18px;
        transform: translateY(8px);
    }

    .boot-screen.is-ready .boot-continue {
        transform: translateY(-10px);
    }

    .boot-continue span:first-child {
        font-size: 14px;
    }

    .boot-continue-arrow {
        width: 40px;
        height: 40px;
    }

    body.portfolio-os {
        overflow: hidden;
        background: #05070d;
    }

    .menu-left button:not(.menu-brand),
    .status-pill {
        display: none;
    }

    .menu-bar {
        min-height: 42px;
        padding: 0 14px;
        background: rgba(5, 7, 13, 0.42);
        border-bottom: 0;
        color: white;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .menu-left strong,
    .menu-right,
    .menu-right button,
    .menu-right time {
        color: rgba(255, 255, 255, 0.92);
    }

    .desktop {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding: 64px 18px 108px;
    }

    .desktop-icons {
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        grid-template-columns: repeat(3, 94px);
        justify-items: center;
        justify-content: center;
        gap: 22px 12px;
        width: min(100%, 342px);
        max-width: 420px;
        margin: 8px auto 0;
    }

    .desktop-icon {
        width: 94px;
        min-width: 0;
    }

    .desktop-icon strong {
        color: white;
        font-size: 12px;
        font-weight: 560;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }

    .app-icon-img {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        box-shadow:
            0 12px 22px rgba(0, 0, 0, 0.18),
            0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .os-icon {
        width: 58px;
        height: 54px;
        border-radius: 16px;
    }

    .window {
        position: fixed;
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-width: 0;
        min-height: 0;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: #f5f6fa;
        box-shadow: none;
        transform: translateY(22px) scale(0.97);
        opacity: 0;
        pointer-events: none;
        transition:
            transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
            opacity 220ms ease;
    }

    .window.open {
        display: flex;
        animation: none;
    }

    .window.open.active {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .window.closing {
        display: flex;
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px) scale(0.985);
        animation: none;
    }

    .window.open:not(.active) {
        display: none;
    }

    .window.zoomed,
    .assistant-window.contextual {
        position: fixed;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .window-titlebar {
        grid-template-columns: auto 1fr auto;
        min-height: 56px;
        padding: max(10px, env(safe-area-inset-top)) 14px 10px;
        border-bottom: 1px solid rgba(16, 19, 26, 0.08);
        background: rgba(250, 250, 252, 0.9);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .window-titlebar strong {
        justify-self: center;
        font-size: 14px;
    }

    .traffic-lights {
        gap: 6px;
    }

    .traffic-lights .minimize,
    .traffic-lights .zoom {
        display: none;
    }

    .traffic-lights .close {
        width: auto;
        height: 30px;
        min-width: 54px;
        padding: 0 12px;
        border-radius: 999px;
        color: var(--blue);
        background: rgba(16, 19, 26, 0.1);
        font-size: 0;
    }

    .traffic-lights .close::before {
        content: "Done";
        font-size: 13px;
        font-weight: 650;
    }

    body:has(.window.open.active) .desktop-icons {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.96);
    }

    .finder-body,
    .case-file,
    .proof-dossier,
    .assistant-body,
    .about-panel,
    .stack-library,
    .internship-panel,
    .resume-preview-shell,
    .mail-app {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow: auto;
        padding-bottom: max(22px, env(safe-area-inset-bottom));
    }

    .case-file,
    .proof-dossier,
    .about-panel,
    .stack-library,
    .internship-panel,
    .assistant-body {
        padding: 14px;
    }

    .case-file {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 14px;
        background: #f5f6fa;
    }

    .case-hero {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
        min-height: 330px;
        height: auto;
        padding: 14px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.82);
    }

    .case-hero img {
        position: relative;
        inset: auto;
        width: 100%;
        height: 190px;
        object-fit: contain;
        border-radius: 18px;
        background: rgba(16, 19, 26, 0.06);
    }

    .case-hero::after {
        display: none;
    }

    .case-hero-content {
        margin-top: 0;
        color: var(--ink);
    }

    .case-hero-content .case-hero-kicker > span:last-child {
        color: var(--blue);
    }

    .case-hero-content h1 {
        color: var(--ink);
    }

    .case-detail {
        gap: 12px;
        padding: 0;
    }

    .case-media-strip {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 2px 2px 12px;
        scroll-snap-type: x proximity;
    }

    .case-media-tile {
        flex: 0 0 84%;
        min-width: 0;
        padding: 10px;
        border: 1px solid rgba(16, 19, 26, 0.08);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.82);
        scroll-snap-align: start;
    }

    .case-media-tile img,
    .case-media-tile video {
        height: 210px;
        object-fit: contain;
        border-radius: 14px;
    }

    .case-window.zoomed .case-file {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 12px;
        max-width: none;
        overflow: auto;
    }

    .case-window.zoomed .case-file {
        overflow: auto;
    }

    .case-window.zoomed .case-hero {
        grid-template-columns: 96px minmax(0, 1fr);
        height: auto;
    }

    .case-window.zoomed .case-hero img {
        width: 96px;
        height: 72px;
    }

    .case-window.zoomed .case-hero-content h1 {
        max-width: none;
        font-size: 36px;
    }

    .case-window.zoomed .case-detail {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "tags"
            "summary"
            "notes"
            "features"
            "actions";
        overflow: visible;
        padding: 0;
    }

    .case-window.zoomed .case-media-strip {
        display: flex;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        padding: 2px 2px 12px;
    }

    .case-window.zoomed .case-media-tile {
        flex: 0 0 84%;
        min-width: 0;
    }

    .case-window.zoomed .case-media-tile img,
    .case-window.zoomed .case-media-tile video {
        height: 220px;
    }

    .resume-preview-shell {
        display: flex;
        flex-direction: column;
        background: #eef1f7;
    }

    .internship-hero,
    .internship-layout,
    .internship-summary-list,
    .internship-project-grid {
        grid-template-columns: 1fr;
    }

    .internship-snapshot,
    .internship-route ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .internship-hero-copy,
    .internship-hero-card,
    .internship-highlight-card,
    .internship-summary-panel,
    .internship-summary-item,
    .internship-docs,
    .internship-viewer,
    .internship-presentation,
    .internship-route {
        border-radius: 22px;
    }

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

    .internship-project-card {
        grid-template-columns: 136px minmax(0, 1fr);
    }

    .internship-document-actions {
        justify-content: flex-start;
    }

    .resume-preview-sidebar {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 10px 12px;
        align-items: center;
        flex: 0 0 auto;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(16, 19, 26, 0.09);
        background: rgba(255, 255, 255, 0.74);
    }

    .resume-file-icon {
        grid-row: span 3;
        width: 58px;
        height: 58px;
    }

    .resume-preview-sidebar h2 {
        font-size: 15px;
    }

    .resume-preview-sidebar p {
        display: none;
    }

    .resume-file-meta,
    .resume-preview-sidebar .resume-actions {
        grid-column: 1 / -1;
    }

    .resume-pdf-stage {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        padding: 12px;
        overflow: auto;
    }

    .resume-page-render {
        min-width: 0;
        width: 100%;
        padding: 8px;
        border-radius: 14px;
    }

    .mail-app {
        display: block;
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .mail-sidebar {
        display: none;
    }

    .mail-compose {
        min-height: 100%;
    }

    .finder-body {
        display: flex;
        flex-direction: column;
        background: #f5f6fa;
    }

    .finder-sidebar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 10px 12px 0;
        padding: 0 0 8px;
        border-right: 0;
        border-bottom: 0;
        border-radius: 0;
        background: transparent;
        scrollbar-width: none;
    }

    .finder-sidebar::-webkit-scrollbar {
        display: none;
    }

    .finder-sidebar button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        min-height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        white-space: nowrap;
        color: rgba(16, 19, 26, 0.62);
        background: rgba(16, 19, 26, 0.06);
        font-size: 12px;
        font-weight: 650;
    }

    .finder-sidebar button.active {
        color: white;
        background: #111216;
        box-shadow: 0 4px 12px rgba(16, 19, 26, 0.14);
    }

    .finder-sidebar button:hover,
    .finder-sidebar button:focus-visible {
        color: var(--ink);
        background: white;
        box-shadow: 0 3px 10px rgba(16, 19, 26, 0.08);
    }

    .finder-sidebar button[data-open-window] {
        display: none;
    }

    .finder-sidebar button i {
        display: none;
    }

    .finder-content {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 10px 14px 28px;
    }

    .finder-path {
        min-height: 24px;
        margin: 2px 0 10px;
        padding: 0;
        color: rgba(16, 19, 26, 0.58);
        font-size: 12px;
    }

    .project-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
        min-height: 0;
        padding: 0 0 22px;
        overflow: visible;
    }

    .project-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        gap: 4px 12px;
        align-items: start;
        min-height: 0;
        padding: 10px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 8px 22px rgba(21, 27, 42, 0.06);
    }

    .project-thumb {
        grid-row: 1 / span 3;
        width: 112px;
        height: 92px;
        border-radius: 14px;
    }

    .project-thumb img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .project-thumb small {
        display: none;
    }

    .project-card-head,
    .project-card strong,
    .project-card p,
    .project-card ul {
        grid-column: 2;
    }

    .project-card-head {
        gap: 8px;
    }

    .project-glyph {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .project-glyph svg {
        width: 16px;
        height: 16px;
    }

    .project-title-stack span {
        font-size: 11px;
        line-height: 1.1;
    }

    .project-title-stack strong {
        grid-column: auto;
    }

    .project-card strong {
        font-size: 18px;
        line-height: 1.12;
    }

    .project-card p {
        font-size: 12px;
        line-height: 1.35;
        -webkit-line-clamp: 2;
    }

    .project-card ul {
        gap: 5px;
        margin-top: 2px;
    }

    .project-card li {
        padding: 4px 6px;
        border-radius: 999px;
        font-size: 10px;
    }

    .assistant-body {
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    .assistant-hero {
        border-radius: 20px;
    }

    .assistant-prompts {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .assistant-prompts button {
        flex: 0 0 auto;
    }

    .about-hero-card,
    .about-section,
    .stack-group,
    .proof-hero,
    .proof-summary section,
    .proof-section {
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.82);
    }

    .stack-library {
        gap: 12px;
    }

    .stack-window.zoomed .stack-library {
        max-width: none;
        padding: 14px;
        grid-template-columns: 1fr;
        align-content: start;
    }

    .stack-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        border-radius: 22px;
    }

    .stack-window.zoomed .stack-hero {
        position: relative;
        top: auto;
        min-height: 0;
        align-content: start;
    }

    .stack-hero-stats {
        grid-template-columns: auto auto;
        justify-content: start;
        width: max-content;
        max-width: 100%;
        padding: 9px 11px;
    }

    .stack-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stack-group,
    .stack-window.zoomed .stack-group {
        min-height: 0;
        gap: 10px;
        padding: 14px;
    }

    .stack-group-head {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .stack-group-head .project-glyph {
        width: 36px;
        height: 36px;
    }

    .stack-items {
        align-self: start;
    }

    .mail-compose-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .mail-compose-controls {
        justify-content: start;
        flex-wrap: wrap;
    }

    .mail-row {
        grid-template-columns: 62px minmax(0, 1fr);
        padding: 0 14px;
    }

    .mail-message {
        margin: 12px;
        padding: 18px;
    }

    .finder-sidebar span {
        display: none;
    }

    .finder-search {
        display: none;
    }

    .about-panel {
        grid-template-columns: 1fr;
    }

    .about-hero-card {
        grid-template-columns: 1fr;
    }

    .about-hero-card img {
        width: 118px;
    }

    .about-section-grid {
        grid-template-columns: 1fr;
    }

    .proof-hero,
    .proof-summary,
    .resume-hero,
    .resume-grid {
        grid-template-columns: 1fr;
    }

    .proof-hero > div {
        align-content: start;
    }

    .proof-hero img {
        min-height: 180px;
    }

    .case-hero-content h1,
    .proof-hero h2,
    .resume-hero h2 {
        font-size: 34px;
        line-height: 1;
    }

    .about-panel h1,
    .contact-card h2 {
        font-size: 30px;
        line-height: 1.04;
    }

    .resume-hero img {
        width: 112px;
    }

    .dock {
        display: grid;
        grid-template-columns: repeat(5, 54px);
        gap: 6px;
        width: max-content;
        max-width: calc(100vw - 18px);
        min-height: 72px;
        justify-content: center;
        bottom: max(12px, env(safe-area-inset-bottom));
        padding: 9px;
        border-radius: 28px;
        border-color: rgba(255, 255, 255, 0.34);
        background: rgba(246, 248, 252, 0.3);
        backdrop-filter: blur(24px) saturate(1.35);
        -webkit-backdrop-filter: blur(24px) saturate(1.35);
    }

    .dock button {
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
    }

    .dock-glyph-img {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        box-shadow:
            0 9px 16px rgba(0, 0, 0, 0.18),
            0 1px 0 rgba(255, 255, 255, 0.34);
    }

    .dock .dock-label {
        display: none;
    }
}

@media (max-width: 560px) {
    .desktop-icons {
        grid-template-columns: repeat(3, 88px);
        width: min(100%, 312px);
        gap: 22px 8px;
    }

    .desktop-icon {
        width: 88px;
    }

    .window-titlebar {
        grid-template-columns: auto 1fr auto;
    }

    .window-titlebar .toolbar-button {
        display: grid;
    }

    .finder-sidebar {
        display: flex;
        flex-direction: row;
    }

    .project-grid {
        grid-template-columns: 1fr !important;
    }

    .project-card {
        grid-template-columns: 88px minmax(0, 1fr);
        padding: 9px;
        border-radius: 16px;
    }

    .project-thumb {
        width: 88px;
        height: 78px;
        border-radius: 12px;
    }

    .project-card p {
        display: none;
    }

    .case-media-strip {
        grid-template-columns: 1fr;
    }

    .spotlight input {
        font-size: 16px;
    }

    .dock button {
        width: 50px;
        height: 50px;
    }

    .dock {
        grid-template-columns: repeat(5, 50px);
    }

    .dock-glyph-img {
        width: 48px;
        height: 48px;
    }

    .stack-hero h2 {
        font-size: 30px;
        line-height: 1.02;
    }

    .stack-hero p,
    .stack-group p,
    .stack-group small {
        font-size: 12px;
    }

    .stack-hero-stats strong {
        font-size: 23px;
    }

    .stack-items li {
        padding: 5px 7px;
        font-size: 10px;
    }

    .internship-panel {
        gap: 12px;
        padding: 12px;
    }

    .internship-hero-copy,
    .internship-hero-card,
    .internship-highlight-card,
    .internship-summary-panel,
    .internship-summary-item,
    .internship-docs,
    .internship-presentation,
    .internship-route {
        padding: 12px;
    }

    .internship-hero-copy h2 {
        font-size: 30px;
        line-height: 1.02;
    }

    .internship-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .internship-doc-grid,
    .internship-project-grid,
    .internship-summary-list,
    .internship-snapshot,
    .internship-route ol {
        grid-template-columns: 1fr;
    }

    .internship-doc-card {
        min-height: 0;
    }

    .internship-project-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .internship-project-media,
    .internship-project-media img,
    .internship-project-icon {
        min-height: 170px;
    }

    .internship-empty-preview,
    .internship-pdf-frame,
    .internship-html-frame {
        min-height: 520px;
    }
}