:root {
  color-scheme: light;
  --bg-color: #e8e6dc;
  --text-color: #1e2629;
  --accent-green: #74a12e;
  --name-gradient: linear-gradient(120deg, #ff8147, #47e0ff);
  --font-family-base: "Google Sans", "Segoe UI", sans-serif;
  --headline-size: 80px;
  --selection-bg: linear-gradient(
    120deg,
    rgba(255, 129, 71, 0.42) 0%,
    rgba(71, 224, 255, 0.42) 100%
  );
  --highlight-bg: linear-gradient(
    120deg,
    rgba(255, 129, 71, 0.18) 0%,
    rgba(71, 224, 255, 0.18) 100%
  );
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #111213;
  --text-color: #e9f0f3;
  --selection-bg: linear-gradient(
    120deg,
    rgba(255, 129, 71, 0.56) 0%,
    rgba(71, 224, 255, 0.56) 100%
  );
  --highlight-bg: linear-gradient(
    120deg,
    rgba(255, 129, 71, 0.22) 0%,
    rgba(71, 224, 255, 0.22) 100%
  );
}


* {
    box-sizing:border-box
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: clamp(1.25rem, 6vw, 2.5rem);
    padding-left: clamp(2.25rem, 9vw, 6rem);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family-base);
    font-weight: 500;
    text-transform: lowercase;
    transition:background-color 320ms, color 320ms
}

body.theme-switching {
    transition:background-color linear, color 220ms linear
}

body.theme-switching .theme-toggle, body.theme-switching main {
    opacity:.88
}

body.is-resume-open {
    overflow:hidden
}

body.is-resume-open .theme-toggle, body.is-resume-open main {
    opacity: .06;
    pointer-events:none
}

body.is-resume-open .custom-cursor {
    color:#f0f5f6
}

body.is-resume-open .custom-cursor.is-visible {
    opacity:.7
}

body.cursor-enabled, body.cursor-enabled a, body.cursor-enabled button {
    cursor:none
}

::selection {
    background: 0 0;
    color:inherit
}

::-moz-selection {
    background: 0 0;
    color:inherit
}

.selection-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    transition: opacity 220ms;
    will-change:opacity
}

.selection-overlay.is-active {
    opacity:1
}

.selection-pill {
    position: fixed;
    background: var(--selection-bg);
    border-radius:.42em
}

.highlight, mark {
    background: var(--highlight-bg);
    border-radius: .36em;
    padding: .02em .22em;
    box-decoration-break: clone;
    -webkit-box-decoration-break:clone
}

main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    position: relative;
    z-index: 2;
    transition:opacity 220ms
}

.theme-toggle, main > * {
    opacity: 0;
    filter: blur(8px);
    transform:translateY(12px)
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    color: var(--text-color);
    background: 0 0;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transform-origin: 7px 5px;
    transform: translate(-7px, -5px) scale(1);
    transition: opacity 140ms, transform .2s;
    will-change:transform, opacity, color
}

.custom-cursor-shape {
    display: block;
    width: 100%;
    height: 100%;
    fill:currentColor
}

.custom-cursor.is-visible {
    opacity:.5
}

.custom-cursor.is-link-hover {
    transform:translate(-7px, -5px) scale(2)
}

.custom-cursor.is-pressed {
    transform:translate(-7px, -5px) scale(1.85)
}

.custom-cursor.is-link-hover.is-pressed {
    transform:translate(-7px, -5px) scale(2.05)
}

.theme-transition-circle {
    position: fixed;
    left: 0;
    top: 0;
    --shape-rotation: 0deg;
    --theme-transition-scale: 0.001;
    border-radius: 999px;
    transform: translate3d(-50%, -50%, 0) rotate(var(--shape-rotation)) scale(var(--theme-transition-scale));
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform, opacity;
    contain: paint;
    opacity: 1;
    pointer-events: none;
    z-index:1
}

.theme-transition-circle.is-circle {
    border-radius:999px
}

.theme-transition-circle.is-diamond {
    border-radius: 14%;
    --shape-rotation:45deg
}

.theme-transition-circle.is-pill {
    border-radius: 999px;
    --shape-rotation:-22deg
}

.resume-transition-circle {
    position: fixed;
    left: 0;
    top: 0;
    --resume-transition-scale: 0.001;
    border-radius: 999px;
    transform: translate3d(-50%, -50%, 0) scale(var(--resume-transition-scale));
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform, opacity;
    contain: paint;
    opacity: 1;
    pointer-events: none;
    background: #1a1a1a;
    z-index:52
}

.resume-screen {
    --resume-inline-pad: clamp(0.85rem, 2vw, 1.7rem);
    --resume-block-pad: clamp(0.85rem, 2vw, 1.7rem);
    --resume-grid-gap: clamp(0.5rem, 1.1vw, 0.9rem);
    --resume-card-radius: clamp(1rem, 2.2vw, 1.65rem);
    --resume-clip-radius: 150vmax;
    position: fixed;
    inset: 0;
    background: #1a1a1a;
    color: #f0f5f6;
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    clip-path: circle(var(--resume-clip-radius) at 50% 50%);
    -webkit-clip-path: circle(var(--resume-clip-radius) at 50% 50%);
    will-change: clip-path, opacity;
    transition:opacity .3s
}

