/* Project worlds share controls, not scenery. */
.game-stack {
  position:relative;
  min-height:640px;
  isolation:isolate;
}
.game-stack .universe-phone {
  position:relative;
  width:min(75%,280px);
  aspect-ratio:390/844;
  z-index:1;
}
.game-stack .universe-phone>img {
  width:100%;
  height:auto;
  aspect-ratio:390/844;
}
.game-stack .universe-phone>video {
  inset:auto;
  left:3.076923%;
  top:18.483412%;
  width:93.846154%;
  height:64.550318%;
  object-fit:cover;
}
.game-rear {
  position:absolute;
  width:51%;
  max-width:220px;
  height:auto;
  border:6px solid #12231e;
  border-radius:20px;
  box-shadow:0 26px 50px #0007;
  opacity:.78;
}
.game-rear--left {
  left:0;
  top:14%;
  transform:rotate(-9deg);
}
.game-rear--right {
  right:0;
  top:6%;
  transform:rotate(9deg);
}
.universe .universe-window--map,
.showcase .universe-window--map {
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  min-height:0;
  padding:20px 0;
}
.universe-window--map>figcaption {
  max-width:76ch;
}
.universe-window--map>figcaption h3 {
  font-size:clamp(40px,5vw,76px);
}
.showcase figcaption,
.world-after {
  padding:20px;
  background:#101d19f2;
  border-left:1px solid #d6ac7540;
}
.flow-plate {
  container-type:inline-size;
  display:block;
  width:100%;
  min-width:0;
  padding:32px;
  box-sizing:border-box;
  border:1px solid #ccceb936;
  background:#12221ff5;
  box-shadow:0 32px 80px #0003;
}
.flow-heading {
  display:flex;
  align-items:center;
  gap:18px;
  padding-bottom:26px;
  border-bottom:1px solid #ccceb92b;
  margin-bottom:32px;
}
.flow-heading>img {
  width:54px;
  height:54px;
  object-fit:contain;
  border-radius:12px;
}
.flow-heading>p {
  margin:0;
  color:#d6ac75;
  font:12px/1.5 var(--mono);
}
.flow-heading span {
  display:block;
  font:14px/1.6 var(--sans);
  color:#c0c9b7;
  margin-top:5px;
}
.flow-sequence {
  list-style:none;
  display:grid;
  gap:12px;
  padding:0;
  margin:0;
  counter-reset:flow;
}
.flow-step {
  position:relative;
  min-width:0;
  counter-increment:flow;
}
.flow-node {
  box-sizing:border-box;
  padding:22px;
  border-top:1px solid #d6ac7580;
  background:#192e28;
  color:#f4f0e3;
  min-width:0;
}
.flow-step .flow-node::before {
  content:counter(flow,decimal-leading-zero);
  display:block;
  color:#d6ac75;
  font:10px/1.5 var(--mono);
  margin-bottom:12px;
}
.flow-node h4,
.nfz-console h4 {
  margin:0 0 12px;
  font:22px/1.2 var(--serif);
  letter-spacing:-.02em;
}
.flow-node p {
  margin:0;
  color:#cbd3c2;
  font:15px/1.6 var(--sans);
}
.flow-transfer {
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:12px;
  min-height:66px;
  color:#d6ac75;
}
.flow-transfer>span {
  font:14px/1.5 var(--mono);
}
.flow-wire {
  width:54px;
  height:20px;
  overflow:visible;
  transform:rotate(90deg);
  color:#d6ac75;
}
.flow-wire path {
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.flow-wire .flow-packet {
  stroke-width:3;
  stroke-dasharray:2 18;
  opacity:0;
}
.flow-return {
  display:grid;
  gap:12px;
  border-top:1px dashed #d6ac7550;
  margin-top:24px;
  padding-top:20px;
}
.flow-return p {
  margin:0;
  color:#c0c9b7;
  font:14px/1.6 var(--sans);
}
.flow-return p>span {
  color:#d6ac75;
  margin-right:10px;
  font-size:24px;
}
.review-pair {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.review-pair>span {
  border:1px solid #b1c3b147;
  padding:4px 7px;
  font:14px var(--mono);
}
.flow-caption {
  color:#c0c9b7;
  font:12px/1.7 var(--mono);
  margin:26px 0 0;
  max-width:95ch;
}
.flow-output,
.flow-node .flow-output {
  font:14px/1.6 var(--mono);
  color:#e2bc8b;
  margin-top:14px;
}
.prototype-note {
  display:inline-block;
  border:1px solid #b0c49770;
  padding:8px 12px;
  color:#e5e8d6 !important;
  font:14px/1.5 var(--mono) !important;
}
.nfz-map,
.nfz-inputs {
  display:grid;
  gap:26px;
}
.nfz-lane {
  display:grid;
  gap:0;
}
.nfz-lane .flow-transfer {
  padding-left:12px;
}
.actor-outline {
  display:block;
  position:relative;
  width:30px;
  height:42px;
  margin-bottom:14px;
  border:1px solid #b8c4ae;
  border-radius:45% 45% 0 0;
  border-bottom:0;
}
.actor-outline::before {
  content:"";
  position:absolute;
  left:8px;
  top:-14px;
  width:13px;
  height:13px;
  border:1px solid #d6ac75;
  border-radius:50%;
  background:#192e28;
}
.actor-outline--movement {
  transform:rotate(-14deg);
}
.nfz-clock {
  border-style:dashed;
  background:#24392c;
}
.nfz-clock small {
  display:block;
  margin-top:12px;
  font:14px/1.5 var(--sans);
  color:#cbd3c2;
}
.clock-outline {
  float:right;
  width:28px;
  height:28px;
  border:1px solid #d6ac75;
  border-radius:50%;
  background:linear-gradient(90deg,transparent 48%,#d6ac75 49% 51%,transparent 52%) center top/100% 50% no-repeat;
}
.nfz-engine {
  border:1px solid #b4c29280;
  background:#293d2d;
}
.sound-buses {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin:20px 0;
}
.sound-buses span {
  border-left:2px solid #ccb17a;
  padding-left:8px;
  font:14px/1.7 var(--mono);
  color:#dfe1cb;
}
.speaker-field {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.speaker-field i {
  width:26px;
  height:48px;
  border:1px solid #d5c5a2;
  background:radial-gradient(circle,#111f1b 25%,#b5b99b 27% 30%,transparent 32%) center/22px 22px no-repeat;
}
.speaker-field i:nth-child(2) {
  width:42px;
  height:42px;
  background-size:34px 34px;
}
.nfz-console {
  display:grid;
  align-items:center;
  gap:24px;
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid #adbd9b47;
}
.nfz-console p {
  color:#cbd3c2;
  font:14px/1.7 var(--sans);
}
.nfz-console p>strong {
  display:block;
  margin-bottom:6px;
  color:#e2bc8b;
  font:12px/1.5 var(--mono);
}
.nfz-console a {
  font-size:13px;
}
.gift-map {
  display:grid;
  gap:12px;
}
.gift-map .flow-node {
  background:#292b28;
}
.gift-wallet {
  border-top-color:#ebcf95;
  background:#393629 !important;
}
.signature-line {
  display:block;
  width:75px;
  height:20px;
  border-bottom:1px solid #e4c68c;
  margin-bottom:18px;
  transform:skewY(-6deg);
}
.gift-return {
  margin-top:16px !important;
  color:#ded2b6 !important;
  font:14px/1.5 var(--mono) !important;
}
.gift-chain {
  border:1px solid #ddc39780;
  background:repeating-linear-gradient(0deg,transparent 0 29px,#dbc7a60c 30px),#363126 !important;
}
.gift-chain .eyebrow,
.nfz-engine .eyebrow {
  color:#e2bc8b;
  font:14px/1.6 var(--mono);
  margin-bottom:14px;
}
.project-passport {
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid #bac6ac40;
  width:100%;
}
.project-passport .passport-collaboration {
  color:#f4f0e3;
  font:500 18px/1.5 var(--sans);
  margin:0 0 6px;
}
.project-passport .passport-meta {
  font:14px/1.7 var(--sans);
  color:#d0d7c7;
  margin:0;
  font-variant-numeric:tabular-nums;
}
.project-passport .passport-source {
  font:11px/1.8 var(--mono);
  color:#c0c9b7;
  max-width:90ch;
  margin:12px 0 0;
}
.project-passport dl {
  display:grid;
  gap:0;
  margin:14px 0 0;
}
.project-passport dl>div {
  padding:9px 0;
  border-top:1px solid #bac6ac26;
}
.project-passport dt {
  color:#e2bc8b;
  font:10px/1.7 var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.project-passport dd {
  color:#d0d7c7;
  font:14px/1.7 var(--sans);
  margin:5px 0 0;
  max-width:90ch;
}
.world-after {
  min-width:0;
}
.world-after>p {
  max-width:75ch;
  font:14px/1.7 var(--sans);
  color:#c0c9b7;
}
/* Each world is a separate depth composition under the one dialog owner. */
.world-depth {
  display:none;
  position:absolute;
  inset:0;
  overflow:hidden;
}
.world-plane {
  position:absolute;
  pointer-events:none;
  transform:translate3d(calc(var(--depth-x)*var(--plane-x,20px)),calc(var(--depth-y)*var(--plane-y,12px) + var(--depth-scroll)*var(--plane-scroll,-50px)),0);
}
.world-depth--om .world-plane--far {
  inset:-40%;
  --plane-x:-32px;
  --plane-y:-24px;
  background:repeating-linear-gradient(90deg,transparent 0 79px,#bed2cb0b 80px),repeating-linear-gradient(0deg,transparent 0 79px,#bed2cb0b 80px);
  rotate:-18deg;
}
.world-depth--om .world-plane--near {
  width:75%;
  height:58%;
  top:25%;
  left:18%;
  border:1px solid #bbcfc729;
  border-radius:50%;
  rotate:-27deg;
  box-shadow:0 0 0 90px #bbcfcb05,0 0 0 180px #bbcfcb04;
}
.world-depth--nfz .world-plane--far {
  width:110%;
  height:85%;
  top:10%;
  left:-20%;
  --plane-x:-26px;
  border-radius:50%;
  background:repeating-radial-gradient(ellipse,#aebd7411 0 1px,transparent 2px 56px);
  rotate:-18deg;
}
.world-depth--nfz .world-plane--near {
  inset:16% 10%;
  border-radius:50%;
  background:radial-gradient(ellipse,#c2a05f24,transparent 65%);
  --plane-x:44px;
  --plane-scroll:-85px;
}
.world-depth--giftme .world-plane--far {
  inset:20% -20% -30%;
  --plane-x:-30px;
  background:repeating-linear-gradient(0deg,transparent 0 49px,#e3be8d13 50px),repeating-linear-gradient(90deg,transparent 0 89px,#e3be8d13 90px);
  transform:perspective(600px) rotateX(52deg) translate3d(calc(var(--depth-x)*-30px),calc(var(--depth-scroll)*-60px),0);
}
.world-depth--giftme .world-plane--near {
  width:34%;
  height:65%;
  top:18%;
  right:12%;
  border:1px solid #dec38f22;
  background:linear-gradient(130deg,#b5975520,transparent 80%);
  rotate:12deg;
  box-shadow:-80px 40px 0 #cfba8710;
}
.world-depth--welinks .world-plane--far {
  width:42%;
  height:62%;
  left:8%;
  top:16%;
  --plane-x:-34px;
  border:1px solid #b3c7d02b;
  background:repeating-linear-gradient(0deg,transparent 0 31px,#bed3d911 32px),#32475216;
  rotate:-9deg;
}
.world-depth--welinks .world-plane--near {
  width:44%;
  height:54%;
  right:8%;
  top:24%;
  border:1px solid #d6b8ad28;
  background:linear-gradient(160deg,#a3657330,transparent 65%);
  rotate:12deg;
  box-shadow:28px 24px 0 #b8c6c20a;
}
#showcase[data-world="tools"] .world-depth--om,
#showcase[data-world="sound"] .world-depth--nfz,
#showcase[data-world="giftme"] .world-depth--giftme,
#showcase[data-world="welinks"] .world-depth--welinks {
  display:block;
}
#showcase:not([data-world="story"]) :is(.showcase-scene,#showcase-echo,.showcase-halo) {
  display:none;
}
#showcase[data-world="tools"] .showcase-backdrop {
  background:radial-gradient(ellipse at 35% 45%,#485d5b88,transparent 65%),#10191d;
}
#showcase[data-world="sound"] .showcase-backdrop {
  background:radial-gradient(ellipse at 30% 50%,#77834e66,transparent 60%),#18251c;
}
#showcase[data-world="giftme"] .showcase-backdrop {
  background:radial-gradient(ellipse at 70% 40%,#8e703844,transparent 65%),#211e18;
}
#showcase[data-world="welinks"] .showcase-backdrop {
  background:radial-gradient(ellipse at 70% 30%,#526d7944,transparent 65%),#151f29;
}
#showcase[data-world="instruments"] .showcase-backdrop {
  background:radial-gradient(ellipse at 12% 22%,#9c6d3a32,transparent 56%),radial-gradient(ellipse at 88% 78%,#59695630,transparent 64%),#211b17;
}
.universe .universe-window--instruments {
  grid-template-columns:minmax(0,1fr);
  min-height:0;
  gap:48px;
  padding:24px 0;
}
#universe-instruments>figcaption {
  max-width:72ch;
  padding:0;
  border:0;
  background:none;
  transform:none;
}
#universe-instruments>figcaption h3 {
  font-size:clamp(48px,6vw,88px);
  line-height:1.03;
  letter-spacing:-.04em;
}
#universe-instruments>figcaption>p { font-size:17px;line-height:1.75; }
#universe-instruments>figcaption>.sound-collaboration { font:13px/1.6 var(--mono);color:#d7b98f; }
.sound-workshop { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px; }
.sound-workshop h4 { margin:0 0 24px;font:36px/1.15 var(--serif);letter-spacing:-.02em; }
.sound-workshop dl { margin:0; }
.sound-workshop dl>div { padding:20px 0;border-top:1px solid #d0bd9c38; }
.sound-workshop dt { color:#f2e7d7;font:24px/1.3 var(--serif); }
.sound-workshop dd { color:#c9c0b2;margin:8px 0 0;font:15px/1.75 var(--sans); }
.sound-wip { border-left:1px solid #d0bd9c38;padding-left:40px; }
.sound-wip>p { color:#c9c0b2;font:15px/1.75 var(--sans); }
.sound-wip>.prototype-note { display:inline-block;margin:0 0 24px;font:12px/1.6 var(--mono); }
.sound-wip>dl { margin-top:32px; }
@media(max-width:900px) {
  .sound-workshop { grid-template-columns:minmax(0,1fr);gap:40px; }
  .sound-wip { border-left:0;padding-left:0; }
}
#showcase[data-still] .world-plane {
  transform:none;
}
.showcase .game-rear--left {
  transform:translate3d(calc(var(--depth-x)*-14px),calc(var(--depth-y)*-8px),0) rotate(-9deg);
}
.showcase .game-rear--right {
  transform:translate3d(calc(var(--depth-x)*17px),calc(var(--depth-y)*10px),0) rotate(9deg);
}
#showcase[data-still] .game-rear--left { transform:rotate(-9deg); }
#showcase[data-still] .game-rear--right { transform:rotate(9deg); }
@container(min-width:1000px) {
  .flow-sequence {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:80px;
  }
  .flow-step {
    min-height:302px;
    display:flex;
    flex-direction:column;
  }
  .flow-step .flow-node {
    min-height:240px;
    flex:1;
  }
  .flow-step:nth-child(4) { grid-area:2/3; }
  .flow-step:nth-child(5) { grid-area:2/2; }
  .flow-step:nth-child(6) { grid-area:2/1; }
  .flow-step .flow-transfer {
    display:block;
    min-height:0;
    padding-top:12px;
    max-width:85%;
    min-height:62px;
    flex-shrink:0;
    box-sizing:border-box;
  }
  .flow-step .flow-wire {
    position:absolute;
    width:80px;
    height:20px;
    top:110px;
    left:100%;
    transform:none;
  }
  .flow-left .flow-wire {
    left:-80px;
    transform:rotate(180deg);
  }
  .flow-down .flow-transfer {
    position:relative;
    max-width:none;
  }
  .flow-down .flow-transfer>span { display:block;max-width:85%; }
  .flow-down .flow-wire { display:none; }
  .flow-down .flow-transfer::before {
    content:"";
    position:absolute;
    right:24px;
    top:0;
    bottom:-80px;
    width:1px;
    background:repeating-linear-gradient(0deg,#d6ac75 0 2px,#d6ac7566 3px 18px);
    background-size:100% 18px;
  }
  .flow-down .flow-transfer::after {
    content:"";
    position:absolute;
    right:21px;
    bottom:-78px;
    width:6px;
    height:6px;
    border-right:1px solid #d6ac75;
    border-bottom:1px solid #d6ac75;
    transform:rotate(45deg);
  }
  .nfz-map {
    grid-template-columns:minmax(0,3fr) minmax(0,1.2fr) minmax(0,1fr);
    gap:32px;
    align-items:center;
  }
  .nfz-inputs {
    position:relative;
    padding-right:20px;
    border-right:1px solid #d6ac7555;
  }
  .nfz-lane {
    grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);
    align-items:center;
  }
  .nfz-lane .flow-transfer {
    display:block;
    padding:0;
  }
  .nfz-lane .flow-transfer>span {
    display:block;
    margin-top:10px;
    font-size:14px;
    overflow-wrap:anywhere;
  }
  .nfz-lane .flow-wire {
    width:88px;
    transform:none;
  }
  .nfz-engine,
  .nfz-room {
    position:relative;
  }
  .nfz-engine::before,
  .nfz-room::before {
    content:"→";
    position:absolute;
    left:-33px;
    top:45%;
    color:#d6ac75;
    font:28px var(--serif);
  }
  .nfz-console {
    grid-template-columns:1.15fr 1fr;
  }
  .gift-map {
    grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr) 88px minmax(0,1fr);
    gap:32px 0;
    align-items:stretch;
  }
  .gift-map>.flow-transfer {
    display:grid;
    grid-template-columns:1fr;
    padding:0 4px;
    align-content:center;
  }
  .gift-map .flow-wire {
    transform:none;
  }
  .gift-map .flow-transfer>span {
    font-size:14px;
    overflow-wrap:anywhere;
  }
  .gift-app { grid-area:1/1; }
  .gift-signing { grid-area:1/2; }
  .gift-wallet { grid-area:1/3; }
  .gift-submit { grid-area:1/4; }
  .gift-chain { grid-area:1/5; }
  .gift-api { grid-area:2/1; }
  .gift-read { grid-area:2/2; }
  .gift-model { grid-area:2/3; }
  .gift-index { grid-area:2/4; }
  .gift-observe { grid-area:2/5; }
  :is(.gift-read,.gift-index) .flow-wire { transform:rotate(180deg); }
  .project-passport dl>div {
    display:grid;
    grid-template-columns:104px 1fr;
    gap:16px;
  }
  .project-passport dd {
    margin:0;
  }
}
@media(max-width:760px) {
  .flow-plate { padding:20px 16px; }
  .game-stack { min-height:550px; }
  .game-stack .universe-phone { width:80%; }
  .game-rear { width:54%; }
  .showcase .universe-window--map { gap:22px; }
  .showcase figcaption { padding:18px 14px; }
  .universe-window--map>figcaption h3 { font-size:42px; }
  .flow-node { padding:20px 16px; }
}
@media(prefers-reduced-motion:no-preference) {
  #showcase[open]:not([data-still]) .universe-window:not([hidden]) .flow-packet {
    opacity:.9;
    animation:flow-direction 8s linear infinite;
  }
  #showcase[open]:not([data-still]) .flow-step:nth-child(2) .flow-packet { animation-delay:-1.5s; }
  #showcase[open]:not([data-still]) .flow-step:nth-child(3) .flow-packet { animation-delay:-3s; }
  #showcase[open]:not([data-still]) .flow-step:nth-child(4) .flow-packet { animation-delay:-4.5s; }
  #showcase[open]:not([data-still]) .flow-step:nth-child(5) .flow-packet { animation-delay:-6s; }
}
@keyframes flow-direction {
  to { stroke-dashoffset:-160; }
}
@media(prefers-reduced-motion:reduce) {
  #showcase .world-plane { transform:none; }
}

.showcase .universe-window--story {
  grid-template-columns:1.25fr 1fr;
  gap:5vw;
}
.showcase .universe-window--story>figcaption {
  max-width:none;
}
.showcase .universe-window--story>figcaption h3 {
  font-size:clamp(42px,5vw,68px);
}
.showcase .universe-window--map>figcaption {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:44px;
  max-width:none;
}
.showcase .universe-window--map>figcaption>.eyebrow {
  grid-column:1/-1;
}
.showcase .universe-window--map>figcaption>h3 {
  grid-area:2/1/5/2;
  margin:12px 0;
  font-size:clamp(42px,4.4vw,64px);
}
.showcase .universe-window--map>figcaption>p:not(.eyebrow) {
  grid-column:2;
  font-size:16px;
  margin:12px 0;
}
@media(max-width:900px) {
  .showcase .universe-window--story,
  .showcase .universe-window--map>figcaption {
    grid-template-columns:minmax(0,1fr);
  }
  .showcase .universe-window--map>figcaption>h3,
  .showcase .universe-window--map>figcaption>p:not(.eyebrow) {
    grid-area:auto;
  }
}

@media(max-width:760px) {
  .game-stack {
    min-width:0;
    max-width:100%;
    overflow:clip;
  }
}

.showcase-backdrop::after {
  background:linear-gradient(0deg,#070d0cd9,transparent 85%),linear-gradient(90deg,#091211b8,transparent 60%,#09121199);
}
@container(min-width:1000px) {
  .nfz-lane,
  .nfz-clock { position:relative; }
  .nfz-lane::after,
  .nfz-clock::after {
    content:"";
    position:absolute;
    width:20px;
    right:-20px;
    top:50%;
    border-top:1px solid #d6ac7580;
  }
}
/* Keep the backdrop pinned within the dialog's own scrollport and gutter. */
#showcase .showcase-backdrop {
  position:sticky;
  inset:0 auto auto;
  height:100vh;
  height:100dvh;
  margin-bottom:-100vh;
  margin-bottom:-100dvh;
}
.showcase .universe-stage::before {
  display:none;
}

#showcase .showcase-guide {
  padding-top:24px;
  font-size:36px;
}
#showcase .showcase-guide span {
  margin-top:8px;
}
#showcase .universe-window>figcaption>.eyebrow {
  font:11px/1.5 var(--mono);
}
#showcase .universe-window--map>figcaption>h3 {
  font-size:clamp(36px,3.4vw,50px);
  line-height:1.04;
}
#showcase .universe-window--map>figcaption>p.universe-caption {
  font:12px/1.65 var(--mono);
}

@media(prefers-reduced-motion:no-preference) {
  #showcase[open]:not([data-still]) .flow-down .flow-transfer::before {
    animation:flow-descent 8s linear infinite;
  }
}
@keyframes flow-descent {
  to { background-position-y:144px; }
}

/* Research remains visible beside each project's working demonstration. */
.project-research { margin-top:32px; padding-top:24px; border-top:1px solid #bac6ac40; max-width:90ch; }
.project-research h4 { margin:8px 0 20px; font:400 clamp(26px,3vw,38px)/1.12 var(--serif); color:#f4f0e3; }
.project-research dl { display:grid; gap:18px; margin:0; }
.project-research dt { color:#e2bc8b; font:500 14px/1.5 var(--sans); }
.project-research dd { margin:5px 0 0; color:#d0d7c7; font:14px/1.75 var(--sans); }