:root {
  --dl-color-gray-500: #595959;
  --dl-color-gray-700: #999999;
  --dl-color-gray-900: #D9D9D9;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-danger-300: #A22020;
  --dl-color-danger-500: #BF2626;
  --dl-color-danger-700: #E14747;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #FFFFFF;
  --dl-color-text-plain: rgba(34, 35, 37, 1);
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-unit: 16px;
  --dl-color-primary-100: #003EB3;
  --dl-color-primary-300: #0074F0;
  --dl-color-primary-500: #14A9FF;
  --dl-color-primary-700: #85DCFF;
  --dl-color-success-300: #199033;
  --dl-color-success-500: #32A94C;
  --dl-color-success-700: #4CC366;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-color-default-black: rgba(32, 32, 32, 1);
  --dl-color-default-white: rgba(255, 255, 255, 1);
  --dl-radius-radius-round: 50%;
  --dl-space-space-halfunit: 8px;
  --dl-space-space-sixunits: 96px;
  --dl-space-space-twounits: 32px;
  --dl-color-default-primary: rgba(51, 111, 215, 1);
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-space-space-fiveunits: 80px;
  --dl-space-space-fourunits: 64px;
  --dl-color-default-darkgray: rgba(208, 213, 220, 1);
  --dl-space-space-threeunits: 48px;
  --dl-color-default-ligthgray: rgba(228, 228, 228, 1);
  --dl-space-space-oneandhalfunits: 24px;
}
body {
font-family: sans-serif;
margin:0;

}


.overlay {

gap:3rem;
display:flex;
flex-direction:column;
 padding-left: 8%;
  padding-right: 8%;
padding-top: 20%;
  padding-bottom: 8%;

  width: 100%;
}

.about {
  display: flex;
    flex-direction: column;
  gap:3rem;
    padding-top: 8em;
}

@media (max-width: 1192px){
.overlay {

    gap: 3rem;
    display: flex;
    flex-direction: column;
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 20%;
    padding-bottom: 6%;

    width: 100%;
}
}


@media (max-width: 1012px){
.overlay {

    gap: 3rem;
    display: flex;
    flex-direction: column;
 
    padding-top: 20%;
  
  
    width: 100%;
}
}


@media (max-width: 375px){
.overlay {
gap: 1.5rem;
padding-left: 8%;
padding-rigth: 8%;
padding-top: 16%;
  padding-bottom:16%;
margin-bottom: 3rem;
}
}