.resume-screen.is-hidden {
    visibility:hidden
}

.resume-screen.is-open {
    opacity: 1;
    pointer-events:auto
}

.resume-screen, .resume-screen * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout:none
}

.resume-screen.is-closing {
    opacity: 1;
    pointer-events:none
}

.resume-screen-inner {
    height: 100%;
    min-height: 100svh;
    padding:var(--resume-block-pad) var(--resume-inline-pad)
}

.resume-bento {
    width: 100%;
    height: calc(100svh -(var(--resume-block-pad) * 2));
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    gap: var(--resume-grid-gap);
    font-family: "Google Sans", sans-serif
}

.resume-card {
    --resume-enter-x: 0px;
    --resume-enter-y: 0px;
    --resume-enter-scale: 1;
    --resume-enter-delay: 240ms;
    background: #000;
    border: 1px solid rgba(240, 245, 246, .08);
    border-radius: var(--resume-card-radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 36px rgba(0, 0, 0, .28);
    padding: clamp(.78rem, 1.8vw, 1.1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(.35rem, .8vw, .72rem);
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(var(--resume-enter-x), var(--resume-enter-y), 0) scale(var(--resume-enter-scale));
    transition:opacity 620ms, filter 620ms, transform 820ms cubic-bezier(.22, 1, .36, 1)
}

.resume-screen.is-open .resume-card {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay:var(--resume-enter-delay)
}

.resume-card-label {
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.78rem, 1.2vw, .92rem);
    font-weight: 400;
    opacity: .7;
    letter-spacing:.04em
}

.resume-card-value {
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.92rem, 1.55vw, 1.2rem);
    font-weight: 400;
    line-height:1.15
}

.resume-experience-value {
    font-family: "Google Sans", sans-serif;
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    font-weight: 500;
    line-height: 1;
    background: linear-gradient(135deg, #076c8b 0, #191055 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing:.01em
}

.resume-card-center {
    grid-column: 3/7;
    grid-row: 3/7;
    --resume-enter-scale: 1.28;
    --resume-enter-delay: 72ms;
    align-self: stretch;
    height: 100%;
    padding:0
}

.resume-photo-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--resume-card-radius);
    border: none;
    background: #000;
    overflow:hidden
}

.resume-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-user-drag: none;
    user-drag:none
}

.resume-photo-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .24) 0, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .28) 100%);
    pointer-events:none
}

.resume-photo-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: .4;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(2.2rem, 8vw, 5.8rem);
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
    color: #f0f5f6;
    text-shadow: 0 8px 24px rgba(0, 0, 0, .62);
    text-align: center;
    pointer-events:none
}

.resume-card-small {
    font-size:1rem
}

.resume-card-1 {
    grid-column: 1/3;
    grid-row: 1/3;
    --resume-enter-y: -28px;
    --resume-enter-delay: 205ms;
    position:relative
}

.resume-card-2 {
    grid-column: 3/7;
    grid-row: 1/3;
    --resume-enter-y: -28px;
    --resume-enter-delay: 230ms;
    position:relative
}

.resume-card-3 {
    grid-column: 5/7;
    grid-row: 1/3;
    --resume-enter-y: -28px;
    --resume-enter-delay:230ms
}

.resume-card-4 {
    grid-column: 7/9;
    grid-row: 1/3;
    --resume-enter-y: -28px;
    --resume-enter-delay: 300ms;
    position: relative;
    justify-content: flex-end;
    padding-bottom:clamp(.8rem, 1.6vw, 1.1rem)
}

.resume-location-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .9;
    z-index: 0;
    -webkit-user-drag: none;
    user-drag:none
}

.resume-card-4::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .06) 12%, rgba(0, 0, 0, .38) 74%, rgba(0, 0, 0, .6) 100%);
    pointer-events: none;
    z-index:1
}

.resume-location-value {
    position: relative;
    z-index: 2;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.92rem, 1.55vw, 1.2rem);
    font-weight: 400;
    line-height: 1.15;
    color:#f0f5f6
}

.resume-card-5 {
    grid-column: 1/3;
    grid-row: 3/5;
    --resume-enter-x: -28px;
    --resume-enter-delay:248ms
}

.resume-card-6 {
    grid-column: 7/9;
    grid-row: 3/7;
    --resume-enter-x: 28px;
    --resume-enter-delay:340ms
}

.resume-card-6-combined {
    gap:clamp(.9rem, 2vw, 1.45rem)
}

.resume-combined-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:clamp(.28rem, .7vw, .5rem)
}

.resume-card-7 {
    grid-column: 1/3;
    grid-row: 3/9;
    --resume-enter-x: -28px;
    --resume-enter-delay:340ms
}

