@import url("//hello.myfonts.net/count/3fb7d0");/* =========================
   HERO: BASE LAYOUT
   ========================= */.big-hero-six {
    display: flex;
    position: absolute; /* positioning context for bubble */
    top: 0;
    height: 600px;
    background: #fff;
    z-index: 0;
  }/* Text blocks inside hero */.big-hero-six p {
    margin: 0;
  }.big-hero-six p:first-of-type {
    position: relative;
    left: 3px;
  }.big-hero-six p:last-of-type {
    position: relative;
    left: 3px;
    top: 4px;
  }@media (min-width: 520px) {
    .big-hero-six p:last-of-type { top: 8px; }
  }/* Floating showcase */.big-hero-six .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    top: 100px;
    min-height: 460px;
  }.big-hero-six .showcase .memojii {
    position: absolute;
    top: -280px;
    left: -130px;
    height: 260px;
    width: 400px;
    z-index: 3;
    transform: scale(.8) rotate(6deg);
    box-shadow: 0 4px 24px 2px rgba(14,30,37,.16);
    background-image: url(/assets/heroSection.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 22%;
    overflow: hidden;
  }.big-hero-six .showcase .memojii:hover {
    transform: scale(1) translateY(-16px) rotate(0deg);
  }/* Wave at bottom */.big-hero-six .wave-bottom {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    line-height: 0;
    pointer-events: none;
    z-index: 5;
  }.big-hero-six .wave-bottom path { fill: #663566; }/* Purple background band behind hero */.big-hero-six .background {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 1440px;
    margin: auto;
    background: #663566;
    bottom: -164px;
    overflow: hidden;
  }/* Row layout: text (50vw) | image (flex) */.big-hero-six .main-content-wrapper {
    display: flex;
    align-items: flex-start;
    grid-gap: 32px;
    gap: 32px;
    z-index: 0;
  }.big-hero-six .main-content-wrapper .content {
    flex: 0 0 50vw;     /* exact half viewport width */
    max-width: 50vw;
    min-width: 0;
    position: relative;
    padding-top: 10%;
  }.big-hero-six .main-content-wrapper .content h1,
  .big-hero-six .main-content-wrapper .content p:first-of-type,
  .big-hero-six .main-content-wrapper .content p:first-of-type a {
    overflow: hidden;
    text-overflow: ellipsis;
  }.big-hero-six .main-content-wrapper > img {
    flex: 1 1 auto;
    height: 55vh;
    border-radius: 22%;
    position: relative;
    top: 60px;
    right: 250px;
    display: block;
  }/* Video fallback styling */.big-hero-six video {
    position: relative;
    z-index: 1;
    width: 101%;
    flex: none;
    background: linear-gradient(to top, #FFA000, #FFA000 25%, #fff 25%, #fff 25%);
    opacity: 0.99;
  }/* =========================
     HERO: SMALL TWEAKS
     ========================= */@media (max-width: 975px) {
    .big-hero-six { z-index: 1; }
  }@media (max-width: 900px) {
    .big-hero-six .background { bottom: -64px; }
  }@media (max-width: 780px) {
    .big-hero-six { color: #0e1e25; z-index: 2; }
    .big-hero-six .background { background: #fff; }
    .big-hero-six .custom-wave { display: none; }
  
    .big-hero-six .main-content-wrapper {
      flex-direction: column;
      grid-gap: 16px;
      gap: 16px;
    }
    .big-hero-six .main-content-wrapper .content {
      flex: 0 0 auto;
      max-width: 100%;
      top: 0;
    }
    .big-hero-six .main-content-wrapper .content h1,
    .big-hero-six .main-content-wrapper .content p:first-of-type,
    .big-hero-six .main-content-wrapper .content p:first-of-type a {
      white-space: normal;
      text-overflow: clip;
    }
    .big-hero-six .main-content-wrapper > img {
      max-width: 60vw;
      height: auto;
      top: 30px;
      align-self: center;
      right: 0;
    }
  }@media (max-width: 624px) {
    .big-hero-six h1 { font-size: 11vw; }
  }@media (max-width: 520px) {
    .big-hero-six .main-content-wrapper { font-size: 16px; }
    .big-hero-six h1 { font-size: 42px; margin: 4px 0; }
  }/* Last-name fade */#unecessary-part-of-name {
    animation: 10s ease-in-out 1s fade-away;
    animation-fill-mode: forwards;
  }@keyframes fade-away {
    from { opacity: 1; }
    to   { opacity: 0.1; }
  }/* =========================
     HELLO BUBBLE (original design)
     ========================= *//* Bubble base + placement */.big-hero-six .hello-bubble {
    position: absolute;
    top: 40px;              /* tweak to position near memoji */
    right: 10vw;            /* tweak; viewport-based for responsiveness */
    z-index: 999;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    min-width: 120px;
    max-width: 220px;
    padding: 12px 16px;
    background: #fff;
    color: #222;
    border-radius: 999px;   /* pill core */
    box-shadow: 0 10px 18px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.08);
  
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
  
    /* gentle idle float */
    animation: helloFloat 2.5s ease-in-out infinite;
    will-change: transform;
  }/* Tail made of two small circles pointing toward the memoji (to the RIGHT) */.big-hero-six .hello-bubble .hello-text::before,
.big-hero-six .hello-bubble .hello-text::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
  /* match your bubble's shadow */
  box-shadow:
    0 8px 14px rgba(0,0,0,.2),
    0 2px 6px rgba(0,0,0,.2);
}/* larger “connector” dot, slightly overlapping the bubble */.big-hero-six .hello-bubble .hello-text::before {
  width: 18px;
  height: 18px;
  /* place on the right edge, midway down */
  right: -50px;          /* negative pulls it outside the bubble */
  top: 52%;
  transform: translateY(-50%);
}/* smaller trailing dot—further toward the memoji */.big-hero-six .hello-bubble .hello-text::after {
  width: 10px;
  height: 10px;
  right: -70px;       
  top: 80%;
  transform: translateY(-50%);
}/* optional: pause the idle float while hovering for easier clicking */.big-hero-six .hello-bubble:hover,
.big-hero-six .hello-bubble.focus-visible {
  animation-play-state: paused;
}.big-hero-six .hello-bubble:hover,
.big-hero-six .hello-bubble:focus-visible {
  animation-play-state: paused;
}/* Hover/active/focus */.big-hero-six .hello-bubble:hover { transform: translateY(-2px); }.big-hero-six .hello-bubble:active { transform: translateY(0); }.big-hero-six .hello-bubble.focus-visible {
    outline: 3px solid #663566;
    outline-offset: 3px;
  }.big-hero-six .hello-bubble:focus-visible {
    outline: 3px solid #663566;
    outline-offset: 3px;
  }/* Greeting text + swap animation */.big-hero-six .hello-bubble .hello-text {
    position: relative;
    display: block;
    white-space: nowrap;
    font-size: clamp(16px, 2.2vw, 28px);
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
      opacity 180ms ease-out,
      transform 220ms cubic-bezier(.215,.61,.355,1);
  }/* phase 1: fade/slide out slightly */.big-hero-six .hello-bubble .hello-text.is-out {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }/* Idle float keyframes */@keyframes helloFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }/* Responsive placement tweaks for bubble */@media (max-width: 900px) {
    .big-hero-six .hello-bubble { right: 260px; top: 300px; transform: scale(.9); }
  }@media (max-width: 600px) {
    .big-hero-six .hello-bubble { right: 260px; top: 300px; transform: scale(.9); }
  }/* Reduced motion preference */@media (prefers-reduced-motion: reduce) {
    .big-hero-six .hello-bubble { animation: none; transition: none; }
    .big-hero-six .hello-bubble .hello-text { transition: none; }
  }.bingo {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  position: relative;
  z-index: 1;
  padding: 150px 0;
  background: #623862;
  color: #fff
}@media (max-width: 975px) {.bingo {
    z-index: 3
}
  }.bingo .tint-color {
    color: #FFA000;
    color: color(display-p3 1 0.675 0.229);
  }.bingo .wave-bottom {
    z-index: 1;
  }.bingo .wave-bottom path {
      fill: #fff;
    }.bingo .timestamp {
    left: 4px;
  }.bingo .external-link {
    color: #fff
  }.bingo .external-link:hover {
      border-color: #fff;
    }.bingo .main-content-wrapper {
    align-items: center;
    padding-bottom: 30px;
    max-height: 300px;
    margin-bottom: 100px;
    z-index: 2;
    top: -20px
  }@media (max-width: 975px) {

  .bingo .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 400px;
      margin-top: 0;
      margin-bottom: 140px
  }
    }.bingo .showcase {
    position: relative
  }@media (max-width: 975px) {

  .bingo .showcase {
      min-height: 200px;
      top: -70px;
      left: 75px
  }
    }.bingo .showcase .video-card {
      position: absolute;
      width: auto;
      height: auto;
      overflow: hidden;
      top: -100px;
      right: -200px;
      z-index: 9;
      transition: 0.3s cubic-bezier(.83, 0, .17, 1);
      transform: scale(0.8) rotate(2deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
    }.bingo .showcase .video-card video {
        position: relative;
        border-radius: 16px;
        width: 224px;
        transition: 0.3s cubic-bezier(.83, 0, .17, 1);
      }.bingo .card {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-color: transparent
  }.bingo .card:nth-child(1) {
      top: -120px;
      left: -200px;
      height: 256px;
      width: 256px;
      border-radius: 22%;
      z-index: 99;
      transform: scale(0.8);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
    }.bingo .card:nth-child(1):hover {
        transform: scale(1) translateY(-16px);
      }.bingo .card:nth-child(1) {

      background-image: url(/assets/bingo-app-icon.png);
    }.bingo .card:nth-child(2) {
      top: -200px;
      left: -20px;
      height: 260px;
      width: 260px;
      z-index: 0;
      transform: scale(0.8) rotate(8deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
    }.bingo .card:nth-child(2):hover {
        transform: scale(1) translateY(-16px) rotate(0deg);
      }.bingo .card:nth-child(2) {

      background-image: url(/assets/bingo-map.png);
    }.bingo .card:nth-child(4) {
      top: -240px;
      left: -380px;
      height: 550px;
      width: 400px;
      z-index: 1;
      transform: scale(0.8) rotate(4deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
    }.bingo .card:nth-child(4):hover {
        transform: scale(1) translateY(-16px) rotate(0deg);
      }.bingo .card:nth-child(4) {

      background-image: url(/assets/bingo-poster.png);
    }/* === RESPONSIVE FIX FOR BINGO SECTION === */@media (max-width: 900px) {

  .bingo{
    padding: 0;
  }

  .bingo .main-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    grid-gap: 20px;
    gap: 20px;
    max-height: none;
    margin-bottom: 60px;
  }

  .bingo .showcase {
    position: relative;
    margin-top: 30px;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

  }

  /* Hide all static cards */
  .bingo .showcase .card.depth-level-1,
  .bingo .showcase .card.depth-level-2,
  .bingo .showcase .card.depth-level-3 {
    display: none;
  }

  /* Show only the video card */
  .bingo .showcase .video-card {
    display: block;
    position: relative;
    top: 0;
    right: 0;
    transform: none;
    width: 90%;
    max-width: 360px;
    margin-top: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
  }

  .bingo .showcase .video-card video {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}.art-detective {
  position: relative;
  z-index: 2;
  background: #fff;
  color: black
}@media (max-width: 975px) {.art-detective {
    z-index: 1
}
  }.art-detective .wave-bottom {
    z-index: 1;
  }.art-detective .wave-bottom path {
      fill: #1D1D1D;
    }.art-detective .tint-color {
    color: #1D1D1D;
  }.art-detective p, .art-detective a {
    border-color: rgba(198, 0, 0, 0.3)
  }.art-detective p:hover, .art-detective a:hover {
     border-color: rgba(198, 0, 0, 1);
    }.art-detective .external-link:hover {
    border-color: #1D1D1D;
  }.art-detective .showcaseMobile {
    display: none;
  }.art-detective .main-content-wrapper {
    align-items: center;
    padding: 60px 0 186px 0

  }@media (max-width: 975px) {

  .art-detective .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 400px;
      padding-bottom: 100px

  }
    }.art-detective .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    top: 100px;
    min-height: 460px;

  }.art-detective .card {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-color: transparent
  }.art-detective .card:first-of-type {
      position: relative;
    }.art-detective .card:nth-child(1) {
      top: 80px;
      left: 140px;
      height: 316px;
      width: 500px;
      background-image: url(/assets/rijksmuseumMobile.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;

      transform: scale(1, 1) rotate(-2deg);
      box-shadow: none
    }.art-detective .card:nth-child(1):hover {
        transform: scale(1.1, 1.1) translateY(-36px) rotate(0deg);
      }.art-detective .card:nth-child(2) {
      width: 60%;
      top: -40px;
      left: 500px;
     }.art-detective .card:nth-child(3) {
      top: 150px;
      left: 600px;
      width: 250px;
      height: 350px;
      background-image: url(/assets/rijksmuseumScanning.png);
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 0;

      transform: scale(1, 1) rotate(-3deg);
      box-shadow: none
    }.art-detective .card:nth-child(3):hover {
        transform: scale(1.1, 1.1) translateY(-36px) rotate(0deg);
      }.art-detective .hero-card {
    box-shadow: none;
    transform: scale(1.1);
    height: 320px;
    width: 320px;
  }video {
  width: 100%;
}@media (max-width: 900px) {
  .showcaseMobile{
    display: flex !important;
    align-items: center;
    padding: 5%;
    margin-bottom: 2%;
  }

  .showcaseMobile img{
   width: 100%;
  border-radius: 15px;
  }

  .art-detective .showcase{
    display: none !important;
  }

  .art-detective .main-content-wrapper{ 
    height: -moz-fit-content; 
    height: fit-content;
    padding: 0;
  }

  .art-detective {
    padding-top: 0;
    padding-bottom: 100px;
  }

  }.trend-radar {
	font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
	position: relative;
	z-index: 1;
	background:#ef7b10;
	color: #fff;
}.trend-radar .tint-color {
		color: #fff;
	}.trend-radar .wave-bottom {
	z-index: 1;
  }.trend-radar .wave-bottom path {
		fill: #fff;
	}.trend-radar .external-link:hover {
	border-color: #fff;
  }.trend-radar .main-content-wrapper {
	align-items: center;
	padding-bottom: 100px;
	min-height: 730px;
	margin-top: -40px;
	z-index: 2
  }@media (max-width: 975px) {

  .trend-radar .main-content-wrapper {
	  flex-direction: column;
	  align-items: center;
	  min-height: 0
  }
	}@media (max-width: 469px) {

  .trend-radar .main-content-wrapper {
	  padding-bottom: 10px
  }
	}.trend-radar .viewport {
	  background-image: url(/assets/boobyTrack-screenshot.png);
	  background-size: cover;
  }.trend-radar .showcase {
	position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    top: 100px;
    min-height: 460px;
  }.trend-radar .showcase .video-card {
		position: absolute;
		width: auto;
		height: auto;
		overflow: hidden;
		top: -104px;
		right: -350px;
		z-index: 2;
		border-radius: 56px;

		transform: scale(.8, .8) rotate(10deg);
		box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		z-index: 2
	}.trend-radar .showcase .video-card:hover {
			transform: scale(.8, .8) translateY(-16px) rotate(2deg);
		}.trend-radar .showcase .video-card video {
			position: relative;
			padding: 8px 8px 4px 8px;
			border-radius: 60px;
			width: 320px;
		}.trend-radar .card {
	  position: absolute;
	  background-size: cover
  }.trend-radar .card:nth-child(1) {
		  top: -200px;
		  right: -250px;
		  height: 400px;
		  width: 600px;
		  background-image: url(/assets/vanderlande-web.png);
		  background-color: transparent;
		}@media (max-width: 900px) {
	.showcaseMobile {
	  display: flex !important;
	  align-items: center;
	  justify-content: center;
	  padding: 5%;
	  margin-bottom: 2%;

	}
    .trend-radar .main-content-wrapper {
		justify-content: !important;
	}

	.showcaseMobile img {
	  width: 100%;
	  border-radius: 15px;
	}
  
	.trend-radar .showcase {
	  display: none !important;
	}
  
	.trend-radar .main-content-wrapper {
	  height: -moz-fit-content;
	  height: fit-content;
	  padding: 0;
	}
  
	.trend-radar {
	  padding-top: 0;
	  padding-bottom: 100px;
	  background: #ef7b10;
	  color: #fff;
	}
  }.live-stream {
	font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  position: relative;
  z-index: 0;
  margin-top: 0px;
  background: #1D1D1D;
  color: #fff;
}.live-stream .tint-color {
	color: #fff;
  }.live-stream .wave-bottom {
	z-index: 1;
  }.live-stream .wave-bottom path {
		fill: #fff;
	}.live-stream .external-link:hover {
	border-color: #fff;
	border-color: #fff;
  }.live-stream .main-content-wrapper {
	align-items: center;
	padding-bottom: 30px;
	min-height: 0;
	min-height: 730px;
	margin-top: -40px;
	z-index: 2
  }@media (max-width: 975px) {

  .live-stream .main-content-wrapper {
	  flex-direction: column;
	  align-items: center;
	  margin-top: 64px
  }
	}@media (max-width: 469px) {

  .live-stream .main-content-wrapper {
	  padding-bottom: 10px
  }
	}.live-stream .showcase {
	position: relative
  }@media (max-width: 975px) {

  .live-stream .showcase {
		min-height: 200px;
		top: -70px;
		left: 75px
  }
	}.live-stream .showcase .video-card {
		position: absolute;
		width: 400px;
		height: auto;
		overflow: hidden;
		top: 0px;
   		right: -50px;
		z-index: 0;
	}.live-stream .showcase .video-card video {
			position: relative;
			border-radius: 16px;
			width: 100%;
		}.live-stream .showcase .video-card{

		transform: scale(.8, .8) rotate(-6deg);
	    box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
}.live-stream .showcase .video-card:hover {
			transform: scale(1, 1) translateY(-16px) rotate(0deg);
		}.live-stream .card {
	  position: absolute;
	  width: auto;
	  height: auto;
	  background-size: cover;
	  background-color: transparent
  }.live-stream .card:nth-child(1) {
		top: -120px;
		left: -200px;
		height: 256px;
		width: 256px;
		border-radius: 22%;
		z-index: 99;

		transform: scale(.8, .8);
		box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16)

	  }.live-stream .card:nth-child(1):hover {
		  transform: scale(1, 1) translateY(-16px);
		}.live-stream .card:nth-child(2) {
		  top: -280px;
		  left: -130px;
		  height: 260px;
		  width: 400px;
		  z-index: 3;

		  transform: scale(.8, .8) rotate(6deg);
		  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		}.live-stream .card:nth-child(2):hover {
			transform: scale(1, 1) translateY(-16px) rotate(0deg);
		  }.live-stream .card:nth-child(2) {

		  background-image: url(/assets/live-stream.png);
		}.live-stream .card:nth-child(3) {
		  top: -240px;
		  left: -380px;
		  height: 330px;
		  width: 450px;
		  z-index: 3;

		  transform: scale(.8, .8) rotate(4deg);
		  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		}.live-stream .card:nth-child(3):hover {
			transform: scale(1, 1) translateY(-16px) rotate(0deg);
		  }.live-stream .card:nth-child(3) {

		  background-image: url(/assets/judge-screen.png);
		}.live-stream .card:nth-child(4) {
		  top: -40px;
		  left: -100px;
		  height: 260px;
		  width: 400px;
		  z-index: 1;

		  transform: scale(.8, .8) rotate(10deg);
		  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
		}.live-stream .card:nth-child(4):hover {
			transform: scale(1, 1) translateY(-10px) rotate(0deg);
		  }.live-stream .card:nth-child(4) {

		  background-image: url(/assets/kumite-technology-announcements.png);
		}@media (max-width: 900px) {
	.showcaseMobile {
	  display: flex !important;
	  align-items: center;
	  justify-content: center;
	  padding: 5%;
	  margin-bottom: 2%;
	}
  
	.showcaseMobile img {
	  width: 100%;
	  border-radius: 15px;
	}
  
	.live-stream .showcase {
	  display: none !important;
	}
  
	.live-stream .main-content-wrapper {
	  height: -moz-fit-content;
	  height: fit-content;
	  padding: 0;
	}
  
	.live-stream {
	  padding-top: 0;
	  padding-bottom: 100px;
	  background: #060606;
	  color: #fff;
	}
  }.polarization {
  position: relative;
  z-index: 2;
  background: #fff;
  color: #2F2B36
}@media (max-width: 975px) {.polarization {
    z-index: 1
}
  }.polarization .wave-bottom {
    z-index: 1;
  }.polarization .wave-bottom path {
      fill: #ef7b10;
    }.polarization .tint-color {
    color: black;
  }.polarization .external-link:hover {
    border-color: #2F2B36;
  }.polarization .main-content-wrapper {
    align-items: center;
    padding: 60px 0 186px 0
  }@media (max-width: 975px) {

  .polarization .main-content-wrapper {
      flex-direction: column;
      align-items: center;
      min-height: 400px;
      padding-bottom: 100px
  }
    }@media (max-width: 780px) {

  .polarization .main-content-wrapper {
      align-items: flex-start
  }
    }@media (max-width: 469px) {

  .polarization .main-content-wrapper {
      min-height: 500px;
      padding-bottom: 10px
  }
    }.polarization .showcase {
    position: relative;
    margin-top: 40px;
    left: -20px;
    transform: scale(.8);
    transform-origin: top left;
    top: 100px;
    min-height: 460px
  }@media (min-width: 475px) {

  .polarization .showcase {
      transform: scale(0.9);
      top: 20px;
      left: -100px;
      min-height: auto
  }
    }@media (min-width: 975px) {

  .polarization .showcase {
      transform: scale(1, 1);
      top: -70px
  }
    }.polarization .showcase .video-card {
      position: absolute;
      width: auto;
      right:-300px;
      height: auto;
      overflow: hidden;
      top: 0px;
      z-index: 3;

      transform: scale(1.3, 1.3) rotate(3deg);
      box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16)
    }.polarization .showcase .video-card:hover {
        transform: scale(1.4, 1.4) translateY(-16px) rotate(2deg);
      }.polarization .showcase .video-card video {
        position: relative;
        padding: 8px 8px 4px 8px;
        border-radius: 16px;
        width: 350px;
      }.polarization .card {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
    background-size: cover;
    background-color: transparent
  }.polarization .card:first-of-type {
      position: relative;
    }.polarization .card:nth-child(1) {
      top: 200px;
      right: -300px;
      height: 250px;
      width: 350px;
      background-image: url(/assets/polarizationCAD.png);
      background-size: auto 1;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 16px;
      transform: scale(1, 1) rotate(4deg);
      box-shadow: none;
      z-index: 4
    }.polarization .card:nth-child(1):hover {
        transform: scale(1.1, 1.1) translateY(-16px) rotate(0deg);
      }.polarization .card:nth-child(2) {
        top: -80px;
        left: 0px;
        height: 400px;
        width: 300px;
        z-index: 0;
  
        transform: scale(.8, .8) rotate(-6deg);
        box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
      }.polarization .card:nth-child(2):hover {
        transform: scale(1, 1) translateY(-16px) rotate(0deg);
        }.polarization .card:nth-child(2) {
  
        background-image: url(/assets/polarization-user-test.jpg);
      }.polarization .card:nth-child(3) {
        top: 200px;
        left: 0px;
        height: 260px;
        width: 400px;
  
        transform: scale(.8, .8) rotate(-8deg);
        box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
      }.polarization .card:nth-child(3):hover {
        transform: scale(1, 1) translateY(-16px) rotate(0deg);
        }.polarization .card:nth-child(3) {
  
        background-image: url(/assets/polarization-3d-model.jpg);
      }.polarization .hero-card {
    box-shadow: none;
    transform: scale(1);
    height: 320px;
    width: 320px;
  }@media (max-width: 900px) {
  .showcaseMobile {
    display: flex !important;
    align-items: center;
    padding: 5%;
    margin-bottom: 2%;
  }

  .showcaseMobile img {
    width: 100%;
    border-radius: 15px;
  }

  .polarization .showcase {
    display: none !important;
  }

  .polarization .main-content-wrapper {
    height: -moz-fit-content;
    height: fit-content;
    padding: 0;
  }

  .polarization {
    padding-top: 0;
    padding-bottom: 100px;
    background: #fff;
    color: #2F2B36;
  }
}.forohfor {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #262527;
	color: #fff;
}.forohfor .rapper {
		display: flex;
		flex-grow: 1;
		align-items: center;
		justify-content: center;
	}.forohfor h1 {
		font-family: ui-rounded, "SF-Pro-Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
		font-size: 40px;
		text-align: center;
	}.forohfor .footer {
		position: relative;
		height: 104px;
		background: #1F1D1F;
		display: flex;
		width: 100%;
		align-items: center;
	}.forohfor a {
		width: 100%;
		text-align: center;
		color: inherit;
		text-decoration: none;
		z-index: 2
	}.forohfor a:hover {
			text-decoration: underline;
		}.forohfor .video-rapper {
		display: flex;
		justify-content: center;
		position: absolute;
		width: 100%;
		height: 280px;
		top: -199px;
		z-index: 1	
	}@media (max-width: 463px) {
	
	.forohfor .video-rapper {
			height: 220px;	
			top: -157px	
	}
		}.forohfor video {
		position: absolute;
	    display: block;
	    margin: 0 auto;
	    height: 100%;
	}/**
 * @license
 * MyFonts Webfont Build ID 4175828, 2021-09-04T14:05:27-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: MyriadPro-Regular by Adobe
 * URL: https://www.myfonts.com/fonts/adobe/myriad/regular/
 *
 * Webfont: MyriadPro-Semibold by Adobe
 * URL: https://www.myfonts.com/fonts/adobe/myriad/semibold/
 *
 *
 * Webfonts copyright: © 1992, 1994, 1997, 2000, 2004 Adobe Systems Incorporated. All rights reserved.
 *
 * © 2021 MyFonts Inc
*/@font-face {
  font-family: "MyriadPro-Semibold";
  src: url('../assets/fonts/MyriadProSemibold/font.woff2') format('woff2'), url('../assets/fonts/MyriadProSemibold/font.woff') format('woff');
}@font-face {
  font-family: "MyriadPro-Regular";
  src: url('../assets/fonts/MyriadProRegular/font.woff2') format('woff2'), url('../assets/fonts/MyriadProRegular/font.woff') format('woff');
}main {
  margin-bottom: 5%;
}.project-page {
    background: #1d1d1d;
    color: #fff;
    font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
  }.project-page a {
    color: #fff;
  }/* Header *//* ------------------------------
   MINIMAL APPLE-STYLE HEADER
------------------------------ */.project-header-minimal {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
  background: rgba(29, 29, 29, 0.85); /* slightly transparent for a modern feel */
  backdrop-filter: blur(16px); /* adds soft glassy Apple-like effect */
  -webkit-backdrop-filter: blur(16px);
  padding: 20px 0;
  transition: background 0.3s ease;
}.project-header-inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}.project-title {
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  padding-right: 5%;
  letter-spacing: -0.3px;
  text-align: center;
  flex: 1;
}.text-block{
  max-width: 900px;
}.project-home-link {
  color: #aaa;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  transition: color 0.3s ease;
}.project-home-link:hover {
  color: #fff;
}/* Adjust spacing on smaller devices */@media (max-width: 768px) {
  .project-header-inner {
    flex-direction: column;
    grid-gap: 10px;
    gap: 10px;
  }

  .project-title {
    font-size: 20px;
  }

  .project-home-link {
    font-size: 15px;
  }
}.project-title {
    font-size: 28px;
    font-weight: 600;
  }.project-home-link {
    color: #f0d8fd;
    text-decoration: none;
    font-weight: 500;
  }.project-home-link:hover {
    text-decoration: underline;
  }/* Hero / Intro Section */.project-hero-section {
    position: relative;
    background: #623862;
    color: #fff;
    height:850px;
    overflow: hidden;
  }.hero-content-wrapper {
    padding-top: 8%;
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 60px;
    gap: 60px;
  }.hero-text {
    flex: 1;
    max-width: 450px;
  }.hero-text h2 {
    font-size: 42px;
    margin-bottom: 20px;
  }.hero-showcase {
    position: relative;
    flex: 1;
    min-height: 400px;
  }.hero-showcase .card,
  .hero-showcase .video-card {
    position: absolute;
    box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
    transform: scale(.8) rotate(2deg);
    transition: transform 0.3s ease;
  }.hero-showcase .card:hover,
  .hero-showcase .video-card:hover {
    transform: scale(1) translateY(-16px) rotate(0deg);
  }.hero-showcase .card {
    background-size: cover;
    background-position: center;
  }.hero-showcase .depth-1 {
    top: 70px;
    right: 0px;
    width: 220px;
    height: 220px;
    transform: scale(.8, .8) rotate(-5deg);
    z-index: 5;
}.hero-showcase .depth-2 {
    top: 250px;
    left: 300px;
    width: 240px;
    height: 240px;
    z-index: 2;
    transform: scale(.8, .8) rotate(-8deg);
}.hero-showcase .depth-3 {
    top: -100px;
    left: 240px;
    width: 300px;
    height: 400px;
    transform: scale(.8, .8) rotate(2deg);
  }.hero-showcase .video-card {
    top: -50px;
    right: -150px;
    width: 260px;
    transform: scale(.8, .8) rotate(3deg);
  }.hero-showcase .video-card video {
    border-radius: 35px;
    width: 100%;
  }.wave-bottom {position: absolute;}.wave-bottom path {
    fill: #1d1d1d;
  }/* Phases */.project-section {
    padding: 0px 0 5% 0;
    text-align: center;
  }.project-section#first {
    padding: 2% 0 5% 0;
    text-align: center;
  }.project-container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
  }.project-phase {
    display: block;
    font-size: 14px;
    opacity: 0.6;
    text-transform: uppercase;
  }.project-container h2 {
    font-size: 44px;
    margin-bottom: 20px;
  }.project-container p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
  }.project-media {
    width: 90%;
    max-width: 700px;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
  }.project-media:hover {
    transform: scale(1.02);
  }/* Footer */.project-footer {
    background: #000;
    padding: 40px 20px;
    display: flex;
    justify-content: end;
    align-items: center;
  }.project-footer-link {
    color: #f0d8fd;
    text-decoration: none;
    display: flex;
    align-items: center;
    grid-gap: 16px;
    gap: 16px;
    font-weight: 500;
    transition: opacity 0.3s;
  }.project-footer-link:hover {
    opacity: 0.8;
  }.project-footer-link img {
    width: 80px;
    height: 60px;
    border-radius: 12px;
    -o-object-fit: cover;
       object-fit: cover;
  }@media (max-width: 975px) {
    .hero-content-wrapper {
      flex-direction: column;
      align-items: center;
    }
    .hero-showcase {
      margin-top: 40px;
    }
  }/* ------------------------------
   QR INTEGRATION SECTION
------------------------------ */.qr-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 60px;
    gap: 60px;
    text-align: left;
    flex-wrap: wrap;
  }.qr-media {
    flex: 1;
    display: flex;
    justify-content: center;
  }.project-wrapper video {
    width: 70%;
    max-width: 500px;
    border-radius: 50px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s 
ease;
}.qr-media video:hover {
    transform: scale(1.02);
  }.qr-text {
    flex: 1;
    max-width: 480px;
  }.qr-text h2 {
    font-size: 44px;
    margin-bottom: 20px;
    text-align: left;
  }.qr-text p {
    font-size: 18px;
    line-height: 1.6;
  }/* Responsive */@media (max-width: 900px) {
    .qr-layout {
      flex-direction: column;
      text-align: center;
    }
    .qr-text h2,
    .qr-text p {
      text-align: center;
    }
    .qr-media video {
      max-width: 90%;
    }
  }/* ------------------------------
   ANIMATION INTEGRATION
------------------------------ */.animation-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 60px;
    gap: 60px;
    flex-wrap: wrap;
    text-align: left;
  }.animation-text {
    flex: 1;
    max-width: 480px;
  }.animation-media {
    flex: 1;
    display: flex;
    justify-content: center;
  }.animation-media video {
    width: 70%;
    max-width: 500px;
    border-radius: 35px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
  }.animation-media video:hover {
    transform: scale(1.02);
  }/* ------------------------------
     FINAL PRODUCT SECTION
  ------------------------------ */.final-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 60px;
    gap: 60px;
    flex-wrap: wrap;
    text-align: left;
  }.final-media {
    flex: 1;
    display: flex;
    justify-content: center;
  }.final-media video {
    width: 70%;
    max-width: 500px;
    border-radius: 40px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s 
ease;
}.final-media video:hover {
    transform: scale(1.02);
  }.final-text {
    flex: 1;
    max-width: 480px;
  }/* Responsive Layouts */@media (max-width: 900px) {
    .animation-layout,
    .final-layout {
      flex-direction: column;
      text-align: center;
    }
  
    .animation-text,
    .final-text {
      text-align: center;
    }
  
    .animation-media video,
    .final-media video {
      max-width: 90%;
    }
  }/* -----------------------------------------
   ART DETECTIVE HERO SECTION
----------------------------------------- */.art-detective-hero {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
  position: relative;
  z-index: 1;
  padding: 150px 0;
  background: #fff;
  color: #1d1d1d;
}.art-detective-hero .tint-color {
  color: #e0b8ff;
}.art-detective-hero .wave-bottom path {
  fill: #1d1d1d;
}.art-detective-hero .main-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 80px;
  gap: 80px;
  padding: 0 5%;
  flex-wrap: wrap;
}.art-detective-hero .content {
  flex: 1 1 45%;
}.art-detective-hero .content h2 {
  font-size: 48px;
  margin-bottom: 24px;
}.art-detective-hero .content p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 16px;
}.art-detective-hero .external-link {
  color: #1d1d1d;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}.art-detective-hero .external-link:hover {
  border-color: #e0b8ff;
}.art-detective-hero .showcase {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
}.art-detective-hero .hero-image {
  width: 100%;
  max-width: 500px;
  border-radius: 16px;
  box-shadow: 0px 4px 24px rgba(14, 30, 37, 0.3);
  transition: transform 0.3s ease;
}@media (max-width: 975px) {
  .art-detective-hero .main-content-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .art-detective-hero .content {
    flex: 1 1 100%;
  }

  .art-detective-hero .hero-image {
    max-width: 340px;
    margin-top: 40px;
  }

  .art-detective-hero .content h2 {
    font-size: 36px;
  }
}/* ------------------------------
   PROJECT FOOTER
------------------------------ */.project-footer {
  background: #000;
  padding: 2% 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}.project-footer-link {
  color: #f0d8fd;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
  transition: opacity 0.3s ease;
}.project-footer-link:hover {
  opacity: 0.8;
}.footer-arrow {
  font-size: 28px;
  font-weight: bold;
  color: #f0d8fd;
}.footer-image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}.footer-image-wrapper img {
  width: 100px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
}.footer-project-name {
  margin-top: 8px;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}.project-footer-link.left {
  flex-direction: row-reverse;
}.project-footer-link.left .footer-arrow {
  order: 2;
}@media (max-width: 768px) {
  .project-footer {
    flex-direction: row;
    grid-gap: 30px;
    gap: 30px;
  }
  .live-stream-hero .main-content-wrapper {
    display: flex;
   justify-content: center;
   flex-direction: column;
   padding-bottom: 10%;
 }
}.live-stream-hero{
  background-color: #000;
  height: 80vh;
}.live-stream-hero .wave-bottom {
  position: absolute;
  bottom: 0;
}.live-stream-hero .showcase img {
width: 100%;
transition: transform 0.3s 
ease;
}.live-stream-hero .showcase img:hover {
  transform: scale(1.05);
}.live-stream-hero .main-content-wrapper{
  margin: 5% 5% 5% 5%;
}/* ---------------------------------
   POLARIZATION HERO
---------------------------------- */.polarization-hero {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
  position: relative;
  padding: 0% 5% 5% 5%;
  background: white;
  color: #1d1d1d;
  height: 75vh;
}section#first-polarization{
  padding-top: 3%;
}.polarization-hero .main-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 80px;
  gap: 80px;
}.polarization-hero .hero-image {
  width: 480px;
  border-radius: 16px;
  box-shadow: 0px 4px 24px rgba(0,0,0,0.4);
}/* FLEX LAYOUT FOR DEFINE PHASE */.project-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  grid-gap: 40px;
  gap: 40px;
  flex-wrap: wrap;
}/* FLOATING CARDS (for brainstorming & testing) */.floating-cards {
    position: relative;
    margin: 16% 10%;
    padding-bottom:5% ;
}.floating-cards .card {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  box-shadow: 0px 4px 24px rgba(0,0,0,0.3);
  transition: transform 0.4s ease;
}.floating-cards .card:hover {
  transform: scale(1.03) translateY(-10px);
}.floating-cards .depth-level-1 {
  top: -80px;
  left: 0;
  width: 260px;
  height: 180px;
  transform: rotate(-6deg);
}.floating-cards .depth-level-2 {
  top: -40px;
  left: 220px;
  width: 280px;
  height: 200px;
  transform: rotate(4deg);
}.floating-cards .depth-level-3 {
  top: -100px;
  left: 480px;
  width: 300px;
  height: 220px;
  transform: rotate(-3deg);
}.floating-cards .depth-level-4 {
  top: -20px;
  left: 700px;
  width: 300px;
  height: 200px;
  transform: rotate(5deg);
}@media (max-width: 900px) {
  .floating-cards {
    height: auto;
  }
}/* --- HERO RESPONSIVE --- */@media (max-width: 1024px) {
  .polarization-hero {
    height: auto;
    padding: 10% 5%;
  }

  .polarization-hero .main-content-wrapper {
    flex-direction: column;
    text-align: center;
    grid-gap: 40px;
    gap: 40px;
  }

  .polarization-hero .content {
    max-width: 100%;
  }

  .polarization-hero .hero-image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}/* --- BRAINSTORMING / FLOATING CARDS RESPONSIVE --- */@media (max-width: 900px) {
  .floating-cards {
    position: static;
    margin: 40px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 24px;
    gap: 24px;
  }

  .floating-cards .card {
    position: static;
    width: 90%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 16 / 10;
    transform: none !important;
  }

  .floating-cards .card:hover {
    transform: scale(1.02);
  }
}@media (max-width: 600px) {
  .polarization-hero .content h2 {
    font-size: 1.8rem;
  }

  .polarization-hero .content p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .floating-cards {
    grid-gap: 20px;
    gap: 20px;
  }

  .floating-cards .card {
    max-width: 320px;
  }
}/* Trend radar code */.hero-flex {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  grid-gap: 60px;
  gap: 60px;
}.hero-flex img{
  width: 150%;
}.project-section#trend-radar{
  background-color: #ef7b12;
}.project-section#trend-radar{
  padding-top: 5%;
}.project-section#trend-radar .wave-bottom{
position: relative;
bottom: -100px;
}.project-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 30px;
  gap: 30px;
}.image-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-gap: 20px;
  gap: 20px;
  margin-top: 40px;
}.iteration-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-gap: 20px;
  gap: 20px;
  margin-top: 40px;
}.iteration-row img{
  width: 40%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}.image-row img {
  width: 40%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}.project-media {
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}/* Tablet layout */@media (max-width: 1024px) {
  .hero-flex {
    flex-direction: column;
    text-align: center;
    grid-gap: 40px;
    gap: 40px;
  }

  .hero-flex .text-block {
    max-width: 100%;
  }

  .hero-flex .media-block img {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .project-section#trend-radar {
    padding: 10% 5%;
  }
}/* Mobile layout */@media (max-width: 600px) {
  .hero-flex .text-block h2 {
    font-size: 1.8rem;
  }

.hero-showcase .video-card {
    top: -100px;
    right: -200px;
    width: 200px;
    transform: scale(.8, .8) rotate(3deg);
}
  .hero-flex .text-block p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .hero-flex {
    grid-gap: 32px;
    gap: 32px;
  }

  .hero-flex .media-block img {
    max-width: 320px;
  }

  .project-section#trend-radar {
    padding-bottom: 100px;
  }
  .project-section#trend-radar .wave-bottom {
      position: absolute;
      bottom: 70px;
      right: 0px;
  }
}.pdf-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
}.pdf-popup-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  height: 85%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}.pdf-popup iframe {
  width: 100%;
  height: 100%;
  border: none;
}.close-popup {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #000;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10000;
}@media (max-width: 600px) {
  .pdf-popup-content {
    width: 95%;
    height: 80%;
  }
}.miscelanious-is-a-funny-word {
  background: #fff;
  position: relative;
  flex-direction: column;
  z-index: 1;
}.miscelanious-is-a-funny-word p {
    margin-top: 8px;
  }.miscelanious-is-a-funny-word .main-content-wrapper {
    align-items: center;
    padding-bottom: 30px;
    padding-top: 30px;
  }.miscelanious-is-a-funny-word .content {
    max-width: 100%;
  }.miscelanious-is-a-funny-word ul {
    list-style-type: none;
    padding: 0;
    margin: 40px 0 0 0;
  }.miscelanious-is-a-funny-word .flexing-like-a-douche {
    display: flex;
    align-items: center;
  }.miscelanious-is-a-funny-word .detail {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    padding-top: 4px;
  }.miscelanious-is-a-funny-word .detail img {
      width: 100%;
    }.miscelanious-is-a-funny-word .wrapper p {
    margin: 0;
  }.people-id-like-to-meet ul {
    -moz-column-count: 5;
         column-count: 5;
    -moz-column-width: 190px;
         column-width: 190px;
  }.people-id-like-to-meet .tick {
    display: block;
    box-sizing: content-box;
    height: 18px;
    width: 18px;
    border: 2px solid #0E1E25;
    border-radius: 4px;
    margin-right: 8px;
  }.people-id-like-to-meet .checked .tick {
    border: 2px solid #219653;
    border: 2px solid color(display-p3 0.056 0.567 0.169);
    background: rgba(33, 150, 83, 0.17);
    background: color(display-p3 0.086 0.578 0.195 / 0.17);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDExIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuMTMzMDUgNC43ODUxNUwyLjQ4MDYgMy4xMzI3QzEuOTEzMTMgMi41NjUyMiAwLjk5MzA3NiAyLjU2NTIyIDAuNDI1NjA0IDMuMTMyN0MtMC4xNDE4NjggMy43MDAxNyAtMC4xNDE4NjggNC42MjAyMiAwLjQyNTYwNCA1LjE4NzY5TDMuMDc5NzQgNy44NDE4MkMzLjQ2MjQ2IDguMjI0NTUgNC4wMDU1NiA4LjM0OTE1IDQuNDkyNzEgOC4yMTU2M0M0Ljc1MzE2IDguMTU3NzEgNS4wMDA3NiA4LjAyNzQzIDUuMjAzNDEgNy44MjQ3OUwxMC41NDc2IDIuNDgwNkMxMS4xMTUxIDEuOTEzMTMgMTEuMTE1MSAwLjk5MzA3NiAxMC41NDc2IDAuNDI1NjA0QzkuOTgwMTIgLTAuMTQxODY4IDkuMDYwMDcgLTAuMTQxODY4IDguNDkyNiAwLjQyNTYwNEw0LjEzMzA1IDQuNzg1MTVaIiBmaWxsPSIjMjE5NjUzIi8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: 4px 5px;
  }.people-id-like-to-meet .checked a {
    color: #219653;
    color: color(display-p3 0.056 0.567 0.169);
  }.people-id-like-to-meet li {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    margin-right: -8px;
  }.people-id-like-to-meet li a {
    font-size: 18px;
    color: #0E1E25;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid #fff;
    padding-top: 2px
  }.people-id-like-to-meet li a:hover {
      border-bottom: 2px solid #219653;
      border-bottom: 2px solid color(display-p3 0.056 0.567 0.169);
    }.people-id-like-to-meet .people-at-wwdc {
    background: #F9FAFB;
    border-radius: 16px;
    padding: 24px;
    margin: 40px -16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    border: 0.5px solid #ddd;
  }.people-id-like-to-meet .people-at-wwdc h3 {
      font-size: 20px;
    }.people-id-like-to-meet .people-at-wwdc li a {
      border-bottom: 2px solid #F9FAFB
    }.people-id-like-to-meet .people-at-wwdc li a:hover {
        border-bottom: 2px solid #219653;
        border-bottom: 2px solid color(display-p3 0.056 0.567 0.169);
      }.miscelanious-is-a-funny-word {
  height: 500px;
}.miscelanious-is-a-funny-word .main-content-wrapper.social {
  padding-top: 5%;
}.miscelanious-is-a-funny-word .main-content-wrapper.footer {
  display: block;
  min-height: 0px;
}.miscelanious-is-a-funny-word .main-content-wrapper.footer p {
    font-size: 14px;
    margin-bottom: 4px;
  }.in-the-year-2000 .flexing-like-a-douche,
