/* ══ LAYOUT ══ */
.stage{width:100%;height:100vh;display:grid;grid-template-columns:320px 1fr;position:relative}

/* ── Terminal ── */
.code-box{
  height:100vh;
  border-right:1.5px solid transparent;
  border-radius:0 16px 16px 0;
  padding:36px 22px 36px 36px;
  overflow:hidden;background:transparent;
  transition:border-color 1s ease 0.3s,background 1s ease 0.3s,backdrop-filter 1s ease 0.3s;
  position:relative;z-index:10;
}
body.rendered:not(.on-m2):not(.on-m3):not(.on-m4):not(.on-m5):not(.on-m6):not(.on-m7) .code-box{
  border-color:rgba(255,255,255,0.35);background:rgba(255,255,255,0.06);backdrop-filter:blur(2px)
}
body.on-m2 .code-box,body.on-m3 .code-box,body.on-m4 .code-box,
body.on-m5 .code-box,body.on-m6 .code-box,body.on-m7 .code-box{
  border-color:rgba(191,241,244,0.12);background:rgba(191,241,244,0.02);backdrop-filter:none
}
.code-scroll{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.code-scroll::-webkit-scrollbar{display:none}
.code-line{font-size:11px;font-weight:300;line-height:1.9;white-space:nowrap;color:rgba(255,255,255,0.75);min-height:1.4em}
.cm{color:rgba(255,255,255,0.32)}.tg{color:#fff;font-weight:400}
.at{color:rgba(210,248,255,0.88)}.vl{color:rgba(160,230,255,0.82)}.gn{color:#7ab88a}
.tcursor{display:inline-block;width:6px;height:0.85em;background:rgba(255,255,255,0.75);vertical-align:text-bottom;margin-left:1px;animation:blink 0.9s step-end infinite}
.code-sep{display:flex;align-items:center;gap:8px;margin:16px 0 14px;font-size:9px;letter-spacing:0.14em;color:rgba(191,241,244,0.2)}
.code-sep::before,.code-sep::after{content:'';flex:1;height:1px;background:rgba(191,241,244,0.1)}

/* ── Contenido ── */
.content-area{position:relative;overflow:hidden}

/* ── Momentos ── */
.moment{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;
  padding:36px 48px 36px 40px;
  opacity:0;pointer-events:none;
  transition:opacity 0.7s ease;
}
.moment.visible{opacity:1;pointer-events:all}