.resume-freelance-value {
    font-size: clamp(1.62rem, 3.1vw, 2.55rem);
    font-weight: 500;
    line-height: 1.05;
    background: linear-gradient(135deg, #076c8b 0, #191055 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color:transparent
}

.resume-freelance-range {
    letter-spacing:0
}

.resume-experience-subvalue, .resume-freelance-range {
    position: absolute;
    left: 50%;
    bottom: clamp(.8rem, 1.65vw, 1.2rem);
    transform: translateX(-50%);
    z-index: 1;
    white-space:nowrap
}

.resume-ml-value {
    display: inline-flex;
    align-items: center;
    gap: clamp(.22rem, .7vw, .5rem);
    font-family: "Google Sans", sans-serif;
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing:.01em
}

.resume-ml-icon, .resume-ml-text {
    background: linear-gradient(135deg, #076c8b 0, #191055 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color:transparent
}

.resume-ml-icon.material-glyph {
    font-size: .84em;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24
}

.resume-stack-scroll {
    --stack-items: 6;
    --stack-slot-size: clamp(2.7rem, 5.2vw, 4.1rem);
    --stack-gap: clamp(1.5rem, 3.2vw, 2.5rem);
    width: min(100%, 7.5rem);
    height: calc((var(--stack-slot-size) * 3) +(var(--stack-gap) * 2));
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%)
}

.resume-framework-scroll {
    --stack-items:4
}

.resume-stack-track {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    animation: 14s linear infinite resume-stack-vertical;
    will-change:transform
}

.resume-stack-set {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:var(--stack-gap)
}

.resume-stack-icon {
    width: var(--stack-slot-size);
    height: var(--stack-slot-size);
    display: grid;
    place-items: center;
    opacity: .96;
    transform-origin: center;
    will-change:opacity
}

.resume-stack-glyph, .resume-stack-icon i {
    font-size: clamp(2.8rem, 5.8vw, 4rem);
    line-height: 1;
    color: rgba(240, 245, 246, .94)
}

.resume-stack-icon i[class * =" devicon-"], .resume-stack-icon i[class^=devicon-] {
    color: rgba(240, 245, 246, .94) !important
}

.resume-stack-icon i[class * =" devicon-"]::before, .resume-stack-icon i[class^=devicon-]::before {
    color:inherit !important
}

.resume-stack-glyph.is-typescript {
    font-family: "Google Sans", sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(240, 245, 246, .94);
    background: 0 0;
    -webkit-text-fill-color:currentColor
}

.resume-stack-glyph.is-swiftui, .resume-stack-glyph.is-tailwind {
    font-family: "Google Sans", sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(240, 245, 246, .94);
    background: 0 0;
    -webkit-text-fill-color:currentColor
}

.resume-card-7 .resume-stack-scroll {
    --stack-slot-size: clamp(2.95rem, 5.9vw, 4.6rem);
    --stack-gap: clamp(0.95rem, 1.95vw, 1.5rem);
    width: min(100%, 8.8rem);
    height:calc((var(--stack-slot-size) * 4) +(var(--stack-gap) * 3))
}

@keyframes resume-stack-vertical {
    from {
        transform:translateY(0)
    }

    to {
        transform:translateY(calc(-1 *((var(--stack-slot-size) * var(--stack-items)) +(var(--stack-gap) * var(--stack-items)))))
    }
}

@keyframes wave-rain-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -8vh, 0) rotate(0deg);
  }

  8% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--wave-drift, 0px), 112vh, 0) rotate(240deg);
  }
}


.resume-card-10 {
    grid-column: 3/5;
    grid-row: 7/9;
    --resume-enter-y: 28px;
    --resume-enter-delay: 420ms;
    position:relative
}

.resume-card-11 {
    grid-column: 5/7;
    grid-row: 7/9;
    --resume-enter-y: 28px;
    --resume-enter-delay: 420ms;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(.88rem, 1.95vw, 1.35rem);
    text-align: left;
    padding-inline-start: clamp(1.15rem, 2.35vw, 1.7rem);
    padding-inline-end:clamp(.9rem, 1.9vw, 1.3rem)
}

.resume-matcha-logo {
    width: clamp(2.5rem, 5.4vw, 4rem);
    height: clamp(2.5rem, 5.4vw, 4rem);
    object-fit: contain;
    flex: 0 0 auto;
    -webkit-user-drag: none;
    user-drag:none
}

.resume-matcha-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(.2rem, .52vw, .34rem);
    min-width:0
}

.resume-matcha-title {
    font-family: "Google Sans", sans-serif;
    font-size: clamp(1.02rem, 1.95vw, 1.55rem);
    font-weight: 500;
    line-height: 1.05;
    color: #f0f5f6;
    text-transform:none
}

.resume-matcha-subtitle {
    display:inline-block
}