.social .flexing-like-a-douche {
  display: flex;
  align-items: flex-start;
}.in-the-year-2000 .flexing-like-a-douche .detail, .social .flexing-like-a-douche .detail {
    flex-basis: 40px;
  }.in-the-year-2000 .flexing-like-a-douche .wrapper, .social .flexing-like-a-douche .wrapper {
    flex-basis: 95%;
  }.in-the-year-2000 li,
.social li {
  display: block;
  position: relative;
  padding: 8px;
  margin-top: -8px;
  margin-left: -8px;
  border-radius: 4px;
  margin-bottom: 24px
}.in-the-year-2000 li:hover, .social li:hover {
    background: rgba(0, 179, 229, .1);
    cursor: pointer;
  }.in-the-year-2000 li .whole-thang-is-a-target, .social li .whole-thang-is-a-target {
    position: absolute;
    top: 0;
    left: 0;
  }.in-the-year-2000 .frames:hover {      background: rgba(059, 191, 248, .1); }.in-the-year-2000 .sketchcasts:hover { background: rgba(069, 116, 174, .1); }.in-the-year-2000 .talks:hover {       background: rgba(010, 158, 251, .1); }.social .twitter:hover {               background: rgba(097, 159, 230, .1); }.social .mastodon:hover {              background: rgba(040, 044, 055, .1); }.social .letterboxd:hover {            background: rgba(040, 044, 055, .1); }.social .dribbble:hover {              background: rgba(176, 092, 131, .1); }.social .github:hover {                background: rgba(023, 021, 022, .1); }.social .apple-music:hover {           background: rgba(213, 110, 125, .1); }.social .strava:hover {                background: rgba(219, 098, 058, .1); }.social .psn:hover,
