@font-face {
  font-family: Geist;
  src: url('../fonts/Geist-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --color-text: #303237;
  --color-secondary: #919693;
  --color-link: #686868;
  --color-background: #fff;
  --content-width: 800px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font: 300 16px/21px Geist, sans-serif; }
h1, h2, p { margin: 0; }
h1, h2 { font-size: inherit; font-weight: 600; line-height: inherit; }
h2 { font-weight: 500; }
a { color: inherit; }
img { display: block; }
.portfolio { max-width: var(--content-width); margin: 80px auto 120px; }
.hero { display: grid; grid-template-columns: 137px minmax(0, 1fr); gap: 35px; align-items: start; }
.portrait { width: 137px; height: 201px; position: relative; overflow: hidden; border-radius: 12px; }
.portrait img { position: absolute; width: 139.5%; height: 126.53%; left: -15.33%; top: -12.38%; max-width: none; }
.hero-content { display: flex; flex-direction: column; justify-content: space-between; min-height: 201px; gap: 24px; min-width: 0; }
.intro { display: flex; flex-direction: column; gap: 16px; }
.identity { display: flex; flex-direction: column; gap: 2px; }
.identity h1 { font-size: 26px; line-height: 34px; }
.role { color: var(--color-secondary); font-weight: 300; }
.text-link { color: var(--color-link); text-decoration: underline; text-underline-position: from-font; text-decoration-thickness: from-font; transition: color 300ms ease-out; }
.text-link:hover, .text-link:focus-visible { color: var(--color-text); }
.contacts { display: flex; align-items: center; gap: 17px; }
.button-primary { display: inline-flex; align-items: center; justify-content: center; width: max-content; height: 32px; padding: 4px 10px; border-radius: 10px; background: var(--color-text); color: #e5f1e9; text-decoration: none; transition: background-color 300ms ease-out, color 300ms ease-out; }
.button-primary:hover, .button-primary:focus-visible { background: #686868; color: #fff; }
.download-icon { display: block; position: relative; flex: 0 0 24px; width: 24px; height: 24px; }
.download-icon img { position: absolute; inset: 0; transition: opacity 300ms ease-out; }
.icon-hover { opacity: 0; }
.button-primary:hover .icon-hover, .button-primary:focus-visible .icon-hover { opacity: 1; }
.button-primary:hover .icon-default, .button-primary:focus-visible .icon-default { opacity: 0; }
.telegram { display: inline-flex; justify-content: center; width: 76px; line-height: 23px; }
[aria-disabled="true"] { cursor: default; }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px 16px; margin-top: 110px; }
.card { display: flex; flex-direction: column; min-width: 0; gap: 12px; border-radius: 4px; text-decoration: none; }
.card-wide { grid-column: 1 / -1; }
.card-visual { position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; height: 266px; padding: 48px 48px 0; border-radius: 16px; }
.card-background { position: absolute; inset: 0; opacity: .65; overflow: hidden; border-radius: inherit; pointer-events: none; }
.card-background img { position: absolute; max-width: none; }
.card-screen { position: relative; flex-shrink: 0; width: 100%; overflow: hidden; border-radius: 8px 8px 0 0; }
.card-screen img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-background, .card-screen { transition: transform 200ms ease-out; }
  .card:hover .card-background, .card:hover .card-screen { transform: scale(1.02); }
}
.card-autotest .card-background img { width: 107%; height: 455.23%; left: -3.63%; top: -155.1%; }
.card-autotest .card-screen { aspect-ratio: 2880 / 1115; }
.card-discovery .card-background img { width: 124.86%; height: 138.01%; left: -13.62%; top: -16.66%; }
.card-discovery .card-screen { aspect-ratio: 4096 / 3087; }
.card-cells .card-background img { width: 115.31%; height: 254.89%; left: -6.38%; top: -85.01%; }
.card-cells .card-screen { aspect-ratio: 296 / 230; }
.card-cells .card-screen img { position: absolute; width: 100%; height: 103.74%; top: -3.91%; left: 0; object-fit: fill; }
.card-chips .card-background img { width: 113.37%; height: 426.07%; left: -7.25%; top: -262.54%; }
.card-chips .card-screen { aspect-ratio: 3344 / 1882; }
.card-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.soon { padding: 0 3px; border-radius: 4px; background: #f6e7c1; }
.mobile-title { display: none; }
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 5px; }
.projects:focus { outline: none; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 1; padding: 8px 12px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.setup { max-width: var(--content-width); margin: 80px auto; padding: 0 24px; }
.setup h1 { margin-bottom: 16px; font-size: 24px; line-height: 1.3; }
@media (max-width: 863px) {
  .portfolio { margin: 64px 32px; }
  .hero-content { gap: 40px; }
  .projects { margin-top: 110px; }
  .card-visual { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 599px) {
  .portfolio { margin: 24px 16px 64px; }
  .hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .portrait { width: 89.116px; height: 131px; }
  .hero-content { width: 100%; min-height: 0; gap: 32px; }
  .contacts { gap: 16px; }
  .telegram { width: 75px; }
  .projects { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 64px; }
  .card-wide { grid-column: auto; }
  .card-visual { height: 200px; padding: 24px 24px 0; }
  .card-autotest .card-visual { height: 150px; justify-content: flex-end; }
  .card-autotest .card-background img { width: 104.86%; height: 367%; left: -2.57%; top: -128.7%; }
  .card-chips .card-visual { justify-content: flex-end; }
  .desktop-title { display: none; }
  .mobile-title { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}