.button {
  color: var(--dl-color-gray-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.input {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.textarea {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}
.list-item {
  display: list-item;
}
.teleport-show {
  display: flex !important;
  transform: none !important;
}
.OtherOverlineMobile {
  font-size: 14px;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  text-transform: uppercase;
}
.HeadlineH1 {
  font-size: 96px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 700px;
  font-stretch: normal;
}
.TextSecondary {
  font-size: 24px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 300;

  font-stretch: normal;
}
.OtherCaptionMobile {
  font-size: 14px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 400px;
  font-stretch: normal;
}
.Body0 {
  font-size: 23px;
  font-style: normal;
  font-family: Inter;
  font-weight: 400px;
  font-stretch: normal;
}
/* =========================================================================
   Animated button (.vp) — "View Project", "Connect on LinkedIn", "Play a Game"
   One element: <a class="vp">label + icon</a>. The script at the bottom of the
   page adds the liquid layer. Hover: a small gooey blob follows the cursor.
   Press: the blob floods the pill, then the link opens.
   Touch: blob under the finger; release floods and opens; scrolling cancels.
   ========================================================================= */
.vp {
  --vp-bg: #FFFFFF;          /* resting pill */
  --vp-ink: #202020;         /* resting text + icon */
  --vp-border: rgba(32, 32, 32, 1);
  --vp-fill: #C8D7FF;        /* the blob */
  --vp-fill-ink: #202020;    /* text + icon once flooded */
  --vp-focus: #5628F5;
  --vp-ease: cubic-bezier(0.23, 1, 0.32, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 24px;
  border: 1px solid var(--vp-border);
  border-radius: 100px;
  background: var(--vp-bg);
  color: var(--vp-ink);
  font: 600 16px/28px 'Bai Jamjuree', sans-serif;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  transition: transform 160ms var(--vp-ease), color 200ms var(--vp-ease);
}
/* icon before the text (Connect on LinkedIn) */
.vp.vp--icon-first { gap: 6px; padding: 8px 24px 8px 18px; }
/* dark pill (footer "Play a Game") */
.vp.vp--dark {
  --vp-bg: #21170E;
  --vp-ink: #FFFFFF;
  --vp-border: #FFFFFF;
  --vp-fill: #5628F5;
  --vp-fill-ink: #FFFFFF;
  --vp-focus: #A7B9FF;
}
.vp:focus-visible { outline: 2px solid var(--vp-focus); outline-offset: 3px; }
.vp.is-pressed { transform: scale(0.97); }
.vp.is-flooded { color: var(--vp-fill-ink); }

/* liquid layer: larger than the pill so the goo filter never thins out at the edges */
.vp-goo {
  position: absolute;
  inset: -24px;
  z-index: -1;
  pointer-events: none;
  filter: url(#vp-goo);
}
.vp-blob {
  position: absolute;
  left: 0; top: 0;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--vp-fill);
  transform: scale(0);
  will-change: transform;
}
.vp-label { position: relative; white-space: nowrap; overflow-wrap: normal; }
.vp-icon {
  position: relative;
  display: block;
  width: 28px; height: 28px;
  flex: none;
  transition: transform 220ms var(--vp-ease);
}
.vp.is-flooded .vp-icon { transform: translateX(4px); }
.vp.is-flooded .vp-icon--out { transform: translate(2px, -2px); }
.vp.is-flooded .vp-icon--frog { transform: translateY(-3px); }

/* phones: full-width buttons, as before */
@media (max-width: 455px) {
  .vp { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-goo { display: none; }
  .vp { transition: background-color 150ms ease, color 150ms ease; }
  .vp.is-flooded { background: var(--vp-fill); }
  .vp.is-pressed { transform: none; }
  .vp-icon, .vp.is-flooded .vp-icon { transition: none; transform: none; }
}


.OtherOverline {
  font-size: 16px;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  text-transform: uppercase;
}
.ActionPrimary {
  font-size: 24px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 600px;
  font-stretch: normal;
}
.navinactive {
  font-size: 16px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 400px;
  font-stretch: normal;
}
.OtherCaption {
  font-size: 16px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 400px;
  font-stretch: normal;
}
.HeadlineH2 {
  font-size: 80px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 700px;
  font-stretch: normal;
}
.ActionSecondary {
  font-size: 16px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 600px;
  font-stretch: normal;
}
.HeadlineH5 {
  font-size: 48px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 400px;
  font-stretch: normal;
}
.HeadlineH3 {
  font-size: 72px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 500px;
  font-stretch: normal;
}
.TextSecondaryMobile {
  font-size: 16px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 300;

  font-stretch: normal;
}
.Content {
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
.Heading {
  font-size: 32px;
  font-family: Inter;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
.TextHero {
  font-size: 40px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 400px;
  font-stretch: normal;
}
.TextMain {
  font-size: 32px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 400px;
  font-stretch: normal;
}
.HeadlineH6mobile {
  font-size: 1rem;
  font-family: 'Bai Jamjuree';
  font-weight: 500;
}
.HeadlineH4 {
  font-size: 56px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 700px;
  font-stretch: normal;
}
.HeadlineH6 {
font-weight: 500;
  font-family: 'Bai Jamjuree';
font-size: 1.5rem;
}
h2{
font-weight: 500;
  font-family: 'Bai Jamjuree';
font-size: 2rem;
}
.navactive {
  font-size: 16px;
  font-style: normal;
  font-family: 'Bai Jamjuree';
  font-weight: 500;
  font-stretch: normal;
}


body {
font-family: sans-serif;
   -webkit-font-smoothing: antialiased;
}

.headline{font-size: 6rem;
font-weight: 200;
font-family: 'Bai Jamjuree';
letter-spacing: -0.2rem;}

   @media(max-width: 540px) {
       .headline{
          font-size: 4rem; 
line-height: 1;     
                 align-self: flex-start;
       padding-left: 6%;
padding-right: 6%;}
      }

#works {
   padding-top:8em;
margin-top:-8em;
}


h1 {
font-size: 4.5rem;
font-weight: 200;
font-family: 'Bai Jamjuree';
letter-spacing: -0.2rem;
}


.mobb{
   display:none;
}

 @media(max-width: 530px) {
       .mobb{
         display: flex;}
      }


nav {
   display:flex;
   flex-direction: row;
   gap: 4vw;
}

nav a {
  position: relative;
  text-decoration: none;
  color: inherit;
}

nav a:hover {
  color: inherit;
}

nav a::before {
  content: "";
  position: absolute;
  top: calc(-20%);
  left: calc(50% - 1.5em);
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: rgba(118, 154, 255, 0.4);
  transform: scale(0);
  z-index: -100;
}

nav a:hover::before {
  transform: scale(1);
  transition: transform 0.3s ease;
}


nav a:target{
   font-weight: 600;
}

nav a:active{
   font-weight: 600;
}

.active{
   font-weight: 600;
   color: #000000;
}

:root {
  --footertext: #ffffff;
  --footerline: #769AFF;
  --footerline-active: #5628F5;
}

footer {
  width: 95%;
  padding-left: 8%;
  padding-right:8%;
  padding-top: 4%;
  padding-bottom: 4%;
  margin: auto;
  height: auto;
  font-family: 'Bai Jamjuree';
  font-variant-numeric: lining-nums proportional-nums;
  background-color: #21170E;
  display: flex;
  flex-direction: column;
margin-top: 4rem;
margin-bottom: 2rem;
   border-radius: 1em;
    gap: 2rem;
}

.footcon {
display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
}

.manif {
display: flex;
    width: 50%;
    gap: 1rem;
    flex-direction: column;
}

.gamef {
display: flex;
    flex-direction: column;
   
    align-self: flex-start;
   
    gap: 0.7rem;
  
}

footer p {
  font-size: 1rem;
  margin: 0;
  color: var(--footertext);
}
footer p a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  margin: 0 var(--spacing, 0px);
  transition: margin 0.25s;
}
footer p a svg {
  width: 6rem;
  height: 2.5rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0.5rem) translateZ(0);
  fill: none;
  stroke: var(--stroke, var(--footerline));
  stroke-linecap: round;
  stroke-width: 0.1rem;
  stroke-dasharray: var(--offset, 69px) 278px;
  stroke-dashoffset: 361px;
  transition: stroke 0.29s ease var(--stroke-delay, 0s), stroke-dasharray 0.39s;
}
footer p a:hover {
  --spacing: 0.4rem;
  --stroke: var(--footerline-active);
  --stroke-delay: .1s;
  --offset: 180px;
}
      @media(max-width: 900px) {
        footer{
           padding-top: 8%;
  padding-bottom: 8%;
           width:85%;
        }
      }


@media (max-width: 745px){
.footcon {
   flex-direction: column;
}
.gamef {
width: 100%;
}
.manif {
width: 100%;
}
}


.portfolio-container {
 
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
  background-color: #21170E;
}
.portfolio-container1 {
  width: 100%;
}
.portfolio-container2 {
  display: contents;
}
/* ===== Navigation (one nav for desktop + phone) ===== */
.portfolio-desknav {
  position: fixed;
  top: env(safe-area-inset-top, 0px);   /* sits below the notch / status bar */
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 96%;
  margin: 2%;
  padding: 0.8rem 2rem 0.6rem 1.8rem;
  border-radius: 10rem;
  background-color: transparent;        /* turns white on scroll (see .scroll + nav script) */
  color: #fff;
  box-shadow: none;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}


.portfolio-desknav.scroll {
  background-color: #fff; /* Change background color on scroll */
  color: #000; /* Black text color */
 box-shadow: 0px 2px 4px 0px rgba(167, 167, 167, 0.1); /* Add box shadow */

}

/* Logo + CV icon: white over the hero, dark on the white nav.
   They fade together with the background and text instead of swapping files. */
.portfolio-desknav .portfolio-m,
.portfolio-desknav .portfolio-arrowop {
  transition: filter 0.35s ease;
}
.portfolio-desknav.scroll .portfolio-m,
.portfolio-desknav.scroll .portfolio-arrowop {
  filter: brightness(0) invert(0.12);
}

/* phones: the same nav becomes an always-white floating pill with only the CV link */
@media (max-width: 530px) {
  .portfolio-desknav {
    margin: 2.5%;
    width: 95%;
    padding: 0.4rem 5%;
    border-radius: 4rem;
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 4px 0 rgba(167, 167, 167, 0.1);
  }
  .portfolio-desknav .nav-section { display: none; }
  .portfolio-desknav .portfolio-m,
  .portfolio-desknav .portfolio-arrowop { filter: brightness(0) invert(0.12); }   /* dark from the first paint */
}


.portfolio-logotype {
  height: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
}
.portfolio-logo {
  width: 20vw;
  height: 3rem;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
}
.portfolio-m {
  height: 100%;
  
  box-sizing: content-box;
}
.portfolio-nav {
  gap: 4vw;
  display: flex;
  align-self: center;
}
.portfolio-navitem {
  height: 2.35rem;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
gap: 3px;
}
.portfolio-text {
 
  height: auto;
  font-size: 1.2rem;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';
  
  line-height: normal;
  font-stretch: normal;
}
.portfolio-navitem1 {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
.portfolio-text01 {
  
  height: auto;
  font-size: 1.2rem;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';
  
  line-height: normal;
  font-stretch: normal;
}
.portfolio-navitem2 {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
.portfolio-text02 {
 
  height: auto;
  font-size: 1.2rem;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';

  line-height: normal;
  font-stretch: normal;
}
.portfolio-navitem3 {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;

}
.portfolio-arrowop {
  width: 1.8rem;
  height: auto;
    border-radius: 0;
}
.portfolio-text03 {
  
  height: auto;
  font-size: 1.2rem;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';

  line-height: normal;
  font-stretch: normal;
}


.portfolio-hero {
  gap: 5vh;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  bottom: 0px;
  margin: auto;
  display: flex;
  position: relative;
  align-self: center;
  align-items: center;
 

  flex-direction: column;
  justify-content: center;
   height: 100%;
background-color: #21170E;
background-image: radial-gradient(at 30% 45%, hsla(168, 100%, 42%, 0.5) 0px, transparent 38%), radial-gradient(at 58% 50%, hsla(183, 96%, 24%, 0.5) 0px, transparent 70%), radial-gradient(at 48% 45%, hsla(253, 100%, 55%, 0.9) 0px, transparent 55%),radial-gradient(at 25% 55%, hsla(222,100%,35%,0.7) 0px, transparent 45%);
  }


.portfolio-textcont {
  gap: 1.5vh;
  width: 60%;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-text25 {
  color: var(--dl-color-gray-white);
  width: auto;
  height: auto;
  font-size: 1.5rem;
  align-self: flex-start;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  line-height: auto;
  font-stretch: normal;
}
.portfolio-text26 {
  color: var(--dl-color-gray-white);
  width: auto;
  height: auto;
  font-size: 1.5rem;
  align-self: flex-start;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  line-height: auto;
  font-stretch: normal;
}


.portfolio-introcontentsmob {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  background-color: #ffffff;
gap: 4rem;
   padding-top: 2em;
    border-radius: 1.5rem 1.5rem 0 0;

}

@media (min-width: 531px) {
 .portfolio-introcontentsmob {
    display:none;
 }
}


.portfolio-intromob {
  gap: 5vh;
  width: 100%;
  height: auto;
  display: none;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 5vh;
  padding-left: 6%;
  padding-right: 6%;
  flex-direction: column-reverse;
  background-color: white;
}
.portfolio-top {
  gap: 2vh;
  display: flex;
  align-self: stretch;
  align-items: flex-end;
  flex-direction: column-reverse;
}
.portfolio-fg {
  gap: 1vh;
  width: 100%;
  display: flex;
  font-size: 1.8rem;
  align-items: flex-start;
  flex-direction: column;
padding-top: 1rem;
}
.portfolio-rectangle16 {
  width: auto;
  height: 2px;
}
.portfolio-text29 {
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-style: Regular;
  text-align: left;
  font-family: 'Chakra Petch';
  font-weight: 600;
  line-height: auto;
  font-stretch: normal;
}
.portfolio-avatarnew21 {
  width: 100%;
  height: auto;
}
.portfolio-intromobtext {
  gap: 2vh;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-rectangle161 {
  width: auto;
  height: 2px;
}
.portfolio-text30 {
  gap: 1vh;
  display: flex;
  font-size: 1.2rem;
  align-self: stretch;
  font-style: regular;
  align-items: flex-start;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  line-height: auto;
  flex-direction: column;
}
.portfolio-text31 {
  color: rgba(0, 0, 0, 1);
  height: auto;
  align-self: stretch;
  font-style: Regular;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-stretch: normal;
  text-decoration: none;
}
.portfolio-text33 {
  color: rgba(0, 0, 0, 1);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: 22.02544403076172px;
  font-stretch: normal;
  text-decoration: none;
}
.portfolio-mobwrapper {
  display: none;
  align-items: center;
  flex-direction: column;
}
.portfolio-statscontainermob {
  width: 100%;
  height: auto;
  display: none;
  align-items: center;
  flex-direction: column;
}
.portfolio-stats {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: 8%;
  border-color: rgba(190, 190, 190, 1);
  border-style: solid;
  border-width: 1px 0;
  grid-row-gap: 2em;
  padding-left: 2%;
  padding-right: 2%;
  flex-direction: column;
  padding-bottom: 8%;
}
.portfolio-item {
  gap: 1vh;
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding-left: 6%;
  padding-right: 6%;
  flex-direction: column;
}
.portfolio-text34 {
  color: var(--dl-color-default-black);
  height: auto;
  font-size: 1.1rem;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 500;
  line-height: auto;
  font-variant-numeric: lining-nums proportional-nums;
}
.portfolio-rectangle162 {
  width: auto;
  height: 2px;
}
.portfolio-text35 {
  color: var(--dl-color-default-black);
  height: auto;
  font-size: 0.95rem;
  align-self: stretch;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  line-height: auto;
  font-stretch: normal;
}
.portfolio-text36 {
  color: #757575;
  height: auto;
  font-size: 0.8rem;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 400;
  line-height: auto;
  font-variant-numeric: lining-nums proportional-nums;
}
.portfolio-item1 {
  gap: 1vh;
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding-left: 6%;
  padding-right: 6%;
  flex-direction: column;
}
.portfolio-text37 {
  color: var(--dl-color-default-black);
  height: auto;
  font-size: 1.1rem;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 500;
  line-height: auto;
  font-variant-numeric: lining-nums proportional-nums;
}
.portfolio-rectangle163 {
  width: auto;
  height: 2px;
}
.portfolio-text38 {
  color: var(--dl-color-default-black);
  height: auto;
  font-size: 0.95rem;
  align-self: stretch;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  line-height: auto;
  font-stretch: normal;
}
.portfolio-text41 {
  color: #757575;
  height: auto;
  font-size: 0.8rem;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 400;
  line-height: auto;
  font-variant-numeric: lining-nums proportional-nums;
}
.portfolio-card {
  gap: 2rem;
 
  display: none;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
  flex-direction: column;
}
.portfolio-cardheader {
  gap: 16px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
   padding-left: 8%;
   padding-right: 8%;
}
.portfolio-title {
  gap: 16px;
  display: flex;
  padding: 16px 0;
  align-self: stretch;
  align-items: flex-start;
  border-color: rgba(228, 228, 228, 1);
  border-style: solid;
  border-width: 1px 0;
  flex-direction: column;
}
.portfolio-contents {
  gap: 16px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-subheader {
  gap: 8px;
  display: flex;
  align-items: flex-start;
}
.portfolio-text42 {
  color: var(--dl-color-default-black);
  height: auto;
  text-align: left;
  line-height: normal;
}
.portfolio-text44 {
  color: var(--dl-color-default-black);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: normal;
}
.portfolio-text45 {
  color: var(--dl-color-default-black);
  height: auto;
  text-align: left;
  line-height: 24px;
}
.portfolio-text47 {
  color: var(--dl-color-default-black);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: 24px;
}


.portfolio-vego2 {
  width: 100%;
  height: auto;
}
.portfolio-card1 {
  gap: 24px;
  top: 105px;
  left: 32.1844367980957px;
  width: 50%;
  display: none;
  position: absolute;
  align-items: flex-start;
  flex-shrink: 0;
  flex-direction: column;
}
.portfolio-cardheader1 {
  gap: 16px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-title1 {
  gap: 16px;
  display: flex;
  padding: 16px 0;
  align-self: stretch;
  align-items: flex-start;
  border-color: rgba(228, 228, 228, 1);
  border-style: solid;
  border-width: 1px 0;
  flex-direction: column;
}
.portfolio-contents1 {
  gap: 16px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-subheader1 {
  gap: 8px;
  display: flex;
  align-items: flex-start;
}
.portfolio-text51 {
  color: var(--dl-color-default-black);
  height: auto;
  text-align: left;
  line-height: normal;
}
.portfolio-text53 {
  color: var(--dl-color-default-black);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: normal;
}
.portfolio-text54 {
  color: var(--dl-color-default-black);
  height: auto;
  text-align: left;
  line-height: 24px;
}
.portfolio-text56 {
  color: var(--dl-color-default-black);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: 24px;
}


.portfolio-vego21 {
  width: 100%;
  height: auto;
}
.portfolio-introdesk {
  gap: 3vw;
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;

/*padding-left: 6%; */
    /* padding-right: 6%; */
    flex-direction: row;
    /* justify-content: center; */
    background-color: white;
    /* margin: 0; */
}

.portfolio-top1 {
  gap: 4vh;
  width: 30%;
  display: flex;
  align-self: stretch;
  align-items: flex-end;
  flex-direction: column;
}
.portfolio-avatarnew211 {
  width: 100%;
  height: auto;
}
.portfolio-fg1 {
  gap: 1vh;
  width: 100%;
  display: flex;
  font-size: 2.2rem;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-rectangle164 {
  width: auto;
  height: 2px;
}
.portfolio-text60 {
  color: rgba(0, 0, 0, 1);
  height: auto;
  font-style: Regular;
  text-align: left;
  font-family: 'Chakra Petch';
  font-weight: 600;
  line-height: auto;
  font-stretch: normal;
}
.portfolio-introtext {
  gap: 1.2rem;
  width: 35%;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  padding-top: 4vh;
  flex-direction: column;
}
.portfolio-rectangle165 {
  width: auto;
  height: 2px;
}
.portfolio-text61 {
  gap: 1vh;
  display: flex;
  font-size: 1.4rem;
  align-self: stretch;
  font-style: regular;
  align-items: flex-start;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  line-height: auto;
  flex-direction: column;
}
.portfolio-text62 {
  color: rgba(0, 0, 0, 1);
  height: auto;
  align-self: stretch;
  font-style: Regular;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-stretch: normal;
  text-decoration: none;
}
.portfolio-text64 {
  color: rgb(0, 0, 0);
  height: auto;
  align-self: stretch;
  text-align: left;
  font-stretch: normal;
  text-decoration: none;
}


.portfolio-deskwrapper {
  
  width: 100%;
  display: flex;
  border-radius: 3rem 3rem 0 0;
  align-items: center;
  padding-top: 8%;
  padding-left: 8%;
  padding-right: 8%;
  flex-direction: column;
  padding-bottom: 16%;
  background-color: #ffffff;
}
.portfolio-statscontainer {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.portfolio-stats1 {
  gap: 8vw;
  width: 100%;
  height: auto;
  display: flex;
  flex-shrink: 0;
  padding-top: 4%;
  border-color: rgba(190, 190, 190, 1);
  border-style: solid;
  border-width: 1px 0;
  padding-bottom: 4%;
  justify-content: center;
}
.portfolio-item2 {
  gap: 1vh;
  width: auto;
  display: flex;
  align-self: top;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-text67 {
  color: var(--dl-color-default-black);
  height: auto;
  font-size: 1.1rem;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 500;
  line-height: auto;
  font-variant-numeric: lining-nums proportional-nums;
}
.portfolio-rectangle166 {
  width: auto;
  height: 2px;
}
.portfolio-text68 {
  color: var(--dl-color-default-black);
  height: auto;
  font-size: 0.95rem;
  align-self: stretch;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  line-height: auto;
  font-stretch: normal;
}
.portfolio-text69 {
  color: #757575;
  height: auto;
  font-size: 0.8rem;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 400;
  line-height: auto;
  font-variant-numeric: lining-nums proportional-nums;
}
.portfolio-item3 {
  gap: 1vh;
  width: auto;
  display: flex;
  align-self: top;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-text70 {
  color: var(--dl-color-default-black);
  height: auto;
  font-size: 1.1rem;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 500;
  line-height: auto;
  font-variant-numeric: lining-nums proportional-nums;
}
.portfolio-rectangle167 {
  width: auto;
  height: 2px;
}
.portfolio-text71 {
  color: var(--dl-color-default-black);
  height: auto;
  font-size: 0.95rem;
  align-self: stretch;
  font-style: normal;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 300;
  line-height: auto;
  font-stretch: normal;
}
.portfolio-text74 {
  color: #757575;
  height: auto;
  font-size: 0.8rem;
  text-align: left;
  font-family: 'Bai Jamjuree';
  font-weight: 400;
  line-height: auto;
  font-variant-numeric: lining-nums proportional-nums;
}
.portfolio-cards {
  gap: auto;
  width: 100%;
  height: auto;
  display: flex;
  align-items: start;
  flex-shrink: 0;
  flex-direction: row;
  justify-content: space-between;
padding-top: 3rem;
    padding-bottom: 2rem;
}
.portfolio-carddesktop {
  gap: 4vh;
  width: 48%;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  flex-direction: column;
}
.portfolio-headercard {
  gap: 16px;
  height: 100%;
  display: flex;
  padding: 24px 0;
  align-self: stretch;
  align-items: flex-start;
  flex-shrink: 0;
  border-color: rgba(228, 228, 228, 1);
  border-style: solid;
  border-width: 0 0 1px;
  flex-direction: column;
  justify-content: space-between;
}
.portfolio-title2 {
  gap: 16px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-subheader2 {
  gap: 8px;
  display: flex;
  align-items: flex-start;
}
.portfolio-text75 {
  color: var(--dl-color-default-black);
  height: auto;
  text-align: left;
  line-height: normal;
}
.portfolio-text77 {
  color: var(--dl-color-default-black);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: normal;
}
.portfolio-text78 {
  color: var(--dl-color-default-black);
  height: auto;
  text-align: left;
  line-height: 24px;
}
.portfolio-text80 {
  color: var(--dl-color-default-black);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: 32px;
}


.portfolio-vego22 {
  width: 100%;
  height: auto;
  align-self: stretch;
}
.portfolio-carddesktop1 {
  gap: 4vh;
  width: 48%;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  flex-direction: column;
}
.portfolio-headercard1 {
  gap: 16px;
  height: 100%;
  display: flex;
  padding: 24px 0;
  align-self: stretch;
  align-items: flex-start;
  flex-shrink: 0;
  border-color: rgba(228, 228, 228, 1);
  border-style: solid;
  border-width: 0 0 1px;
  flex-direction: column;
  justify-content: space-between;
}
.portfolio-title3 {
  gap: 16px;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.portfolio-subheader3 {
  gap: 8px;
  display: flex;
  align-items: flex-start;
}
.portfolio-text83 {
  color: var(--dl-color-default-black);
  height: auto;
  text-align: left;
  line-height: normal;
}
.portfolio-text85 {
  color: var(--dl-color-default-black);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: normal;
}
.portfolio-text87 {
  color: var(--dl-color-default-black);
  height: auto;
  text-align: left;
  line-height: 24px;
}
.portfolio-text89 {
  color: var(--dl-color-default-black);
  height: auto;
  align-self: stretch;
  text-align: left;
  line-height: 32px;
}


.portfolio-vego23 {
  align-self: stretch;
}
@media(max-width: 1600px) {
  
  .portfolio-logo {
    height: 2.5rem;
  }
  
  .portfolio-textcont {
    width: 65%;
  }
  .portfolio-fg1 {
    font-size: 1.8rem;
  }
}
@media(max-width: 1200px) {
  
  .portfolio-logo {
    height: 5vh;
  }
  
  .portfolio-textcont {
    width: 75%;
  }
  .portfolio-top1 {
    width: 32%;
  }
  .portfolio-fg1 {
    font-size: 1.4rem;
  }
  .portfolio-introtext {
    width: 45%;
  }
  .portfolio-text61 {
    font-size: 1.2rem;
  }
  
  
  .portfolio-stats1 {
    gap: 4vw;
    align-items: flex-start;
  }
}
@media(max-width: 900px) {
     .portfolio-nav a::before {
  content: "";
  position: absolute;
  top: calc(-40%);
  left: calc(50% - 1em);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: rgba(118, 154, 255, 0.4);
  transform: scale(0);
  z-index: -100;
}
  
  .portfolio-logo {
    width: 32vw;
    height: 4vh;
  }
  .portfolio-nav {
    width: auto;
    align-self: center;
    align-items: flex-start;
    justify-content: space-between;
  }
  .hide {
    width: auto;
    height: 3vh;
    display: none;
    flex-direction: column;
  }
  .portfolio-text {
    color: rgb(0, 0, 0);
    width: 100%;
    font-size: 1.2rem;
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 400;
    line-height: normal;
  }
 
  .portfolio-text01 {
    color: inherit;
    width: 100%;
    height: auto;
    font-size: 1.2rem;
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 400;
    line-height: normal;
  }

  .portfolio-text02 {
    color: rgb(0, 0, 0);
    width: 100%;
    display: none;
    font-size: 1.2rem;
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 400;
    line-height: normal;
  }


   
  
  .portfolio-hero {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  
  }
  
  
  
  
  
  
  
  
  .portfolio-textcont {
    width: 100%;
padding-bottom: 16%;
  }
  .portfolio-text25 {
    font-weight: 200;
  }
  .portfolio-text26 {
    font-weight: 200;
  }
  
  

  
  .portfolio-statscontainermob {
    display: none;
  }
  .portfolio-top1 {
    width: 35%;
  }
  .portfolio-fg1 {
    font-size: 1.1rem;
  }
  .portfolio-introtext {
    width: 55%;
  }
  .portfolio-text61 {
    font-size: 1rem;
  }
  
  
  .portfolio-cards {
    width: 100%;
    height: auto;
  }
  .portfolio-carddesktop {
    width: 48%;
  }
  .portfolio-vego22 {
    width: 100%;
    height: auto;
  }
  .portfolio-carddesktop1 {
    width: 48%;
  }
  .portfolio-vego23 {
    width: 100%;
    height: auto;
  }
}


/* Mobile: Show only mobile image */


/* Tablet: Show only tablet image */


/* Desktop: Show only desktop image */


@media(max-width: 530px) {
  .portfolio-container1 {
    width: 100%;
    height: auto;
  }
  
  .portfolio-logo {
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  
  .portfolio-hero {

   height: 100%;

  }
  
  
  .portfolio-text25 {
    font-size: 1.2rem;
  }
  .portfolio-text26 {
    font-size: 1.2rem;
  }
  
  


  
  
  .portfolio-intromob {
    left: 0px;
    bottom: 0px;
    margin: auto;
    display: flex;
  }
  .portfolio-text33 {
    color: rgb(0, 0, 0);
    line-height: 22.0254px;
    text-decoration: none;
  }
  .portfolio-mobwrapper {
    gap: 4em;
    display: flex;
    padding-top: 4em;
 
    padding-bottom: 4em;
  }
  .portfolio-statscontainermob {
    display: flex;
  }
  .portfolio-card {
    display: flex;
    position: static;
  }
  .portfolio-title {
    height: auto;
  }
  .portfolio-card1 {
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    margin: auto;
    display: flex;
    position: static;
  }
  .portfolio-title1 {
    height: auto;
  }
  .portfolio-introdesk {
    top: 95vh;
    left: 0px;
    bottom: 0px;
    margin: auto;
    display: none;
    position: absolute;
  }
  
  
  .portfolio-deskwrapper {
    display: none;
  }
  .portfolio-cards {
    display: none;
  }
}
@media(max-width: 340px) {
  
  .portfolio-logotype {
    align-items: center;
  }
  .portfolio-logo {
    width: 32vw;
    height: 100%;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .portfolio-m {
    top: 0px;
    left: 0px;
    width: 100%;
    bottom: 0px;
    margin: auto;
  }
  .portfolio-text {
    color: rgb(0, 0, 0);
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 400;
    line-height: normal;
  }
  .portfolio-text01 {
    color: rgb(0, 0, 0);
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 400;
    line-height: normal;
  }
  .portfolio-text02 {
    color: rgb(0, 0, 0);
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 400;
    line-height: normal;
  }
  .portfolio-text03 {
    color: rgb(0, 0, 0);
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 400;
    line-height: normal;
  }
  
  
  
  
  
  .portfolio-hero {
   
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;

  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .portfolio-intromob {
    display: flex;
  }
  .portfolio-fg {
    font-size: 1.5rem;
  }
  .portfolio-intromobtext {
    gap: 1vh;
  }
  .portfolio-text33 {
    color: rgb(0, 0, 0);
    line-height: 22.0254px;
    text-decoration: none;
  }
  
  .portfolio-statscontainermob {
    width: 100%;
    height: auto;
    display: flex;
  }
  .portfolio-text34 {
    color: var(--dl-color-default-black);
  }
  .portfolio-text35 {
    color: var(--dl-color-default-black);
    font-size: 0.95rem;
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 300;
  }
  .portfolio-text36 {
    color: rgb(117, 117, 117);
    font-size: 0.8rem;
    font-weight: 400;
  }
  .portfolio-text37 {
    color: var(--dl-color-default-black);
    font-size: 1.1rem;
    font-weight: 500;
  }
  .portfolio-text38 {
    color: var(--dl-color-default-black);
    font-size: 0.95rem;
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 300;
  }
  .portfolio-card {
    width: 100%;
    align-self: center;
    justify-content: flex-start;
  }
  .portfolio-title {
    height: auto;
  }
  .portfolio-card1 {
    width: 100%;
    align-self: center;
    justify-content: flex-start;
  }
  .portfolio-title1 {
    height: auto;
  }
  .portfolio-introdesk {
    display: none;
  }
  .portfolio-fg1 {
    font-size: 1.5rem;
  }
  .portfolio-introtext {
    gap: 1rem;
  }
  .portfolio-text64 {
    color: rgb(0, 0, 0);
  }
  
  
  .portfolio-statscontainer {
    display: none;
  }
  .portfolio-text67 {
    color: var(--dl-color-default-black);
  }
  .portfolio-text68 {
    color: var(--dl-color-default-black);
    font-size: 0.95rem;
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 300;
  }
  .portfolio-text69 {
    color: rgb(117, 117, 117);
    font-size: 0.8rem;
    font-weight: 400;
  }
  .portfolio-text70 {
    color: var(--dl-color-default-black);
    font-size: 1.1rem;
    font-weight: 500;
  }
  .portfolio-text71 {
    color: var(--dl-color-default-black);
    font-size: 0.95rem;
    font-style: normal;
    font-family: 'Bai Jamjuree';
    font-weight: 300;
  }
}


/* Skeleton for the project images: reserves a square and shows a moving sheen until the picture loads.
   The picture itself covers the sheen once it has loaded. */
.work-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  color: transparent;                       /* hides alt text while loading */
  font-size: 0;
  position: relative;
  background: linear-gradient(100deg, #e3e7ef 40%, #f5f7fb 50%, #e3e7ef 60%) 100% 0 / 250% 100%;
  animation: work-shimmer 1.5s ease-in-out infinite;
}
@keyframes work-shimmer { to { background-position: 0 0; } }

/* Browsers only draw this when the file is missing/broken: it covers the little broken-image icon
   with the same moving skeleton, so a missing picture still looks like it is loading. */
.work-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: inherit;
}
@media (prefers-reduced-motion: reduce) { .work-img { animation: none; } }

/* =========================================================================
   Hero formula in keycaps: ∀ dsgn ∃ / true ⟺ value ∩ / (fnctn ⇒ frm)
   Every letter and symbol is a CSS keycap (a stack of rounded slices).
   1em = one key. Desktop + tablet: three lines. Phones: five lines.
   The script at the bottom of testpage.html adds the lean / press / touch.
   ========================================================================= */
.formula {
  --kc-display: 'Chakra Petch', 'Bai Jamjuree', sans-serif;
  font-family: var(--kc-display);
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  align-self: flex-start;
}
.kc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 1em = one key. Desktop: three lines; the widest, "true ⟺ value ∩", is about 13 keys wide. */
.formula {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 0.34em; row-gap: 0.26em;
  font-size: clamp(32px, 6.4vw, 120px);
  line-height: 1;
}
.kc-word { display: inline-flex; gap: 0.06em; }
.kc-br { flex-basis: 100%; height: 0; }
.kc-br-phone { display: none; }
/* phones: five short lines, like quotemob.svg; "∀ dsgn ∃" is the widest at about 6.8 keys */
@media (max-width: 600px) {
  .kc-br-phone { display: block; }
  .formula { font-size: 12.6vw; column-gap: 0.28em; row-gap: 0.22em; }
}

/* =====================================================================
   The keycap. 1em = the key's size, so it scales with the text it sits in.
   Moving parts (body, shadow, shine, dim) only ever change transform/opacity.
   ===================================================================== */
.key {
  --tilt-face: 0;
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(var(--u, 1) * 1em); height: 1em;
  font-size: 1em;
  perspective: 3.2em;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  border-radius: 0.13em;
}
/* contact shadow on the surface below (its own layer, so it never repaints the key) */
.key-shadow {
  position: absolute;
  left: 4%; right: 10%; top: 18%; bottom: -10%;
  border-radius: 0.18em;
  background: rgba(10, 10, 11, 0.9);
  filter: blur(0.09em);
  will-change: transform, opacity;
}
/* The cap is real 3D, drawn by the browser in perspective, so leaning reveals the sides like a real cap. */
.key-body {
  --H: 0.38em;            /* height of the cap */
  --d: 0.17em;            /* how much the top is inset from the base: strong taper, vintage profile */
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* The cap is a stack of thin rounded slices, each a bit smaller than the one below:
   rounded corners all the way up and a smooth sloped side. Each slice is shaded by
   direction (conic gradient), so the sides catch light like the Spline render. */
.cap-slice {
  position: absolute;
  display: block;
  inset: calc(var(--k) * var(--d));          /* --k grows fast near the base: a flared skirt */
  border-radius: calc(0.19em - var(--t) * 0.08em);
  transform: translateZ(calc(var(--t) * var(--H)));
}
/* the top face: near-black, matte, fine grain, glossy rounded edge */
.key-top {
  position: absolute; left: calc(var(--d) + 0.014em); top: calc(var(--d) + 0.014em);
  right: calc(var(--d) + 0.014em); bottom: calc(var(--d) + 0.014em);
  border-radius: 0.1em;
  overflow: hidden;
  transform: translateZ(calc(var(--H) + 0.002em));
  background: radial-gradient(circle at 35% 28%, #3B3B40 0, #2a2a2e 48%, #141416 100%);
  box-shadow:
    inset 0 0.009em 0 rgba(255, 255, 255, 0.2),
    inset 0 -0.02em 0.03em rgba(0, 0, 0, 0.45);
}
.key-top::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 0.5em 0.5em;
  opacity: 0.035;
  mix-blend-mode: screen;
}
.key-rim {
  display: none;
  position: absolute;
  left: 6%; right: 6%; top: 0;
  height: 0.024em;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.65) 60%, rgba(255,255,255,0.35) 88%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.key-glyph {
  position: absolute;
  left: 50%; top: 52%;
  height: 48%; width: auto; max-width: 78%;
  transform: translate(-50%, -50%);
  color: #a4a5ad;
  shape-rendering: crispEdges;
  transition: color 0.09s ease-out, filter 0.09s ease-out;
}
/* letter legends: the formula's own type, set small on the cap */
.key-legend {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding-bottom: 0.04em;
  font: 600 0.46em/1 var(--kc-display);
  color: #a4a5ad;
  transition: color 0.09s ease-out, text-shadow 0.09s ease-out;
}
.key.is-pressed .key-glyph { color: #eceef6; filter: drop-shadow(0 0 0.03em rgba(190, 205, 255, 0.9)); }
.key.is-pressed .key-legend { color: #eceef6; text-shadow: 0 0 0.12em rgba(190, 205, 255, 0.9); }
.key-shine {
  display: none;
  position: absolute; inset: -60%;
  background: linear-gradient(118deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.012) 56%, rgba(255,255,255,0) 62%);
  will-change: transform;
  pointer-events: none;
}
.key-dim {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}