/* Mobile viewport containment: keep the header controls and cards inside the screen. */
html.mobile-preview-mode,
html.mobile-preview-mode body {
  overflow-x: hidden;
}

/* Zo uses free-falling glyphs like Geo Try Me, not bordered flash-card tiles. */
.portfolio .card.pink .teaser-flash .teaser-item:nth-child(n) {
  display: block;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--fall-size) !important;
  line-height: 1;
}

.portfolio .card.pink:is(:hover, :focus-visible) .teaser-flash .teaser-item,
.portfolio .card.pink.preview-active .teaser-flash .teaser-item,
.portfolio .card.pink.mobile-focused .teaser-flash .teaser-item {
  animation: game-emoji-rain var(--duration) cubic-bezier(.42, 0, 1, 1) var(--delay) infinite !important;
}

html.mobile-preview-mode .portfolio {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: clamp(12px, 4vw, 18px) !important;
  padding-right: clamp(12px, 4vw, 18px) !important;
}

html.mobile-preview-mode .portfolio header,
html.mobile-preview-mode .portfolio .brand {
  min-width: 0;
}

html.mobile-preview-mode .portfolio .brand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mobile-preview-mode .portfolio .actions {
  flex: 0 0 auto;
  gap: 6px;
}

@media (orientation: portrait) and (max-width: 599px) {
  html.mobile-preview-mode .portfolio .brand {
    font-size: clamp(19px, 4.8vw, 23px) !important;
  }

  html.mobile-preview-mode .portfolio .coffee,
  html.mobile-preview-mode .portfolio .theme {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  html.mobile-preview-mode .portfolio .grid,
  html.mobile-preview-mode .portfolio .card {
    width: 100% !important;
    max-width: 100% !important;
  }

  html.mobile-preview-mode .portfolio .card {
    margin-inline: 0 !important;
  }
}

.card.orange {
  --card-bg: #ff754d;
  background: #ff754d;
  color: #18181b;
}

.card.green {
  --card-bg: #b7f56a;
  background: #b7f56a;
  color: #18181b;
}

.card.red {
  --card-bg: #ff4f4f;
  background: #ff4f4f;
  color: #18181b;
}

.card.green .name {
  font-size: clamp(32px, 4.2vw, 58px);
  max-width: 86%;
}

.portfolio .card.green .teaser-emoji .teaser-item:nth-child(n) {
  top: 0 !important;
  font-size: var(--fall-size) !important;
}

.teaser-message .teaser-item {
  left: 100%;
  width: max-content;
  font-size: clamp(58px, 8vw, 112px) !important;
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.07em;
  white-space: nowrap;
  opacity: 0;
  filter: none;
  will-change: transform;
}

.teaser-message .teaser-item:nth-child(1) { top: 10%; --message-duration: 3.6s; --message-delay: -1.2s; }
.teaser-message .teaser-item:nth-child(2) { top: 40%; --message-duration: 4.1s; --message-delay: -2.8s; }
.teaser-message .teaser-item:nth-child(3) { top: 70%; --message-duration: 3.8s; --message-delay: -.35s; }

.card:is(:hover, :focus-visible) .teaser-message .teaser-item,
.card.preview-active .teaser-message .teaser-item,
.card.mobile-focused .teaser-message .teaser-item {
  animation: message-across-room var(--message-duration) linear var(--message-delay) infinite !important;
}

@keyframes message-across-room {
  from { opacity: .88; transform: translate3d(12%, 0, 0); }
  to { opacity: .88; transform: translate3d(calc(-100vw - 115%), 0, 0); }
}

@media (max-width: 700px) {
  .card .teaser-message {
    display: block;
    bottom: 62%;
  }
  .card .teaser-message .teaser-item {
    font-size: clamp(38px, 12vw, 58px) !important;
  }
  .card.orange .name {
    max-width: 82%;
    font-size: clamp(34px, 10.5vw, 48px);
  }
  .portfolio { width: 100% !important; max-width: 100% !important; }
  .portfolio .grid {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin-inline: 0 !important;
  }
  .portfolio .card {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin-inline: 0 !important;
  }
  .card.orange .arrow { right: 18px; }
  .card.green .name {
    font-size: clamp(31px, 9.5vw, 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card:is(:hover, :focus-visible) .teaser-message .teaser-item,
  .card.preview-active .teaser-message .teaser-item,
  .card.mobile-focused .teaser-message .teaser-item {
    animation: none !important;
    opacity: .12;
    transform: translateX(-65%);
  }
}

/* Keep the moving display inside its own band, clear of the project title. */
.card .teaser-message {
  top: 0;
  right: 0;
  bottom: 46%;
  left: 0;
}

.card .teaser-message .teaser-item:nth-child(n) {
  top: 50%;
  --message-duration: 10.5s;
}

.card .teaser-message .teaser-item:nth-child(1) { --message-delay: 0s; }
.card .teaser-message .teaser-item:nth-child(2) { --message-delay: -2.8s; }
.card .teaser-message .teaser-item:nth-child(3) { --message-delay: -5.6s; }

@keyframes message-across-room {
  from { opacity: .88; transform: translate3d(12%, -50%, 0); }
  to { opacity: .88; transform: translate3d(calc(-100vw - 115%), -50%, 0); }
}
.portfolio .coffee .coffee-cup{display:block!important}@media(max-width:460px){.portfolio{padding-left:14px!important;padding-right:14px!important}.portfolio .brand{font-size:21px!important;white-space:nowrap}.portfolio .actions{gap:6px;flex:0 0 auto}.portfolio .coffee,.portfolio .theme{width:38px;height:38px}}
@media(orientation:landscape){html.mobile-preview-mode .portfolio .card{width:min(100%,120svh)!important;margin-inline:auto!important}}
html.mobile-preview-mode .portfolio .card{aspect-ratio:4/3!important}
html.mobile-preview-mode .portfolio{height:auto!important;min-height:100vh!important;display:block!important;padding-bottom:25svh!important}html.mobile-preview-mode .portfolio .grid{margin-top:14px!important;grid-template-columns:1fr!important;grid-template-rows:none!important}html.mobile-preview-mode .portfolio .card{min-height:0!important;aspect-ratio:4/3}html.mobile-preview-mode .portfolio .card .teaser{display:block!important}html.mobile-preview-mode .card:not(.mobile-focused){transform:none!important;box-shadow:none!important}html.mobile-preview-mode .card:not(.mobile-focused):before{opacity:.055!important}html.mobile-preview-mode .card:not(.mobile-focused) .teaser-item{animation:none!important;opacity:0!important}html.mobile-preview-mode .card:not(.mobile-focused) .asteroid-canvas{opacity:0!important}html.mobile-preview-mode .card.mobile-focused:before{opacity:0!important}html.mobile-preview-mode .card.mobile-focused .teaser-emoji .teaser-item,html.mobile-preview-mode .card.mobile-focused .teaser-shapes .teaser-item{animation:game-emoji-rain var(--duration) cubic-bezier(.42,0,1,1) var(--delay) infinite!important}html.mobile-preview-mode .card.mobile-focused .teaser-flash .teaser-item{animation:flash-card-rain var(--duration) linear var(--delay) infinite!important}html.mobile-preview-mode .card.mobile-focused .asteroid-canvas{opacity:1!important}@media(orientation:landscape){html.mobile-preview-mode .portfolio .card{aspect-ratio:16/9}}
@media (max-width:700px),(hover:none),(pointer:coarse){.portfolio .card .teaser{display:block!important}.portfolio .card:not(.mobile-focused){transform:none!important;box-shadow:none!important}.card:not(.mobile-focused):before{opacity:.055!important}.card:not(.mobile-focused) .teaser-item{animation:none!important;opacity:0!important}.card:not(.mobile-focused) .asteroid-canvas{opacity:0!important}.card.mobile-focused:before{opacity:0!important}.card.mobile-focused .teaser-emoji .teaser-item,.card.mobile-focused .teaser-shapes .teaser-item{animation:game-emoji-rain var(--duration) cubic-bezier(.42,0,1,1) var(--delay) infinite!important}.card.mobile-focused .teaser-flash .teaser-item{animation:flash-card-rain var(--duration) linear var(--delay) infinite!important}.card.mobile-focused .asteroid-canvas{opacity:1!important}}
.portfolio{grid-template-rows:72px minmax(0,1fr)!important}.portfolio header{height:72px!important}.portfolio .brand{font-size:38px!important;line-height:1}@media(max-width:700px){.portfolio header{height:66px!important}.portfolio .brand{font-size:25px!important}}@media (orientation:portrait) and (min-width:480px) and (max-width:800px){.portfolio header{height:72px!important}.portfolio .brand{font-size:34px!important}}
.portfolio .card.blue .teaser-shapes .teaser-item{top:-18%!important;left:var(--x)!important;font-size:clamp(56px,7vw,96px)!important;opacity:0}.portfolio .card.blue:is(:hover,:focus-visible) .teaser-shapes .teaser-item{animation:game-emoji-rain var(--duration) cubic-bezier(.42,0,1,1) var(--delay) infinite!important}
.card.blue .teaser-shapes .teaser-item{top:0!important;opacity:0;animation:none!important;will-change:transform}
.card.blue .teaser-shapes .teaser-item{font-size:clamp(58px,7vw,96px)!important}.card.blue:is(:hover,:focus-visible) .teaser-shapes .teaser-item{animation-name:geo-shape-fall!important;animation-timing-function:cubic-bezier(.42,0,1,1)!important}@keyframes geo-shape-fall{0%{opacity:1;transform:translate3d(0,-55px,0) rotate(var(--start-spin))}100%{opacity:1;transform:translate3d(var(--drift),520px,0) rotate(var(--end-spin))}}
.asteroid-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .15s ease}.card:is(:hover,:focus-visible) .asteroid-canvas{opacity:1}.card:is(:hover,:focus-visible) .teaser-emoji .teaser-item{animation-name:game-emoji-rain!important;animation-timing-function:cubic-bezier(.42,0,1,1)!important}.card:is(:hover,:focus-visible) .teaser-shapes .teaser-item{animation-name:geo-shape-drop!important;animation-timing-function:cubic-bezier(.42,0,1,1)!important}.card:is(:hover,:focus-visible) .teaser-flash .teaser-item{animation-name:flash-card-rain!important;animation-timing-function:linear!important}.teaser-item:nth-child(1){--start-spin:-132deg;--end-spin:310deg}.teaser-item:nth-child(2){--start-spin:84deg;--end-spin:520deg}.teaser-item:nth-child(3){--start-spin:-48deg;--end-spin:245deg}.teaser-item:nth-child(4){--start-spin:156deg;--end-spin:610deg}.teaser-item:nth-child(5){--start-spin:-174deg;--end-spin:360deg}.teaser-item:nth-child(6){--start-spin:35deg;--end-spin:470deg}.teaser-item:nth-child(7){--start-spin:-92deg;--end-spin:280deg}.teaser-item:nth-child(8){--start-spin:118deg;--end-spin:570deg}@keyframes game-emoji-rain{0%{opacity:1;transform:translate3d(0,-45px,0) rotate(var(--start-spin)) scale(1)}100%{opacity:1;transform:translate3d(var(--drift),470px,0) rotate(var(--end-spin)) scale(1)}}@keyframes geo-shape-drop{0%{opacity:.12;transform:translate3d(0,-45px,0) rotate(var(--start-spin)) scale(.65)}16%{opacity:.78}72%{opacity:.72;transform:translate3d(calc(var(--drift) * .7),330px,0) rotate(calc(var(--end-spin) * .65)) scale(1)}100%{opacity:0;transform:translate3d(var(--drift),470px,0) rotate(var(--end-spin)) scale(2.25)}}@keyframes flash-card-rain{0%{opacity:0;transform:translate3d(0,-45px,0) rotate(0) scale(.86)}12%{opacity:.62}86%{opacity:.5}100%{opacity:0;transform:translate3d(var(--drift),470px,0) rotate(420deg) scale(1.08)}}@media(prefers-reduced-motion:reduce){.asteroid-canvas{opacity:.18}.card:is(:hover,:focus-visible) .asteroid-canvas{opacity:.18}}
.teaser-emoji .teaser-item,.teaser-shapes .teaser-item{font-size:clamp(38px,5vw,70px)!important}.teaser-flash .teaser-item{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;padding:0!important;font-size:clamp(25px,3vw,42px)!important}.teaser-item:nth-child(1){--delay:-1.7s!important;--duration:2.25s!important}.teaser-item:nth-child(2){--delay:-.45s!important;--duration:2.6s!important}.teaser-item:nth-child(3){--delay:-2.1s!important;--duration:2.4s!important}.teaser-item:nth-child(4){--delay:-1.15s!important;--duration:2.8s!important}.teaser-item:nth-child(5){--delay:-.8s!important;--duration:2.3s!important}.teaser-item:nth-child(6){--delay:-2.35s!important;--duration:2.65s!important}.teaser-item:nth-child(7){--delay:-1.4s!important;--duration:2.5s!important}.teaser-item:nth-child(8){--delay:-.25s!important;--duration:2.75s!important}.teaser-cubes{perspective:700px}.teaser-cubes .teaser-item{width:clamp(40px,4.5vw,64px)!important;border:0!important;background:var(--cube)!important;box-shadow:inset -10px -10px 0 rgba(0,0,0,.2),0 0 22px var(--cube)!important;transform-style:preserve-3d}.teaser-cubes .teaser-item:before,.teaser-cubes .teaser-item:after{content:"";position:absolute;inset:0;background:inherit;box-shadow:inset -10px -10px 0 rgba(0,0,0,.2)}.teaser-cubes .teaser-item:before{transform:rotateY(90deg) translateZ(20px)}.teaser-cubes .teaser-item:after{transform:rotateX(90deg) translateZ(20px)}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item{opacity:.92;animation:cube-flight-a 2.1s linear infinite!important}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item:nth-child(2){animation-name:cube-flight-b!important;animation-delay:-1.1s!important}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item:nth-child(3){animation-name:cube-flight-c!important;animation-delay:-.55s!important}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item:nth-child(4){animation-name:cube-flight-d!important;animation-delay:-1.65s!important}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item:nth-child(5){animation-name:cube-flight-b!important;animation-delay:-.3s!important;animation-duration:2.45s!important}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item:nth-child(6){animation-name:cube-flight-c!important;animation-delay:-1.8s!important;animation-duration:2.3s!important}@keyframes cube-flight-a{0%{transform:translate3d(-100px,-35px,-80px) rotateX(0) rotateY(0)}46%{transform:translate3d(235px,75px,80px) rotateX(190deg) rotateY(250deg)}50%{transform:translate3d(220px,62px,80px) rotateX(205deg) rotateY(265deg)}100%{transform:translate3d(520px,125px,-60px) rotateX(390deg) rotateY(540deg)}}@keyframes cube-flight-b{0%{transform:translate3d(115px,-105px,-50px) rotateX(30deg) rotateY(0)}47%{transform:translate3d(-215px,92px,90px) rotateX(210deg) rotateY(-220deg)}51%{transform:translate3d(-198px,78px,90px) rotateX(225deg) rotateY(-238deg)}100%{transform:translate3d(-545px,170px,-70px) rotateX(430deg) rotateY(-520deg)}}@keyframes cube-flight-c{0%{transform:translate3d(-155px,120px,-90px) rotateX(0) rotateY(20deg)}48%{transform:translate3d(125px,-72px,95px) rotateX(-220deg) rotateY(215deg)}52%{transform:translate3d(112px,-58px,95px) rotateX(-238deg) rotateY(230deg)}100%{transform:translate3d(430px,-210px,-45px) rotateX(-500deg) rotateY(470deg)}}@keyframes cube-flight-d{0%{transform:translate3d(135px,115px,-70px) rotateX(20deg) rotateY(0)}46%{transform:translate3d(-145px,-82px,85px) rotateX(235deg) rotateY(-205deg)}51%{transform:translate3d(-130px,-66px,85px) rotateX(250deg) rotateY(-220deg)}100%{transform:translate3d(-470px,-195px,-55px) rotateX(510deg) rotateY(-460deg)}}
.teaser{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}.teaser-item{position:absolute;opacity:0}.number,.name,.arrow{z-index:2}.teaser-emoji .teaser-item,.teaser-shapes .teaser-item,.teaser-flash .teaser-item{top:-18%;left:var(--x);font-size:clamp(24px,3vw,44px);filter:saturate(.95)}.teaser-shapes .teaser-item{font-family:Arial,sans-serif;font-size:clamp(30px,4vw,56px);font-weight:700;color:#16475a}.teaser-flash .teaser-item{display:grid;place-items:center;min-width:48px;min-height:48px;padding:8px;border:2px solid currentColor;border-radius:8px;background:rgba(255,255,255,.2);font-family:Arial,sans-serif;font-size:clamp(20px,2.5vw,36px);font-weight:900}.teaser-item:nth-child(1){--x:8%;--drift:32px;--delay:0s;--duration:3.6s}.teaser-item:nth-child(2){--x:22%;--drift:-22px;--delay:.55s;--duration:4.2s}.teaser-item:nth-child(3){--x:37%;--drift:25px;--delay:1.05s;--duration:3.8s}.teaser-item:nth-child(4){--x:52%;--drift:-35px;--delay:.2s;--duration:4.5s}.teaser-item:nth-child(5){--x:66%;--drift:18px;--delay:1.4s;--duration:3.7s}.teaser-item:nth-child(6){--x:79%;--drift:-25px;--delay:.8s;--duration:4.1s}.teaser-item:nth-child(7){--x:91%;--drift:-38px;--delay:1.75s;--duration:4.4s}.teaser-item:nth-child(8){--x:46%;--drift:42px;--delay:2.15s;--duration:3.9s}.card:is(:hover,:focus-visible) .teaser-emoji .teaser-item,.card:is(:hover,:focus-visible) .teaser-shapes .teaser-item,.card:is(:hover,:focus-visible) .teaser-flash .teaser-item{animation:teaser-fall var(--duration) linear var(--delay) infinite}.teaser-cubes .teaser-item{width:clamp(24px,3vw,42px);aspect-ratio:1;border:2px solid rgba(255,255,255,.82);background:var(--cube);box-shadow:inset -8px -8px 0 rgba(0,0,0,.18),0 0 18px var(--cube);transform:rotate(22deg)}.teaser-cubes .teaser-item:nth-child(1){left:8%;top:18%;--cube:#00ffff}.teaser-cubes .teaser-item:nth-child(2){left:78%;top:20%;--cube:#ff00ff}.teaser-cubes .teaser-item:nth-child(3){left:25%;top:56%;--cube:#ffff00}.teaser-cubes .teaser-item:nth-child(4){left:67%;top:62%;--cube:#00ff66}.teaser-cubes .teaser-item:nth-child(5){left:48%;top:12%;--cube:#ff5b2e}.teaser-cubes .teaser-item:nth-child(6){left:45%;top:68%;--cube:#54a7ff}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item{opacity:.9;animation:cube-bounce-a 2.8s cubic-bezier(.45,.05,.55,.95) infinite alternate}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item:nth-child(even){animation-name:cube-bounce-b;animation-duration:3.2s}.card:is(:hover,:focus-visible) .teaser-cubes .teaser-item:nth-child(3n){animation-delay:.35s;animation-duration:2.4s}@keyframes teaser-fall{0%{opacity:0;transform:translate3d(0,-70px,0) rotate(-12deg)}12%{opacity:.82}88%{opacity:.72}100%{opacity:0;transform:translate3d(var(--drift),460px,0) rotate(34deg)}}@keyframes cube-bounce-a{0%{transform:translate3d(-20px,-10px,0) rotate(0);opacity:.45}48%{transform:translate3d(145px,72px,0) rotate(155deg);opacity:.95}52%{transform:translate3d(132px,64px,0) rotate(170deg)}100%{transform:translate3d(18px,145px,0) rotate(330deg);opacity:.65}}@keyframes cube-bounce-b{0%{transform:translate3d(20px,105px,0) rotate(30deg);opacity:.5}46%{transform:translate3d(-135px,18px,0) rotate(-145deg);opacity:.95}52%{transform:translate3d(-122px,28px,0) rotate(-160deg)}100%{transform:translate3d(-12px,-75px,0) rotate(-320deg);opacity:.65}}@media(max-width:700px){.teaser{display:none}}@media(prefers-reduced-motion:reduce){.card:is(:hover,:focus-visible) .teaser-item{animation:none!important;opacity:.18}}
.portfolio{height:100dvh;min-height:0;display:grid;grid-template-rows:96px minmax(0,1fr);padding-bottom:14px}.portfolio .grid{min-height:0;margin-top:14px;grid-template-rows:repeat(2,minmax(0,1fr))}.portfolio .card{min-height:0}@media(max-width:700px){.portfolio{height:auto;min-height:100vh;display:block;padding-bottom:18px}.portfolio .grid{margin-top:28px;grid-template-rows:none}.portfolio .card{min-height:250px}}
.actions .coffee{width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:50%}
.coffee{width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:50%}.coffee-cup{position:relative;width:17px;height:13px;border:2px solid currentColor;border-radius:3px 3px 6px 6px}.coffee-cup:before{content:"";position:absolute;width:5px;height:6px;right:-7px;top:2px;border:2px solid currentColor;border-left:0;border-radius:0 6px 6px 0}.coffee-cup:after{content:"";position:absolute;left:1px;right:1px;bottom:-5px;border-bottom:2px solid currentColor;border-radius:50%}
.theme{font-size:24px;line-height:1}
.brand{font-size:32px}@media(max-width:700px){.brand{font-size:23px}}
.card{--card-bg:#fff}.card.yellow{--card-bg:#e9ff54}.card.purple{--card-bg:#7559f5}.card.blue{--card-bg:#74dafa}.card.pink{--card-bg:#ff8db8}.card:before{content:attr(data-mark);position:absolute;top:50%;right:7%;z-index:0;translate:0 -50%;font-size:clamp(84px,11vw,160px);line-height:1;font-weight:900;letter-spacing:-.08em;opacity:.055;transition:opacity .18s ease}.card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,var(--card-bg) 78%)}.card:is(:hover,:focus-visible,.preview-active):before{opacity:0}.preview-hint{position:absolute;top:24px;right:25px;z-index:2;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.58;transition:opacity .15s}.card:is(:hover,:focus-visible,.preview-active) .preview-hint{opacity:0}.purple .name{font-size:clamp(35px,4.4vw,62px)}
@media(max-width:700px){.portfolio .card{aspect-ratio:4/3;min-height:0}.teaser{display:block}.preview-hint{display:none}.card:before{font-size:28vw}.card.preview-active .teaser-emoji .teaser-item,.card.preview-active .teaser-shapes .teaser-item{animation:game-emoji-rain var(--duration) cubic-bezier(.42,0,1,1) var(--delay) infinite!important}.card.preview-active .teaser-flash .teaser-item{animation:flash-card-rain var(--duration) linear var(--delay) infinite!important}.card.preview-active .asteroid-canvas{opacity:1}}
.card.purple .name{-webkit-text-stroke:2px #111;paint-order:stroke fill}
.card:after{display:none}
@keyframes game-emoji-rain{0%{opacity:1;transform:translate3d(0,var(--fall-start),0) rotate(var(--start-spin))}100%{opacity:1;transform:translate3d(var(--drift),var(--fall-distance),0) rotate(var(--end-spin))}}@keyframes flash-card-rain{0%{opacity:1;transform:translate3d(0,var(--fall-start),0) rotate(var(--start-spin))}100%{opacity:1;transform:translate3d(var(--drift),var(--fall-distance),0) rotate(var(--end-spin))}}
.portfolio .card.yellow .teaser-emoji .teaser-item:nth-child(n),.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(n){font-size:var(--fall-size)!important}.portfolio .card.pink .teaser-flash .teaser-item:nth-child(n){width:var(--fall-size)!important;height:var(--fall-size)!important;min-width:var(--fall-size)!important;min-height:var(--fall-size)!important;font-size:var(--fall-font-size)!important}
.teaser-emoji .teaser-item:nth-child(1){font-size:62px!important}.teaser-emoji .teaser-item:nth-child(2){font-size:78px!important}.teaser-emoji .teaser-item:nth-child(3){font-size:68px!important}.teaser-emoji .teaser-item:nth-child(4){font-size:88px!important}.teaser-emoji .teaser-item:nth-child(5){font-size:72px!important}.teaser-emoji .teaser-item:nth-child(6){font-size:82px!important}.teaser-emoji .teaser-item:nth-child(7){font-size:66px!important}.teaser-emoji .teaser-item:nth-child(8){font-size:92px!important}.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(1){font-size:78px!important}.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(2){font-size:104px!important}.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(3){font-size:88px!important}.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(4){font-size:116px!important}.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(5){font-size:92px!important}.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(6){font-size:110px!important}.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(7){font-size:82px!important}.portfolio .card.blue .teaser-shapes .teaser-item:nth-child(8){font-size:120px!important}.teaser-flash .teaser-item:nth-child(1){width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important;font-size:34px!important}.teaser-flash .teaser-item:nth-child(2){width:92px!important;height:92px!important;min-width:92px!important;min-height:92px!important;font-size:44px!important}.teaser-flash .teaser-item:nth-child(3){width:82px!important;height:82px!important;min-width:82px!important;min-height:82px!important;font-size:38px!important}.teaser-flash .teaser-item:nth-child(4){width:98px!important;height:98px!important;min-width:98px!important;min-height:98px!important;font-size:48px!important}.teaser-flash .teaser-item:nth-child(5){width:80px!important;height:80px!important;min-width:80px!important;min-height:80px!important;font-size:36px!important}.teaser-flash .teaser-item:nth-child(6){width:94px!important;height:94px!important;min-width:94px!important;min-height:94px!important;font-size:45px!important}.teaser-flash .teaser-item:nth-child(7){width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;font-size:35px!important}.teaser-flash .teaser-item:nth-child(8){width:88px!important;height:88px!important;min-width:88px!important;min-height:88px!important;font-size:42px!important}
:root{--ink:#18181b;--paper:#f7f7f3;--line:#d7d7d0;--muted:#6b6b70;--shadow:#18181b;color-scheme:light}[data-theme="dark"]{--ink:#f4f4ef;--paper:#111113;--line:#343438;--muted:#a2a2a8;--shadow:#f4f4ef;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}main{min-height:100vh;max-width:1440px;margin:auto;padding:0 42px}header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:20px;font-weight:800;letter-spacing:-.04em}.brand span{color:var(--muted)}.actions{display:flex;align-items:center;gap:9px}.coffee{display:flex;align-items:center;gap:7px;border:1px solid var(--ink);border-radius:999px;padding:11px 16px;font-size:13px;font-weight:700;transition:.18s}.coffee:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}.theme{width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);font-size:19px;cursor:pointer;transition:.18s}.theme:hover{background:var(--ink);color:var(--paper);transform:rotate(20deg)}.intro{padding:90px 0 70px;display:flex;align-items:flex-end;justify-content:space-between}.intro h1{margin:0;font-size:clamp(64px,10vw,146px);line-height:.82;letter-spacing:-.085em;text-transform:uppercase}.intro p{margin:0 0 10px;font-size:14px;color:#747477}.grid{margin-top:72px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.card{min-height:310px;border:1px solid var(--ink);padding:25px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-5px);box-shadow:0 10px 0 var(--shadow)}.number{position:absolute;top:24px;left:25px;font-size:12px;font-weight:800}.icon{position:absolute;top:24px;right:25px;font-size:58px;transition:transform .25s}.card:hover .icon{transform:rotate(8deg) scale(1.12)}.name{font-size:clamp(35px,5vw,68px);line-height:.9;letter-spacing:-.06em;font-weight:800;text-transform:uppercase;max-width:80%}.arrow{position:absolute;right:25px;bottom:22px;font-size:34px}.yellow{background:#e9ff54;color:#18181b}.purple{background:#7559f5;color:white}.blue{background:#74dafa;color:#18181b}.pink{background:#ff8db8;color:#18181b}footer{height:130px;margin-top:80px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}footer a{border-bottom:1px solid}@media(max-width:700px){main{padding:0 18px}header{height:76px}.brand{font-size:17px}.coffee span{display:none}.coffee{padding:10px 12px}.intro{padding:70px 0 50px;display:block}.intro h1{font-size:18vw}.intro p{margin-top:24px}.grid{margin-top:44px;grid-template-columns:1fr}.card{min-height:250px}.name{font-size:12vw}footer{margin-top:55px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media (min-width: 701px) {
  .portfolio {
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
    padding-bottom: 42px;
  }

  .portfolio .grid {
    width: min(100%, 760px);
    margin: 14px auto 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }

  .portfolio .card,
  html.mobile-preview-mode .portfolio .card {
    min-height: 0 !important;
    aspect-ratio: 2 / 1 !important;
  }
}

.portfolio-version {
  width: min(100%, 760px);
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: right;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .portfolio-version {
    margin-top: 18px;
    padding: 16px 2px max(4px, env(safe-area-inset-bottom));
  }
}