@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700&display=swap');
* {
  box-sizing: border-box
}
html,
body {
  margin: 0;
  background: #01040a;
  color: #eaffff;
  font-family: 'DM Mono',monospace;
  overflow-x: hidden
}
.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
main {
  background: linear-gradient(#a5f4ff 0%,#1eb4d8 12%,#087195 24%,#043c5d 38%,#021c37 52%,#010d20 68%,#010712 83%,#07070a 94%,#17110d 100%)
}
section {
  height: 115vh;
  min-height: 760px;
  position: relative;
  overflow: hidden
}
.surface {
  height: 130vh;
  background: linear-gradient(#b9f6ff 0 42%,#57d7ef 43%,rgba(18,176,211,.2) 68%,transparent)
}
.sun {
  position: absolute;
  right: 15%;
  top: 8%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fffbd0;
  box-shadow: 0 0 40px #fff8c2,0 0 130px 55px rgba(255,245,170,.55)
}
.rays {
  position: absolute;
  inset: 10% 0 25% 35%;
  background: repeating-linear-gradient(108deg,transparent 0 80px,rgba(255,255,220,.15) 82px 87px,transparent 89px 160px)
}
.intro {
  position: absolute;
  z-index: 4;
  left: 9vw;
  top: 12vh
}
.intro small,
.label,
article small,
.story small,
.end small {
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .64
}
.intro h1,
.story h2,
.end h2,
article h2 {
  font-family: Manrope,sans-serif;
  letter-spacing: -.06em
}
.intro h1 {
  font-size: clamp(62px,8vw,120px);
  line-height: .8;
  margin: 25px 0
}
.intro h1 i,
.end h2 i {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,255,255,.85)
}
.intro p {
  font-family: Manrope;
  font-size: 14px
}
.intro em {
  display: block;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .14em;
  margin-top: 45px
}
.sea {
  position: absolute;
  top: 45%;
  height: 100px;
  width: 100%;
  z-index: 3
}
.label {
  position: absolute;
  left: 5vw;
  top: 7vh;
  opacity: .42
}
.zone article {
  position: absolute;
  left: 10vw;
  top: 25%;
  width: min(680px,72vw);
  padding: 38px;
  border: 1px solid rgba(210,250,255,.14);
  background: linear-gradient(135deg,rgba(210,250,255,.06),rgba(0,20,40,.09));
  backdrop-filter: blur(9px)
}
article h2 {
  font-size: clamp(38px,5vw,65px);
  line-height: .9;
  margin: 25px 0
}
article h3 {
  font-family: Manrope;
  font-size: 20px
}
article p {
  font-size: 12px;
  line-height: 1.8;
  opacity: .6
}
.story {
  position: absolute;
  left: 10vw;
  top: 32%
}
.story h2 {
  font-size: clamp(42px,5vw,74px);
  margin: 15px 0
}
#fish {
  position: absolute;
  right: -32vw;
  top: 38%;
  width: 390px;
  height: 190px;
  filter: drop-shadow(0 20px 35px rgba(0,0,0,.35))
}
.tail {
  position: absolute;
  left: 0;
  top: 35px;
  border-top: 52px solid transparent;
  border-bottom: 52px solid transparent;
  border-right: 90px solid #071d2b
}
.eye {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aefaff;
  right: 60px;
  top: 42px;
  box-shadow: 0 0 15px #83f6ff
}
.projects a {
  display: block;
  color: #eaffff;
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(220,250,255,.1);
  font-family: Manrope;
  font-size: 16px
}
.projects a b {
  float: right
}
.sink:after {
  content: '○   ·  ○       °';
  position: absolute;
  left: 55%;
  top: 58%;
  opacity: .2;
  font-size: 20px
}
.rescuecopy {
  left: auto;
  right: 10vw;
  text-align: right
}
.stars {
  position: absolute;
  right: 10%;
  bottom: 22%;
  opacity: .25;
  text-shadow: 0 0 20px #7ef7ff
}
.abyss .story {
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%);
  text-align: center
}
.floor {
  height: 100vh;
  background: linear-gradient(transparent,#15100d 80%)
}
.end {
  position: absolute;
  left: 10vw;
  top: 22%
}
.end h2 {
  font-size: clamp(50px,7vw,94px);
  line-height: .84;
  margin: 25px 0
}
.end p {
  opacity: .55
}
.end nav {
  display: flex;
  gap: 30px;
  margin-top: 40px
}
.end a {
  font-size: 11px;
  border-bottom: 1px solid rgba(230,250,255,.35);
  padding-bottom: 7px
}
.sand {
  position: absolute;
  bottom: 7%;
  width: 100%;
  text-align: center;
  opacity: .25;
  letter-spacing: .5em
}
#meter {
  position: fixed;
  z-index: 60;
  right: 25px;
  top: 24px;
  padding: 10px 13px;
  border: 1px solid rgba(230,255,255,.2);
  background: rgba(0,15,25,.18);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  font-size: 9px;
  letter-spacing: .13em
}
#meter span {
  margin-left: 9px;
  opacity: .45
}
#sub {
  position: fixed;
  z-index: 35;
  left: 60vw;
  top: 35vh;
  width: 135px;
  height: 70px;
  filter: drop-shadow(0 10px 20px rgba(0,30,50,.3))
}
.prop {
  position: absolute;
  left: 2px;
  top: 25px;
  width: 20px;
  height: 20px;
  border-left: 3px solid #d89b25;
  animation: prop .2s linear infinite
}

@keyframes prop {
to {
    transform: rotate(180deg)
  }
}
#person {
  position: fixed;
  z-index: 32;
  left: 52vw;
  top: 48vh;
  width: 55px;
  height: 80px;
  opacity: 0;
  filter: drop-shadow(0 5px 10px #001)
}
#person i {
  position: absolute;
  display: block;
  background: #ecfbff
}
.head {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: 20px
}
.body {
  width: 8px;
  height: 30px;
  left: 24px;
  top: 17px;
  border-radius: 5px
}
.arm {
  width: 32px;
  height: 5px;
  left: 10px;
  top: 27px;
  border-radius: 4px;
  transform: rotate(20deg)
}
.leg {
  width: 38px;
  height: 5px;
  left: 20px;
  top: 50px;
  border-radius: 4px;
  transform: rotate(80deg)
}
#manta {
  position: fixed;
  z-index: 30;
  left: 42vw;
  top: 56vh;
  width: 230px;
  height: 120px;
  opacity: 0;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.4))
}
.wing {
  position: absolute;
  top: 17px;
  width: 110px;
  height: 76px;
  background: #9ed9df
}
.left {
  left: 0;
  clip-path: polygon(100% 15%,100% 85%,0 55%,15% 25%);
  transform-origin: right center;
  animation: flapL 2.5s ease-in-out infinite
}
.right {
  right: 0;
  clip-path: polygon(0 15%,0 85%,100% 55%,85% 25%);
  transform-origin: left center;
  animation: flapR 2.5s ease-in-out infinite
}

@keyframes flapL {
50% {
    transform: rotate(12deg) scaleY(.82)
  }
}

@keyframes flapR {
50% {
    transform: rotate(-12deg) scaleY(.82)
  }
}
.bubble {
  position: fixed;
  border: 1px solid rgba(230,255,255,.55);
  border-radius: 50%;
  z-index: 25;
  animation: rise 2.2s forwards
}

@keyframes rise {
to {
    transform: translateY(-140px) scale(.3);
    opacity: 0
  }
}

@media(max-width:700px) {
.intro {
    left: 7vw
  }
.zone article {
    left: 6vw;
    width: 88vw;
    padding: 26px
  }
.story {
    left: 7vw
  }
.rescuecopy {
    right: 7vw
  }
.end {
    left: 7vw
  }
.end nav {
    gap: 15px;
    flex-wrap: wrap
  }
#sub {
    transform: scale(.75)
  }
#manta {
    transform: scale(.75)
  }
}
.actor {
  position: fixed!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  background-size: contain!important;
  pointer-events: none!important
}
#sub {
  z-index: 35;
  width: 831px!important;
  height: 523px!important
}
#fish {
  z-index: 34;
  width: 1116px!important;
  height: 700px!important;
  opacity: 0;
  filter: drop-shadow(0 22px 35px rgba(0,0,0,.45))
}
#person {
  z-index: 36;
  width: 400px!important;
  height: 400px!important;
  opacity: 0
}
#manta {
  z-index: 33;
  width: 1246px!important;
  height: 770px!important;
  opacity: 0;
  filter: drop-shadow(0 18px 32px rgba(18,115,170,.28))
}
html,
body {
  cursor: auto
}
a[href] { cursor: pointer; }
#cursorLight {
  position: fixed;
  z-index: 90;
  left: 0;
  top: 0;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle,rgba(205,252,255,.19) 0%,rgba(125,236,255,.10) 24%,rgba(78,203,240,.035) 48%,transparent 70%);
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: .9;
}
#cursorDot {
  display: none;
  position: fixed;
  z-index: 101;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  background: #e9feff;
  box-shadow: 0 0 7px #c7fbff,0 0 18px rgba(126,239,255,.8);
}