.social .switch:hover {
  background: white;
  cursor: auto;
}.dribbble img {
    border-radius: 999px;
  }:root {
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #0e1e25;
  font-size: 18px;
  margin: 0;
  background: #f7fafb;
}h1 {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-family: var(--rounded);
  font-size: 72px;
  font-weight: 900;
  margin: 0;
}h2 {
  font-size: 52px;
  font-weight: bold;
  margin: 0
}@media (max-width: 520px) {h2 { font-size: 42px
} }h3 {
  font-size: 36px;
  margin: 0
}@media (max-width: 520px) {h3 { font-size: 28px
} }h4 {
  font-weight: 600;
  margin: 0 0 4px 0;
}p {
  margin-top: 16px;
  opacity: .7;
  line-height: 1.4em;
}p a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 179, 229, 0.3)
}p a:hover {
    border-color: rgba(0, 179, 229, 1);
  }a.external-link {
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  margin-top: 8px;
  border-bottom: 2px solid rgba(0, 179, 229, 0)
}a.external-link::after {
    content: "→";
    position: absolute;
    margin-left: 4px;
  }a.external-link:hover {
    border-color: rgba(0, 179, 229, 1);
  }.timestamp {
  position: relative;
  bottom: -8px;
  font-size: 14px;
  opacity: 0.4;
  margin: 0 0 -8px 2px ;
  font-weight: 500;
}.whole-thang-is-a-target {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
}.ninja-links {
  color: inherit;
  text-decoration: none;
  border: none;
}.ninja-links:hover {
  cursor: text;
}.papa-wrapper {
  width: 100vw;
  overflow-x: hidden;
}.wave {
  display: block;
  position: absolute;
  z-index: 9;
  width: 100vw;
  min-width: 1400px;
  height: auto;
}.wave-bottom {
  bottom: -8px;
}.wave-top {
  top: -75px;
}.card {
  display: block;
  position: relative;
  width: 480px;
  height: 360px;
  background: #fff;
  border-radius: 16px;

  transition: transform 0.3s cubic-bezier(.83, 0, .17, 1);
}.not-actually-a-card {
  transition: transform 0.3s cubic-bezier(.83, 0, .17, 1);
}.depth-level-1 {
  box-shadow: 0px 4px 34px 2px rgba(14, 30, 37, 0.16);
  z-index: 3
}.depth-level-1:hover {
    transform: translateY(-16px);
  }.depth-level-2 {
  transform: scale(.8, .8);
  box-shadow: 0px 4px 24px 2px rgba(14, 30, 37, 0.16);
  z-index: 2
}.depth-level-2:hover {
    transform: scale(.8, .8) translateY(-16px);
  }.depth-level-3 {
  transform: scale(.7, .7);
  box-shadow: 0px 4px 14px 2px rgba(14, 30, 37, 0.16);
  z-index: 1
}.depth-level-3:hover {
    transform: scale(.7, .7) translateY(-16px);
  }.main-content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  width: 90%;
  max-width: 1024px;
  margin: auto;
  z-index: 2;
}.content {
  max-width: 600px;
  z-index: 999;
}.background {
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 1;
}.section {
  position: relative;
  display: flex;
  justify-content: center;
}#easterNope {
  z-index: 999;
  position: fixed;
  left: -280px;
  top: 50%;
  height: 200px;
  animation-fill-mode: forwards;
}.popin {
  animation: 1s popin cubic-bezier(0.770, 0.000, 0.175, 1.000);
}.popout {
  animation: 1s popout cubic-bezier(0.770, 0.000, 0.175, 1.000);
}@keyframes popin {
  from { left: -280px; }
  to {left: 0;}
}@keyframes popout {
  from { left: 0px; }
  to {left: -280px;}
}.hide {
  display: none;
}video {
  pointer-events: none;
}video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 1 !important;
}footer#main{
  padding: 3%;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f0f0f0;
}.showcaseMobile {
  display: none;
}