.stage-atmosphere {
  position: absolute;
  width: 70vw;
  height: 70vw;
  left: 32%;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #dfeae580 0%,
    #ebefed25 48%,
    transparent 70%
  );
  opacity: var(--atmosphere-opacity, 1);
}
.stage-word {
  position: absolute;
  left: 48%;
  top: 12%;
  font-family: Unbounded, sans-serif;
  font-size: clamp(90px, 14vw, 230px);
  font-weight: 550;
  letter-spacing: -0.04em;
  color: #e6e8e7;
  opacity: var(--word-opacity, 0.8);
  line-height: 1;
}
.scene-perspective {
  position: absolute;
  left: var(--rig-left, 68%);
  top: var(--rig-top, 52%);
  width: 0;
  height: 0;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  transform: scale(var(--scene-scale, 1.15));
  transform-style: preserve-3d;
}
.fragment-rig {
  width: 0;
  height: 0;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(52deg) rotateY(-12deg) rotateZ(-28deg);
  will-change: transform;
}
.fragment {
  position: absolute;
  left: -90px;
  top: -58px;
  width: 180px;
  height: 116px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.fragment-face {
  position: absolute;
  backface-visibility: hidden;
  border-radius: 9px;
  overflow: hidden;
}
.fragment-front,
.fragment-back {
  width: 180px;
  height: 116px;
}
.fragment-front {
  transform: translateZ(7px);
  background: linear-gradient(130deg, #ffffff 0%, #f0f2f1 51%, #d8dfdc 100%);
  box-shadow:
    inset 0 1px 1px #fff,
    inset 0 -1px 1px #a8b6ae;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 16px;
  color: #3f5650;
}
.fragment-front::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #ffffff80;
  border-radius: 6px;
  pointer-events: none;
}
.fragment-back {
  transform: rotateY(180deg) translateZ(7px);
  background: #bdcac4;
}
.fragment-top,
.fragment-bottom {
  width: 180px;
  height: 14px;
  left: 0;
  top: 51px;
  background: linear-gradient(#e6eeea, #a3b3ab);
  border-radius: 3px;
}
.fragment-top {
  transform: rotateX(90deg) translateZ(58px);
}
.fragment-bottom {
  transform: rotateX(-90deg) translateZ(58px);
  background: #a2b2aa;
}
.fragment-left,
.fragment-right {
  height: 116px;
  width: 14px;
  top: 0;
  left: 83px;
  border-radius: 3px;
  background: linear-gradient(90deg, #9cafaa, #e2e9e5);
}
.fragment-left {
  transform: rotateY(-90deg) translateZ(90px);
}
.fragment-right {
  transform: rotateY(90deg) translateZ(90px);
  background: linear-gradient(90deg, #b9c9c1, #d5e0d9);
}
.fragment-jade .fragment-front {
  background: linear-gradient(130deg, #d4f3e5, #8bc1a8 50%, #4c9578);
  color: #163b2b;
  box-shadow:
    inset 0 1px 1px #e1fff1,
    inset 0 -1px 1px #378065;
}
.fragment-jade .fragment-back {
  background: #4b8d73;
}
.fragment-jade .fragment-top,
.fragment-jade .fragment-bottom {
  background: linear-gradient(#a1d9ba, #4f9175);
}
.fragment-jade .fragment-left,
.fragment-jade .fragment-right {
  background: linear-gradient(90deg, #3f7c62, #a1cfb8);
}
.fragment-carbon .fragment-front {
  background: linear-gradient(130deg, #45524e, #25352e 50%, #17261e);
  color: #c6ded2;
  box-shadow:
    inset 0 1px 1px #7b9084,
    inset 0 -1px 1px #0b1911;
}
.fragment-carbon .fragment-front::after {
  border-color: #83968b33;
}
.fragment-carbon .fragment-back,
.fragment-carbon .fragment-top,
.fragment-carbon .fragment-bottom,
.fragment-carbon .fragment-left,
.fragment-carbon .fragment-right {
  background: linear-gradient(#52685b, #1c2f23);
}
.fragment-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}
.fragment-heading > svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}
.fragment-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fragment-lines i {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.12;
}
.fragment-lines i:nth-child(2) {
  width: 75%;
}
.fragment-lines i:nth-child(3) {
  width: 50%;
}
.fragment-detail {
  font-size: 8px;
  font-weight: 450;
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.fragment-symbol {
  font-family: Unbounded, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.fragment-id {
  font-family: Unbounded, sans-serif;
  font-size: 10px;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.object-shadow {
  position: absolute;
  left: 51%;
  top: 76%;
  width: 34%;
  height: 7%;
  background: #31534225;
  border-radius: 50%;
  filter: blur(24px);
  transform: rotate(-12deg);
  opacity: var(--shadow-opacity, 0.65);
  will-change: opacity;
}
.diagram-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
  z-index: 4;
  color: var(--scene-label, #2d493c);
}
.diagram-overlay.is-active {
  visibility: visible;
}
.layer-note {
  position: absolute;
  left: 86%;
  width: 175px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  transform: translateY(-50%);
  color: #a3b8ad;
}
.mechanism-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: #708b7b;
  stroke-width: 1;
  pointer-events: none;
}
.layer-flow {
  stroke-dasharray: 2 5;
  opacity: 0.7;
}
.handoff-paths {
  stroke: #648875;
  stroke-width: 1.25;
}
.handoff-route {
  marker-end: url(#handoff-arrow);
}
.layer-note strong {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  color: #e1ece5;
}
.layer-note-a {
  top: 31%;
}
.layer-note-b {
  top: 43%;
}
.layer-note-c {
  top: 55%;
}
.layer-note-d {
  top: 67%;
}
.client {
  position: absolute;
  font-size: 14px;
  font-weight: 600;
  color: #43554c;
  transform: translate(-50%, -50%);
}
.client-a {
  left: 53%;
  top: 29%;
}
.client-b {
  left: 79%;
  top: 29%;
}
.client-c {
  left: 67%;
  top: 80%;
}
.identity-label {
  position: absolute;
  left: 67%;
  top: 46%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #1d4030;
}
.identity-label > span {
  display: block;
  font-size: 10px;
  color: #75847b;
}
.identity-label strong {
  display: block;
  font-size: 48px;
  font-weight: 550;
  letter-spacing: -0.04em;
  margin: 7px 0;
}
.identity-label small {
  font-size: 10px;
  color: #75847b;
  white-space: nowrap;
}
.memory-label {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  color: #516458;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recent-label {
  left: 54%;
  top: 23%;
}
.recent-label > strong {
  font-family: Unbounded, sans-serif;
  font-size: 47px;
  font-weight: 450;
  color: #337959;
}
.recent-label strong > span {
  font-size: 14px;
  margin-left: 8px;
  font-family: inherit;
}
.memory-label > span {
  font-size: 11px;
}
.archive-label {
  left: 80%;
  top: 35%;
  align-items: flex-start;
}
.archive-label strong {
  font-size: 18px;
  font-weight: 550;
}
.archive-label > span {
  font-size: 10px;
}
.recall-label {
  position: absolute;
  left: 54%;
  bottom: 19%;
  font-size: 12px;
  font-weight: 500;
  color: #3a7c5c;
}
.taste-overlay > span {
  position: absolute;
  font-size: 14px;
  transform: translateX(-50%);
  font-weight: 550;
}
.taste-overlay > span:nth-child(1) {
  left: 53%;
  top: 27%;
}
.taste-overlay > span:nth-child(2) {
  left: 80%;
  top: 31%;
}
.taste-overlay > span:nth-child(3) {
  left: 67%;
  top: 69%;
}
.confirmation-seal {
  position: absolute;
  left: 67%;
  top: 47%;
  transform: translate(-50%, -50%);
  border: 1px solid #7da28e;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  color: #367454;
  background: #edf2ef;
}
.confirmation-seal svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.5;
}
.team-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  font-weight: 550;
  white-space: nowrap;
}
.team-label small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #7a8980;
}
.team-hr {
  left: 54%;
  top: 28%;
}
.team-lead {
  left: 80%;
  top: 28%;
}
.team-doer {
  left: 54%;
  top: 80%;
}
.team-manager {
  left: 80%;
  top: 80%;
}
@media (min-width: 1700px) {
  .scene-perspective {
    --scene-scale: 1.5;
  }
  .layer-note {
    font-size: 12px;
  }
  .layer-note strong {
    font-size: 13px;
  }
}
@media (max-width: 1050px) {
  .scene-perspective {
    --scene-scale: 0.88;
  }
  .stage-word {
    left: 50%;
    font-size: 130px;
    top: 14%;
  }
  .layer-note {
    left: 83%;
    width: 135px;
  }
  .layer-note strong {
    font-size: 11px;
  }
  .layer-note span {
    font-size: 11px;
  }
  .identity-label strong {
    font-size: 40px;
  }
  .confirmation-seal {
    width: 92px;
    height: 92px;
  }
  .client {
    font-size: 12px;
  }
  .memory-label strong {
    font-size: 37px;
  }
  .archive-label strong {
    font-size: 15px;
  }
  .team-label {
    font-size: 14px;
  }
}
@media (max-width: 700px) {
  .scene-perspective {
    left: var(--rig-mobile-left, 50%);
    top: 69%;
    --scene-scale: var(--mobile-scale, 0.68);
    perspective: 900px;
  }
  .stage-word {
    left: 8%;
    top: 52%;
    font-size: 23vw;
    opacity: var(--word-opacity, 0.8);
  }
  .stage-atmosphere {
    left: -25%;
    top: 40%;
    width: 150vw;
    height: 150vw;
  }
  .object-shadow {
    left: 14%;
    top: 88%;
    width: 72%;
    height: 5%;
    filter: blur(18px);
  }
  .layer-note {
    left: 69%;
    width: 28%;
    font-size: 11px;
  }
  .layer-note strong {
    font-size: 10px;
    line-height: 1.4;
  }
  .layer-note-a {
    top: 52%;
  }
  .layer-note-b {
    top: 61%;
  }
  .layer-note-c {
    top: 70%;
  }
  .layer-note-d {
    top: 79%;
  }
  .client {
    font-size: 11px;
  }
  .client-a {
    left: 22%;
    top: 51%;
  }
  .client-b {
    left: 77%;
    top: 51%;
  }
  .client-c {
    left: 50%;
    top: 88%;
  }
  .identity-label {
    left: 50%;
    top: 67%;
  }
  .identity-label strong {
    font-size: 34px;
  }
  .identity-label > span {
    font-size: 10px;
  }
  .identity-label small {
    font-size: 10px;
  }
  .recent-label {
    left: 24%;
    top: 47%;
  }
  .recent-label > strong {
    font-size: 33px;
  }
  .recent-label > strong span {
    font-size: 10px;
  }
  .memory-label > span {
    font-size: 9px;
  }
  .archive-label {
    left: 74%;
    top: 56%;
  }
  .archive-label strong {
    font-size: 13px;
  }
  .archive-label > span {
    font-size: 8px;
  }
  .recall-label {
    left: 19%;
    bottom: 15%;
    font-size: 10px;
  }
  .taste-overlay > span {
    font-size: 11px;
  }
  .taste-overlay > span:nth-child(1) {
    left: 22%;
    top: 51%;
  }
  .taste-overlay > span:nth-child(2) {
    left: 79%;
    top: 51%;
  }
  .taste-overlay > span:nth-child(3) {
    left: 50%;
    top: 88%;
  }
  .confirmation-seal {
    left: 50%;
    top: 67%;
    width: 76px;
    height: 76px;
    font-size: 8px;
    gap: 3px;
  }
  .confirmation-seal svg {
    width: 24px;
    height: 24px;
  }
  .team-label {
    font-size: 12px;
  }
  .team-label small {
    font-size: 10px;
  }
  .team-hr {
    left: 24%;
    top: 53%;
  }
  .team-lead {
    left: 78%;
    top: 53%;
  }
  .team-doer {
    left: 24%;
    top: 88%;
  }
  .team-manager {
    left: 78%;
    top: 88%;
  }
}
@media (max-width: 380px) {
  .scene-perspective {
    --scene-scale: 0.59;
  }
}