.palm {
    position: absolute;
    transform: translate(10vmin, 0vmin) rotate(6deg);
    --width: min(20vmin, 20%);
    --hw: calc(var(--width) / 2);
    width: var(--width);
    aspect-ratio: 3/4;
    container-type: size;
    filter: drop-shadow(2px 4px 6px var(--sun-color-2));
  }
  .palm.small {
    transform: translate(9vmin, 9vmin) scale(0.4) rotate(344deg) skewX(5deg);
  }
  .palm .leaf-1,
  .palm .leaf-1-s {
    position: absolute;
    width: 70cqmin;
    height: 50cqmin;
    top: 0;
    background: linear-gradient(160deg, var(--color-palm-leaf) 50%, var(--color-palm-leaf-2));
    -webkit-clip-path: polygon(49.7% 16.42%, 69.46% 11.94%, 87.03% 17.91%, 98.4% 30.85%, 96.01% 34.33%, 85.43% 30.85%, 79.64% 37.81%, 76.65% 57.71%, 74.65% 48.76%, 74.05% 65.17%, 70.46% 70.15%, 69.86% 50.25%, 67.27% 67.16%, 63.67% 72.64%, 65.07% 61.19%, 63.87% 53.23%, 60.48% 70.65%, 56.69% 75.62%, 58.48% 64.18%, 57.68% 58.21%, 53.69% 77.61%, 49.9% 82.09%, 51.9% 60.2%, 48.9% 74.13%, 46.31% 81.09%, 41.92% 85.07%, 45.71% 62.69%, 39.52% 83.58%, 33.53% 88.06%, 36.13% 81.09%, 39.52% 66.67%, 31.74% 85.57%, 25.55% 91.54%, 28.74% 84.58%, 31.74% 69.15%, 28.14% 78.61%, 25.15% 85.07%, 16.77% 92.54%, 18.96% 86.07%, 22.55% 74.63%, 16.57% 85.07%, 13.97% 88.56%, 6.59% 93.03%, 12.77% 80.1%, 9.18% 85.57%, 0.8% 96.52%, 3.39% 86.07%, 16.57% 54.73%, 31.94% 28.36%);
            clip-path: polygon(49.7% 16.42%, 69.46% 11.94%, 87.03% 17.91%, 98.4% 30.85%, 96.01% 34.33%, 85.43% 30.85%, 79.64% 37.81%, 76.65% 57.71%, 74.65% 48.76%, 74.05% 65.17%, 70.46% 70.15%, 69.86% 50.25%, 67.27% 67.16%, 63.67% 72.64%, 65.07% 61.19%, 63.87% 53.23%, 60.48% 70.65%, 56.69% 75.62%, 58.48% 64.18%, 57.68% 58.21%, 53.69% 77.61%, 49.9% 82.09%, 51.9% 60.2%, 48.9% 74.13%, 46.31% 81.09%, 41.92% 85.07%, 45.71% 62.69%, 39.52% 83.58%, 33.53% 88.06%, 36.13% 81.09%, 39.52% 66.67%, 31.74% 85.57%, 25.55% 91.54%, 28.74% 84.58%, 31.74% 69.15%, 28.14% 78.61%, 25.15% 85.07%, 16.77% 92.54%, 18.96% 86.07%, 22.55% 74.63%, 16.57% 85.07%, 13.97% 88.56%, 6.59% 93.03%, 12.77% 80.1%, 9.18% 85.57%, 0.8% 96.52%, 3.39% 86.07%, 16.57% 54.73%, 31.94% 28.36%);
    transform: translate(13cqmin, 16cqmin) rotate(347deg);
  }
  .palm .leaf-1-s {
    transform: translate(61cqmin, 17cqmin) rotate(14deg) scaleX(-1);
  }
  .palm .leaf-2,
  .palm .leaf-2-s {
    position: absolute;
    width: 80cqmin;
    height: 35cqmin;
    top: 0;
    background: linear-gradient(160deg, var(--color-palm-leaf) 50%, var(--color-palm-leaf-2));
    -webkit-clip-path: polygon(49.7% 16.42%, 69.46% 11.94%, 87.03% 17.91%, 98.4% 30.85%, 96.01% 34.33%, 85.43% 30.85%, 79.64% 37.81%, 76.65% 57.71%, 74.65% 48.76%, 74.05% 65.17%, 70.46% 70.15%, 69.86% 50.25%, 67.27% 67.16%, 63.67% 72.64%, 65.07% 61.19%, 63.87% 53.23%, 60.48% 70.65%, 56.69% 75.62%, 58.48% 64.18%, 57.68% 58.21%, 53.69% 77.61%, 49.9% 82.09%, 51.9% 60.2%, 48.9% 74.13%, 46.31% 81.09%, 41.92% 85.07%, 45.71% 62.69%, 39.52% 83.58%, 33.53% 88.06%, 36.13% 81.09%, 39.52% 66.67%, 31.74% 85.57%, 25.55% 91.54%, 28.74% 84.58%, 31.74% 69.15%, 28.14% 78.61%, 25.15% 85.07%, 16.77% 92.54%, 18.96% 86.07%, 22.55% 74.63%, 16.57% 85.07%, 13.97% 88.56%, 6.59% 93.03%, 12.77% 80.1%, 9.18% 85.57%, 0.8% 96.52%, 3.39% 86.07%, 16.57% 54.73%, 31.94% 28.36%);
            clip-path: polygon(49.7% 16.42%, 69.46% 11.94%, 87.03% 17.91%, 98.4% 30.85%, 96.01% 34.33%, 85.43% 30.85%, 79.64% 37.81%, 76.65% 57.71%, 74.65% 48.76%, 74.05% 65.17%, 70.46% 70.15%, 69.86% 50.25%, 67.27% 67.16%, 63.67% 72.64%, 65.07% 61.19%, 63.87% 53.23%, 60.48% 70.65%, 56.69% 75.62%, 58.48% 64.18%, 57.68% 58.21%, 53.69% 77.61%, 49.9% 82.09%, 51.9% 60.2%, 48.9% 74.13%, 46.31% 81.09%, 41.92% 85.07%, 45.71% 62.69%, 39.52% 83.58%, 33.53% 88.06%, 36.13% 81.09%, 39.52% 66.67%, 31.74% 85.57%, 25.55% 91.54%, 28.74% 84.58%, 31.74% 69.15%, 28.14% 78.61%, 25.15% 85.07%, 16.77% 92.54%, 18.96% 86.07%, 22.55% 74.63%, 16.57% 85.07%, 13.97% 88.56%, 6.59% 93.03%, 12.77% 80.1%, 9.18% 85.57%, 0.8% 96.52%, 3.39% 86.07%, 16.57% 54.73%, 31.94% 28.36%);
    transform: translate(-6cqmin, -1cqmin) rotate(19deg);
  }
  .palm .leaf-2-s {
    transform: translate(66cqmin, 6cqmin) rotate(-8deg) scaleX(-1);
  }
  .palm .leaf-3,
  .palm .leaf-3-s {
    position: absolute;
    width: 47cqmin;
    height: 30cqmin;
    top: 0;
    background: linear-gradient(160deg, var(--color-palm-leaf) 50%, var(--color-palm-leaf-2));
    -webkit-clip-path: polygon(49.7% 16.42%, 69.46% 11.94%, 87.03% 17.91%, 98.4% 30.85%, 96.01% 34.33%, 85.43% 30.85%, 79.64% 37.81%, 76.65% 57.71%, 74.65% 48.76%, 74.05% 65.17%, 70.46% 70.15%, 69.86% 50.25%, 67.27% 67.16%, 63.67% 72.64%, 65.07% 61.19%, 63.87% 53.23%, 60.48% 70.65%, 56.69% 75.62%, 58.48% 64.18%, 57.68% 58.21%, 53.69% 77.61%, 49.9% 82.09%, 51.9% 60.2%, 48.9% 74.13%, 46.31% 81.09%, 41.92% 85.07%, 45.71% 62.69%, 39.52% 83.58%, 33.53% 88.06%, 36.13% 81.09%, 39.52% 66.67%, 31.74% 85.57%, 25.55% 91.54%, 28.74% 84.58%, 31.74% 69.15%, 28.14% 78.61%, 25.15% 85.07%, 16.77% 92.54%, 18.96% 86.07%, 22.55% 74.63%, 16.57% 85.07%, 13.97% 88.56%, 6.59% 93.03%, 12.77% 80.1%, 9.18% 85.57%, 0.8% 96.52%, 3.39% 86.07%, 16.57% 54.73%, 31.94% 28.36%);
            clip-path: polygon(49.7% 16.42%, 69.46% 11.94%, 87.03% 17.91%, 98.4% 30.85%, 96.01% 34.33%, 85.43% 30.85%, 79.64% 37.81%, 76.65% 57.71%, 74.65% 48.76%, 74.05% 65.17%, 70.46% 70.15%, 69.86% 50.25%, 67.27% 67.16%, 63.67% 72.64%, 65.07% 61.19%, 63.87% 53.23%, 60.48% 70.65%, 56.69% 75.62%, 58.48% 64.18%, 57.68% 58.21%, 53.69% 77.61%, 49.9% 82.09%, 51.9% 60.2%, 48.9% 74.13%, 46.31% 81.09%, 41.92% 85.07%, 45.71% 62.69%, 39.52% 83.58%, 33.53% 88.06%, 36.13% 81.09%, 39.52% 66.67%, 31.74% 85.57%, 25.55% 91.54%, 28.74% 84.58%, 31.74% 69.15%, 28.14% 78.61%, 25.15% 85.07%, 16.77% 92.54%, 18.96% 86.07%, 22.55% 74.63%, 16.57% 85.07%, 13.97% 88.56%, 6.59% 93.03%, 12.77% 80.1%, 9.18% 85.57%, 0.8% 96.52%, 3.39% 86.07%, 16.57% 54.73%, 31.94% 28.36%);
    transform: translate(67cqmin, -8.8cqmin) rotate(128deg) scaleY(-1);
  }
  .palm .leaf-3-s {
    transform: translate(19.5cqmin, -10.8cqmin) rotate(56deg);
    height: 20cqmin;
    width: 66cqmin;
    z-index: -1;
  }
  .palm .trunk {
    position: absolute;
    height: 80cqh;
    width: 22cqw;
    transform: translate(53cqw, 10cqh);
    border-radius: 200cqmin/1000cqmin;
    box-shadow: 5cqmin 8cqmin 0 0 var(--color-palm-trunk);
  }
  .palm .trunk-bottom {
    position: absolute;
    width: 0;
    height: 0;
    bottom: 5cqh;
    transform: translate(48cqw, 4cqh) rotate(359deg);
    border-bottom: 20cqw var(--color-palm-trunk) solid;
    border-left: 25cqw solid transparent;
  }
  
  body {
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100vw;
    background: #333;
    color: magenta;
  }
  
  :root {
    --color-palm-trunk: magenta;
    --color-palm-leaf: magenta;
    --color-palm-leaf-2: black;
  }

  




  :root {
    --labs-sys-color-delorean-1: #f986ff;
    --labs-sys-color-delorean-2: #d0a9d3;
    --labs-sys-color-delorean-lights-yellow: #fdee15;
    --labs-sys-color-delorean-lights-red: #e02842;
    --labs-sys-color-sun-2: #f672ca;
    --labs-sys-color-triangle: #6eccee;
  }
  
  .delorean {
    position: absolute;
    padding-bottom: 0.1vmin;
    bottom: 0;
    z-index: 11111;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  }
  .delorean .delorean-top {
    width: 40vmin;
    height: 18vmin;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)), var(--labs-sys-color-delorean-1);
    -webkit-clip-path: polygon(25% 25%, 30.67% 25.33%, 24.67% 25.33%, 27.67% 23.33%, 37% 22%, 50% 21.33%, 59.67% 22%, 66.33% 23.33%, 71.88% 25%, 90.81% 55.29%, 98% 86.5%, 100% 100%, 0% 100%, 1.09% 87.65%, 7.68% 55.29%);
            clip-path: polygon(25% 25%, 30.67% 25.33%, 24.67% 25.33%, 27.67% 23.33%, 37% 22%, 50% 21.33%, 59.67% 22%, 66.33% 23.33%, 71.88% 25%, 90.81% 55.29%, 98% 86.5%, 100% 100%, 0% 100%, 1.09% 87.65%, 7.68% 55.29%);
    position: relative;
  }
  .delorean .delorean-top .top-lines-on-top {
    background: rgba(0, 0, 0, 0.2);
    height: 0.1vmin;
    width: 5.9vmin;
    top: 4.8vmin;
    left: 9.3vmin;
    position: absolute;
  }
  .delorean .delorean-top .top-lines-on-top.right {
    left: 23.4vmin;
  }
  .delorean .delorean-top .top-lines-on-top:before {
    position: absolute;
    content: "";
    background: inherit;
    left: 0;
    top: -0.4vmin;
    width: 7vmin;
    height: inherit;
  }
  .delorean .delorean-top .top-lines-on-top:after {
    position: absolute;
    content: "";
    background: inherit;
    left: 6.3vmin;
    top: -0.65vmin;
    width: 0.1vmin;
    height: 1.05vmin;
    transform: rotate(69deg);
  }
  .delorean .delorean-top .top-lines-on-top.right:before {
    right: 0.1vmin;
    left: unset;
    width: 6.8vmin;
  }
  .delorean .delorean-top .top-lines-on-top.right:after {
    right: 6.3vmin;
    left: unset;
    transform: rotate(-69deg);
  }
  .delorean .delorean-top .rear-window {
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);
    width: 31vmin;
    height: 6vmin;
    left: 4vmin;
    top: 4vmin;
    -webkit-clip-path: polygon(18% 25%, 82% 25%, 100% 100%, 0% 100%);
            clip-path: polygon(18% 25%, 82% 25%, 100% 100%, 0% 100%);
  }
  .delorean .delorean-top .rear-window:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--labs-sys-color-delorean-1) 0vmin, transparent 0.2vmin), linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0.5vmin, transparent 0.5vmin);
    background-size: 400px 1.2vmin;
  }
  .delorean .delorean-top .lights {
    -webkit-clip-path: polygon(92.75% 66.28%, 93.66% 67.85%, 99.16% 85.07%, 99.16% 86.92%, 98% 87.69%, 2% 87.69%, 0.84% 86.92%, 0.84% 85.07%, 6.35% 67.85%, 7.16% 66.64%, 8.47% 65.8%, 91.53% 65.61%);
            clip-path: polygon(92.75% 66.28%, 93.66% 67.85%, 99.16% 85.07%, 99.16% 86.92%, 98% 87.69%, 2% 87.69%, 0.84% 86.92%, 0.84% 85.07%, 6.35% 67.85%, 7.16% 66.64%, 8.47% 65.8%, 91.53% 65.61%);
    background: linear-gradient(to right, orange, transparent, transparent, transparent, orange), var(--labs-sys-color-delorean-lights-yellow);
    width: 36.8vmin;
    height: 25.7vmin;
    left: 1.5vmin;
    bottom: -1.1vmin;
    position: absolute;
  }
  .delorean .delorean-top .lights-frame {
    position: absolute;
    top: 0.8vmin;
    right: 0.1vmin;
    bottom: 0.2vmin;
    left: 0.1vmin;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), var(--labs-sys-color-delorean-1);
    -webkit-clip-path: polygon(92.75% 66.28%, 93.66% 67.85%, 99.16% 85.07%, 99.16% 86.92%, 98% 87.69%, 66.29% 87.69%, 67.92% 86.6%, 97.89% 85.98%, 91.92% 67.85%, 7.9% 67.85%, 2.14% 85.96%, 31.39% 86.2%, 34.58% 87.69%, 2% 87.69%, 0.84% 86.92%, 0.84% 85.07%, 6.35% 67.85%, 7.16% 66.64%, 8.47% 65.8%, 91.53% 65.61%);
            clip-path: polygon(92.75% 66.28%, 93.66% 67.85%, 99.16% 85.07%, 99.16% 86.92%, 98% 87.69%, 66.29% 87.69%, 67.92% 86.6%, 97.89% 85.98%, 91.92% 67.85%, 7.9% 67.85%, 2.14% 85.96%, 31.39% 86.2%, 34.58% 87.69%, 2% 87.69%, 0.84% 86.92%, 0.84% 85.07%, 6.35% 67.85%, 7.16% 66.64%, 8.47% 65.8%, 91.53% 65.61%);
  }
  .delorean .delorean-top .red-light-left {
    background: var(--labs-sys-color-delorean-lights-red);
    position: absolute;
    top: 17.5vmin;
    left: 4vmin;
    bottom: 3.6vmin;
    width: 9vmin;
  }
  .delorean .delorean-top .red-light-right {
    background: var(--labs-sys-color-delorean-lights-red);
    position: absolute;
    top: 17.5vmin;
    right: 4.2vmin;
    bottom: 3.6vmin;
    width: 9vmin;
  }
  
  .delorean .delorean-top .lights:after {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.6;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0.3vmin, transparent 0.3vmin), 
                linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0.3vmin, transparent 0.3vmin);
    background-size: 1.5vmin 100px, 100px 1.5vmin;
    mix-blend-mode: soft-light;
    z-index: 1;
}