.resume-card-6 .resume-card-label, .resume-card-7 .resume-card-label, .resume-experience-subvalue, .resume-freelance-range, .resume-matcha-subtitle {
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.82rem, 1.3vw, 1.04rem);
    font-weight: 400;
    line-height: 1.15;
    color: #f0f5f6;
    opacity: .92;
    letter-spacing: .01em;
    text-transform:none
}

.resume-card-12 {
    grid-column: 7/9;
    grid-row: 7/9;
    --resume-enter-y: 28px;
    --resume-enter-delay: 460ms;
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: clamp(.7rem, 1.5vw, 1rem);
    text-align: center;
    isolation:isolate
}

.resume-screen a.resume-card-link {
    color: inherit;
    text-decoration:none
}

.resume-screen a.resume-card-link:focus-visible, .resume-screen a.resume-card-link:hover {
    padding-left:clamp(.7rem, 1.5vw, 1rem)
}

.resume-contact-graph {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: .46;
    z-index: 0;
    pointer-events: none;
    background-image: url(assets/github-contrib.svg);
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat
}

.resume-contact-graph::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:linear-gradient(180deg, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .22) 100%)
}

.resume-contact-handle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(1.1rem, 2.1vw, 1.95rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform:none
}

.resume-contact-handle .fa-github {
    font-size: .86em;
    line-height:1
}

.resume-contact-platform {
    display: none;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.68rem, 1vw, .88rem);
    font-weight: 400;
    letter-spacing: .06em;
    opacity: .72;
    text-transform:none
}

main > * {
    animation:620ms cubic-bezier(.22, 1, .36, 1) both show
}

main > :nth-child(1) {
    animation-delay:80ms
}

main > :nth-child(2) {
    animation-delay:580ms
}

main > :nth-child(3) {
    animation-delay:760ms
}

main > :nth-child(4) {
    animation-delay:940ms
}

main > :nth-child(5) {
    animation-delay:1.12s
}

.theme-toggle {
    animation: 620ms cubic-bezier(.22, 1, .36, 1) both show;
    animation-delay: 1.3s;
    z-index:2
}

body.intro-complete .theme-toggle, body.intro-complete main > * {
    animation: none !important;
    opacity: 1;
    filter: blur(0);
    transform:translateY(0)
}

h1 {
    margin: 0;
    font-size: var(--headline-size);
    font-weight: 500;
    line-height:1
}

.greeting-row {
    display: flex;
    align-items: baseline;
    gap: .3em;
    margin-bottom:clamp(1.1rem, 2.8vw, 1.75rem)
}

.work-filter {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    margin-left: 1em;
    transition: opacity 280ms, filter 280ms, transform 320ms;
    will-change:opacity, filter, transform
}

.work-filter.is-hidden {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(14px);
    pointer-events:none
}

.work-filter-toggle {
    border: none;
    background: 0 0;
    color: var(--text-color);
    font: inherit;
    font-size: var(--headline-size);
    line-height: 1;
    font-weight: 500;
    display: inline-flex;
    align-items: baseline;
    gap: .06em;
    padding: 0;
    text-transform:lowercase
}

.work-filter-toggle:focus-visible {
    outline: currentColor solid 2px;
    outline-offset:3px
}

.work-filter-label {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    white-space: nowrap;
    padding-bottom:.28em
}

.work-filter-label-text {
    display: inline-block;
    font-family: "Google Sans", sans-serif;
    line-height: 1;
    white-space: nowrap;
    background: var(--name-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color:transparent
}

.work-filter-squiggle {
    position: absolute;
    left: -.02em;
    right: -.02em;
    bottom: -.02em;
    width: calc(100% + .04em);
    height: .14em;
    overflow: visible;
    opacity: 1;
    transition:opacity 140ms
}

.work-filter-label-text.is-label-hide + .work-filter-squiggle {
    opacity:0
}

.work-filter-squiggle path {
    fill: none;
    stroke: var(--text-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 180;
    stroke-dashoffset:0
}

.work-filter.is-squiggle-anim .work-filter-squiggle path {
    animation:220ms forwards work-filter-squiggle-unwind, 620ms cubic-bezier(.22, 1, .36, 1) 220ms forwards work-filter-squiggle-draw
}

.work-filter-label-text.is-label-show {
    animation:560ms cubic-bezier(.22, 1, .36, 1) forwards greeting-part-in
}

.work-filter-label-text.is-label-hide {
    animation:520ms forwards greeting-part-out
}

.work-filter-arrow.material-glyph {
    font-size: .82em;
    background: var(--name-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transform: translateY(.04em) rotate(0);
    transition:transform 220ms, filter 220ms
}

.work-filter.is-open .work-filter-arrow {
    transform:translateY(.04em) rotate(180deg)
}

.work-filter-menu {
    position: absolute;
    left: 0;
    top: calc(100% + .45rem);
    min-width: 9rem;
    padding: .34rem;
    border: 1px solid rgba(30, 38, 41, .2);
    border-radius: .5rem;
    background: var(--bg-color);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 220ms, filter 220ms, transform 220ms;
    z-index:30
}

:root[data-theme=dark] .work-filter-menu {
    border-color: rgba(233, 240, 243, .22);
    box-shadow:0 14px 28px rgba(0, 0, 0, .5)
}

.work-filter.is-open .work-filter-menu {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    pointer-events:auto
}

.work-filter-option {
    border: none;
    background: 0 0;
    width: 100%;
    border-radius: .42rem;
    color: var(--text-color);
    font-family: var(--font-family-base);
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    text-transform: lowercase;
    padding: .3rem .5rem;
    transition:color 260ms, background-color 220ms
}

.work-filter-option:focus-visible, .work-filter-option:hover {
    background: var(--highlight-bg);
    outline:0
}

.work-filter-option.is-selected {
    background: var(--name-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-family: var(--font-family-base);
    font-weight:400
}

#greeting {
    display: inline-flex;
    align-items: baseline;
    gap: .22em;
    font-family: "Google Sans", sans-serif;
    white-space: nowrap;
    will-change:opacity, filter, transform
}

#greeting .greeting-part {
    display: inline-block;
    opacity: 0;
    filter: blur(7px);
    transform:translateY(8px)
}

#greeting .greeting-part.part-show {
    animation:560ms cubic-bezier(.22, 1, .36, 1) forwards greeting-part-in
}

#greeting .greeting-part.part-hide {
    animation:520ms forwards greeting-part-out
}