@media (pointer:coarse) {
html,
body,
a {
    cursor: auto
  }
#cursorLight,
#cursorDot {
    display: none
  }
}
.actor {
  will-change: transform,left,top,opacity;

}
.glass-window {
  position: absolute;
  border: 1px solid rgba(208,246,255,.22)!important;
  border-radius: 24px;
  background:
  linear-gradient(135deg,rgba(196,239,255,.105),rgba(15,74,105,.055) 42%,rgba(1,23,43,.18))!important;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.15),
  inset 1px 0 0 rgba(255,255,255,.045),
  0 28px 80px rgba(0,12,28,.20),
  0 0 45px rgba(73,208,238,.025);
  overflow: hidden;
}
.glass-window:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg,rgba(255,255,255,.075),transparent 23%,transparent 72%,rgba(117,230,255,.025));
}
.glass-window:after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(232,253,255,.45),transparent);
}
.glass-window small,
.glass-window h2,
.glass-window h3,
.glass-window p,
.glass-window a {
  position: relative;
  z-index: 1
}
.portfolio-list {
  padding: 42px 44px!important
}
.portfolio-list h2 {
  margin-bottom: 32px
}
.portfolio-list:has(a):after {
  opacity: .8
}
.portfolio-list a {
  position: relative;
  display: grid!important;
  grid-template-columns: 26px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 -14px;
  padding: 17px 14px!important;
  border-bottom: 1px solid rgba(220,250,255,.085)!important;
  border-radius: 11px;
  transition: background .24s ease,transform .24s ease,color .24s ease,box-shadow .24s ease;
}
.portfolio-list a:last-child {
  border-bottom-color: transparent!important
}
.portfolio-list a:before {
  content: "›";
  font-family: 'DM Mono',monospace;
  font-size: 25px;
  line-height: 1;
  color: rgba(226,252,255,.72);
  transition: .24s;
}
.portfolio-list a b {
  justify-self: end;
  opacity: 0!important;
  transform: translate(-8px,7px)!important;
  transition: opacity .24s ease,transform .24s ease!important;
}
.portfolio-list a:hover {
  background: linear-gradient(90deg,rgba(150,237,255,.095),rgba(150,237,255,.025));
  transform: translateX(5px);
  box-shadow: inset 2px 0 0 rgba(160,244,255,.55);
}
.portfolio-list a:hover:before {
  color: #d8fdff;
  text-shadow: 0 0 12px rgba(113,238,255,.9);
  transform: translateX(3px);
}
.portfolio-list a:hover b {
  opacity: .75!important;
  transform: none!important
}
.z1 .glass-window {
  background: linear-gradient(135deg,rgba(226,251,255,.13),rgba(12,94,126,.07),rgba(0,40,67,.12))!important;
}

@media(max-width:700px) {
.glass-window {
    border-radius: 18px
  }
.portfolio-list {
    padding: 28px 22px!important
  }
.portfolio-list a {
    font-size: 14px!important
  }
}
.portfolio-list a[data-gallery] {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(220,250,255,.1);
  font-family: Manrope,sans-serif;
  line-height: 1.5
}
.portfolio-list a[data-gallery]:hover {
  background-color: rgba(150,237,255,.08)
}
.portfolio-list a[data-gallery]:focus-visible {
  outline: 2px solid #b7f4ff;
  outline-offset: 4px;
  border-radius: 8px
}
.sink:after {
  pointer-events: none
}
html.gallery-open,
html.gallery-open body {
  overflow: hidden
}
#pictureWindow {
  width: min(900px,calc(100% - 32px));
  max-width: none;
  height: min(820px,85vh);
  height: min(820px,85dvh);
  max-height: none;
  padding: 0;
  border: 1px solid rgba(208,246,255,.3);
  border-radius: 24px;
  background: #1a1a1a;
  color: #eaffff;
  box-shadow: 0 30px 100px #0008;
  overflow: hidden;
  cursor: auto
}
#pictureWindow[open] {
  display: flex;
  flex-direction: column
}
#pictureWindow::backdrop {
  background: rgba(0,9,19,.75);
  backdrop-filter: blur(10px)
}
.picture-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  border-bottom: 1px solid #d2faff26;
  flex-shrink: 0
}
.picture-eyebrow {
  margin: 0 0 10px;
  color: #a3ccd6;
  font-size: 10px;
  letter-spacing: .18em
}
#pictureTitle {
  font-family: Manrope,sans-serif;
  font-size: clamp(20px,3vw,30px);
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere
}
#closePictures {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1px solid #d2faff40;
  border-radius: 50%;
  background: #d2faff0d;
  color: #eaffff;
  font-size: 28px;
  cursor: pointer
}
#closePictures:hover {
  background: #d2faff26
}
#closePictures:focus-visible,
.picture-content:focus-visible {
  outline: 2px solid #b7f4ff;
  outline-offset: -4px
}
.picture-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 32px;
  scrollbar-color: #547e8e #081f2c
}
.picture-content figure {
  margin: 0 0 28px
}
.picture-content figure:last-child {
  margin-bottom: 0
}
.picture-content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #ffffff08
}
.picture-content figcaption {
  margin-top: 12px;
  color: #e0e0e0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size: 18px;
  line-height: 1.8
}
.picture-content figcaption p {
  white-space: pre-line;
  margin: 0 0 16px
}
.picture-content figcaption :is(h1,h2,h3,h4,h5,h6) {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.3;
  color: #eaffff;
  margin: 28px 0 12px
}
.picture-content figcaption h1 {
  font-size: 32px
}
.picture-content figcaption h2 {
  font-size: 27px
}
.picture-content figcaption h3 {
  font-size: 22px
}
.picture-content figcaption h4 {
  font-size: 20px
}
.picture-content figcaption h5 {
  font-size: 18px
}
.picture-content figcaption h6 {
  font-size: 16px
}
.picture-empty {
  min-height: 260px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed #d2faff30;
  border-radius: 16px;
  padding: 24px
}
.picture-empty span {
  font-size: 48px;
  color: #a3ccd6
}
.picture-empty h3 {
  font-family: Manrope,sans-serif;
  font-size: 20px;
  margin: 16px 0 8px
}
.picture-empty p,
.picture-error {
  font-size: 12px;
  line-height: 1.8;
  color: #b2cdd6
}

@media(max-width:700px) {
.picture-header {
    padding: 20px;
    gap: 12px
  }
.picture-content {
    padding: 20px
  }
#pictureWindow {
    border-radius: 18px
  }
.picture-eyebrow {
    font-size: 9px
  }
}
.picture-content figcaption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  cursor: pointer
}
.portfolio-list h4 {
  margin-bottom:  4px;
}
.portfolio-list h4 + a[data-gallery] {
  padding-top:  4px !important;
}
.portfolio-list .list-duration {
  justify-self: end;
  max-width: 150px;
  text-align: right;
  font-size: 12px;
  line-height: 1.5;
  color: #bdbdbd;
  overflow-wrap: anywhere
}
#pictureDuration {
  margin: 10px 0 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #bdbdbd
}

@media(max-width:700px) {
.portfolio-list .list-duration {
    max-width: 95px;
    font-size: 11px
  }
}
html,
body {
  overflow-x: clip
}

@keyframes jelly-drift {
50% {
    transform: translateY(-12px) rotate(2deg)
  }
}

@keyframes jelly-pulse {
50% {
    transform: scale(.94,1.06)
  }
}

@keyframes jelly-sway {
from {
    transform: rotate(-9deg)
  }
to {
    transform: rotate(12deg)
  }
}

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

@media(prefers-reduced-motion:reduce) {
}

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

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

@media(prefers-reduced-motion:reduce) {
}

@media(max-width:700px) {
}
.sea.image-waves {

  top: 35%;
  --wave-width: clamp(900px,100vw,2048px);
  --wave-height: calc(var(--wave-width) * .15625);
  --wave-overlap: calc(var(--wave-width) * .1);
  --wave-step: calc(var(--wave-width) - var(--wave-overlap));
  height: calc(var(--wave-height) * 2.1);
  pointer-events: none;
}
.sea.image-waves i {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wave-height);
  background: none;
  will-change: transform;
  transform: none;
  opacity: 1;
  animation: wave-image-left 24s linear infinite;
}

@keyframes wave-image-left {
from {
    transform: translateX(0)
  }
to {
    transform: translateX(calc(0px - var(--wave-step)))
  }
}

@media(prefers-reduced-motion:reduce) {
.sea.image-waves i {
    animation: none
  }
}
.wave-bubble {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border: 1px solid #eaffffb3;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%,#ffffffa6,transparent 45%);
  box-shadow: 0 0 8px #c8f4ff40;
  opacity: 0;
  animation: wave-bubble-rise 3s ease-out forwards
}

@keyframes wave-bubble-rise {
15% {
    opacity: .8
  }
to {
    opacity: 0;
    transform: translate(var(--bubble-drift),-130px) scale(.55)
  }
}

@media(prefers-reduced-motion:reduce) {
.wave-bubble {
    display: none
  }
}

@media(max-width:700px) {
#sub {
    width: 656px!important;
    height: 413px!important
  }
#person {
    width: 335px!important;
    height: 335px!important
  }
