.hdev-scene{display:flex;flex-direction:column;align-items:center;padding:8px 0}.hdev-stage{position:relative;width:min(100%,450px);height:400px}.hdev-code{position:absolute;left:0;top:46px;width:258px;z-index:1;background:#141414;border:1px solid rgba(255,255,255,.08);border-radius:10px;box-shadow:0 24px 48px rgba(0,0,0,.45);overflow:hidden}.hdev-code-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}.hdev-code-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}.hdev-code-body{padding:18px 14px;display:flex;flex-direction:column;gap:12px;animation:hdev-cycle 8s linear infinite}.hdev-code-row{display:flex;align-items:center;height:7px}.hdev-code-line{display:block;height:7px;width:0;border-radius:4px;background:rgba(255,255,255,.18);animation-duration:8s;animation-timing-function:steps(7);animation-iteration-count:infinite}.hdev-code-line--accent{background:rgba(212,255,97,.55)}.hdev-code-row:first-child .hdev-code-line{animation-name:hdev-type-1}.hdev-code-row:nth-child(2) .hdev-code-line{animation-name:hdev-type-2}.hdev-code-row:nth-child(3) .hdev-code-line{animation-name:hdev-type-3}.hdev-code-row:nth-child(4) .hdev-code-line{animation-name:hdev-type-4}.hdev-code-row:nth-child(5) .hdev-code-line{animation-name:hdev-type-5}.hdev-code-row:nth-child(6) .hdev-code-line{animation-name:hdev-type-6}@keyframes hdev-type-1{0%,4%{width:0}9%,to{width:var(--w)}}@keyframes hdev-type-2{0%,12%{width:0}17%,to{width:var(--w)}}@keyframes hdev-type-3{0%,20%{width:0}25%,to{width:var(--w)}}@keyframes hdev-type-4{0%,28%{width:0}33%,to{width:var(--w)}}@keyframes hdev-type-5{0%,36%{width:0}41%,to{width:var(--w)}}@keyframes hdev-type-6{0%,44%{width:0}49%,to{width:var(--w)}}@keyframes hdev-cycle{0%{opacity:0}2%,90%{opacity:1}96%,to{opacity:0}}.hdev-cursor{flex-shrink:0;width:7px;height:12px;margin-left:5px;border-radius:2px;background:#d4ff61;animation:hdev-blink 1.1s linear infinite}@keyframes hdev-blink{0%,55%{opacity:1}56%,to{opacity:0}}.hdev-code-status{display:flex;align-items:center;gap:7px;padding:9px 12px;border-top:1px solid rgba(255,255,255,.08);font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}.hdev-status-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#d4ff61;animation:hdev-pulse 3s ease-in-out infinite}.hdev-status-arrow{color:rgba(255,255,255,.3)}.hdev-status-accent{color:#d4ff61}@keyframes hdev-pulse{0%,to{opacity:.35}50%{opacity:1}}.hdev-glow{position:absolute;right:30px;bottom:42px;width:220px;height:60px;z-index:0;background:radial-gradient(ellipse at center,rgba(212,255,97,.09),transparent 66%);pointer-events:none}.hdev-stack{position:absolute;top:20px;right:36px;width:230px;height:300px;perspective:1100px;z-index:2}.hdev-stack-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}.hdev-layer{position:absolute;left:0;right:0;top:40px;height:220px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.14);transform:rotateX(58deg) rotate(-45deg) translateZ(var(--z));display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s ease;will-change:transform}.hdev-layer--accent{border-color:rgba(212,255,97,.5);background:rgba(212,255,97,.06)}.hdev-tags{position:absolute;inset:0;z-index:3;pointer-events:none}.hdev-tag{position:absolute;right:0;display:inline-flex;align-items:center;padding:3px 9px;background:rgba(10,10,10,.88);border:1px solid rgba(255,255,255,.16);border-radius:6px;font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;transition:top .4s cubic-bezier(.16,1,.3,1)}.hdev-tag:first-child{top:96px;right:-14px}.hdev-tag:nth-child(2){top:124px;right:-26px}.hdev-tag:nth-child(3){top:152px;right:-38px}.hdev-tag:nth-child(4){top:180px;right:-50px}.hdev-tag--accent{color:#d4ff61;border-color:rgba(212,255,97,.4)}.hdev-stack:hover .hdev-layer{transform:rotateX(58deg) rotate(-45deg) translateZ(calc(var(--z) * 1.7));border-color:rgba(212,255,97,.35)}.hdev-stack:hover .hdev-layer--accent{border-color:rgba(212,255,97,.65)}.hdev-stack:hover .hdev-tag:first-child{top:61px}.hdev-stack:hover .hdev-tag:nth-child(2){top:101px}.hdev-stack:hover .hdev-tag:nth-child(3){top:140px}.hdev-caption{margin:14px 0 0;font-size:12px;color:rgba(255,255,255,.4);text-align:center}.fade-in-section:not(.visible) .hdev-code,.fade-in-section:not(.visible) .hdev-layer,.fade-in-section:not(.visible) .hdev-tags{opacity:0}.fade-in-section.visible .hdev-tags{opacity:1;animation:hdev-float 6s ease-in-out 1.5s infinite}.fade-in-section.visible .hdev-tag{animation:hdev-tag-in .45s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--drop-delay) + .35s)}@keyframes hdev-tag-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.fade-in-section.visible .hdev-code{animation:hdev-slide .55s cubic-bezier(.16,1,.3,1) backwards}.fade-in-section.visible .hdev-layer{animation:hdev-drop .65s cubic-bezier(.3,1.35,.4,1) backwards;animation-delay:var(--drop-delay)}.fade-in-section.visible .hdev-stack-inner{animation:hdev-float 6s ease-in-out 1.5s infinite}.fade-in-section.visible .hdev-glow{animation:hdev-breathe 6s ease-in-out 1.5s infinite}@keyframes hdev-slide{0%{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}@keyframes hdev-drop{0%{opacity:0;transform:rotateX(58deg) rotate(-45deg) translateZ(calc(var(--z) + 170px))}55%{opacity:1}to{opacity:1;transform:rotateX(58deg) rotate(-45deg) translateZ(var(--z))}}@keyframes hdev-float{0%,to{transform:translateY(0)}30%{transform:translateY(-4px)}70%{transform:translateY(4px)}}@keyframes hdev-breathe{0%,to{opacity:1}30%{opacity:.6}70%{opacity:1}}@media (max-width:1024px){.hdev-stage{margin:0 auto}}@media (max-width:768px){.hdev-code,.hdev-glow{display:none}.hdev-stage{width:auto;height:auto;display:flex;justify-content:center}.hdev-stack{position:static;width:190px;height:260px}.hdev-layer{height:180px}}@media (prefers-reduced-motion:reduce){.fade-in-section:not(.visible) .hdev-code,.fade-in-section:not(.visible) .hdev-layer,.fade-in-section:not(.visible) .hdev-tags{opacity:1}.fade-in-section.visible .hdev-code,.fade-in-section.visible .hdev-glow,.fade-in-section.visible .hdev-layer,.fade-in-section.visible .hdev-stack-inner,.fade-in-section.visible .hdev-tag,.fade-in-section.visible .hdev-tags,.hdev-code-body{animation:none}.hdev-code-line{animation:none;width:var(--w)}.hdev-cursor,.hdev-status-dot{animation:none}}