#greeting .name-with-squiggle {
    position: relative;
    display: inline-block;
    line-height: 1;
    padding-bottom: .28em;
    color:inherit
}

#greeting .name-text {
    display: inline-block;
    background: var(--name-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color:transparent
}

#greeting .name-squiggle {
    position: absolute;
    left: -.02em;
    right: -.02em;
    bottom: -.02em;
    width: calc(100% + .04em);
    height: .14em;
    overflow:visible
}

#greeting .name-squiggle path {
    fill: none;
    stroke: var(--text-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 130;
    stroke-dashoffset:130
}

.work-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    min-height:0
}

body.is-project-modal-open {
    overflow:hidden
}

.wave-rain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 180ms ease;
}

.wave-rain.is-active {
  opacity: 1;
}

.wave-rain-emoji {
  position: absolute;
  top: -10vh;
  font-size: var(--wave-size, 2.7rem);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.14));
  will-change: transform, opacity;
  transform: translate3d(0, -8vh, 0) rotate(0deg);
  opacity: 0;
}

.project-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index:40
}

.project-modal.is-hidden {
    opacity: 0;
    pointer-events:none
}

.project-modal-backdrop {
    position: absolute;
    inset: 0;
    background:rgba(15, 19, 21, .52)
}

.project-modal-panel {
    --modal-height: clamp(420px, 62svh, 560px);
    --project-modal-edge-inline: clamp(1.15rem, 3.2vw, 1.55rem);
    --project-modal-edge-bottom: clamp(1.05rem, 2.7vw, 1.45rem);
    --project-modal-title-gap: clamp(1.1rem, 2.3vw, 1.55rem);
    --project-modal-close-inset: clamp(1.05rem, 2.7vw, 1.35rem);
    position: relative;
    width: min(calc(100vw - 2.25rem), calc(560px + var(--modal-height)));
    height: var(--modal-height);
    display: grid;
    grid-template-columns: minmax(320px, 1fr) var(--modal-height);
    gap: clamp(.7rem, 1.25vw, 1rem);
    align-items: stretch;
    overflow: visible;
    padding: 0;
    background: 0 0;
    border: none;
    box-shadow: none;
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition:opacity 220ms, filter 220ms, transform 240ms
}

.project-modal.is-hidden .project-modal-panel {
    opacity: 0;
    filter: blur(7px);
    transform:translateY(14px)
}

.project-modal-close {
    position: absolute;
    top: var(--project-modal-close-inset);
    right: var(--project-modal-close-inset);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background: 0 0;
    color: inherit;
    display: inline-grid;
    place-items: center;
    padding: 0;
    transition: transform 180ms, color 180ms;
    z-index: 1;
    outline: 0;
    box-shadow:none
}

:root[data-theme=dark] .project-modal-close {
    background:0 0
}

.project-modal-close .material-glyph {
    font-size:30px
}

.project-modal-close:focus-visible, .project-modal-close:hover {
    transform:translateY(-1px)
}

.project-modal-close:focus-visible {
    outline: 0;
    outline-offset:0
}

.project-modal-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border:0
}

.project-modal-title-track {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 0;
    height: clamp(4.2rem, 9vw, 6.4rem);
    overflow: hidden;
    pointer-events: none;
    z-index:0
}