#manta {
    width: 942px!important;
    height: 579px!important
  }
}
.submarine-plop {
  position: fixed;
  width: 0;
  height: 0;
  z-index: 38;
  pointer-events: none
}
.submarine-plop:before,
.submarine-plop:after {
  content: '';
  position: absolute;
  left: -55px;
  top: -10px;
  width: 110px;
  height: 20px;
  border: 2px solid #dffaff;
  border-radius: 50%;
  box-shadow: 0 0 12px #a7e9ff70;
  animation: sub-plop-ring .85s ease-out both
}
.submarine-plop:after {
  animation-delay: .12s;
  border-width: 1px
}
.submarine-plop span {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 9px;
  border-radius: 50%;
  background: #dffaff;
  box-shadow: 0 0 7px #c1f2ff;
  animation: sub-plop-drop .75s ease-out both
}

@keyframes sub-plop-ring {
from {
    opacity: .95;
    transform: scale(.35)
  }
to {
    opacity: 0;
    transform: scale(2.2,1.8)
  }
}

@keyframes sub-plop-drop {
0% {
    opacity: 0;
    transform: translate(0,0) scale(.5)
  }
20% {
    opacity: 1
  }
65% {
    opacity: .75;
    transform: translate(var(--splash-x),var(--splash-y))
  }
100% {
    opacity: 0;
    transform: translate(var(--splash-x),15px) scale(.3)
  }
}

@media(prefers-reduced-motion:reduce) {
.submarine-plop {
    display: none
  }
}
.sun.image-sun {
  right: 2%;
  top: 2%;
  width: clamp(190px,24vw,330px);
  height: auto;
  aspect-ratio: 732 / 728;
  border-radius: 0;
  background: url('hihi/00/i1.png') center / contain no-repeat;
  box-shadow: none;
  filter: brightness(1.12) saturate(1.15) drop-shadow(0 0 12px rgba(255,253,210,.95)) drop-shadow(0 0 35px rgba(255,229,120,.7)) drop-shadow(0 0 65px rgba(255,221,100,.4));
}
.rays {
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 88% 12%,rgba(255,247,195,.26),rgba(255,249,211,.08) 22%,transparent 48%);
  filter: blur(22px);
}
.sea.image-waves:before {
  content: '';
  position: absolute;
  left: 43%;
  right: 0;
  top: 22%;
  height: 70%;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 65% 45%,rgba(255,248,198,.42),transparent 67%);
  filter: blur(20px);
  mix-blend-mode: screen;
}
.sea.image-waves:after {
  content: '';
  position: absolute;
  left: 38%;
  right: 1%;
  top: 20%;
  height: 72%;
  z-index: 5;
  pointer-events: none;
  background:
  radial-gradient(ellipse 44px 5px at 78% 12%,#fffdebe6,transparent),
  radial-gradient(ellipse 70px 7px at 66% 28%,#fff8d4e6,transparent),
  radial-gradient(ellipse 34px 4px at 87% 35%,#ffffffed,transparent),
  radial-gradient(ellipse 95px 8px at 72% 46%,#fff9d9e6,transparent),
  radial-gradient(ellipse 52px 5px at 47% 56%,#fffdebd9,transparent),
  radial-gradient(ellipse 110px 9px at 65% 70%,#fff8d4d9,transparent),
  radial-gradient(ellipse 40px 5px at 91% 76%,#ffffffde,transparent),
  radial-gradient(ellipse 80px 6px at 48% 88%,#fffdebd9,transparent);
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: .85;
  animation: water-shimmer 3.8s ease-in-out infinite alternate;
}

@keyframes water-shimmer {
from {
    opacity: .55;
    transform: translate(-12px,-3px) scaleX(.94);
    filter: blur(2px)
  }
to {
    opacity: 1;
    transform: translate(12px,3px) scaleX(1.06);
    filter: blur(4px)
  }
}

@media(prefers-reduced-motion:reduce) {
.sea.image-waves:after {
    animation: none
  }
}
.sea.image-waves.four-waves {
  height: calc(var(--wave-height) * 2.4)
}
.sea.four-waves i:nth-of-type(1) {
  --wave-image: url('hihi/00/h1.png');
  top: 0;
  z-index: 1
}
.sea.four-waves i:nth-of-type(2) {
  --wave-image: url('hihi/00/h2.png');
  top: calc(var(--wave-height) * .4);
  z-index: 2;
  animation-duration: 19s
}
.sea.four-waves i:nth-of-type(3) {
  --wave-image: url('hihi/00/h3.png');
  top: calc(var(--wave-height) * 1.00);
  z-index: 3;
  animation-duration: 28s
}
.sea.four-waves i:nth-of-type(4) {
  --wave-image: url('hihi/00/h4.png');
  top: calc(var(--wave-height) * 1.5);
  z-index: 4;
  animation-duration: 26s
}
.sea.image-waves .wave-tile {
  position: absolute;
  top: 0;
  left: calc(var(--tile-index) * var(--wave-step));
  width: var(--wave-width);
  height: 100%;
  background: var(--wave-image) center / 100% 100% no-repeat;
}
.sun.image-sun {
  animation: sun-glow-pulse 6s ease-in-out infinite alternate
}

@keyframes sun-glow-pulse {
from {
    filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 10px rgba(255,253,210,.75)) drop-shadow(0 0 28px rgba(255,229,120,.5)) drop-shadow(0 0 55px rgba(255,221,100,.28))
  }
to {
    filter: brightness(1.15) saturate(1.15) drop-shadow(0 0 16px rgba(255,253,210,.95)) drop-shadow(0 0 40px rgba(255,229,120,.7)) drop-shadow(0 0 75px rgba(255,221,100,.42))
  }
}

@media(prefers-reduced-motion:reduce) {
.sun.image-sun {
    animation: none
  }
}
.sun.image-sun:before {
  content: '';
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,rgba(255,250,195,.65) 0%,rgba(255,230,120,.4) 30%,rgba(255,225,110,.15) 48%,transparent 70%);
  filter: blur(12px);
  animation: sun-halo-breathe 3s ease-in-out infinite alternate;
}

@keyframes sun-halo-breathe {
from {
    opacity: .2;
    transform: scale(.8)
  }
to {
    opacity: .8;
    transform: scale(1.2)
  }
}

@media(prefers-reduced-motion:reduce) {
.sun.image-sun:before {
    animation: none;
    opacity: .45
  }
}
.rays {
  z-index: 1;
  background:
  radial-gradient(ellipse 18% 38% at 86% 28%,rgba(255,244,181,.34),rgba(255,235,159,.14) 48%,transparent 78%),
  radial-gradient(ellipse 28% 12% at 80% 46%,rgba(255,245,192,.3),transparent 75%);
  filter: blur(26px);
  transform-origin: 86% 12%;
  animation: sunlight-to-water 4s ease-in-out infinite alternate;
}
.sea.image-waves:before {
  animation: water-glow-pulse 4s ease-in-out infinite alternate;
}

@keyframes sunlight-to-water {
from {
    opacity: .35;
    transform: scaleX(.92)
  }
to {
    opacity: .9;
    transform: scaleX(1.08)
  }
}

@keyframes water-glow-pulse {
from {
    opacity: .3;
    transform: scale(.96)
  }
to {
    opacity: .9;
    transform: scale(1.05)
  }
}

@media(prefers-reduced-motion:reduce) {
.rays,
.sea.image-waves:before {
    animation: none;
    opacity: .6
  }
}
.rays {
  background: none;
  filter: none;
  opacity: 1;
  transform: none;
  animation: none;
}
.rays:before,
.rays:after {
  content: '';
  position: absolute;
  pointer-events: none;
  top: 12%;
  height: 48%;
  transform-origin: 80% 0;
  background: linear-gradient(180deg,rgba(255,252,216,.65),rgba(255,246,185,.3) 55%,rgba(255,249,207,.5) 85%,transparent);
  filter: blur(2px);
  animation: sunbeam-pulse 4s ease-in-out infinite alternate;
}
.rays:before {
  left: 49%;
  width: 44%;
  clip-path: polygon(89% 0,92% 0,55% 100%,0 100%);
}
.rays:after {
  left: 69%;
  width: 29%;
  clip-path: polygon(52% 0,56% 0,100% 100%,37% 100%);
  background: linear-gradient(180deg,rgba(255,252,216,.5),rgba(255,246,185,.15) 60%,rgba(255,249,207,.35) 85%,transparent);
}

@keyframes sunbeam-pulse {
from {
    opacity: .35
  }
to {
    opacity: .75
  }
}

@media(prefers-reduced-motion:reduce) {
.rays:before,
.rays:after {
    animation: none;
    opacity: .55
  }
}
.rays {
  filter: blur(14px)
}
.rays:before,
.rays:after {
  filter: blur(8px)
}

@keyframes sunbeam-pulse {
from {
    opacity: .65
  }
to {
    opacity: 1
  }
}

@media(prefers-reduced-motion:reduce) {
.rays:before,
.rays:after {
    opacity: .8
  }
}
.rays {
  filter: blur(4px)
}
.rays:before,
.rays:after {
  filter: blur(5px)
}
.rays:before {
  background: linear-gradient(180deg,rgba(255,252,216,.7),rgba(255,246,185,.6) 55%,rgba(255,249,207,.85) 94%,rgba(255,249,207,.85) 100%);
}
.rays:after {
  background: linear-gradient(180deg,rgba(255,252,216,.55),rgba(255,246,185,.45) 60%,rgba(255,249,207,.7) 94%,rgba(255,249,207,.7) 100%);
}
.rays {
  display: none
}
.sea .underwater-sunlight {
  content: '';
  position: absolute;
  left: 24%;
  top: calc(var(--wave-height) * 2.15);
  width: min(75vw,1000px);
  height: clamp(150px,25vh,300px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 65% 0%,rgba(255,250,206,.5),rgba(193,244,255,.23) 35%,transparent 72%);
  filter: blur(22px);
  animation: underwater-sunlight 5s ease-in-out infinite alternate;
}

@keyframes underwater-sunlight {
from {
    opacity: .5
  }
to {
    opacity: .85
  }
}

@media(prefers-reduced-motion:reduce) {
.sea .underwater-sunlight {
    animation: none;
    opacity: .65
  }
}
.sea.image-waves {
  z-index: auto
}
.intro {
  top: 8vh;
  left: 9vw;
  max-width: 82vw;
  color: #153e50
}
.intro h1 {
  font-family: 'Manrope',sans-serif;
  font-size: clamp(64px,10vw,150px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.06em;
  margin: 0 0 22px;
  color: #153e50;
}
.intro .intro-degree {
  font-family: 'Manrope',sans-serif;
  font-size: clamp(18px,2.2vw,30px);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 2px;
  color: #224e60;
}
.intro .intro-university {
  font-family: Georgia,'Times New Roman',serif;
  font-size: clamp(16px,1.8vw,24px);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
  color: #365e6d;
}

@media(max-width:700px) {
.intro {
    top: 7vh;
    left: 7vw;
    max-width: 86vw
  }
.intro h1 {
    margin-bottom: 18px
  }
}
.zone.z1,
.zone.sink {
  height: auto;
  min-height: 0;
}
.zone.z1 {
  padding-top: 25vh;
  padding-bottom: clamp(48px, 8vh, 90px);
}
.zone.sink {
  padding-bottom: 18vh;
}
.zone.z1 > article,
.zone.sink > article {
  position: relative;
  top: auto;
}
.about-section {
  height: auto;
  min-height: 0;
  padding: 8vh 10vw 0;
}
.about-card {
  position: relative;
  z-index: 4;
  width: min(680px, 100%);
  color: #eaffff;
}
.about-card h2 {
  margin: 0 0 28px;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.about-card p {
  margin: 0 0 20px;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.85;
}
.about-card a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.about-card a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 700px) {
.about-section {
    padding: 6vh 7vw 0;
  }
}
#submarineTorch {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 34;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  filter: blur(7px);
  mix-blend-mode: screen;
  transition: opacity .35s ease;
}

@media (prefers-reduced-motion: reduce) {
#submarineTorch { transition: none; }
}
.folder-section {
  height: auto;
  min-height: 0;
  padding: 10vh 8vw 14vh;
  position: relative;
  z-index: 40;
  overflow: visible;
}
.folder-heading {
  max-width: 850px;
  margin: 0 auto 56px;
}
.folder-heading h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.045em;
  margin: 14px 0;
}
.folder-heading p {
  color: #b8ccd8;
  font-size: 12px;
  line-height: 1.6;
}
.folder-thumbnail {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  border-radius: 8px;
}

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

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

@media (prefers-reduced-motion: reduce) {
}
.zone.skills-panel {
  height: auto;
  min-height: 0;
  padding: 0 0 8vh;
}
.zone.skills-panel > article {
  position: relative;
  top: auto;
}
.skills-panel article p,
.skills-panel .language-levels {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #eaffff;
  opacity: .9;
}
.skills-panel article h3 {
  margin: 28px 0 10px;
}
.skills-panel .language-levels {
  padding-left: 20px;
}
.crash-anchor {
  position: relative;
  height: 55vh;
  min-height: 300px;
}
.crash-anchor {
  height: 90vh;
  min-height: 520px;
}
#fish {
  max-width: 94vw;
  max-height: 82vh;
}
#person {
  max-width: min(60vw, 48vh);
  max-height: min(60vw, 48vh);
}
.zone.z1,
.zone.sink,
.zone.skills-panel {
  padding-left: 8vw;
  padding-right: 8vw;
}
.zone > article.centered-portfolio {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
}
.centered-portfolio h2 {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.045em;
  margin: 14px 0 32px;
}
.skills-panel article p + h3 {
  border-top: 1px solid rgba(210, 250, 255, .22);
  padding-top: 24px;
  margin-top: 28px;
}
.volunteer-section {
  height: auto;
  min-height: 100vh;
  padding: 7vh 3vw 10vh;
  position: relative;
  z-index: 40;
}
.volunteer-heading,
.volunteer-panel {
  width: min(780px, 70vw);
}
.volunteer-heading h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.045em;
  margin: 0 0 32px;
}
.volunteer-panel {
  height: 65vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 3vw, 40px);
  border-radius: 18px;
  background: #fff;
  color: #26343b;
  box-shadow: 0 20px 60px #0003;
  scrollbar-color: #a8b6bd #f1f4f5;
  cursor: auto;
}
.volunteer-entry + .volunteer-entry {
  border-top: 1px solid #e4e8eb;
  margin-top: 30px;
  padding-top: 26px;
}
.volunteer-entry h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  margin: 0 0 12px;
}
.volunteer-entry p {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  opacity: 1;
  white-space: pre-line;
}
.volunteer-entry .sample-photo-note {
  font-size: 11px;
  color: #65757f;
}
#activityViewer {
  width: min(1100px, 94vw);
  max-height: min(820px,85dvh);
  padding: 22px;
  border: 1px solid #ffffff30;
  border-radius: 18px;
  background: #151a20;
  color: #fff;
  cursor: auto;
}
#activityViewer::backdrop {
  background: #000c;
  backdrop-filter: blur(8px);
}
.activity-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
#activityPhotoTitle {
  font: 600 20px 'Manrope', sans-serif;
  margin: 0;
}
#activityViewer button {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  background: #ffffff12;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}
#activityViewer button:disabled {
  opacity: .3;
  cursor: default;
}
.activity-viewer-stage {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
#activityPhoto {
  width: 100%;
  height: 65vh;
  object-fit: contain;
}
#activityPhotoStatus {
  text-align: center;
  font-size: 12px;
  color: #cbd5df;
}
.volunteer-panel:focus-visible,
#activityViewer button:focus-visible {
  outline: 3px solid #63bace;
  outline-offset: 3px;
}

