.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.presence {
  position:relative; isolation:isolate; overflow:hidden;
  height:clamp(730px,89svh,960px); color:#edf2e9; background:#101914;
}
.presence-portraits {
  position:absolute; z-index:-2; top:0; right:-5%; height:100%; width:min(86%,1100px);
  -webkit-mask-image:radial-gradient(ellipse 58% 66% at 56% 44%,#000 36%,#000b 57%,transparent 84%);
  mask-image:radial-gradient(ellipse 58% 66% at 56% 44%,#000 36%,#000b 57%,transparent 84%);
  pointer-events:none;
}
.presence-portrait,.presence-particles {
  position:absolute; inset:0; width:100%; height:100%; opacity:0;
  filter:saturate(.56) brightness(.88); backface-visibility:hidden;
}
.presence-portrait { object-fit:cover; object-position:center 45%; }
.presence-portrait:first-child { opacity:1; }
.presence-particles { z-index:3; display:block; }
.presence-atmosphere {
  position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:linear-gradient(90deg,#101914 1%,#101914e8 20%,#10191460 48%,transparent 76%),
    linear-gradient(0deg,#101914 0%,#101914dc 9%,transparent 36%,transparent 78%,#0c1410b0 100%);
}
.presence-content { position:relative; height:100%; display:flex; flex-direction:column; }
.presence-title {
  position:absolute; left:0; top:31%; margin:0;
  font:400 clamp(64px,6.9vw,108px)/.96 var(--sans);
  letter-spacing:-.07em; color:#eff2e9;
}
.presence-title em { font-family:var(--serif); font-weight:400; color:#c3d8c4; letter-spacing:-.045em; }
.presence-words {
  position:absolute; top:62%; left:3px; width:55%; height:80px;
  pointer-events:none;
}
.presence-phrase {
  position:absolute; inset:0; opacity:0; display:flex; align-items:center;
}
.presence-phrase:first-child { opacity:.7; }
.presence-human > span { font:400 33px/1.2 var(--serif); letter-spacing:-.035em; color:#d8e5d7; }
.presence-human.presence-japanese > span { font:400 23px/1.4 'Hiragino Mincho ProN','Yu Mincho',serif; letter-spacing:.05em; }
.presence-human.presence-persian > span { font:400 38px/1.2 'Geeza Pro','Noto Naskh Arabic',serif; }
.presence-phrase small { display:none; }
.presence-code code { display:block; font:400 clamp(12px,1.35vw,18px)/1.5 var(--mono); letter-spacing:-.035em; direction:ltr; white-space:nowrap; }
.code-function { color:#aac7b1; }
.code-string { color:#e1f0d6; }
.presence-light-seam { position:absolute; bottom:0; left:0; width:100%; height:40px; pointer-events:none; background:linear-gradient(0deg,#efefeb14,transparent); }
.presence::before { content:''; position:absolute; inset:0 0 auto; height:60px; z-index:1; pointer-events:none; background:linear-gradient(#0d1510b3,transparent); }
@media(min-width:1600px) {
  .presence-portraits { right:calc((100vw - 1600px)/2 - 20px); width:1080px; }
}
@media(max-width:900px) {
  .presence { height:740px; }
  .presence-portraits { width:105%; right:-21%; }
  .presence-title { top:34%; font-size:clamp(60px,7.8vw,80px); }
  .presence-words { top:61%; }
}
@media(max-width:650px) {
  .presence { height:790px; }
  .presence-portraits { top:-15px; right:-25%; width:145%; height:650px; }
  .presence-portrait { object-position:50% 40%; }
  .presence-atmosphere {
    background:linear-gradient(0deg,#101914 5%,#101914e6 17%,#10191466 42%,transparent 66%,#10191438 100%),
      linear-gradient(90deg,#101914ad,transparent 70%);
  }
  .presence-title { top:48%; font-size:clamp(53px,11.5vw,74px); line-height:.96; }
  .presence-words { top:66%; width:100%; height:48px; }
  .presence-human > span { font-size:28px; }
  .presence-code code { font-size:13px; }
}

/* The greeting belongs to the portrait, as the artwork’s translation caption. */
.presence-caption{position:absolute;right:0;bottom:58px;width:43%;border-top:1px solid #b8d1bd40;padding-top:17px}

.presence-words{position:relative;top:auto;left:auto;width:100%;height:87px}
.presence-phrase{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}
.presence-phrase small{display:block;font:8px var(--mono);letter-spacing:.08em;color:#91a596}
.presence-code code{font-size:clamp(12px,1.3vw,19px)}
@media(max-width:900px){.presence-caption{width:46%;bottom:48px}.presence-words{top:auto}}
@media(max-width:650px){.presence-caption{left:0;right:0;bottom:35px;width:100%}.presence-words{height:78px;top:auto}.presence-title{top:51%}.presence{height:800px}}