.project-modal-title-display {
    position: absolute;
    left: var(--project-modal-edge-inline);
    bottom: calc(var(--project-modal-edge-bottom) + var(--project-modal-title-gap));
    color: var(--text-color);
    font-family: "Google Sans", sans-serif;
    font-size: clamp(1.35rem, 3vw, 2.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: lowercase;
    pointer-events: none;
    z-index:2
}

.project-modal-year-display {
    position: absolute;
    left: var(--project-modal-edge-inline);
    bottom: var(--project-modal-edge-bottom);
    color: var(--text-color);
    opacity: .72;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.88rem, 1.7vw, 1.08rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
    pointer-events: none;
    z-index:2
}

.project-modal-year-display.is-empty {
    display:none
}

.project-modal-title-marquee {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: 600s linear infinite project-modal-title-marquee;
    transform: translate3d(0, 8%, 0);
    will-change:transform
}

.project-modal-title-run {
    display: inline-block;
    color: var(--text-color);
    opacity: .05;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(5.6rem, 14.5vw, 10.2rem);
    font-weight: 500;
    line-height: .86;
    letter-spacing: .015em;
    text-transform: lowercase;
    padding-right:1rem
}

@keyframes project-modal-title-marquee {
    from {
        transform:translate3d(0, 8%, 0)
    }

    to {
        transform:translate3d(-50%, 8%, 0)
    }
}

.project-modal-content {
    position: relative;
    padding: clamp(1rem, 3vw, 1.35rem);
    padding-bottom: clamp(6.2rem, 12vw, 7.8rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 3rem;
    background: var(--bg-color);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .15);
    opacity: 1;
    transform: translateX(0);
    transition:opacity .3s, transform 360ms cubic-bezier(.22, 1, .36, 1)
}

.project-modal-media {
    position: relative;
    width: auto;
    height: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 3rem;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .15);
    background: radial-gradient(circle at 18% 18%, rgba(116, 161, 46, .16), transparent 44%), radial-gradient(circle at 82% 82%, rgba(116, 161, 46, .1), transparent 42%), linear-gradient(145deg, rgba(30, 38, 41, .06), rgba(30, 38, 41, .02));
    opacity: 1;
    transform: translateX(0);
    transition:opacity 320ms 70ms, transform .4s cubic-bezier(.22, 1, .36, 1) 70ms
}

.project-modal.is-hidden .project-modal-content {
    opacity: 0;
    transform:translateX(-30px)
}

.project-modal.is-hidden .project-modal-media {
    opacity: 0;
    transform:translateX(34px)
}

:root[data-theme=dark] .project-modal-content {
    background: #151617;
    border-color:rgba(233, 240, 243, .2)
}

:root[data-theme=dark] .project-modal-media {
    box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
    background:radial-gradient(circle at 18% 18%, rgba(116, 161, 46, .24), transparent 48%), radial-gradient(circle at 82% 82%, rgba(233, 240, 243, .08), transparent 42%), linear-gradient(145deg, rgba(233, 240, 243, .08), rgba(233, 240, 243, .03))
}

.project-modal-media.is-empty .project-modal-image, .project-modal-media.is-loading .project-modal-image {
    opacity:0
}

.project-modal-image {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
    opacity: 1;
    transition:opacity 220ms
}

.project-modal-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.84rem, 2vw, 1rem);
    letter-spacing: .08em;
    text-transform: lowercase;
    color: rgba(30, 38, 41, .5);
    transition: opacity 220ms;
    z-index:2
}

:root[data-theme=dark] .project-modal-placeholder {
    color:rgba(233, 240, 243, .56)
}

.project-modal-media:not(.is-empty) .project-modal-placeholder {
    opacity: 0;
    pointer-events:none
}

.project-modal-description {
    margin: clamp(.6rem, 1.5vw, .9rem) 0 0;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(.95rem, 2.6vw, 1.05rem);
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    user-select: text;
    -webkit-user-select: text;
    cursor:text
}

.project-modal-buttons {
    position: absolute;
    right: var(--project-modal-edge-inline);
    bottom: var(--project-modal-edge-bottom);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .72rem;
    margin-top: 0;
    z-index:3
}

.project-modal-button {
    --modal-button-color: rgba(30, 38, 41, 0.42);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    font-family: "Google Sans", sans-serif;
    font-size: 1.04rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
    width: clamp(4.9rem, 6.8vw, 5.6rem);
    height: clamp(4.9rem, 6.8vw, 5.6rem);
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--modal-button-color);
    background: 0 0;
    color: var(--modal-button-color);
    transform-origin: center;
    will-change: transform;
    transition:color 180ms, border-color 180ms, transform 180ms
}

:root[data-theme=dark] .project-modal-button {
    --modal-button-color:rgba(233, 240, 243, 0.5)
}

.project-modal-button.is-primary {
    --modal-button-color:var(--accent-green)
}

.project-modal-button:focus-visible, .project-modal-button:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
    background: 0 0;
    padding-left: 0;
    transform:scale(1.04)
}

.project-modal-button.is-arrow-only, .project-modal-button.is-github-icon {
    width: clamp(4.9rem, 6.8vw, 5.6rem);
    height:clamp(4.9rem, 6.8vw, 5.6rem)
}