.delorean .delorean-top .id-container {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.5) 90%), 
                var(--labs-sys-color-delorean-1);
    position: absolute;
    top: 17vmin;
    right: 12.4vmin;
    bottom: 3.1vmin;
    width: 12.8vmin;
    border-radius: 4%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

  .delorean .delorean-top .id {
    position: absolute;
    left: 1.7vmin;
    right: 1.7vmin;
    top: 1vmin;
    bottom: 1vmin;
    background: linear-gradient(45deg, #111, rgba(0, 0, 0, 0.5));
    border-radius: 0.2vmin;
    z-index: 111;
  }
  .delorean .delorean-top .id:after {
    background: linear-gradient(45deg, var(--labs-sys-color-sun-2), var(--labs-sys-color-triangle));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    content: "NOTE";
    font-size: 1.3vmin;
    font-weight: bold;
    font-family: "Capone", "Inter", "Helvetica Neue", "Helvetic", sans serif;
    position: absolute;
    letter-spacing: 0.05vmin;
    display: grid;
    place-items: center;
    inset: 0;
    transform: translateY(0.25vmin);
  }
  .delorean .delorean-top .id:before {
    content: "OUTATIME";
    color: var(--labs-sys-color-sun-2);
    font-size: 0.6vmin;
    font-weight: bold;
    letter-spacing: 0.1vmin;
    text-align: center;
    position: absolute;
    left: 0.5vmin;
    top: 0.4vmin;
    right: 0.5vmin;
  }
  .delorean .delorean-top .red-reflection {
    background: #d8a7a7;
    position: absolute;
    height: 0.1vmin;
    bottom: 5.7vmin;
    right: 2.5vmin;
    left: 2.5vmin;
    box-shadow: 0 0 10px 1vmin var(--labs-sys-color-delorean-lights-red);
    mix-blend-mode: initial;
    opacity: 0.7;
  }
  .delorean .bumper-light-reflection {
    background: linear-gradient(to right, var(--labs-sys-color-delorean-lights-red), var(--labs-sys-color-delorean-lights-yellow) 10%, var(--labs-sys-color-delorean-lights-red) 70%), linear-gradient(to right, var(--labs-sys-color-delorean-lights-red), var(--labs-sys-color-delorean-lights-yellow) 10%, var(--labs-sys-color-delorean-lights-red) 70%);
    background-repeat: no-repeat;
    background-size: 100% 0.045vmin, 100% 0.25vmin;
    background-position: 0 7.5px, 0 -0.05vmin;
    height: 1vmin;
    width: 12vmin;
    transform: translate(1.8vmin, -0.5vmin);
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 25%;
    opacity: 0.7;
    mix-blend-mode: plus-lighter;
    filter: drop-shadow(0 0 5px var(--labs-sys-color-delorean-lights-red));
  }
  .delorean .bumper-light-reflection.right {
    transform: translate(26vmin, -0.5vmin) scaleX(-1);
  }
  .delorean .mirror-left,
  .delorean .mirror-right {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)), var(--labs-sys-color-delorean-1);
    width: 5vmin;
    height: 2.8vmin;
    -webkit-clip-path: polygon(0% 5%, 1.5% 3.5%, 100% 0%, 86.5% 100%, 2.26% 76.98%, 0% 74%);
            clip-path: polygon(0% 5%, 1.5% 3.5%, 100% 0%, 86.5% 100%, 2.26% 76.98%, 0% 74%);
    transform: translate(-15.4vmin, 12.5vmin);
  }
  .delorean .mirror-left:before,
  .delorean .mirror-right:before {
    content: "";
    position: absolute;
    top: 0.5vmin;
    right: 0.5vmin;
    left: 0.5vmin;
    bottom: 0.5vmin;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), var(--labs-sys-color-triangle);
    -webkit-clip-path: polygon(0% 5%, 1.5% 3.5%, 100% 0%, 86.5% 100%, 2.26% 76.98%, 0% 74%);
            clip-path: polygon(0% 5%, 1.5% 3.5%, 100% 0%, 86.5% 100%, 2.26% 76.98%, 0% 74%);
  }
  .delorean .mirror-right {
    transform: translate(14.2vmin, 9.6vmin) scaleX(-1);
  }
  .delorean .bumper {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0.9) 70%, rgba(0, 0, 0, 0.7)), var(--labs-sys-color-delorean-1);
    height: 8vmin;
    width: 40vmin;
    position: relative;
    transform: translateY(-0.3vmin);
    -webkit-clip-path: polygon(0% 0%, 11.25% 3%, 50.25% 4%, 90.75% 3%, 100% 0%, 95% 71%, 88.75% 96%, 79% 98%, 51% 99%, 25.75% 97%, 12.75% 95%, 5.5% 73%);
            clip-path: polygon(0% 0%, 11.25% 3%, 50.25% 4%, 90.75% 3%, 100% 0%, 95% 71%, 88.75% 96%, 79% 98%, 51% 99%, 25.75% 97%, 12.75% 95%, 5.5% 73%);
  }
  .delorean .bumper-logo {
    position: absolute;
    left: 2.5vmin; /* Maintain current position */
    top: 2vmin;    /* Maintain current position */
    background: whitesmoke;
    width: 4.2vmin; /* Match new design's width */
    aspect-ratio: 3/2; /* Match new design's aspect ratio */
    -webkit-mask: url(/angel.svg) center calc(-90%) no-repeat; /* Move mask upward */
            mask: url(/angel.svg) center calc(-90%) no-repeat; /* Move mask upward */
    -webkit-mask-size: contain;
            mask-size: contain;
    transform: rotate(-10deg); /* Apply new rotation */
    mix-blend-mode: overlay; /* Match new blend mode */
    padding-left: 70px;
}

  .delorean .bumper-hole-1 {
    position: absolute;
    border-radius: 50%;
    width: 2.3vmin;
    aspect-ratio: 1;
    left: 8vmin;
    top: 4.7vmin;
    background: black;
    opacity: 0.8;
    border: 0.3vmin solid rgba(255, 255, 255, 0.1);
  }
  .delorean .bumper-hole-2 {
    position: absolute;
    border-radius: 50%;
    width: 2.3vmin;
    aspect-ratio: 1;
    left: 29.1vmin;
    top: 4.7vmin;
    background: black;
    opacity: 0.8;
    border: 0.3vmin solid rgba(255, 255, 255, 0.1);
  }
  .delorean .bumper-reflection {
    position: absolute;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(200, 200, 200, 0.01), rgba(0, 0, 0, 0.6));
    inset: 0;
  }
  .delorean .bumper-sticker {
    position: absolute;
    top: 1.1vmin;
    right: 4vmin;
    background: #bbb;
    width: 4.2vmin;
    aspect-ratio: 3/2;
    -webkit-mask: url(/thesis.svg) center calc(-90%) no-repeat; /* Move mask upward */
            mask: url(/thesis.svg) center calc(-90%) no-repeat; /* Move mask upward */
    -webkit-mask-size: contain;
            mask-size: contain;
    transform: rotate(-10deg);
    mix-blend-mode: overlay;
    padding-right: 70px;
  }
  .delorean .dashes {
    position: absolute;
    width: 14vmin;
    min-height: 0.4vmin;
    border-top: 0.5vmin dashed rgba(0, 0, 0, 0.6);
    border-bottom: 0.5vmin dashed rgba(0, 0, 0, 0.4);
    transform: translate(12.5vmin, 6vmin);
    border-radius: 20%;
  }
  .delorean .wheel-case-left,
  .delorean .wheel-case-right {
    position: absolute;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4)), var(--labs-sys-color-delorean-1);
    width: 3.4vmin;
    height: 6vmin;
    transform: translateX(-20.5vmin);
    bottom: 8.6vmin;
    -webkit-clip-path: polygon(8.39% 31.01%, 19.67% 22.67%, 100% 0%, 100% 100%, 16.67% 100%, 13.84% 89.96%, 5% 40.94%);
            clip-path: polygon(8.39% 31.01%, 19.67% 22.67%, 100% 0%, 100% 100%, 16.67% 100%, 13.84% 89.96%, 5% 40.94%);
  }
  .delorean .wheel-case-right {
    transform: translateX(16.9vmin) scaleX(-1);
  }
  .delorean .wheel-left {
    -webkit-animation: wheel 0.1s ease infinite;
            animation: wheel 0.1s ease infinite;
    position: absolute;
    background: linear-gradient(to bottom, black, #222, black, #222, black);
    background-size: 100% 200%;
    width: 5.8vmin;
    height: 10vmin;
    transform: translate(-19.6vmin, 1vmin) rotate(1deg);
    border-radius: 0.3vmin;
    bottom: 0vmin;
  }
  .delorean .wheel-right {
    -webkit-animation: wheel 0.1s ease infinite;
            animation: wheel 0.1s ease infinite;
    background: linear-gradient(to bottom, black, #222, black, #222, black);
    background-size: 100% 200%;
    position: absolute;
    width: 5.8vmin;
    height: 10vmin;
    transform: translate(13.8vmin, 1vmin) rotate(-1deg);
    border-radius: 0.3vmin;
    bottom: 0vmin;
  }
  .delorean .shadow {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 29vmin;
    height: 40vmin;
    filter: blur(20px);
    border-radius: 20%;
    perspective: 100px;
    transform: rotateX(72deg) translateY(12rem);
    z-index: -1;
  }
  
  @-webkit-keyframes wheel {
    from {
      background-position-y: 0%;
    }
    from {
      background-position-y: 50%;
    }
  }
  
  @keyframes wheel {
    from {
      background-position-y: 0%;
    }
    from {
      background-position-y: 50%;
    }
  }
  .demo {
    transform: translateY(-2vmin);
  }
  
  body {
    background: #111;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    color: var(--labs-sys-color-delorean-1);
  }

  

  @property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
  }
  :root {
    --labs-sys-color-background: #111;
    --labs-sys-color-on-background: white;
    --base-speed: 4s;
    --labs-sys-color-grid: #fac4ff;
    --labs-sys-color-grid-glow: #df7373;
    --labs-sys-color-sun-1: #fdb428;
    --labs-sys-color-sun-2: #f672ca;
    --labs-sys-color-sun-glow: #b9f;
    --labs-sys-color-star: #f6c0c0;
    --color-palm-trunk: #333;
    --color-palm-leaf: #333;
    --color-palm-leaf-2: #b9f;
    --labs-sys-color-triangle: #6eccee;
    --labs-sys-color-volume: var(--labs-sys-color-triangle);
  }
  
  .kode-text {
    --angle: 45deg;
    background: linear-gradient(var(--angle), var(--labs-sys-color-sun-2), var(--labs-sys-color-triangle));
    width: 40vmin;
    aspect-ratio: 3/2;
    -webkit-mask: url(/welc.svg) center center no-repeat;
            mask: url(/welc.svg) center center no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    position: absolute;
    bottom: 0;
    z-index: 10000;
    -webkit-animation: kode-text 4s linear infinite;
            animation: kode-text 4s linear infinite;
    perspective: 40px;
  }
  .kode-text:after {
    content: "";
    position: absolute;
    top: 8vmin;
    left: 1vmin;
    width: 48vmin;
    height: 14vmin;
    background: repeating-radial-gradient(black, transparent 10vmin);
    mix-blend-mode: overlay;
    opacity: 0.2;
    transform: rotate(347deg);
  }
  
  @-webkit-keyframes kode-text {
    from {
      --angle: 45deg;
      transform: translateY(0vh);
    }
    49.5% {
      --angle: 360deg;
      transform: translateY(-1vh);
      filter: brightness(100%);
    }
    50% {
      --angle: 360deg;
      transform: translateY(-1vh) scaleY(0.1) skewX(253deg);
      filter: brightness(190%);
    }
    51% {
      --angle: 360deg;
      transform: translateY(-1vh) scaleY(0.5) skewY(37deg);
      filter: brightness(190%);
    }
    52% {
      --angle: 360deg;
      filter: brightness(190%);
      transform: translateY(0vh);
    }
    to {
      --angle: 45deg;
      transform: translateY(0vh);
    }
  }
  
  @keyframes kode-text {
    from {
      --angle: 45deg;
      transform: translateY(0vh);
    }
    49.5% {
      --angle: 360deg;
      transform: translateY(-1vh);
      filter: brightness(100%);
    }
    50% {
      --angle: 360deg;
      transform: translateY(-1vh) scaleY(0.1) skewX(253deg);
      filter: brightness(190%);
    }
    51% {
      --angle: 360deg;
      transform: translateY(-1vh) scaleY(0.5) skewY(37deg);
      filter: brightness(190%);
    }
    52% {
      --angle: 360deg;
      filter: brightness(190%);
      transform: translateY(0vh);
    }
    to {
      --angle: 45deg;
      transform: translateY(0vh);
    }
  }
  .triangle {
    position: absolute;
    width: 50vmin;
    aspect-ratio: 4/3;
    transform: translate(3vmin, 11.8vmin) rotate(1deg);
    filter: drop-shadow(0 0 15px var(--labs-sys-color-triangle));
    z-index: 500;
    perspective: 1000px;
    -webkit-animation: triangle 10s linear infinite;
            animation: triangle 10s linear infinite;
  }
  .triangle:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, white, var(--labs-sys-color-triangle));
    -webkit-clip-path: polygon(6% 22%, 29% 94%, 29% 94%, 6% 22%, 94% 3%, 29% 94%, 7% 22%, 4% 19%, 29% 94%, 100% 0%);
            clip-path: polygon(6% 22%, 29% 94%, 29% 94%, 6% 22%, 94% 3%, 29% 94%, 7% 22%, 4% 19%, 29% 94%, 100% 0%);
    transform: translateY(4vmin);
  }
  
  @-webkit-keyframes triangle {
    from {
      transform: translate(3vmin, 11.8vmin) rotate(1deg);
    }
    50% {
      transform: translate(3vmin, 12vmin) rotateX(-15deg) rotateY(-20deg);
    }
    to {
      transform: translate(3vmin, 11.8vmin) rotate(1deg);
    }
  }
  
  @keyframes triangle {
    from {
      transform: translate(3vmin, 11.8vmin) rotate(1deg);
    }
    50% {
      transform: translate(3vmin, 12vmin) rotateX(-15deg) rotateY(-20deg);
    }
    to {
      transform: translate(3vmin, 11.8vmin) rotate(1deg);
    }
  }
  .brand {
    position: absolute;
    width: 50vmin;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    transform: translateY(-35vh);
    z-index: 10000;
  }
  
  .demo-retro-wave-logo {
    transform: translateY(20vh);
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
  }
  
  body {
    background-color: var(--labs-sys-color-background);
    color: var(--labs-sys-color-on-background);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    color: var(--labs-sys-color-triangle);
  }