.blog-code-scene {
  position: relative;
  width: min(38vw, 540px);
  aspect-ratio: 1.05;
  justify-self: end;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.blog-code-aura {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, .3), rgba(124, 58, 237, .08) 44%, transparent 70%);
  filter: blur(10px);
  animation: blog-aura 6s ease-in-out infinite;
}

.blog-code-editor {
  position: absolute;
  z-index: 3;
  inset: 9% 9% 19% 2%;
  overflow: hidden;
  border: 1px solid rgba(218, 190, 255, .35);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(30, 27, 40, .98), rgba(10, 10, 15, .97));
  box-shadow: 0 35px 80px rgba(0, 0, 0, .45), 0 0 55px rgba(124, 58, 237, .16);
  transform: rotateY(-13deg) rotateX(5deg) rotateZ(-2deg);
  transform-style: preserve-3d;
  animation: blog-editor-float 8s ease-in-out infinite;
}

.blog-code-editor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .07) 48%, transparent 62%);
  transform: translateX(-110%);
  animation: blog-sheen 7s ease-in-out infinite;
}

.blog-code-bar {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .025);
}

.blog-code-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #594d64;
}

.blog-code-bar i:nth-child(2) { background: #7950a2; }
.blog-code-bar i:nth-child(3) { background: #b77dff; }

.blog-code-bar span {
  margin-left: auto;
  color: #766d7e;
  font: 600 .52rem/1 Inter, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.blog-code-body {
  position: relative;
  height: calc(100% - 46px);
  padding: clamp(25px, 3vw, 45px);
  background: linear-gradient(90deg, rgba(201, 162, 255, .035) 1px, transparent 1px), linear-gradient(rgba(201, 162, 255, .025) 1px, transparent 1px);
  background-size: 34px 34px;
}

.blog-code-kicker {
  display: block;
  margin-bottom: 26px;
  color: #c9a2ff;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.blog-code-body strong {
  display: block;
  color: #f7f3fb;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.blog-code-copy {
  display: block;
  width: 68%;
  height: 6px;
  margin-top: 34px;
  border-radius: 9px;
  background: linear-gradient(90deg, #a855f7, #c9a2ff 72%, transparent 72%);
  opacity: .72;
}

.blog-code-copy.short {
  width: 48%;
  margin-top: 12px;
  opacity: .35;
}

.blog-code-cursor {
  display: block;
  width: 2px;
  height: 20px;
  margin-top: 25px;
  background: #c9a2ff;
  box-shadow: 0 0 12px #a855f7;
  animation: blog-cursor .9s steps(1) infinite;
}

.blog-code-panel {
  position: absolute;
  z-index: 5;
  right: -3%;
  bottom: 5%;
  width: 47%;
  display: grid;
  gap: 11px;
  padding: 19px 20px;
  border: 1px solid rgba(218, 190, 255, .35);
  border-radius: 17px;
  color: #d8d0df;
  background: rgba(13, 11, 18, .9);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .42);
  backdrop-filter: blur(15px);
  transform: translateZ(70px) rotateZ(2deg);
  animation: blog-panel-float 6.5s ease-in-out infinite;
}

.blog-code-panel small {
  color: #c9a2ff;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.blog-code-panel span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .62rem;
}

.blog-code-panel i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 9px #a855f7;
}

.blog-code-card {
  position: absolute;
  z-index: 4;
  top: 2%;
  right: 0;
  width: 42%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 58, 237, .92), rgba(50, 25, 83, .92));
  box-shadow: 0 24px 50px rgba(20, 8, 35, .4);
  transform: translateZ(45px) rotateZ(4deg);
  animation: blog-card-float 7s ease-in-out infinite;
}

.blog-code-card > span {
  grid-row: 1 / 3;
  align-self: center;
  color: #e8d4ff;
  font-size: 1.3rem;
}

.blog-code-card b { font-size: .56rem; letter-spacing: .12em; }
.blog-code-card small { color: #d5c4e7; font-size: .43rem; letter-spacing: .08em; }

.blog-code-ring {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(201, 162, 255, .22);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.blog-code-ring.ring-one {
  inset: 1% 0 3% 6%;
  transform: rotateX(67deg) rotateZ(11deg);
  animation: blog-ring-one 15s linear infinite;
}

.blog-code-ring.ring-two {
  inset: 18% -4% 17% 10%;
  border-color: rgba(255, 255, 255, .1);
  transform: rotateY(70deg) rotateZ(-8deg);
  animation: blog-ring-two 18s linear infinite reverse;
}

.blog-code-node {
  position: absolute;
  z-index: 6;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9a2ff;
  box-shadow: 0 0 16px #a855f7;
}

.blog-code-node.node-one { top: 17%; left: 2%; animation: blog-node-one 5s ease-in-out infinite; }
.blog-code-node.node-two { right: 6%; bottom: 21%; animation: blog-node-two 6s ease-in-out infinite; }

@keyframes blog-editor-float { 50% { transform: translate3d(0, -10px, 20px) rotateY(-9deg) rotateX(3deg) rotateZ(-1deg); } }
@keyframes blog-panel-float { 50% { transform: translate3d(-8px, -13px, 88px) rotateZ(-1deg); } }
@keyframes blog-card-float { 50% { transform: translate3d(7px, 10px, 65px) rotateZ(1deg); } }
@keyframes blog-aura { 50% { transform: scale(1.12); opacity: .72; } }
@keyframes blog-sheen { 0%, 35% { transform: translateX(-110%); } 60%, 100% { transform: translateX(115%); } }
@keyframes blog-cursor { 50% { opacity: 0; } }
@keyframes blog-ring-one { to { transform: rotateX(67deg) rotateZ(371deg); } }
@keyframes blog-ring-two { to { transform: rotateY(70deg) rotateZ(352deg); } }
@keyframes blog-node-one { 50% { transform: translate3d(18px, -12px, 30px); } }
@keyframes blog-node-two { 50% { transform: translate3d(-15px, 10px, 45px); } }

@media (max-width: 980px) {
  .blog-code-scene { width: min(75vw, 500px); justify-self: center; }
}

@media (max-width: 680px) {
  .blog-code-scene { width: 84vw; }
  .blog-code-panel { right: 0; width: 52%; padding: 14px; }
  .blog-code-card { right: 1%; width: 47%; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-code-scene, .blog-code-scene * { animation: none !important; }
}