.project-modal-button.is-arrow-only:focus-visible, .project-modal-button.is-arrow-only:hover, .project-modal-button.is-github-icon:focus-visible, .project-modal-button.is-github-icon:hover {
    width: clamp(4.9rem, 6.8vw, 5.6rem);
    height:clamp(4.9rem, 6.8vw, 5.6rem)
}

.project-modal-button-arrow {
    display: inline-block;
    font-size: 1.62rem;
    line-height: 1;
    transform:rotate(-12deg)
}

.project-modal-button-github-icon {
    display: inline-block;
    font-size: 1.58rem;
    line-height:1
}

.project-modal-button:focus-visible {
    outline: currentColor solid 2px;
    outline-offset:2px
}

.project-modal-button.is-disabled {
    opacity: .45;
    pointer-events:none
}

@media (max-width: 980px) {
    .project-modal-panel {
        height: auto;
        grid-template-columns: 1fr;
        max-height: calc(100svh - 1.6rem);
        overflow-y:auto
    }

    .project-modal-content {
        min-height:0
    }

    .project-modal-buttons {
        position: static;
        justify-content: flex-start;
        margin-top:1.2rem
    }

    .project-modal-media {
        width: 100%;
        height: auto;
        aspect-ratio:1/1
    }

    :root[data-theme=dark] .project-modal-media {
        border-color:rgba(233, 240, 243, .2)
    }
}

@media (max-width: 900px) {
    .greeting-row {
        align-items: flex-start;
        flex-wrap: wrap;
        width:100%
    }

    #greeting {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .06em;
        max-width: 100%;
        white-space:normal
    }

    .resume-screen {
        --resume-inline-pad: clamp(0.8rem, 5vw, 1.2rem);
        --resume-block-pad:clamp(0.75rem, 4.2vw, 1.05rem)
    }

    .resume-bento {
        height: auto;
        min-height: calc(100svh -(var(--resume-block-pad) * 2));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(116px, auto);
        justify-content: stretch;
        align-content: start;
        overflow-y: auto;
        padding-bottom:.55rem
    }

    .resume-card-small {
        grid-column: auto !important;
        grid-row:auto !important
    }

    .resume-card-center {
        grid-column: 1/-1;
        grid-row: auto;
        aspect-ratio: 1/1;
        min-height:min(68vw, 340px)
    }
}

#greeting .greeting-second.part-show .name-squiggle path {
    animation:720ms cubic-bezier(.22, 1, .36, 1) forwards squiggle-draw
}

@keyframes greeting-part-in {
    from {
        opacity: 0;
        filter: blur(8px);
        transform:translateY(20px)
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform:translateY(0)
    }
}

@keyframes greeting-part-out {
    from {
        opacity: 1;
        filter: blur(0);
        transform:translateY(0)
    }

    to {
        opacity: 0;
        filter: blur(8px);
        transform:translateY(-20px)
    }
}

@keyframes squiggle-draw {
    from {
        stroke-dashoffset:130
    }

    to {
        stroke-dashoffset:0
    }
}

@keyframes work-filter-squiggle-unwind {
    from {
        stroke-dashoffset:0
    }

    to {
        stroke-dashoffset:180
    }
}

@keyframes work-filter-squiggle-draw {
    from {
        stroke-dashoffset:180
    }

    to {
        stroke-dashoffset:0
    }
}

@keyframes show {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform:translateY(16px)
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform:translateY(0)
    }
}

a {
    color: inherit;
    text-decoration: none;
    font-size: clamp(2.5rem, 3.1vw, 2rem);
    font-weight: 400;
    position: relative;
    display: inline-block;
    padding-bottom: .06em;
    padding-left: 0;
    transition:padding-left 260ms, color 260ms
}

.projects-label {
    display: inline-block;
    min-width: 8ch;
    transition: opacity 220ms, filter 220ms, transform 220ms;
    will-change:opacity, filter, transform
}

#projects-toggle .projects-toggle-icon {
    position: absolute;
    width: 1.05em;
    height:1.05em
}

#projects-toggle .projects-glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    line-height: 1;
    font-size: .92em;
    transition:opacity 220ms, filter 220ms, transform 220ms
}

#projects-toggle .projects-glyph-default {
    opacity: 1;
    filter: blur(0);
    transform:translateY(-.04em) scale(1)
}

#projects-toggle .projects-glyph-back, #projects-toggle.is-back-state .projects-glyph-default {
    opacity: 0;
    filter: blur(7px);
    transform:translateY(-.04em) scale(.82)
}

#projects-toggle.is-back-state .projects-glyph-back {
    opacity: 1;
    filter: blur(0);
    transform:translateY(-.04em) scale(1)
}

#projects-toggle.is-label-swapping .projects-label {
    opacity: 0;
    filter: blur(7px);
    transform:translateY(-.12em)
}