@media (max-width: 700px) {
.volunteer-section { padding-inline: 4vw; }
.volunteer-heading,
.volunteer-panel { width: 73vw; }
.volunteer-panel { padding: 18px; }
.activity-viewer-stage { gap: 6px; }
#activityViewer { padding: 12px; }
#activityPhoto { height: 55vh; }
}
.volunteer-heading,
.volunteer-panel {
  width: min(1250px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.volunteer-panel {
  height: 84vh;
  padding: clamp(24px, 4vw, 50px);
}

@media (max-width: 700px) {
.volunteer-heading,
.volunteer-panel {
    width: 88vw;
  }
.volunteer-panel {
    padding: 22px;
  }
}
#person {
  z-index: 45;
  pointer-events: none;
}
.volunteer-entry a {
  color: #17667d;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.volunteer-entry a:focus-visible {
  outline: 2px solid #17667d;
  outline-offset: 3px;
}
.photo-overflow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #001b32a6;
  color: white;
  font: 700 clamp(28px, 4vw, 56px) 'Manrope', sans-serif;
}
.volunteer-entry {
  display: grid;
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.activity-copy,
.activity-photo-grid { min-width: 0; }
.volunteer-entry h3 { font-size: clamp(24px, 2vw, 30px); }
.volunteer-entry p { font-size: clamp(16px, 1.25vw, 18px); }
.activity-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.activity-photo-grid .activity-preview:first-child { grid-column: 1 / -1; }
.activity-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #eef1f3;
  cursor: zoom-in;
}
.activity-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.activity-preview:focus-visible { outline: 2px solid #17667d; outline-offset: 3px; }
@media (max-width: 700px) {
.volunteer-entry { grid-template-columns: 1fr; gap: 18px; }
}
#pictureWindow.portfolio-detail {
  width: min(1440px, calc(100% - 32px));
  height: 94vh;
  height: 94dvh;
}
#pictureWindow.portfolio-detail .picture-header {
  padding: 0;
  border: 0;
  height: 0;
}
#pictureWindow.portfolio-detail .picture-header > div {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#pictureWindow.portfolio-detail #closePictures {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: #1a1a1ae6;
}
#pictureWindow.portfolio-detail .picture-content {
  padding-top: 64px;
}
.creative-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.creative-media-slot {
  aspect-ratio: 4 / 3;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff08;
}
.creative-media-slot img,
.creative-media-slot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.creative-media-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed #d2faff40;
  color: #a3ccd6;
}
@media (max-width: 700px) {
.creative-media-grid { grid-template-columns: 1fr; }
}
.design-section { height: auto; min-height: 100vh; position: relative; z-index: 40; padding: 9vh 0 12vh; color: #eaffff; }
.design-heading { width: min(1100px, 88%); margin: 0 auto 36px; }
.design-heading h2 { font: 700 clamp(28px, 4vw, 52px)/1.1 'Manrope', sans-serif; letter-spacing: -.045em; margin: 14px 0 20px; }
.design-heading > p:last-child { color: #b8ccd8; line-height: 1.7; }
.design-eyebrow { font: 600 11px/1.6 'Manrope', sans-serif; letter-spacing: .17em; color: #a3d9dd; }
.design-stage { position: relative; width: 100%; overflow: hidden; padding: 20px 0 36px; }
.design-card { width: min(1100px, 82vw); margin: auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding: 32px; border: 1px solid #d2faff40; border-radius: 28px; background: linear-gradient(135deg, #9be7f51c, #04223b99); backdrop-filter: blur(22px); box-shadow: 0 24px 60px #0003; }
.design-card.is-current { position: relative; z-index: 2; animation: design-arrive .45s ease both; }
.design-card.is-previous,
.design-card.is-next { position: absolute; top: 20px; opacity: .25; filter: blur(1px); transform: scale(.93); pointer-events: none; }
.design-card.is-previous { right: calc(50% + min(550px, 41vw) + 20px); }
.design-card.is-next { left: calc(50% + min(550px, 41vw) + 20px); }
.design-visual { min-width: 0; height: clamp(300px, 34vw, 460px); border-radius: 18px; overflow: hidden; background: #02182899; }
.design-visual img,
.design-visual video { width: 100%; height: 100%; object-fit: contain; display: block; }
.design-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; background: radial-gradient(ellipse at 20% 10%, #64c8c638, transparent 65%), linear-gradient(140deg, #173b53, #091a30); font: 600 20px 'Manrope', sans-serif; }
.design-placeholder-number { font-size: 100px; font-weight: 300; line-height: 1; color: #b4efed55; }
.design-placeholder small { font-size: 12px; font-weight: 400; color: #b8ccd8; }
.design-copy { align-self: center; min-width: 0; }
.design-copy h3 { font: 700 clamp(26px, 3vw, 40px)/1.15 'Manrope', sans-serif; margin: 18px 0 24px; letter-spacing: -.035em; }
.design-copy > p { line-height: 1.8; }
.design-tools { margin-top: 28px; padding-top: 20px; border-top: 1px solid #d2faff26; color: #b8ccd8; font-size: 13px; }
.design-navigation { display: flex; justify-content: center; align-items: center; gap: 24px; }
.design-navigation > button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #d2faff55; background: #9be7f515; color: #eaffff; font-size: 30px; cursor: pointer; }
.design-navigation button:hover { background: #a3d9dd44; }
.design-dots { display: flex; gap: 8px; }
.design-dots button { width: 24px; height: 24px; padding: 7px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.design-dots button::after { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: #b8ccd855; }
.design-dots button[aria-current=true]::after { background: #b8ffed; }
.design-carousel button:focus-visible,
.design-carousel:focus-visible { outline: 2px solid #b8ffed; outline-offset: 4px; }
#designCount { font-size: 12px; color: #b8ccd8; }
@keyframes design-arrive {
from { opacity: .45; transform: translateX(18px); }
to { opacity: 1; transform: translateX(0); } }
@media (max-width: 700px) {
.design-card { grid-template-columns: 1fr; gap: 20px; padding: 20px; width: 82vw; }
.design-visual { height: 260px; }
.design-card.is-previous { right: 93vw; }
.design-card.is-next { left: 93vw; }
.design-copy h3 { margin: 12px 0; }
.design-navigation { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.design-card.is-current { animation: none; } }
.design-card { width: min(1320px, 86vw); grid-template-columns: 1fr; }
.design-card.is-previous { right: calc(50% + min(660px, 43vw) + 12px); }
.design-card.is-next { left: calc(50% + min(660px, 43vw) + 12px); }
.design-media-gallery { min-width: 0; }
.design-visual { height: clamp(360px, 42vw, 580px); }
.design-description { white-space: pre-line; }
.design-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding: 12px 4px 6px; }
.design-thumbnails button { flex: 0 0 88px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #b8ccd81c; color: #eaffff; cursor: pointer; }
.design-thumbnails button[aria-pressed=true] { border-color: #b8ffed; }
.design-thumbnails img { width: 100%; height: 100%; object-fit: cover; }
.design-media-count { margin: 4px 0 0; font-size: 12px; color: #b8ccd8; }
@media (max-width: 850px) {
.design-card { grid-template-columns: 1fr; }
.design-visual { height: clamp(280px, 65vw, 500px); }
}
.design-card .design-visual { height: auto; aspect-ratio: 16 / 9; }
.design-card .design-copy { width: 100%; max-width: 1000px; margin: 0 auto; padding: 12px 0 8px; }
.design-card .design-copy h3 { color: #fff; font-size: clamp(25px, 2.5vw, 34px); }
.design-card .design-description { color: #fff; opacity: 1; font-family: 'Manrope', sans-serif; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.8; }
.design-card .design-eyebrow { color: #dcffff; opacity: 1; font-size: 13px; }
.design-card .design-tools { color: #f0faff; opacity: 1; font-size: 14px; line-height: 1.8; }
.design-media-count { color: #edfaff; font-size: 14px; }
@media (max-width: 700px) {
.design-card .design-visual { aspect-ratio: 4 / 3; }
.design-thumbnails button { flex-basis: 72px; height: 54px; }
}
.design-card {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  align-items: center;
}
.design-card .design-copy { padding: 0; }
@media (max-width: 850px) {
.design-card { grid-template-columns: 1fr; }
}
.design-card {
  align-items: stretch;
}
.design-media-gallery {
  display: flex;
  flex-direction: column;
}
.design-card .design-visual {
  height: auto;
  aspect-ratio: auto;
  flex: 0 0 auto;
}
.design-visual img,
.design-visual video {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.design-card .design-visual.design-placeholder {
  min-height: 280px;
}
.design-thumbnails {
  margin-top: auto;
  padding-top: 28px;
}
.design-card .design-copy {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.design-card .design-tools {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 24px;
}
.design-card .design-description {
  margin-bottom: 28px;
}
.design-card {
  height: 760px;
  grid-template-rows: minmax(0, 1fr);
}
.design-media-gallery { min-height: 0; }
.design-card .design-visual {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.design-card .design-visual.design-placeholder { min-height: 0; }
.design-visual img,
.design-visual video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 18px;
}
.design-thumbnails { flex-shrink: 0; margin-top: 0; }
.design-media-count { flex-shrink: 0; }
.design-card .design-copy { min-height: 0; overflow-y: auto; }
@media (max-width: 850px) {
.design-card {
    height: 980px;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.design-card .design-visual { position: relative; }
.design-expand { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border: 1px solid #ffffff66; border-radius: 10px; background: #001528cc; color: white; font-size: 27px; cursor: pointer; }
.design-media-viewer { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 60px 20px 20px; border: 0; background: #020b14f5; color: white; }
.design-media-viewer::backdrop { background: #000; }
.design-media-close { position: absolute; top: 10px; right: 16px; width: 42px; height: 42px; border: 1px solid #ffffff66; border-radius: 50%; background: #122b3c; color: white; font-size: 30px; cursor: pointer; }
.design-media-expanded { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.design-media-expanded img,
.design-media-expanded video { max-width: 100%; max-height: 100%; object-fit: contain; }
.design-media-close:focus-visible { outline: 2px solid #b8ffed; outline-offset: 3px; }
.design-media-viewer {
  width: min(1120px, 94vw);
  height: min(860px, 90vh);
  height: min(860px, 90dvh);
  margin: auto;
  padding: 60px 24px 20px;
  border: 1px solid #b8eaff40;
  border-radius: 22px;
  background: #071c2e;
  box-shadow: 0 30px 100px #0009;
}
.design-media-viewer[open] { display: flex; flex-direction: column; gap: 16px; }
.design-media-viewer::backdrop { background: #000a; backdrop-filter: blur(8px); }
.design-media-expanded { flex: 1; min-height: 0; height: auto; }
.design-popup-navigation { display: flex; flex-shrink: 0; justify-content: center; align-items: center; gap: 24px; }
.design-popup-navigation button { width: 44px; height: 44px; border: 1px solid #ffffff55; border-radius: 50%; background: #ffffff12; color: white; font-size: 30px; cursor: pointer; }
.design-popup-navigation button:disabled { opacity: .35; cursor: default; }
.design-popup-navigation button:focus-visible { outline: 2px solid #b8ffed; outline-offset: 3px; }
.design-popup-navigation span { font-size: 14px; color: #eaffff; }
.design-media-viewer,
.design-media-viewer::backdrop { cursor: auto; }
html:has(.design-media-viewer[open]) #cursorLight,
html:has(.design-media-viewer[open]) #cursorDot { visibility: hidden; }
.folder-section:has(.awards-finder) { height: auto; min-height: 100vh; padding: 8vh 4vw 12vh; }
.awards-finder { width: min(1180px, 100%); margin: auto; border: 1px solid #ffffff80; border-radius: 16px; overflow: hidden; background: #fff; color: #26343b; box-shadow: 0 28px 80px #0005; font-family: 'Manrope', sans-serif; cursor: auto; }
.finder-toolbar { display: flex; align-items: center; gap: 24px; padding: 18px 22px; background: linear-gradient(#fafafa,#ececec); border-bottom: 1px solid #d9d9dc; font-size: 14px; font-weight: 700; }
.finder-lights { display: flex; gap: 8px; }
.finder-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff6058; border: 1px solid #0001; }
.finder-lights i:nth-child(2) { background: #ffbd2e; }
.finder-lights i:nth-child(3) { background: #28c840; }
.finder-toolbar-note { margin-left: auto; color: #747b82; font-weight: 400; }
.finder-body { display: grid; grid-template-columns: 250px minmax(0,1fr); height: 650px; }
.finder-sidebar { background: #f0f1f3; border-right: 1px solid #dedfe2; padding: 24px 12px; overflow-y: auto; }
.finder-sidebar-label { font-size: 11px; font-weight: 700; color: #787f88; padding: 0 12px; letter-spacing: .08em; }
.finder-sidebar button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: #303640; font: 600 14px 'Manrope',sans-serif; cursor: pointer; margin-bottom: 6px; }
.finder-sidebar button > span:first-child { font-size: 23px; }
.finder-sidebar button small { display: block; font-size: 11px; font-weight: 400; margin-top: 5px; color: #67717d; }
.finder-sidebar button:hover { background: #e2e5e9; }
.finder-sidebar button[aria-selected=true] { background: #d5e6fb; color: #164778; }
.finder-content { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 32px; background: white; }
.finder-eyebrow { font-size: 11px; letter-spacing: .12em; color: #77838f; }
.finder-content h3 { margin: 14px 0 28px; font-size: clamp(22px,2.3vw,30px); line-height: 1.4; }
.finder-content img { display: block; width: min(100%, 720px); height: auto; border-radius: 10px; margin: 20px auto; }
.finder-description { font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.finder-description p { margin: 10px 0; white-space: pre-line; }
.finder-description a { color: #1467b4; }
.finder-status { display: flex; justify-content: space-between; gap: 12px; padding: 10px 22px; background: #f5f5f6; border-top: 1px solid #dedfe2; font-size: 11px; color: #66717c; }
.awards-finder button:focus-visible,
.finder-content:focus-visible { outline: 2px solid #247ac7; outline-offset: -2px; }
@media (max-width: 700px) {
.finder-body { grid-template-columns: 150px minmax(0,1fr); height: 580px; }
.finder-sidebar { padding: 16px 6px; }
.finder-sidebar button { padding: 10px 6px; gap: 6px; font-size: 12px; }
.finder-sidebar button > span:first-child { display: none; }
.finder-content { padding: 18px; }
.finder-toolbar { gap: 12px; padding: 14px; font-size: 12px; }
.finder-toolbar-note { display: none; }
}
.volunteer-window {
  width: min(1100px, 100%);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #ffffff80;
  border-radius: 16px;
  background: #fff;
  color: #26343b;
  box-shadow: 0 28px 80px #0005;
  font-family: 'Manrope', sans-serif;
  cursor: auto;
}
.volunteer-window .volunteer-panel {
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  scrollbar-color: #b8bec5 #f5f5f6;
}
@media (max-width: 700px) {
.volunteer-window { width: 88vw; }
}
.volunteer-window .volunteer-entry h3 {
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.4;
}
.volunteer-window .volunteer-entry p {
  font-size: 15px;
  line-height: 1.8;
}
.volunteer-window .volunteer-entry .sample-photo-note {
  font-size: 11px;
}
.awards-finder,
.volunteer-window {
  width: min(1100px, 88vw);
}
.awards-finder .finder-body,
.volunteer-window .volunteer-panel {
  height: 650px;
}
@media (max-width: 700px) {
.awards-finder .finder-body,
.volunteer-window .volunteer-panel {
    height: 580px;
  }
}
.zone > article.macos-window,
.design-card {
  background: #fff !important;
  color: #26343b;
  border: 1px solid #ffffff80 !important;
  border-radius: 16px;
  box-shadow: 0 28px 80px #0005;
  cursor: auto;
}
.zone > article.macos-window { padding-top: 88px !important; }
.macos-window::before,
.macos-window::after { display: none; }
.macos-toolbar { position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: 3; color: #303640; border-radius: 15px 15px 0 0; font-family: 'Manrope', sans-serif; }
.macos-window :is(h2,h3,h4,p,li,a) { color: #26343b; }
.macos-window p,
.macos-window li { opacity: 1; }
.macos-window .list-duration { color: #67717d; }
.macos-window.portfolio-list a { border-bottom-color: #e4e8ec !important; }
.macos-window.portfolio-list a::before { color: #6b8aaa; }
.macos-window.portfolio-list a:hover { background: #edf4fc; box-shadow: inset 2px 0 #729dcb; }
.macos-window.portfolio-list a:hover::before { color: #2468a6; text-shadow: none; }
.design-card { padding-top: 80px; }
.design-card .design-copy h3,
.design-card .design-description { color: #26343b; }
.design-card .design-eyebrow,
.design-card .design-tools,
.design-card .design-media-count { color: #64717d; }
.design-card .design-tools { border-top-color: #dfe4e9; }
.design-card .design-thumbnails button { background: #e9eef3; color: #26343b; }
.design-card .design-thumbnails button[aria-pressed=true] { border-color: #3a91ca; }
.design-card .design-thumbnails button:focus-visible { outline-color: #247ac7; }
@media (max-width: 700px) {
.macos-toolbar { gap: 12px; font-size: 12px; }
}
.finder-toolbar > span {
  display: none;
}
#pictureWindow.portfolio-detail { background: #fff; color: #26343b; border: 1px solid #ffffff80; border-radius: 16px; cursor: auto; }
#pictureWindow.portfolio-detail .picture-header { position: relative; height: 56px; min-height: 56px; padding: 16px 22px; border-bottom: 1px solid #d9d9dc; background: linear-gradient(#fafafa,#ececec); align-items: center; }
#pictureWindow.portfolio-detail #closePictures { top: 9px; right: 14px; width: 36px; height: 36px; color: #49545e; background: #e3e5e8; border-color: #cbd0d5; font-size: 25px; }
.popup-finder-body { display: grid; grid-template-columns: 200px minmax(0,1fr); flex: 1; min-height: 0; }
.popup-sidebar { min-height: 0; }
#pictureWindow.portfolio-detail .picture-header { justify-content: flex-start; }
.sidebar-toggle { display: none; }
#pictureWindow.portfolio-detail .sidebar-toggle { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid #cbd0d5; border-radius: 8px; background: #fff; color: #3a444e; font: 600 13px 'Manrope',sans-serif; cursor: pointer; }
#pictureWindow.portfolio-detail .sidebar-toggle span { font-size: 15px; line-height: 1; }
#pictureWindow.portfolio-detail .sidebar-toggle:hover { background: #eef1f4; }
#pictureWindow.portfolio-detail .sidebar-toggle[aria-expanded=false] { color: #1467b4; }
.sidebar-toggle:focus-visible { outline: 2px solid #247ac7; outline-offset: 1px; }
.popup-finder-body.sidebar-collapsed { grid-template-columns: 0 minmax(0,1fr) !important; }
.popup-finder-body.sidebar-collapsed .popup-sidebar { visibility: hidden; padding: 0; border: 0; overflow: hidden; }
.popup-sidebar button { overflow-wrap: anywhere; line-height: 1.5; }
.popup-sidebar button[aria-current=true] { background: #d5e6fb; color: #164778; }
#pictureWindow.portfolio-detail .picture-content { padding: 28px 32px; background: white; scrollbar-color: #b8bec5 #f5f5f6; }
.popup-content-title { font: 700 clamp(22px,2.3vw,30px)/1.4 'Manrope',sans-serif; margin: 0 0 24px; }
.popup-content-date { color: #64717d; }
#pictureWindow .picture-content figcaption,
#pictureWindow .picture-content figcaption :is(h1,h2,h3,h4,h5,h6) { color: #26343b; }
#pictureWindow .picture-content figcaption a { color: #1467b4; }
#pictureWindow .picture-empty { border-color: #cbd5df; }
#pictureWindow .picture-empty p { color: #64717d; }
.popup-sidebar button:focus-visible { outline: 2px solid #247ac7; outline-offset: -2px; }
html:has(#pictureWindow[open]) #cursorLight,
html:has(#pictureWindow[open]) #cursorDot { visibility: hidden; }
@media (max-width: 700px) {
.popup-finder-body { grid-template-columns: 140px minmax(0,1fr); }
#pictureWindow.portfolio-detail .picture-content { padding: 18px; }
}
.skills-panel article.macos-window p,
.skills-panel article.macos-window .language-levels {
  color: #26343b;
  opacity: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  width: auto;
  max-width: 100%;
}
.skills-panel article.macos-window p + h3 {
  border-top-color: #dfe4e9;
}
.sea.image-waves i {
  background: none;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation-name: wave-image-left;
  animation-play-state: running;
}
@keyframes wave-image-left {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(0px - var(--wave-step)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.sea.image-waves i { animation: none; }
}
.sea.image-waves i {
  left: calc(0px - var(--wave-step));
  width: calc(var(--wave-tile-count, 6) * var(--wave-step) + var(--wave-overlap));
  contain: paint;
}
.end nav { flex-wrap: wrap; }
.end nav a { display: inline-flex; align-items: center; gap: 10px; }
.contact-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.end nav a {
  gap: 14px;
  font-size: 15px;
  border-bottom: 0;
  padding-bottom: 0;
  text-decoration: none;
}
.end nav a span {
  border-bottom: 1px solid rgba(230,250,255,.55);
  padding-bottom: 6px;
}
.end .contact-logo {
  width: 44px;
  height: 44px;
}
.end nav a,
.end nav a:visited {
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.end nav a[href] { cursor: pointer; }
.end nav a[href]:hover,
.end nav a[href]:focus-visible {
  color: #fff;
  background: rgba(178, 237, 255, .14);
  box-shadow: 0 0 0 1px rgba(178, 237, 255, .45);
  transform: translateY(-3px);
}
.end nav a[href]:hover span,
.end nav a[href]:focus-visible span {
  border-bottom-color: #fff;
}
.end nav a[href]:focus-visible {
  outline: 2px solid #b8ffed;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.end nav a { transition: none; }
.end nav a[href]:hover,
.end nav a[href]:focus-visible { transform: none; }
}
.floor:has(.pearl-treasure) { height: auto; min-height: 115vh; padding: 15vh 8vw 50px; }
.floor:has(.pearl-treasure) .end { position: relative; left: auto; top: auto; z-index: 46; }
.pearl-treasure { position: relative; width: clamp(210px,24vw,340px); aspect-ratio: 1; margin: 30px auto 0; z-index: 46; }
.pearl-shell { width: 100%; height: 100%; object-fit: contain; }
#pearlButton { position: absolute; left: 42%; top: 55%; width: 24%; height: 24%; padding: 0; border: 0; background: none; cursor: pointer; animation: pearl-float 2.8s ease-in-out infinite; }
#pearlButton img { position: absolute; width: 435%; max-width: none; height: 435%; left: -182%; top: -220%; pointer-events: none; filter: drop-shadow(0 0 9px #fff) drop-shadow(0 0 18px #f6badc); }
#pearlButton:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 50%; }
@keyframes pearl-float {
0%,
100% { transform: translateY(4px) scale(1); }
50% { transform: translateY(-16px) scale(1.06); } }
#endingDialog { width: min(460px,90vw); padding: 0; border: 1px solid #fff8; border-radius: 16px; background: #fff; color: #26343b; box-shadow: 0 30px 100px #0008; cursor: auto; }
#endingDialog::backdrop { background: #001626b3; backdrop-filter: blur(6px); }
.ending-copy { padding: 32px; text-align: center; font-family: 'Manrope',sans-serif; }
.ending-copy h2 { font-size: 44px; margin: 16px 0; }
.ending-copy p { line-height: 1.7; }
#closeEnding { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; font-size: 26px; cursor: pointer; }
.returning-to-surface #manta { z-index: 90; }
html:has(#endingDialog[open]) #cursorLight,
html:has(#endingDialog[open]) #cursorDot { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
#pearlButton { animation: none; } }
.zone.abyss { height: 260vh; }
.pearl-treasure { width: clamp(300px, 36vw, 500px); }
#pearlButton img {
  filter: brightness(1.18) drop-shadow(0 0 12px #fff) drop-shadow(0 0 28px #ffe2f5) drop-shadow(0 0 45px #ffb8e6);
  animation: pearl-shine 2.8s ease-in-out infinite;
}
#pearlButton::after {
  content: '✦'; position: absolute; right: -12%; top: -12%;
  color: white; font-size: 30px; text-shadow: 0 0 12px #fff;
  animation: pearl-sparkle 2.8s ease-in-out infinite; pointer-events: none;
}
@keyframes pearl-shine {
50% { filter: brightness(1.35) drop-shadow(0 0 18px #fff) drop-shadow(0 0 38px #ffe2f5) drop-shadow(0 0 60px #ffb8e6); } }
@keyframes pearl-sparkle {
0%,
100% { opacity: .35; transform: scale(.7); }
50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
#pearlButton img,
#pearlButton::after { animation: none; }
}
#endingDialog {
  width: min(1000px, 94vw);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  background: #071923;
  color: #eaffff;
}
#endingDialog .ending-copy { padding: clamp(24px, 4vw, 52px); text-align: left; }
#endingDialog .end { position: static; }
#endingDialog .end h2 { font-size: clamp(36px, 6vw, 76px); line-height: 1.05; margin: 0 0 30px; }
#endingDialog .end nav { gap: 16px; margin-top: 24px; }
#endingDialog .end p { opacity: 1; color: #b7cbd3; font-size: 15px; line-height: 1.8; margin-top: 28px; }
#endingDialog #closeEnding { color: #26343b; }
.floor:has(.pearl-treasure) { display: grid; place-items: center; }
.floor .pearl-treasure { margin: 0 auto; }
#endingDialog {
  width: min(880px, 94vw);
  background: radial-gradient(ellipse at 100% 0%, #fce0e9 0%, transparent 55%), linear-gradient(145deg, #fffdf7, #edf7f7);
  color: #183e4b;
  border: 1px solid #fff;
  border-radius: 24px;
  box-shadow: 0 30px 120px #00101988;
}
#endingDialog .finder-toolbar { background: #ffffff80; border-bottom-color: #22445412; }
#endingDialog .ending-copy { padding: clamp(28px, 5vw, 60px); }
#endingDialog .end h2 { font-size: clamp(38px, 5.5vw, 66px); letter-spacing: -.055em; line-height: 1.08; color: #183e4b; }
#endingDialog .end h2 i { display: inline-block; margin-top: 16px; font-size: .52em; font-style: normal; font-weight: 500; letter-spacing: -.025em; color: #537b82; -webkit-text-stroke: 0; }
#endingDialog .end nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#endingDialog .end nav a { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; color: #234552; background: #ffffffa8; border: 1px solid #cbdcdf; border-radius: 16px; font-size: 12px; overflow-wrap: anywhere; }
#endingDialog .end nav a span { border: 0; padding: 0; }
#endingDialog .end nav a:hover { background: #fff; box-shadow: 0 8px 24px #24576318; }
#endingDialog .end p { color: #607780; font-size: 14px; }
#endingDialog button:focus-visible { outline: 2px solid #287a89; outline-offset: 3px; }
@media (max-width: 560px) {
#endingDialog .end nav { grid-template-columns: 1fr; }
#endingDialog .end nav a { flex-direction: row; align-items: center; padding: 12px 16px; }
}
.floor:has(.pearl-treasure) {
  height: auto;
  min-height: 100svh;
  padding: 60px 8vw 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.floor .pearl-treasure {
  flex-shrink: 0;
  margin: 0 auto;
}
.floor .sand { display: none; }
#pearlButton { top: 50%; }
.pearl-shell {
  filter: drop-shadow(0 0 8px #ffe8f340);
  animation: shell-glow 4s ease-in-out infinite;
}
@keyframes shell-glow {
0%,
100% { filter: brightness(1) drop-shadow(0 0 8px #ffe8f340); }
50% { filter: brightness(1.07) drop-shadow(0 0 18px #ffe8f370); }
}
@media (prefers-reduced-motion: reduce) {
.pearl-shell { animation: none; }
}
.pearl-treasure {
  transform-origin: 50% 85%;
  animation: shell-sway 6s ease-in-out infinite;
}
@keyframes shell-sway {
0%,
100% { transform: rotate(-1.5deg); }
50% { transform: rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
.pearl-treasure { animation: none; }
}
.pearl-farewell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  width: min(1050px, 100%);
  position: relative;
  z-index: 46;
  padding-bottom: 20px;
}
.pearl-farewell .pearl-treasure { margin: 0; }
.pearl-message { max-width: 360px; font-family: 'Manrope', sans-serif; padding: 26px 0; }
.pearl-message-star { color: #ffd9bc; font-size: 32px; text-shadow: 0 0 22px #f8b7ac88; }
.pearl-message h2 { color: #fff0e5; font-size: clamp(25px, 2.7vw, 36px); line-height: 1.25; letter-spacing: -.035em; margin: 14px 0 18px; }
.pearl-message p { color: #d9bdaf; font-size: 16px; line-height: 1.85; margin: 0 0 24px; }
.pearl-invitation { padding: 12px 18px; border: 1px solid #f7cfb850; border-radius: 24px; color: #ffe3cd; background: #f5c4a510; font: 600 14px 'Manrope', sans-serif; cursor: pointer; transition: background .2s, box-shadow .2s; }
.pearl-invitation:hover { background: #f5c4a525; box-shadow: 0 0 22px #f5c4a515; }
.pearl-invitation:focus-visible { outline: 2px solid #ffe3cd; outline-offset: 4px; }
@media (max-width: 700px) {
.pearl-farewell { flex-direction: column; gap: 8px; }
.pearl-message { text-align: center; padding: 0 12px; }
.pearl-farewell .pearl-treasure { width: min(340px, 78vw); }
}
.pearl-message h2 { font-size: clamp(30px, 3.2vw, 44px); }
.pearl-message p { font-size: clamp(18px, 1.6vw, 21px); }
.pearl-invitation {
  display: inline-block;
  border: 0;
  background: none;
  padding: 0;
  font-size: 17px;
  cursor: default;
  animation: pearl-hint-pulse 3s ease-in-out infinite;
}
.pearl-invitation:hover { background: none; box-shadow: none; }
@keyframes pearl-hint-pulse {
0%,
100% { opacity: .6; }
50% { opacity: 1; text-shadow: 0 0 14px #ffe3cd55; } }
.about-layout {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "heading portrait" "biography portrait";
  align-items: center;
  gap: 24px clamp(24px, 4vw, 64px);
  max-width: 1200px;
  margin-inline: auto;
}
.about-introduction { grid-area: heading; min-width: 0; align-self: end; }
.about-introduction h2 {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.about-layout .about-card {
  grid-area: biography;
  width: 100%;
  min-width: 0;
  align-self: start;
}
.about-layout .about-card p:last-child { margin-bottom: 0; }
.about-portrait {
  grid-area: portrait;
  display: block;
  width: 100%;
  max-width: 560px;
  min-width: 0;
  height: auto;
  object-fit: contain;
  justify-self: center;
  margin: 0;
}
@media (max-width: 800px) {
.about-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "biography" "portrait";
  }
.about-portrait { max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
.pearl-invitation { animation: none; } }
#pictureWindow .creative-media-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 28px;
}
#pictureWindow .creative-media-slot {
  aspect-ratio: auto;
  background: #f2f5f7;
}
#pictureWindow .creative-media-slot img,
#pictureWindow .creative-media-slot video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: contain;
}
#pictureWindow .creative-media-placeholder { min-height: 220px; }
.intro-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: min(860px, 82vw);
  margin-top: 100px;
}
.intro-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff;
  color: #234552;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  text-decoration: none;
}
.intro-contacts a span,
#endingDialog .end nav a span {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.intro-contacts a:hover,
.intro-contacts a:focus-visible { color: #1261d6; }
.intro-contacts a:focus-visible { outline: 2px solid #1261d6; outline-offset: 4px; }
#endingDialog .end nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding: 6px;
}
#endingDialog .end nav a,
#endingDialog .end nav a:visited {
  flex: 1 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  color: #234552;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  white-space: nowrap;
}
#endingDialog .end nav .contact-logo { width: 28px; height: 28px; }
#endingDialog .end nav a[href]:hover,
#endingDialog .end nav a[href]:focus-visible {
  background: #fff;
  box-shadow: none;
  color: #1261d6;
  transform: none;
}
#endingDialog .end nav a[href]:focus-visible { outline: 2px solid #1261d6; outline-offset: 3px; }

@media (max-width: 700px) {
#sub {
    width: min(82vw, 70vh) !important;
    height: auto !important;
    aspect-ratio: 831 / 523;
  }
}
.finder-sidebar-year { margin: 22px 12px 8px; font: 700 16px 'DM Mono', monospace; color: #26343b; }
.volunteer-window .volunteer-panel { height: max(650px, 80vh); }
@media (max-width: 700px) {
.volunteer-window .volunteer-panel { height: max(580px, 75vh); }
}
.skills-panel article .skill-list strong { font-weight: 700; }
.skills-panel article.macos-window .skill-line,
.skills-panel article.macos-window .language-levels { font-size: 18px; }
.skills-panel article.macos-window h3 { font-size: 23px; }
@media (max-width: 700px) {
.skills-panel article.macos-window .skill-line,
.skills-panel article.macos-window .language-levels { font-size: 16px; }
.skills-panel article.macos-window h3 { font-size: 20px; }
}
.portfolio-list .list-keywords { grid-column: 2; grid-row: 2; margin-top: -2px; font: 500 11.5px/1.5 'Manrope', sans-serif; letter-spacing: normal; color: #7b8590; }
.skills-panel article .skill-list li { margin-bottom: 6px; }
.skills-panel article .skill-list + h3 { border-top: 1px solid #dfe4e9; padding-top: 24px; margin-top: 28px; }
.about-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); grid-template-areas: "media heading" "media biography"; align-items: start; max-width: 1300px; padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 20px 60px #00304a26; }
.about-introduction h2 { white-space: nowrap; flex: 0 1 auto; width: auto; }
.about-media { grid-area: media; width: 100%; max-width: 360px; justify-self: center; align-self: center; }
.about-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px; border: 4px solid #ffffffd9; box-shadow: 0 16px 40px #00304a40; }
.about-layout .about-portrait { float: right; shape-outside: ellipse(50% 50%); shape-margin: 10px; margin: 0 0 0 14px !important; width: clamp(130px, 14vw, 190px); height: auto; aspect-ratio: 1320 / 1640; object-fit: cover; object-position: 55% 50%; max-width: none; filter: drop-shadow(0 10px 18px #00304a40); }
@media (max-width: 800px) {
.about-section { padding-inline: 4vw; }
.about-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "media" "biography"; }
.about-media { max-width: 280px; }
.about-layout .about-portrait { width: 124px; }
}
.about-layout .about-card::after { content: ""; display: block; clear: both; }
.about-float-spacer { float: right; width: 0; height: 0; }
.about-layout .about-portrait { clear: right; }
.crash-anchor { height: 160vh; min-height: 900px; }
.crash-warning { position: absolute; z-index: 40; pointer-events: none; top: 8%; left: 0; right: 0; margin: 0; text-align: center; font: 700 clamp(18px, 2.4vw, 30px)/1.5 'DM Mono', monospace; letter-spacing: .06em; color: #eaffff; text-shadow: 0 2px 18px #00304a80; animation: crash-warning-pulse 2.4s ease-in-out infinite; }
@keyframes crash-warning-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .crash-warning { animation: none; } }
.volunteer-section { margin-top: 130vh; }
.portfolio-list .list-badge { display: inline-block; margin-left: 6px; padding: 2px 9px; border: 1px solid #f5c400; border-radius: 999px; background: #ffe14d; color: #5c4100; font: 700 11px/1.5 'Manrope', sans-serif; letter-spacing: normal; white-space: nowrap; vertical-align: 2px; opacity: 1; }
@media (hover: hover) {
  .portfolio-list .list-keywords { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease; }
  .portfolio-list a[data-gallery]:is(:hover, :focus-visible) .list-keywords { max-height: 4.5em; opacity: 1; }
}
.award-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 5vw, 80px); max-width: 1180px; margin: 0 auto; padding: 10px 0 40px; }
.award-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #eaffff; font-family: 'Manrope', sans-serif; text-align: center; cursor: default; }
.stack-photos { position: relative; display: block; cursor: pointer; width: 100%; max-width: 320px; aspect-ratio: 4 / 5; margin-bottom: 30px; }
.stack-card { position: absolute; inset: 0; display: block; padding: 10px 10px 42px; background: #fdfdfb; border-radius: 3px; box-shadow: 0 18px 40px #0007; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.stack-card img { display: block; width: 100%; height: 100%; object-fit: cover; background: #e8ecef; }
.stack-card:last-of-type { transform: none; }
.stack-photos[data-count="2"] .stack-card:first-child { transform: rotate(6deg) translate(12px, 4px); }
.stack-photos[data-count="3"] .stack-card:first-child { transform: rotate(-8deg) translate(-16px, 6px); }
.stack-photos[data-count="3"] .stack-card:nth-child(2) { transform: rotate(6deg) translate(14px, 4px); }
.stack-photos:focus-visible { outline: none; }
.stack-photos:focus-visible .stack-card:last-of-type { outline: 3px solid #b7f4ff; outline-offset: 4px; }
.stack-award { display: inline-block; padding: 4px 12px; border: 1px solid #f5c400; border-radius: 999px; background: #ffe14d; color: #5c4100; font-size: 13px; font-weight: 700; }
.stack-project { margin-top: 6px; font-size: 21px; font-weight: 700; color: #fff; }
.stack-event { font-size: 14px; color: #b8ccd8; }
.award-total { margin: 8px auto 0; max-width: 1180px; text-align: center; font: 600 12px 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8fb4c4; }
@media (max-width: 900px) { .award-wall { grid-template-columns: minmax(0, 1fr); max-width: 340px; gap: 56px; } }
@media (prefers-reduced-motion: reduce) { .stack-card { transition: none; } }
.award-stack:is(:hover, :focus-within) { z-index: 5; }
.award-stack:is(:hover, :has(.stack-photos:focus-visible)) .stack-card:last-of-type { transform: translateY(-8px) scale(1.02); }
.award-stack .stack-card.leaving { transform: translateX(70%) rotate(10deg) !important; opacity: .0; transition: transform .32s ease-in, opacity .32s ease-in; }
.stack-counter { position: absolute; right: 12px; bottom: 10px; z-index: 4; padding: 2px 9px; border-radius: 999px; background: #26343bd9; color: #fff; font: 700 11px/1.6 'Manrope', sans-serif; letter-spacing: .06em; pointer-events: none; }
.stack-read { margin-top: 10px; padding: 7px 16px; border: 1px solid #b7f4ff66; border-radius: 999px; background: #ffffff12; color: #eaffff; font: 600 13px 'Manrope', sans-serif; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.stack-read span { display: inline-block; transition: transform .2s ease; }
.stack-read:hover { background: #ffffff26; border-color: #b7f4ff; }
.stack-read:hover span { transform: translateX(3px); }
.stack-read:focus-visible { outline: 3px solid #b7f4ff; outline-offset: 3px; }