a[data-secondary-link], a[data-work-link] {
    transition: padding-left 260ms, opacity 280ms, filter 280ms, transform 320ms, color 260ms;
    will-change:opacity, filter, transform
}

a[data-work-link] {
    --work-link-enter-delay: 0ms;
    transition-delay:0s, var(--work-link-enter-delay), var(--work-link-enter-delay), var(--work-link-enter-delay), 0s
}

a[data-secondary-link].is-faded-out, a[data-work-link].is-faded-out {
    opacity: 0 !important;
    filter: blur(8px) !important;
    transform: translateY(14px) !important;
    position: absolute;
    pointer-events:none
}

.hover-icon {
    position: absolute;
    left: 0;
    top: 50%;
    opacity: 0;
    filter: blur(6px);
    transform: translate(-.3em, -50%);
    width: 1em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: transform 260ms, opacity 220ms, filter 260ms;
    will-change:opacity, filter, transform
}

.material-glyph {
    display: inline-block;
    font-size: 1em;
    vertical-align: middle;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24
}

.hover-icon .material-symbols-rounded, .hover-icon i {
    line-height:1
}

a:focus-visible, a:hover {
    padding-left:1.8em
}

a:focus-visible .hover-icon, a:hover .hover-icon {
    opacity: 1;
    filter: blur(0);
    transform:translate(0, -50%)
}

.link-extension {
    display: inline-block;
    margin-left: 0;
    opacity: 0;
    filter: blur(4px);
    transform: translateX(-.45em);
    transition: opacity 280ms, filter 280ms, transform 280ms, margin-left 280ms;
    will-change:opacity, filter, transform
}

.link-slash {
    margin-right:.44em
}

a.has-extension:focus-visible .link-extension, a.has-extension:hover .link-extension {
    margin-left: .12em;
    opacity: .34;
    filter: blur(0);
    transform:translateX(0)
}

a[data-work-link] .link-extension {
    display:none !important
}

.theme-toggle {
    position: fixed;
    right: clamp(1rem, 4vw, 1.8rem);
    bottom: clamp(1rem, 4vw, 1.8rem);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: inherit;
    display: grid;
    border: none;
    background: 0 0;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition:background-color 260ms, border-color 260ms, box-shadow 260ms, transform .2s, color 260ms, opacity 220ms
}

.theme-toggle:focus-visible, .theme-toggle:hover {
    transform:translateY(-1px)
}

.theme-toggle:focus-visible {
    outline: currentColor solid 2px;
    outline-offset:2px
}

.theme-glyph {
    position: relative;
    font-size: 30px;
    width: 18px;
    height: 18px;
    display:block
}

.theme-glyph .theme-symbol {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    line-height: 1;
    font-size: 1em;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    transition:opacity 260ms, filter 260ms, transform 260ms
}

.theme-sun {
    opacity: 1;
    filter: blur(0);
    transform:scale(1)
}

.theme-moon {
    opacity: 0;
    filter: blur(8px);
    transform:scale(.84)
}

:root[data-theme=dark] .theme-sun {
    opacity: 0;
    filter: blur(8px);
    transform:scale(.84)
}

:root[data-theme=dark] .theme-moon {
    opacity: 1;
    filter: blur(0);
    transform:scale(1)
}

@media (max-width: 480px) {
    :root {
        --headline-size:clamp(1.45rem, 8.2vw, 1.95rem)
    }

    body {
        align-items: flex-start;
        padding-left: clamp(1.25rem, 6vw, 1.75rem);
        padding-top:clamp(2.2rem, 10vw, 3.4rem)
    }

    .greeting-row {
        align-items:flex-end
    }

    .work-filter {
        margin-left:0
    }

    .work-filter-menu {
        min-width:7.8rem
    }

    main {
        gap:.8rem
    }

    a {
        font-size:clamp(1.15rem, 5.5vw, 1.35rem)
    }
}

@media (pointer: coarse) {
    a, body, button {
        cursor:auto
    }

    .custom-cursor {
        display:none
    }
}

@media (prefers-reduced-motion: reduce) {
    #greeting .greeting-part, #greeting .greeting-part.part-show, .theme-toggle, main > * {
        animation: none;
        opacity: 1;
        filter: none;
        transform:none
    }

    #greeting .name-squiggle path, .work-filter-squiggle path {
        animation: none !important;
        stroke-dashoffset:0
    }

    .work-filter-label-text.is-label-hide, .work-filter-label-text.is-label-show {
        animation:none !important
    }

    #projects-toggle .projects-glyph, .custom-cursor, .project-modal-button, .project-modal-close, .project-modal-content, .project-modal-media, .project-modal-panel, .projects-label, .resume-card, .resume-screen, .work-filter, .work-filter-arrow, .work-filter-label-text, .work-filter-menu, a[data-secondary-link], a[data-work-link] {
        transition:none
    }

    .project-modal-title-track {
        display:none
    }

    .resume-stack-track {
        animation: none;
        transform: translateY(0)
    }
}